/* The Herald Labs: Every's structure in The Herald's brand. */
:root {
  --night: #0d1018;
  --night-2: #161a23;
  --night-3: #1f2430;
  --cream: #f5f4ef;
  --cream-2: #c9c8c2;
  --cream-3: #9a9994;
  --gold: #ffe7a8;
  --paper: #f7f7f4;
  --ink: #14161a;
  --ink-2: #4a4b4f;
  --ink-3: #6b6c70;
  --dots: rgba(245, 244, 239, 0.26);
  --dots-ink: rgba(20, 22, 26, 0.28);
  --display: "Instrument Serif", "Times New Roman", serif;
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --max: 78rem;
  --gap: 2rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; min-width: 20rem; background: var(--night); color: var(--cream); font: 400 0.9375rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
code { font: 0.92em/1.5 var(--mono); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 10; padding: 0.5rem 0.9rem; background: var(--gold); color: var(--ink); }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { width: min(var(--max), calc(100% - 3rem)); margin-inline: auto; }
.prose-link, .text-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.text-link:hover { color: var(--gold); }

/* Header and masthead */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0; }
.icon-btn { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; cursor: pointer; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.menu { position: relative; }
.menu-panel { position: absolute; top: 2.7rem; left: 0; z-index: 6; display: grid; width: 15rem; padding: 0.6rem 0; background: var(--night-2); border: 1px solid var(--dots); }
.menu-panel a { padding: 0.55rem 1.1rem; font-size: 1rem; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--night-3); color: var(--gold); }
.site-nav { display: flex; align-items: center; gap: 1.5rem; font-size: 1.05rem; }
.site-nav a { color: var(--cream-2); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cream); }
.site-nav a[aria-current="page"]:not(.nav-cta) { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.35em; }
.site-nav .nav-cta { padding: 0.55rem 1rem; border-radius: 0.375rem; background: var(--gold); color: var(--ink); font-weight: 500; }
.site-nav .nav-cta:hover { background: #fff1c9; color: var(--ink); }
.site-nav .nav-cta[aria-current="page"] { color: var(--ink); }
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: -0.4rem; }
.masthead::before, .masthead::after { content: ""; height: 1px; background: rgba(245, 244, 239, 0.22); }
.wordmark { display: flex; align-items: center; gap: 0.7rem; padding: 0 1.6rem; font: 400 clamp(2.1rem, 4.4vw, 3.9rem)/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.wordmark img { width: 0.8em; height: 0.8em; }
.wordmark em { font-style: italic; }

/* Inline arrow icon (replaces arrow characters, which iOS renders as emoji) */
.i-arrow { display: inline-block; flex: none; width: 0.82em; height: 0.82em; margin-left: 0.3em; vertical-align: -0.04em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i-out { transform: rotate(-45deg); }
.btn .i-arrow, .arrow .i-arrow, .rail-head .i-arrow { margin-left: 0; }
.shelf-head .arrow .i-arrow, .rail-head a .i-arrow { width: 1.05em; height: 1.05em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; font: 500 0.95rem/1 var(--sans); white-space: nowrap; cursor: pointer; border: 0; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #fff1c9; }
.btn-line { border: 1px solid var(--cream-2); color: var(--cream); }
.btn-line:hover { border-color: var(--cream); background: rgba(245, 244, 239, 0.06); }
.btn-ink { background: var(--ink); color: var(--paper); border-radius: 0.375rem; }
.btn-ink:hover { background: #2b2e35; }
.btn-quiet { background: var(--night-3); border: 1px solid var(--dots); color: var(--cream); }
.btn-quiet:hover { border-color: var(--gold); }
.btn-pill { padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--cream); color: var(--ink); }
.btn-pill:hover { background: var(--gold); }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

/* Home hero banner */
.hero { display: grid; grid-template-columns: 2fr 1fr; margin-top: 3.25rem; background: var(--night-2); min-height: 17rem; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 2.2rem 2rem; }
.kicker { font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.hero h1 { margin-top: 0.7rem; max-width: 19ch; font: 400 clamp(2.2rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: -0.02em; }
.hero .lede { margin-top: 1rem; max-width: 40rem; color: var(--cream-2); font-size: 0.98rem; line-height: 1.55; }
.hero-art { position: relative; min-height: 12rem; overflow: hidden; isolation: isolate; background: var(--night-3); }
.hero-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/img/hero-lab-night.webp") center 60% / cover; }
.hero-art::before, .cover::before { content: ""; position: absolute; inset: 0; background: url("/assets/img/orbit.svg") center / 100% 100% no-repeat; opacity: 0.85; }

/* Inner page heads (Every's centred studio header) */
.page-head { width: min(44rem, calc(100% - 3rem)); margin: 3.4rem auto 0; text-align: center; }
.page-head h1 { margin-top: 0.6rem; font: 400 clamp(2.5rem, 4.4vw, 3.6rem)/1.02 var(--display); letter-spacing: -0.02em; }
.page-head .lede { margin-top: 1rem; font: 400 1.15rem/1.55 var(--serif); color: var(--cream-2); }
.page-head .actions { justify-content: center; }
.muted { color: var(--cream-3); }

/* Shelves */
.shelf { margin-top: 1.6rem; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.6rem 0 1.4rem; border-top: 1px dotted var(--dots); border-bottom: 1px dotted var(--dots); }
.shelf-head h2 { font: 500 1.125rem/1.5 var(--sans); text-transform: uppercase; }
.shelf-head p { font-size: 1rem; color: var(--cream); }
.shelf-head .arrow { font-size: 1.2rem; padding: 0.2rem; }
.shelf-head .arrow:hover { color: var(--gold); }
.grid-4, .grid-3, .grid-2 { display: grid; column-gap: calc(var(--gap) * 2); row-gap: 1.6rem; padding-top: 1.1rem; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 > *, .grid-3 > *, .grid-2 > * { position: relative; padding-bottom: 1.2rem; }
.grid-4 > :not(:nth-child(4n + 1))::before, .grid-3 > :not(:nth-child(3n + 1))::before, .grid-2 > :not(:nth-child(2n + 1))::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) * -1); border-left: 1px dotted var(--dots); }
.slot-note { padding: 0.9rem 0 0; border-top: 1px dotted var(--dots); font-weight: 500; }
.slot-note a:hover { color: var(--gold); }

/* Hub cards (rendered by api/_lib/hub.js) */
.item-media { display: block; position: relative; aspect-ratio: 1; overflow: hidden; margin-bottom: 1rem; background: var(--night-3); }
.item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.item-media:hover img, .item-media:hover .cover-img { transform: scale(1.03); }
.item-meta { margin-bottom: 0.45rem; font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; }
.item-meta span { color: var(--cream-3); margin: 0 0.15em; }
.item-title { font: 400 1.6rem/1.1 var(--display); letter-spacing: -0.01em; }
.item-title a:hover, .feature-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.item-dek { margin-top: 0.55rem; font: 400 1rem/1.45 var(--serif); color: var(--cream-2); }
.item-byline { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.75rem; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.03em; text-transform: uppercase; }
.av { width: 1.45rem; height: 1.45rem; flex: none; border-radius: 50%; background: var(--night-3) url("/assets/img/mark-cream.svg") center / 62% no-repeat; }
.item-receipts { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem; font-size: 0.85rem; font-weight: 500; color: var(--cream-2); }
.item-receipts a:hover { color: var(--gold); }

/* Covers in the Herald style */
.cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 1rem; color: var(--cream); background: radial-gradient(120% 90% at 85% 0%, #2c2a4a 0%, #121624 55%, #0b0e15 100%); transition: transform 0.4s ease; }
.cover > * { position: relative; z-index: 1; }
.cover-warm { background: radial-gradient(120% 90% at 10% 0%, #4a3324 0%, #1b1517 55%, #0c0d12 100%); }
.cover-blue { background: radial-gradient(120% 90% at 50% 0%, #1d3350 0%, #111827 55%, #0b0e15 100%); }
.cover-img { background-size: cover; background-position: center; }
.cover-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 16, 24, 0) 35%, rgba(13, 16, 24, 0.85) 100%); }
.cover-k { font: 600 0.68rem/1.25 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.cover-n { margin-top: 0.3rem; font: 400 clamp(3.4rem, 5.6vw, 5.2rem)/0.9 var(--display); letter-spacing: -0.03em; }
.cover-c { margin-top: 0.45rem; max-width: 20rem; font-size: 0.85rem; line-height: 1.3; color: var(--cream-2); }
.cover-center { align-items: center; justify-content: center; text-align: center; }

/* Home lead: two cards, a feature, the latest rail */
.lead { display: grid; grid-template-columns: 1fr 2fr 1fr; margin-top: 1.25rem; }
.lead > * { padding: 0.75rem 0 1.5rem; }
.lead-left { display: grid; gap: 1.6rem; align-content: start; padding-right: var(--gap); border-right: 1px dotted var(--dots); }
.lead-left .item-media { aspect-ratio: 16 / 9; }
.lead-left .item-dek, .lead-left .item-receipts { display: none; }
.lead-center { padding-inline: var(--gap); border-right: 1px dotted var(--dots); text-align: center; }
.lead-center .item-media { aspect-ratio: 4 / 3; margin-bottom: 1.2rem; }
.lead-center .cover-n { font-size: clamp(5rem, 11vw, 9.5rem); }
.feature-title { margin-top: 0.4rem; font: 400 clamp(2rem, 3vw, 2.65rem)/1.08 var(--display); letter-spacing: -0.015em; }
.lead-center .item-dek { max-width: 34rem; margin: 0.9rem auto 0; font-size: 1.2rem; line-height: 1.5; }
.lead-center .item-byline { justify-content: center; }
.lead-right { padding-left: var(--gap); }
.rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; font: 500 1.125rem/1.5 var(--sans); text-transform: uppercase; }
.rail-head a:hover { color: var(--gold); }
.rail .item { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.85rem; padding: 0.85rem 0; border-top: 1px dotted var(--dots); }
.rail .item:first-child { border-top: 0; padding-top: 0.2rem; }
.rail .item-media { margin: 0; }
.rail .cover { padding: 0.3rem; }
.rail .cover-k, .rail .item-meta, .rail .item-dek, .rail .item-receipts { display: none; }
.rail .cover-n { margin: 0; font-size: 1.5rem; }
.rail .item-title { font-size: 1.25rem; line-height: 1.12; }
.rail .item-byline { margin-top: 0.45rem; }
.rail .av { display: none; }

/* Product cards (Every's "Built by" strip) */
.products-3, .products-4 { display: grid; gap: 0.75rem; padding: 1.1rem 0 0.4rem; }
.products-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.products-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcard { display: flex; flex-direction: column; padding: 0.5rem 0.5rem 1.1rem; border-radius: 0.4rem; background: var(--night-2); }
.pcard-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.2rem; background: var(--night-3); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; }
.pcard-body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 0.9rem 0.5rem 0; }
.pcard h3 { display: flex; align-items: center; gap: 0.55rem; font: 500 1.45rem/1.1 var(--sans); letter-spacing: -0.01em; }
.badge { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 0.3rem; background: var(--gold); color: var(--ink); font: 400 1.25rem/1 var(--display); }
.pcard p { color: var(--cream-2); font-size: 0.95rem; line-height: 1.4; }
.pcard .status { font: 600 0.7rem/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.pcard .btn-pill { align-self: flex-start; margin-top: auto; }
.pcard-entity { background: #181d29; }
.pcard-claw { background: #221e15; }
.pcard-ada { background: #241b18; }
.pcard-upside { background: #172022; }
.pcard-quiet { background: transparent; border: 1px dashed var(--dots); }
.pcard-quiet h3 { font: 400 1.7rem/1.05 var(--display); }

/* Light panel */
.panel { margin-top: 1.8rem; padding: 3.4rem 2rem 2.6rem; background: var(--paper); color: var(--ink); text-align: center; overflow: hidden; }
.panel h2 { max-width: 16ch; margin-inline: auto; font: 400 clamp(2.4rem, 4.6vw, 4rem)/1 var(--display); letter-spacing: -0.03em; }
.panel h2 em { color: #8a6a1f; }
.panel-art { max-width: 54rem; aspect-ratio: 1400 / 680; margin: 1.4rem auto 0; background: url("/assets/img/panel-receipts.webp") center / cover no-repeat; }
.panel-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); max-width: 60rem; margin: 0.4rem auto 0; text-align: left; }
.panel-cols a { display: block; padding-top: 0.9rem; border-top: 1px solid var(--ink); }
.panel-cols h3 { font: 500 1.05rem/1.3 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; }
.panel-cols p { margin-top: 0.35rem; font: 400 1rem/1.45 var(--serif); color: var(--ink-2); }
.panel-cols a:hover h3 { text-decoration: underline; }
.panel :focus-visible { outline-color: var(--ink); }

/* Show card (Every's podcast block) */
.show-card .item-media { margin-bottom: 1rem; }
.show-card h3 { font: 600 1.05rem/1.3 var(--sans); text-transform: uppercase; }
.show-card p { margin-top: 0.6rem; color: var(--cream-2); font-size: 1rem; line-height: 1.5; }
.show-card .btn { margin-top: 1rem; }

/* Feature rows for inner pages */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem calc(var(--gap) * 2); padding: 2.2rem 0; border-top: 1px dotted var(--dots); }
.feature:first-child { border-top: 0; }
.feature-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night-3); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature h2 { margin-top: 0.5rem; font: 400 clamp(2rem, 3.2vw, 2.8rem)/1.04 var(--display); letter-spacing: -0.015em; }
.feature .tagline { margin-top: 0.7rem; font: 400 1.25rem/1.4 var(--serif); color: var(--cream-2); }
.prose { font: 400 1.08rem/1.6 var(--serif); color: var(--cream-2); }
.prose > * + * { margin-top: 0.9rem; }
.prose strong { color: var(--cream); font-weight: 500; }
.prose a { text-decoration: underline; text-underline-offset: 0.18em; color: var(--cream); }
.prose a:hover { color: var(--gold); }
.note { font: italic 400 1rem/1.5 var(--serif); color: var(--cream-3); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem calc(var(--gap) * 2); padding: 2.4rem 0; border-top: 1px dotted var(--dots); }
.split h2 { margin-top: 0.5rem; font: 400 clamp(1.9rem, 3vw, 2.6rem)/1.05 var(--display); letter-spacing: -0.015em; }
.split .lede { margin-top: 0.8rem; font: 400 1.1rem/1.5 var(--serif); color: var(--cream-2); }
.check-list { display: grid; gap: 0.1rem; }
.check-list li { position: relative; padding: 0.65rem 0 0.65rem 1.8rem; border-bottom: 1px dotted var(--dots); font-size: 1rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.9rem; height: 0.9rem; background: url("/assets/img/mark-cream.svg") center / contain no-repeat; }
.facts { display: grid; gap: 0; border-top: 1px solid var(--cream-3); }
.facts div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px dotted var(--dots); }
.facts dt { font: 600 0.72rem/1.6 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-3); }
.facts dd { font-size: 0.98rem; }
.segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); margin-top: 1.2rem; }
.segments li { padding: 0.7rem 0; border-top: 1px dotted var(--dots); color: var(--cream-2); font-size: 0.95rem; }
.segments strong { display: block; font: 400 1.3rem/1.15 var(--display); color: var(--cream); }
.receipts { padding: 1.2rem 1.3rem; background: var(--night-2); border-left: 2px solid var(--gold); font-size: 0.95rem; }
.receipts-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.receipts dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.4rem 1rem; }
.receipts dt { color: var(--cream-3); font-family: var(--mono); font-size: 0.85rem; }
.status { display: inline-block; padding: 0.05rem 0.45rem; border: 1px solid var(--dots); font-size: 0.82rem; }
.status-warn { border-color: rgba(255, 231, 168, 0.6); color: var(--gold); }
.gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; counter-reset: gate; }
.gates li { counter-increment: gate; padding: 0.9rem; background: var(--night-2); font-size: 0.95rem; }
.gates li::before { content: counter(gate, decimal-leading-zero); display: block; margin-bottom: 0.3rem; font: 400 1.8rem/1 var(--display); color: var(--gold); }
.numbered { counter-reset: n; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.8rem; padding: 0.9rem 0; border-top: 1px dotted var(--dots); font: 400 1.25rem/1.25 var(--display); }
.numbered li::before { content: counter(n, decimal-leading-zero); color: var(--gold); }
.code { padding: 1rem 1.2rem; overflow-x: auto; background: #080a10; border: 1px solid var(--dots); color: var(--cream); font: 0.85rem/1.65 var(--mono); }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.4rem; }
.flow li { padding: 0.9rem; background: var(--night-2); }
.flow b { display: block; font: 400 1.6rem/1 var(--display); color: var(--gold); }
.flow strong { display: block; margin-top: 0.4rem; font-weight: 500; }
.flow span { display: block; margin-top: 0.2rem; color: var(--cream-2); font-size: 0.9rem; line-height: 1.35; }
.flow .flow-review { background: var(--gold); color: var(--ink); }
.flow .flow-review b, .flow .flow-review span { color: var(--ink); }
.cards-num .card-index { font: 400 2.4rem/1 var(--display); color: var(--gold); }
.cards-num h3 { margin-top: 0.6rem; font: 400 1.7rem/1.1 var(--display); }
.cards-num p { margin-top: 0.6rem; font: 400 1rem/1.5 var(--serif); color: var(--cream-2); }
.cards-num p + p { margin-top: 0.6rem; }
.cards-num strong { color: var(--cream); font-weight: 500; }
.contact-list li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0.4rem 2rem; padding: 1.2rem 0; border-top: 1px dotted var(--dots); }
.contact-list strong { font: 400 1.5rem/1.15 var(--display); font-weight: 400; }
.contact-list p { font-size: 1.02rem; color: var(--cream-2); }
.contact-list a { color: var(--cream); }

