/* ==========================================================================
   BRUNSWICK STEAM ENGINE — design system, direction 1a "Engraved broadside"
   A project of the Brunswick Arts Council.

   Palette from the BAC logo: teal #00A1B6 · brass #B8A76E · paper #FFF7E7
   Type: Fraunces (display) / Karla (text) / Cutive Mono (waybill + data)

   Paper is the primary ground. Soot bands punctuate it. The photographs, the
   corridor map, and the floor plan are fixed-colour artwork, so they sit on
   explicit paper plates that hold in either theme rather than inverting.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Fixed, theme-independent: the printed artwork and its frame */
  --paper-fixed:#FFF7E7;
  --paper-fixed-sunk:#F6EBD3;
  --paper-fixed-card:#FFFCF3;
  --ink-fixed:#16262B;
  --brass-fixed:#B8A76E;

  /* Light (default) */
  --bg:#FFF7E7;
  --bg-sunk:#F6EBD3;
  --bg-card:#FFFCF3;
  --fg:#16262B;
  --fg-dim:#4A5F65;
  --fg-faint:#5F7377;
  --fg-fainter:#657477;  /* WCAG AA on paper: 4.56:1 */
  --accent:#046A78;
  --accent-bright:#00A1B6;
  --accent-wash:rgba(0,161,182,.10);
  --brass:#B8A76E;
  --brass-ink:#7F703F;   /* WCAG AA on paper: 4.59:1 at 14px */
  --rust:#B4533A;
  --line:rgba(22,38,43,.30);
  --line-soft:rgba(22,38,43,.14);
  --line-strong:#16262B;
  --btn-on-teal:#FFF9EC;

  /* Soot bands, identical in both themes except for their ground */
  --band-bg:#0E1A1E;
  --band-fg:#F4E9D3;
  --band-body:#C9D3D4;
  --band-lede:#AEBEBF;
  --band-dim:#9DB0B2;
  --band-line:rgba(184,167,110,.40);
  --band-card:#16262B;

  --grain:.42;
  --steam:.5;

  /* Type scale, anchored on the 1a desktop values */
  --t-mono-sm:12px;
  --t-mono:13px;
  --t-waybill:14px;
  --t-sm:15px;
  --t-base:17px;
  --t-lede:clamp(1.125rem,1.05rem + .3vw,1.25rem);      /* 18 to 20 */
  --t-h4:1.375rem;                                       /* 22 */
  --t-h3:clamp(1.6rem,1.35rem + 1.2vw,2.25rem);          /* 26 to 36 */
  --t-h2:clamp(1.9rem,1.5rem + 1.8vw,2.75rem);           /* 30 to 44 */
  --t-h1:clamp(2.4rem,1.6rem + 3.2vw,4.125rem);          /* 38 to 66 */
  --t-fig:clamp(2.1rem,1.6rem + 2.2vw,3rem);             /* 34 to 48 */
  --t-steam:clamp(2.8rem,2.2rem + 2vw,3.5rem);           /* 45 to 56 */

  --shell:1140px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --band-pad:clamp(3.25rem,6vw,5.5rem);
  --measure:66ch;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1316;
    --bg-sunk:#101E23;
    --bg-card:#16292F;
    --fg:#F4E9D3;
    --fg-dim:#C9D3D4;
    --fg-faint:#9DB0B2;
    --fg-fainter:#87999B;
    --accent:#45C8DA;
    --accent-bright:#5FD6E6;
    --accent-wash:rgba(69,200,218,.13);
    --brass:#D3BF85;
    --brass-ink:#C9B478;
    --rust:#DE7A5E;
    --line:rgba(244,233,211,.26);
    --line-soft:rgba(244,233,211,.13);
    --line-strong:#D3BF85;
    --btn-on-teal:#06181C;
    --band-bg:#16292F;
    --band-card:#0E1A1E;
    --grain:.2;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1316;
  --bg-sunk:#101E23;
  --bg-card:#16292F;
  --fg:#F4E9D3;
  --fg-dim:#C9D3D4;
  --fg-faint:#9DB0B2;
  --fg-fainter:#87999B;
  --accent:#45C8DA;
  --accent-bright:#5FD6E6;
  --accent-wash:rgba(69,200,218,.13);
  --brass:#D3BF85;
  --brass-ink:#C9B478;
  --rust:#DE7A5E;
  --line:rgba(244,233,211,.26);
  --line-soft:rgba(244,233,211,.13);
  --line-strong:#D3BF85;
  --btn-on-teal:#06181C;
  --band-bg:#16292F;
  --band-card:#0E1A1E;
  --grain:.2;
}

