/* Carson Antiques & Collectibles Mall — home v2 · roadside-sign system (SPEC §8).
   Palette tokens only. Text pairs (min of 5 palettes): ground/yellow 5.93 · ground/yellow-bright 7.20 · yellow-bright/ground-2 6.07 ·
   chalk/ground-2 10.71 · ground/chalk 12.81 · barn/chalk 5.71 · on-barn/barn 6.65. Never text: ground-2 on yellow, yellow/zinc on chalk,
   barn on ground. Tanker ≥ 28 px (phone lockup excepted). 16 px floor. Signs rest at 0°. */

/* fonts: self-hosted + metric-matched fallbacks */
@font-face { font-family: 'Tanker'; src: url('assets/fonts/tanker-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
/* A-09 fallbacks (em widths, never ch) */
@font-face { font-family: 'Satoshi Fallback'; src: local('Arial'); font-weight: 400; size-adjust: 99.5%; ascent-override: 101.5%; descent-override: 24.1%; line-gap-override: 10.1%; }
@font-face { font-family: 'Satoshi Fallback'; src: local('Arial'); font-weight: 500; size-adjust: 101.6%; ascent-override: 99.4%; descent-override: 23.6%; line-gap-override: 9.8%; }
@font-face { font-family: 'Satoshi Fallback'; src: local('Arial Bold'); font-weight: 700; size-adjust: 98.3%; ascent-override: 102.7%; descent-override: 24.4%; line-gap-override: 10.2%; }
@font-face { font-family: 'Tanker Fallback'; src: local('Impact'); font-weight: 400; size-adjust: 92.75%; ascent-override: 107.8%; descent-override: 28%; line-gap-override: 9.7%; }
@font-face { font-family: 'Tanker Fallback Big'; src: local('Impact'); font-weight: 400; size-adjust: 95.5%; ascent-override: 104.7%; descent-override: 27.2%; line-gap-override: 9.4%; }
@font-face { font-family: 'Tanker Fallback Ribbon'; src: local('Impact'); font-weight: 400; size-adjust: 93.5%; ascent-override: 107%; descent-override: 27.8%; line-gap-override: 9.6%; }
@font-face { font-family: 'Tanker Fallback Ribbon S'; src: local('Impact'); font-weight: 400; size-adjust: 90.75%; ascent-override: 110.2%; descent-override: 28.7%; line-gap-override: 9.9%; }
@font-face { font-family: 'Satoshi Fallback Trip'; src: local('Arial'); font-weight: 500; size-adjust: 104.5%; ascent-override: 96.7%; descent-override: 23%; line-gap-override: 9.6%; }

/* V-01 tokens */
:root {
  --ground: #14201B; --ground-2: #1D2B25; --chalk: #EDEBE3; --yellow: #D9A400; --yellow-bright: #F5D31C;
  --barn: #7A2E1F; --on-barn: #FFFFFF; --zinc: #8A9A8E; --ink-muted: #4A5A4E;
  --ground-rgb: 20 32 27; --chalk-rgb: 237 235 227; --yellow-rgb: 217 164 0; --barn-rgb: 122 46 31; --zinc-rgb: 138 154 142;

  --wrap: 1120px; --wrap-wide: 1320px; --gutter: 16px; --band-pad: clamp(64px, 6vw + 24px, 120px);
  --head-h: 0px; --bar-h: 0px; --sign-radius: 6px;
  --font-display: 'Tanker', 'Tanker Fallback', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Satoshi', 'Satoshi Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rule-dark: rgb(var(--chalk-rgb) / .22); --rule-light: rgb(var(--ground-rgb) / .28); --rule-w: 1px; --rule-style: solid;
  --shadow-plate: 0 10px 24px rgb(var(--ground-rgb) / .25);

  --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --booth-grid: repeating-linear-gradient(90deg, rgb(var(--chalk-rgb) / .05) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgb(var(--chalk-rgb) / .05) 0 1px, transparent 1px 72px);
  --ledger-rules: repeating-linear-gradient(180deg, transparent 0 31px, rgb(var(--ground-rgb) / .065) 31px 32px);
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 768px) and (min-height: 501px) { :root { --head-h: 73px; } }   /* sticky header only here */
@media (min-width: 768px) and (max-width: 959px) and (min-height: 501px) { :root { --head-h: 101px; } }   /* fix-r1 2-row header */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) { :root { --bar-h: calc(56px + env(safe-area-inset-bottom)); } }
@media (min-width: 1600px) { :root { --wrap: var(--wrap-wide); } }   /* V-14: one wide wrap, every left edge aligned */

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); scroll-padding-bottom: calc(var(--bar-h) + 12px); }
body {
  margin: 0; background: var(--ground) var(--grain-light); color: var(--chalk);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote, address { margin: 0; }
address { font-style: normal; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, .display { font-family: var(--font-display); font-weight: 400; line-height: .96; letter-spacing: .005em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; }
.num, .chip, .booth text, .board, .guide { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.band--chalk :focus-visible { outline-color: var(--barn); }
.band--barn :focus-visible { outline-color: var(--chalk); outline-offset: 4px; }
.band--chalk .guide :focus-visible { outline-color: var(--yellow-bright); }
.hero :focus-visible { box-shadow: 0 0 0 7px var(--ground); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 10px 14px; background: var(--yellow); color: var(--ground); font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
/* sprite (not display:none: <use> must render) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ink-x__under { stroke: var(--chalk); }
.ink-x__core { stroke: var(--barn); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px;
  font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: .01em; text-decoration: none; text-align: center; white-space: normal;
  border: 2px solid transparent; transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn svg, .marquee-pause svg, .actionbar svg { width: 1.25em; height: 1.25em; flex: none; }
.btn--yellow { background: var(--yellow); color: var(--ground); border-color: var(--yellow); }
.btn--yellow:hover, .btn--yellow:focus-visible { background: var(--yellow-bright); border-color: var(--yellow-bright); }
.btn--ghost { color: var(--chalk); border-color: rgb(var(--chalk-rgb) / .6); background: rgb(var(--ground-rgb) / .35); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--chalk); background: rgb(var(--chalk-rgb) / .1); }
.btn--ink { background: var(--ground); color: var(--chalk); border-color: var(--ground); }
.btn--ink:hover, .btn--ink:focus-visible { background: var(--ground-2); border-color: var(--ground-2); }
.btn--sm { min-height: 40px; padding: 0 14px; }   /* fix-r1 16px floor */

/* V-02 header */
.site-head { position: relative; z-index: 50; background: var(--ground) var(--grain-light); border-bottom: 1px solid var(--yellow); }
.site-head__row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding-top: 8px; }
.lockup { justify-self: start; padding-block: 6px 4px; font-family: var(--font-display); font-size: 1.4375rem; line-height: 1; letter-spacing: .01em; color: var(--chalk); text-decoration: none; }
.lockup span { display: block; }   /* A-04: wraps only if it can't fit */
.lockup:hover { color: var(--yellow-bright); }
.site-nav { position: relative; min-width: 0; margin-inline: calc(-1 * var(--gutter)); }
.site-nav ul { display: flex; white-space: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px calc(var(--gutter) - 8px); margin-block: -6px; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 1rem; font-weight: 500; color: var(--chalk); text-decoration: none; text-underline-offset: .35em; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--yellow-bright); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.site-nav::before, .site-nav::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1; }
.site-nav::before { left: 0; background: linear-gradient(90deg, var(--ground), rgb(var(--ground-rgb) / 0)); }
.site-nav::after { right: 0; background: linear-gradient(270deg, var(--ground), rgb(var(--ground-rgb) / 0)); }
.site-nav.can-left::before, .site-nav.can-right::after { opacity: 1; }
.site-head__open, .site-head__cta { display: none; }
.site-head__road { display: none; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: repeating-linear-gradient(90deg, var(--yellow) 0 14px, transparent 14px 24px); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@media (min-width: 768px) and (min-height: 501px) { .site-head { position: sticky; top: 0; } }
@media (min-width: 768px) {
  .site-head__row { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 72px; padding: 0; column-gap: 28px; }
  .lockup { font-size: 1.75rem; padding: 0; }
  .site-nav { margin: 0 -6px; }
  .site-nav ul { padding-inline: 6px; scrollbar-width: thin; scrollbar-color: var(--yellow) transparent; }   /* A-01 ring room */
  .site-head__cta { display: inline-flex; }
  html.motion .site-head__road { display: block; }   /* M07 scrubs scaleX */
}
/* fix-r1: 768–959 two rows */
@media (min-width: 768px) and (max-width: 959px) and (min-height: 501px), (min-width: 768px) and (max-width: 959px) and (pointer: fine) {
  .site-head__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lockup cta" "nav nav"; min-height: 0; padding: 12px 0 2px; row-gap: 2px; }
  .lockup { grid-area: lockup; } .site-head__cta { grid-area: cta; } .site-nav { grid-area: nav; }
  .lockup span { display: inline; }
}
/* fix-r1 AC-33: overflow-safe centring (1.4.12) */
@media (min-width: 960px) { .site-nav li:first-child { margin-inline-start: auto; } .site-nav li:last-child { margin-inline-end: auto; } }
@media (min-width: 1200px) { .lockup span { display: inline; } .site-nav a { padding: 0 10px; } }
@media (min-width: 1600px) {
  .site-head__row { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 20px; }
  .site-nav a { padding: 0 8px; }
  .site-head__open { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid rgb(var(--chalk-rgb) / .35); font-weight: 700; font-size: 1rem; white-space: nowrap; }
  .site-head__open span { color: var(--yellow-bright); font-size: .75em; }
}

/* V-03 hero */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; min-height: max(640px, calc(100svh - 104px)); max-width: 1920px; margin-inline: auto; color: var(--chalk); }
.hero picture { display: contents; }
.hero source { display: none; }
.hero__top { grid-row: 1; } .hero__body { grid-row: 2; }
.hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(1.3); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; }   /* §8.3 regrade: phone + >=768 stops below */
@media (min-width: 768px) {   /* fix-r1 D-26: deeper top ramp */
  .hero::before {
    background: var(--grain-light),
      linear-gradient(90deg, rgb(var(--ground-rgb) / .86) 0%, rgb(var(--ground-rgb) / .72) 40%, rgb(var(--ground-rgb) / .28) 72%, rgb(var(--ground-rgb) / .10) 100%),
      linear-gradient(180deg, rgb(var(--ground-rgb) / .62) 0, rgb(var(--ground-rgb) / .55) 26%, rgb(var(--ground-rgb) / 0) 34%, rgb(var(--ground-rgb) / 0) 60%, rgb(var(--ground-rgb) / .72) 100%);
  }
}
@media (min-width: 1024px) {   /* D-26 booths-zone lift (AC-07) */
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(ellipse 48% 56% at 90% 70%, rgb(var(--chalk-rgb) / .7), transparent 80%); }
}
.hero__lights { display: none; position: absolute; inset: 0; z-index: -1; background: rgb(var(--ground-rgb) / .35); pointer-events: none; }   /* M01 overlay (html.motion shows it until .is-in) */
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; }
.chip {
  display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 4px; padding: 8px 9px 8px 8px; letter-spacing: -.01em;
  background: rgb(var(--ground-rgb) / .9); border: 1px solid var(--yellow); color: var(--chalk); font-weight: 500; font-size: 1rem; line-height: 1.3;
}
.chip__hours, .chip__addr { white-space: nowrap; }
.chip__hours { display: inline-block; min-width: 10.05em; }
.chip__x { width: 20px; height: 20px; flex: none; margin-right: 8px; overflow: visible; }
.chip__sep { margin-inline: 5px; }
@media (max-width: 519px) {   /* phones: two lines (Calm sits beside), never a dangling "·" */
  .chip { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; }
  .chip__x { grid-row: 1 / span 2; margin-right: 0; }
  .chip__sep { display: none; }
  .chip__addr { grid-column: 2; }
}
/* Calm toggle ×3 */
.calm-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px;
  background: rgb(var(--ground-rgb) / .88); border: 1px solid rgb(var(--chalk-rgb) / .45); color: var(--chalk);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-shadow: none; transition: border-color .18s ease;
}
.calm-toggle:hover, .calm-toggle:focus-visible { border-color: var(--yellow-bright); }
.calm-toggle__box { position: relative; width: 20px; height: 20px; flex: none; border: 2px solid currentColor; }
.calm-toggle[aria-pressed="true"] .calm-toggle__box { background: var(--yellow-bright); border-color: var(--yellow-bright); }
.calm-toggle[aria-pressed="true"] .calm-toggle__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid var(--ground); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.calm-toggle--hero { display: none; }   /* both Calm toggles in the hero top row */
@media (min-width: 768px) { .calm-toggle--hero { display: inline-flex; } .calm-toggle--phone { display: none; } }

