/* Stake & String (sportsforceparks.org): own design system, v1.0.
   Idea: a surveyor's field book. Warm paper, graphite ink, survey-flag orange for stakes, mason-line blue for strings
   and dimensions. Type: Anybody (wide display), Commissioner (text), Azeret Mono (every measurement).
   References studied (see SPEC.md): deere.com, cat.com, homedepot.com project calculators. */

@font-face { font-family: "Anybody"; src: url("fonts/anybody-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Commissioner"; src: url("fonts/commissioner-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("fonts/azeret-mono-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #F4F0E6;
  --paper-2: #EAE3D2;
  --card: #FFFDF8;
  --ink: #1E2227;
  --ink-2: #3B4149;
  --muted: #5F5D55;
  --rule: #CFC5AE;
  --flag: #F2541B;
  --flag-ink: #A8380B;
  --flag-soft: #FFE1D3;
  --string: #2946C7;
  --string-soft: #DCE3FA;
  --ok: #2E6B3F;
  --display: "Anybody", "Arial Narrow", Arial, sans-serif;
  --text: "Commissioner", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --wrap: 1240px;
  --gut: clamp(18px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--text); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--flag); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--flag-ink); }
:focus-visible { outline: 3px solid var(--string); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 720px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.fine { font-size: 14px; color: var(--muted); }
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.18em; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 800; font-stretch: 125%; line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 .4em; }
h3 { font-size: 19px; font-stretch: 112%; font-weight: 700; line-height: 1.2; }
.h-hero { font-size: clamp(40px, 6.4vw, 84px); font-stretch: 130%; }
.h-hero em { font-style: normal; color: var(--flag-ink); box-shadow: inset 0 -0.16em 0 var(--flag-soft); }
.h-xl { font-size: clamp(34px, 5vw, 62px); }
.h-lg { font-size: clamp(28px, 3.6vw, 44px); }
.h-md { font-size: clamp(24px, 2.8vw, 36px); }
.eyebrow { font: 600 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--flag-ink); margin: 0 0 14px; }
.eyebrow a { color: inherit; }
.lede { font-size: clamp(18px, 1.7vw, 21px); max-width: 44em; color: var(--ink-2); }
.sub { color: var(--ink-2); max-width: 42em; }

