/* ==========================================================================
   SOX NEWS v2  ·  "The Paper"
   Ink navy, warm bone, antique gold. Newsreader for the argument,
   Instrument Serif for display moments, Cabinet Grotesk for the furniture,
   JetBrains Mono for the numbers. Day edition on bone, night edition on ink.
   ========================================================================== */

:root {
  --ink: #0f1a2e;
  --ink-2: #15223b;
  --ink-3: #1d2d4c;
  --bone: #f5f1e8;
  --bone-2: #ede6d7;
  --bone-3: #e2d8c3;
  --paper: #fbf8f1;
  --gold: #c89b4a;
  --gold-deep: #8a672a;
  --gold-soft: #e2c387;
  --up: #2f7a55;
  --down: #b0413e;

  --f-display: 'Instrument Serif', 'Newsreader', Georgia, serif;
  --f-head: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-ui: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --container: 1320px;
  --gutter: clamp(18px, 3.2vw, 40px);
  --gap: clamp(20px, 2.4vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="day"] {
  --bg: var(--bone);
  --bg-2: var(--bone-2);
  --bg-3: #e9e1cf;
  --surface: var(--paper);
  --text: #121a2c;
  --muted: #586071;
  --faint: #878c98;
  --rule: rgba(18, 26, 44, .13);
  --rule-2: rgba(18, 26, 44, .3);
  --strong: #121a2c;
  --accent: var(--gold-deep);
  --accent-2: var(--gold);
  --life: #efe5d2;
  --band: var(--ink);
  --band-2: var(--ink-2);
  color-scheme: light;
}

[data-theme="night"] {
  --bg: #0b1424;
  --bg-2: #0f1b30;
  --bg-3: #13213a;
  --surface: #121f37;
  --text: #ebe5d8;
  --muted: #b6bfcf;
  --faint: #8d97ab;
  --rule: rgba(235, 229, 216, .11);
  --rule-2: rgba(235, 229, 216, .26);
  --strong: #f3eee3;
  --accent: var(--gold);
  --accent-2: var(--gold-soft);
  --life: #14203a;
  --band: #070e1b;
  --band-2: #0c1628;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--ink); }

.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--gold); color: var(--ink); padding: 10px 14px; z-index: 100; font: 700 13px var(--f-ui); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Furniture type ---------- */
.ui { font-family: var(--f-ui); }
.caps { font-family: var(--f-ui); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }
.kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 700 11px/1.2 var(--f-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.kick .ed { color: var(--accent); }
.kick .dot { width: 3px; height: 3px; background: currentColor; opacity: .5; border-radius: 50%; }
.tag { display: inline-block; border: 1px solid var(--rule-2); padding: 3px 6px 2px; font: 700 9.5px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.meta { font: 500 12.5px/1.3 var(--f-ui); letter-spacing: .02em; color: var(--faint); }
.meta b { color: var(--muted); font-weight: 700; }

.hd { font-family: var(--f-head); font-weight: 600; letter-spacing: -.012em; line-height: 1.12; text-wrap: balance; margin: 0; }
.hd a { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size .5s var(--ease); }
a:hover .hd, .hd a:hover, .card:hover .hd { color: var(--strong); }
.card:hover .hd a, .hd a:hover { background-size: 100% 1px; }
.sf { font-family: var(--f-body); color: var(--muted); text-wrap: pretty; margin: 0; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--strong); padding-top: 12px; margin-bottom: 26px; }
.section-head h2 { font: 400 clamp(26px, 2.4vw, 34px)/1 var(--f-display); margin: 0; letter-spacing: -.005em; }
.section-head h2 em { font-style: italic; color: var(--accent); }
.section-head .more { font: 700 11px var(--f-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.section-head .more:hover { color: var(--accent); }

/* ---------- Media ---------- */
.media { position: relative; overflow: hidden; background: var(--bg-3); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s var(--ease); }
.card:hover .media img, .media a:hover img { transform: scale(1.035); }
.r-16-9 { aspect-ratio: 16 / 9; } .r-3-2 { aspect-ratio: 3 / 2; } .r-4-3 { aspect-ratio: 4 / 3; }
.r-5-4 { aspect-ratio: 5 / 4; } .r-1-1 { aspect-ratio: 1; } .r-4-5 { aspect-ratio: 4 / 5; } .r-21-9 { aspect-ratio: 21 / 9; }
.media.legacy img { filter: grayscale(1) contrast(1.08) brightness(.92); mix-blend-mode: multiply; }
.media.legacy { background: #d8c9a6; }
[data-theme="night"] .media.legacy { background: #2a3a5c; }
[data-theme="night"] .media.legacy img { mix-blend-mode: luminosity; filter: grayscale(1) contrast(1.1) brightness(.85); }
.cap { font: 500 12.5px/1.45 var(--f-ui); color: var(--muted); margin-top: 10px; display: flex; gap: 10px; justify-content: space-between; }
.cap .credit { color: var(--faint); white-space: nowrap; }
.tile { display: grid; place-items: end start; padding: 18px; background: var(--ink); color: var(--bone); }
.tile .glyph { font: 400 clamp(54px, 6vw, 88px)/.9 var(--f-display); color: var(--gold); }
.tile .tlabel { font: 700 10.5px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 241, 232, .6); }

/* ==========================================================================
   Masthead
   ========================================================================== */
.ub { background: var(--band); color: rgba(245, 241, 232, .74); font: 500 11px/1 var(--f-mono); }
.ub .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 36px; }
.clocks { display: flex; gap: 18px; white-space: nowrap; overflow: hidden; }
.clocks span b { color: var(--bone); font-weight: 600; margin-left: 6px; }
.clocks .frozen::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--gold); vertical-align: 1px; }
.clocks .live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(200, 155, 74, .6); animation: pulse 2.4s infinite; vertical-align: 1px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 155, 74, .55); } 70% { box-shadow: 0 0 0 7px rgba(200, 155, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 155, 74, 0); } }
.ub-right { display: flex; align-items: center; gap: 14px; }
.edsw { display: flex; border: 1px solid rgba(245, 241, 232, .22); }
.edsw button { background: none; border: 0; padding: 6px 10px 5px; font: 700 10.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 241, 232, .7); cursor: pointer; }
.edsw button + button { border-left: 1px solid rgba(245, 241, 232, .22); }
.edsw button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
.edsw button:hover:not([aria-pressed="true"]) { color: var(--bone); }
.themebtn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: none; border: 0; cursor: pointer; font: 700 10.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 241, 232, .78); padding: 0; }
.themebtn svg { width: 14px; height: 14px; }
.themebtn:hover { color: var(--gold-soft); }
.ub .brief-link { font: 700 10.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(200, 155, 74, .5); padding-bottom: 2px; }