/* ---- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:var(--t-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Letterpress grain, one sheet behind every band */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::before{mix-blend-mode:overlay}
}
:root[data-theme="dark"] body::before{mix-blend-mode:overlay}

img,svg,canvas{max-width:100%;height:auto;display:block}
::selection{background:var(--accent-bright);color:#06181C}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--accent-bright);outline-offset:3px;
}

/* ---- 3. Typography ------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 96;
  font-weight:700;margin:0;text-wrap:balance;
}
h1{font-size:var(--t-h1);line-height:1.02;letter-spacing:-.014em}
h2{font-size:var(--t-h2);line-height:1.05;letter-spacing:-.012em}
h3{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.008em}
h4{font-size:var(--t-h4);line-height:1.25;font-variation-settings:"SOFT" 18,"WONK" 0,"opsz" 40}
p{margin:0}

.lede{font-size:var(--t-lede);line-height:1.5;color:var(--fg-dim);max-width:60ch}
.prose{max-width:var(--measure);color:var(--fg-dim)}
.prose > * + *{margin-top:1.05em}
.prose strong{color:var(--fg);font-weight:700}
.prose a{color:var(--accent);text-underline-offset:3px}

/* Waybill: the mono label that marks every structural division */
.waybill{
  font-family:"Cutive Mono",ui-monospace,"Courier New",monospace;
  font-size:var(--t-waybill);letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass-ink);display:inline-flex;align-items:center;gap:.7em;line-height:1.2;
}
.waybill::before{content:"◆";font-size:9px;color:var(--brass);letter-spacing:0}
.waybill.no-mark::before{content:none}
/* A waybill that is also a real section heading keeps the mono treatment. */
h2.waybill,h3.waybill{font-variation-settings:normal;font-weight:400;line-height:1.2}
.band-dark .waybill{color:var(--brass)}

/* ---- 4. Layout ---------------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band-pad)}
.band-sunk{background:var(--bg-sunk)}
.band-dark{background:var(--band-bg);color:var(--band-body)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--band-fg)}
.band-dark .lede{color:var(--band-lede)}
.band-dark .prose{color:var(--band-body)}
.band-dark .prose strong{color:var(--band-fg)}

.stack{display:flex;flex-direction:column}
.stack-xs{gap:8px}
.stack-sm{gap:16px}
.stack-md{gap:24px}
.stack-lg{gap:48px}

/* ---- 5. Engraved double rule -------------------------------------------- */
.rule{display:flex;align-items:center;gap:14px;color:var(--brass)}
.rule::before,.rule::after{
  content:"";flex:1;height:5px;
  border-top:1px solid currentColor;border-bottom:1px solid currentColor;
}
.rule .rule-mark{font-size:10px;letter-spacing:.5em;padding-left:.5em;line-height:1}

/* ---- 6. Buttons --------------------------------------------------------- */
.btn{
  --btn-bg:var(--accent);--btn-fg:var(--btn-on-teal);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:16px 28px;background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bg);border-radius:0;
  font-family:"Cutive Mono",ui-monospace,monospace;font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;line-height:1;box-shadow:3px 3px 0 0 var(--brass);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--brass)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--brass)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--fg);border-color:var(--line-strong);box-shadow:3px 3px 0 0 var(--line-soft)}
