/* Journal articles (/zhurnal/<slug>/): wide hero, contents rail, callouts, figures, sources. Loaded by the page template after site.css (scripts/site-lib.mjs, SECTION_CSS). */
.post .wrap.narrow{max-width:1240px}
.post .post-hero{padding-bottom:0}
.post .post-meta{flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:15px;line-height:1.3}
.post .post-meta span{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.post .post-meta span::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--c)}
.post .post-meta .post-read{color:var(--ink-2)}
.post .post-meta .post-read::before{content:none}
.post .page-h1{max-width:22ch;margin:20px 0 24px;font-size:clamp(34px,4.3vw,70px);line-height:1.02}
.post .post-hero .lead{font-size:clamp(19px,1.5vw,23px);line-height:1.5;max-width:58ch;color:var(--ink)}
.post-hero .cover{min-height:clamp(210px,21vw,320px);margin-top:clamp(28px,3vw,48px);border-radius:28px}
.post-hero .cover span{font-size:clamp(14px,1.05vw,17px);max-width:38ch}
.post-hero .cover b{font-size:clamp(92px,12.5vw,230px)}
.post .page-body{padding:clamp(36px,4vw,64px) 0 0}
.post .prose{font-size:19px;line-height:1.7}
.post .pm > *{max-width:68ch}
.post .pm > * + *{margin-top:14px}
.post .prose .btn{text-decoration:none}
.post .prose .btn-pri{color:#fff}
.post .prose .btn-sec{color:var(--ink)}
.post .prose h2{font-size:clamp(26px,2.3vw,36px);margin-top:60px;scroll-margin-top:96px}
.post .prose h3{margin-top:36px;scroll-margin-top:96px}
.post .prose strong{font-weight:650}
.post .back,.post ~ .cta-band{display:none}

/* contents rail with reading progress (desktop); phones and tablets get a "Contents" button and a bottom sheet */
.toc{display:none}
.post .prose .toc-h{font:600 14px/1 var(--f-d);color:var(--ink);margin-bottom:14px}
.post .prose .toc ol{list-style:none;padding:0;border-left:1.5px solid var(--line);font:500 14.5px/1.35 var(--f-b)}
.post .prose .toc li{margin:0}
.post .prose .toc a{display:block;padding:6px 0 6px 14px;margin-left:-1.5px;border-left:3px solid transparent;color:var(--ink-2);text-decoration:none}
.post .prose .toc a:hover{color:var(--ink)}
.post .prose .toc a[aria-current]{color:var(--ink);border-left-color:var(--c)}
.post .prose .toc-foot{display:flex;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font:500 13.5px/1.3 var(--f-b);color:var(--ink-2)}
.toc-pct{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.read-bar{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--c);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}
.toc-btn{display:none}
.toc-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:min(78vh,620px);margin:0;padding:0 var(--g) calc(16px + env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;background:var(--sheet);color:var(--ink);box-shadow:var(--sh-3);overflow:auto;overscroll-behavior:contain}
.toc-sheet::backdrop{background:rgba(20,18,11,.55)}
.toc-sheet[open]{animation:toc-in .24s ease}
@keyframes toc-in{from{transform:translateY(24px);opacity:0}}
.toc-sheet-h{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 10px;background:var(--sheet);border-bottom:1px solid var(--line)}
.toc-sheet-h b{font:600 18px/1 var(--f-d);letter-spacing:-.01em}
.toc-sheet ol{list-style:none;margin:6px 0 0;padding:0;font:500 16px/1.3 var(--f-b)}
.toc-sheet a{display:flex;align-items:center;min-height:48px;padding:6px 0 6px 14px;border-left:3px solid transparent;color:var(--ink-2);text-decoration:none}
.toc-sheet a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--c,var(--ink))}
.toc-sheet-f{margin:10px 0 0;padding-top:12px;border-top:1px solid var(--line);font:500 14px/1.3 var(--f-b);color:var(--ink-2)}
.toc-sheet-f b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:1180px){
  .toc-btn{position:fixed;right:var(--g);bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 14px;border:0;border-radius:14px;background:var(--ink);color:var(--paper);box-shadow:var(--sh-2);font:600 15px/1 var(--f-d);cursor:pointer;transition:opacity .2s ease,transform .2s ease}
  .toc-btn svg{width:18px;height:18px}
  .toc-btn-p{font:500 13px/1 var(--f-b);opacity:.8;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right}
  .toc-btn:not(.is-on){opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden}
}
@media (min-width:1181px){
  .toc-sheet{display:none}
  .post .pm{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:clamp(48px,6vw,112px);align-items:start}
  .post .pm > *{grid-column:2}
  .post .pm > .toc{display:block;grid-column:1;grid-row:1 / span 400;position:sticky;top:104px}
}

