/* AI Academy · Утро — design system «Классика».
   Layout: 1200px frame; reading column 640px with a 240px metadata rail on the right
   (anthropic.com article pattern); figures break out to 880px; hairline rules separate sections.
   Palette and greys are Anthropic's published tokens; type uses the closest free Cyrillic faces. */

:root{
  /* greys (Anthropic scale) */
  --g000:#FFFFFF; --g050:#FAF9F5; --g100:#F5F4ED; --g150:#F0EEE6; --g200:#E8E6DC; --g250:#DEDCD1;
  --g300:#D1CFC5; --g400:#B0AEA5; --g500:#87867F; --g600:#5E5D59; --g700:#3D3D3A; --g750:#30302E;
  --g800:#262624; --g850:#1F1E1D; --g900:#1A1918; --g950:#141413;
  /* accents (fixed across themes: illustrations live on their own tiles) */
  --clay:#D97757; --clay-ink:#C6613F; --oat:#E3DACC; --olive:#788C5D; --cactus:#BCD1CA; --sky:#6A9BCC;
  --heather:#CBCADB; --fig:#C46686; --coral:#EBCECE; --periwinkle:#CDE2FB; --iris:#DFDBFD; --line-art:#141413;

  /* semantic tokens — light */
  --bg:var(--g050); --bg-2:var(--g100); --panel:var(--g150); --panel-2:var(--g200); --card:var(--g000);
  --fg:var(--g950); --fg-2:var(--g750); --muted:var(--g600); --faint:var(--g500);
  --rule:var(--g250); --rule-strong:var(--g300); --link:var(--fg); --accent:var(--clay-ink);
  --clay-tint:#F6E3DB; --clay-tint-line:#EBC5B5; --hl:rgba(217,119,87,.18);
  --btn:var(--g950); --btn-fg:var(--g050); --code:var(--g150); --code-s:#5F7347; --dg-strong:var(--g300); --dg-strong-fg:var(--g950);
  --shadow:0 1px 2px rgba(20,20,19,.06), 0 8px 28px rgba(20,20,19,.08);

  /* type */
  --serif:"Source Serif 4", "Iowan Old Style", "Georgia", serif;
  --sans:"Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-display:clamp(2.35rem, 1.6rem + 3.2vw, 3.6rem);
  --t-h2:clamp(1.85rem, 1.4rem + 1.9vw, 2.75rem);
  --t-h3:1.5rem; --t-lede:clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --t-body:1.1875rem; --t-small:.9375rem; --t-micro:.8125rem;

  --frame:1200px; --read:640px; --rail:240px; --wide:880px;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--g900); --bg-2:var(--g850); --panel:var(--g850); --panel-2:var(--g800); --card:#22211F;
    --fg:var(--g100); --fg-2:var(--g250); --muted:var(--g400); --faint:var(--g500);
    --rule:#34332F; --rule-strong:#45433E; --link:var(--g100); --accent:#E8916E;
    --clay-tint:#3A2B24; --clay-tint-line:#5A3D31; --hl:rgba(232,145,110,.2);
    --btn:var(--g100); --btn-fg:var(--g950); --code:#201F1D; --code-s:#A9BC8C; --dg-strong:#45433E; --dg-strong-fg:var(--g100);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--g900); --bg-2:var(--g850); --panel:var(--g850); --panel-2:var(--g800); --card:#22211F;
  --fg:var(--g100); --fg-2:var(--g250); --muted:var(--g400); --faint:var(--g500);
  --rule:#34332F; --rule-strong:#45433E; --link:var(--g100); --accent:#E8916E;
  --clay-tint:#3A2B24; --clay-tint-line:#5A3D31; --hl:rgba(232,145,110,.2);
  --btn:var(--g100); --btn-fg:var(--g950); --code:#201F1D; --code-s:#A9BC8C; --dg-strong:#45433E; --dg-strong-fg:var(--g100);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:88px}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:1rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"kern","liga"}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--bg)}