.np { border-bottom: 1px solid var(--rule); }
.np .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 14px; }
.np-meta { font: 700 10.5px/1.7 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.np-meta .issue { color: var(--accent); }
.brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wordmark { display: inline-flex; align-items: center; gap: 16px; color: var(--strong); }
.wordmark .seal { width: 54px; height: 54px; flex: none; }
.wordmark .wm { font-family: var(--f-ui); font-size: clamp(34px, 4.1vw, 56px); line-height: 1; letter-spacing: .17em; margin-right: -.17em; white-space: nowrap; }
.wordmark .wm b { font-weight: 800; }
.wordmark .wm span { font-weight: 400; }
.tagline { font: italic 400 clamp(15px, 1.35vw, 19px)/1.2 var(--f-display); color: var(--muted); margin: 0; letter-spacing: .005em; }
.np-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; font: 700 10.5px var(--f-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.np-actions a:hover { color: var(--accent); }
.np-actions .weekly { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.6; }
.np-actions .weekly em { font: italic 400 15px/1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--text); }

.nav { position: relative; border-bottom: 1px solid var(--rule); background: var(--bg); }
.nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-top: 1px solid var(--strong); border-bottom: 1px solid var(--strong); }
.nav .wrap { display: flex; justify-content: center; gap: clamp(14px, 2vw, 30px); padding-top: 4px; overflow-x: auto; scrollbar-width: none; }
.nav .wrap::-webkit-scrollbar { display: none; }
.nav a { position: relative; flex: none; padding: 14px 0 13px; font: 700 11.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a.nav-life { color: var(--accent); }

.mk { border-bottom: 1px solid var(--rule); background: var(--bg); }
.mk .wrap { display: flex; align-items: center; gap: 16px; height: 40px; overflow-x: auto; scrollbar-width: none; }
.mk .wrap.overflowing { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); }
.mk .wrap::-webkit-scrollbar { display: none; }
.q { display: inline-flex; align-items: baseline; gap: 7px; flex: none; font: 500 11.5px/1 var(--f-mono); color: var(--text); }
.q .n { font: 700 9.5px/1 var(--f-ui); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.q .c.up { color: var(--up); } .q .c.dn { color: var(--down); }
[data-theme="night"] .q .c.up { color: #5fbf8e; } [data-theme="night"] .q .c.dn { color: #e0776f; }
.mk .stamp { margin-left: auto; flex: none; font: 500 10px/1 var(--f-mono); color: var(--faint); }
@media (max-width: 1439px) { .mk .stamp { display: none; } }
@media (max-width: 1320px) { .mk .wrap { gap: 13px; } }

/* Compact sticky bar used on inner pages */
.bar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--rule); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; gap: 20px; }
.bar .wordmark .seal { width: 32px; height: 32px; }
.bar .wordmark { gap: 11px; }
.bar .wordmark .wm { font-size: 21px; letter-spacing: .17em; }
.bar nav { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.bar nav a { flex: none; font: 700 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--text); }
.bar .themebtn { color: var(--muted); flex: none; }
.bar .themebtn span { display: none; }
@media (min-width: 1560px) { .bar .themebtn span { display: inline; } }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--gold); z-index: 60; transition: width .1s linear; }

/* ==========================================================================
   Front page
   ========================================================================== */