.btn-ghost:hover{--btn-fg:var(--accent);border-color:var(--accent)}
.band-dark .btn-ghost{--btn-fg:var(--band-fg);border-color:var(--band-line)}
.band-dark .btn-ghost:hover{--btn-fg:var(--accent-bright);border-color:var(--accent-bright)}
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 0 var(--line-soft)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none;transition:none}}

/* ---- 7. Masthead -------------------------------------------------------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line-strong)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:14px;max-width:none}
.masthead-rules{height:5px;border-top:1px solid var(--brass);border-bottom:1px solid var(--brass);margin-top:3px}

.wordmark{display:flex;align-items:center;gap:18px;text-decoration:none;color:var(--fg)}
.wordmark img{height:66px;width:auto;flex:none}
.wordmark-txt{display:flex;flex-direction:column;gap:5px;border-left:1px solid var(--brass);padding-left:18px;line-height:1}
.wordmark-txt b{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60;
  font-weight:800;font-size:19px;letter-spacing:.01em;
}
.wordmark-txt span{
  font-family:"Cutive Mono",monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-faint);white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:28px}
.nav a{
  white-space:nowrap;font-family:"Cutive Mono",monospace;font-size:var(--t-mono-sm);
  letter-spacing:.15em;text-transform:uppercase;color:var(--fg-dim);
  text-decoration:none;padding-block:6px;border-bottom:1.5px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--brass)}
/* .nav a is (0,1,1) and would otherwise beat .btn (0,1,0) on colour */
.nav a.btn,.nav a.btn:hover{color:var(--btn-fg);border-bottom-color:var(--btn-bg)}
.nav .btn{padding:13px 20px;font-size:var(--t-mono-sm);margin-left:8px}
.themeswap{
  background:none;border:1px solid var(--line);border-radius:0;width:36px;height:36px;
  display:grid;place-items:center;cursor:pointer;color:var(--fg-dim);flex:none;
}
.themeswap:hover{color:var(--accent);border-color:var(--accent)}
/* Full lockup + four links + CTA need ~1200px; drop the tagline first, then the links */
@media (max-width:1340px){.wordmark-txt span{display:none}}
@media (max-width:980px){.nav{gap:18px}.nav .nav-link{display:none}}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--band-bg);color:var(--band-fg);
  padding:14px 20px;font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.15em;text-transform:uppercase;
}
.skip:focus{left:8px;top:8px}

/* ---- 8. Hero ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;background:var(--bg)}
#steam{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:var(--steam)}
.hero-in{position:relative;z-index:1;padding-block:clamp(2.5rem,5vw,5rem) clamp(2.5rem,4.5vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.hero h1 em{font-style:normal;color:var(--accent);font-variation-settings:"SOFT" 55,"WONK" 1,"opsz" 144}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-faint);
}
.hero-meta li{list-style:none}
.hero-meta li:not(:last-child)::after{content:"◆";color:var(--brass);margin-left:14px;font-size:8px;vertical-align:2px}
.hero-meta{margin:0;padding:0}

/* ---- 8b. Photography (direction 2e) -------------------------------------
   Photographs are fixed-colour content, so every frame sits on an explicit
   paper plate. On a dark page they read as prints pinned to the sheet, which
   is the same logic the corridor map already uses. */
.shot{position:relative;overflow:hidden;display:block}
.shot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,50% 50%);display:block;
}

/* Hero: engraved double frame with a brass hard shadow. */
.hero-photo{
  border:1px solid var(--ink-fixed);background:var(--paper-fixed-sunk);
  padding:10px;box-shadow:5px 5px 0 var(--brass-fixed);margin:0;
  /* Hang the picture from the headline rather than floating it in the middle
     of the row. 32px is the eyebrow line plus the stack gap (17 + 24), less the
     20px of frame the plate puts above the image, so the top edge of the
     photograph lands on the cap height of the h1 and the two columns share a
     line the eye can actually find. */
  align-self:start;margin-top:32px;
}
.hero-photo > div{border:1px solid var(--brass-fixed);padding:8px}
.hero-photo .shot{aspect-ratio:16/10}
.hero-photo figcaption,.plan-frame figcaption{
  font-family:"Cutive Mono",monospace;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8A7A45;text-align:center;line-height:1.5;
  padding-top:12px;
}