.hero__body { position: relative; align-self: end; padding-block: 28px 30px; text-shadow: 0 2px 24px rgb(var(--ground-rgb) / .7); }
.eyebrow { color: var(--yellow-bright); font-weight: 700; font-size: 1.1875rem; letter-spacing: .03em; margin-bottom: 10px; }
/* window-vinyl lockup */
.hero h1 { font-size: 1rem; line-height: .92; }
.sl-plate, .sl-big, .sl-tail { display: block; }
.sl-plate { width: fit-content; margin-bottom: .22em; padding: .12em .2em .04em; background: var(--chalk); color: var(--ground); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.6rem); line-height: 1; text-shadow: none; box-shadow: 0 0 0 2px var(--ground); }
.sl-big { font-family: 'Tanker', 'Tanker Fallback Big', var(--font-display); font-size: clamp(3.25rem, min(7.4vw, 11svh) + 1rem, 9rem); font-kerning: normal; color: var(--chalk); }
.sl-tail { margin-top: .1em; font-size: clamp(2.1rem, min(3.6vw, 5.4svh) + 1rem, 4.6rem); }
.sl-tail .hl { color: var(--yellow-bright); }
.sl-in {
  display: inline-grid; place-items: center; width: 1.38em; height: 1.38em; margin-inline: .02em; vertical-align: .1em;
  font-size: .76em; line-height: 1; padding-top: .06em; border-radius: 50%; background: var(--yellow-bright); color: var(--ground);
  box-shadow: 0 0 0 2px var(--ground); text-shadow: none;
}