.lead { padding: clamp(24px, 2.8vw, 38px) 0 clamp(36px, 4vw, 56px); }
.lead .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 3.6vw, 56px); align-items: start; }
.lead-text { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.lead h1 { font-family: var(--f-head); font-weight: 600; font-size: clamp(38px, 4vw, 58px); line-height: 1.02; letter-spacing: -.024em; margin: 0; text-wrap: balance; color: var(--strong); }
.lead h1 a:hover { color: var(--accent); }
.lead .sf { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.42; }
.short { border-top: 1px solid var(--strong); padding-top: 14px; margin-top: 4px; }
.short h3 { margin: 0 0 10px; }
.short ol { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.short li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 6px; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.short li::before { content: counter(s, decimal-leading-zero); font: 400 21px/1 var(--f-display); color: var(--accent); padding-top: 1px; }
.lead-fig .media { aspect-ratio: 1 / 1; }
.lead-fig .media img { object-position: var(--pos, 50% 50%); }

/* In brief strip */
.brief-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--bg); }
.brief-strip .wrap { display: grid; grid-template-columns: 150px repeat(4, minmax(0, 1fr)); gap: 0; }
.brief-strip .label { padding: 22px 20px 22px 0; border-right: 1px solid var(--rule); }
.brief-strip .label strong { display: block; font: italic 400 27px/1 var(--f-display); color: var(--strong); margin-bottom: 8px; }
.bi { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 20px; border-right: 1px solid var(--rule); align-items: start; }
.bi:last-child { border-right: 0; padding-right: 0; }
.bi .th { width: 64px; height: 64px; overflow: hidden; background: var(--ink); }
.bi .th img { width: 100%; height: 100%; object-fit: cover; }
.bi .th.numtile.long { font-size: 16px; }
.bi .th.numtile.xlong { font-size: 13.5px; }
.bi .th.numtile { display: grid; place-items: center; background: var(--ink); color: var(--gold); font: 400 21px/1 var(--f-display); letter-spacing: -.01em; text-align: center; padding: 4px; }
.bi .hd { font-size: 16.5px; line-height: 1.22; margin-top: 6px; }
.bi .kick { font-size: 9.5px; }

/* Package */
.pkg { padding: clamp(40px, 4.4vw, 64px) 0 12px; }
.pkg-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 22px; border-top: 1px solid var(--strong); padding-top: 12px; margin-bottom: 26px; }
.pkg-head h2 { margin: 0; font: 400 clamp(30px, 3vw, 44px)/1 var(--f-display); }
.pkg-head h2 em { color: var(--accent); }
.pkg-head p { margin: 0; font: 400 16px/1.4 var(--f-body); color: var(--muted); max-width: 52ch; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.card { display: flex; flex-direction: column; gap: 12px; }
.card .media + .kick { margin-top: 6px; }
.card-lg .hd { font-size: clamp(25px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.018em; }
.card-lg .sf { font-size: 17px; line-height: 1.45; }
.card-md .hd { font-size: clamp(20px, 1.65vw, 23px); line-height: 1.14; }
.card-md .sf { font-size: 15.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .media img { object-position: var(--pos, 50% 50%); }

/* The Number */
.num { background: var(--band); color: var(--bone); margin-top: clamp(44px, 5vw, 72px); }
.num .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); align-items: center; }
.num .caps { color: var(--gold); }
.num-fig { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 6px; }
.num-fig .big { font: 400 clamp(120px, 15vw, 232px)/.82 var(--f-display); letter-spacing: -.03em; color: var(--bone); }
.num-fig .unit { font: italic 400 clamp(30px, 3vw, 46px)/1 var(--f-display); color: var(--gold); }
.num-copy { font: 400 clamp(18px, 1.5vw, 22px)/1.42 var(--f-body); color: rgba(245, 241, 232, .86); max-width: 40ch; margin: 18px 0 26px; }
.bars { display: grid; gap: 12px; max-width: 560px; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 58px; align-items: center; gap: 14px; font: 500 12px/1.2 var(--f-ui); color: rgba(245, 241, 232, .72); }
.bar-row .track { height: 12px; background: rgba(245, 241, 232, .07); position: relative; }
.bar-row .fill { position: absolute; inset: 0 auto 0 0; background: rgba(245, 241, 232, .34); width: var(--w); transform-origin: left; animation: grow 1.6s var(--ease) both; }
.bar-row.hl .fill { background: var(--gold); }
.bar-row.hl { color: var(--bone); }
.bar-row .v { font: 600 13px/1 var(--f-mono); text-align: right; color: var(--bone); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.num .src { margin-top: 18px; font: 500 11px/1.5 var(--f-mono); color: rgba(245, 241, 232, .45); }
.num .readlink { display: inline-flex; gap: 10px; align-items: center; margin-top: 24px; font: 700 11px var(--f-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(200, 155, 74, .45); padding-bottom: 4px; }
.num .media { aspect-ratio: 1; background: #0a1322; }

/* Four up */
.reads { padding: clamp(44px, 5vw, 72px) 0 0; }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }

/* Editions triptych */
.eds { background: var(--bg-2); margin-top: clamp(48px, 5.4vw, 80px); padding: clamp(40px, 4.6vw, 64px) 0; }
.eds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-col { padding: 0 clamp(18px, 2.2vw, 32px); border-left: 1px solid var(--rule); transition: opacity .4s var(--ease); }
.ed-col:first-child { padding-left: 0; border-left: 0; }
.ed-col:last-child { padding-right: 0; }
.ed-col header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--strong); padding-bottom: 12px; margin-bottom: 4px; }
.ed-col h3 { margin: 0; font: 400 clamp(26px, 2.5vw, 36px)/1 var(--f-display); }
.ed-col header .mono { font-size: 11.5px; color: var(--muted); }
.ed-col ul { list-style: none; margin: 0; padding: 0; }
.ed-col li { padding: 14px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
.ed-col li .hd { font-size: 17.5px; line-height: 1.22; }
.ed-col li .meta { font-size: 11.5px; }
body[data-edition="us"] .ed-col:not([data-ed="us"]),
body[data-edition="uk"] .ed-col:not([data-ed="uk"]),
body[data-edition="au"] .ed-col:not([data-ed="au"]) { opacity: .38; }

/* Sox View */
.view { padding: clamp(56px, 6vw, 96px) 0; }
.view .wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.view .colo { width: 150px; justify-self: center; opacity: .95; }
.view blockquote { margin: 0; }
.view blockquote p { margin: 0; font: italic 400 clamp(30px, 3.1vw, 46px)/1.12 var(--f-display); letter-spacing: -.01em; color: var(--strong); text-wrap: balance; max-width: 40ch; }
.view blockquote p::before { content: "\201C"; color: var(--accent-2); margin-right: .04em; }
.view blockquote p::after { content: "\201D"; color: var(--accent-2); margin-left: .02em; }
.view footer { margin-top: 24px; display: flex; gap: 14px; align-items: center; }
.view footer .caps { color: var(--accent); }
.view footer a { font: 500 14px var(--f-ui); color: var(--muted); border-bottom: 1px solid var(--rule-2); }

/* Feature row */
.feat { padding-top: clamp(8px, 1vw, 16px); }
.feat-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); }
.feat-side { display: grid; gap: var(--gap); align-content: start; }
.card-h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; padding-bottom: var(--gap); border-bottom: 1px solid var(--rule); }
.card-h:last-child { border-bottom: 0; padding-bottom: 0; }
.card-h .hd { font-size: 19px; line-height: 1.16; margin-top: 8px; }
.card-h .sf { font-size: 14.5px; line-height: 1.42; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-xl .hd { font-size: clamp(30px, 3vw, 44px); line-height: 1.04; letter-spacing: -.022em; }
.card-xl .sf { font-size: 18px; max-width: 60ch; }

/* Numbers of the day */
.nod { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; background: var(--surface); border-top: 3px solid var(--gold); min-height: 100%; }
.nod .big { font: 400 clamp(52px, 5vw, 74px)/.9 var(--f-display); color: var(--strong); letter-spacing: -.02em; margin: 6px 0 4px; }
.nod .hd { font-size: 18px; line-height: 1.2; }
.nod p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* Sox Life */
.life { background: var(--life); margin-top: clamp(56px, 6vw, 96px); padding: clamp(48px, 5.4vw, 84px) 0; }
.life-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.life-intro h2 { margin: 12px 0 10px; font: 400 clamp(64px, 7.4vw, 112px)/.86 var(--f-display); letter-spacing: -.02em; color: var(--strong); }
.life-intro h2 em { color: var(--accent); }
.life-intro .tl { font: italic 400 22px/1.3 var(--f-display); color: var(--muted); margin: 0 0 18px; }
.life-intro p { margin: 0 0 22px; font-size: 17px; line-height: 1.5; max-width: 38ch; }
.life-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--strong); }
.life-list li { border-bottom: 1px solid var(--rule); padding: 14px 0; display: grid; gap: 5px; }
.life-list .hd { font-size: 18px; line-height: 1.2; }
.life-mosaic { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; }
.life-mosaic .col { display: grid; gap: 18px; }
.life-mosaic figure { margin: 0; }
.life-mosaic figcaption { display: flex; justify-content: space-between; margin-top: 10px; }
.life-mosaic figcaption .caps { color: var(--accent); }