/* A notional floor plan, not a real one. */
.plan-frame{
  border:1px solid var(--ink-fixed);background:var(--paper-fixed-sunk);
  padding:28px 40px 22px;margin:0;
}
.plan-frame svg{width:100%;max-width:820px;height:auto;margin-inline:auto;display:block}

/* Platform band under the corridor map. */
.sign-band{margin:6px 0 0;display:flex;flex-direction:column;gap:8px}
.sign-band .plate{border:1px solid var(--ink-fixed);background:var(--paper-fixed-card);padding:6px}
/* The photograph is cropped tight to the sign on all four sides, so the frame
   takes the picture's own ratio. Any other ratio would re-crop it and eat the
   ends of BRUNSWICK, which is the one word the band exists to show. */
.sign-band .shot{aspect-ratio:930/254}
.sign-band figcaption{
  font-family:"Cutive Mono",monospace;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-ink);text-align:center;
}

/* Evidence photo above each "why here" card. */
.note-photo{
  border:1px solid var(--ink-fixed);background:var(--paper-fixed-card);
  padding:6px;margin-bottom:14px;
}
.note-photo .shot{aspect-ratio:4/3}
.note.has-photo{border-top:none;padding-top:0}
.note.has-photo::before{content:none}

/* ---- 9. STEAM consist --------------------------------------------------- */
.consist{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.consist::before{               /* the coupling line the cars sit on */
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--brass);opacity:.55;z-index:0;
}
.car{
  position:relative;z-index:1;background:var(--band-card);
  border:1px solid var(--band-line);border-top:3px solid var(--brass);
  padding:22px 20px 24px;display:flex;flex-direction:column;gap:8px;
}
.car b{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
  font-size:var(--t-steam);font-weight:800;line-height:.9;color:var(--accent-bright);
}
.car span{font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.17em;text-transform:uppercase;color:var(--brass)}
.car p{font-size:var(--t-sm);line-height:1.55;color:var(--band-body)}

/* ---- 10. Notes and grids ------------------------------------------------ */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(1.75rem,3.5vw,3.5rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}

.note{border-top:1px solid var(--line-strong);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.note::before{content:"◆";font-size:10px;color:var(--brass);line-height:1}
.note h3{
  font-size:var(--t-h4);line-height:1.25;color:var(--fg);
  font-variation-settings:"SOFT" 18,"WONK" 0,"opsz" 40;
}
.note p{font-size:var(--t-sm);line-height:1.55;color:var(--fg-dim)}
.band-dark .note{border-top-color:var(--band-line)}
.band-dark .note h3{color:var(--band-fg)}
.band-dark .note p{color:var(--band-body)}

/* Straight answers: two columns of stacked notes with a brass diamond gutter */
.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:18px 48px}
.answers-col{display:flex;flex-direction:column;gap:28px}

/* ---- 11. Figures strip -------------------------------------------------- */
.figures{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line-strong);background:var(--bg-card);
}
.fig{padding:28px 26px;border-right:1px solid var(--line-strong);display:flex;flex-direction:column;gap:8px}
.fig:last-child{border-right:none}
.fig b{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 100;
  font-size:var(--t-fig);font-weight:800;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;
}
.fig span{font-size:var(--t-sm);color:var(--fg-dim);line-height:1.45}
.footnote{font-size:var(--t-sm);color:var(--fg-faint);max-width:70ch;line-height:1.55}