img,svg{max-width:100%}
img{display:block; height:auto}
a{color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:var(--faint)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px; border-radius:4px}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:500}
p{margin:0; text-wrap:pretty}
code{font-family:var(--mono); font-size:.84em; background:var(--code); padding:.12em .38em; border-radius:4px; color:var(--fg-2)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

.frame{max-width:var(--frame); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}

/* ---------- header ---------- */
.top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--rule)}
.top-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; height:68px}
.pills{display:flex; gap:8px; align-items:center}
.pill-nav{font-size:.9rem; text-decoration:none; color:var(--fg); padding:6px 15px; border-radius:999px; border:1px solid var(--rule); background:var(--bg-2); white-space:nowrap; line-height:1.3}
.pill-nav:hover{background:var(--panel)}
.pill-nav[aria-current="page"]{background:var(--panel-2); border-color:var(--rule-strong)}
.wordmark{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); justify-self:center}
.wordmark svg{width:30px; height:30px; flex:none}
.wordmark b{font-weight:700; font-size:1.06rem; letter-spacing:.01em}
.wordmark span{font-family:var(--serif); font-size:1.06rem; color:var(--muted)}
.top-right{justify-self:end; display:flex; gap:10px; align-items:center; font-size:.875rem; color:var(--muted)}
.icon-btn{all:unset; cursor:pointer; width:34px; height:34px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--rule); background:var(--bg-2); color:var(--fg)}
.icon-btn:hover{background:var(--panel)}
.icon-btn:focus-visible{outline:2px solid var(--clay)}
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--clay); transition:width .1s linear}

/* ---------- shared bits ---------- */
.eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:var(--t-micro); color:var(--muted); letter-spacing:.01em}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; line-height:1; padding:6px 10px; border-radius:999px; background:var(--panel); color:var(--fg-2); white-space:nowrap}
.tag.clay{background:var(--clay-tint); color:var(--accent)}
.tag i{width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block}
.mono-label{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.btn{display:inline-flex; align-items:center; gap:10px; font:500 .95rem/1 var(--sans); padding:13px 18px; border-radius:8px; border:1px solid var(--btn); background:var(--btn); color:var(--btn-fg); cursor:pointer; text-decoration:none}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent; color:var(--fg); border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--panel); opacity:1}
.btn small{font-size:.85rem; opacity:.62; font-weight:400}
.rule-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding-block:14px; font-size:.875rem}
.rule-head h2{font:600 .875rem/1.3 var(--sans); letter-spacing:.01em}
.rule-head span{color:var(--muted)}

/* ---------- cover tiles (claude.com icon-tile pattern) ---------- */
.tile{position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:22%; flex:none}
.tile .inner{width:64%; aspect-ratio:1; border-radius:20%; background:#FFFFFF; display:grid; place-items:center}
.tile svg{width:86%; height:86%; overflow:visible}
.tile.flat .inner{background:transparent}

/* ---------- issue masthead ---------- */
.mast{display:grid; grid-template-columns:minmax(0,1fr) var(--rail); gap:56px; padding-block:72px 64px; align-items:end}
.mast h1{font-family:var(--serif); font-weight:500; font-size:var(--t-display); line-height:1.08; letter-spacing:-.012em; margin-top:22px; max-width:22ch}
.mast .lede{margin-top:22px; font-size:var(--t-lede); line-height:1.5; color:var(--fg-2); max-width:36em}
.mast .actions{margin-top:32px; display:flex; flex-wrap:wrap; gap:12px}
.facts{display:grid; gap:0; border-top:1px solid var(--rule); font-size:.9rem}
.facts div{display:flex; justify-content:space-between; gap:12px; padding-block:12px; border-bottom:1px solid var(--rule)}
.facts dt{color:var(--muted)} .facts dd{margin:0; font-variant-numeric:tabular-nums}
.facts dl{margin:0}

/* ---------- one-minute summary ---------- */
.minute{padding-bottom:24px}
.minute-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px}
.minute-card{display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; padding-block:24px; text-decoration:none; color:inherit; border-bottom:1px solid var(--rule); align-items:start}
.minute-card .tile{width:64px}
.minute-card h3{font:700 1.18rem/1.25 var(--sans); letter-spacing:-.005em; margin-top:8px}
.minute-card p{margin-top:8px; font-size:.95rem; line-height:1.5; color:var(--fg-2)}
.minute-card:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em}