/* Interview band */
.iv { background: var(--band); color: var(--bone); padding: clamp(48px, 5.4vw, 84px) 0; }
.iv .media { aspect-ratio: 21 / 9; background: #070d19; }
.iv .concept { position: absolute; left: 16px; top: 16px; background: rgba(8, 14, 26, .78); color: rgba(245, 241, 232, .86); padding: 7px 10px 6px; font: 700 9.5px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.iv-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); margin-top: clamp(28px, 3vw, 44px); }
.iv h2 { margin: 10px 0 14px; font: 400 clamp(46px, 5.2vw, 82px)/.92 var(--f-display); letter-spacing: -.015em; }
.iv h2 em { color: var(--gold); }
.iv .caps { color: var(--gold); }
.iv p { font-size: 18.5px; line-height: 1.5; color: rgba(245, 241, 232, .82); margin: 0 0 26px; max-width: 46ch; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(245, 241, 232, .22); }
.steps li { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(245, 241, 232, .12); }
.steps .n { font: 400 26px/1 var(--f-display); color: var(--gold); }
.steps .t { font: 600 18px/1.25 var(--f-head); }
.steps .d { font: 500 12px var(--f-ui); color: rgba(245, 241, 232, .55); letter-spacing: .04em; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 13px; font: 700 11.5px/1 var(--f-ui); letter-spacing: .15em; text-transform: uppercase; border: 1px solid currentColor; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn.gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn.gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn.ghost { color: var(--bone); border-color: rgba(245, 241, 232, .4); background: transparent; }
.btn.ghost:hover { border-color: var(--bone); }
.btn.ink { background: var(--strong); color: var(--bg); border-color: var(--strong); }
.btn.ink:hover { background: var(--accent); border-color: var(--accent); color: var(--bone); }
.btn svg { width: 14px; height: 14px; }

/* The Brief */
.brief { padding: clamp(56px, 6vw, 96px) 0; }
.brief-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.brief h2 { margin: 12px 0 16px; font: 400 clamp(64px, 8vw, 128px)/.84 var(--f-display); letter-spacing: -.025em; color: var(--strong); }
.brief h2 em { color: var(--accent); }
.brief .lede { font: 400 clamp(19px, 1.6vw, 23px)/1.42 var(--f-body); color: var(--muted); max-width: 40ch; margin: 0 0 28px; }
.signup { display: flex; max-width: 520px; border: 1px solid var(--strong); background: var(--surface); }
.signup input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 16px 18px; font: 500 16px var(--f-ui); outline: none; }
.signup input::placeholder { color: var(--faint); }
.signup button { border: 0; background: var(--strong); color: var(--bg); padding: 0 22px; font: 700 11.5px var(--f-ui); letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.signup button:hover { background: var(--accent); color: var(--bone); }
.signup-note { margin-top: 12px; font: 500 12.5px/1.5 var(--f-ui); color: var(--faint); }
.signup-note.ok { color: var(--up); }
.promise { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin-top: 30px; }
.promise div { font: 500 13px/1.4 var(--f-ui); color: var(--muted); }
.promise strong { display: block; font: 400 30px/1 var(--f-display); color: var(--strong); margin-bottom: 6px; }

.phone { justify-self: center; width: 330px; max-width: 100%; aspect-ratio: 330 / 660; background: #0a1120; border-radius: 48px; padding: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 80px -30px rgba(10, 17, 32, .55); position: relative; transform: rotate(2.2deg); }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 88px; height: 24px; background: #0a1120; border-radius: 20px; z-index: 2; }
.screen { width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--bone); color: #121a2c; display: flex; flex-direction: column; font-family: var(--f-body); }
.screen .mail-top { background: var(--ink); color: var(--bone); padding: 54px 20px 16px; }
.screen .mail-top .row { display: flex; justify-content: space-between; align-items: center; }
.screen .mail-top img { width: 26px; height: 26px; }
.screen .mail-top .wm { font: 800 13px/1 var(--f-ui); letter-spacing: .2em; }
.screen .mail-top .wm span { font-weight: 400; }
.screen .mail-top h4 { margin: 14px 0 2px; font: 400 34px/1 var(--f-display); }
.screen .mail-top .d { font: 500 10.5px var(--f-mono); color: rgba(245, 241, 232, .6); }
.screen .mail-body { padding: 14px 18px; display: grid; gap: 12px; }
.screen .hello { font: italic 400 16px/1.35 var(--f-display); color: #3d4556; margin: 0; }
.screen .it { display: grid; grid-template-columns: 22px 1fr; gap: 8px; border-top: 1px solid rgba(18, 26, 44, .12); padding-top: 10px; }
.screen .it .n { font: 400 19px/1 var(--f-display); color: var(--gold-deep); }
.screen .it b { display: block; font: 600 13.5px/1.22 var(--f-head); }
.screen .it span { display: block; font: 400 11.5px/1.38 var(--f-body); color: #5a6272; margin-top: 3px; }
.screen .sign { display: flex; align-items: center; gap: 8px; font: 500 10.5px var(--f-ui); color: #6a7080; border-top: 1px solid rgba(18, 26, 44, .12); padding-top: 10px; }
.screen .sign img { width: 22px; }

/* Latest */
.latest { padding-bottom: clamp(56px, 6vw, 96px); }
.latest-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); }
.river { list-style: none; margin: 0; padding: 0; }
.river li { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.river .t { font: 500 11.5px/1.2 var(--f-mono); color: var(--faint); }
.river .hd { font-size: 19px; line-height: 1.22; }
.river .edb { font: 700 9.5px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.river li[hidden] { display: none; }
.weekly-card { background: var(--surface); border: 1px solid var(--rule); padding: 26px; display: grid; gap: 14px; }
.weekly-card .caps { color: var(--accent); }
.weekly-card h3 { margin: 0; font: 400 40px/.98 var(--f-display); }
.weekly-card p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.weekly-card .btn { justify-self: start; }
.weekly-card .issue-no { font: 400 88px/.8 var(--f-display); color: var(--accent-2); }

/* Footer */
.ft { background: var(--band); color: rgba(245, 241, 232, .78); padding: clamp(48px, 5vw, 76px) 0 28px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(4, minmax(0, 2fr)); gap: clamp(24px, 3vw, 44px); padding-bottom: 36px; border-bottom: 1px solid rgba(245, 241, 232, .14); }
.ft .brandblock { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; }
.ft .brandblock img { width: 96px; }
.ft .brandblock .wm { font: 800 22px/1 var(--f-ui); letter-spacing: .18em; color: var(--bone); }
.ft .brandblock .wm span { font-weight: 400; }
.ft .brandblock p { font-size: 15px; line-height: 1.55; margin: 12px 0 0; max-width: 46ch; }
.ft h4 { margin: 4px 0 14px; font: 700 10.5px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font: 500 14px var(--f-ui); }
.ft ul a:hover { color: var(--bone); }
.ft-bottom { display: flex; justify-content: space-between; gap: 18px; padding-top: 22px; font: 500 11.5px var(--f-mono); color: rgba(245, 241, 232, .45); flex-wrap: wrap; }

/* ==========================================================================
   Story page
   ========================================================================== */
.st-head { padding: clamp(36px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.st-head .inner { max-width: 1060px; }
.st-head h1 { margin: 18px 0 20px; font-family: var(--f-head); font-weight: 600; font-size: clamp(38px, 5.2vw, 76px); line-height: 1.01; letter-spacing: -.028em; text-wrap: balance; color: var(--strong); }
.st-head .sf { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.42; max-width: 58ch; }
.byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); }
.byline .who { display: flex; align-items: center; gap: 12px; }
.byline .who img { width: 38px; height: 38px; }
.byline .who .desk { font: 700 14px/1.2 var(--f-ui); color: var(--text); }
.byline .who .when { font: 500 12.5px/1.3 var(--f-ui); color: var(--faint); }
.share { display: flex; gap: 8px; }
.share a, .share button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--rule-2); background: transparent; cursor: pointer; color: var(--text); transition: border-color .3s var(--ease), color .3s var(--ease); }
.share a:hover, .share button:hover { border-color: var(--gold); color: var(--accent); }
.share svg { width: 16px; height: 16px; }
.st-hero figure { margin: 0; }
.st-hero .media { aspect-ratio: 16 / 8; }
.st-hero .media img { object-position: var(--pos, 50% 50%); }
.st-grid { display: grid; grid-template-columns: 232px minmax(0, 680px) 250px; justify-content: center; gap: clamp(28px, 3.6vw, 60px); padding: clamp(36px, 4vw, 56px) 0 clamp(48px, 5vw, 80px); }
.rail { position: sticky; top: 84px; align-self: start; display: grid; gap: 28px; }
.rail .short { margin-top: 0; }
.rail .short li { font-size: 14.5px; grid-template-columns: 28px 1fr; }
.facts { border-top: 1px solid var(--strong); padding-top: 12px; display: grid; gap: 10px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; font: 500 12.5px var(--f-ui); color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 9px; }
.facts b { color: var(--text); font-weight: 700; text-align: right; }
.mini-brief { background: var(--band); color: var(--bone); padding: 20px; display: grid; gap: 10px; }
.mini-brief strong { font: 400 30px/1 var(--f-display); }
.mini-brief p { margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(245, 241, 232, .75); }
.mini-brief a { font: 700 10.5px var(--f-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.prose { font-size: clamp(18.5px, 1.35vw, 20.5px); line-height: 1.66; color: var(--text); }
.prose p { margin: 0 0 1.1em; hanging-punctuation: first; text-wrap: pretty; }
.prose > p:first-of-type::first-letter { float: left; font: 400 5.1em/.8 var(--f-display); color: var(--accent); margin: .07em .09em 0 -.02em; }
.pq { margin: 1.5em 0 1.6em; padding: 22px 0 0; border-top: 1px solid var(--strong); }
.pq p { margin: 0; font: italic 400 clamp(28px, 2.5vw, 36px)/1.16 var(--f-display); color: var(--strong); text-wrap: balance; }
.pq span { display: block; margin-top: 12px; font: 700 10.5px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sema { margin: 2.2em 0 1em; border: 1px solid var(--rule-2); }
.sema h3 { margin: 0; padding: 14px 18px 12px; border-bottom: 1px solid var(--rule-2); font: 400 24px/1 var(--f-display); display: flex; align-items: center; gap: 10px; }
.sema h3 img { width: 22px; }
.sema .blk { padding: 16px 18px 18px; border-bottom: 1px solid var(--rule); }
.sema .blk:last-child { border-bottom: 0; }
.sema .blk .caps { color: var(--accent); display: block; margin-bottom: 8px; }
.sema .blk p { margin: 0; font-size: 17px; line-height: 1.55; }
.sources { margin-top: 2.2em; border-top: 1px solid var(--strong); padding-top: 14px; }
.sources ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: src; display: grid; gap: 10px; }
.sources li { counter-increment: src; display: grid; grid-template-columns: 28px 1fr; font: 500 14px/1.45 var(--f-ui); color: var(--muted); }
.sources li::before { content: counter(src, decimal-leading-zero); font: 500 11.5px/1.6 var(--f-mono); color: var(--faint); }
.sources a { border-bottom: 1px solid var(--rule-2); }
.sources a:hover { color: var(--accent); border-color: var(--accent); }
.standards-note { margin-top: 2em; padding: 16px 18px; background: var(--bg-2); font: 500 13px/1.55 var(--f-ui); color: var(--muted); }
.standards-note a { color: var(--text); border-bottom: 1px solid var(--rule-2); }
.more-strip { background: var(--bg-2); padding: clamp(40px, 5vw, 72px) 0; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

/* Section fronts and vertical pages */
.sec-hero { padding: clamp(40px, 5vw, 80px) 0 clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--rule); }
.sec-hero h1 { margin: 12px 0 12px; font: 400 clamp(64px, 9vw, 150px)/.84 var(--f-display); letter-spacing: -.03em; color: var(--strong); }
.sec-hero h1 em { color: var(--accent); }
.sec-hero p { margin: 0; font: italic 400 clamp(19px, 1.8vw, 26px)/1.3 var(--f-display); color: var(--muted); max-width: 44ch; }
.sec-hero .count { font: 500 12px var(--f-mono); color: var(--faint); margin-top: 18px; }
.sec-body { padding: clamp(36px, 4vw, 60px) 0 clamp(56px, 6vw, 96px); }
.sec-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: center; padding-bottom: clamp(36px, 4vw, 56px); margin-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--rule); }
.sec-lead .hd { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.04; letter-spacing: -.022em; margin: 12px 0 14px; }
.sec-lead .sf { font-size: 18.5px; }
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) var(--gap); }

.split-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: 78vh; }
.split-hero .txt { padding: clamp(40px, 6vw, 96px) var(--gutter); display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; }
.split-hero .txt h1 { margin: 0; font: 400 clamp(72px, 10vw, 168px)/.82 var(--f-display); letter-spacing: -.03em; color: var(--strong); }
.split-hero .txt h1 em { color: var(--accent); }
.split-hero .txt .tl { font: italic 400 clamp(22px, 2.2vw, 32px)/1.2 var(--f-display); color: var(--muted); margin: 0; }
.split-hero .txt p { font-size: 18.5px; line-height: 1.55; max-width: 44ch; margin: 0; }
.split-hero .media { height: 100%; min-height: 520px; }
.areas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--strong); }
.areas > div { padding: 22px 20px 24px 0; border-right: 1px solid var(--rule); }
.areas > div + div { padding-left: 20px; }
.areas > div:last-child { border-right: 0; }
.areas h3 { margin: 8px 0 8px; font: 400 26px/1.05 var(--f-display); }
.areas p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.areas .caps { color: var(--accent); }