/* ---- 12. Timetable ------------------------------------------------------ */
.tt-wrap{overflow-x:auto;border:1px solid var(--band-line)}
.timetable{width:100%;border-collapse:collapse;min-width:640px}
.timetable caption{
  text-align:left;padding:0 20px 12px;font-family:"Cutive Mono",monospace;
  font-size:var(--t-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--band-dim);
}
.timetable th{
  text-align:left;padding:14px 20px;font-family:"Cutive Mono",monospace;font-size:var(--t-mono);
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
  border-bottom:2px solid var(--brass);
}
.timetable td{padding:22px 20px;border-bottom:1px solid var(--band-line);vertical-align:top}
.timetable tr:last-child td{border-bottom:none}
.timetable tr:hover td{background:var(--accent-wash)}
.tt-no{font-family:"Cutive Mono",monospace;font-size:22px;color:var(--brass);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1}
.tt-mo{font-family:"Cutive Mono",monospace;font-size:var(--t-sm);color:var(--band-dim);white-space:nowrap}
.tt-title{
  display:block;font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 18,"WONK" 0,"opsz" 40;
  font-size:19px;font-weight:700;color:var(--band-fg);margin-bottom:6px;
}
.tt-body{font-size:var(--t-sm);line-height:1.55;color:var(--band-body)}

/* ---- 13. Corridor map --------------------------------------------------- */
.mapfig{margin:0;display:flex;flex-direction:column;gap:14px}
.mapplate{border:1px solid var(--ink-fixed);background:var(--paper-fixed);padding:8px}
.mapplate svg{width:100%;height:auto}
.mapfig figcaption{font-family:"Cutive Mono",monospace;font-size:12.5px;letter-spacing:.09em;color:var(--fg-faint);line-height:1.65}

/* ---- 14. Ticket CTA ----------------------------------------------------- */
.ticket{
  position:relative;background:var(--bg-card);border:1.5px solid var(--line-strong);
  padding:clamp(1.75rem,4vw,3rem) clamp(1.75rem,4vw,3.25rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;
  box-shadow:0 14px 34px -22px rgba(22,38,43,.5);
}
.ticket::before{content:"";position:absolute;inset:7px;border:1px solid var(--brass);pointer-events:none}
.ticket-body{position:relative;display:flex;flex-direction:column;gap:16px}
.ticket > div:last-child{position:relative}

/* ---- 15. Footer --------------------------------------------------------- */
.foot{background:var(--band-bg);color:var(--band-dim);padding-block:64px 40px}
.foot a{color:var(--band-fg);text-decoration:none;border-bottom:1px solid var(--band-line)}
.foot a:hover{color:var(--accent-bright);border-bottom-color:var(--accent-bright)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.foot h4{
  font-family:"Cutive Mono",monospace;font-variation-settings:normal;font-weight:400;
  font-size:var(--t-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--t-sm)}
.foot p{font-size:var(--t-sm);line-height:1.6}
.foot-logo img{width:250px;max-width:100%}
.colophon{
  margin-top:48px;padding-top:20px;border-top:1px solid var(--band-line);
  display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;
  font-family:"Cutive Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
}

/* ---- 16. Entrance ------------------------------------------------------- */
/* Everything is legible at rest; the only motion is one settle on load. */
@media (prefers-reduced-motion:no-preference){
  .hero-grid > *{animation:settle .8s cubic-bezier(.22,.61,.36,1) both}
  .hero-grid > *:nth-child(2){animation-delay:.12s}
}
@keyframes settle{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- 17. Responsive ----------------------------------------------------- */
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .plan-frame{padding:20px 18px 16px}
  .hero-photo{box-shadow:4px 4px 0 var(--brass-fixed)}
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{order:2;max-width:520px;margin-inline:auto;margin-top:0;align-self:auto}
  .consist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .consist::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig{border-right:none;border-bottom:1px solid var(--line-strong)}
  .fig:nth-child(odd){border-right:1px solid var(--line-strong)}
  .fig:nth-last-child(-n+2){border-bottom:none}
  .ticket{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr}
  .wordmark img{height:52px}
  .wordmark-txt{padding-left:14px}
}
@media (max-width:480px){
  /* The logo alone carries the brand here; the text lockup and the CTA
     together overrun the bar on a 390px screen. */
  .wordmark-txt{display:none}
  .wordmark img{height:44px}
  .nav{gap:10px}
  .nav .btn{padding:11px 13px;letter-spacing:.12em}
  .themeswap{width:32px;height:32px}
}
@media (max-width:560px){
  .grid-3{grid-template-columns:1fr;gap:28px}
  .consist{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr}
  .fig{border-right:none!important;border-bottom:1px solid var(--line-strong)}
  .fig:last-child{border-bottom:none}
  .wordmark-txt span{display:none}
}

/* ==========================================================================
   18. SURVEY — direction 1c
   ========================================================================== */
.survey-layout{
  display:grid;grid-template-columns:260px minmax(0,760px);
  gap:64px;justify-content:center;
  padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3.5rem,7vw,6rem);
}
.survey-aside{position:sticky;top:130px;align-self:start;display:flex;flex-direction:column;gap:28px}

.steplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.steplist li{
  display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;
  padding:12px 0;border-top:1px solid var(--line-soft);
  font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-fainter);line-height:1.35;
}
.steplist li:last-child{border-bottom:1px solid var(--line-soft)}
.steplist li::before{content:"◇";color:var(--brass);font-size:11px;line-height:1.35}
.steplist li[data-state="current"]{color:var(--fg)}
.steplist li[data-state="current"]::before{content:"◆";color:var(--accent)}
.steplist li[data-state="done"]{color:var(--fg-dim)}
.steplist li[data-state="done"]::before{content:"◆";color:var(--brass)}
.aside-note{font-size:13.5px;line-height:1.55;color:var(--fg-faint)}