/* "What it means for you": a solid block in the article's colour */
.post .prose .sowhat{background:var(--c);color:var(--c-on);border-radius:24px;padding:clamp(22px,2.6vw,36px);margin-top:40px}
.post .prose .sowhat > * + *{margin-top:12px}
.post .prose .sowhat-h{display:flex;align-items:center;gap:10px;font:700 clamp(20px,1.6vw,24px)/1.2 var(--f-d);letter-spacing:-.02em}
.post .prose .sowhat-h::before{content:"";flex:none;width:12px;height:12px;border-radius:3px;background:currentColor}
.post .prose .sowhat-h strong{font-weight:inherit}
.post .prose .sowhat ul{padding-left:20px}

/* footnote markers → numbered sources */
.post .fn{font-size:max(12px,.62em);line-height:0;vertical-align:super;margin-left:3px;font-weight:600;white-space:nowrap}
.post .prose .fn a{text-decoration:none;padding:1px 4px;border-radius:5px;background:var(--c-t);color:var(--ink)}
.post .prose .fn a:hover{background:var(--c);color:var(--c-on)}
.post .prose .src{list-style:none;padding:0;counter-reset:s;margin-top:18px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.post .prose .src li{counter-increment:s;display:grid;grid-template-columns:32px minmax(0,1fr);padding:12px 8px 12px 0;border-top:1px solid var(--line);margin:0;scroll-margin-top:110px}
.post .prose .src li::before{content:counter(s);font:700 15px/1.55 var(--f-d);color:var(--ink)}
.post .prose .src li:target{background:var(--c-t);color:var(--ink);padding-left:8px;border-radius:10px}
.post .prose .src a{overflow-wrap:anywhere}

/* table */
.post .prose .tbl{overflow-x:auto;margin-top:22px;border-radius:18px;border:1px solid var(--line);background:var(--sheet)}
.post .tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.35;font-variant-numeric:tabular-nums}
.post .tbl th,.post .tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.post .tbl thead th{font:600 13.5px/1.25 var(--f-b);color:var(--ink-2);background:var(--paper-2)}
.post .tbl td:not(:first-child),.post .tbl th:not(:first-child){text-align:right}
.post .tbl td:last-child{background:var(--c-t);font-weight:700}
.post .tbl tbody tr:last-child td{border-bottom:0}

/* figures built from the article's own numbers */
.post .prose .fig{margin-top:30px;margin-bottom:8px}
.post .prose .fig figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.post .prose .strip ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1.5px solid var(--ink);border-radius:22px;overflow:hidden}
.post .prose .strip li{margin:0;background:var(--sheet)}
.post .prose .strip a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 16px 18px;color:var(--ink);text-decoration:none;transition:background .2s}
.post .prose .strip a:hover{background:var(--c-t)}
.st-top{display:flex;align-items:center;gap:8px;font:600 14px/1.2 var(--f-d)}
.st-n{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--c);color:var(--c-on);font:700 13px/1 var(--f-d)}
.st-n svg{width:14px;height:14px}
.strip b{font:800 clamp(34px,3vw,46px)/1 var(--f-d);letter-spacing:-.045em;margin-top:8px;white-space:nowrap}
.st-l{font-size:14px;line-height:1.4;color:var(--ink-2)}
.strip small{margin-top:auto;padding-top:4px;font:600 12.5px/1.3 var(--f-b);color:var(--ink-3)}
.post .prose .strip .st-human{grid-column:1 / -1;background:var(--amber-t)}
.post .prose .strip .st-human a{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 16px}
.st-human .st-n{background:var(--amber);color:#16140F}
.st-human .st-name{font:700 16px/1.2 var(--f-d)}
.st-human .st-l{color:var(--ink)}
.post .prose .replay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;padding:20px 22px;border-radius:22px;background:var(--sheet);border:1px solid var(--line)}
.post .prose .replay figcaption{grid-column:1 / -1;margin-top:0}
.bars-h{font:600 15px/1.3 var(--f-d);margin-bottom:4px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:4px 10px;align-items:center;margin-top:10px}
.bar-w{grid-column:1 / -1;font-size:13.5px;line-height:1.2;color:var(--ink-2)}
.bar-t{height:12px;border-radius:4px;background:var(--paper-2);overflow:hidden}
.bar-t i{display:block;height:100%;border-radius:4px;background:var(--ink)}
.is-first .bar-t i{background:var(--c-t);box-shadow:inset 0 0 0 1.5px var(--c)}
.is-after .bar-t i{background:var(--c)}
.bar b{font:700 17px/1 var(--f-d);text-align:right;font-variant-numeric:tabular-nums}
.post .prose .layers{border:1.5px solid var(--ink);border-radius:22px;overflow:hidden}
.layer{padding:18px 20px}
.post .prose .layer-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.layer-h span{font:700 18px/1.2 var(--f-d);letter-spacing:-.01em}
.layer-h small{font-size:13.5px;line-height:1.35;opacity:.8}
.post .prose .layer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.post .prose .layer li{margin:0;font-size:14.5px;line-height:1.3}
.layer-base{background:var(--paper-2)}
.layer-base li{padding:7px 12px;border-radius:10px;background:var(--sheet);border:1px solid var(--line)}
.layer-paid{background:var(--c);color:var(--c-on)}
.post .prose .layer-paid a{display:inline-block;padding:7px 12px;border-radius:10px;border:1.5px solid currentColor;color:inherit;text-decoration:none}
.post .prose .layer-paid a:hover{background:var(--c-on);color:var(--c)}
.post .prose .layers figcaption{margin:0;padding:12px 20px;background:var(--sheet);border-top:1px solid var(--line)}