.iv-page { background: var(--band); color: var(--bone); }
.iv-hero { position: relative; }
.iv-hero .media { aspect-ratio: auto; height: min(78vh, 760px); }
.iv-hero .over { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) clamp(28px, 4vw, 56px); }
.iv-hero .over .box { max-width: var(--container); margin: 0 auto; }
.iv-hero .plate { display: inline-block; background: rgba(8, 14, 26, .84); padding: clamp(18px, 2.4vw, 32px) clamp(20px, 2.8vw, 40px); max-width: 720px; }
.iv-hero h1 { margin: 10px 0 10px; font: 400 clamp(56px, 7vw, 116px)/.88 var(--f-display); letter-spacing: -.02em; }
.iv-hero h1 em { color: var(--gold); }
.iv-hero p { margin: 0; font-size: 19px; line-height: 1.5; color: rgba(245, 241, 232, .84); }
.iv-sec { padding: clamp(48px, 5vw, 84px) 0; border-top: 1px solid rgba(245, 241, 232, .12); }
.iv-sec h2 { margin: 0 0 12px; font: 400 clamp(36px, 3.6vw, 56px)/1 var(--f-display); }
.iv-sec h2 em { color: var(--gold); }
.iv-sec p { color: rgba(245, 241, 232, .8); font-size: 18px; line-height: 1.55; max-width: 52ch; }
.iv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); }
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(245, 241, 232, .22); margin-top: 26px; }
.pipeline > div { padding: 18px 18px 0 0; border-right: 1px solid rgba(245, 241, 232, .12); }
.pipeline > div + div { padding-left: 18px; }
.pipeline > div:last-child { border-right: 0; }
.pipeline .n { font: 400 44px/1 var(--f-display); color: var(--gold); }
.pipeline .t { font: 600 18px/1.25 var(--f-head); margin-top: 10px; }
.pipeline .d { font: 500 13px/1.45 var(--f-ui); color: rgba(245, 241, 232, .6); margin-top: 6px; }
.checks { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font: 500 15px/1.45 var(--f-ui); color: rgba(245, 241, 232, .82); }
.checks li::before { content: ""; width: 12px; height: 1px; background: var(--gold); margin-top: 11px; }