/* ---------- story ---------- */
.story{padding-block:88px 32px; border-top:1px solid var(--rule)}
.story-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--read)) var(--rail); gap:0 48px}
.story-grid > .head{grid-column:2; grid-row:1; min-width:0}
.story-grid > .main{grid-column:2; grid-row:2; min-width:0}
.story-grid > .rail{grid-column:3; grid-row:1 / span 2; min-width:0}
.story .tile.cover{width:128px; margin-bottom:28px}
.story h2{font-family:var(--serif); font-weight:500; font-size:var(--t-h2); line-height:1.12; letter-spacing:-.01em; margin-top:18px}
.story .dek{margin-top:18px; font-size:var(--t-lede); line-height:1.5; color:var(--fg-2)}
.why{margin-top:32px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; padding:18px 20px; border-radius:12px; background:var(--clay-tint); border:1px solid var(--clay-tint-line)}
.why .mono-label{color:var(--accent); padding-top:4px; white-space:nowrap}
.why p{font-size:1.02rem; line-height:1.5; color:var(--fg)}

.rail-box{position:sticky; top:96px; margin-top:6px}
.meta{display:grid; font-size:.875rem; border-top:1px solid var(--rule)}
.meta div{display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; padding-block:11px; border-bottom:1px solid var(--rule)}
.meta dt{font-weight:500; color:var(--fg)}
.meta dd{margin:0; color:var(--muted)}
.meta dl{margin:0}
.rail .listen{margin-top:16px; width:100%; justify-content:center}

/* prose */
.prose{margin-top:44px; font-family:var(--serif); font-size:var(--t-body); line-height:1.62; color:var(--fg)}
.prose > * + *{margin-top:1.1em}
.prose h3{font:700 var(--t-h3)/1.25 var(--sans); letter-spacing:-.01em; margin-top:2.1em}
.prose h3 + *{margin-top:.75em}
.prose h4{font:700 1.1rem/1.3 var(--sans); margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{padding-left:.25em}
.prose li + li{margin-top:.55em}
.prose ol li::marker{font-family:var(--sans); font-weight:600; font-size:.9em; color:var(--muted)}
.prose ul li::marker{color:var(--clay)}
.prose strong{font-weight:600}
.prose blockquote{margin:1.6em 0 0; padding-left:20px; border-left:2px solid var(--clay); font-style:italic; color:var(--fg-2)}
.prose .note{font-family:var(--sans); font-size:.95rem; color:var(--muted)}
.speaking{background:var(--hl); box-shadow:0 0 0 .3em var(--hl); border-radius:3px; transition:background .2s}

/* stats strip */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-family:var(--sans); margin-top:1.6em!important}
.stats div{padding:16px 16px 16px 0}
.stats div + div{padding-left:16px; border-left:1px solid var(--rule)}
.stats b{display:block; font:500 1.75rem/1.1 var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stats span{display:block; margin-top:6px; font-size:.82rem; line-height:1.35; color:var(--muted)}

/* ---------- diagrams (claude.com language) ---------- */
.fig{margin:2.6em 0 0; font-family:var(--sans)}
/* wide figures grow into the left gutter only, so they never run under the metadata rail */
.fig.wide{margin-left:calc(-1 * clamp(0px, 100vw - 1000px, var(--wide) - var(--read)))}
.dg{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:22px; overflow-x:auto}
.dg-cols{display:grid; grid-template-columns:repeat(var(--n,2), minmax(0,1fr)); gap:16px}
.dg-col{min-width:0; display:flex; flex-direction:column}
.dg-col + .dg-col{border-left:1px solid var(--rule); padding-left:16px}
.dg-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px}
.dg-big{font:400 1.6rem/1 var(--mono); letter-spacing:-.02em; text-align:right; white-space:nowrap}
.dg-big.clay{color:var(--clay-ink)}
.dg-sub{font:400 .72rem/1.3 var(--mono); color:var(--muted); text-align:right; margin-top:6px}
.dg-flow{display:flex; flex-direction:column; gap:0; align-items:stretch; flex:1}
.dg-row{display:grid; grid-template-columns:repeat(var(--k,1), minmax(0,1fr)); gap:8px}
.dg-box{background:var(--panel-2); border-radius:4px; padding:9px 10px; font-size:.8rem; line-height:1.35; text-align:center; color:var(--fg); min-width:0; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto}
.dg-box.dark{background:var(--dg-strong); color:var(--dg-strong-fg)}
.dg-box.white{background:var(--card); border:1px solid var(--rule)}
.dg-box.clay{background:var(--clay); color:#fff}
.dg-box.left{text-align:left}
.dg-box small{display:block; font:400 .66rem/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.dg-box.clay small{color:rgba(255,255,255,.8)}
.dg-region{background:var(--clay-tint); border-radius:6px; padding:12px; display:flex; flex-direction:column; gap:8px}
.dg-region > .mono-label{color:var(--accent)}
.dg-link{display:flex; flex-direction:column; align-items:center; font:400 .64rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-block:4px}
.dg-link::before,.dg-link::after{content:""; width:1px; height:10px; background:var(--rule-strong)}
.dg-link.end::after{height:0; width:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--rule-strong); background:none}
.dg-link span{padding-block:4px}
.dg-chips{display:flex; gap:4px; flex-wrap:wrap; justify-content:center}
.dg-chip{width:16px; height:16px; border-radius:2px; background:var(--clay)}
.dg-chip.ghost{background:transparent; border:1px dashed var(--clay)}
.dg-steps{display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:0}
.dg-step{position:relative; padding:0 14px 0 0; min-width:0}
.dg-step + .dg-step{padding-left:14px; border-left:1px solid var(--rule)}
.dg-step .mono-label{display:block; margin-bottom:10px}
.dg-step h4{font:700 1rem/1.25 var(--sans); margin-bottom:6px}
.dg-step p{font-size:.86rem; line-height:1.45; color:var(--fg-2)}
.dg-meter{margin-top:12px; display:flex; align-items:center; gap:8px; font:400 .68rem/1 var(--mono); color:var(--muted)}
.dg-meter i{flex:1; height:6px; border-radius:3px; background:var(--panel-2); position:relative; overflow:hidden}
.dg-meter i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--v,10%); background:var(--clay); border-radius:3px}
.dg-tree{font:400 .76rem/1.6 var(--mono); color:var(--fg-2); white-space:pre; margin-top:8px}
.fig figcaption{margin-top:12px; font-size:.84rem; line-height:1.45; color:var(--muted); max-width:var(--read)}
.fig figcaption b{color:var(--fg); font-weight:600}

