/* RiverTown Table — trail map & blaze. One stylesheet, one self-hosted face (Overpass, OFL). */

@font-face {
  font-family: "Overpass";
  src: url("/fonts/overpass-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #f6f8f3;      /* map white */
  --white: #ffffff;
  --wood: #d6e6cf;       /* woodland tint: owns whole bands */
  --wood-2: #e7efe2;
  --ink: #14231a;        /* forest ink */
  --ink-2: #3a4f42;
  --rule: #b3c6b0;
  --panel: #14231a;      /* trailhead panels */
  --on-panel: #f6f8f3;
  --on-panel-2: #b7cbbc;
  --contour: #9a7652;    /* hairline contour brown */
  --brand: #1a8f8c;
  --link: #0b5f62;
  --hover: #0b5f62;      /* dark-ink-safe hover fill for panels and buttons */
  --focus: #0b5f62;      /* focus ring and current-page mark: ≥3:1 on paper and woodland */
  --aqua: #2fb3b0;       /* brand blaze, on dark */
  --river: #a9d8d4;
  --river-ink: #2c6664;
  /* Trail blazes mark mall levels. Always carry their number, never colour alone. */
  --b1: #c8102e; --b2: #0a5eb0; --b3: #f2c200; --b4: #b3410e;
  --gut: clamp(1rem, 4.5vw, 2.75rem);
  /* One left edge for every band: the sheet's content edge, even on full-bleed panels. */
  --edge: max(var(--gut), calc((100vw - 76rem) / 2 + var(--gut)));
  --font: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1813; --white: #13201a; --wood: #1a2b21; --wood-2: #16251c;
    --ink: #e4ede6; --ink-2: #a8bcae; --rule: #2f4538;
    --panel: #1b2f24; --contour: #8a6a4a; --brand: #2fb3b0; --link: #82d8d4; --hover: #2d5446; --focus: #2fb3b0;
    --river: #1d4644; --river-ink: #8fd0cb;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-2) var(--paper); overflow-x: clip; }
body {
  margin: 0; background-color: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font); font-variant-numeric: tabular-nums;
  caret-color: var(--link); accent-color: var(--link);
}
::selection { background: var(--aqua); color: #0b1a14; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0 0 1rem; }
.sprite, .vh, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { left: -9999px; }
.fine { color: var(--ink-2); font-size: 0.875rem; }
.skip { position: absolute; left: var(--gut); top: -4rem; padding: 0.75rem 1rem; background: var(--panel); color: var(--on-panel); z-index: 2; }
.skip:focus { top: 0.5rem; }

/* Header and wordmark */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; padding: 0.25rem var(--edge); background: var(--paper); border-bottom: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 850; font-size: 1.1875rem; letter-spacing: -0.02em; }
.brand-mark { width: 1.75rem; height: 1.75rem; color: var(--brand); }
.site-head nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
@media (max-width: 40rem) {
  .site-head .brand { min-height: 40px; font-size: 1.0625rem; }
  .site-head nav { width: 100%; gap: 0 1.1rem; }
  .site-head nav a { min-height: 34px; font-size: 0.875rem; }
}
.site-head nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.site-head nav a:hover { text-decoration: underline; }
.site-head nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--focus); }