/* other articles + next step */
.post .prose .more{margin-top:clamp(56px,6vw,96px);padding-top:26px;border-top:1.5px solid var(--ink)}
.post .prose .more-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px 20px;flex-wrap:wrap}
.post .prose .more-top h2{margin:0}
.post .prose .more-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;margin-top:24px}
.post .prose a.more-it{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center;color:var(--ink);text-decoration:none}
.more-it .cover{aspect-ratio:1;border-radius:20px;padding:12px;justify-content:flex-end;transition:transform .25s ease}
.more-it:hover .cover{transform:translateY(-3px)}
.more-it .cover b{font-size:clamp(30px,2.4vw,38px);letter-spacing:-.05em}
.more-k{font-size:13.5px;color:var(--ink-2)}
.post .prose .more-b h3{margin-top:6px;font:600 clamp(18px,1.4vw,22px)/1.22 var(--f-d);letter-spacing:-.015em}
.more-it:hover h3{text-decoration:underline;text-underline-offset:3px}
.post .prose .next{margin-top:clamp(40px,4vw,64px)}
.post .prose .next .h2{margin:0;font-size:clamp(28px,2.8vw,46px);line-height:1.04;letter-spacing:-.035em}

@media (max-width:760px){
  .post .prose{font-size:17px;line-height:1.66}
  /* footnote markers: 12 px numbers with a 44 px hit area */
  .post .fn{font-size:12px}
  .post .prose .fn a{position:relative}
  .post .prose .fn a::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .post .prose .layer-paid a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
  .post .page-h1{font-size:clamp(30px,8.4vw,40px);margin:16px 0 18px}
  .post-hero .cover{border-radius:22px;min-height:180px}
  .post-hero .cover b{font-size:clamp(76px,24vw,112px)}
  .post .prose h2{margin-top:44px}
  .post .prose .strip ol{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px}
  .post .prose .strip a{padding:14px 12px 16px}
  .strip b{font-size:32px}
  .post .prose .replay{grid-template-columns:minmax(0,1fr);padding:16px}
  .post .tbl table{font-size:13.5px}
  .post .tbl th,.post .tbl td{padding:10px 9px}
  .layer{padding:16px}
  .post .prose .more-list{grid-template-columns:minmax(0,1fr)}
  .post .prose a.more-it{grid-template-columns:104px minmax(0,1fr);gap:14px}
  .more-it .cover{border-radius:16px;padding:10px}
  .more-it .cover b{font-size:25px}
  .post .prose .more-b h3{font-size:17px}
  .post .prose .sowhat{border-radius:20px}
}
/* the <style> block that used to open the article body pushed the first block down by the .prose rhythm; keep that offset */
.post .prose > .pm:first-child{margin-top:14px}