/* ---------- code ---------- */
.code{border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--code); margin-top:1.6em!important; font-family:var(--sans)}
.code-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 8px 8px 16px; border-bottom:1px solid var(--rule); font:400 .76rem/1 var(--mono); color:var(--muted)}
.code-bar button{all:unset; cursor:pointer; font:500 .76rem/1 var(--sans); padding:7px 10px; border-radius:6px; color:var(--fg)}
.code-bar button:hover{background:var(--panel-2)}
.code-bar button:focus-visible{outline:2px solid var(--clay)}
.code pre{margin:0; padding:16px 18px; overflow-x:auto; font:400 .82rem/1.65 var(--mono); color:var(--fg); tab-size:2}
.code .c{color:var(--faint)} .code .k{color:var(--accent)} .code .s{color:var(--code-s)}

/* ---------- lenses ---------- */
.lenses{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; font-family:var(--sans); margin-top:1.4em!important}
.lens{border-top:1px solid var(--fg); padding-top:14px; min-width:0}
.lens h4{display:flex; align-items:center; gap:8px; font:600 .875rem/1.3 var(--sans); margin:0 0 8px}
.lens h4 i{width:8px; height:8px; border-radius:50%; flex:none}
.lens:nth-child(1) h4 i{background:var(--clay)} .lens:nth-child(2) h4 i{background:var(--sky)} .lens:nth-child(3) h4 i{background:var(--olive)}
.lens p{font-size:.95rem; line-height:1.55; color:var(--fg-2)}

/* ---------- task + sources ---------- */
.task{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; margin-top:2.2em!important; padding:18px 20px; border:1px solid var(--rule-strong); border-radius:12px; font-family:var(--sans); cursor:pointer; background:var(--bg-2)}
.task input{appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:1px 0 0; border:1.5px solid var(--fg-2); border-radius:6px; display:grid; place-items:center; cursor:pointer; background:var(--card)}
.task input:checked{background:var(--olive); border-color:var(--olive)}
.task input:checked::after{content:""; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg)}
.task .mono-label{display:block; margin-bottom:4px}
.task p{font-size:.98rem; line-height:1.5}
.task:has(input:checked) p{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--faint)}
.sources{margin-top:2.4em!important; font-family:var(--sans); font-size:.9rem}
.sources h4{font:600 .875rem/1.3 var(--sans); margin:0 0 4px}
.sources ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.sources li{display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--rule)}
.sources li span{color:var(--muted)}
.sources a{overflow-wrap:anywhere}