/* Form */
.form-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2rem calc(var(--gap) * 2); padding: 2.4rem 0; border-top: 1px dotted var(--dots); scroll-margin-top: 1rem; }
.form-intro h2 { margin-top: 0.5rem; font: 400 clamp(2rem, 3.2vw, 2.8rem)/1.04 var(--display); }
.form-intro p { margin-top: 0.8rem; color: var(--cream-2); font-size: 1rem; }
.application-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.form-field { display: grid; gap: 0.45rem; }
.form-field-wide, .form-actions { grid-column: 1 / -1; }
.form-field label { font-weight: 500; font-size: 0.95rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--cream-3); border-radius: 0.3rem; background: transparent; color: var(--cream); font: 400 1rem/1.4 var(--sans); }
.form-field select option { color: var(--ink); }
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--cream-3); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-actions .btn { padding: 0.8rem 1.4rem; border-radius: 0.3rem; font-size: 1rem; }
.form-actions .btn:disabled { opacity: 0.6; cursor: progress; }
.form-status { font-size: 0.95rem; color: var(--cream-2); }
.form-status[data-state="success"] { color: var(--gold); }
.form-status[data-state="error"] { color: #ffb4a8; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* CTA band */
.cta-band { width: min(79.5rem, calc(100% - 2rem)); margin: 3.4rem auto 0; padding: 2.6rem 2rem 2.4rem; background: var(--gold); color: var(--ink); }
.cta-band h2 { max-width: 22ch; font: 400 clamp(2.1rem, 3.4vw, 2.9rem)/1.02 var(--display); letter-spacing: -0.02em; }
.cta-band h2 em { font-style: italic; }
.cta-band p { max-width: 32rem; margin-top: 0.9rem; font-size: 1.125rem; line-height: 1.45; }
.cta-band .btn { margin-top: 1.2rem; }
.cta-band :focus-visible { outline-color: var(--ink); }

/* Footer */
.site-footer { margin-top: 2.4rem; border-top: 1px solid rgba(245, 244, 239, 0.18); background: var(--night); color: var(--cream); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 3rem 5rem; padding: 3.6rem 0 3rem; }
.site-footer .wordmark { padding: 0; font-size: 2.3rem; }
.foot-title { margin-top: 1.1rem; font: 400 2.6rem/1.05 var(--display); }
.foot-title em { color: var(--gold); }
.foot-lede { margin-top: 0.6rem; font: 400 1.05rem/1.45 var(--serif); color: var(--cream-2); }
.foot-cta { margin-top: 1.3rem; border-radius: 0.3rem; }
.footer-nav, .foot-elsewhere { display: grid; gap: 1.1rem; align-content: start; font-size: 1rem; font-weight: 500; }
.footer-nav a:hover, .foot-elsewhere a:hover { color: var(--gold); }
.footer-meta { padding-bottom: 2.4rem; font-size: 0.85rem; color: var(--cream-3); }
.footer-meta a { text-decoration: underline; text-underline-offset: 0.15em; }

/* Stream (Latest) */
.stream { padding-top: 0.4rem; }
.stream .item { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.4rem; padding: 1.3rem 0; border-bottom: 1px dotted var(--dots); }
.stream .item-media { margin: 0; }
.stream .cover { padding: 0.6rem; }
.stream .cover-n { font-size: 2.6rem; }
.stream .item-title { font-size: 1.75rem; }

/* Light pages: articles and documents */
.light { background: var(--paper); color: var(--ink); color-scheme: light; }
.light .masthead::before, .light .masthead::after { background: rgba(20, 22, 26, 0.25); }
.light .site-header .wordmark img { filter: invert(1) brightness(0.3); }
.light .site-nav a { color: var(--ink-2); }
.light .site-nav a:hover, .light .site-nav a[aria-current="page"] { color: var(--ink); }
.light .site-nav .nav-cta { background: var(--ink); color: var(--paper); }
.light .site-nav .nav-cta:hover, .light .site-nav .nav-cta[aria-current="page"] { background: #2b2e35; color: var(--paper); }
.light .menu-panel { background: #fff; border-color: var(--dots-ink); }
.light .menu-panel a:hover, .light .menu-panel a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.light :focus-visible { outline-color: var(--ink); }
.light .site-footer :focus-visible { outline-color: var(--gold); }
.light .kicker { color: #7a5c14; }
.light .text-link:hover { color: #7a5c14; }
.article { width: min(46rem, calc(100% - 3rem)); margin: 4rem auto 0; }
.article-kicker { margin-bottom: 0.8rem; }
.article h1 { font: 400 clamp(2.4rem, 4.4vw, 3.3rem)/1.04 var(--display); letter-spacing: -0.015em; }
.article .dek { margin-top: 0.9rem; font: 400 1.45rem/1.32 var(--serif); color: var(--ink-2); }
.article .item-byline { margin-top: 1.2rem; }
.light .av { background-color: var(--ink); }
.article-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1rem; margin-top: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--dots-ink); font-size: 0.95rem; color: var(--ink-2); }
.article-meta a { text-decoration: underline; text-underline-offset: 0.15em; }
.article-fig { margin-top: 1.6rem; }
.article-fig .cover { aspect-ratio: 16 / 9; height: auto; }
.article-fig .cover-n { font-size: clamp(5rem, 13vw, 10rem); }
.article-fig figcaption { margin-top: 0.45rem; font-size: 0.8rem; color: var(--ink-3); }
.article-note { margin-top: 1rem; font: italic 400 1.1rem/1.5 var(--serif); }
.article-body { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--dots-ink); font: 400 1.25rem/1.6 var(--serif); }
.article-body > * + * { margin-top: 1.1rem; }
.article-body h2 { margin-top: 2.2rem; font: 400 2rem/1.1 var(--display); letter-spacing: -0.01em; }
.article-body h3 { margin-top: 1.6rem; font: 500 1.05rem/1.4 var(--sans); }
.article-body ul, .article-body ol { padding-left: 1.3rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 0.4rem; }
.article-body a { text-decoration: underline; text-underline-offset: 0.15em; }
.article-body pre { padding: 1rem 1.2rem; overflow-x: auto; background: var(--ink); color: var(--paper); font: 0.85rem/1.6 var(--mono); }
.article-body :not(pre) > code { padding: 0.05em 0.3em; background: #e9e8e2; font-size: 0.82em; }
.table-wrap { overflow-x: auto; }
.article-body table { width: 100%; border-collapse: collapse; font: 400 0.95rem/1.4 var(--sans); }
.article-body th { padding: 0 0.8rem 0.5rem 0; border-bottom: 1px solid var(--ink); text-align: left; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.article-body td { padding: 0.6rem 0.8rem 0.6rem 0; border-bottom: 1px dotted var(--dots-ink); }
.article-body td:last-child, .article-body th:last-child { padding-right: 0; text-align: right; }
.light .receipts { background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; }
.light .receipts dt { color: #b9b8b2; }
.article-end { margin-top: 2rem; padding: 1.1rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 500 1rem/1.4 var(--sans); }
.article-end a { text-decoration: underline; text-underline-offset: 0.15em; }
.light .shelf-head, .light .slot-note { border-color: var(--dots-ink); }
.light .shelf-head p { color: var(--ink-2); }
.light .grid-4 > *::before, .light .grid-3 > *::before, .light .grid-2 > *::before { border-color: var(--dots-ink) !important; }
.light .item-meta span { color: var(--ink-3); }
.light .item-dek { color: var(--ink-2); }
.doc-cards a { display: block; height: 100%; padding: 1.1rem 1.2rem 1.2rem; background: var(--night-2); border: 1px solid var(--dots); }
.doc-cards a:hover { border-color: var(--gold); }
.doc-cards span { font: 600 0.7rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.doc-cards h2 { margin-top: 0.4rem; font: 400 1.6rem/1.1 var(--display); }
.doc-cards p { margin-top: 0.4rem; color: var(--cream-2); font-size: 0.95rem; line-height: 1.45; }
.doc-cards.grid-3 > *::before { display: none; }
.doc-cards.grid-3 { column-gap: 0.9rem; row-gap: 0.9rem; }
.doc-cards.grid-3 > * { padding-bottom: 0; }
.light .page-head .lede { color: var(--ink-2); }

/* Responsive */
@media (max-width: 1080px) {
  .lead { grid-template-columns: 1fr 1fr; }
  .lead-center { grid-column: 1 / -1; grid-row: 1; padding-inline: 0; border-right: 0; border-bottom: 1px dotted var(--dots); }
  .lead-left, .lead-right { padding-top: 1.4rem; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 > *::before { display: none; }
  .grid-4 > :nth-child(2n)::before { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) * -1); border-left: 1px dotted var(--dots); }
  .products-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .site-nav a:not(.nav-cta) { display: none; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-3 > *::before { display: none; }
  .products-3 { grid-template-columns: minmax(0, 1fr); }
  .feature, .split, .form-panel { grid-template-columns: minmax(0, 1fr); }
  .panel-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .shell { width: calc(100% - 2rem); }
  .topbar { padding: 0.7rem 0.75rem 0; }
  .site-nav .nav-cta { padding: 0.5rem 0.8rem; font-size: 0.95rem; }
  .masthead { margin-top: 0.6rem; }
  .wordmark { padding: 0 0.9rem; font-size: 2rem; }
  .hero { grid-template-columns: minmax(0, 1fr); margin-top: 1.6rem; }
  .hero-art { order: -1; min-height: 11rem; }
  .hero-copy { padding: 1.4rem 1.2rem 1.6rem; }
  .page-head { margin-top: 2.4rem; width: calc(100% - 2rem); }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead > * { padding-inline: 0; border-right: 0; }
  .lead-left { border-bottom: 1px dotted var(--dots); }
  .lead-center .item-dek { font-size: 1.1rem; }
  .grid-4, .grid-2, .products-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 > *::before, .grid-4 > :nth-child(2n)::before, .grid-2 > *::before { display: none; }
  .grid-4 > *, .grid-3 > *, .grid-2 > * { border-bottom: 1px dotted var(--dots); }
  .grid-4 > :last-child, .grid-3 > :last-child, .grid-2 > :last-child { border-bottom: 0; }
  .light .grid-4 > *, .light .grid-3 > *, .light .grid-2 > * { border-bottom-color: var(--dots-ink); }
  .doc-cards.grid-3 > * { border-bottom: 0; }
  .shelf-head p { font-size: 0.95rem; }
  .panel { padding: 2.4rem 1.2rem 2rem; }
  .cta-band { padding: 2rem 1.3rem; }
  .foot-grid { gap: 2.2rem 1.5rem; padding-top: 2.6rem; }
  .stream .item { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; }
  .stream .cover-k { display: none; }
  .stream .cover-n { font-size: 1.8rem; }
  .stream .item-title { font-size: 1.4rem; }
  .article-body { font-size: 1.15rem; }
  .article-body h2 { font-size: 1.75rem; }
  .receipts dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .receipts dd { margin-bottom: 0.5rem; }
  .segments, .gates, .application-form { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .contact-list li { grid-template-columns: minmax(0, 1fr); }
}

/* App layout for phones (768px and below). Desktop never sees the tab bar. */
.tabbar { display: none; }

@media (max-width: 768px) {
  @view-transition { navigation: auto; }

  html { -webkit-tap-highlight-color: transparent; }
  body { padding-bottom: calc(4.35rem + max(0.35rem, env(safe-area-inset-bottom))); font-size: 0.9375rem; }
  .shell { width: calc(100% - 2rem); }

  /* Compact sticky top bar that hides on scroll down (see assets/app.js) */
  .site-header {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    min-height: 3.25rem; padding: env(safe-area-inset-top) max(0.75rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    background: var(--night);
    border-bottom: 1px solid transparent;
    transition: transform 0.28s ease, border-color 0.2s ease;
    view-transition-name: topbar;
  }
  .is-scrolled .site-header { border-bottom-color: rgba(245, 244, 239, 0.12); }
  .nav-hidden .site-header { transform: translateY(-100%); }
  .light .site-header { background: var(--paper); }
  .is-scrolled .light .site-header { border-bottom-color: rgba(20, 22, 26, 0.12); }
  .site-header .masthead { order: -1; display: block; margin: 0; }
  .site-header .masthead::before, .site-header .masthead::after { display: none; }
  .site-header .wordmark { gap: 0.45rem; padding: 0; font-size: 1.45rem; }
  .topbar { padding: 0; }
  .menu { display: none; }
  .site-nav .nav-cta { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.9rem; border-radius: 999px; font-size: 0.875rem; }

  /* Bottom tab bar with safe-area inset */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 0.25rem max(0.25rem, env(safe-area-inset-right)) max(0.35rem, env(safe-area-inset-bottom)) max(0.25rem, env(safe-area-inset-left));
    background: var(--night);
    border-top: 1px solid rgba(245, 244, 239, 0.14);
    view-transition-name: tabbar;
  }
  /* Both bars are opaque: translucent bars let headings read through on phones. */
  .light .tabbar { background: var(--paper); border-top-color: rgba(20, 22, 26, 0.14); }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
    min-height: 3.5rem; padding: 0.35rem 0 0.3rem; border-radius: 0.75rem;
    color: var(--cream-3); font: 500 0.66rem/1 var(--sans); letter-spacing: 0.01em;
    cursor: pointer; list-style: none; touch-action: manipulation;
    transition: transform 0.12s ease, color 0.15s ease;
  }
  .tab::-webkit-details-marker { display: none; }
  .tab svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tab-more .tab svg circle { fill: currentColor; stroke: none; }
  .tab[aria-current="page"], .tab[data-active="true"], .tab-more[open] > .tab { color: var(--gold); }
  .tab[aria-current="page"] svg, .tab[data-active="true"] svg { stroke-width: 2.1; }
  .light .tab { color: var(--ink-3); }
  .light .tab[aria-current="page"], .light .tab[data-active="true"], .light .tab-more[open] > .tab { color: var(--ink); }
  .tab:active { transform: scale(0.92); }
  .tab:focus-visible { outline-offset: -2px; }

  /* More: a bottom sheet built on <details>, so it works without JavaScript */
  .tab-more { display: block; }
  .tab-more > .tab { height: 100%; }
  .tab-more[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(5, 7, 12, 0.5); }
  .sheet {
    position: fixed; left: max(0.5rem, env(safe-area-inset-left)); right: max(0.5rem, env(safe-area-inset-right)); bottom: calc(4.3rem + max(0.35rem, env(safe-area-inset-bottom))); z-index: 2;
    display: grid; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0.5rem 0; border-radius: 1rem; background: var(--night-2); border: 1px solid rgba(245, 244, 239, 0.14);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
  }
  .sheet-title { padding: 0.6rem 1.1rem 0.5rem; font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
  .sheet a { display: flex; align-items: center; min-height: 3rem; padding: 0 1.1rem; font-size: 1.02rem; border-top: 1px solid rgba(245, 244, 239, 0.08); }
  .sheet a:active, .sheet a[aria-current="page"] { background: var(--night-3); color: var(--gold); }
  .light .sheet { background: #fff; border-color: var(--dots-ink); color: var(--ink); }
  .light .sheet a { border-top-color: rgba(20, 22, 26, 0.08); }
  .light .sheet a:active, .light .sheet a[aria-current="page"] { background: var(--paper); color: var(--ink); }
  .light .sheet-title { color: #7a5c14; }
  @media (prefers-reduced-motion: no-preference) {
    .tab-more[open] .sheet { animation: sheet-in 0.22s ease-out; }
    @keyframes sheet-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
  }

  /* Touch: 44px targets, press states, whole cards tappable */
  .btn { min-height: 2.75rem; justify-content: center; }
  .btn-pill { min-height: 2.75rem; padding: 0 1.1rem; }
  .shelf-head .arrow { display: inline-grid; place-items: center; flex: none; min-width: 2.75rem; min-height: 2.75rem; }
  .item, .pcard, .show-card { position: relative; }
  .item-title a::after, .pcard .btn-pill::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .item-receipts a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 2.75rem; }
  .item:active, .pcard:active { transform: scale(0.985); }
  .item, .pcard, .btn { transition: transform 0.12s ease; }
  .btn:active, .panel-cols a:active, .doc-cards a:active { transform: scale(0.97); }
  .item-media:hover img, .item-media:hover .cover-img { transform: none; }
  .footer-nav, .foot-elsewhere { gap: 0; }
  .footer-nav a, .foot-elsewhere a { display: flex; align-items: center; min-height: 2.75rem; }
  .contact-list a, .facts a { display: inline-flex; align-items: center; min-height: 2.75rem; }

  /* Tighter type and rhythm */
  .shelf { margin-top: 0.4rem; }
  .shelf-head { padding: 1.1rem 0 0.2rem; border-bottom: 0; }
  .shelf-head h2 { font-size: 0.95rem; letter-spacing: 0.01em; }
  .shelf-head p { font-size: 0.85rem; color: var(--cream-3); }
  .light .shelf-head p { color: var(--ink-3); }
  .item-title { font-size: 1.32rem; line-height: 1.12; }
  .item-dek { font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .item-byline { margin-top: 0.55rem; }
  .cover-n { font-size: 3rem; }

  /* Smaller hero */
  .hero { margin-top: 0.75rem; min-height: 0; border-radius: 0.9rem; overflow: hidden; }
  .hero-art { min-height: 6.5rem; }
  .hero-copy { padding: 1.1rem 1.1rem 1.2rem; }
  .hero h1 { margin-top: 0.4rem; font-size: 1.95rem; }
  .hero .lede { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.5; }
  .hero .actions { gap: 0.5rem; margin-top: 1rem; }
  .hero .actions .btn { flex: 1 1 0; font-size: 0.875rem; padding: 0 0.6rem; }
  .hero .actions .btn:nth-child(3) { display: none; }

  /* Large left-aligned titles on inner pages, as in native apps */
  .page-head { width: calc(100% - 2rem); margin-top: 1.1rem; text-align: left; }
  .page-head h1 { margin-top: 0.35rem; font-size: 2.15rem; line-height: 1.02; }
  .page-head .lede { margin-top: 0.6rem; font-size: 1rem; }
  .page-head .actions { justify-content: flex-start; }

  /* Horizontal carousels with scroll snap */
  :is(.grid-4, .grid-3, .grid-2, .products-3).carousel {
    display: flex; gap: 0.85rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: -1rem; padding: 0.8rem 1rem 0.6rem;
  }
  .carousel::-webkit-scrollbar { display: none; }
  :is(.grid-4, .grid-3, .grid-2, .products-3).carousel > * {
    flex: 0 0 min(78%, 19rem); scroll-snap-align: start; padding-bottom: 0.2rem; margin: 0; border: 0;
  }
  :is(.grid-4, .grid-3, .grid-2, .products-3).carousel > *::before { display: none; }
  .carousel .item-media { aspect-ratio: 4 / 3; margin-bottom: 0.75rem; border-radius: 0.6rem; }
  .carousel .item-title { font-size: 1.25rem; }
  .carousel .item-dek { -webkit-line-clamp: 2; }
  .carousel .pcard { flex-basis: min(80%, 19rem); }
  .carousel .pcard-media { aspect-ratio: 16 / 10; }
  .carousel .pcard-quiet { padding-top: 0.6rem; }
  .carousel.cards-num > * { padding: 1rem; border-radius: 0.8rem; background: var(--night-2); }
  .carousel .show-card .btn { margin-top: 0.8rem; }

  /* Lead: a compact feature, then dense list rows */
  .lead { margin-top: 0.6rem; }
  .lead > * { padding-block: 0.6rem; }
  .lead-center { padding-bottom: 1rem; text-align: left; }
  .lead-center .item-byline { justify-content: flex-start; }
  .lead-center .item-dek { margin-inline: 0; }
  .lead-center .item-media { aspect-ratio: 16 / 9; margin-bottom: 0.8rem; border-radius: 0.7rem; }
  .lead-center .cover-n { font-size: 4.2rem; }
  .lead-center .cover-c { font-size: 0.78rem; }
  .feature-title { font-size: 1.6rem; }
  .lead-center .item-dek { font-size: 0.98rem; -webkit-line-clamp: 3; }
  .lead-left { gap: 0; padding-top: 0.4rem; border-bottom: 0; }
  .lead-left .item, .rail .item, .stream .item {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.85rem; align-items: start;
    padding: 0.8rem 0; border-top: 1px dotted var(--dots); border-bottom: 0;
  }
  .lead-left .item:first-child, .rail .item:first-child { border-top: 0; }
  .lead-left .item-media, .rail .item-media, .stream .item-media { aspect-ratio: 1; margin: 0; border-radius: 0.55rem; }
  .lead-left .cover, .rail .cover, .stream .cover { padding: 0.35rem; }
  .lead-left .cover-k, .rail .cover-k, .stream .cover-k { display: none; }
  .lead-left .cover-n, .rail .cover-n, .stream .cover-n { margin: 0; font-size: 1.55rem; }
  .lead-left .item-title, .rail .item-title, .stream .item-title { font-size: 1.15rem; line-height: 1.15; }
  .lead-left .item-meta, .stream .item-meta { margin-bottom: 0.25rem; font-size: 0.65rem; }
  .lead-left .item-byline, .rail .item-byline, .stream .item-byline { margin-top: 0.35rem; font-size: 0.66rem; }
  .lead-left .av, .stream .av { width: 1.15rem; height: 1.15rem; }
  .lead-right { padding-top: 0.2rem; }
  .rail .item:nth-child(n + 4) { display: none; }
  .rail-head { margin: 0.4rem 0 0.2rem; font-size: 0.95rem; }
  .stream { padding-top: 0.2rem; }
  .stream .item-dek { margin-top: 0.3rem; font-size: 0.88rem; -webkit-line-clamp: 2; }
  .stream .item-receipts { margin-top: 0; font-size: 0.8rem; }
  .light .lead-left .item, .light .rail .item, .light .stream .item { border-top-color: var(--dots-ink); }

  /* Feature rows, panels and bands, condensed */
  .feature, .split { padding: 1.3rem 0; gap: 1rem; }
  .feature-media { aspect-ratio: 16 / 9; border-radius: 0.8rem; }
  .feature h2, .split h2, .form-intro h2 { font-size: 1.75rem; }
  .feature .tagline { font-size: 1.05rem; }
  #weekly-claw > div:first-child { display: contents; }
  #weekly-claw > div:first-child > .facts { order: 3; margin-top: 0 !important; }
  .prose { font-size: 1rem; }
  .panel { margin-top: 1rem; padding: 1.8rem 1.1rem 1.4rem; border-radius: 0.9rem; }
  .panel h2 { font-size: 2rem; }
  .panel-art { margin-top: 0.8rem; }
  .panel-cols a, .panel-cols > div { padding-bottom: 0.4rem; }
  .cta-band { margin-top: 1.6rem; padding: 1.5rem 1.2rem; border-radius: 0.9rem; }
  .cta-band h2 { font-size: 1.7rem; }
  .cta-band p { font-size: 1rem; }
  .gates li, .flow li { padding: 0.75rem; }
  .numbered li { font-size: 1.1rem; }
  .article { margin-top: 1.4rem; }
  .article h1 { font-size: 2.1rem; }
  .article .dek { font-size: 1.2rem; }
  .article-body { font-size: 1.1rem; }

  /* Footer, condensed above the tab bar */
  .site-footer { margin-top: 1.8rem; }
  .foot-grid { padding: 2rem 0 1.4rem; gap: 1.6rem 1rem; }
  .site-footer .wordmark { font-size: 1.8rem; }
  .foot-title { font-size: 2rem; }
  .footer-meta { padding-bottom: 1.6rem; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .site-header, .tab, .item, .pcard, .btn { transition: none; }
  .nav-hidden .site-header { transform: none; }
  .tab:active, .item:active, .pcard:active, .btn:active, .panel-cols a:active, .doc-cards a:active { transform: none; opacity: 0.75; }
}

/* Motion. Progressive enhancement: every page reads in full without it. Load entrances and hover
   states are CSS; scroll-linked effects use scroll-driven animations where the browser has them;
   reveals, count-ups and the ticker loop need assets/app.js, which adds .motion only when the
   reader has not asked for reduced motion. Animations use opacity and the individual transform
   properties (translate, scale, rotate) so they never move layout. */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1); }

/* Latest ticker */
.ticker { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.25rem; padding: 0.75rem 0; border-block: 1px dotted var(--dots); }
.ticker-label { display: inline-flex; flex: none; align-items: center; gap: 0.5rem; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.ticker-label::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255, 231, 168, 0.5); }
.ticker-viewport { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent); }
.ticker-viewport::-webkit-scrollbar { display: none; }
.ticker-track { display: flex; width: max-content; }
.tick { display: inline-flex; align-items: baseline; gap: 0.55rem; padding-right: 2.6rem; white-space: nowrap; font: 400 1.02rem/1.3 var(--serif); color: var(--cream-2); transition: color 0.25s ease; }
.tick:hover { color: var(--cream); }
.tick-k { font: 600 0.64rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-3); }
.is-looping .ticker-viewport { overflow: hidden; }
.cover-n { font-variant-numeric: tabular-nums; }

/* Micro-interactions */
.btn { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-out); }
.btn:active { transform: scale(0.97); }
.i-arrow { transition: translate 0.4s var(--ease-out); }
a:hover > .i-arrow, a:focus-visible > .i-arrow, a:hover > h3 > .i-arrow, .btn:hover > .i-arrow { translate: 0.2em 0; }
a:hover > .i-out, a:focus-visible > .i-out, .btn:hover > .i-out { translate: 0.15em -0.15em; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pcard { transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); }
  .pcard:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, 0.8); }
  .pcard-media img, .feature-media img, .item-media img, .cover { transition: transform 0.9s var(--ease-out); }
  .pcard:hover .pcard-media img, .feature:hover .feature-media img { transform: scale(1.04); }
  .item:hover .item-media img, .item:hover .cover-img, .lead-center:hover .item-media img { transform: scale(1.045); }
  .item-title a, .feature-title a { text-decoration: underline 1px transparent; text-underline-offset: 0.12em; transition: text-decoration-color 0.3s ease; }
  .item:hover .item-title a, .lead-center:hover .feature-title a { text-decoration-color: currentColor; }
  .panel-cols a h3 { text-decoration: underline 1px transparent; text-underline-offset: 0.2em; transition: text-decoration-color 0.3s ease; }
  .panel-cols a:hover h3 { text-decoration-color: currentColor; }
  .wordmark img { transition: transform 1s var(--ease-spring); }
  .wordmark:hover img { transform: rotate(45deg); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Load: the headline rises in word by word, the art settles, the star turns in and then twinkles */
  .hero h1 .hw { display: inline-block; animation: rise-in 1s var(--ease-out) backwards; }
  .hero h1 .hw:nth-child(2) { animation-delay: 0.07s; }
  .hero h1 .hw:nth-child(3) { animation-delay: 0.14s; }
  .hero h1 .hw:nth-child(4) { animation-delay: 0.21s; }
  .hero h1 .hw:nth-child(5) { animation-delay: 0.28s; }
  .hero h1 .hw:nth-child(6) { animation-delay: 0.35s; }
  .hero h1 .hw:nth-child(n + 7) { animation-delay: 0.42s; }
  .hero .kicker { animation: fade-in 0.8s ease backwards; }
  .hero .lede { animation: rise-in 1s var(--ease-out) 0.4s backwards; }
  .hero .actions { animation: rise-in 1s var(--ease-out) 0.55s backwards; }
  .hero-art::after { inset: -7% 0; animation: art-settle 2.4s var(--ease-out) backwards; }
  .hero-art::before { transform-origin: 70% 30%; animation: orbit-sway 24s ease-in-out infinite alternate; }
  .ticker { animation: fade-in 0.9s ease 0.6s backwards; }
  .ticker-label::before { animation: pulse 2.6s ease-out infinite; }
  .lead > * { animation: rise-in 1.1s var(--ease-out) backwards; }
  .lead-left { animation-delay: 0.45s; }
  .lead-center { animation-delay: 0.55s; }
  .lead-right { animation-delay: 0.65s; }
  .wordmark img { animation: star-in 1.5s var(--ease-out) backwards, twinkle 9s ease-in-out 2.5s infinite; }

  @keyframes rise-in { from { opacity: 0; translate: 0 0.6em; } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes art-settle { from { opacity: 0.35; scale: 1.1; } }
  @keyframes orbit-sway { from { rotate: -1.6deg; scale: 1.02; } to { rotate: 1.6deg; scale: 1.07; } }
  @keyframes star-in { from { opacity: 0; rotate: -135deg; scale: 0.45; } }
  @keyframes twinkle { 0%, 86%, 100% { rotate: 0deg; scale: 1; filter: none; } 92% { rotate: 30deg; scale: 1.14; filter: drop-shadow(0 0 0.18em rgba(255, 231, 168, 0.75)); } }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 231, 168, 0.5); } 70%, 100% { box-shadow: 0 0 0 0.5rem rgba(255, 231, 168, 0); } }

  /* Scroll reveals (assets/app.js): content below the fold rises in, staggered per batch */
  .motion .rv { opacity: 0; translate: 0 1.6rem; transition: opacity 0.8s var(--ease-out), translate 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 85ms); }
  .motion .rv.in { opacity: 1; translate: none; }

  /* Ticker loop: app.js duplicates the items, so a half-width shift is seamless */
  .motion .is-looping .ticker-track { animation: ticker var(--ticker-dur, 60s) linear infinite; }
  .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
  @keyframes ticker { to { translate: -50% 0; } }

  /* Page transitions between pages of the site */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.18s ease both vt-out; }
  ::view-transition-new(root) { animation: 0.42s var(--ease-out) both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; translate: 0 0.6rem; } }

  @supports (animation-timeline: view()) {
    /* Hero art drifts slower than the page as it scrolls away */
    .hero-art { view-timeline: --hero-art; }
    .hero-art::after { animation: art-settle 2.4s var(--ease-out) backwards, art-drift linear both; animation-timeline: auto, --hero-art; animation-range: normal, exit 0% exit 100%; }
    @keyframes art-drift { to { translate: 0 7%; } }

    /* The lead image eases out of a slight zoom as it crosses the screen */
    .lead-center .item-media img { animation: lead-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    @keyframes lead-zoom { from { scale: 1.1; } }
  }
}