@media (min-width: 768px) {
  .sl-big { position: relative; }
  .sl-big::before { content: ""; position: absolute; z-index: -1; left: 34%; right: -3%; top: .14em; bottom: -.04em; pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--ground-rgb) / 0), rgb(var(--ground-rgb) / .38) 22%, rgb(var(--ground-rgb) / .38) 86%, rgb(var(--ground-rgb) / 0));
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
}
@supports (paint-order: stroke) {   /* keyline: decoration, never credited for AA */
  .sl-big, .sl-tail { -webkit-text-stroke: .07em var(--ground); paint-order: stroke fill; }
  .sl-in { -webkit-text-stroke: 0; }
}
.hero__trail { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }   /* sized: Chrome paints nothing in a 0 × 0 outer <svg> */
.hero__trail > path { fill: none; stroke: var(--yellow-bright); stroke-width: 5; stroke-dasharray: 14 9; stroke-linecap: butt; }
.hero__noun { margin-top: 14px; font-family: var(--font-display); font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem); line-height: 1.05; }
.nouns { display: inline-grid; vertical-align: baseline; text-align: left; clip-path: inset(-.08em -.6em); }   /* M05 clip */
.noun { grid-area: 1 / 1; color: var(--yellow-bright); opacity: 0; white-space: nowrap; }
.noun.is-on { opacity: 1; }
.hero__sub { margin-top: 14px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; max-width: 38.25em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 20px; }
.hero__ctas .btn { text-shadow: none; flex: 1 1 100%; }
.hero__trip { margin-top: 14px; font-family: 'Satoshi', 'Satoshi Fallback Trip', var(--font-body); font-size: 1rem; font-weight: 500; }
.hero__trip a { text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.hero__trip a:hover, .hero__trip a:focus-visible { color: var(--yellow-bright); }
/* phone hero: a plank per line */
@media (max-width: 767px) {
  .hero::before {
    background: var(--grain-light),
      linear-gradient(90deg, rgb(var(--ground-rgb) / .5) 0%, rgb(var(--ground-rgb) / .3) 45%, rgb(var(--ground-rgb) / .12) 100%),
      linear-gradient(180deg, rgb(var(--ground-rgb) / .45) 0, rgb(var(--ground-rgb) / 0) 18%, rgb(var(--ground-rgb) / 0) 55%, rgb(var(--ground-rgb) / .6) 100%);
  }
  .hero { min-height: max(640px, calc(100svh - 112px)); }   /* header = 109 px */
  .hero__top { padding-top: 12px; gap: 8px; flex-wrap: wrap; }
  .calm-toggle--phone { width: min-content; min-height: 48px; padding-inline: 10px 12px; }   /* "Calm / motion" on two lines, beside the chip */
  .calm-toggle--phone:focus-visible { outline-offset: -5px; }   /* inset ring: on its own ground, never on the bright ceiling */
  .chip { padding-block: 6px; }
  .hero__body { padding-block: 8px 12px; }
  .sl-big { font-size: 3rem; }
  .hero__body .ln, .hero__trip a { background: rgb(var(--ground-rgb) / .92); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .eyebrow .ln, .hero__sub .ln, .hero__trip a { padding: .13em 6px; margin-inline: -6px; }
  .sl-big .ln, .sl-tail .ln, .hero__noun .ln { display: block; width: fit-content; max-width: calc(100% + 12px); padding: .02em 6px; margin-inline-start: -6px; }
  .sl-plate { margin-left: -6px; padding-inline: 6px; }
  .eyebrow { margin-bottom: 8px; line-height: 1.35; }
  .hero__noun { margin-top: 10px; }
  .hero__sub { margin-top: 10px; }
  .hero__ctas { margin-top: 14px; gap: 8px; }
  .hero__ctas .btn--ghost { background: rgb(var(--ground-rgb) / .92); }
  .hero__trip { margin-top: 10px; }
}
@media (max-width: 419px) { .sl-tail { font-size: 1.875rem; } }   /* tail on one line from 360 */
@media (max-width: 359px) { .sl-tail { line-height: 1.2; } }   /* AC-37 trail room */
/* fix-r1 AC-25: no re-wrap on the font swap */
@media (max-width: 767px) { .hero__trip { max-width: 19em; } .hero__sub { min-height: 4lh; } }
@media (max-width: 324px) { .hero__sub { min-height: 5lh; } }
@media (min-width: 419px) and (max-width: 613px) { .hero__sub { min-height: 3lh; } }
@media (min-width: 614px) { .hero__sub { min-height: 2lh; } }
@media (max-width: 767px) and (max-height: 700px) {   /* short phones (never looser than phones) */
  .eyebrow { margin-bottom: 6px; }
  .sl-big { font-size: 2.75rem; }
  .sl-tail { font-size: 1.875rem; }
  .hero__noun { margin-top: 8px; }
  .hero__sub { margin-top: 8px; line-height: 1.4; }
  .hero__trip { margin-top: 8px; }
}
@media (min-width: 768px) {
  .hero { min-height: calc(100svh - var(--head-h)); }
  .hero__top { padding-top: 28px; }
  .chip { font-size: 1.0625rem; letter-spacing: .01em; padding: 12px 18px 12px 14px; }
  .chip__hours { min-width: 10.3em; }
  .chip__x { width: 22px; height: 22px; margin-right: 10px; }
  .chip__sep { margin-inline: 8px; }
  .hero__body { padding-block: 44px 48px; }
  .hero__body::before {   /* desktop underlay */
    content: ""; position: absolute; z-index: -1;
    inset: -14% -10vw -10% -14vw;
    background: radial-gradient(ellipse 70% 80% at 20% 70%, rgb(var(--ground-rgb) / .78) 0, rgb(var(--ground-rgb) / .5) 45%, rgb(var(--ground-rgb) / 0) 70%);
  }
  .eyebrow { margin-bottom: 14px; }
  .hero__noun { margin-top: 18px; }
  .hero__sub { margin-top: 20px; }
  .hero__ctas { margin-top: 28px; }
  .hero__ctas .btn { flex: none; }
  .hero__trip { margin-top: 16px; }
}
@media (min-width: 768px) and (max-height: 820px) {   /* short desktops */
  .hero__top { padding-top: 16px; }
  .hero__body { padding-block: 22px 26px; }
  .eyebrow { margin-bottom: 8px; }
  .hero__noun { margin-top: 10px; }
  .hero__sub { margin-top: 12px; }
  .hero__ctas { margin-top: 18px; }
  .hero__trip { margin-top: 10px; }
}

/* V-04 ribbon */
.ribbon {
  --rb: clamp(1.75rem, 1rem + 3.4vw, 4.5rem); --rf: var(--rb);
  position: relative; grid-row: 3; overflow: hidden; color: var(--ground); text-shadow: none;
  background-color: var(--yellow); background-image: repeating-linear-gradient(90deg, rgb(var(--ground-rgb) / .05) 0 1px, transparent 1px 28px);
  border-block: 1px solid var(--ground); font-family: 'Tanker', 'Tanker Fallback Ribbon', var(--font-display); font-size: var(--rf); line-height: 1;
  padding: .25em var(--gutter);
}
.ribbon__copy { white-space: normal; }   /* breaks after a dot (ZWSP); ≥520 segments are atomic */
@media (min-width: 520px) { .ribbon .seg { display: inline-block; max-width: 100%; } }   /* A-04: wraps inside only if wider than the line */
@media (max-width: 519px) { .ribbon { font-family: 'Tanker', 'Tanker Fallback Ribbon S', var(--font-display); } }   /* < 520: wrap normally */
.ribbon i { font-size: 0; font-style: normal; }   /* ● drawn as a barn disc */
.ribbon i::before { content: "\2060"; padding-inline: .15em; margin-inline: .28em; font-size: var(--rf); background: radial-gradient(circle, var(--barn) 0 .15em, transparent calc(.15em + .6px)); }   /* inline box; the nbsp glues the dot to its word */
.ribbon i::after { content: "\200B\200B"; font-size: var(--rf); white-space: normal; }
.ribbon__copy--b { display: none; }
/* fix-r1 static ribbon */
.ribbon { container-type: inline-size; }
.ribbon__copy { text-wrap: balance; }
@media (min-width: 1024px) { html:not(.rib) .ribbon__track { --rf: min(var(--rb), 100cqi / 33.3); font-size: var(--rf); } }
/* 520–1023 fixed lines (17.78 / 14.52 em) */
@media (min-width: 520px) and (max-width: 1023px) {
  html:not(.rib) .ribbon .seg { display: inline; }
  html:not(.rib) .ribbon .seg:nth-of-type(1)::after { content: "\A"; white-space: pre; }
  html:not(.rib) .ribbon__track { --rf: min(var(--rb), 100cqi / 18.3); font-size: var(--rf); }
}
@media (min-width: 520px) and (max-width: 759px) {
  html:not(.rib) .ribbon .seg:nth-of-type(2)::after { content: "\A"; white-space: pre; }
  html:not(.rib) .ribbon__track { --rf: min(var(--rb), 100cqi / 14.9); }
}
@media (min-width: 768px) and (max-height: 740px) { .ribbon { --rb: clamp(1.75rem, min(1rem + 3.4vw, 6.4svh), 4.5rem); } }   /* short laptops: whole band on screen 1 */
html.rib .ribbon { padding-inline: 0; }
html.rib .ribbon__track { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
html.rib .ribbon__copy { padding-right: .28em; white-space: nowrap; }
html.rib .ribbon__copy--b { display: block; }

/* bands + shared heads */
.band { position: relative; padding-block: var(--band-pad); }
.band--ground { background-color: var(--ground); background-image: var(--grain-light), var(--booth-grid); color: var(--chalk); }
.band--chalk { background-color: var(--chalk); background-image: var(--grain-dark), var(--ledger-rules); color: var(--ground); }
.band--barn { background-color: var(--barn); color: var(--on-barn); }
.sec-head { max-width: 42.35em; margin-bottom: 36px; }
.kicker { font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.lede, .intro { font-size: 1.125rem; line-height: 1.55; margin-top: 18px; max-width: 42.35em; }
.hl { color: var(--yellow-bright); }
.rule { position: relative; height: 0; border: 0; border-top: var(--rule-w) var(--rule-style) var(--rule-dark); margin: 0 0 28px; }
.band--chalk .rule { border-top-color: var(--rule-light); }
.rule::before { content: ""; position: absolute; left: 0; top: -3px; width: 42px; height: 5px; background: var(--yellow); }
.band--chalk .rule::before { background: var(--barn); }
.attr { margin-top: 12px; color: var(--barn); font-weight: 700; font-size: 1rem; letter-spacing: .04em; }

/* V-05 worth */
.worth-band { background-image: var(--grain-dark), repeating-linear-gradient(180deg, transparent 0 31px, rgb(var(--ground-rgb) / .09) 31px 32px); }
.worth { display: grid; gap: 32px; }
.worth__head h2 { font-size: clamp(2rem, 1rem + 2.2vw, 3rem); }
.worth__head .rule { margin-bottom: 22px; }
.worth__quote { position: relative; isolation: isolate; }
.worth__quote blockquote { position: relative; padding-top: .55em; font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1; color: var(--ground); text-wrap: pretty; }
.worth__quote blockquote::before {   /* --quote-s/--quote-o: M08 hooks */
  content: "\201C"; position: absolute; left: -.04em; top: -.12em; font-size: 2em; line-height: 1; color: var(--barn);
  transform-origin: 20% 60%; transform: scale(var(--quote-s, 1)); opacity: var(--quote-o, 1);
}
.vinyl { position: relative; display: inline-block; max-width: 100%; padding: 0 .15em; color: var(--ground); }   /* A-04: wraps inside only if wider than the line */
.vinyl::before { content: ""; position: absolute; inset: -.18em 0; z-index: -1; background: var(--yellow-bright); transform-origin: 0 50%; transform: scaleX(var(--vinyl, 1)); }
.worth__quote .attr { margin-top: 18px; }
.worth__photo { width: min(100%, 510px); padding: 6px; background: var(--chalk); border: 2px solid var(--ground); box-shadow: var(--shadow-plate); }
.worth__photo picture { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.worth__photo img { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; max-width: none; object-fit: cover; }   /* 8 % oversize for M11 */
.worth__facts { border-top: 1px solid var(--rule-light); }
.worth__facts li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid var(--rule-light); font-size: 1.125rem; font-weight: 500; }
.worth__facts li::before, .rent__ledger li::before { content: ""; position: absolute; left: 0; top: calc(14px + .5lh - 6px); width: 10px; height: 10px; background: var(--ground); transform: scale(var(--tick, 1)); }   /* --tick: M10/M24 */
.worth__facts a, .rent__cta-line a, .visit__holiday a { font-weight: 700; color: var(--barn); text-decoration-thickness: 2px; }
/* fix-r1: reviews stack */
.worth__more { display: grid; gap: 28px; }
.worth__more blockquote { font-size: 1.125rem; line-height: 1.5; }
.worth__more li { padding-left: 18px; border-left: 3px solid var(--barn); }
/* fix-r1: 640–899 photo | facts */
@media (min-width: 640px) and (max-width: 899px) {
  .worth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "quote quote" "photo facts" "more more"; column-gap: 32px; align-items: start; }
  .worth__head { grid-area: head; } .worth__quote { grid-area: quote; } .worth__photo { grid-area: photo; } .worth__facts { grid-area: facts; } .worth__more { grid-area: more; }
}
@media (min-width: 900px) {
  .worth { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head photo" "quote photo" "more facts"; column-gap: clamp(40px, 5vw, 80px); row-gap: 28px; align-items: start; }
  .worth__head { grid-area: head; } .worth__quote { grid-area: quote; } .worth__photo { grid-area: photo; justify-self: end; }
  .worth__facts { grid-area: facts; } .worth__more { grid-area: more; }
  .worth__photo picture { aspect-ratio: 1; }
}

/* V-06 marquee */
.marquee-band { padding-block: clamp(56px, 5vw + 16px, 96px); }
.marquee-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-bottom: 22px; }
.marquee-head h2 { flex: 1 1 100%; font-size: clamp(1.75rem, 1rem + 1.7vw, 2.5rem); }
.marquee-pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 13.5em; padding: 0 14px; background: var(--ground-2); border: 1px solid rgb(var(--chalk-rgb) / .3); color: var(--chalk); font-weight: 700; font-size: 1rem; }
.marquee-pause:hover { border-color: var(--yellow-bright); }
.link-out { position: relative; margin-left: auto; color: var(--yellow); font-weight: 700; text-decoration: none; border-bottom: 2px solid rgb(var(--yellow-rgb) / .5); padding-bottom: 2px; }
.link-out::before { content: ""; position: absolute; inset: -12px 0; }
.link-out::after { content: " \2197"; content: " \2197" / ""; }
.link-out:hover, .link-out:focus-visible { color: var(--yellow-bright); border-bottom-color: var(--yellow-bright); }
@media (min-width: 780px) { .marquee-head h2 { flex: 0 1 auto; margin-right: auto; } .link-out { margin-left: 0; } }
.marquee {
  --gap: 18px; --item: 232px; --dur: 46s;
  display: flex; gap: var(--gap); overflow: hidden; user-select: none; padding: 26px 0 22px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__copy { display: flex; gap: var(--gap); flex-shrink: 0; min-width: 100%; justify-content: space-around; animation: marquee var(--dur) linear infinite; will-change: transform; }
.marquee:hover .marquee__copy, .marquee:focus-within .marquee__copy { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }
.tag { position: relative; flex: none; width: var(--item); padding-top: 22px; transform-origin: 50% 0; }
.tag::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 22px; background: rgb(var(--chalk-rgb) / .35); transform: translateX(-50%); }
.tag::after { content: ""; position: absolute; left: 50%; top: 16px; z-index: 1; width: 12px; height: 12px; border: 2px solid var(--yellow); background: var(--ground); border-radius: 50%; transform: translateX(-50%); }
.tag__card { position: relative; transform-style: preserve-3d; transform-origin: 50% 0; }
.tag__face { backface-visibility: hidden; }
.tag img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid rgb(var(--chalk-rgb) / .25); background: var(--ground-2); }
.tag__back {   /* back: hidden at rest (M34 flips the card) */
  position: absolute; inset: 0; display: grid; place-items: center; background: var(--chalk) var(--grain-dark); border: 1px solid rgb(var(--ground-rgb) / .3);
  transform: rotateY(180deg); backface-visibility: hidden;
}
.tag__back svg { width: 46%; height: auto; aspect-ratio: 1; }
@media (min-width: 768px) { .marquee { --item: 300px; --gap: 24px; } }
@media (min-width: 1600px) { .marquee { --item: 340px; } }
/* static strip: reduced, Calm, or #marquee.is-paused */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; scroll-snap-type: x proximity; }
  .marquee__copy { animation: none; } .marquee__copy[aria-hidden="true"] { display: none; }
  .tag { scroll-snap-align: start; } .marquee-pause { display: none; }
}
html.calm .marquee, .marquee.is-paused { overflow-x: auto; mask-image: none; scroll-snap-type: x proximity; }
html.calm .marquee__copy, .marquee.is-paused .marquee__copy { animation: none; }
html.calm .marquee__copy[aria-hidden="true"], .marquee.is-paused .marquee__copy[aria-hidden="true"] { display: none; }
html.calm .tag, .marquee.is-paused .tag { scroll-snap-align: start; }
html.calm .marquee-pause { display: none; }