.progressbar{display:flex;flex-direction:column;gap:10px}
.progress-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-faint);
}
.progress-meta b{color:var(--accent);font-weight:400}
.progress-track{height:8px;background:var(--bg-card);border:1px solid var(--line-strong);position:relative;overflow:hidden}
.progress-fill{
  position:absolute;inset:0 auto 0 0;width:0;
  background:repeating-linear-gradient(90deg,var(--accent) 0 9px,var(--accent-bright) 9px 12px);
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){.progress-fill{transition:none}}

.step{display:none;flex-direction:column;gap:40px}
.step.is-active{display:flex}
.step-head{display:flex;flex-direction:column;gap:12px}
.step-head h2{font-size:clamp(1.5rem,1.3rem + 1vw,2rem)}

.field{display:flex;flex-direction:column;gap:14px}
.flabel{display:flex;flex-direction:column;gap:6px}
.flabel b{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 18,"WONK" 0,"opsz" 40;
  font-size:var(--t-h4);font-weight:700;line-height:1.25;color:var(--fg);
}
.flabel .hint{font-size:var(--t-sm);color:var(--fg-faint);line-height:1.5}
.opt{
  font-family:"Cutive Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-ink);border:1px solid var(--line);padding:3px 7px;margin-left:10px;
  vertical-align:3px;white-space:nowrap;
}

.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choices.one-col{grid-template-columns:1fr}
.choice{
  position:relative;display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border:1px solid rgba(22,38,43,.3);background:var(--bg-card);
  cursor:pointer;font-size:var(--t-sm);line-height:1.45;color:var(--fg-dim);
  transition:border-color .14s ease,background .14s ease,color .14s ease;
}
:root[data-theme="dark"] .choice{border-color:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .choice{border-color:var(--line)}}
.choice:hover{border-color:var(--accent);color:var(--fg)}
.choice input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.choice .box{
  flex:none;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;transition:background .14s ease,border-color .14s ease;
}
.choice input[type="radio"] ~ .box{border-radius:50%}
.choice .box::after{
  content:"";width:7px;height:7px;background:var(--bg-card);
  transform:rotate(45deg) scale(0);transition:transform .16s cubic-bezier(.34,1.56,.64,1);
}
.choice input[type="radio"] ~ .box::after{border-radius:50%;transform:scale(0)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-wash);color:var(--fg);font-weight:500}
.choice:has(input:checked) .box{background:var(--accent);border-color:var(--accent)}
.choice:has(input:checked) .box::after{transform:rotate(45deg) scale(1)}
.choice:has(input[type="radio"]:checked) .box::after{transform:scale(1)}
.choice:has(input:focus-visible){outline:2.5px solid var(--accent-bright);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.choice,.choice .box,.choice .box::after{transition:none}}

