@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-400.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-700.ttf") format("truetype"); }
/* Cut down by scripts/subset_font.py: weights 700-800, Latin characters only. */
@font-face { font-family: "Big Shoulders"; font-weight: 700 800; font-display: swap;
  src: url("fonts/big-shoulders.woff2") format("woff2"); }

/* Registered so the sky, wall and windows can fade from dusk to night between steps.
   Initial values are step 1 (dusk); keep them equal to the --dusk-* tokens below. */
@property --sky-0 { syntax: "<color>"; inherits: true; initial-value: #143a5a; }
@property --sky-1 { syntax: "<color>"; inherits: true; initial-value: #3c6c86; }
@property --sky-2 { syntax: "<color>"; inherits: true; initial-value: #f5bb66; }
@property --sky-3 { syntax: "<color>"; inherits: true; initial-value: #f09a5e; }
@property --star { syntax: "<color>"; inherits: true; initial-value: #f7ebd700; }
@property --wall { syntax: "<color>"; inherits: true; initial-value: #f7ebd7; }
@property --win { syntax: "<color>"; inherits: true; initial-value: #143a5a; }

:root {
  /* Palette: one navy family, one cream, one light (gold), one warm accent (apricot), teal doors, red paint. */
  --navy-950: #0b2034;   /* footer, door frames */
  --navy-900: #102b45;   /* the ground: page background */
  --navy-850: #15344f;   /* raised panels on the ground */
  --navy-700: #143a5a;   /* number plate, unlit panes, dusk sky top */
  --cream: #f7ebd7;      /* text on navy; the dusk wall; the thank-you note */
  --cream-soft: #c9d2d4; /* secondary text */
  --gold: #ffd36b;       /* light: lit windows, chosen states, the one main action, focus */
  --gold-hot: #fff4d2;   /* the chosen window, main-action hover */
  --gold-night: #bf9c55; /* lit windows dimmed at night */
  --apricot: #f4a55e;    /* warm labels: site name, section labels, the IPC badge */
  --teal: #1f6b5d; --teal-deep: #185a4e;
  --red: #d6453d;        /* the paint band; never text */
  --error: #ffb4a8;
  --line: #f7ebd738;     /* 1px rules */
  --line-strong: #f7ebd78c; /* outlines of secondary controls (4.7:1 on the ground) */
  --glow: #f4a55e14;     /* warm light on the ground near the sky */
  --deck-hi: #f6dc93; --deck-lo: #c99448; --spill: #ffd36b73; --shadow: #0006;

  /* Roles */
  --ground: var(--navy-900); --ink: var(--cream); --ink-soft: var(--cream-soft); --rule: var(--line);
  --navy: var(--navy-700); --lit: var(--gold); --hot: var(--gold-hot); --lit-rest: var(--gold);
  --door: var(--teal); --door-hover: var(--teal-deep); --door-edge: var(--navy-950); --wall-ink: var(--navy-700);
  --display: "Big Shoulders", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --left: min(34vw, 30rem);
  font: 400 1.0625rem/1.55 Atkinson Hyperlegible Next, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink); background: var(--ground);
  accent-color: var(--lit); color-scheme: dark;
  scrollbar-color: var(--apricot) var(--ground);
}
* { box-sizing: border-box; }

/* The sky: dusk on step 1, night by step 4. */
body { margin: 0; background: radial-gradient(90% 55% at 100% 0, var(--glow), #0000 70%) no-repeat, var(--ground);
  --sky: linear-gradient(var(--sky-0) 0, var(--sky-0) 7rem, var(--sky-1) 46%, var(--sky-2) 80%, var(--sky-3) 100%);
  transition: --sky-0 1.2s, --sky-1 1.2s, --sky-2 1.2s, --sky-3 1.2s, --star 1.2s, --wall 1.2s, --win 1.2s; }
body[data-step="2"] { --sky-0: #112f4c; --sky-1: #33577b; --sky-2: #d99d68; --sky-3: #dd7d57; --wall: #e3d6c1; --win: #11304d; }
body[data-step="3"] { --sky-0: #0e2741; --sky-1: #24456b; --sky-2: #66707f; --sky-3: #b8704f; --wall: #c4b8a5; --win: #0e2741; --star: #f7ebd799; }
body[data-step="4"] { --sky-0: #0a1c31; --sky-1: #12294a; --sky-2: #1c3655; --sky-3: #6b4a34; --wall: #3e4e63; --win: #0a1a2e;
  --star: var(--cream); --wall-ink: var(--cream); --lit-rest: var(--gold-night); }

::selection { background: var(--lit); color: var(--ground); }
:focus-visible { outline: 3px solid var(--lit); outline-offset: 3px; border-radius: 4px; }
h1 { font: 800 clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem)/1 var(--display); letter-spacing: .005em;
  margin: 0 0 .6rem; text-wrap: balance; }
h1:focus { outline: none; }
h2 { font: 800 1.7rem/1.1 var(--display); letter-spacing: .01em; margin: 0 0 .4rem; }
p { margin: 0 0 .75rem; }
a { color: var(--ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--lit); text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---- Site name ---- */
.top { display: flex; align-items: baseline; column-gap: .7rem; background: var(--sky-0); padding: .35rem 1rem 0; }
.top a { flex: none; }
.top .tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; color: var(--ink-soft); white-space: nowrap; }
.top a { display: inline-flex; align-items: center; min-height: 44px; font: 800 1.3rem/1 var(--display);
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: var(--apricot); }
.top a:hover { color: var(--lit); }

/* ---- Sky, heading and the block ---- */
.sky { background: var(--sky); }
#head { padding: .35rem 1rem .8rem; }
#head .sub { color: var(--ink-soft); max-width: 34rem; margin: 0; }
.load { padding: 2rem 1rem; }

#block { --gap: .19rem; --wh: .32rem; margin: 0 1.25rem; }
.tank { width: 3rem; height: .8rem; margin: 0 16% 0 auto; background: var(--wall); border-radius: 2px 2px 0 0; }
.wall { padding: .6rem .7rem .75rem 1.55rem; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--red) 0 .85rem, var(--wall) .85rem); }
.sign { display: flex; align-items: center; gap: .65rem; min-height: 2.4rem; margin-bottom: .55rem; }
.plate { flex: none; margin: 0; padding: .2rem .5rem .15rem; border-radius: 3px; background: var(--navy); color: var(--ink);
  font: 700 1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.plate b { font-weight: 800; font-size: 1.55rem; letter-spacing: .02em; }
.cap { margin: 0; color: var(--wall-ink); font-weight: 700; font-size: .9rem; line-height: 1.2; text-wrap: balance;
  transition: color 1.2s; }
.wins { display: grid; grid-template-columns: repeat(20, 1fr); gap: var(--gap); }
.legend { margin: .55rem 0 0; color: var(--wall-ink); font-size: .8rem; line-height: 1.3; transition: color 1.2s; }
.w { height: var(--wh); border-radius: 1px; background: var(--win);
  transition: background-color .7s var(--ease-out) var(--d, 0ms), height .6s var(--ease-out); }
.w.on { background: var(--lit-rest); border: clamp(.5px, calc(var(--wh) * .12), 1.5px) solid var(--win); }
.w.peek { outline: 2px solid var(--wall-ink); outline-offset: 1px; background: var(--hot); }
.w.me { background: var(--hot); position: relative; z-index: 1;
  min-height: .6rem; margin-block: calc((var(--wh) - max(var(--wh), .6rem)) / 2);
  outline: 2px solid var(--lit); outline-offset: 2px; animation: mine 2.2s ease-in-out infinite alternate; }
/* The chosen window spills light onto the wall at night. */
.w.me::after { content: ""; position: absolute; inset: -1.1rem -1.4rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--spill), #0000); }
@keyframes mine { from { transform: scale(1.15); } to { transform: scale(1.5); outline-offset: 3px; } }

/* Void deck: lit, with pillars; the community cat is the animals group. */
.deck { position: relative; height: 1.6rem;
  background: linear-gradient(90deg, var(--wall) .6rem, #0000 .6rem) 0 0 / 2.7rem 100%, linear-gradient(var(--deck-hi), var(--deck-lo)); }
.cat { position: absolute; right: 1.15rem; bottom: 0; width: 1.5rem; height: 1.5rem; fill: var(--ground); overflow: visible; }
.cat .tail { fill: none; stroke: var(--ground); stroke-width: 1.8; stroke-linecap: round; transform-origin: 17.6px 21px; }
.cat .eye { fill: none; }
.cat.on .eye { fill: var(--lit); }
.cat.on .tail { animation: tail 1.6s ease-in-out infinite alternate; }
@keyframes tail { to { transform: rotate(-16deg); } }

/* ---- Ground: choices, lists, the reminder ---- */
#body { max-width: 42rem; margin: 0 auto; padding: .75rem 1rem 1.25rem; }

/* Step 1: nine doors, one choice */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.door { position: relative; min-height: 4.1rem; padding: .45rem 1.3rem .45rem .5rem; border: 2px solid var(--door-edge); border-bottom-width: 0;
  border-radius: 5px 5px 0 0; background: var(--door); color: var(--ink); font-weight: 700; font-size: .82rem; line-height: 1.15;
  text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; box-shadow: inset 0 1px 0 #f7ebd759;
  transition: background .35s var(--ease-out), color .35s var(--ease-out); }
/* Phones: a small corner picture clears two-line labels; under 384px labels wrap to three lines,
   so the picture moves into the flow below the label instead. */
.icon { position: absolute; right: .35rem; bottom: .3rem; width: 1.4rem; height: 1.4rem; fill: currentColor; opacity: .92; }
@media (max-width: 24rem) { .icon { position: static; flex: none; align-self: flex-end; margin: auto -.95rem -.15rem 0; } }
.icon .line { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.door:hover { background: var(--door-hover); }
.door[aria-pressed="true"] { background: var(--lit); color: var(--ground); border-color: var(--ink); }
.blurb { display: none; font-weight: 400; }
.tick { display: none; position: absolute; right: .3rem; top: .3rem; width: 1rem; height: 1rem; fill: none;
  stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.door[aria-pressed="true"] .tick { display: block; }
.hint { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.doors + .primary { margin-top: .75rem; }

/* ---- Actions ---- */
.primary { display: block; width: 100%; min-height: 3.25rem; margin: 1rem 0 .5rem; padding: .85rem 1rem;
  border: 0; border-radius: 5px; background: var(--lit); color: var(--ground); font-weight: 700;
  text-align: center; text-decoration: none; box-shadow: 0 3px 10px var(--shadow);
  transition: background .2s var(--ease-out), transform .2s var(--ease-out); }
.primary:hover { background: var(--hot); }
.primary:active { transform: translateY(1px); }
.primary:disabled { background: none; color: var(--ink-soft); border: 1.5px dashed var(--line-strong); box-shadow: none; cursor: default; transform: none; }
.link { display: inline-block; min-height: 44px; padding: .55rem 0; border: 0; background: none;
  color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.link:hover { color: var(--lit); }
.error { margin: .75rem 0 0; font-weight: 700; color: var(--error); }

/* Step 2: each chip is a window you can switch off */
.chips { border: 0; padding: 0; margin: 0 0 .5rem; min-width: 0; }
.chips legend { font: 800 1.7rem/1.1 var(--display); margin-bottom: .7rem; padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem .8rem; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: none; color: var(--ink); text-align: left; line-height: 1.3;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out); }
.chip::before { content: ""; flex: none; width: 1rem; height: .7rem; border-radius: 1px; border: 1.5px solid currentColor; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--lit); color: var(--ground); border-color: var(--lit); font-weight: 700; }
.chip[aria-pressed="true"]::before { background: var(--ground); }

/* Step 3 list: rows with rules */
.change { font-weight: 700; }
.order-note { color: var(--ink-soft); font-size: .9rem; margin-bottom: 0; }
.dest { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.lucky { margin-bottom: .5rem; }
.card .also { font-size: .9rem; }
.cards { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--rule); }
.card { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--rule); }
.card h2 { font: 700 1.12rem/1.3 "Atkinson Hyperlegible Next", system-ui, sans-serif; letter-spacing: 0; margin-bottom: .3rem; }
.card p { color: var(--ink-soft); margin-bottom: .6rem; max-width: 62ch; }
.row-end { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card .badge { margin: 0; font-size: .88rem; font-weight: 700; color: var(--apricot); }
.choose { min-height: 44px; min-width: 6rem; padding: .5rem 1.1rem; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: none; color: var(--ink); font-weight: 700;
  transition: background .2s var(--ease-out), color .2s var(--ease-out); }
.choose:hover { background: var(--lit); border-color: var(--lit); color: var(--ground); }

/* Step 4: who, why, the link out, then tax tips and sharing */
.kicker { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.verified { display: flex; align-items: flex-start; gap: .45rem; margin: 0; color: var(--ink-soft); font-size: .9rem; }
.glyph { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verified .glyph { color: var(--apricot); margin-top: .15em; }
.year { font: 700 1.9rem/1.12 var(--display); letter-spacing: .01em; max-width: 34rem; text-wrap: balance; margin-bottom: 1rem; }
.facts { margin: 0; max-width: 62ch; padding: 1rem 1.1rem .1rem; border-radius: 5px; background: var(--navy-850); }
.facts dt { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apricot); }
.facts dd { margin: .15rem 0 .9rem; }
.give { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.give .glyph { width: 1.2rem; height: 1.2rem; }
.dest { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.thanks { margin: 1rem 0 0; padding: .8rem 1rem .4rem; border-left: 4px solid var(--apricot); background: var(--cream); color: var(--navy-900);
  border-radius: 0 5px 5px 0; --ink: var(--navy-900); --line-strong: #102b45a8; --lit: var(--navy-900);
  animation: rise .6s var(--ease-out); }
.thanks p { margin: 0; }
.thanks :focus-visible { outline-color: var(--navy-900); }
.thanks .share-list a:hover, .thanks .share-list button:hover { background: var(--navy-900); color: var(--cream); }
.thanks-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.5rem; }
@keyframes rise { from { opacity: 0; transform: translateY(.4rem); } }
.tax { margin-top: 1.25rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tax summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.tax ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ink-soft); }
.tax li + li { margin-top: .35rem; }
.after { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.5rem; margin-top: .5rem; }
.share summary { list-style: none; cursor: pointer; }
.share summary::-webkit-details-marker { display: none; }
.share[open] summary { font-weight: 700; }
.share-list { display: flex; flex-wrap: wrap; gap: .4rem; padding: .25rem 0 .5rem; }
.share-list a, .share-list button { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .8rem; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: none; color: var(--ink); font-size: .92rem; text-decoration: none; }
.share-list a:hover, .share-list button:hover { border-color: var(--lit); color: var(--lit); }
.share-status { margin: 0; font-size: .9rem; font-weight: 700; }
.share-status:empty { display: none; }

/* Footer: two short notes across the whole width */
footer { position: relative; z-index: 2; display: grid; gap: 1.25rem; padding: 1.5rem 1rem 2rem; margin-top: 1.5rem;
  background: var(--navy-950); border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
footer h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem; color: var(--apricot);
  font: 800 1.05rem/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; }
footer p { margin: 0; max-width: 52ch; }
footer .credits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding-top: 1rem; border-top: 1px solid var(--rule); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Wide screens: the block stands on the left for the whole journey ---- */
@media (min-width: 60rem) {
  body::before { content: ""; position: fixed; inset: 0 auto 0 0; width: var(--left);
    background: radial-gradient(1.5px 1.5px at 12% 11%, var(--star) 99%, #0000), radial-gradient(1px 1px at 33% 14%, var(--star) 99%, #0000),
      radial-gradient(1.5px 1.5px at 58% 9%, var(--star) 99%, #0000), radial-gradient(1px 1px at 76% 13%, var(--star) 99%, #0000),
      radial-gradient(1.5px 1.5px at 91% 7%, var(--star) 99%, #0000), var(--sky); }
  .top { position: fixed; z-index: 2; left: 0; top: 0; width: var(--left); padding: 1.25rem 2rem 0; background: none; }
  .top a { font-size: 1.6rem; }
  .top { column-gap: .55rem; } .top .tag { font-size: .85rem; }   /* both fit on one line in a 960 px window */
  #app { display: grid; grid-template-columns: var(--left) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
  .sky { display: contents; }
  #block, body[data-step] #block { --gap: .4rem; --wh: clamp(.4rem, (100vh - 13.8rem) / 24 - var(--gap), 2rem);   /* fills the pane under the site name; 24 rows of 13 */
    grid-column: 1; grid-row: 1 / 3; position: sticky; top: 0; align-self: start; height: 100vh; margin: 0;
    padding: 5rem 2rem 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .tank { flex: none; }
  .cap { font-size: 1rem; }
  #head { grid-column: 2; padding: 3.75rem 3.5rem 1.5rem; max-width: 52rem; }
  #body { grid-column: 2; margin: 0; padding: 0 3.5rem 2rem; max-width: 52rem; width: 100%; }
  .wins { grid-template-columns: repeat(13, 1fr); }
  .door { font-size: 1.05rem; min-height: 6.1rem; padding: .65rem 1.9rem .65rem .75rem; }
  .blurb { display: block; font-size: .88rem; line-height: 1.3; max-width: 11rem; }
  .tick { width: 1.3rem; height: 1.3rem; right: .5rem; top: .5rem; }
  .legend { font-size: .9rem; }
  .icon { position: absolute; margin: 0; width: 2.6rem; height: 2.6rem; right: .6rem; bottom: .5rem; }
  .primary { width: auto; min-width: 16rem; display: inline-block; }
  .primary + .link { margin-left: 1.5rem; }
  footer { grid-template-columns: 1fr 1fr; gap: 2.5rem; margin: 0; padding: 1.75rem 2rem; }
  .give { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  body, .w, .cap, .door, .chip, .primary, .choose { transition: none; }
  .thanks { animation: none; }
  .w.me, .cat.on .tail { animation: none; }
  .w.me { transform: scale(1.4); }
}