/* fix-r1: tiles render after load (app.js) */
.tile { content-visibility: auto; contain-intrinsic-block-size: auto 184px; }
.tile.is-ready { content-visibility: visible; }   /* app.js: one tile per idle slice after load */
@media (min-width: 680px) { .tile { contain-intrinsic-block-size: auto calc((min(962px, 100vw - 64px) - 2px) * 2 / 3 + 163px); } }
@media (min-width: 1024px) { .tile { contain-intrinsic-block-size: auto calc((100vw - 68px) * 4 / 9 + 160px); } }
@media (min-width: 1184px) { .tile { contain-intrinsic-block-size: auto 664px; } }
@media (min-width: 1600px) { .tile { contain-intrinsic-block-size: auto 690px; } }
/* V-07 booths */
.tiles-band { background-image: var(--grain-dark), radial-gradient(120% 70% at 50% 0%, rgb(var(--chalk-rgb) / .6), transparent 60%), var(--ledger-rules); }
.booths-head { display: grid; gap: 24px; max-width: none; margin-bottom: 40px; }
.booths-head::before { content: ""; height: 3px; background: var(--ground); }
.plate--enamel {
  position: relative; justify-self: start; margin: 30px 0 0 clamp(8px, 3vw, 40px); padding: .3em .5em .2em;
  background: var(--ground) var(--grain-light); color: var(--chalk); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1;
  box-shadow: inset 0 0 0 5px var(--ground), inset 0 0 0 7px var(--yellow-bright), var(--shadow-plate);
  transform-origin: 50% -30px;
}
.plate--enamel::before, .plate--enamel::after {
  content: ""; position: absolute; top: -33px; width: 5px; height: 33px;
  background: repeating-linear-gradient(180deg, var(--ground) 0 6px, transparent 6px 8px, rgb(var(--ground-rgb) / .55) 8px 11px, transparent 11px 13px);
}
.plate--enamel::before { left: 14%; } .plate--enamel::after { right: 14%; }
.booths-head .lede { margin-top: 0; }
@media (min-width: 900px) {
  .booths-head { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; }
  .booths-head::before { grid-column: 1 / -1; }
  .booths-head .lede { padding-bottom: 6px; }
}
.tiles { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--rule-light); border: 1px solid var(--rule-light); }
.tile { background: var(--chalk); position: relative; container-type: inline-size; }
.tile article { display: flex; flex-direction: column; height: 100%; }
.tile figure { position: relative; overflow: hidden; }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tile:hover img { transform: scale(1.035); }
.tile__text { position: relative; padding: 20px 14px 24px; border-top: 1px solid var(--rule-light); }
.tile__text::before, .tile__text::after { content: ""; position: absolute; left: 14px; top: -1px; height: 3px; width: 42px; background: var(--barn); }
.tile__text::after { width: calc(100% - 28px); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.25, .46, .45, .94); }   /* M18 */
.tile:hover .tile__text::after, .tile:focus-within .tile__text::after { transform: scaleX(1); }
.tile h3 { color: var(--ground); }
/* tile text: ≥16 px, equal lines per row */
.tile p { margin-top: 8px; color: var(--ground); font-size: max(16px, (100cqi - 28px) / 17.5); line-height: 1.5; }
@container (min-width: 404px) { .tile p { font-size: max(16px, (100cqi - 28px) / 23.5); } }
.sign-line { margin-top: 24px; color: var(--ink-muted); font-size: 1rem; }
@media (min-width: 680px) { .tiles { grid-template-columns: repeat(2, 1fr); max-width: 962px; } .tile img { aspect-ratio: 3 / 4; } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(3, 1fr); max-width: 1264px; } }   /* 420 px tile cap */
@media (max-width: 679px) {
  .tile article { flex-direction: row; align-items: stretch; }
  .tile figure { flex: 0 0 38%; }
  .tile img { height: 100%; aspect-ratio: 3 / 4; }
  .tile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; border-top: 0; border-left: 1px solid var(--rule-light); padding: 16px 12px 16px 14px; }
  .tile__text::before, .tile__text::after { top: 0; }
  .tile p { font-size: 1rem; line-height: 1.45; }
}