/* Scoped free-text escape hatch under a closed question. */
.other-line{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.other-line > span{
  font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink);
}

.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale .choice{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 8px}
.scale .choice .box{display:none}
.scale .choice b{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 80;
  font-size:32px;font-weight:800;line-height:1;color:var(--fg-fainter);transition:color .14s ease;
}
.scale .choice:has(input:checked) b{color:var(--accent)}
.scale .choice span{font-size:var(--t-mono);line-height:1.3}

.input{
  width:100%;font-family:inherit;font-size:var(--t-base);color:var(--fg);
  background:var(--bg-card);border:1px solid rgba(22,38,43,.3);border-radius:0;
  padding:14px 16px;line-height:1.5;transition:border-color .14s ease;
}
:root[data-theme="dark"] .input{border-color:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .input{border-color:var(--line)}}
.input:hover{border-color:var(--accent)}
.input::placeholder{color:var(--fg-fainter)}
.input-zip{font-family:"Cutive Mono",monospace;font-size:18px;letter-spacing:.2em;max-width:220px}
textarea.input{resize:vertical;min-height:104px}

.formnav{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line-strong);padding-top:24px;
}
.formnav-l,.formnav-r{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.formnav-note{font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg-fainter)}

.err{font-family:"Cutive Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--rust);display:none}
.err.show{display:block}
.field.invalid .choice,.field.invalid .input{border-color:var(--rust)}

.privacy{
  border:1px solid var(--line);border-top:3px solid var(--brass);
  padding:20px 22px;display:flex;flex-direction:column;gap:10px;background:var(--bg-card);
}
.privacy p{font-size:var(--t-sm);color:var(--fg-dim);line-height:1.55}

.interstitial{
  border:1.5px solid var(--line-strong);background:var(--bg-card);
  padding:clamp(1.75rem,4vw,2.75rem);display:flex;flex-direction:column;gap:20px;
  box-shadow:0 14px 34px -22px rgba(22,38,43,.5);
}

@media (max-width:980px){
  .survey-layout{grid-template-columns:1fr;gap:36px;max-width:780px;margin-inline:auto}
  .survey-aside{position:static;flex-direction:row;align-items:center;gap:24px;flex-wrap:wrap}
    .steplist{flex-direction:row;flex-wrap:wrap;gap:0 22px;flex:1}
  .steplist li{border-top:none;padding:0;grid-template-columns:14px auto}
  .steplist li:last-child{border-bottom:none}
  .aside-note{display:none}
}
@media (max-width:560px){
  .choices{grid-template-columns:1fr}
  .scale{grid-template-columns:repeat(5,1fr);gap:4px}
  .scale .choice{padding:14px 2px}
  .scale .choice span{display:none}
  .scale .choice b{font-size:26px}
}

/* ==========================================================================
   19. DASHBOARD
   ========================================================================== */
.crm-shell{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter);padding-block:40px 80px}
.gate{max-width:430px;margin:clamp(2.5rem,9vh,6rem) auto;display:flex;flex-direction:column;gap:22px}
.gate-card{
  border:1.5px solid var(--line-strong);background:var(--bg-card);padding:34px 30px;
  display:flex;flex-direction:column;gap:18px;box-shadow:0 14px 34px -22px rgba(22,38,43,.5);
}
.crm-head{
  display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
  padding-bottom:20px;border-bottom:2px solid var(--line-strong);margin-bottom:32px;
}
.crm-actions{display:flex;gap:10px;flex-wrap:wrap}
.crm-actions .btn{padding:11px 16px;font-size:var(--t-mono-sm)}