/* ---------- briefs ---------- */
.section{padding-block:88px 0}
.briefs{display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:0 32px}
.brief{padding-block:24px 28px; border-bottom:1px solid var(--rule); min-width:0; display:flex; flex-direction:column}
.brief h3{font:700 1.22rem/1.25 var(--sans); letter-spacing:-.005em; margin-top:14px}
.brief p{margin-top:10px; font-size:.97rem; line-height:1.55; color:var(--fg-2)}
.brief .so{margin-top:14px; font-size:.92rem; line-height:1.5; color:var(--fg); display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline}
.brief.wide{grid-column:span 2}
.brief.full{grid-column:1 / -1}
.brief .so b{font:500 .7rem/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); white-space:nowrap}
.brief .src{margin-top:auto; padding-top:14px; font-size:.84rem; color:var(--muted)}

/* ---------- videos ---------- */
.videos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding-top:24px}
.video{display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--fg); min-width:0}
.thumb{position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--panel-2)}
.thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.video:hover .thumb img{transform:scale(1.03)}
.thumb .play{position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:10px; background:var(--g050); display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.18)}
.video h3{font:600 1rem/1.35 var(--sans)}
.video span{font-size:.84rem; color:var(--muted); margin-top:-6px}

/* ---------- colophon / footer ---------- */
.colophon{padding-block:88px 72px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; font-size:.92rem; color:var(--fg-2)}
.colophon h4{font:600 .875rem/1.3 var(--sans); color:var(--fg); margin-bottom:10px}
.colophon ul{margin:0; padding-left:1.1em}
.colophon li + li{margin-top:4px}
.foot{background:var(--g950); color:var(--g300); padding-block:56px calc(140px + env(safe-area-inset-bottom, 0px))}
.foot-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:40px; align-items:start}
.foot .wordmark{justify-self:start; color:var(--g050)}
.foot .wordmark span{color:var(--g400)}
.foot p{font-size:.86rem; line-height:1.55; max-width:60ch}
.foot nav{display:grid; border-top:1px solid var(--g750)}
.foot nav a{color:var(--g200); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--g750); font-size:.92rem; display:flex; justify-content:space-between}
.foot nav a:hover{color:var(--g050)}

/* ---------- archive / home ---------- */
.page-head{padding-block:64px 40px}
.page-head h1{font-family:var(--serif); font-weight:500; font-size:var(--t-display); line-height:1.08; letter-spacing:-.012em}
.page-head p{margin-top:16px; font-size:var(--t-lede); color:var(--fg-2); max-width:36em}
.search{margin-top:28px; display:flex; align-items:center; gap:10px; max-width:520px; border:1px solid var(--rule-strong); border-radius:10px; padding:0 14px; background:var(--card)}
.search input{all:unset; flex:1; padding:13px 0; font:400 1rem/1.3 var(--sans); color:var(--fg); min-width:0}
.search input::placeholder{color:var(--faint)}
.search:focus-within{outline:2px solid var(--clay); outline-offset:2px}
.issues{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; padding-bottom:72px}
.issue-card{display:grid; grid-template-columns:72px minmax(0,1fr); gap:18px; padding-block:26px; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit; align-items:start}
.issue-card .tile{width:72px}
.issue-card h2{font:700 1.2rem/1.25 var(--sans); margin-top:8px}
.issue-card ul{margin:10px 0 0; padding:0; list-style:none; font-size:.9rem; color:var(--fg-2); display:grid; gap:4px}
.issue-card .read-mark{font-size:.78rem; color:var(--olive)}
.issue-card:hover h2{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em}
.empty{padding-block:40px; color:var(--muted)}