/* V-08 map */
.map-band { padding-top: 0; background-image: var(--grain-light), var(--booth-grid), radial-gradient(90% 60% at 50% 100%, rgb(var(--yellow-rgb) / .07), transparent 70%); }
.stencil-head {
  margin-bottom: clamp(32px, 4vw, 56px); padding-block: clamp(44px, 5vw, 80px) clamp(36px, 4vw, 64px);
  background-color: var(--ground-2);
  background-image: var(--grain-light), repeating-linear-gradient(180deg, rgb(var(--chalk-rgb) / .05) 0 2px, transparent 2px 40px),
    conic-gradient(from 270deg at 2px 40px, rgb(var(--chalk-rgb) / .05) 0 90deg, transparent 0), conic-gradient(from 270deg at 2px 40px, rgb(var(--chalk-rgb) / .05) 0 90deg, transparent 0);
  background-size: auto, auto, 120px 80px, 120px 80px; background-position: 0 0, 0 0, 0 0, 60px 40px;
  border-bottom: 3px solid var(--ground);
}
/* stencil bridge at 46–54 % of the cap height */
.stencil-head h2 {
  color: var(--chalk); font-size: clamp(2.5rem, 1rem + 4.5vw, 5rem); line-height: 1; max-width: 10.2em;
  mask-image: linear-gradient(180deg, #000 46.5%, transparent 46.5% 52.5%, #000 52.5%);
  mask-size: 100% 1em;
}
.map-head { margin-bottom: 24px; }
.map-head .intro { margin-top: 0; }
.map-tools { display: grid; gap: 14px; margin-bottom: 20px; }
.helper { color: var(--chalk); font-size: 1rem; max-width: 47.8em; }
.helper__touch { display: none; }
.legend-wrap { position: relative; min-width: 0; margin-inline: -6px; }
.legend { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin-block: -6px; }   /* never wraps 4 + 1: one row that scrolls */
.legend::-webkit-scrollbar { display: none; }
.legend-wrap::before, .legend-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1; }
.legend-wrap::before { left: 0; background: linear-gradient(90deg, var(--ground), rgb(var(--ground-rgb) / 0)); }
.legend-wrap::after { right: 0; background: linear-gradient(270deg, var(--ground), rgb(var(--ground-rgb) / 0)); }
.legend-wrap.can-left::before, .legend-wrap.can-right::after { opacity: 1; }
.legend__btn {
  display: inline-flex; flex: none; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px;
  border: 2px solid rgb(var(--chalk-rgb) / .4); color: var(--chalk); font-size: 1rem; font-weight: 700;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.legend__btn:hover { border-color: var(--yellow); }
.legend__btn[aria-pressed="true"] { background: var(--yellow); color: var(--ground); border-color: var(--yellow); }
.sw { width: 16px; height: 16px; flex: none; border: 2px solid rgb(var(--ground-rgb) / .6); background: var(--chalk); }
.sw--case { background: var(--barn); } .sw--service { background: var(--zinc); }
.legend__btn[aria-pressed="true"] .sw { border-color: var(--ground); }
.map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.map-actions .btn { min-height: 44px; }
.map-status:empty { display: none; }
.map-status { flex-basis: 100%; color: var(--yellow-bright); font-weight: 700; font-size: 1rem; }
.skip-map { position: absolute; left: -9999px; }
.skip-map:focus { position: static; display: inline-block; margin-bottom: 12px; padding: 10px 14px; background: var(--yellow); color: var(--ground); font-weight: 700; text-decoration: none; }
@media (min-width: 1200px) {
  .map-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .helper { grid-column: 1 / -1; }
  .map-actions { justify-content: flex-end; }
  .map-status { text-align: right; }
}
@media (max-width: 599px) {
  .legend-wrap { margin-inline: calc(-1 * var(--gutter)); }
  .legend { gap: 6px; padding-inline: var(--gutter); }
  .legend__btn { padding: 0 12px; }
  .map-actions .btn { flex: 1 1 100%; }
}
.map-figure { position: relative; }
@media (min-width: 1440px) { .map-scroller { margin-inline: calc((100% - min(1360px, 100vw - 2 * var(--gutter))) / 2); } }   /* stage 1360 */
.map-scroller { position: relative; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: var(--yellow) transparent; padding-bottom: 6px; }
.map-figure::before, .map-figure::after { content: ""; position: absolute; top: 0; bottom: 40px; width: 36px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; }
.map-figure::before { left: 0; background: linear-gradient(90deg, rgb(var(--ground-rgb) / .9), transparent); }
.map-figure::after { right: 0; background: linear-gradient(270deg, rgb(var(--ground-rgb) / .9), transparent); }
.map-figure.can-left::before, .map-figure.can-right::after { opacity: 1; }
svg.map { width: 100%; height: auto; aspect-ratio: 1470 / 664; min-width: 960px; font-family: var(--font-body); }
@media (min-width: 1024px) { svg.map { min-width: 0; } }
.map-floor { fill: rgb(var(--chalk-rgb) / .035); }
.map-wall { stroke: var(--chalk); stroke-width: 3; stroke-linejoin: miter; }
.map-hatch-line { stroke: var(--chalk); }
.map-posts rect { fill: var(--zinc); }
.map-rooms rect { fill: rgb(var(--zinc-rgb) / .18); stroke: rgb(var(--chalk-rgb) / .4); stroke-width: 1.5; stroke-dasharray: 6 5; }
.booth rect { fill: var(--chalk); stroke: var(--ground); stroke-width: 1.5; transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease, opacity .25s ease; }
.booth text { fill: var(--ground); font-size: 22px; font-weight: 500; text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; }
.booth .t-small { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.booth--case rect { fill: var(--barn); stroke: var(--barn); }
.booth--case text { fill: var(--chalk); }
.booth--service rect { fill: var(--zinc); stroke: var(--ground); }
.booth--entrance rect { fill: transparent; stroke: none; }
.booth--entrance .entrance-gap { stroke: var(--barn); stroke-width: 7; stroke-dasharray: 10 8; }
.booth--entrance .entrance-rule { stroke: var(--chalk); stroke-width: 1.5; }
.booth--entrance .t-label { fill: var(--chalk); font-size: 17px; font-weight: 700; letter-spacing: .12em; }
.booth--entrance .entrance-rule { transform-box: fill-box; transform: scaleX(.86); transform-origin: 0 50%; }
.booth--entrance .entrance-rule:last-of-type { transform-origin: 100% 50%; }
@media (max-width: 1439px) {   /* fix-r1: map labels ≥ 16 px */
  .booth text, .booth .t-small, .booth--entrance .t-label { font-size: 24.5px; letter-spacing: 0; }
  #restrooms .t-small { font-size: 20px; }
  .booth--entrance .entrance-rule { transform: scaleX(.74); }
}
@media (min-width: 1440px) { .booth .t-small, .booth--entrance .t-label { font-size: 17.5px; } }
.booth { cursor: pointer; outline: none; }
/* focused/active booth: ≥ 12:1 vs chalk neighbours */
.booth:focus-visible rect, .booth.is-active rect, .booth.is-x rect { fill: var(--ground); stroke: var(--yellow-bright); stroke-width: 4; }
.booth:focus-visible text, .booth.is-active text, .booth.is-x text { fill: var(--yellow-bright); }
.booth--entrance:focus-visible rect, .booth--entrance.is-active rect { fill: transparent; stroke: none; }
.booth--entrance:focus-visible .entrance-gap, .booth--entrance.is-active .entrance-gap { stroke: var(--yellow-bright); }
.booth--entrance:focus-visible .t-label, .booth--entrance.is-active .t-label { fill: var(--yellow-bright); }
@media (hover: hover) {
  .booth:not(.booth--entrance):hover rect { fill: var(--ground); stroke: var(--yellow-bright); stroke-width: 4; }
  .booth:hover text { fill: var(--yellow-bright); }
  .booth--entrance:hover .entrance-gap { stroke: var(--yellow-bright); }
}
svg.map.zone-front .booth:not([data-zone="front"]), svg.map.zone-aisle .booth:not([data-zone="aisle"]),
svg.map.zone-perimeter .booth:not([data-zone="perimeter"]), svg.map.zone-case .booth:not([data-zone="case"]),
svg.map.zone-service .booth:not([data-zone="service"]) { opacity: .28; }
.xmark { stroke: var(--barn); stroke-width: 4; stroke-linecap: square; }
.map-xmarks { opacity: .9; }
/* M21 route + walker never take the pointer */
.map-route, .map-trail { pointer-events: none; }
.map-route .route-base { fill: none; stroke: var(--ground); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.map-route .route-dash { fill: none; stroke: var(--yellow-bright); stroke-width: 4; stroke-dasharray: 12 9; stroke-linejoin: round; }
.map-route .walker, .map-trail .walker { fill: var(--yellow-bright); stroke: var(--ground); stroke-width: 2; }

.map-trail .trail { fill: none; stroke: var(--barn); stroke-width: 5; stroke-dasharray: 14 10; stroke-linecap: round; stroke-linejoin: round; }
.map-trail .trail-x { stroke: var(--barn); stroke-width: 6; stroke-linecap: square; }
.map-trail .trail-x--core { stroke: var(--yellow-bright); stroke-width: 2; }
.map-chip { position: absolute; z-index: 3; padding: 8px 12px; background: var(--chalk); color: var(--ground); font-weight: 700; font-size: 1rem; line-height: 1.2; white-space: normal; max-width: min(22rem, calc(100% - 8px)); text-wrap: balance; box-shadow: 0 8px 24px rgb(var(--ground-rgb) / .6); }
.map-chip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--chalk); transform: translateX(-50%) rotate(45deg); }
.map-chip.is-below::after { bottom: auto; top: -6px; }
.map-chip.is-pinned { outline: 2px solid var(--yellow-bright); }
.map-chip .nw { display: block; }   /* egg chip: a line per sentence */
.map-figure figcaption { margin-top: 18px; color: var(--chalk); font-size: 1rem; max-width: 42.35em; }

/* V-09 rent */
.rent-band { background-image: var(--grain-light), repeating-linear-gradient(90deg, rgb(var(--ground-rgb) / .28) 0 2px, transparent 2px 46px, rgb(255 255 255 / .04) 46px 48px, transparent 48px 96px); }
.rent { display: grid; gap: 48px; }
.rent .kicker { color: var(--chalk); }
.rent__display { font-family: var(--font-display); font-size: clamp(2.5rem, 1rem + 4.5vw, 5.5rem); line-height: .95; color: var(--on-barn); text-wrap: balance; }
.rent__display span { display: block; }
.rent h2 { margin-top: 22px; max-width: 23.97em; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); line-height: 1.3; text-wrap: balance; }
.rent__body { margin-top: 14px; max-width: 39.6em; }
.rent__ledger { display: grid; margin-top: 28px; border-top: 1px solid rgb(var(--chalk-rgb) / .3); }
.rent__ledger li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid rgb(var(--chalk-rgb) / .3); font-size: 1.125rem; font-weight: 700; }
.rent__ledger li::before { background: var(--chalk); }
.rent__cta-line { margin-top: 22px; font-weight: 500; }
.rent__cta-line a { color: inherit; }
.rent__sign { position: relative; display: grid; justify-items: center; padding-top: 64px; }
.rent__sign::before { content: ""; position: absolute; top: 4px; left: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--chalk); box-shadow: 0 0 0 2px rgb(var(--ground-rgb) / .35); }
.forrent {
  position: relative; display: grid; justify-items: center; gap: 12px; width: min(100%, 25rem); padding: 30px 28px 26px; text-align: center; text-decoration: none;
  background-color: var(--chalk);
  background-image: radial-gradient(circle, rgb(var(--ground-rgb) / .6) 0 3px, rgb(var(--ground-rgb) / .18) 3.5px 5px, transparent 5.5px), radial-gradient(circle, rgb(var(--ground-rgb) / .6) 0 3px, rgb(var(--ground-rgb) / .18) 3.5px 5px, transparent 5.5px),
    radial-gradient(circle, rgb(var(--ground-rgb) / .6) 0 3px, rgb(var(--ground-rgb) / .18) 3.5px 5px, transparent 5.5px), radial-gradient(circle, rgb(var(--ground-rgb) / .6) 0 3px, rgb(var(--ground-rgb) / .18) 3.5px 5px, transparent 5.5px), var(--grain-dark);
  background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, auto; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: 12px 12px, calc(100% - 12px) 12px, 12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), 0 0;
  box-shadow: inset 0 0 0 7px var(--chalk), inset 0 0 0 9px var(--barn), 0 18px 30px -12px rgb(var(--ground-rgb) / .6);
  transform-origin: 50% -60px;
}
.forrent::before, .forrent::after {
  content: ""; position: absolute; top: -60px; height: 60px; width: 30%; pointer-events: none;
}
.forrent::before { left: 20%; background: linear-gradient(to bottom right, transparent calc(50% - 1.2px), var(--chalk) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)); }
.forrent::after { right: 20%; background: linear-gradient(to top right, transparent calc(50% - 1.2px), var(--chalk) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)); }
.forrent__big { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: .9; color: var(--barn); }
.forrent__call { padding-top: 12px; border-top: 2px solid var(--barn); color: var(--ground); font-weight: 700; font-size: 1.375rem; line-height: 1.2; }
.forrent:hover .forrent__call, .forrent:focus-visible .forrent__call { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 600px) { .rent__ledger { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 900px) { .rent { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; } }

/* V-10 visit */
.visit { display: grid; gap: 36px; }
.board {
  padding: 24px 20px 20px; color: var(--chalk);
  background-color: var(--ground-2); background-image: var(--grain-light), repeating-linear-gradient(180deg, rgb(var(--ground-rgb) / .55) 0 2px, transparent 2px 1.75em);
  box-shadow: 0 0 0 6px var(--chalk), 0 0 0 8px rgb(var(--ground-rgb) / .35), var(--shadow-plate); margin: 8px;
}
.board__title { font-family: var(--font-display); font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1; letter-spacing: .04em; }
.board__title span { display: block; }
.board__title span + span { margin-top: .12em; color: var(--yellow-bright); }
.board__days { display: grid; grid-template-columns: repeat(7, minmax(min-content, 1fr)); gap: 4px; margin-top: 20px; }   /* A-07 equal cells */
@media (max-width: 399px) { .board { padding-inline: 10px; } .board__days { gap: 3px; } }
@media (max-width: 339px) { .board { padding-inline: 7px; } }   /* "Wed" (16 px/700) fits its cell down to 320 */
.board__days li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 0 8px; border-top: 2px solid rgb(var(--chalk-rgb) / .35); font-weight: 700; font-size: 1rem; line-height: 1.15; }
.board__days li[aria-current="date"] { border-top-color: transparent; }
.board__days li[aria-current="date"]::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--yellow-bright); transform-origin: 0 50%; transform: scaleX(var(--today-bar, 1)); }
.board__today { color: var(--yellow-bright); font-size: 1rem; letter-spacing: .02em; }
.board__note { margin-top: 14px; font-weight: 500; font-size: 1rem; }
.worth__facts li, .worth__more p, .rent__ledger li, .board__note, .stop__meta { text-wrap: pretty; }   /* no one-word last lines */
.visit__holiday { margin-top: 22px; font-weight: 500; }
.visit__photo { position: relative; width: min(100%, 760px); }
.visit__photo picture { display: block; }
.visit__photo img { width: 100%; aspect-ratio: 1536 / 1044; object-fit: cover; padding: 6px; background: var(--chalk); border: 2px solid var(--ground); box-shadow: var(--shadow-plate); }
.visit__cover { display: none; }
.visit__photo figcaption { margin-top: 14px; font-weight: 700; font-size: 1rem; }
.nap { display: grid; gap: 2px; font-size: 1.125rem; }
.nap strong { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.05; margin-bottom: 6px; }
.nap a { color: var(--barn); font-weight: 700; text-decoration: none; justify-self: start; padding-block: 2px; }
.nap a:hover, .nap a:focus-visible { text-decoration: underline; }
.visit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.visit__gmaps-line { margin-top: 12px; }   /* DOM order = visual order (2.4.3) */
.visit__gmaps { font-weight: 700; color: var(--barn); text-decoration-thickness: 2px; }
.copy-status { flex-basis: 100%; font-weight: 700; color: var(--barn); }
.copy-status:empty { display: none; }
.visit__note { margin-top: 14px; font-weight: 500; }
.visit__map iframe { display: none; width: 100%; max-width: 760px; height: 320px; border: 2px solid var(--ground); background: var(--ground-2); }
.visit__map.map-open iframe { display: block; }
.map-reveal { min-width: min(100%, 260px); }
.visit-band .map-reveal { color: var(--ground); border-color: var(--ground); background: transparent; }
.visit-band .map-reveal:hover, .visit-band .map-reveal:focus-visible { background: rgb(var(--ground-rgb) / .08); }
@media (min-width: 900px) {
  .visit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "hours photo" "find map"; column-gap: clamp(40px, 5vw, 72px); row-gap: 40px; align-items: start; }
  .visit__hours { grid-area: hours; align-self: center; } .visit__photo { grid-area: photo; justify-self: end; } .visit__find { grid-area: find; } .visit__map { grid-area: map; justify-self: end; width: min(100%, 760px); }
}
/* guide sign: ", " / " via " stay in the DOM (DIST-1) */
.guide { position: relative; margin-top: clamp(48px, 6vw, 80px); padding: 28px 24px 18px; color: var(--chalk); background: var(--ground-2) var(--grain-light); border-radius: var(--sign-radius); box-shadow: var(--shadow-plate); }
.guide::before { content: ""; position: absolute; inset: 8px; border: 2px solid var(--chalk); border-radius: 3px; pointer-events: none; }
.guide h3 { position: relative; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1; padding-bottom: 14px; border-bottom: 2px solid rgb(var(--chalk-rgb) / .35); text-wrap: balance; }
.guide__list { display: grid; column-gap: 40px; }
.guide__line { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; padding: 14px 0 16px; font-size: 0; text-decoration: none; color: var(--chalk); }
.guide__line::after {   /* --lane: M27 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--yellow) 0 14px, transparent 14px 24px);
  transform-origin: 0 50%; transform: scaleX(var(--lane, 1)); transition: transform .25s ease;
}
.guide__line::before { content: ""; position: absolute; left: -14px; top: 18px; bottom: 18px; width: 4px; background: var(--yellow-bright); opacity: 0; transition: opacity .18s ease; }
.guide__line:hover::before, .guide__line:focus-visible::before { opacity: 1; }
.guide__line:hover::after, .guide__line:focus-visible::after { transform: scaleX(calc(var(--lane, 1) * 1.08)); }
.g-town, .g-mi { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + .8vw, 2.125rem); line-height: 1.05; order: 1; }
.g-town { flex: 1 1 0; min-width: 0; padding-right: 16px; }
.g-mi { order: 2; color: var(--yellow-bright); text-align: right; white-space: nowrap; }
.g-sep { order: 3; flex-basis: 100%; height: 6px; overflow: hidden; color: transparent; }
.g-route, .g-min, .g-cta { font-size: 1rem; line-height: 1.5; }
.g-route { order: 4; margin-right: 10px; padding: 0 7px; border: 1.5px solid var(--chalk); font-weight: 700; letter-spacing: .03em; }
.g-min { order: 5; margin-right: 10px; }
.g-cta { order: 6; color: var(--yellow-bright); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.g-dot { font-size: 0; }   /* fix-r2: never a line-initial "·" */
.nw { display: inline-block; max-width: 100%; }
@media (max-width: 429px) {   /* "(Minden–Gardnerville)" whole on its own line */
  .g-town:has(.nw) { display: contents; }
  .g-town .nw { order: 3; flex-basis: 100%; }
  .guide__line:has(.nw) .g-mi { margin-left: auto; }
}
@media (min-width: 900px) { .guide { padding: 34px 40px 24px; } .guide__list { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; } .guide__line { height: 100%; align-content: flex-start; } }   /* lane rules share a row baseline */

/* V-11 day trip */
.trip-band { background-image: var(--grain-light), radial-gradient(rgb(var(--chalk-rgb) / .09) 1.2px, transparent 1.6px); background-size: auto, 24px 24px; }
.street { margin-top: 8px; }
.street__road { width: 100%; height: auto; overflow: visible; }
.street__road--h { display: none; }
.street__road--v { width: min(100%, 300px); }
.street__edge { stroke: var(--chalk); stroke-width: 2; }
.street__centre { fill: none; stroke: var(--yellow-bright); stroke-width: 3; stroke-dasharray: 14 10; }
.street__start { fill: var(--ground); stroke: var(--yellow); stroke-width: 5; }
.street__pin { fill: var(--ground); stroke: var(--yellow); stroke-width: 3.5; transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.street__label { fill: var(--chalk); font-family: var(--font-body); font-weight: 700; font-size: 20px; }
.street__label--door { fill: var(--yellow-bright); }
.street__road--v .street__label { font-size: 18px; }
.street__note { margin-top: 12px; color: var(--chalk); font-size: 1rem; max-width: 47.8em; }
.street h3, .drives h3 { margin: 40px 0 20px; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); }
.street__stops, .drives__list { display: grid; gap: 16px; }
.stop, .drives__list li { position: relative; padding: 22px 20px 20px; background: var(--ground-2) var(--grain-light); color: var(--chalk); border-top: 4px solid var(--yellow); }
.stop { border-top-style: dashed; border-top-color: var(--yellow-bright); }
.stop h4, .drives__list h4 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.stop h4 a, .drives__list h4 a { color: var(--yellow-bright); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.stop h4 a:hover, .drives__list h4 a:hover, .stop h4 a:focus-visible, .drives__list h4 a:focus-visible { text-decoration-thickness: 3px; }
.stop__meta { margin: 8px 0 10px; font-weight: 700; font-size: 1rem; color: var(--chalk); }
.stop p:last-child, .drives__list li p:last-child { font-size: 1rem; }
.stop p a { color: var(--yellow-bright); }
.stop::before { content: ""; position: absolute; right: 18px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 3px var(--yellow); }
.stop h4 { padding-right: 28px; }
.trip__close { margin-top: 36px; font-weight: 700; font-size: 1.125rem; }
@media (min-width: 900px) {
  .street__road--h { display: block; } .street__road--v { display: none; }
  .street__stops, .drives__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .street h3, .drives h3 { margin-top: 48px; }
}
@media (hover: hover) { .stop:hover::before { transform: scale(1.15); } .stop::before { transition: transform .2s ease; } }

/* V-12 FAQ + footer */
.faq-band { background-image: var(--grain-dark), var(--ledger-rules), radial-gradient(60% 50% at 0% 100%, rgb(var(--barn-rgb) / .07), transparent 70%); }
.faq-band h2 { font-size: clamp(1.75rem, 1rem + 1.7vw, 2.5rem); }
.faq-band h3 { margin: 36px 0 6px; font-size: clamp(1.75rem, 1.4rem + .8vw, 2.125rem); color: var(--barn); }
.faq-band .sec-head { margin-bottom: 0; }
.faq__row { position: relative; display: grid; gap: 8px; padding: 22px 0; }
.faq__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-light); transform-origin: 0 50%; transform: scaleX(var(--rule-s, 1)); }
.faq dt { font-weight: 700; font-size: 1.125rem; color: var(--ground); }
.faq dd { color: var(--ground); font-size: 1.0625rem; line-height: 1.55; max-width: 47.8em; }
.faq dd a { color: var(--barn); font-weight: 700; }
@media (min-width: 900px) { .faq__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 24px 0; } .faq dt { font-size: 1.25rem; } }

