/* Sleighport: the holiday front door of the HULL/20 Spaceport. Held to ../STYLE.md.
   Static, self-hosted fonts, no inline styles (the CSP forbids them). */
@font-face { font-family: "Michroma"; src: url(fonts/Michroma-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(fonts/SpaceMono-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(fonts/SpaceMono-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --navy: #14243A; --cream: #F3E9D2; --mustard: #F0A832; --orange: #E4572E; --rust: #A63A24; --teal: #1F7A78; --mint: #CFE0D6;
  --night: #0F1C2E; --board: #0A1320; --paper2: #E8D9B8; --ink2: #3B4A5E; --faint: #6B634F; --mute: #C9C2AE;
  --hair-d: rgba(243, 233, 210, .14);
  --gut: 20px; --max: 1240px;
  --display: "Michroma", "Avenir Next", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
}
@media (min-width: 980px) { :root { --gut: 40px; } }
* { box-sizing: border-box; }
html { background: var(--navy); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--navy); background: var(--cream); font: 400 15px/1.7 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--cream); color: var(--navy); padding: 8px 12px; font-weight: 700; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
section { scroll-margin-top: 64px; }

/* paper with a little tooth (the spaceport's own noise, 7%) */
.paper { background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.navy { background: var(--navy); color: var(--cream); }
.night { background: var(--night); color: var(--cream); }

/* ---------- livery and air mail ---------- */
.livery { height: 24px; background: linear-gradient(var(--mustard) 0 25%, var(--orange) 25% 50%, var(--rust) 50% 75%, var(--teal) 75%); }
.livery.thin { height: 12px; }
.airmail { height: 14px; background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, var(--cream) 14px 21px, var(--navy) 21px 35px, var(--cream) 35px 42px); }

/* ---------- small type ---------- */
.kicker { display: flex; align-items: center; gap: 12px; font: 700 11px/1.2 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--rust); margin: 0 0 16px; }
.kicker::before { content: ""; width: 34px; height: 8px; flex: none; background: linear-gradient(var(--mustard) 0 25%, var(--orange) 25% 50%, var(--rust) 50% 75%, var(--teal) 75%); }
.navy .kicker, .night .kicker { color: var(--mustard); }
.h2 { font-size: clamp(28px, 5.4vw, 56px); line-height: 1.04; letter-spacing: .01em; overflow-wrap: break-word; }
.h2 span { display: block; color: var(--orange); }
.h2.half { font-size: clamp(28px, 3.5vw, 46px); }
.h3 { font-size: 19px; line-height: 1.2; letter-spacing: .02em; }
@media (max-width: 599px) { .h3 { font-size: 17px; } }
.lede { font-size: 15.5px; max-width: 60ch; color: var(--ink2); }
.navy .lede, .night .lede { color: var(--mute); }
.fine { font-size: 11.5px; line-height: 1.6; letter-spacing: .04em; color: var(--faint); }
.navy .fine, .night .fine { color: var(--mute); }
.body { max-width: 62ch; }
.body b { font-weight: 700; }

/* ---------- buttons (navy on mustard; orange is only the offset) ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 0; }
.btn { display: inline-flex; align-items: center; height: 50px; padding: 0 20px; text-decoration: none; border: 2px solid currentColor;
       font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; transition: transform .12s ease, box-shadow .12s ease; }
.btn.go { background: var(--mustard); color: var(--navy); border-color: var(--mustard); box-shadow: 4px 4px 0 var(--orange); }
.btn.go:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--orange); }
.btn.line { color: inherit; }
.btn.line:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.paper .btn.line:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn.go:hover { transform: none; } }

/* ---------- masthead ---------- */
.mast { position: sticky; top: 0; z-index: 20; background: var(--navy); color: var(--cream); border-bottom: 1px solid var(--hair-d); }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand span { display: flex; flex-direction: column; gap: 5px; }
.brand small { font: 700 9px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.brand b { font: 400 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.nav { display: none; gap: 26px; white-space: nowrap; font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.nav a { text-decoration: none; color: var(--mute); padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--orange); }
.mast .cta { font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--navy);
             background: var(--mustard); padding: 11px 12px; box-shadow: 3px 3px 0 var(--orange); white-space: nowrap; }
@media (min-width: 900px) { .nav { display: flex; } }
@media (max-width: 420px) { .brand small { display: none; } .mast .cta { padding: 10px 9px; letter-spacing: .12em; } }

/* ---------- hero: the ad, built as layers like the spaceport's (tools/hero-layers.py) ----------
   a painted plate whose sky is the page's navy (.scene), then the sleigh, its four-band exhaust ribbon,
   the saucer, its beam and the Gate 20 mailbox drawn live in one SVG (.fly, 800 x 1000 user units).
   The ribbon's straight run carries on past the box's left edge to the page edge: ribbon and cheatline
   are one shape. Stars, two moons and snow sit on the page itself, over both columns. */
.hero { position: relative; overflow: hidden; color: var(--cream); }
.hero .copy { padding: 34px var(--gut) 8px; position: relative; z-index: 4; }
.eyebrow span { white-space: nowrap; }
.eyebrow { font: 700 10.5px/1.5 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--mustard); margin: 0 0 20px; }
.hero h1 { font-size: clamp(36px, 10vw, 100px); line-height: .98; letter-spacing: -.005em; margin: 0 0 24px; }
.hero h1 span { display: block; }
.hero h1 .o { color: var(--orange); }
.hero .body { color: var(--mute); max-width: 46ch; }
.hero .body b { color: var(--cream); }
.hero .note { margin: 18px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.hero .art { position: relative; margin-top: 10px; aspect-ratio: 4 / 5; }
.hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 74% 50%; }
.hero .stage { position: absolute; inset: 0; z-index: 2; }
.hero .fly { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.fly .b1 { fill: var(--mustard); } .fly .b2 { fill: var(--orange); } .fly .b3 { fill: var(--rust); } .fly .b4 { fill: var(--teal); }
.fly .shimmer { stroke: var(--cream); stroke-width: 3; stroke-opacity: 0; stroke-linecap: round; stroke-dasharray: 22 200; }
.fly .env rect { fill: var(--cream); stroke: var(--navy); stroke-width: 1.2; }
.fly .env path { fill: none; stroke: var(--navy); stroke-width: 1.2; }
.fly .env { opacity: 0; }
.fly .beam { opacity: .55; }
.hero .tag { position: absolute; z-index: 3; right: var(--gut); top: 2%; background: var(--cream); color: var(--navy); border: 2px solid var(--navy);
             box-shadow: 4px 4px 0 var(--orange); padding: 10px 12px 9px; font: 700 10px/1.45 var(--mono); letter-spacing: .14em;
             text-transform: uppercase; transform: rotate(2.5deg); }
.hero .tag b { display: block; font: 400 17px/1.15 var(--display); letter-spacing: .03em; margin: 3px 0 2px; }
.hero .tag .n { color: var(--rust); }
.hero .sky { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; fill: var(--cream); z-index: 1; pointer-events: none; }
.hero .moon { position: absolute; z-index: 1; left: 40%; top: 7%; width: 26px; height: 26px; border-radius: 50%; box-shadow: 7px -3px 0 0 var(--mint); transform: rotate(-20deg); }
.hero .moon.m2 { left: 93%; top: 34%; width: 14px; height: 14px; box-shadow: 4px -2px 0 0 var(--mute); opacity: .7; }
.hero .snow { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero .snow i { position: absolute; top: -12px; width: 5px; height: 5px; border-radius: 50%; background: var(--cream); opacity: .75; }
.hero .snow i.s, .hero .snow i:nth-child(n+17) { width: 3px; height: 3px; opacity: .5; }
.snow i:nth-child(1) { left: 3%; --d: 17s; --x: 12px; animation-delay: -2s; }
.snow i:nth-child(2) { left: 9%; --d: 22s; --x: -8px; animation-delay: -11s; }
.snow i:nth-child(3) { left: 14%; --d: 19s; --x: 10px; animation-delay: -6s; }
.snow i:nth-child(4) { left: 21%; --d: 24s; --x: -14px; animation-delay: -15s; }
.snow i:nth-child(5) { left: 27%; --d: 18s; --x: 9px; animation-delay: -3s; }
.snow i:nth-child(6) { left: 33%; --d: 21s; --x: -10px; animation-delay: -9s; }
.snow i:nth-child(7) { left: 39%; --d: 26s; --x: 12px; animation-delay: -19s; }
.snow i:nth-child(8) { left: 46%; --d: 20s; --x: -9px; animation-delay: -5s; }
.snow i:nth-child(9) { left: 52%; --d: 23s; --x: 11px; animation-delay: -13s; }
.snow i:nth-child(10) { left: 58%; --d: 18s; --x: -12px; animation-delay: -8s; }
.snow i:nth-child(11) { left: 64%; --d: 25s; --x: 8px; animation-delay: -17s; }
.snow i:nth-child(12) { left: 70%; --d: 19s; --x: -11px; animation-delay: -1s; }
.snow i:nth-child(13) { left: 77%; --d: 22s; --x: 13px; animation-delay: -12s; }
.snow i:nth-child(14) { left: 83%; --d: 20s; --x: -8px; animation-delay: -4s; }
.snow i:nth-child(15) { left: 89%; --d: 24s; --x: 10px; animation-delay: -16s; }
.snow i:nth-child(16) { left: 95%; --d: 21s; --x: -13px; animation-delay: -7s; }
.snow i:nth-child(17) { left: 6%; --d: 28s; --x: 6px; animation-delay: -20s; }
.snow i:nth-child(18) { left: 36%; --d: 30s; --x: -6px; animation-delay: -23s; }
.snow i:nth-child(19) { left: 61%; --d: 27s; --x: 7px; animation-delay: -14s; }
.snow i:nth-child(20) { left: 91%; --d: 29s; --x: -7px; animation-delay: -25s; }
.hero .snow { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero .snow { display: block; }
  .hero .snow i { animation: fall var(--d) linear infinite; }
  @keyframes fall { from { transform: translate(0, 0); } 50% { transform: translate(var(--x), 50vh); } to { transform: translate(0, min(100vh, 980px)); } }
  .sleigh { animation: climb 3.6s ease-in-out infinite; }
  @keyframes climb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3.5px); } }
  .fly .shimmer { stroke-opacity: .32; animation: flow 2.6s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -222; } }
  .fly .saucer { animation: hover 6s ease-in-out infinite; }
  @keyframes hover { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -6px); } }
  .fly .beam { animation: beam 5s ease-in-out infinite; }
  @keyframes beam { 0%, 100% { opacity: .42; } 50% { opacity: .62; } }
  .fly .env { animation: rise 6s ease-in infinite; }
  .fly .e1 { animation-delay: -2s; } .fly .e2 { animation-delay: -4s; }
  @keyframes rise { 0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); } 15% { opacity: 1; } 80% { opacity: 1; }
                    100% { opacity: 0; transform: translate(4px, -150px) rotate(10deg); } }
  .tw { animation: tw 4.5s ease-in-out infinite; }
  .tw.b { animation-delay: -1.6s; } .tw.c { animation-delay: -3s; }
  @keyframes tw { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
}
@media (prefers-reduced-motion: reduce) { .fly .env.e0 { opacity: 1; } }
@media (max-width: 979px) {
  .hero .inner { display: flex; flex-direction: column; }
  .hero .copy { display: contents; }
  .hero .copy > * { padding-left: var(--gut); padding-right: var(--gut); }
  .hero .eyebrow { order: 1; margin-top: 30px; }
  .hero h1 { order: 2; margin-bottom: 0; }
  .hero .art { order: 3; }
  .hero .body { order: 4; max-width: none; margin-top: 4px; }
  .hero .btns { order: 5; }
  .hero .note { order: 6; margin: 14px 0 30px; }
  .hero .tag { top: 0; }
  .hero .sky, .hero .moon { display: none; }
  .fly .ufx, .fly .mailbox { transform: translate(64px, 0); }
}
@media (min-width: 980px) {
  .hero { --artw: min(54vw, 680px); }
  .hero .inner { display: grid; grid-template-columns: minmax(0, 1fr) var(--artw); align-items: end; min-height: min(calc(100vh - 60px), 860px); }
  .hero .copy { padding: 60px 24px calc(var(--artw) * .1375 + 40px) max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); align-self: center; }
  .hero h1 { font-size: clamp(50px, 5.2vw, 84px); }
  .hero .art { position: static; width: var(--artw); justify-self: end; margin: 0; aspect-ratio: auto; }
  /* the plate keeps its scale to the art box, held bottom-right; its left and top edges dissolve into the page */
  .hero .scene { inset: auto 0 0 auto; width: max(100%, calc(var(--artw) * 1.9)); height: auto; aspect-ratio: 3168 / 1344; object-fit: fill;
                 -webkit-mask: linear-gradient(90deg, transparent 30%, #000 46%), linear-gradient(transparent, #000 12%); -webkit-mask-composite: source-in;
                 mask: linear-gradient(90deg, transparent 30%, #000 46%), linear-gradient(transparent, #000 12%); mask-composite: intersect; }
  .hero .stage { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .hero .tag { top: 7%; right: 6%; }
}

/* ---------- art slots (preview only: deploy.sh refuses while one is on the page) ---------- */
.slot { position: relative; margin: 0; border: 2px solid var(--mustard); background: var(--board); }
.slot img { width: 100%; height: auto; opacity: .9; }
.slot .tag { position: absolute; left: -2px; top: -2px; background: var(--mustard); color: var(--navy); padding: 7px 10px 6px;
             font: 700 10px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.slot figcaption { padding: 10px 12px 11px; font-size: 11.5px; line-height: 1.55; letter-spacing: .03em; color: var(--mute); border-top: 2px solid var(--mustard); }
.slot figcaption b { color: var(--mustard); }
.paper .slot { border-color: var(--navy); }
.paper .slot .tag { background: var(--navy); color: var(--cream); }
.paper .slot figcaption { color: var(--mute); border-top-color: var(--navy); }

/* ---------- the door ---------- */
.depot { padding: 56px 0 0; }
.depot .head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: 22px; }
.depot .head > div { flex: 1 1 100%; }
.depot .head .scenes { margin-left: auto; flex: 0 0 auto; max-width: 100%; }
.depot .lede { margin: 14px 0 0; }
.scenes { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--hair-d); }
.scenes button { appearance: none; background: none; border: 0; border-right: 1.5px solid var(--hair-d); color: var(--mute); cursor: pointer;
                 font: 700 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 13px 14px 12px; min-height: 44px; }
.scenes button:last-child { border-right: 0; }
.scenes button:hover { color: var(--cream); }
.scenes button[aria-pressed="true"] { background: var(--mustard); color: var(--navy); }
.scenes .pause { color: var(--cream); }
.scenes .pause[aria-pressed="true"] { background: var(--cream); color: var(--navy); }
.door { position: relative; margin: 30px 0 0; background: var(--board); padding: clamp(8px, 1.4vw, 16px);
        background: linear-gradient(180deg, #F8EFD9 0%, #E6D7B6 55%, #C4AF85 100%);
        box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(90,70,40,.35), 0 0 0 6px var(--night), 0 30px 60px -20px rgba(240,168,50,.28), 0 24px 40px -18px rgba(0,0,0,.6); }
.door::before { content: ""; position: absolute; left: -6px; right: -6px; top: -26px; height: 20px; background: linear-gradient(180deg, #2A3B55, #1B2A40); border-bottom: 3px solid var(--mustard); }
.door canvas { display: block; box-shadow: 0 0 0 2px rgba(10,19,32,.9), inset 0 0 30px rgba(0,0,0,.5); }
.door canvas { width: 100%; height: auto; }
.door .still { width: 100%; height: auto; }
.door figcaption { position: absolute; right: 10px; bottom: 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
                   background: rgba(10, 19, 32, .82); padding: 4px 8px 3px; }

/* the status strip under the door: ruled like the spaceport's fact bar */
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--hair-d); }
.strip li { padding: 18px 14px 18px; border-right: 1px solid var(--hair-d); border-bottom: 1px solid var(--hair-d); min-width: 0; }
.strip .lbl { display: block; font: 700 10px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.strip .num { display: block; font: 400 clamp(22px, 4.4vw, 52px)/1 var(--display); letter-spacing: .02em; color: var(--mustard); white-space: nowrap; }
.strip .num small { font-size: .42em; letter-spacing: .06em; color: var(--cream); margin-left: .6em; }
.strip .note { display: block; margin-top: 10px; font-size: 11px; line-height: 1.5; letter-spacing: .03em; color: var(--mute); }
.dg { display: inline-block; width: .86em; text-align: center; }
.dg.sep { width: .4em; }
@media (min-width: 980px) { .strip { grid-template-columns: 1.25fr 1fr 1fr .85fr; } .strip li { padding: 22px 22px 22px; } }
.depot .foot { padding: 16px 0 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 30px; }

/* ---------- UFO Express teaser ---------- */
.express { padding: 72px 0 76px; }
.express .grid { display: grid; gap: 40px; align-items: start; margin-top: 26px; }
.express .grid > *, .office .grid > *, .hero .grid > *, .ways .grid > *, .after .grid > * { min-width: 0; }
.express .lede { margin-top: 0; }
@media (min-width: 980px) { .express .grid { grid-template-columns: 6fr 6fr; gap: 64px; } }
.facts { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1.5px solid var(--navy); max-width: 560px; }
.facts li { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 13px 0 12px; border-bottom: 1.5px solid var(--navy); }
.facts dt, .facts .k { font: 700 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
@media (max-width: 479px) { .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* the route: H20 to NPL, drawn like the tracking card */
.route { border: 2px solid var(--navy); background: var(--cream); box-shadow: 4px 4px 0 var(--paper2); }
.route .bar { background: var(--navy); color: var(--cream); padding: 16px 20px 15px; }
.route .bar p { margin: 0; font: 700 10.5px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mustard); }
.route .bar h3 { font-size: clamp(24px, 3.6vw, 38px); line-height: 1; margin-top: 8px; letter-spacing: .01em; }
.route .bar h3 span { color: var(--orange); }
.route .legs { display: grid; grid-template-columns: auto minmax(64px, 1fr) auto; align-items: end; gap: 6px 10px; padding: 26px 20px 8px; }
.route .code { font: 400 clamp(30px, 4.6vw, 62px)/.9 var(--display); letter-spacing: -.01em; }
.route .code.to { color: var(--orange); }
.route .where { display: block; margin-top: 10px; font: 700 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.route .arc { width: 100%; height: auto; align-self: center; margin-bottom: 24px; }
.route .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: 0 20px; padding: 13px 0 16px; border-top: 1.5px solid var(--navy);
               font: 700 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.route .meta span { color: var(--rust); }
.route .airmail { margin: 0; }

/* ---------- passport office band ---------- */
.office { padding: 72px 0 80px; }
.office .grid { display: grid; gap: 34px; margin-top: 26px; }
@media (min-width: 980px) { .office .grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--cream); }
.ledger a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; padding: 22px 4px 21px; border-bottom: 1.5px solid var(--cream); text-decoration: none; }
.ledger .t { font: 400 clamp(20px, 2.6vw, 30px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.ledger .d { grid-column: 1; font-size: 13px; color: var(--mute); }
.ledger .go { grid-column: 2; grid-row: 1 / span 2; font: 700 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
              background: var(--mustard); padding: 12px 12px 11px; box-shadow: 3px 3px 0 var(--orange); }
.ledger a:hover .t { color: var(--mustard); }
@media (max-width: 599px) { .ledger .go { display: none; } }
.office .fine { margin-top: 18px; }

/* ---------- footer ---------- */
.foot-site { background: var(--navy); color: var(--mute); padding: 34px 0 40px; }
.foot-site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
.foot-site p { margin: 0; max-width: 60ch; font-size: 12.5px; line-height: 1.65; }
.foot-site nav { display: flex; align-items: flex-start; gap: 24px; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.foot-site nav a { color: var(--cream); text-decoration: none; padding: 8px 0; border-bottom: 2px solid var(--orange); }
.foot-site nav a:hover { color: var(--mustard); }
.foot-site .fine { margin-top: 10px; color: var(--mute); }

/* ================================================================ UFO Express page */
.xhead { padding: 48px 0 52px; }
.xhead h1 { font-size: clamp(40px, 9vw, 104px); line-height: .96; letter-spacing: -.005em; margin: 0 0 24px; }
.xhead h1 span { color: var(--orange); }
.xhead .lede { font-size: 16px; max-width: 54ch; }
.status { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 20px; padding: 14px 18px 13px; border: 2px solid var(--mustard); }
.status .lbl { font: 700 10px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.status b { font: 400 clamp(18px, 2.4vw, 24px)/1.1 var(--display); color: var(--mustard); letter-spacing: .02em; text-transform: uppercase; }
.status span { font-size: 13px; color: var(--cream); }

.ways { padding: 72px 0 76px; }
.ways .grid { display: grid; gap: 52px; margin-top: 34px; }
@media (min-width: 980px) { .ways .grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.way h3 { margin: 22px 0 14px; }
.way p { max-width: 58ch; }
.steps { list-style: none; counter-reset: s; margin: 18px 0 0; padding: 0; border-top: 1.5px solid var(--navy); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.6em 1fr; gap: 12px; padding: 14px 0 13px; border-bottom: 1.5px solid var(--navy); }
.steps li::before { content: counter(s); font: 400 22px/1.1 var(--display); color: var(--rust); }
.way .fine { margin-top: 16px; }
.wayB-art { border: 2px solid var(--navy); background: var(--navy); color: var(--cream); padding: 20px; }
.wayB-art p { margin: 0; }
.wayB-art .big { font: 400 clamp(24px, 3.4vw, 34px)/1.1 var(--display); text-transform: uppercase; margin: 6px 0 14px; }
.wayB-art .big span { display: block; color: var(--orange); }
.wayB-art .small { font: 700 10.5px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mustard); }

.times { padding: 68px 0 72px; }
.tt { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: 14px; }
.tt caption { text-align: left; }
.tt th, .tt td { text-align: left; padding: 15px 14px 14px 0; border-bottom: 1px solid var(--hair-d); vertical-align: top; }
.tt thead th { font: 700 10px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); border-bottom: 1.5px solid var(--cream); }
.tt tbody th { font: 700 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tt td b { display: block; text-transform: uppercase; font: 400 clamp(22px, 3vw, 34px)/1 var(--display); color: var(--mustard); letter-spacing: .02em; }
.tt td small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--mute); letter-spacing: .03em; }
.tt .none { color: var(--mute); }
@media (max-width: 679px) {
  .tt thead { display: none; }
  .tt tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1.5px solid var(--cream); padding: 14px 0; }
  .tt tbody th { grid-column: 1 / -1; border: 0; padding-bottom: 6px; }
  .tt td { border: 0; padding: 6px 10px 6px 0; }
  .tt td.late { grid-column: 1 / -1; }
  .tt td::before { content: attr(data-h); display: block; font: 700 9.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
}
.times .notes { display: grid; gap: 10px 40px; margin-top: 26px; }
@media (min-width: 980px) { .times .notes { grid-template-columns: 1fr 1fr; } }
.times .notes p { margin: 0; color: var(--mute); font-size: 13.5px; max-width: 58ch; }

.after { padding: 72px 0 76px; }
.after .grid { display: grid; gap: 44px; margin-top: 34px; }
@media (min-width: 980px) { .after .grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; } }
.card { border: 2px solid var(--navy); background: var(--cream); }
.card .top { background: var(--navy); color: var(--cream); padding: 18px 22px 16px; }
.card .top p { margin: 0; font: 700 10.5px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mustard); }
.card .top h3 { font-size: clamp(26px, 4vw, 44px); line-height: 1; margin: 8px 0 10px; }
.card .top h3 span { color: var(--orange); }
.card .top .sub { color: var(--mute); letter-spacing: .14em; }
.card .stops { list-style: none; margin: 0; padding: 18px 22px 8px; }
.card .stops li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 0 0 18px 34px; font: 700 13px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.card .stops li::before { content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border: 2px solid var(--navy); border-radius: 50%; background: var(--cream); }
.card .stops li::after { content: ""; position: absolute; left: 8px; top: 19px; bottom: 1px; border-left: 2px dotted var(--navy); }
.card .stops li:last-child::after { display: none; }
.card .stops li.done::before { background: var(--orange); box-shadow: inset 0 0 0 2px var(--cream); }
.card .stops li.done::after { border-left-style: solid; }
.card .stops li:not(.done) { color: var(--faint); }
.card .stops time { white-space: nowrap; }
.card .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin: 0 22px; padding: 14px 0 16px; border-top: 1.5px solid var(--navy); }
.card .base p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.card .base b { display: block; font: 700 14px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.card .base .no { color: var(--rust); font-weight: 700; letter-spacing: .08em; }
.card .airmail { margin: 0; }
.specimen { margin-top: 12px; }
.facts2 h3 { margin-bottom: 12px; }
.facts2 p { color: var(--ink2); }
.facts2 .blk + .blk { margin-top: 30px; padding-top: 26px; border-top: 1.5px solid var(--navy); }

/* a decision waiting on Robb: visible in preview, refused by deploy.sh */
.todo { margin-top: 44px; border: 2px dashed var(--orange); padding: 20px 22px 18px; background: var(--paper2); }
.todo .tag { display: inline-block; background: var(--orange); color: var(--navy); font: 700 10px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; padding: 5px 8px 4px; margin-bottom: 14px; }
.todo p { max-width: 70ch; }
.todo p:last-child { margin-bottom: 0; }

/* ---------- 404 ---------- */
.lost { min-height: 70vh; display: flex; align-items: center; padding: 60px 0; }
.lost h1 { font-size: clamp(34px, 7vw, 76px); line-height: 1; margin: 0 0 22px; }
.lost h1 span { display: block; color: var(--orange); }
.poster { margin: 0; }
.poster img { display: block; width: 100%; height: auto; }

/* ---------- the rebuild (2026-11-02): the cargo deck cards, the crew, Know before you post, the closing
   character. Same structure as the spaceport's destination posters, crew, travel advice and neighbor ad. */
.paper2 { background: var(--paper2); color: var(--navy); border-top: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); }
.deck, .crewsec { padding: 72px 0 80px; }
.deck .head, .crewsec .head { display: grid; gap: 12px; margin-bottom: 34px; }
.cards { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
         padding: 4px var(--gut) 18px; margin: 0 calc(-1 * var(--gut)); }
.card2 { scroll-snap-align: center; display: flex; flex-direction: column; background: var(--cream); border: 1.5px solid var(--navy); box-shadow: 5px 5px 0 var(--navy); }
.card2 .pic { position: relative; background: var(--navy); border-bottom: 1.5px solid var(--navy); aspect-ratio: 1; overflow: hidden; }
.card2 .pic img { width: 100%; height: 100%; object-fit: cover; clip-path: circle(43% at 50% 50%); transform: scale(1.06); }
.card2 .pic::after { content: ""; position: absolute; inset: 4.4%; border-radius: 50%; box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--mustard); pointer-events: none; }
.card2.real .pic::before { content: "Real"; position: absolute; z-index: 1; top: 12px; right: 12px; background: var(--orange); color: var(--navy);
                           font: 700 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; padding: 6px 8px 5px; transform: rotate(4deg); box-shadow: 2px 2px 0 var(--navy); }
.card2 .stub { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card2 .nm { font: 400 16px/1.15 var(--display); letter-spacing: .02em; }
.card2 .nm span { display: block; margin-top: 4px; font: 700 10px/1.3 var(--mono); letter-spacing: .2em; color: var(--rust); }
.card2 .row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1.5px solid var(--navy); border-bottom: 1px dashed rgba(20,36,58,.4);
              font: 700 9.5px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.card2 .row b { display: block; margin-top: 4px; font: 400 13px/1.1 var(--display); letter-spacing: .02em; color: var(--navy); text-transform: uppercase; }
.card2 .row .r { text-align: right; }
.card2 p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.crew { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crew li { border: 1.5px solid var(--cream); background: var(--cream); color: var(--navy); box-shadow: 5px 5px 0 var(--mustard); }
.crew img { width: 100%; height: auto; border-bottom: 1.5px solid var(--navy); }
.crew .who { padding: 12px 12px 14px; }
.crew h3 { font: 400 13px/1.25 var(--display); letter-spacing: .02em; }
.crew .role { font: 700 9.5px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--rust); margin: 5px 0 8px; }
.crew p { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--ink2); }
.office .pp { margin: 34px 0 0; }
.office .pp img { width: min(100%, 380px); height: auto; transform: rotate(-3deg); border-radius: 3px; box-shadow: 8px 10px 0 rgba(0,0,0,.28), 0 18px 40px rgba(0,0,0,.3); }
.faq { padding: 72px 0 80px; }
.faq .grid { display: grid; gap: 28px; }
.qa { border-top: 1.5px solid var(--navy); }
.qa details { border-bottom: 1.5px solid var(--navy); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 14px; align-items: center; padding: 18px 2px;
              font: 400 14px/1.35 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--navy); font: 700 16px/1 var(--mono); }
.qa details[open] summary::after { content: "\2013"; background: var(--navy); color: var(--cream); }
.qa summary:hover { color: var(--rust); }
.qa .a { padding: 0 2px 20px; max-width: 64ch; font-size: 13.5px; color: var(--ink2); }
.qa .a p:last-child { margin: 0; }
.neighbor { position: relative; background: var(--mustard); color: var(--navy); overflow: hidden; border-top: 1.5px solid var(--navy); }
.neighbor .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 56px; }
.neighbor .kicker { color: var(--navy); }
.neighbor .kicker::before { background: var(--navy); }
.neighbor h2 { font-size: clamp(26px, 7vw, 72px); line-height: 1.04; position: relative; z-index: 1; }
.neighbor h2 em { font-style: normal; color: var(--rust); }
.neighbor h2 .l { display: block; }
.neighbor p { max-width: 46ch; font-size: 15px; margin-top: 20px; }
.neighbor .hub { display: inline-flex; flex-direction: column; gap: 4px; margin: 6px 0 30px; padding: 12px 16px; background: var(--navy); color: var(--cream); text-decoration: none; box-shadow: 4px 4px 0 var(--rust); justify-self: start; }
.neighbor .hub b { font: 400 18px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.neighbor .hub span { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mustard); }
.neighbor .host img { width: 100%; max-width: 540px; height: auto; margin: 0 auto; border: 1.5px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); }
@media (min-width: 600px) { .cards { grid-auto-columns: 46%; } .crew { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) {
  .deck .head, .crewsec .head { grid-template-columns: 7fr 5fr; align-items: end; gap: 40px; }
  .cards { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; padding: 4px 0 0; margin: 0; gap: 20px; }
  .crew { gap: 22px; } .crew h3 { font-size: 14px; } .crew p { font-size: 12px; }
  .faq .grid { grid-template-columns: 4fr 7fr; gap: 56px; align-items: start; }
  .neighbor h2 { font-size: clamp(44px, 5.2vw, 76px); grid-area: h; }
  .neighbor .grid { grid-template-columns: 6fr 5fr; grid-template-rows: auto auto auto 1fr; grid-template-areas: "k k" "h h" "p i" "a i"; gap: 0 40px; padding-top: 80px; }
  .neighbor .copy { display: contents; }
  .neighbor .kicker { grid-area: k; }
  .neighbor p { grid-area: p; margin-top: 28px; }
  .neighbor .hub { grid-area: a; align-self: start; margin-bottom: 80px; }
  .neighbor .host { grid-area: i; align-self: end; margin-top: 30px; }
  .neighbor .host img { border-bottom: 0; }
}

/* the UFO Express header: the route painting held right, the saucer on its dotted course */
.xhead { position: relative; overflow: hidden; }
.xhead .wrap { position: relative; z-index: 2; }
.xhead .xart { position: relative; margin: -10px 0 18px; aspect-ratio: 2400 / 1001; width: 170%; margin-left: -62%; }
.xhead .xart .scene { width: 100%; height: 100%; max-width: none; }
.xhead .sau { position: absolute; left: 51%; top: 47%; width: 8.5%; height: auto; transform: rotate(-12deg); }
@media (prefers-reduced-motion: no-preference) {
  .xhead .sau { animation: xfly 7s ease-in-out infinite; }
  @keyframes xfly { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 50% { transform: translate(6px, -8px) rotate(-9deg); } }
}
@media (min-width: 980px) {
  .xhead { padding: 84px 0 96px; min-height: 560px; }
  .xhead .xart { position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: auto; height: 100%; margin: 0;
                 -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
  .xhead .lede, .xhead h1, .xhead .status { max-width: 46%; }
  .xhead .lede { max-width: min(46%, 54ch); }
}