/* outangle.com, direction B "The Layout Test". Light ground, one warm-black band.
   Values match brand/tokens.css. Colours that change with the page tone are registered with @property so
   the whole page can turn warm black and back in 600 ms without a repaint storm of class swaps. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif-Italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/InstrumentSans-latin.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/GeistMono-Regular-latin.woff2") format("woff2"); }

@property --bg { syntax: "<color>"; inherits: true; initial-value: #F4EFE6; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #17110D; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #625A52; }
@property --rule { syntax: "<color>"; inherits: true; initial-value: rgba(23, 17, 13, .14); }
@property --shade { syntax: "<color>"; inherits: true; initial-value: #E8E0D3; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #8A5A12; }

:root {
  --paper: #F4EFE6; --paper-shade: #E8E0D3; --ink-0: #17110D; --muted-0: #625A52; --gold-ink: #8A5A12;
  --warm-black: #140A07; --cream: #F1E9DC;
  --gold: #F2B33D; --tungsten: #B48347; --oxblood: #74161B; --oxblood-deep: #5A0214; --cobalt: #2454CC; --cobalt-deep: #1A439F;

  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --nav: 64px;
  --m: 48px;                       /* page margin */
  --g: 24px;                       /* gutter */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 0 0 0 1.7 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --bg: #F4EFE6; --ink: #17110D; --muted: #625A52; --rule: rgba(23, 17, 13, .14); --shade: #E8E0D3; --accent: #8A5A12;
  transition: --bg .6s var(--ease-io), --ink .6s var(--ease-io), --muted .6s var(--ease-io), --rule .6s var(--ease-io), --shade .6s var(--ease-io), --accent .6s var(--ease-io);
}
html[data-tone="night"] {
  --bg: #140A07; --ink: #F1E9DC; --muted: #B8AB9B; --rule: rgba(241, 233, 220, .16); --shade: #24160F; --accent: #E3AE58;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font: 400 17px/1.55 var(--sans); background: var(--bg); color: var(--ink); overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
::selection { background: #F2B33D; color: #17110D; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--m); }
.kicker { font: 500 13px/1.3 var(--sans); letter-spacing: .01em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.h2 { font: 400 clamp(44px, 5.6vw, 84px)/.96 var(--serif); letter-spacing: -.02em; }
.dg { color: var(--accent); text-decoration: none; font-family: var(--serif); font-size: 1.05em; margin-left: .12em; }
.dg:hover { text-decoration: underline; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; height: var(--nav); background: var(--bg); transition: background-color .6s var(--ease-io); }
html[data-tone="night"] .nav { background: linear-gradient(to bottom, rgba(20, 10, 7, .94) 30%, rgba(20, 10, 7, 0)); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 26px; height: 26px; }
.brand-wm { width: 104px; height: 38px; margin-top: 2px; }

/* The mark signs itself in once on load: the wedges open from the core, then the slits fork each arm. */
.mk-w, .mk-s { transform-box: view-box; }
.mk-w { transform-origin: 50px 50px; }
.mk-s { transform-origin: 50px -20px; }
html.motion .mk-w { animation: mk-w .28s cubic-bezier(.2, .8, .2, 1) both; }
html.motion .mk-s { animation: mk-s .22s cubic-bezier(.2, .8, .2, 1) .26s both; }
@keyframes mk-w { from { transform: scale(0); } }
@keyframes mk-s { from { transform: scaleY(0); } }
html.motion .brand-wm { animation: fade-in .5s ease .2s both; }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- The one CTA: near-black with separate oxblood, cobalt and gold lights. They never overlap, so no purple. */
.cta {
  --h: 40px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; height: var(--h);
  padding: 0 16px 0 18px; border-radius: 10px; overflow: hidden; text-decoration: none;
  font: 600 14.5px/1 var(--sans); letter-spacing: .005em; color: #F6EEE2;
  background:
    radial-gradient(56% 120% at 30% 64%, #7E1A1F 0%, rgba(116, 22, 27, .9) 30%, rgba(90, 2, 20, .45) 58%, rgba(90, 2, 20, 0) 86%),
    radial-gradient(30% 100% at 106% 22%, #2454CC 0%, rgba(26, 67, 159, .7) 38%, rgba(26, 67, 159, 0) 84%),
    radial-gradient(26% 60% at 84% 128%, rgba(242, 179, 61, .9) 0%, rgba(180, 131, 71, .35) 48%, rgba(180, 131, 71, 0) 92%),
    #0D0807;
  background-size: 100% 100%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 24px -14px rgba(20, 10, 7, .55);
  transition: transform .26s var(--ease), opacity .3s ease, box-shadow .26s ease, visibility .3s;
}
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-light); background-size: 180px; opacity: .2; pointer-events: none; }
.cta .cta-l { position: relative; }
.cta-a { width: 12px; height: 12px; transition: transform .26s var(--ease); }
.cta:hover .cta-a { transform: translate(2px, -2px); }
.cta:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 30px -14px rgba(20, 10, 7, .7); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline-color: var(--ink); }
.nav.cta-docked #cta-nav { opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; }

/* ---------- 1. Hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--nav)); overflow-x: clip; overflow-y: visible; }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); min-height: calc(100svh - var(--nav)); align-content: start; }
.h1 {
  grid-column: 1 / 8; grid-row: 1; align-self: start; margin-top: calc(20vh - var(--nav));
  font: 400 clamp(56px, 9vw, 136px)/.92 var(--serif); letter-spacing: -.02em; color: var(--ink);
  transform-origin: 0 0; position: relative; z-index: 3;
}
.ln { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: block; }
html.motion .h1 .ln > span { transform: translateY(108%); }
html.motion.h1-in .h1 .ln > span { transform: none; transition: transform .8s var(--ease); }
html.motion.h1-in .h1 .ln:nth-child(2) > span { transition-delay: .09s; }
html.motion.h1-static .h1 .ln > span { transform: none; }

.hero-copy { grid-column: 1 / 7; grid-row: 2; margin-top: 40px; max-width: 34em; }
.lede { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 30em; }
.offer { margin-top: 18px; font: 500 13px/1.4 var(--sans); color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.offer::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero-ad { grid-column: 8 / 13; grid-row: 1 / span 3; justify-self: end; align-self: start; margin-top: 88px; margin-right: 40px; position: relative; width: 392px; }
.mat-wrap { position: relative; isolation: isolate; }
.mat { position: relative; z-index: 1; background: var(--paper-shade); padding: 16px; }
.mat .ad { width: 100%; }
.leak { position: absolute; z-index: 0; left: -6.1%; top: -4.98%; width: 153.06%; max-width: none; height: auto; pointer-events: none; user-select: none; }
.tomb { position: absolute; z-index: 2; right: calc(100% + 28px); bottom: 2px; width: 236px; display: grid; gap: 8px; text-align: right; }
.tomb::after { content: ""; position: absolute; right: -28px; bottom: 7px; width: 18px; height: 1px; background: var(--ink); opacity: .5; }
.t-angle { font: italic 400 22px/1.15 var(--serif); }
.t-claim { font-size: 15px; line-height: 1.4; }
.t-code { font: 400 12px/1.5 var(--mono); color: var(--muted); letter-spacing: -.01em; display: grid; }

/* ---------- 2. The layout test ---------- */
.lt { position: relative; }
.lt-stage { display: none; }
.lt-sheet { padding-block: 120px 80px; }

html.motion .lt { height: 360svh; }
html.motion .lt-stage { display: block; position: sticky; top: var(--nav); height: calc(100svh - var(--nav)); overflow: clip; }
html.motion .lt-sheet { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }

.lt-grid {
  --fh: min(calc(100svh - var(--nav) - 290px), 560px);   /* frame height */
  height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
  grid-template-rows: auto 1fr auto; padding-top: clamp(20px, 4.5svh, 48px); padding-bottom: clamp(18px, 3.5svh, 36px);
}
.lt-head { grid-column: 1 / 6; grid-row: 1; }
.lt-title { margin-top: 14px; font: 400 clamp(40px, 4.3vw, 62px)/.92 var(--serif); letter-spacing: -.02em; }
.lt-title span { display: block; }

.lt-deck { margin-top: 18px; max-width: 25em; font-size: 16px; line-height: 1.5; color: var(--muted); }
.lt-read { grid-column: 1 / 6; grid-row: 2; align-self: end; margin-bottom: 52px; display: flex; flex-direction: column; gap: 28px; padding-bottom: 10px; }
.readout { display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 480px; }
.ro-row { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.ro-row dt { font: 500 12.5px/1.2 var(--sans); color: var(--muted); }
.ro-row dd { font: 400 13px/1.3 var(--mono); letter-spacing: -.01em; }
.ro-status { display: flex; align-items: center; }
.ro-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-right: 10px; flex: none; transition: background .4s ease, transform .4s var(--ease); }
.ro-status[data-claim="changed"] .dot { background: var(--accent); transform: scale(1.3); }
.ro-status[data-claim="changed"] { color: var(--accent); transition: color .4s ease; }

.roll { position: relative; display: grid; overflow: clip; }
.roll > span { grid-area: 1 / 1; display: block; }

.home { position: relative; min-height: 3.3em; font-size: clamp(34px, 3.3vw, 48px); max-width: 520px; }
.sentence { font: 400 1em/1.02 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.sentence .w { display: inline-block; transform-origin: 0 0; white-space: nowrap; }
.sentence .wi { display: inline-block; }
.lt-line { position: absolute; left: 0; top: 0; right: -40px; font: 400 .86em/1.04 var(--serif); letter-spacing: -.012em; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .7s var(--ease); pointer-events: none; }
.lt-line span:first-child { display: block; }
.lt-line span { text-wrap: balance; }
.lt-line span + span { display: block; color: var(--muted); }
.lt-line.on { opacity: 1; transform: none; transition-delay: .25s; }
#line-b span + span { color: var(--accent); }

.lt-frame { grid-column: 7 / 13; grid-row: 1 / 3; align-self: center; justify-self: center; display: grid; gap: 14px; }
.frame { position: relative; height: var(--fh); aspect-ratio: 4 / 5; background: var(--paper-shade); outline: 16px solid var(--paper-shade); margin: 16px; }
.layer { position: absolute; inset: 0; visibility: hidden; }
.layer.on { visibility: visible; }
.layer img { width: 100%; height: 100%; object-fit: cover; }
.wipe { position: absolute; top: -16px; bottom: -16px; left: 0; width: 1px; background: var(--ink); opacity: 0; z-index: 100001; pointer-events: none; }
.frame-cap { font: 400 12px/1.3 var(--mono); color: var(--muted); letter-spacing: -.01em; margin-inline: 16px; min-height: 1.3em; }

/* The two type-only layouts. They carry the same sentence, which flies in from the readout. */
.card { display: block; }
.card-c { background: #EFE7DA; color: #17110D; }
.card-d { background: #1D3A2F; color: #EFE6D6; }
.cc-top { position: absolute; left: 7%; right: 7%; top: 6%; display: flex; justify-content: space-between; font: 600 calc(var(--fh) * .024)/1 var(--sans); letter-spacing: .02em; }
.cc-top span + span { font: 400 calc(var(--fh) * .022)/1 var(--mono); opacity: .6; }
.cc-foot { position: absolute; left: 7%; right: 7%; bottom: 6%; display: grid; gap: .45em; font: 500 calc(var(--fh) * .026)/1.25 var(--sans); }
.cc-rule { display: block; height: 3px; width: 34%; background: #17110D; margin-bottom: .6em; }
.cc-foot span:last-child { opacity: .62; font-weight: 400; }
.cd-top { position: absolute; top: 9%; left: 0; right: 0; text-align: center; font: 500 calc(var(--fh) * .022)/1 var(--sans); letter-spacing: .16em; opacity: .8; }
.cd-foot { position: absolute; bottom: 8%; left: 10%; right: 10%; text-align: center; font: 400 calc(var(--fh) * .02)/1.3 var(--sans); letter-spacing: .02em; opacity: .7; }
.card-d::before { content: ""; position: absolute; inset: 4.5%; border: 1px solid rgba(239, 230, 214, .26); }

.slot { position: absolute; inset: 0; z-index: 100000; pointer-events: none; }
.slot .sentence { position: absolute; text-wrap: balance; }
.slot-c .sentence { left: 7%; right: 9%; top: 14%; font: 650 calc(var(--fh) * .098)/.98 var(--sans); letter-spacing: -.035em; color: #17110D; }
.slot-d .sentence { left: 11%; right: 11%; top: 50%; font: 400 calc(var(--fh) * .066)/1.06 var(--serif); letter-spacing: -.01em; text-align: center; color: #EFE6D6; transform: translateY(-50%); }

.lt-index { grid-column: 1 / 13; grid-row: 3; position: relative; display: grid; grid-template-columns: 4fr 3fr 1.3fr; column-gap: var(--g); padding-top: 14px; border-top: 1px solid var(--rule); }
.ix-label { font: 400 11.5px/1 var(--mono); color: var(--muted); margin-bottom: 10px; letter-spacing: -.01em; }
.ix-group ol { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.ix-group li { position: relative; display: flex; align-items: baseline; gap: 8px; padding-top: 10px; color: var(--muted); transition: color .35s ease; }
.ix-group li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.ix-group li b { font: 400 22px/1 var(--serif); color: inherit; }
.ix-group li span { font-size: 13px; }
.ix-group li.on { color: var(--ink); }
.ix-group li.on::before { transform: scaleX(1); }
.ix-group li.done::before { transform: scaleX(1); opacity: .22; }
.ix-progress { position: absolute; left: 0; right: 0; top: -1px; height: 1px; overflow: hidden; }
.ix-progress span { position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* H1 docking: the hero headline travels into the stage as its title (scroll-driven, compositor-synced). */
@supports (animation-timeline: scroll()) {
  html.motion.dock .h1 {
    animation: dock-t linear both, dock-s linear both, dock-o linear both;
    animation-timeline: scroll(root), scroll(root), scroll(root);
    animation-range: 0px var(--dock-end, 800px);
  }
  html.motion.dock .lt-title { animation: dock-show linear both; animation-timeline: scroll(root); animation-range: 0px var(--dock-end, 800px); }
  html.motion.dock .hero-copy { animation: copy-out linear both; animation-timeline: scroll(root); animation-range: 0px 150px; }
}
@keyframes dock-t { to { translate: var(--dx, 0) var(--dy, 0); } }
@keyframes dock-s { 0% { scale: 1; } 35% { scale: calc(1 - (1 - var(--ds, 1)) * .72); } 100% { scale: var(--ds, 1); } }
@keyframes dock-o { 0%, 99.4% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dock-show { 0%, 99.4% { opacity: 0; } 100% { opacity: 1; } }
@keyframes copy-out { to { opacity: 0; transform: translateY(-14px); } }

/* Specimen sheet (no motion / no JS) */
.sheet-title { margin-top: 16px; font: 400 clamp(40px, 5vw, 72px)/.96 var(--serif); letter-spacing: -.02em; }
.sheet { margin-top: 48px; border-top: 1px solid var(--ink); }
.sh-row { display: grid; grid-template-columns: 3fr 120px 6fr; gap: var(--g); align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.sh-label { font-size: 14px; color: var(--muted); display: grid; gap: 4px; }
.sh-label b { font: 400 28px/1 var(--serif); color: var(--ink); }
.sh-status { font: 400 12px/1.2 var(--mono); color: var(--ink); }
.sh-status.is-changed { color: var(--accent); }
.sh-ad { width: 120px; height: 150px; object-fit: cover; }
.sh-card { display: block; position: relative; overflow: hidden; }
.sh-card > span { position: absolute; left: 10%; right: 10%; }
.sh-card.card-c > span { top: 14%; font: 650 15px/.98 var(--sans); letter-spacing: -.035em; }
.sh-card.card-d > span { top: 50%; transform: translateY(-50%); text-align: center; font: 400 11px/1.1 var(--serif); }
.sh-card.card-d::before { inset: 6%; }
.sh-text { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; }
.sh-serif { font-family: var(--serif); letter-spacing: -.01em; }
.sh-sans { font-family: var(--sans); font-weight: 650; letter-spacing: -.035em; }
.sh-small { font-size: clamp(20px, 1.8vw, 28px); text-align: center; }
.sh-note { padding: 28px 0; border-bottom: 1px solid var(--rule); font: 400 clamp(24px, 2.4vw, 34px)/1.15 var(--serif); }
.sh-note b { font-weight: 400; color: var(--muted); margin-right: 12px; }

/* ---------- 3. The feed that stopped ---------- */
.feed { position: relative; padding-top: 12svh; }
.feed-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px; }
.feed-head .kicker { grid-column: 1 / 7; }
.feed-head .h2 { grid-column: 1 / 9; }
.feed-intro { grid-column: 1 / 6; font-size: 19px; line-height: 1.5; color: var(--muted); }

.feed-list { --adw: min(384px, calc((100svh - var(--nav) - 150px) * .8)); --adh: calc(var(--adw) * 1.25); margin-top: 6svh; }
.item { position: relative; height: calc(var(--adh) + 90px + 28svh); }
.item:last-child { height: calc(var(--adh) + 90px + 16svh); }
.item-in {
  position: sticky; top: calc(var(--nav) + (100svh - var(--nav) - var(--adh) - 40px) / 2);
  display: grid; grid-template-columns: 1fr var(--adw) 1fr; column-gap: clamp(32px, 4.4vw, 72px);
  width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--m); align-items: start;
}
.post { grid-column: 2; position: relative; }
.ad-wrap { position: relative; width: var(--adw); aspect-ratio: 4 / 5; background: var(--shade); }
.ad-wrap .ad { width: 100%; height: 100%; object-fit: cover; }
.veil { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
html.motion .item:not(.on) .veil { opacity: .55; }
.code { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font: 400 12px/1.3 var(--mono); letter-spacing: -.01em; color: var(--muted); }
.code span:first-child { color: var(--ink); }

.why { grid-column: 3; align-self: center; max-width: 360px; padding-left: 22px; border-left: 2px solid var(--accent); display: grid; gap: 14px; }
.why > div { display: grid; gap: 3px; }
.why dt { font: 500 12px/1.2 var(--sans); color: var(--muted); }
.why dd { font-size: 16.5px; line-height: 1.42; }
.why dd.ang { font: italic 400 clamp(26px, 2.2vw, 32px)/1.06 var(--serif); letter-spacing: -.005em; }
.why dd.src { font-size: 14px; color: var(--muted); }
.why .why-clock { display: none; }
html.motion .why { transition: border-color .4s ease; }
html.motion .item:not(.on) .why { border-color: transparent; }
html.motion .why > div { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .6s var(--ease); }
html.motion .item.on .why > div { opacity: 1; transform: none; }
html.motion .item.on .why > div:nth-child(2) { transition-delay: .06s; }
html.motion .item.on .why > div:nth-child(3) { transition-delay: .12s; }
html.motion .item.on .why > div:nth-child(4) { transition-delay: .18s; }
html.motion .item.on .why > div:nth-child(5) { transition-delay: .24s; }

/* 06:10, set beside the lock-screen ad at the height of the clock inside the ad. */
.item-left { grid-column: 1; position: relative; height: var(--adh); }
.clock { position: absolute; right: 0; top: calc(var(--adh) * .118); transform: translateY(-50%); display: flex; align-items: center;
  font: 400 clamp(96px, 10.6vw, 168px)/1 var(--serif); letter-spacing: -.035em; white-space: nowrap; color: var(--ink); }
.ck { display: inline-block; overflow: clip; padding-block: .06em; }
.ck > span { display: inline-block; }
.ck-c > span { transform: translateY(-.04em); }
.ck-line { position: absolute; left: calc(100% + 10px); top: 50%; width: clamp(32px, 4.4vw, 72px); height: 1px; background: var(--ink); transform-origin: 0 50%; }
html.motion .clock .ck > span { transform: translateY(110%); transition: transform .7s var(--ease); }
html.motion .clock .ck-line { transform: scaleX(0); transition: transform .6s var(--ease) .3s; }
html.motion .item.on .clock .ck > span { transform: none; }
html.motion .item.on .clock .ck-c > span { transform: translateY(-.04em); }
html.motion .item.on .clock .ck:nth-child(2) > span { transition-delay: .05s; }
html.motion .item.on .clock .ck:nth-child(3) > span { transition-delay: .1s; }
html.motion .item.on .clock .ck:nth-child(4) > span { transition-delay: .15s; }
html.motion .item.on .clock .ck:nth-child(5) > span { transition-delay: .2s; }
html.motion .item.on .clock .ck-line { transform: scaleX(1); }

/* The night band: one live canvas, lit from the bedside ad's lamp side. */
.night { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .38s ease-out; background: #140A07; }
html[data-tone="night"] .night { opacity: 1; transition-duration: .9s; }
main, .foot { position: relative; z-index: 1; }

/* ---------- 4. More work ---------- */
.work { padding-top: 16svh; }
.work-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px; }
.work-head .kicker { grid-column: 1 / 7; }
.work-head .h2 { grid-column: 1 / 10; }
.work-intro { grid-column: 1 / 7; font-size: 19px; line-height: 1.5; color: var(--muted); }
.three { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.three img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--shade); }
.three figcaption, .preview figcaption { margin-top: 14px; display: flex; gap: 14px; align-items: baseline; font: 400 clamp(20px, 1.7vw, 24px)/1.2 var(--serif); }
.n { font: 400 12px/1 var(--mono); color: var(--muted); letter-spacing: -.01em; flex: none; min-width: 2.2em; }

.index-wrap { margin-top: 96px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.index { grid-column: 1 / 8; border-top: 1px solid var(--ink); }
.index li { border-bottom: 1px solid var(--rule); }
.index button { width: 100%; display: flex; align-items: baseline; gap: 18px; padding: 20px 0 19px; position: relative; color: var(--muted); transition: color .25s ease, padding .35s var(--ease); }
.index button .hl { font: 400 clamp(24px, 2.4vw, 36px)/1.08 var(--serif); letter-spacing: -.01em; }
.index button::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.index button:hover, .index button:focus-visible, .index button[aria-pressed="true"] { color: var(--ink); padding-left: 14px; }
.index button[aria-pressed="true"]::after { transform: scaleX(1); }
.index button:focus-visible { outline-offset: -2px; }
.index-more { display: flex; align-items: baseline; gap: 18px; padding: 22px 0; color: var(--muted); }
.index-more .hl { font: 400 clamp(20px, 1.8vw, 26px)/1.1 var(--serif); }
.index-more .n { min-width: auto; }
.preview { grid-column: 9 / 13; position: sticky; top: calc(var(--nav) + 40px); }
.preview-mat { background: var(--paper-shade); padding: 16px; }
.preview-mat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #DDD3C4; }
.preview-mat img:not([src]) { visibility: hidden; }
.preview-mat:has(img:not([src])) { background: var(--paper-shade) linear-gradient(135deg, transparent 49.6%, rgba(23,17,13,.08) 50%, transparent 50.4%); }
.preview figcaption { font-size: 18px; color: var(--muted); }

/* ---------- 5. Signature ---------- */
.sig { padding-block: 16svh 12svh; }
.sig-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 18px; }
.sig .kicker { grid-column: 1 / 6; }
.sig-lines { grid-column: 1 / 10; font: 400 clamp(44px, 5.6vw, 84px)/1 var(--serif); letter-spacing: -.02em; }
.sig-lines span { display: block; }
.sig-lines span + span { color: var(--muted); }

/* ---------- 6. Close plate ---------- */
.close { padding: 24px; }
.plate {
  position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 48px); background: #140A07; color: #F1E9DC;
  display: flex; align-items: flex-end; view-timeline: --plate block;
}
.fog { position: absolute; inset: 0; z-index: -1; }
.fog::after { content: ""; position: absolute; inset: 0; background: var(--grain-light); background-size: 180px; opacity: .14; }
.fog::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(70% 62% at 26% 58%, rgba(20, 10, 7, .82) 0%, rgba(20, 10, 7, .55) 46%, rgba(20, 10, 7, 0) 78%); }
.fog i {
  position: absolute; bottom: -2%; width: var(--w, 18%); height: var(--h, 60%); left: var(--x, 0);
  background: radial-gradient(50% 100% at 50% 100%, rgba(126, 26, 31, .95) 0%, rgba(116, 22, 27, .7) 34%, rgba(90, 2, 20, .32) 64%, rgba(90, 2, 20, 0) 100%);
  transform-origin: 50% 100%; transform: scaleY(var(--s0, .42));
}
.fog i:nth-child(1) { --x: -6%; --w: 22%; --h: 62%; }
.fog i:nth-child(2) { --x: 9%; --w: 18%; --h: 44%; }
.fog i:nth-child(3) { --x: 22%; --w: 20%; --h: 78%; }
.fog i:nth-child(4) { --x: 38%; --w: 17%; --h: 52%; }
.fog i:nth-child(5) { --x: 52%; --w: 21%; --h: 88%; }
.fog i:nth-child(6) { --x: 68%; --w: 18%; --h: 60%; }
.fog i:nth-child(7) { --x: 82%; --w: 24%; --h: 74%; }
.fog .floor { position: absolute; left: 10%; right: 10%; bottom: -10%; height: 28%; background: radial-gradient(50% 50% at 50% 100%, rgba(180, 131, 71, .3) 0%, rgba(180, 131, 71, 0) 100%); }
.fog i { transition: transform 1.4s var(--ease); }
.plate.risen .fog i { transform: none; }
.plate.risen .fog i:nth-child(2) { transition-delay: .06s; } .plate.risen .fog i:nth-child(3) { transition-delay: .14s; }
.plate.risen .fog i:nth-child(4) { transition-delay: .1s; } .plate.risen .fog i:nth-child(5) { transition-delay: .2s; }
.plate.risen .fog i:nth-child(6) { transition-delay: .16s; } .plate.risen .fog i:nth-child(7) { transition-delay: .24s; }
@supports (animation-timeline: view()) {
  html.motion .fog i { transition: none; animation: fog-rise linear both; animation-timeline: --plate; animation-range: entry 0% contain 30%; }
  html.motion .fog i:nth-child(2) { animation-range: entry 6% contain 34%; } html.motion .fog i:nth-child(3) { animation-range: entry 14% contain 42%; }
  html.motion .fog i:nth-child(4) { animation-range: entry 10% contain 38%; } html.motion .fog i:nth-child(5) { animation-range: entry 18% contain 50%; }
  html.motion .fog i:nth-child(6) { animation-range: entry 12% contain 40%; } html.motion .fog i:nth-child(7) { animation-range: entry 20% contain 48%; }
}
@keyframes fog-rise { from { transform: scaleY(var(--s0, .42)); } to { transform: scaleY(1); } }

.plate-in { position: relative; z-index: 1; width: 100%; padding: clamp(40px, 7vw, 96px) clamp(24px, 6.6vw, 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.close-title { grid-column: 1 / 11; grid-row: 1; font: 400 clamp(48px, 7.4vw, 112px)/.94 var(--serif); letter-spacing: -.022em; }
.close-left { grid-column: 1 / 7; grid-row: 2; }
.close-sub { margin-top: 28px; font-size: 19px; line-height: 1.5; color: rgba(241, 233, 220, .8); max-width: 30em; }
.cta-close { margin-top: 32px; --h: 48px; padding: 0 20px 0 22px; font-size: 15.5px; }
.cta-close:focus-visible { outline-color: #F1E9DC; }
.reserved { grid-column: 8 / 13; grid-row: 2; align-self: end; }
.res-lead { font-size: 15px; line-height: 1.45; color: rgba(241, 233, 220, .78); text-wrap: balance; }
.res-rows { margin-top: 18px; border-top: 1px solid rgba(241, 233, 220, .3); }
.res-rows li { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgba(241, 233, 220, .14); font: 400 13px/1.3 var(--mono); letter-spacing: -.01em; }
.rn { color: rgba(241, 233, 220, .55); }
.rc { color: #F1E9DC; display: inline-flex; align-items: center; }
.rs { font-family: var(--sans); font-size: 13px; color: rgba(241, 233, 220, .6); }
.caret { display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; background: #F2B33D; opacity: .9; }
html.motion .caret { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
html.motion .close-title .ln > span { transform: translateY(108%); transition: transform .9s var(--ease); }
html.motion .close-title .ln:nth-child(2) > span { transition-delay: .1s; }
html.motion .plate.risen .close-title .ln > span { transform: none; }

/* ---------- Dagger footnote and footer ---------- */
.dagger { padding-block: 40px 0; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 1440px; }
.dg-mark { font-family: var(--serif); font-size: 18px; color: var(--accent); margin-right: 6px; }
.foot { padding-block: 64px 40px; }
.foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.foot-in::before { content: ""; grid-column: 1 / -1; height: 1px; background: var(--rule); margin-bottom: 32px; }
.foot-wm { grid-column: 1 / 4; width: 150px; height: 55px; color: var(--ink); }
.foot-line { grid-column: 4 / 8; font: italic 400 22px/1.2 var(--serif); color: var(--muted); }
.foot-meta { grid-column: 8 / 13; display: flex; justify-content: flex-end; gap: 28px; font-size: 13px; color: var(--muted); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --nav: 56px; --m: 16px; --g: 12px; }
  body { font-size: 16px; }
  .brand-mark { width: 22px; height: 22px; }
  .brand-wm { width: 88px; height: 32px; }
  .cta { --h: 36px; padding: 0 13px 0 14px; font-size: 13.5px; border-radius: 9px; }

  .hero-grid { display: block; min-height: 0; padding-bottom: 56px; }
  .h1 { margin-top: 9svh; font-size: clamp(52px, 17.4vw, 76px); }
  .hero-copy { margin-top: 24px; }
  .lede { font-size: 17px; }
  .hero-ad { width: calc(100% - 0px); max-width: 375px; margin: 40px 0 0; }
  .mat { padding: 10px; }
  .tomb { position: relative; right: auto; bottom: auto; width: auto; max-width: 320px; text-align: left; margin-top: 16px; gap: 6px; }
  .tomb::after { display: none; }
  .leak { left: -4%; top: -3.4%; width: 150%; }

  html.motion .lt { height: 300svh; }
  .lt-grid { --fh: min(calc(100svh - var(--nav) - 366px), 400px); display: flex; flex-direction: column; padding-top: 14px; padding-bottom: 12px; gap: 0; }
  .lt-head { order: 0; }
  .lt-title, .lt-deck { display: none; }
  .lt-frame { order: 1; margin-top: 10px; gap: 8px; }
  .frame { outline-width: 10px; margin: 10px; }
  .frame-cap { margin-inline: 10px; font-size: 11px; }
  .lt-read { order: 2; margin-top: 12px; gap: 12px; align-self: stretch; padding-bottom: 0; }
  .ro-row { grid-template-columns: 76px 1fr; padding: 7px 0; }
  .ro-row dd { font-size: 12px; }
  .home { font-size: 26px; min-height: 2.2em; }
  .lt-line { right: 0; }
  .lt-index { order: 3; margin-top: auto; grid-template-columns: 4fr 3fr 1fr; column-gap: 10px; padding-top: 8px; }
  .ix-label { font-size: 10px; margin-bottom: 6px; white-space: nowrap; }
  .ix-group ol { gap: 4px; }
  .ix-group li { padding-top: 6px; }
  .ix-group li b { font-size: 18px; }
  .ix-group li span { display: none; }
  .ix-end .ix-label { visibility: hidden; }

  .lt-sheet { padding-block: 72px 40px; }
  .sh-row { grid-template-columns: 88px 1fr; grid-template-areas: "ad label" "ad text"; row-gap: 6px; column-gap: 14px; align-items: start; }
  .sh-label { grid-area: label; }
  .sh-ad { grid-area: ad; width: 88px; height: 110px; }
  .sh-text { grid-area: text; font-size: 22px; }
  .sh-small { text-align: left; font-size: 19px; }

  .feed { padding-top: 14svh; }
  .feed-head .h2, .feed-head .kicker, .feed-intro { grid-column: 1 / -1; }
  .feed-intro { font-size: 17px; }
  .feed-list { --adw: min(72vw, calc((100svh - var(--nav) - 300px) * .8)); margin-top: 40px; }
  .item { height: calc(var(--adh) + 300px + 26svh); }
  .item:last-child { height: calc(var(--adh) + 300px + 10svh); }
  .item-in { top: calc(var(--nav) + 10px); display: flex; flex-direction: column; align-items: center; padding-inline: var(--m); }
  .item-left { display: none; }
  .post { width: var(--adw); }
  .code { font-size: 11px; margin-top: 8px; }
  .why { align-self: stretch; max-width: none; margin-top: 14px; height: 248px; overflow: hidden; align-content: start; gap: 9px; padding-left: 14px; }
  .why dd { font-size: 14.5px; line-height: 1.38; }
  .why dd.ang { font-size: 24px; }
  .why dd.src { font-size: 13px; }
  .why .why-clock { display: flex; align-items: baseline; gap: 10px; }
  .why .why-clock dd { font: 400 34px/1 var(--serif); letter-spacing: -.02em; }
  .why .why-clock + div { margin-top: -2px; }

  .work { padding-top: 16svh; }
  .work-head .kicker, .work-head .h2, .work-intro { grid-column: 1 / -1; }
  .work-intro { font-size: 17px; }
  .three { margin: 40px calc(var(--m) * -1) 0; padding-inline: var(--m); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); scrollbar-width: none; }
  .three::-webkit-scrollbar { display: none; }
  .three li { flex: 0 0 82%; scroll-snap-align: start; }
  .three figcaption { font-size: 19px; }
  .index-wrap { display: block; margin-top: 72px; }
  .index button { padding: 16px 0 15px; gap: 12px; }
  .index button .hl { font-size: 23px; }
  .index button[aria-pressed="true"] { padding-left: 0; }
  .index .preview { position: static; padding: 4px 0 20px; }
  .preview { position: static; }
  .index-wrap > .preview { display: none; }
  .preview figcaption { display: none; }

  .sig { padding-block: 14svh 12svh; }
  .sig-lines { grid-column: 1 / -1; font-size: 44px; }

  .close { padding: 8px; }
  .plate { min-height: calc(100svh - 16px); }
  .plate-in { display: flex; flex-direction: column; align-items: stretch; padding: 40px 20px 28px; }
  .close-title { font-size: 46px; }
  .close-sub { font-size: 16.5px; margin-top: 20px; }
  .cta-close { margin-top: 24px; width: 100%; justify-content: space-between; --h: 52px; padding: 0 20px; }
  .reserved { margin-top: 40px; }
  .res-rows li { grid-template-columns: 26px 1fr auto; font-size: 12px; }
  .fog i:nth-child(2), .fog i:nth-child(6) { display: none; }
  .fog::before { background: radial-gradient(120% 70% at 30% 50%, rgba(20, 10, 7, .84) 0%, rgba(20, 10, 7, .5) 55%, rgba(20, 10, 7, 0) 85%); }

  .dagger { font-size: 13px; padding-top: 28px; }
  .foot-in { display: grid; grid-template-columns: 1fr; row-gap: 14px; }
  .foot-wm, .foot-line, .foot-meta { grid-column: 1; }
  .foot-meta { justify-content: space-between; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root { --m: 32px; }
  .hero-ad { width: 330px; }
  .why dd { font-size: 15px; }
}

/* ---------- Reduced motion: the authored static layout is the finished state. ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .night { transition: none; }
  .item, .item:last-child { height: auto; padding-block: 56px; }
  .item-in { position: relative; top: auto; }
  .fog i { transform: none; transition: none; }
  .close-title .ln > span { transform: none !important; }
  .cta, .cta-a, .index button, .index button::after { transition: none; }
}