/* Blazes and marks */
.blaze {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.375rem; height: 2rem; border-radius: 2px 3px 2px 3px;
  color: #fff; font-weight: 800; font-size: 0.875rem; line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}
.b1 { background: var(--b1); } .b2 { background: var(--b2); } .b3 { background: var(--b3); color: #14231a; } .b4 { background: var(--b4); }
.blaze.big { width: 2.25rem; height: 3.25rem; font-size: 1.25rem; }
.levels { display: inline-flex; gap: 0.3rem; }
.mark { width: 0.8rem; height: 0.8rem; flex: none; color: var(--link); }
.state { display: flex; align-items: center; gap: 0.4rem; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.35; margin-top: 0.4rem; }
.price { white-space: nowrap; letter-spacing: 0.02em; }
.price b { font-weight: 800; color: var(--ink); }
.price span { color: var(--rule); }

/* Trailhead panel + cross-section (guide) and trailhead + region map (home) */
.guide-top, .hub-top { display: grid; }
.trailhead { position: relative; overflow: hidden; background: var(--panel); color: var(--on-panel); padding: clamp(2rem, 7vw, 5rem) var(--gut) clamp(2rem, 6vw, 3.5rem) var(--edge); }
.contours { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--contour); opacity: 0.55; pointer-events: none; }
.trailhead-inner { position: relative; max-width: 34rem; min-width: 0; }
.trailhead h1 { margin: 0; font-weight: 900; font-size: clamp(2.75rem, 11.5vw, 5.5rem); }
.trailhead .place { display: block; font-size: 1em; line-height: 0.9; letter-spacing: -0.035em; }
.trailhead .what { display: block; margin-top: 0.5rem; font-size: max(1.375rem, 0.36em); font-weight: 500; letter-spacing: -0.015em; }
.trailhead .tally { margin: 1.4rem 0 0; color: var(--on-panel-2); font-size: 1.0625rem; max-width: 30rem; }
.owner-line { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--on-panel-2); }
.trailhead a { color: var(--aqua); }
.trailhead :focus-visible, .site-foot :focus-visible, .guide-card:focus-visible { outline-color: var(--aqua); }