.footer__main { padding-block: 64px 56px; border-top: 1px solid rgb(var(--yellow-rgb) / .35); }
.footer__grid { display: grid; gap: 36px; }
.footer__name { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--chalk); text-wrap: balance; }
.footer__tag { margin-top: 10px; color: var(--chalk); font-size: 1rem; text-wrap: balance; }
.footer__nap { display: grid; gap: 4px; align-content: start; }
.footer__nap a { justify-self: start; color: var(--yellow); font-weight: 700; text-decoration: none; }
.footer__nap a:hover, .footer__nap a:focus-visible { color: var(--yellow-bright); text-decoration: underline; }
.footer__nav ul, .footer__links { display: grid; gap: 6px; align-content: start; }
.footer__nav a, .footer__links a { color: var(--chalk); text-decoration: none; font-weight: 500; }
.footer__nav a:hover, .footer__links a:hover, .footer__nav a:focus-visible, .footer__links a:focus-visible { color: var(--yellow-bright); text-decoration: underline; }
.footer__more .calm-toggle { margin-top: 18px; background: transparent; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1.1fr .8fr .9fr; } }
/* wordmark fitted (13.486 / 6.765 em) */
.footer__fascia {
  container-type: inline-size; padding-block: 28px 22px; color: var(--ground);
  background-color: var(--yellow); background-image: repeating-linear-gradient(90deg, rgb(var(--ground-rgb) / .05) 0 1px, transparent 1px 28px);
  border-top: 3px solid var(--ground);
}
.footer__wordmark { font-family: var(--font-display); line-height: .9; font-size: calc(min(var(--wrap), 100cqi - 2 * var(--gutter)) / 6.87); }
.footer__wordmark span { display: block; }   /* A-04: wraps (not clips) under 1.4.12 spacing */
.footer__fascia-tag { margin-top: 14px; font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.footer__fascia-tag i { font-size: 0; font-style: normal; }
.footer__fascia-tag i::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 7px; vertical-align: 1px; border-radius: 50%; background: var(--barn); }
.footer__fascia-tag i::after { content: "\200B\200B"; font-size: 1rem; white-space: normal; }   /* breaks only after a separator */
.footer__rule { position: relative; margin-top: 26px; border-top: 2px solid var(--ground); }
.xmark-wink { position: absolute; z-index: 1; right: 0; top: -23px; width: 44px; height: 44px; cursor: default; background: var(--yellow); }
.xmark-wink::before, .xmark-wink::after { content: ""; position: absolute; left: 10px; top: 20px; width: 24px; height: 4px; background: var(--barn); }
.xmark-wink::before { transform: rotate(45deg); } .xmark-wink::after { transform: rotate(-45deg); }
.legal { margin-top: 16px; padding-right: 56px; font-weight: 500; font-size: 1rem; text-wrap: balance; }
.credit { margin-top: 6px; font-weight: 500; font-size: .875rem; }
.credit a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.credit a:hover { text-decoration-thickness: 2px; }
.credit a:focus-visible { outline-color: var(--ground); }   /* the default yellow ring vanishes on the yellow fascia */
@media (min-width: 768px) {
  .footer__wordmark { font-size: calc(min(var(--wrap), 100cqi - 2 * var(--gutter)) / 13.69); }
  .footer__wordmark span { display: inline; }
}

/* V-13 action bar */
.actionbar { display: none; }
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  body { padding-bottom: var(--bar-h); }
  .actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(3, 1fr);
    padding-bottom: env(safe-area-inset-bottom); background: var(--ground) var(--grain-light); border-top: 1px solid var(--yellow);
    transition: transform .22s cubic-bezier(.25, .46, .45, .94), visibility 0s linear 0s;
  }
  .actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; color: var(--yellow); font-weight: 700; font-size: 1rem; text-decoration: none; }
  .actionbar a + a { border-left: 1px solid rgb(var(--chalk-rgb) / .18); }
  .actionbar svg { width: 22px; height: 22px; }
  .actionbar a:active { background: rgb(var(--chalk-rgb) / .08); }
  .actionbar a:focus-visible { outline: 3px solid var(--yellow-bright); outline-offset: -6px; }
  .bar-tucked .actionbar { transform: translateY(110%); visibility: hidden; transition: transform .22s cubic-bezier(.25, .46, .45, .94), visibility 0s linear .22s; }
}