/* ---------- player ---------- */
.player{position:fixed; z-index:55; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:min(680px, calc(100% - var(--gutter) - var(--gutter-r))); background:var(--btn); color:var(--btn-fg); border-radius:14px; box-shadow:var(--shadow); font-family:var(--sans)}
.player-in{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 10px 8px 8px}
.pbtn{all:unset; cursor:pointer; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:inherit; flex:none}
.pbtn:hover{background:color-mix(in srgb, var(--btn-fg) 12%, transparent)}
.pbtn:focus-visible{outline:2px solid var(--clay)}
.pbtn.main{width:44px; height:44px; background:var(--clay); color:#fff}
.pbtn.main:hover{background:var(--clay-ink)}
.pctl{display:flex; gap:2px; align-items:center}
.pnow{min-width:0; cursor:pointer}
.pnow .t{font-size:.9rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pnow .s{font-size:.76rem; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.pbar{height:3px; border-radius:3px; margin-top:7px; background:color-mix(in srgb, var(--btn-fg) 18%, transparent); overflow:hidden}
.pbar i{display:block; height:100%; width:0; background:var(--clay); transition:width .3s}
.popt{display:flex; gap:4px; align-items:center}
.rate{all:unset; cursor:pointer; font:500 .82rem/1 var(--mono); padding:9px 8px; border-radius:8px; min-width:3.2em; text-align:center}
.rate:hover{background:color-mix(in srgb, var(--btn-fg) 12%, transparent)}
.rate:focus-visible{outline:2px solid var(--clay)}
.psheet{position:absolute; right:8px; bottom:calc(100% + 8px); width:min(320px, calc(100vw - 32px)); background:var(--card); color:var(--fg); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); padding:14px; font-size:.88rem}
.psheet label{display:block; font-weight:500; margin-bottom:6px}
.psheet select{width:100%; font:inherit; padding:9px 10px; border-radius:8px; border:1px solid var(--rule-strong); background:var(--bg); color:var(--fg)}
.psheet .row{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px}
.psheet p{margin-top:12px; font-size:.8rem; color:var(--muted); line-height:1.45}
.psheet input[type="checkbox"]{accent-color:var(--clay); width:18px; height:18px}

/* idle player is a compact pill; it opens into the full transport once playback starts */
.player:not(.active){width:auto; left:auto; right:max(16px, env(safe-area-inset-right, 0px)); transform:none}
.player:not(.active) .pctl .pbtn:not(.main), .player:not(.active) .pbar, .player:not(.active) .rate{display:none}
.player:not(.active) .player-in{padding-right:6px}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .story-grid{grid-template-columns:minmax(0,1fr) minmax(0,var(--read)) minmax(0,1fr)}
  .story-grid > .rail{grid-column:2; grid-row:2; margin-top:28px}
  .story-grid > .main{grid-row:3}
  .story-grid > .head{grid-column:2; grid-row:1}
  .rail-box{position:static}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px}
  .fig.wide{margin-inline:0}
}
@media (max-width: 900px){
  .mast{grid-template-columns:minmax(0,1fr); gap:32px; padding-block:48px 40px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px}
  .minute-grid,.briefs,.issues{grid-template-columns:minmax(0,1fr)}
  .brief.wide,.brief.full{grid-column:auto}
  .videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .colophon{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr)}
  .lenses{grid-template-columns:minmax(0,1fr); gap:18px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(3){padding-left:0; border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--rule)}
  .dg-cols,.dg-steps{grid-template-columns:minmax(0,1fr)}
  .dg-col + .dg-col,.dg-step + .dg-step{border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:16px; margin-top:16px}
  .dg-step{padding-right:0}
  .story{padding-block:56px 16px}
  .story-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .story-grid > .head,.story-grid > .rail,.story-grid > .main{grid-column:1}
  .mast .actions .btn{flex:1 1 auto; justify-content:center}
  .section{padding-block:56px 0}
  .top-in{grid-template-columns:auto 1fr; height:60px}
  .top .pills{order:2; justify-self:end}
  .wordmark{justify-self:start}
  .top-right{display:none}
}
@media (max-width: 560px){
  :root{--t-body:1.125rem}
  .pill-nav{padding:6px 12px; font-size:.85rem}
  .wordmark span{display:none}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px}
  .meta div{grid-template-columns:minmax(0,1fr); gap:2px}
  .meta dt{font-size:.8rem; font-weight:400; color:var(--muted)}
  .meta dd{color:var(--fg)}
  .sources li{grid-template-columns:minmax(0,1fr); gap:2px}
  .why{grid-template-columns:minmax(0,1fr)}
  .videos{grid-template-columns:minmax(0,1fr)}
  .player-in{grid-template-columns:auto minmax(0,1fr) auto; gap:8px}
  .pctl .pbtn:not(.main){display:none}
  .player.active .pctl .pbtn:not(.main){display:grid}
  .player.active .pnow .s{display:none}
  .story .tile.cover{width:96px}
  .dg{padding:14px}
  .dg-row{grid-template-columns:repeat(auto-fit, minmax(128px, 1fr))}
  .dg-head{flex-direction:column; gap:6px}
  .dg-big,.dg-sub{text-align:left}
  .player:not(.active){left:max(16px, env(safe-area-inset-left, 0px))}
}