/* ---------- ribbon + header ---------- */
.ribbon { background: var(--ink); color: #E8E2D2; font-size: 14px; }
.ribbon-in { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gut); display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.ribbon p { margin: 0; }
.ribbon strong { color: #fff; }
.ribbon em { font-style: normal; color: #FFB08E; }
.ribbon a { color: #fff; white-space: nowrap; }
.top { background: var(--paper); border-bottom: 2px solid var(--ink); position: relative; z-index: 5; }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gut); display: flex; align-items: center; gap: 28px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark-glyph { width: 38px; height: 38px; flex: none; }
.mg-line { stroke: var(--string); stroke-width: 2.4; fill: none; }
.mg-stake { stroke: var(--ink); stroke-width: 3.2; fill: none; }
.mg-flag { fill: var(--flag); }
.mark-word { font: 800 22px/1 var(--display); font-stretch: 140%; letter-spacing: -0.02em; text-transform: uppercase; }
.amp { color: var(--flag); padding: 0 .08em; font-stretch: 100%; }
.top-nav { display: flex; gap: 4px; margin-left: auto; }
.top-nav a { text-decoration: none; padding: 8px 12px; font-weight: 600; font-size: 15px; border-bottom: 3px solid transparent; }
.top-nav a:hover { border-bottom-color: var(--rule); color: var(--ink); }
.top-nav a[aria-current="page"] { border-bottom-color: var(--flag); }
.top-cta { text-decoration: none; font-weight: 700; font-size: 15px; background: var(--flag); color: #fff; padding: 10px 16px; white-space: nowrap; }
.top-cta:hover { background: var(--flag-ink); color: #fff; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid var(--ink); font-weight: 700; font-size: 15px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; content: ""; }
.menu-bars::before { position: absolute; top: -6px; }
.menu-bars::after { position: absolute; top: 6px; }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 2px solid var(--ink); min-width: 230px; display: grid; box-shadow: 6px 6px 0 var(--ink); }
.menu nav a { padding: 13px 16px; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--rule); }
.menu nav a:last-child { border-bottom: 0; }
.menu nav a[aria-current="page"] { background: var(--flag-soft); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 16px/1 var(--text); padding: 15px 22px; border: 2px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; border-radius: 0; }
.btn-go { background: var(--flag); border-color: var(--flag); color: #fff; }
.btn-go:hover { background: var(--flag-ink); border-color: var(--flag-ink); color: #fff; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); color: #fff; }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 10px 14px; font-size: 14px; }
.btn-wide { width: 100%; }
.btn-warn { border-color: var(--flag-ink); color: var(--flag-ink); }
.btn-warn:hover { background: var(--flag-ink); color: #fff; }
.arrow { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--flag); padding-bottom: 2px; }
.arrow::after { content: " \2192"; }

/* ---------- hero ---------- */
.hero { background-color: var(--paper); background-image: linear-gradient(var(--paper-2) 1px, transparent 1px), linear-gradient(90deg, var(--paper-2) 1px, transparent 1px); background-size: 28px 28px; border-bottom: 2px solid var(--ink); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(40px, 6vw, 88px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 18px; }
.hero-price { font-size: 15px; color: var(--ink-2); margin: 0; }
.hero-plate { margin: 0; background: var(--card); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.plate-head, .plate-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 10px 14px; }
.plate-head { border-bottom: 1px solid var(--rule); color: var(--muted); }
.plate-foot { border-top: 1px solid var(--rule); text-transform: none; letter-spacing: 0; font-size: 14px; }
.plate-foot b { font-family: var(--text); font-weight: 600; color: var(--muted); margin-right: 6px; }

/* ---------- drawings ---------- */
.drw { display: block; width: 100%; height: auto; overflow: hidden; }
.p-ground { fill: var(--card); }
.p-turf { fill: #E7EDDC; stroke: none; }
.p-area { fill: #E7EDDC; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.p-margin { fill: none; stroke: var(--string); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.p-field { fill: var(--card); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.p-flab { font-family: var(--mono); font-weight: 600; fill: var(--ink); }
.p-fnum { font-family: var(--display); font-weight: 800; fill: var(--ink); display: none; }
.p-line { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.p-diag { stroke: var(--string); stroke-width: 1.3; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.p-safety { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.p-spot { fill: var(--ink); }
.p-cone { fill: var(--flag); }
.p-stake { fill: var(--flag); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-corner { font-family: var(--display); font-weight: 800; fill: var(--flag-ink); }
.p-dim { stroke: var(--string); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-dimt { font-family: var(--mono); fill: var(--string); font-weight: 600; }

/* ---------- readings band ---------- */
.readings { background: var(--ink); color: #EDE7D8; padding: clamp(48px, 6vw, 80px) 0; }
.readings .sub { color: #C9C2B0; }
.rd-row { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #4A5059; }
.rd-row li { padding: 22px 20px 6px 0; border-right: 1px solid #4A5059; margin-right: 20px; display: grid; gap: 10px; }
.rd-row li:last-child { border-right: 0; }
.rd-k { font-size: 14px; color: #C9C2B0; }
.rd-v { font-size: clamp(22px, 2.4vw, 34px); color: #FFB08E; font-weight: 600; }

/* ---------- how ---------- */
.how { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(28px, 4vw, 48px); }
.how-row { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.how-row::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; border-top: 2px dashed var(--string); }
.how-row li { position: relative; }
.how-n { display: grid; place-items: center; width: 46px; height: 46px; background: var(--paper); border: 2px solid var(--ink); font: 800 20px/1 var(--display); margin-bottom: 16px; position: relative; }
.how-row li:first-child .how-n { background: var(--flag); color: #fff; border-color: var(--flag); }
.how-row p { margin: 0; color: var(--ink-2); }

/* ---------- kinds ---------- */
.kinds { padding: clamp(28px, 4vw, 56px) 0; }
.kind-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.kind { display: grid; gap: 8px; align-content: start; text-decoration: none; background: var(--card); border: 2px solid var(--ink); padding: 26px 24px 26px 30px; position: relative; }
.kind::before { content: ""; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 8px; background: var(--flag); }
.kind:hover { box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.kind-t { font: 800 28px/1 var(--display); font-stretch: 125%; }
.kind-s { font: 500 13px/1.4 var(--mono); color: var(--string); }
.kind-d { color: var(--ink-2); font-size: 16px; }

/* ---------- park teaser ---------- */
.park-teaser { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 72px); }
.pk-plate { margin: 0; border: 2px solid var(--ink); background: var(--card); }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 2px solid var(--ink); margin: 24px 0 18px; background: var(--card); }
.plan { padding: 28px 26px; border-right: 2px solid var(--ink); display: flex; flex-direction: column; gap: 10px; }
.plan:last-child { border-right: 0; }
.plan-lead { background: var(--ink); color: #EDE7D8; }
.plan-k { font: 600 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin: 0; color: var(--flag-ink); }
.plan-lead .plan-k { color: #FFB08E; }
.plan-price { margin: 0; font-size: 16px; }
.plan-price .num { font-size: 40px; font-weight: 600; display: inline-block; margin-right: 4px; }
.plan-price .or { display: block; font-size: 15px; }
.plan-price .or .num { font-size: 15px; }
.plan ul { margin: 6px 0 12px; padding-left: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 2px; background: var(--flag); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.preview-tag { margin: auto 0 0; font-size: 14px; padding: 10px 12px; border: 1px dashed currentColor; }
.preview-note { font-size: 15px; color: var(--ink-2); max-width: 60em; }

/* ---------- page heads, prose, panels ---------- */
.pagehead { border-bottom: 2px solid var(--ink); padding: clamp(36px, 5vw, 72px) 0 clamp(28px, 4vw, 52px); background-image: linear-gradient(90deg, var(--paper-2) 1px, transparent 1px); background-size: 28px 28px; }
.pagehead-tight { padding: 32px 0 24px; }
.pagehead-tool { padding-bottom: 32px; }
.prose { padding-top: 36px; padding-bottom: 64px; max-width: 820px; margin-left: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut))); }
.prose h2 { font-size: 26px; margin-top: 1.6em; }
.prose li { margin-bottom: 8px; }
.panel { background: var(--card); border: 2px solid var(--ink); padding: 24px; }
.stack { display: grid; gap: 12px; }
.note { background: var(--string-soft); border-left: 4px solid var(--string); padding: 12px 16px; }
.alert, .problem { background: var(--flag-soft); border-left: 4px solid var(--flag-ink); padding: 14px 18px; }
.problem h2, .problem h3 { font-size: 20px; margin-bottom: 6px; }
.problem ul { margin: 0; padding-left: 20px; }
.hint { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-top: 36px; padding-bottom: 64px; }
.steps-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }

/* ---------- forms ---------- */
fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
legend { font: 600 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; padding: 0; display: flex; gap: 8px; align-items: center; }
.unit-tag { background: var(--paper-2); padding: 2px 6px; letter-spacing: 0; text-transform: none; }
label { font-weight: 600; font-size: 15px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field > span:first-child { font-size: 14px; }
input[type=text], input:not([type]), select, textarea { width: 100%; font: 500 17px/1.3 var(--mono); padding: 11px 12px; border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 0; }
textarea { font-size: 15px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--string); outline-offset: 0; }
.in-unit { display: flex; align-items: stretch; }
.in-unit input { border-right: 0; min-width: 0; }
.in-unit i { font: 500 14px/1 var(--mono); font-style: normal; display: grid; place-items: center; padding: 0 10px; border: 2px solid var(--ink); background: var(--paper-2); }
.grid-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 6px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--flag); margin-top: 2px; flex: none; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--ink); }
.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg a { text-decoration: none; padding: 10px 8px; text-align: center; font-weight: 600; font-size: 14px; line-height: 1.25; border-right: 2px solid var(--ink); }
.seg a:last-child { border-right: 0; }
.seg a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.editing { background: var(--string-soft); padding: 8px 12px; margin: 0 0 16px; font-size: 15px; }

/* ---------- tool layout ---------- */
.tool { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 32px; padding-bottom: 72px; }
.tool-form { position: sticky; top: 16px; }
.tool-out { min-width: 0; }
.sheet { background: var(--card); border: 2px solid var(--ink); }
.sheet-head { padding: 22px 24px 0; }
.sheet-title { font-size: clamp(24px, 2.6vw, 32px); }
.readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px -24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.readout div { padding: 12px 16px 12px 24px; border-right: 1px solid var(--rule); }
.readout div:last-child { border-right: 0; }
.readout dt { font-size: 13px; color: var(--muted); }
.readout dd { margin: 2px 0 0; font: 600 18px/1.3 var(--mono); }
.nw { white-space: nowrap; }
.drawing { margin: 0; padding: 18px 24px 8px; }
.drawing figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.sheet .note { margin: 0 24px 16px; }
.steps { list-style: none; margin: 8px 0 0; padding: 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--rule); }
.steps h3 { font-size: 17px; margin-bottom: 4px; }
.steps p { margin: 0; font-size: 15px; color: var(--ink-2); }
.steps p.ask { margin: 0 0 6px; font-size: 14px; font-style: italic; }
.step-n { display: grid; place-items: center; width: 36px; height: 36px; background: var(--ink); color: var(--paper); font: 800 17px/1 var(--display); }
.table-wrap { padding: 8px 24px 0; overflow-x: auto; }
.marks { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 18px; }
.marks caption { text-align: left; font: 600 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 14px 0 10px; color: var(--ink); }
.marks th, .marks td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.marks thead th { font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--ink); }
.marks tbody th { font-weight: 600; }
.marks td.num { white-space: nowrap; }
.marks tbody tr:hover { background: var(--paper); }
.tag { display: inline-block; font: 500 12px/1.4 var(--mono); background: var(--string-soft); color: var(--string); padding: 1px 6px; margin-left: 4px; }
.cones { padding: 0 24px; font-size: 15px; }
.tally { margin: 6px 24px 24px; border: 2px solid var(--ink); padding: 16px 18px; background: var(--paper); }
.tally h3 { font-size: 16px; margin-bottom: 8px; }
.tally ul { list-style: none; margin: 0; padding: 0; }
.tally li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--rule); }
.tally-total { font-weight: 700; border-bottom: 2px solid var(--ink) !important; }
.tally .fine { margin: 10px 0 0; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }
.sheet-actions form { margin: 0; }
.sheet-fine { margin-top: 10px; }
.sheet-solo { padding-top: 28px; padding-bottom: 72px; max-width: 1000px; margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
.passline { font-size: 15px; color: var(--ink-2); margin-top: 14px; }

/* ---------- field book ---------- */
.linkbox { background: var(--card); border: 2px solid var(--ink); padding: 16px; margin: 20px 0; }
.linkrow { display: flex; gap: 8px; margin-top: 8px; }
.linkrow input { font-size: 14px; }
.count { color: var(--ink-2); }
.ledger { list-style: none; padding: 0; margin: 16px 0 24px; border-top: 2px solid var(--ink); }
.ledger li a { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.ledger li a:hover { background: var(--card); }
.lg-kind { font: 500 13px/1.3 var(--mono); color: var(--string); display: flex; gap: 6px; align-items: center; }
.lg-name { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.lg-date { font-size: 14px; color: var(--muted); }
.empty { padding: 20px; border: 2px dashed var(--rule); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 64px; }
.row-actions form { margin: 0; }

/* ---------- faq ---------- */
.faq { margin: 40px 0 72px; max-width: 820px; }
.faq details { border-top: 1px solid var(--rule); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.faq p { margin: 10px 0 0; color: var(--ink-2); }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #D9D2C1; margin-top: 0; }
.foot a { color: #fff; }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gut) 24px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.foot-word { font: 800 24px/1 var(--display); font-stretch: 140%; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.foot-b, .foot-c { display: grid; gap: 8px; align-content: start; }
.foot-b a, .foot-c a { text-decoration: none; }
.foot-b a:hover, .foot-c a:hover { text-decoration: underline; color: #fff; }
.foot-h { font: 600 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #FFB08E; margin: 0 0 4px; }
.foot-legal { max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gut) 32px; border-top: 1px solid #4A5059; font-size: 14px; }
.foot-legal p { margin: 4px 0; }
.disclaim { font-weight: 600; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .top-nav { display: none; }
  .menu { display: block; }
  .top-cta { margin-left: auto; }
  .menu { margin-left: 0; }
  .tool { grid-template-columns: minmax(0, 1fr); }
  .tool-form { position: static; }
}
@media (max-width: 900px) {
  .hero-in, .park-teaser, .split-2 { grid-template-columns: minmax(0, 1fr); }
  .rd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-row li:nth-child(2) { border-right: 0; }
  .how-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-row::before { display: none; }
  .kind-row, .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { border-right: 0; border-bottom: 2px solid var(--ink); }
  .plan:last-child { border-bottom: 0; }
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout div:nth-child(2) { border-right: 0; }
  .readout div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-a { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .ribbon-in { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13px; }
  .top-in { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .mark-word { font-size: 17px; font-stretch: 120%; }
  .mark-glyph { width: 30px; height: 30px; }
  .top-cta { display: none; }
  .menu { margin-left: auto; }
  .menu-word { display: none; }
  .hero-plate { box-shadow: 6px 6px 0 var(--ink); }
  .rd-row { grid-template-columns: minmax(0, 1fr); }
  .rd-row li { border-right: 0; border-bottom: 1px solid #4A5059; margin-right: 0; padding-bottom: 16px; }
  .how-row { grid-template-columns: minmax(0, 1fr); }
  .seg { grid-template-columns: minmax(0, 1fr); }
  .seg a { border-right: 0; border-bottom: 2px solid var(--ink); }
  .seg a:last-child { border-bottom: 0; }
  .panel { padding: 18px; }
  .sheet-head { padding: 18px 16px 0; }
  .readout { margin: 14px -16px 0; }
  .readout div { padding: 10px 12px 10px 16px; }
  .readout dd { font-size: 14px; }
  .p-flab { display: none; }
  .p-fnum { display: inline; }
  .drawing, .table-wrap { padding-left: 12px; padding-right: 12px; }
  .steps { padding: 0 16px; }
  .cones { padding: 0 16px; }
  .tally { margin: 6px 12px 16px; }
  .sheet .note { margin: 0 12px 12px; }
  /* tables become stacked cards: each cell carries its own label */
  .marks thead { display: none; }
  .marks caption { display: block; width: 100%; }
  .marks, .marks tbody, .marks tr, .marks th, .marks td { display: block; width: 100%; }
  .marks tr { border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .marks th, .marks td { border: 0; padding: 2px 0; }
  .marks td.num { white-space: normal; display: flex; justify-content: space-between; gap: 12px; }
  .marks td[data-k]::before { content: attr(data-k); font-family: var(--text); color: var(--muted); font-size: 13px; }
  .ledger li a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .linkrow { flex-direction: column; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .plan-price .num { font-size: 34px; }
}

/* ---------- print: the crew sheet only ---------- */
@media print {
  body { background: #fff; font-size: 11pt; }
  .ribbon, .top, .foot, .tool-form, .sheet-actions, .sheet-fine, .pagehead, .skip, .passline { display: none !important; }
  .tool, .sheet-solo { display: block; padding: 0; }
  .sheet { border: 0; }
  .hero-plate { box-shadow: none; }
  .marks tbody tr:hover { background: none; }
  .marks tr { break-inside: avoid; }
  a { text-decoration: none; }
}
@media (max-width: 360px) { .grid-in { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the ink footer, on public pages only (the controllers opt in). The label,
   the reserved height and the space above the footer are all on the <ins>, so when tag.js (or ae-size.js) hides a slot it
   cannot fill, the label and the space go with it, and the empty landmark goes too (:has). 110px = 16px label + 4px gap +
   90px banner; 270px on phones (300x250). The footer has no top margin, so the <ins> keeps the space below it.
   display stays in this file and is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 var(--gut); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto 56px; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 600 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
.is-home .ae-slot ins.adengine { margin-top: 52px; } /* the home page ends on the plans note with little space below it */
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin-bottom: 40px; } .is-home .ae-slot ins.adengine { margin-top: 36px; } }
@media print { .ae-slot { display: none; } }