/* X · motion: start states only under html.motion */
html.motion [data-anim="rise"]:not(.is-in), html.motion [data-anim="shelf"]:not(.is-in) { opacity: 0; transform: translateY(16px); }
html.motion [data-anim="shelf"]:not(.is-in) { transform: translateY(24px); }
html.motion [data-anim="shelf"]:not(.is-in) img { transform: translateY(6%) scale(1.06); transition: none; }
html.motion [data-anim="settle"]:not(.is-in) { transform: translateY(12px); }
html.motion .worth__facts [data-anim]:not(.is-in), html.motion .rent__ledger [data-anim]:not(.is-in) { transform: translateX(10px); --tick: 1.6; }
html.motion [data-anim="stamp"]:not(.is-in) { opacity: 0; }
html.motion .plate--enamel:not(.is-in) { transform: rotate(4deg); }
html.motion .forrent:not(.is-in) { transform: rotate(-4deg); }   /* fix-r1 §7.2.9 cap */
.rent-band { overflow-x: clip; }
html.motion .worth__quote:not(.is-in) blockquote { --quote-s: 1.4; --quote-o: 0; }
html.motion .worth__quote:not(.is-in) .vinyl { --vinyl: 0; }
html.motion .board:not(.is-in) { --today-bar: 0; }
html.motion .guide:not(.is-in) { --lane: 0; }
html.motion .faq:not(.is-in) { --rule-s: 0; }
html.motion .hero__lights:not(.is-in) { display: block; }
html.motion .ribbon__track { transform: translateX(-50%); }   /* M06 rest (−50 % = the frame at 0); html.rib survives a failed boot */
html.motion .map-booths:not(.is-in) .booth { opacity: 0; }
html.motion .street:not(.is-in) .street__pin { transform: translateY(-12px) scale(.6); transition: none; }
html.motion .footer__wordmark:not(.is-in) .fw > span { transform: translateY(100%); }
svg.map .booth { transform-box: fill-box; transform-origin: 50% 50%; }
.map-trail .trail-x { transform-box: fill-box; transform-origin: 50% 50%; }
/* M26 wipe */
html.motion .visit__cover:not(.is-in) { display: block; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1536 / 1044; overflow: hidden; pointer-events: none; }
.visit__cover::before { content: ""; position: absolute; inset: 0; background: var(--ground-2) var(--grain-light); transform: translateX(calc(var(--wipe, 0) * 101%)); }
/* M31: each line rises in its own clip */
.footer__wordmark .fw { display: block; overflow: hidden; padding-block: .08em; margin-block: -.08em; }
.footer__wordmark .fw > span { display: inline-block; }
@media (min-width: 768px) { .footer__wordmark .fw { display: inline-block; vertical-align: top; } }
html.motion .guide:not(.is-in) .guide__line::after { transition: none; }   /* M27 draws --lane frame by frame */
.tile.tick-sweep .tile__text::after { transform: scaleX(1); }               /* M18 one sweep after the shelf pull */
.forrent { transition: translate .18s ease; }                               /* M23 lift (rotation stays anime's) */
.forrent:hover, .forrent:focus-visible { translate: 0 -2px; }
/* M12 · M15 */
.marquee.is-off .marquee__copy { animation-play-state: paused; }
/* M32 Call icon rings twice per entry */
@keyframes ring { 20%, 60% { transform: rotate(12deg); } 40%, 80% { transform: rotate(-12deg); } }
@media (hover: hover) { .btn[href^="tel:"]:hover svg { animation: ring .42s ease-in-out; } }
.btn[href^="tel:"]:focus-visible svg { animation: ring .42s ease-in-out; }
/* M34 beat: rules march (compositor-only pseudo translate) */
.x-marks .rule, .x-marks .footer__rule, .x-marks #map-caption { position: relative; clip-path: inset(-30px 0 -24px 0); overflow-x: clip; border-top-color: transparent; }   /* fix-r1: can't widen a phone page */
.x-marks .rule::after, .x-marks .footer__rule::after, .x-marks #map-caption::after {
  content: ""; position: absolute; left: -24px; right: 0; top: -1px; height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 14px, transparent 14px 24px); animation: x-march .6s linear infinite;
}
.x-marks .band--chalk .rule::after { background-image: repeating-linear-gradient(90deg, var(--barn) 0 14px, transparent 14px 24px); }
.x-marks .footer__rule::after { top: -2px; background-image: repeating-linear-gradient(90deg, var(--ground) 0 14px, transparent 14px 24px); }
.x-marks #map-caption::after { top: -10px; }   /* fix-r2: a beat element inside the map view */
.x-marks .ribbon { perspective: 700px; }
.x-marks .tag { perspective: 900px; }
@keyframes x-march { to { transform: translateX(24px); } }

/* reduced motion + Calm: kill every CSS transition/animation */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
html.calm { scroll-behavior: auto; }
html.calm *, html.calm *::before, html.calm *::after { transition: none !important; animation: none !important; }

/* phones + sideways phones */
.pic { display: contents; }
.pic > source { display: none; }
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .helper__desk { display: none; }
  .helper__touch { display: inline; }
  .rent__cta-line a, .visit__holiday a, .visit__gmaps, .stop h4 a, .drives__list h4 a { position: relative; }
  .rent__cta-line a::before, .visit__holiday a::before { content: ""; position: absolute; inset: -12px -6px; }

  .worth__facts a, .faq dd a, .stop p a, .hero__trip { position: relative; }
  .worth__facts a::before, .faq dd a::before, .stop p a::before, .hero__trip a::before { content: ""; position: absolute; inset: -12px -6px; }
  .hero__trip a::before { inset: -9.5px -6px; }   /* stays inside the 10 px gap to the CTAs */
  .stop h4 a::before, .drives__list h4 a::before { content: ""; position: absolute; inset: -10px 0; }   /* AC-31 44 px */
  .visit__gmaps::before { content: ""; position: absolute; inset: -12px -4px; }
  .nap a, .footer__nap a { padding-block: 10px; }
  .footer__nav ul, .footer__links { gap: 0; }
  .footer__nav a, .footer__links a { display: block; padding-block: 11px; }
}
@media (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .site-head__row { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 4px 0; min-height: 0; }
  .lockup { font-size: 1.25rem; padding: 0; }
  .site-nav { margin: 0; }
  .hero__top { padding-top: 12px; }
  .hero__body { padding-block: 16px 20px; }
  .sl-big { font-size: 3rem; }
  .sl-tail { font-size: 2.1rem; }
  .hero__noun { margin-top: 8px; font-size: 1.75rem; }
  .hero__sub { margin-top: 8px; font-size: 1rem; }
  .hero__ctas { margin-top: 14px; }
  .hero__ctas .btn { flex: none; }
  .site-head__cta { display: none; }
}
/* sub plank: sideways phones + 768–959 (AC-06) */
@media (max-height: 500px) and (pointer: coarse) and (orientation: landscape), (min-width: 768px) and (max-width: 959px) {
  .hero__sub .ln { background: rgb(var(--ground-rgb) / .9); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: .13em 6px; margin-inline: -6px; }
}

/* A · access (SPEC §9) */
.board__status { margin-top: 14px; color: var(--yellow-bright); font-weight: 700; font-size: 1rem; }
/* the copy-link row is reserved (no map jump) */
@media (max-width: 599px) { .map-actions #copy-booth[hidden] { display: inline-flex !important; visibility: hidden; } }
@media (forced-colors: active) {
  .map-wall, .map-rooms rect, .booth rect, .booth--entrance .entrance-rule { stroke: CanvasText; }
  .map-posts rect, .booth rect, .booth--case rect, .booth--service rect { fill: Canvas; }
  .booth text, .booth--case text, .booth--entrance .t-label, .street__label { fill: CanvasText; }
  .booth--entrance .entrance-gap { stroke: CanvasText; }
  .booth:focus-visible rect, .booth.is-active rect, .booth.is-x rect, .booth:not(.booth--entrance):hover rect { fill: Canvas; stroke: Highlight; stroke-width: 6; }
  .booth:focus-visible text, .booth.is-active text, .booth.is-x text, .booth--entrance:focus-visible .t-label, .booth--entrance.is-active .t-label { fill: Highlight; }
  .booth--entrance:focus-visible .entrance-gap, .booth--entrance.is-active .entrance-gap { stroke: Highlight; }
  .map-route .route-base, .map-route .route-dash, .map-trail .trail, .map-trail .trail-x, .street__centre, .street__edge, .street__pin, .street__start { stroke: Highlight; }
  .map-route .walker, .map-trail .walker { fill: Highlight; stroke: CanvasText; }
  .chip, .sl-plate, .plate--enamel, .forrent, .board, .guide, .stop, .drives__list li, .worth__photo, .visit__photo img, .marquee-pause, .calm-toggle, .legend__btn, .map-chip { border: 2px solid CanvasText; }
  .actionbar a { border: 2px solid CanvasText; }
  .sl-in { border: 2px solid CanvasText; }
  .sl-plate { position: relative; z-index: 1; padding-block: .2em; }   /* AC-36: above .sl-big's backplate */
  #entrance rect { stroke: none; }
  .vinyl::before, .hero__lights, .visit__cover { display: none; }
  .worth__quote blockquote::before { forced-color-adjust: none; color: CanvasText; background: none; }
  .board__days li[aria-current="date"]::before, .rule::before, .tile__text::before, .tile__text::after, .worth__facts li::before, .rent__ledger li::before { background: CanvasText; forced-color-adjust: none; }
  .ribbon i::before { forced-color-adjust: none; background: radial-gradient(circle, CanvasText 0 .15em, transparent calc(.15em + .6px)); }
}
@media print {
  @page { size: Letter; margin: 12mm 14mm; }
  html, body { background: Canvas !important; color: CanvasText !important; }
  *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; animation: none !important; transition: none !important; }
  body { padding-bottom: 0 !important; font-size: 11pt; line-height: 1.4; }
  [data-anim], [data-anim] *, .booth, .fw > span { opacity: 1 !important; transform: none !important; }
  .band, .site-head, .hero, .footer__fascia { background: none !important; color: CanvasText !important; padding-block: 0 !important; border: 0 !important; }
  .wrap { width: auto; margin: 0; }
  a { color: CanvasText !important; }
  .skip, .sprite, .site-nav, .site-head__open, .site-head__cta, .site-head__road, .hero picture, .hero__lights, .hero::before, .hero::after, .hero__body::before,
  .calm-toggle, .chip__x, .eyebrow, .hero__trail, .hero__noun, .hero__ctas, .hero__trip, .ribbon, .worth__photo, .worth__more, .marquee-band, #booths, #map, #rent,
  .visit__photo, .visit__map, .visit__gmaps-line, #copy-addr, .copy-status, .board__today, .board__abbr, .board__status, .g-cta, .street__road, .street__note, #faq, .footer, .actionbar, .palette-tool { display: none !important; }
  .site-head { position: static; }
  .site-head__row { display: block; padding: 0; min-height: 0; }
  .lockup { font-size: 16pt; color: CanvasText; }
  .lockup span { display: inline; }
  .hero { display: block; min-height: 0; max-width: none; margin-top: 10pt; }
  .hero__top, .hero__body { padding: 0 !important; margin: 0; width: auto; }
  .chip { display: inline-block; margin-top: 6pt; padding: 4pt 8pt; border: 1px solid CanvasText; background: none; color: CanvasText; font-size: 11pt; }
  .hero h1 { margin-top: 10pt; color: CanvasText; font-size: 24pt; line-height: 1.1; }
  #hero-h1 span { display: inline; position: static; width: auto; height: auto; margin: 0; padding: 0; vertical-align: baseline; background: none; box-shadow: none; font-size: 1em; -webkit-text-stroke: 0 !important; color: CanvasText !important; }
  .sl-big::before { content: none; }
  .hero__sub { margin-top: 6pt; max-width: none; font-size: 11pt; }
  #worth { margin-top: 14pt; }
  .worth { display: block; }
  .worth__head .rule, .rule { display: none; }
  .worth h2, .visit-band h2, .trip-band h2 { font-size: 18pt; margin-bottom: 6pt; color: CanvasText; }
  .worth__quote blockquote { padding-top: 0; font-size: 14pt; color: CanvasText; }
  .worth__quote blockquote::before { content: none; }
  .vinyl { display: inline; position: static; padding: 0; } .vinyl::before { content: none; }   /* PDF text order */
  .attr { color: CanvasText; margin-top: 2pt; font-size: 10pt; }
  .worth__facts { margin-top: 8pt; border: 0; }
  .worth__facts li { padding: 2pt 0 2pt 14pt; border: 0; font-size: 11pt; }
  .worth__facts li::before, .rent__ledger li::before { top: 7pt; width: 6pt; height: 6pt; background: CanvasText; }
  .worth__facts a { display: none; }
  #visit { margin-top: 14pt; break-inside: auto; }
  .sec-head { margin-bottom: 8pt; }
  .visit { display: block; }
  .board { margin: 0; padding: 8pt 10pt; border: 1.5pt solid CanvasText; background: none !important; color: CanvasText; break-inside: avoid; }
  .board__title { font-size: 16pt; }
  .board__title span { display: inline; } .board__title span + span { margin-left: .4em; color: CanvasText; }
  .board__days { display: block; margin-top: 6pt; columns: 2; column-gap: 20pt; }
  .board__days li { display: block; padding: 1pt 0; border: 0; font-size: 10.5pt; font-weight: 500; }
  .board__days li::before { content: none !important; }
  .board__days .sr-only { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .board__note, .visit__holiday, .visit__note { margin-top: 6pt; font-size: 10.5pt; }
  .visit__find { margin-top: 10pt; break-inside: avoid; }
  .nap { font-size: 11pt; } .nap strong { font-size: 14pt; margin-bottom: 2pt; }
  .visit__actions { display: block; margin-top: 6pt; }
  .visit__actions .btn--ink { display: block; min-height: 0; padding: 0; border: 0; background: none; color: CanvasText; font-weight: 700; text-align: left; font-size: 10.5pt; }
  .visit__actions .btn--ink::after { content: ": " attr(href); font-weight: 400; font-size: 9pt; word-break: break-all; }
  .guide { margin-top: 12pt; padding: 8pt 10pt; border: 1.5pt solid CanvasText; background: none !important; color: CanvasText; break-inside: avoid; }
  .guide::before { content: none; }
  .guide h3 { font-size: 14pt; padding-bottom: 4pt; border-bottom: 1px solid CanvasText; }
  .guide__list { display: block; }
  .guide__line { display: block; padding: 3pt 0; font-size: 11pt; color: CanvasText; text-decoration: none; }
  .guide__line::before, .guide__line::after { content: none; }
  .guide__line > span { display: inline; font: inherit; color: CanvasText; border: 0; padding: 0; margin: 0; height: auto; overflow: visible; }
  .g-town { font-weight: 700 !important; }
  #day-trip { margin-top: 14pt; break-before: auto; }
  .street h3, .drives h3 { margin: 8pt 0 4pt; font-size: 13pt; color: CanvasText; }
  .street__stops, .drives__list { display: block; }
  .stop, .drives__list li { padding: 4pt 0 4pt 10pt; margin-bottom: 4pt; border: 0; border-left: 2pt solid CanvasText; background: none !important; color: CanvasText; break-inside: avoid; }
  .stop::before { content: none; }
  .stop h4, .drives__list h4 { font-size: 11pt; padding: 0; }
  .stop h4 a, .drives__list h4 a, .stop p a { color: CanvasText; text-decoration: none; }
  .stop__meta { margin: 1pt 0; font-size: 10pt; color: CanvasText; }
  .stop p:last-child, .drives__list li p:last-child { font-size: 10pt; }
  .lede, .trip__close { font-size: 10.5pt; margin-top: 4pt; }
}

/* Palettes — colour tokens only (pewter --yellow fixed 2026-10-05) */
[data-palette-preview="dock"] {
  --ground: #14201B; --ground-2: #1D2B25; --chalk: #EDEBE3; --yellow: #D9A400; --yellow-bright: #F5D31C;
  --barn: #7A2E1F; --on-barn: #FFFFFF; --zinc: #8A9A8E; --ink-muted: #4A5A4E;
}
:root[data-palette="oxblood"], [data-palette-preview="oxblood"] {
  --ground: #2A1417; --ground-2: #3A1F23; --chalk: #EFEBE6; --yellow: #C9A13B; --yellow-bright: #E8C766;
  --barn: #2B6556; --on-barn: #FFFFFF; --zinc: #B09C98; --ink-muted: #5B4A48;
  --ground-rgb: 42 20 23; --chalk-rgb: 239 235 230; --yellow-rgb: 201 161 59; --barn-rgb: 43 101 86; --zinc-rgb: 176 156 152;
}
:root[data-palette="enamel"], [data-palette-preview="enamel"] {
  --ground: #10294A; --ground-2: #18365C; --chalk: #F2F0EA; --yellow: #E8912E; --yellow-bright: #F6AE55;
  --barn: #B0271F; --on-barn: #FFFFFF; --zinc: #9DB0C6; --ink-muted: #46546A;
  --ground-rgb: 16 41 74; --chalk-rgb: 242 240 234; --yellow-rgb: 232 145 46; --barn-rgb: 176 39 31; --zinc-rgb: 157 176 198;
}
:root[data-palette="walnut"], [data-palette-preview="walnut"] {
  --ground: #2A1E16; --ground-2: #382A20; --chalk: #EDEAE3; --yellow: #3FB3A1; --yellow-bright: #72D3C3;
  --barn: #6A2C4E; --on-barn: #FFFFFF; --zinc: #AA9C8E; --ink-muted: #584B40;
  --ground-rgb: 42 30 22; --chalk-rgb: 237 234 227; --yellow-rgb: 63 179 161; --barn-rgb: 106 44 78; --zinc-rgb: 170 156 142;
}
:root[data-palette="pewter"], [data-palette-preview="pewter"] {
  --ground: #1F2328; --ground-2: #2A3037; --chalk: #ECEBE8; --yellow: #DE8C4C; --yellow-bright: #EC9D63;
  --barn: #35547A; --on-barn: #FFFFFF; --zinc: #9CA3AC; --ink-muted: #4C535C;
  --ground-rgb: 31 35 40; --chalk-rgb: 236 235 232; --yellow-rgb: 222 140 76; --barn-rgb: 53 84 122; --zinc-rgb: 156 163 172;
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

/* Palette preview tool (pre-launch) */
.palette-tool { position: fixed; z-index: 60; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); font-family: var(--font-body); }
.palette-tool__toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  background: var(--ground); color: var(--chalk); border: 2px solid var(--yellow); border-radius: 999px;
  font: inherit; font-size: .9375rem; line-height: 1.1; cursor: pointer; box-shadow: 0 10px 28px -10px rgb(0 0 0 / .55);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.palette-tool__toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgb(0 0 0 / .6); }