.cross-section { background: var(--wood); padding: clamp(1.25rem, 4vw, 2.5rem) var(--edge) clamp(1.25rem, 4vw, 2.5rem) var(--gut); }
.cross-section ol { list-style: none; margin: 0; padding: 0; }
.stratum { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.25rem 1rem; padding: 1rem 0; border-top: 1.5px solid var(--ink); }
.stratum:last-child { border-bottom: 1.5px solid var(--ink); }
.stratum-name { margin: 0 0 0.25rem; font-weight: 850; font-size: 1.125rem; letter-spacing: -0.01em; }
.stratum-name span { font-weight: 500; color: var(--ink-2); font-size: 0.9375rem; margin-left: 0.35rem; }
.stratum p:last-child { margin: 0; line-height: 2; font-size: 0.9375rem; }
.stratum p a { color: var(--ink); margin-right: 0.85rem; white-space: nowrap; }
.blaze-button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 3px; min-width: 44px; min-height: 44px; display: grid; place-items: start center; }
.blaze-button[aria-pressed="true"] .blaze { outline: 3px solid var(--ink); outline-offset: 3px; }
.cross-hint { display: none; margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.js .cross-hint { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .stratum .blaze { animation: paint 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .stratum:nth-child(2) .blaze { animation-delay: 0.08s; }
  .stratum:nth-child(3) .blaze { animation-delay: 0.16s; }
  .stratum:nth-child(4) .blaze { animation-delay: 0.24s; }
  [data-levels], .stratum { transition: opacity 0.25s ease-out; }
}
@keyframes paint { from { transform: scaleY(0.35); } to { transform: none; } }
.stratum .blaze { transform-origin: 50% 100%; }

/* Signature: a level's blaze picks out its places */
[data-focus-level="1"] [data-levels]:not([data-levels~="1"]),
[data-focus-level="2"] [data-levels]:not([data-levels~="2"]),
[data-focus-level="3"] [data-levels]:not([data-levels~="3"]),
[data-focus-level="4"] [data-levels]:not([data-levels~="4"]) { opacity: 0.28; }
[data-focus-level="1"] .stratum:not([data-level="1"]),
[data-focus-level="2"] .stratum:not([data-level="2"]),
[data-focus-level="3"] .stratum:not([data-level="3"]),
[data-focus-level="4"] .stratum:not([data-level="4"]) { opacity: 0.5; }

@media (min-width: 60rem) {
  .guide-top, .hub-top { grid-template-columns: 5fr 7fr; }
  .trailhead { display: flex; align-items: flex-end; }
  /* The headline scales with its 5/12 column, so it never runs past the panel. */
  .trailhead h1 { font-size: clamp(2.75rem, 5.4vw, 5.5rem); }
}

/* Junction signposts */
.junction { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1.25rem var(--edge); border-bottom: 1px solid var(--rule); }
.junction.on-panel { padding: 0; margin-top: 1.5rem; border: 0; }
.junction.on-panel a { background: var(--paper); color: var(--ink); }
.junction.on-panel a span { color: var(--link); }
.junction.on-panel a:hover { background: var(--wood); }
.junction a {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.5rem 1.6rem 0.5rem 0.9rem;
  background: var(--panel); color: var(--on-panel); text-decoration: none; font-weight: 700; font-size: 0.9375rem;
  clip-path: polygon(0 0, calc(100% - 0.85rem) 0, 100% 50%, calc(100% - 0.85rem) 100%, 0 100%);
}
.junction a span { color: var(--aqua); font-weight: 800; }
.junction a:hover { background: var(--hover); }

/* The sheet: map panels with fold lines */
.sheet { max-width: 76rem; margin: 0 auto; padding: 0 var(--gut); }

.orientation { display: grid; gap: 1.5rem 3rem; padding-top: clamp(2rem, 5vw, 3.5rem); }
.intro { font-size: 1.1875rem; line-height: 1.55; max-width: 38rem; }
.map-key { margin: 0; padding: 1rem 1.25rem; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--white); align-self: start; }
.map-key div { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: 0.75rem; padding: 0.45rem 0; }
.map-key div + div { border-top: 1px solid var(--rule); }
.map-key dt { display: flex; justify-content: center; }
.map-key dd { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.map-key .mark { width: 1rem; height: 1rem; }
.orientation .fine { grid-column: 1 / -1; margin: 0; }
@media (min-width: 60rem) { .orientation { grid-template-columns: 7fr 5fr; } }

.leg { margin-top: clamp(3rem, 7vw, 5rem); }
.leg > h2 { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1.25rem; padding-top: 0.75rem; border-top: 3px solid var(--ink); font-size: clamp(1.75rem, 4.6vw, 2.5rem); font-weight: 850; line-height: 1.05; letter-spacing: -0.025em; }
.leg > h2 .n { font-size: 1.0625rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.field { padding-block: clamp(2rem, 5vw, 3rem); background: var(--wood); box-shadow: 0 0 0 100vmax var(--wood); clip-path: inset(0 -100vmax); }
.picks { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.pick h3 { margin: 0 0 0.4rem; font-size: 1.125rem; font-weight: 800; }
.pick p, .pick ul { font-size: 0.9375rem; margin: 0; }
.pick ul { padding-left: 1.1rem; }
.sources p { max-width: 42rem; }

/* Sit-down comparison */
.compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.compare thead th { padding-top: 0; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.compare tbody th { min-width: 11rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; }
.compare tbody th a { color: var(--ink); }
.compare tbody tr:hover { background: var(--wood-2); }
.compare .notes p { margin: 0 0 0.25rem; }
.week-line, .cuisine-line { display: none; }
.foot-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 1rem; margin-top: 0.4rem; }
.foot-line .state { margin: 0; }
.foot-line .own { margin: 0; }
.week { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.65rem; margin: 0; }
.week dt { font-weight: 700; white-space: nowrap; }
.week dd { margin: 0; white-space: nowrap; }
.own { display: inline-flex; align-items: center; min-height: 24px; font-size: 0.8125rem; color: var(--ink-2); }
:target { background: var(--wood-2); scroll-margin-top: 1rem; }

@media (max-width: 47.99rem) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.35rem 0.65rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
  .compare th, .compare td { display: block; padding: 0; border: 0; min-width: 0; }
  .compare tbody th { grid-column: 2; grid-row: 1; font-size: 1.0625rem; }
  .compare td:nth-of-type(3) { grid-column: 1; grid-row: 1; }
  .compare td:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .compare td.cuisine { display: none; }
  .compare td.hours, .compare td.notes { grid-column: 2 / -1; font-size: 0.875rem; color: var(--ink-2); }
  .compare td.hours .week, .compare td.hours > .state { display: none; }
  .compare td.hours .cuisine-line, .compare td.hours .week-line { display: inline; }
  .compare td.hours .cuisine-line::after { content: "  "; white-space: pre; }
  .compare tbody tr:hover { background: none; }
}

/* Counter, coffee and dessert legend lists */
.legend { list-style: none; margin: 0; padding: 0; }
.legend li { padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.legend .line { display: flex; align-items: center; gap: 0.65rem; }
.legend .name { flex: 1; min-width: 0; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; }
.legend .name a { color: var(--ink); }
/* Tap targets: listing names and link-outs get at least 24px of height (WCAG 2.5.8). */
.legend .name a, .compare tbody th a, .legend .meta a, .compare td.hours > a { display: inline-block; padding-block: 0.2rem; }
.legend .meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin: 0.25rem 0 0 2.05rem; color: var(--ink-2); font-size: 0.875rem; }
.legend .meta-week .week { grid-template-columns: auto auto; }
.seg { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .legend .meta { display: block; }
  .legend .meta > span + span::before { content: "  "; white-space: pre; }
  .legend .meta-week .week { display: none; }
  .legend .meta-week .week-line { display: inline; }
  .foot-line { font-size: 0.8125rem; gap: 0 0.75rem; }
}
.legend .note { margin: 0.3rem 0 0 2.05rem; font-size: 0.875rem; }
.legend .foot-line { margin-left: 2.05rem; margin-top: 0.3rem; }
.legend .levels .blaze + .blaze { margin-left: -0.1rem; }
@media (min-width: 60rem) { .legend { columns: 2; column-gap: 3.5rem; } .legend li { break-inside: avoid; } }

/* Home: region map and guide cards */
.region-map { margin: 0; padding: clamp(1.25rem, 4vw, 2.5rem) var(--gut); background: var(--wood); display: grid; place-items: center; }
.region-map svg { width: 100%; max-width: 26rem; height: auto; font-family: var(--font); }
.region-map .river { fill: var(--river); }
.region-map .water { fill: var(--river-ink); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; }
.region-map .bridge { stroke: var(--ink-2); stroke-width: 2.5; }
.region-map .road { fill: var(--ink-2); font-size: 10px; }
.region-map .county { fill: var(--ink-2); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.region-map .town circle { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.5; }
.region-map .town text { fill: var(--ink-2); font-size: 12px; }
.region-map .live rect { fill: var(--link); }
.region-map .live text { fill: var(--ink); font-size: 15px; font-weight: 850; }
.region-map .live .sub { font-size: 11px; font-weight: 500; fill: var(--ink-2); }
.region-map .live:hover text:first-of-type { text-decoration: underline; }
.region-map figcaption { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.875rem; color: var(--ink-2); }
.blaze-key { display: inline-block; width: 0.6rem; height: 1rem; border-radius: 1.5px; background: var(--link); }
.hub-head h1 { font-size: clamp(2.5rem, 9vw, 4.75rem); }
@media (min-width: 60rem) { .hub-head h1 { font-size: clamp(2.5rem, 4.6vw, 4.75rem); } }

.guide-list + .fine { margin-top: 1rem; }
.guide-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.guide-card { position: relative; display: grid; gap: 0.35rem; padding: 1.5rem 1.5rem 1.25rem; background: var(--panel); color: var(--on-panel); text-decoration: none; border-radius: 3px; }
.gc-blazes { display: flex; gap: 0.3rem; margin-bottom: 0.5rem; }
.gc-name { font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.gc-where { color: var(--aqua); font-weight: 650; }
.gc-facts { color: var(--on-panel-2); font-size: 0.9375rem; margin-top: 0.4rem; }
.gc-go { margin-top: 0.75rem; font-weight: 800; text-decoration: underline; text-underline-offset: 0.2em; color: var(--on-panel); }
.guide-card:hover .gc-go { color: var(--aqua); }
.method-grid { display: grid; gap: 1.25rem 2.5rem; margin-bottom: 1rem; }
@media (min-width: 48rem) { .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.method-grid strong { display: block; font-size: 1.0625rem; font-weight: 800; margin-bottom: 0.2rem; }
.method-grid p { margin: 0; font-size: 0.9375rem; }

/* Prose pages: about, privacy, owner front desk and forms */
.site-main:not(.wide) { max-width: 46rem; margin: 0 auto; padding: 0 var(--gut); }
.site-main:not(.wide) h1 { margin: 0 0 1rem; font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.03em; }
/* Prose pages open with the same forest trailhead as the guides, at reading width. */
.page-head { position: relative; overflow: hidden; margin: 0 calc(50% - 50vw) clamp(1.5rem, 4vw, 2.5rem); padding: clamp(2.25rem, 7vw, 4rem) calc(50vw - 50%) clamp(1.75rem, 5vw, 3rem); background: var(--panel); color: var(--on-panel); }
.page-head-inner { position: relative; }
.page-head .lede { margin: 0; color: var(--on-panel-2); max-width: 38rem; }
.page-head a { color: var(--aqua); }
.page-head :focus-visible { outline-color: var(--aqua); }
.site-main:not(.wide) h2 { margin: 2.5rem 0 0.6rem; padding-top: 0.6rem; border-top: 2px solid var(--ink); font-size: 1.375rem; font-weight: 850; letter-spacing: -0.015em; }
.lede { font-size: 1.1875rem; }
.options { list-style: none; padding: 0; margin: 2rem 0; }
.options a { display: grid; grid-template-columns: 1.1rem 1fr; column-gap: 0.9rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.options a::before { content: ""; grid-row: 1 / span 2; width: 0.7rem; height: 1.1rem; margin-top: 0.3rem; border-radius: 1.5px 2px 1.5px 2px; background: var(--link); }
.options a:hover::before { background: var(--b4); }
.options li:first-child a { border-top: 3px solid var(--ink); }
.options strong { display: block; font-size: 1.25rem; font-weight: 850; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.options a:hover strong { text-decoration-thickness: 2px; }
.options span { display: block; margin-top: 0.2rem; color: var(--ink-2); }

.form { margin-top: 1.5rem; }
.form label { display: block; margin: 1.35rem 0 0.4rem; font-weight: 700; }
.hint { display: block; font-weight: 400; color: var(--ink-2); font-size: 0.875rem; }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea {
  display: block; width: 100%; min-height: 48px; padding: 0.6rem 0.75rem;
  font: inherit; color: var(--ink); background: var(--white); border: 1.5px solid var(--ink-2); border-radius: 3px;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--link); }
.form textarea { resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 1.75rem 0 0; }
.form legend { padding: 0; font-weight: 700; }
.form .choices label { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; margin: 0; font-weight: 400; }
.form .choices input { width: 1.25rem; height: 1.25rem; margin: 0; }
button { min-height: 48px; padding: 0.6rem 1.4rem; font: inherit; font-weight: 800; color: var(--on-panel); background: var(--panel); border: 0; border-radius: 3px; cursor: pointer; }
button:hover { background: var(--hover); }
.form button { margin-top: 2.25rem; }

/* Footer: the trailhead at the end of the route */
.site-foot { position: relative; overflow: hidden; margin-top: clamp(4rem, 10vw, 7rem); background: var(--panel); color: var(--on-panel); }
.foot-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 4rem; padding: clamp(2.5rem, 6vw, 4rem) var(--edge) 3rem; }
.foot-facts a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (min-width: 60rem) { .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-foot a { color: var(--aqua); }
.site-foot .brand { color: var(--on-panel); margin-bottom: 0.75rem; }
.site-foot .brand-mark { color: var(--aqua); }
.foot-facts p { color: var(--on-panel-2); font-size: 0.9375rem; max-width: 34rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-foot .fine { color: var(--on-panel-2); }
.signup label { display: block; font-size: 1.5rem; font-weight: 850; letter-spacing: -0.02em; }
.signup-what { color: var(--on-panel-2); margin: 0.3rem 0 1rem; }
.signup-row { display: flex; gap: 0.5rem; max-width: 30rem; }
.signup-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; color: var(--on-panel); background: transparent; border: 1.5px solid var(--on-panel-2); border-radius: 3px; }
.signup-row input::placeholder { color: var(--on-panel-2); }
.signup button { background: var(--aqua); color: #0b1a14; }
.signup button:hover { background: var(--on-panel); }
.signup .fine { margin-top: 0.6rem; }