.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 80px); }
.about-grid .prose p:first-of-type::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
.editor-card figure { margin: 0; }
.editor-card figcaption { margin-top: 12px; font: italic 400 20px/1.3 var(--f-display); color: var(--muted); }

/* Motion loops sit over their poster image */
.media video.loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.still .media video.loop { display: none; }
@media (prefers-reduced-motion: reduce) { .media video.loop { display: none; } }

/* Reveal motion (disabled for stills and reduced motion) */
.rv { opacity: 1; transform: none; }
html.js-motion .rv { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js-motion .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js-motion .rv { opacity: 1; transform: none; } .bar-row .fill { animation: none; } .clocks .live::before { animation: none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ---- Production additions ------------------------------------------------ */
.num.num-solo .wrap { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.num.num-solo .num-copy { max-width: 52ch; }
.bi .th.legacy { background: #d8c9a6; }
.bi .th.legacy img { filter: grayscale(1) contrast(1.08) brightness(.92); mix-blend-mode: multiply; }
[data-theme="night"] .bi .th.legacy { background: #2a3a5c; }
[data-theme="night"] .bi .th.legacy img { mix-blend-mode: luminosity; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup { position: relative; }
.signup button[disabled] { opacity: .7; cursor: default; }
.signup.done { border-color: var(--up); }
.signup-note.err { color: var(--down); }
[data-theme="night"] .signup-note.ok { color: #5fbf8e; }
[data-theme="night"] .signup-note.err { color: #e0776f; }
.empty { font: italic 400 22px/1.4 var(--f-display); color: var(--muted); padding: 24px 0; }
.empty a { color: var(--accent); border-bottom: 1px solid currentColor; }
.share .copied { color: var(--up); }
.brief-title { margin: 12px 0 16px; font: 400 clamp(80px, 11vw, 176px)/.84 var(--f-display); letter-spacing: -.025em; color: var(--strong); }
.brief-title em { color: var(--accent); }
.edsw.edsw-inline { display: inline-flex; margin-top: 22px; border-color: var(--rule-2); }
.edsw.edsw-inline button { color: var(--muted); }
.edsw.edsw-inline button + button { border-left-color: var(--rule-2); }
.edsw.edsw-inline button[aria-pressed="true"] { background: var(--strong); color: var(--bg); }
.edsw.edsw-inline button:hover:not([aria-pressed="true"]) { color: var(--text); }
.archive { padding: clamp(28px, 3vw, 48px) 0 clamp(56px, 6vw, 96px); }
.arch-month { margin-top: clamp(28px, 3vw, 44px); }
.arch-month[hidden] { display: none; }
.arch-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 6px; padding-top: 12px; border-top: 1px solid var(--strong); font: 400 clamp(28px, 2.6vw, 38px)/1 var(--f-display); color: var(--strong); }
.arch-h .caps { color: var(--muted); }
.arch-list { list-style: none; margin: 0; padding: 0; }
.arch-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.arch-list li[hidden] { display: none; }
.arch-list .t { font: 500 12px/1.4 var(--f-mono); color: var(--faint); padding-top: 3px; }
.arch-list .hd { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; margin: 6px 0 6px; }
.arch-list .sf { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.45; max-width: 72ch; }
.about-prose h2 { margin: 6px 0 14px; font: 400 clamp(32px, 3vw, 44px)/1.02 var(--f-display); letter-spacing: -.01em; color: var(--strong); }
.about-prose .about-k { display: block; margin-top: 2.2em; color: var(--accent); }
.about-prose .about-k:first-child { margin-top: 0; }
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 6px 0 0; }
.formats div { border-top: 1px solid var(--rule-2); padding-top: 12px; }
.formats dt { font: 600 20px/1.2 var(--f-head); color: var(--strong); }
.formats dd { margin: 6px 0 0; color: var(--muted); font-size: 16px; line-height: 1.45; }
.doctrine { background: var(--bg-2); padding: clamp(44px, 5vw, 80px) 0; }
.doctrine-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.doctrine-grid li { background: var(--surface); padding: 22px 22px 24px; border-top: 3px solid var(--gold); }
.doctrine-grid .n { display: block; font: 400 56px/.9 var(--f-display); color: var(--accent); }
.doctrine-grid h3 { margin: 12px 0 8px; font: 600 21px/1.2 var(--f-head); color: var(--strong); }
.doctrine-grid p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.about-close { padding: clamp(44px, 5vw, 80px) 0; }
.about-close h2 { margin: 0 0 14px; font: 400 clamp(40px, 4vw, 60px)/1 var(--f-display); color: var(--strong); }
.about-close h2 em { color: var(--accent); }
.about-close p { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0 0 22px; max-width: 58ch; }
.about-close .btn.ghost { color: var(--text); border-color: var(--rule-2); }

@media (max-width: 1180px) {
  .four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .brief-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief-strip .label { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--rule); padding: 18px 0 14px; display: flex; gap: 14px; align-items: baseline; }
  .brief-strip .label strong { margin: 0; }
  .bi:nth-child(odd) { border-right: 0; }
  .bi { border-bottom: 1px solid var(--rule); padding-left: 0; }
  .st-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .st-grid .rail-r { display: none; }
  .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .ub .clocks span:not(:first-child) { display: none; }
  .ub .brief-link { display: none; }
  .ub .themebtn span { display: none; }
  .cap { flex-direction: column; gap: 4px; }
  .cap .credit { white-space: normal; }
  .np .wrap { grid-template-columns: 1fr; justify-items: center; padding-top: 16px; padding-bottom: 14px; gap: 10px; }
  .np-meta, .np-actions { display: none; }
  .wordmark .seal { width: 42px; height: 42px; }
  .nav .wrap { justify-content: flex-start; -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .mk .stamp { display: none; }
  .lead .wrap { grid-template-columns: 1fr; gap: 20px; }
  .lead-fig { order: -1; }
  .lead-fig .media { aspect-ratio: 4 / 3; }
  .two, .three, .eds-grid, .feat-grid, .life-grid, .iv-grid, .brief-grid, .latest-grid, .sec-lead, .about-grid, .split-hero, .iv-cols { grid-template-columns: 1fr; }
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .pkg-head { grid-template-columns: 1fr; gap: 8px; }
  .num .wrap { grid-template-columns: 1fr; }
  .num .media { aspect-ratio: 16 / 10; order: -1; }
  .bar-row { grid-template-columns: 118px 1fr 50px; }
  .ed-col { padding: 0; border-left: 0; margin-bottom: 30px; }
  .view .wrap { grid-template-columns: 1fr; }
  .view .colo { width: 96px; justify-self: start; }
  .life-mosaic { grid-template-columns: 1fr 1fr; }
  .phone { transform: none; width: 300px; }
  .river li { grid-template-columns: 70px 1fr; }
  .river .edb { display: none; }
  .ft-top { grid-template-columns: 1fr 1fr; }
  .doctrine-grid { grid-template-columns: 1fr 1fr; }
  .formats { grid-template-columns: 1fr; }
  .ft .brandblock { grid-column: 1 / -1; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .st-hero .media { aspect-ratio: 4 / 3; }
  .split-hero .media { min-height: 420px; order: -1; }
  .areas { grid-template-columns: 1fr 1fr; }
  .areas div { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--rule); }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .iv-hero .media { height: 64vh; }
  .card-h { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .bar nav { display: none; }
}
@media (max-width: 640px) {
  .four, .sec-grid { grid-template-columns: 1fr; }
  .brief-strip .wrap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 16px; }
  .brief-strip .label { display: none; }
  .bi { flex: 0 0 84%; scroll-snap-align: start; border: 1px solid var(--rule); padding: 16px; background: var(--surface); margin-top: 16px; }
  .num-fig .big { font-size: 128px; }
  .life-mosaic { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .promise strong { font-size: 24px; }
  .ft-top { grid-template-columns: 1fr; }
  .doctrine-grid { grid-template-columns: 1fr; }
  .arch-list li { grid-template-columns: 1fr; gap: 4px; }
  .pipeline, .areas { grid-template-columns: 1fr; }
  .share a:nth-child(3) { display: none; }
}