.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line-strong);background:var(--bg-card);margin-bottom:32px}
.tile{padding:22px 20px;border-right:1px solid var(--line-strong);display:flex;flex-direction:column;gap:6px}
.tile:last-child{border-right:none}
.tile .k{font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.17em;text-transform:uppercase;color:var(--fg-faint);min-height:2.6em}
.tile .v{
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 26,"WONK" 1,"opsz" 90;
  font-size:36px;font-weight:800;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums;
}
.tile .v.accent{color:var(--accent)}
.tile .sub{font-size:13px;color:var(--fg-dim);line-height:1.4}
.goal{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.goal-track{height:6px;background:var(--line-soft);position:relative;overflow:hidden}
.goal-fill{position:absolute;inset:0 auto 0 0;background:var(--accent);width:0;transition:width .8s cubic-bezier(.22,.61,.36,1)}
.goal-fill.brass{background:var(--brass)}
@media (max-width:1080px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile{border-bottom:1px solid var(--line-strong)}.tile:nth-child(odd){border-right:1px solid var(--line-strong)}.tile:last-child{grid-column:1/-1;border-right:none;border-bottom:none}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}.tile{border-right:none!important}}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:20px;margin-bottom:20px}
.panel{border:1px solid var(--line-strong);background:var(--bg-card);padding:22px;display:flex;flex-direction:column;gap:18px}
.panel > header{display:flex;flex-direction:column;gap:4px}
.panel h2{font-size:var(--t-h4);line-height:1.25;letter-spacing:-.005em}
.panel .sub{font-family:"Cutive Mono",monospace;font-size:var(--t-mono-sm);letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint)}

.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:baseline}
.bar .bl{font-size:var(--t-sm);color:var(--fg-dim);min-width:0;overflow-wrap:anywhere}
.bar .bn{font-family:"Cutive Mono",monospace;font-size:var(--t-mono);color:var(--fg);font-variant-numeric:tabular-nums}
.bar .bt{grid-column:1/-1;height:9px;background:var(--line-soft);position:relative;overflow:hidden}
.bar .bf{position:absolute;inset:0 auto 0 0;background:var(--accent);width:0;transition:width .7s cubic-bezier(.22,.61,.36,1)}
.bar:nth-child(even) .bf{background:var(--brass)}
@media (prefers-reduced-motion:reduce){.goal-fill,.bar .bf{transition:none}}

.dtable-wrap{border:1px solid var(--line-strong);overflow:auto;max-height:min(70vh,620px);background:var(--bg-card)}
.dtable{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:820px}
.dtable th{
  position:sticky;top:0;text-align:left;padding:12px 14px;background:var(--band-bg);color:var(--brass);
  font-family:"Cutive Mono",monospace;font-size:var(--t-mono);font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;border-bottom:2px solid var(--brass);white-space:nowrap;
}
.dtable td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--fg-dim);vertical-align:top}
.dtable tr:hover td{background:var(--accent-wash)}
.dtable .mono{font-family:"Cutive Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}

.chip{
  display:inline-block;font-family:"Cutive Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);color:var(--fg-dim);
  white-space:nowrap;margin:2px 3px 2px 0;
}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.chip.warm{border-color:var(--brass);color:var(--brass-ink)}
.banner{
  border:1px solid var(--brass);border-left:4px solid var(--brass);background:var(--accent-wash);
  padding:14px 18px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  font-size:var(--t-sm);color:var(--fg-dim);margin-bottom:26px;
}
.banner b{font-family:"Cutive Mono",monospace;font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);font-weight:400}