/* "With the receipts": a pinned storytelling panel on large screens. The stage stays in view while
   the art opens up, the underline draws and the three columns arrive in turn. It needs .motion, so
   without JavaScript the panel is static, and the height cap keeps tall render viewports static too. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1081px) and (min-height: 700px) and (max-height: 1400px) {
  @supports (animation-timeline: view()) {
    .motion .panel-story { height: 185vh; padding: 0; overflow: clip; view-timeline: --story; }
    .motion .panel-story .panel-stage { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding: 2.5rem 2rem; }
    .motion .panel-story .panel-art { width: min(54rem, calc((100vh - 23rem) * 2.06)); animation: story-art linear both; animation-timeline: --story; animation-range: contain 0% contain 42%; }
    .motion .panel-story h2 em { background: linear-gradient(currentColor, currentColor) 0 92% / 0% 2px no-repeat; animation: story-line linear both; animation-timeline: --story; animation-range: contain 18% contain 46%; }
    .motion .panel-story .panel-cols > a { animation: story-col linear both; animation-timeline: --story; }
    .motion .panel-story .panel-cols > a:nth-child(1) { animation-range: contain 34% contain 56%; }
    .motion .panel-story .panel-cols > a:nth-child(2) { animation-range: contain 44% contain 66%; }
    .motion .panel-story .panel-cols > a:nth-child(3) { animation-range: contain 54% contain 76%; }
    @keyframes story-art { from { opacity: 0.4; scale: 1.16; clip-path: inset(10% 16% round 1.2rem); } to { opacity: 1; scale: 1; clip-path: inset(0 round 0.2rem); } }
    @keyframes story-line { to { background-size: 100% 2px; } }
    @keyframes story-col { from { opacity: 0; translate: 0 2.6rem; } }
  }
}

/* Phones: carousels bring the card in focus forward; the More sheet springs up; tabs pop */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .tab-more[open] .sheet { animation: sheet-rise 0.48s var(--ease-out); }
  .tab-more[open] .sheet > * { animation: rise-in 0.55s var(--ease-out) backwards; }
  .tab-more[open] .sheet > :nth-child(2) { animation-delay: 0.04s; }
  .tab-more[open] .sheet > :nth-child(3) { animation-delay: 0.08s; }
  .tab-more[open] .sheet > :nth-child(4) { animation-delay: 0.12s; }
  .tab-more[open] .sheet > :nth-child(n + 5) { animation-delay: 0.16s; }
  .tab-more[open] > summary::before { animation: fade-in 0.3s ease; }
  .tab svg { transition: scale 0.4s var(--ease-spring); }
  .tab:active svg { scale: 0.82; }
  .tab[aria-current="page"] svg { animation: tab-pop 0.6s var(--ease-spring) 0.15s backwards; }
  @keyframes sheet-rise { from { opacity: 0; translate: 0 1.8rem; scale: 0.97; } }
  @keyframes tab-pop { from { scale: 0.7; } }
  .ticker { margin-top: 0.9rem; padding: 0.55rem 0; }
  .tick { font-size: 0.95rem; padding-right: 2rem; }

  @supports (animation-timeline: view()) {
    .carousel > * { animation: carousel-focus linear both; animation-timeline: view(inline); }
    @keyframes carousel-focus { 0% { scale: 0.93; filter: brightness(0.72); } 22%, 78% { scale: 1; filter: none; } 100% { scale: 0.93; filter: brightness(0.72); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .ticker-viewport { -webkit-mask-image: none; mask-image: none; }
}