.palette-tool__toggle:focus-visible { outline: 3px solid var(--chalk); outline-offset: -7px; }
.palette-tool__dots { display: inline-flex; }
.palette-tool__dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ground); margin-left: -5px; }
.palette-tool__dots i:first-child { margin-left: 0; background: var(--yellow); }
.palette-tool__dots i:nth-child(2) { background: var(--barn); box-shadow: 0 0 0 1px rgb(var(--chalk-rgb) / .35); }
.palette-tool__dots i:nth-child(3) { background: var(--chalk); }
.palette-tool__kicker, .palette-tool__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.palette-tool__panel {
  position: absolute; left: 0; bottom: calc(100% + 12px); width: min(410px, calc(100vw - 32px)); max-height: min(calc(100vh - 110px), 720px); overflow: auto; overscroll-behavior: contain;
  background: var(--ground); color: var(--chalk); border: 1px solid rgb(var(--chalk-rgb) / .2); border-top: 3px solid var(--yellow); border-radius: 10px; padding: 14px 14px 12px;
  box-shadow: 0 28px 60px -20px rgb(0 0 0 / .7);
}
.palette-tool__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.palette-tool__head h2 { font-size: 1.5rem; line-height: 1; margin: 0; color: var(--chalk); letter-spacing: .01em; }
.palette-tool__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(var(--chalk-rgb) / .3); color: var(--chalk); font-size: 1.5rem; line-height: 1; }
.palette-tool__close:hover { background: rgb(var(--chalk-rgb) / .1); }
.palette-tool__close:focus-visible, .palette-tool__copy:focus-visible { outline: 3px solid var(--yellow-bright); outline-offset: 2px; }
.palette-tool__list { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.palette-opt { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 8px; cursor: pointer; background: var(--ground); color: var(--chalk); border: 2px solid rgb(var(--chalk-rgb) / .14); transition: border-color .15s ease, transform .15s ease; }
.palette-opt:hover { border-color: rgb(var(--chalk-rgb) / .45); transform: translateX(2px); }
.palette-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.palette-opt:has(input:checked) { border-color: var(--yellow); }
.palette-opt:has(input:checked)::after { content: "In use"; position: absolute; top: 10px; right: 10px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); color: var(--ground); padding: 3px 7px; border-radius: 999px; }
.palette-opt:has(input:focus-visible) { outline: 3px solid var(--yellow-bright); outline-offset: 2px; }
.palette-opt__chips { display: grid; grid-template-columns: repeat(2, 18px); gap: 4px; }
.palette-opt__chips i { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(var(--chalk-rgb) / .25); }
.palette-opt__chips i:nth-child(1) { background: var(--ground-2); } .palette-opt__chips i:nth-child(2) { background: var(--chalk); }
.palette-opt__chips i:nth-child(3) { background: var(--yellow); } .palette-opt__chips i:nth-child(4) { background: var(--barn); }
.palette-opt__text b { display: block; font-size: 1rem; padding-right: 64px; }
.palette-opt__text small { display: block; font-size: .8125rem; line-height: 1.35; color: var(--zinc); margin-top: 2px; }
.palette-tool__foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgb(var(--chalk-rgb) / .16); }
.palette-tool__copy { width: 100%; min-height: 44px; border-radius: 6px; border: 2px solid var(--yellow); background: var(--yellow); color: var(--ground); font-weight: 700; font-size: .9375rem; }
.palette-tool__copy:hover { background: var(--yellow-bright); border-color: var(--yellow-bright); }
.palette-tool__note { font-size: .8125rem; color: var(--zinc); margin: 8px 0 0; line-height: 1.4; }
.palette-tool__status { font-size: .8125rem; color: var(--yellow-bright); margin: 6px 0 0; min-height: 1.2em; word-break: break-all; }
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .palette-tool { bottom: calc(var(--bar-h) + 12px); }
  .palette-tool__panel { max-height: min(calc(100vh - var(--bar-h) - 96px), 720px); }
}
@media (max-width: 767px) {   /* scrollY 0: disc top-right (AC-30) */
  html:has(#palette-tool) { scroll-padding-bottom: calc(var(--bar-h) + 72px); }
  /* A-09: lifted by transform (no CLS) */
  .palette-tool { left: auto; right: max(16px, env(safe-area-inset-right)); }
  .palette-tool__panel { left: auto; right: 0; }
  .palette-tool:not(.is-compact) { transform: translateY(calc(-100vh + var(--bar-h) + 68px)); transform: translateY(calc(-100dvh + var(--bar-h) + 68px)); }
  .palette-tool:not(.is-compact) .palette-tool__panel { top: calc(100% + 12px); bottom: auto; }
}
/* palette tool: one disc (no CLS); hidden at 400 % zoom (AC-33) */
@media (min-width: 768px) {
  .palette-tool { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: calc(1.5 * clamp(1.75rem, 1rem + 3.4vw, 4.5rem) + 18px); }
  .palette-tool__panel { left: auto; right: 0; }
}
@media (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .palette-tool { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--bar-h) + 12px); }
  .palette-tool:not(.is-compact) { transform: none; }
  .palette-tool__panel, .palette-tool:not(.is-compact) .palette-tool__panel { left: auto; right: 0; top: auto; bottom: calc(100% + 12px); }
}
@media (max-height: 400px) and (pointer: fine) { .palette-tool { display: none; } }
@media print { .palette-tool { display: none !important; } }