/* Editorial & Educational Publishing
   Print-led system: warm paper, charcoal ink, deep ink blue. Accents come from the books.
   Type: Source Serif 4 (display, upright only) · Satoshi (text) · IBM Plex Mono (print annotations). */

@font-face{font-family:"Satoshi";src:url(fonts/satoshi-var.woff2) format("woff2-variations"),url(fonts/satoshi-var.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Serif4";src:url(fonts/serif4-latin.woff2) format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Serif4";src:url(fonts/serif4-latin-ext.woff2) format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Serif4";src:url(fonts/serif4-cyrillic.woff2) format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02AF,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --paper:#F1ECE2;
  --paper-2:#E8E0D1;
  --sheet:#FBF9F4;
  --ink:#1C1D21;
  --ink-2:#45474D;
  --ink-3:#7C7A73;
  --deep:#16233B;
  --rule:rgba(28,29,33,.16);
  --rule-2:rgba(28,29,33,.32);
  /* accents sampled from the books */
  --gc-orange:#F5A21C; --gc-pink:#E0569A; --gc-teal:#5BB8AE; --gc-violet:#958BD3;
  --tb-green:#3EA94B; --tb-blue:#1C86C8; --tb-red:#E2363F;
  --ol-red:#D7262E; --ol-sky:#5BC2EE;
  --serif:"Serif4","Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Satoshi","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Plex Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,5.2vw,80px);
  --max:1520px;
  --e:cubic-bezier(.22,.61,.15,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;font-style:normal!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--sans);font-size:17px;line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background-image:var(--grain);pointer-events:none;z-index:60;mix-blend-mode:multiply;opacity:.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.serif{font-family:var(--serif)}

/* ---------- header ---------- */
.pbar{position:sticky;top:0;z-index:50;background:rgba(241,236,226,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.pbar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:58px;gap:16px}
.pbar a{text-decoration:none}
.pbar .back{white-space:nowrap;font-size:15px;font-weight:500;color:var(--ink);display:inline-flex;gap:10px;align-items:center}
.pbar .back i{transition:transform .3s var(--e)}
.pbar .back:hover i{transform:translateX(-4px)}
.pbar .mid{text-align:center}
.pbar nav{justify-self:end;display:flex;gap:22px}
.pbar nav a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pbar nav a:hover{color:var(--ink)}

/* ---------- crop marks ---------- */
.crop{position:relative}
.crop>.cm{position:absolute;width:22px;height:22px;pointer-events:none}
.crop>.cm::before,.crop>.cm::after{content:"";position:absolute;background:var(--ink)}
.crop>.cm::before{width:16px;height:1px}
.crop>.cm::after{width:1px;height:16px}
.cm.tl{top:-12px;left:-12px}.cm.tl::before{top:11px;left:-6px}.cm.tl::after{left:11px;top:-6px}
.cm.tr{top:-12px;right:-12px}.cm.tr::before{top:11px;right:-6px}.cm.tr::after{right:11px;top:-6px}
.cm.bl{bottom:-12px;left:-12px}.cm.bl::before{bottom:11px;left:-6px}.cm.bl::after{left:11px;bottom:-6px}
.cm.br{bottom:-12px;right:-12px}.cm.br::before{bottom:11px;right:-6px}.cm.br::after{right:11px;bottom:-6px}

/* ---------- section scaffolding ---------- */
.sec{position:relative;padding:clamp(96px,11vw,176px) 0}
.slug{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule-2);padding-top:12px;margin-bottom:clamp(40px,6vw,88px)}
.slug span:last-child{text-align:right}
.h-xl{font-family:var(--serif);font-weight:600;font-size:clamp(56px,10.4vw,176px);line-height:.88;letter-spacing:-.035em;color:var(--ink);text-transform:uppercase;font-variation-settings:"opsz" 36}
.h-l{font-family:var(--serif);font-weight:600;font-size:clamp(44px,7vw,116px);line-height:.9;letter-spacing:-.03em;color:var(--ink);text-transform:uppercase;font-variation-settings:"opsz" 36}
.h-m{font-family:var(--serif);font-weight:520;font-size:clamp(34px,4.4vw,68px);line-height:.98;letter-spacing:-.025em;color:var(--ink);font-variation-settings:"opsz" 48}
.lede{font-family:var(--serif);font-weight:420;font-size:clamp(22px,2.1vw,32px);line-height:1.28;letter-spacing:-.012em;color:var(--ink);font-variation-settings:"opsz" 30;max-width:30ch}
.body{font-size:clamp(16px,1.15vw,18px);line-height:1.6;max-width:58ch}
.body p+p{margin-top:1em}
.body b{color:var(--ink);font-weight:500}
.rule{height:1px;background:var(--rule-2)}

/* ---------- 00 · intro ---------- */
.intro{min-height:calc(100svh - 58px);padding:clamp(28px,3vw,44px) 0 clamp(48px,6vw,96px);display:flex;flex-direction:column}
.intro .wrap{flex:1;display:flex;flex-direction:column;width:100%}
.intro-top{display:flex;justify-content:space-between;gap:24px;padding-bottom:12px;border-bottom:1px solid var(--rule-2)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr);gap:clamp(32px,5vw,88px);align-items:end;padding-top:clamp(28px,3.4vw,56px)}
.intro h1{font-size:clamp(50px,8.9vw,160px)}
.intro-side{padding-bottom:.6em}
.intro h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.intro h1 .ln>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--e)}
.intro.on h1 .ln>span{transform:none}
.intro h1 .ln:nth-child(2)>span{transition-delay:.08s}.intro h1 .ln:nth-child(3)>span{transition-delay:.16s}
.intro-rev{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;opacity:0;transform:translateY(16px);transition:opacity 1s var(--e) .7s,transform 1s var(--e) .7s}
.intro.on .intro-rev{opacity:1;transform:none}
.intro-rev .lede{max-width:24ch}
.intro-rev .tick{width:40px;height:1px;background:var(--ink);margin-top:.8em}
.intro-copy{margin-top:clamp(24px,2.6vw,36px);display:grid;gap:14px;opacity:0;transition:opacity 1s var(--e) 1s}
.intro.on .intro-copy{opacity:1}
.intro-copy p{font-size:15px;line-height:1.6}

/* shelf: the four real books, standing */
.shelf{position:relative;margin-top:clamp(40px,4vw,64px);padding:0;opacity:0;transform:translateY(20px);transition:opacity 1.2s var(--e) .35s,transform 1.2s var(--e) .35s}
.intro.on .shelf{opacity:1;transform:none}
.shelf-row{position:relative;display:flex;align-items:flex-end;justify-content:space-around;gap:clamp(10px,2vw,32px);perspective:2400px;padding:0 4% 0 0;border-bottom:1px solid var(--ink)}
.book{--w:150px;--t:14px;position:relative;width:var(--w);aspect-ratio:var(--ar,.7);transform-style:preserve-3d;transform:rotateY(-30deg);transform-origin:left bottom;transition:transform .8s var(--e)}
.book:hover{transform:rotateY(-10deg) translateY(-6px)}
.book .fc{position:absolute;inset:0;background-size:cover;background-position:center;box-shadow:inset 3px 0 0 rgba(0,0,0,.12),inset 6px 0 6px -4px rgba(255,255,255,.35);border-radius:0 2px 2px 0}
.book .fc img{width:100%;height:100%;object-fit:cover;border-radius:0 2px 2px 0}
.book .pg{position:absolute;top:3px;bottom:3px;left:100%;width:var(--t);transform-origin:left center;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#f7f3eb 0 1px,#d9d0bf 1px 2px);box-shadow:inset 0 0 8px rgba(0,0,0,.14)}
.book::after{content:"";position:absolute;left:4%;right:-30%;bottom:-6px;height:14px;background:radial-gradient(ellipse at center,rgba(28,29,33,.28),transparent 70%);transform:translateZ(-1px);filter:blur(2px)}
.shelf-cap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,32px);margin-top:14px}
.shelf-cap div{border-top:1px solid var(--rule);padding-top:8px}
.shelf-cap b{display:block;color:var(--ink);font-weight:500;font-family:var(--sans);font-size:13px;text-transform:none;letter-spacing:0;margin-bottom:2px}

/* imprint ledger */
.ledger{margin-top:clamp(56px,7vw,112px)}
.ledger table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-2)}
.ledger th{text-align:left;font-weight:400;text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--ink-3);padding:0 12px 10px 0;border-bottom:1px solid var(--ink)}
.ledger td{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ledger td:first-child{font-family:var(--sans);font-size:16px;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.ledger td.n,.ledger th.n{text-align:right;padding-right:0;font-variant-numeric:tabular-nums}
.ledger tfoot td{border-bottom:0;border-top:1px solid var(--ink);padding-top:16px;color:var(--ink)}
.ledger tfoot td.n{font-family:var(--serif);font-size:clamp(26px,2.6vw,40px);letter-spacing:-.02em;font-variation-settings:"opsz" 40}
.ledger .sw{display:inline-block;width:9px;height:9px;border-radius:1px;margin-right:10px;vertical-align:1px}
.ledger-note{display:flex;justify-content:space-between;gap:16px;margin-top:12px}

/* ---------- chapter opener (project) ---------- */
.chapter{background:var(--sheet);border-top:1px solid var(--rule-2);overflow:hidden}
.chapter::after{content:"";position:absolute;top:0;bottom:0;right:0;width:clamp(10px,1.4vw,22px);background:var(--tab,var(--gc-orange))}
.ch-tab{position:absolute;right:0;top:clamp(170px,17vw,280px);background:var(--tab,var(--gc-orange));color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:14px clamp(14px,1.6vw,26px) 14px 14px;z-index:2}
.ch-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.ch-num{font-family:var(--serif);font-size:clamp(120px,20vw,340px);line-height:.72;color:transparent;-webkit-text-stroke:1px var(--ink);letter-spacing:-.05em;font-weight:400}
.ch-title{margin-top:clamp(20px,2vw,32px)}
.ch-title small{display:block;font-family:var(--mono);font-size:clamp(12px,1vw,14px);letter-spacing:.12em;color:var(--ink-3);margin-top:18px;text-transform:uppercase}
.x-line{display:flex;align-items:center;gap:clamp(16px,3vw,48px);margin-top:clamp(56px,7vw,112px);padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.x-line span{font-family:var(--serif);font-weight:600;font-size:clamp(40px,9vw,156px);line-height:.9;letter-spacing:-.04em;color:var(--ink);font-variation-settings:"opsz" 60}
.x-line i{font-family:var(--serif);font-weight:300;font-size:clamp(32px,5vw,88px);color:var(--ink-3);line-height:1}
.x-line p{flex-basis:100%;max-width:none;margin-top:clamp(8px,1vw,16px)}
.x-line{flex-wrap:wrap}
.ch-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);margin-top:clamp(56px,7vw,112px);align-items:start}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink)}
.facts div{padding:14px 16px 16px 0;border-bottom:1px solid var(--rule)}
.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin-top:4px;color:var(--ink);font-size:15px;line-height:1.4}

/* cover pair */
.covers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,96px);margin-top:clamp(64px,8vw,128px);align-items:end}
.covers figure{position:relative}
.sheet{position:relative;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06),0 30px 60px -30px rgba(28,29,33,.35),0 12px 24px -16px rgba(28,29,33,.2)}
.sheet img{width:100%}
.cap{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.cap b{font-weight:500;color:var(--ink)}

/* quote / role */
.pull{margin-top:clamp(80px,10vw,160px);display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.pull blockquote{margin:0;font-family:var(--serif);font-weight:460;font-size:clamp(34px,4.6vw,76px);line-height:1.02;letter-spacing:-.025em;color:var(--ink);font-variation-settings:"opsz" 60}
.role{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.role .body{font-size:clamp(18px,1.5vw,22px);color:var(--ink);max-width:44ch;line-height:1.5}

/* ---------- 148,050 ---------- */
.scale{background:var(--paper);min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(72px,8vw,120px) 0}
.scale .num{font-family:var(--serif);font-weight:600;font-size:clamp(96px,26vw,460px);line-height:.8;letter-spacing:-.055em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;font-variation-settings:"opsz" 60;white-space:nowrap;margin-left:-.04em;display:inline-block}
.scale .num .c{color:var(--ink-3);font-weight:300}
.scale-meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:clamp(24px,4vw,72px);align-items:start;margin-top:clamp(28px,3vw,48px);border-top:1px solid var(--ink);padding-top:18px}
.scale-meta .what{font-family:var(--serif);font-size:clamp(28px,3vw,48px);line-height:1;color:var(--ink);letter-spacing:-.02em}
.scale-meta .what small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}
.scale-meta .mean{font-family:var(--serif);font-size:clamp(22px,2vw,32px);line-height:1.2;color:var(--ink);max-width:22ch;letter-spacing:-.01em}
.evidence{width:clamp(220px,22vw,320px)}
.evidence .sheet{transform:rotate(1.2deg)}
.edges{margin-top:clamp(40px,5vw,72px);height:56px;background:repeating-linear-gradient(180deg,var(--rule-2) 0 1px,transparent 1px 4px);-webkit-mask:linear-gradient(90deg,#000 0,#000 var(--fill,0%),transparent var(--fill,0%));mask:linear-gradient(90deg,#000 0,#000 var(--fill,0%),transparent var(--fill,0%));transition:--fill 0s}
.edges-cap{display:flex;justify-content:space-between;margin-top:10px}

/* ---------- learning systems ---------- */
.sys-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,5vw,88px);align-items:start;margin-top:clamp(48px,6vw,96px)}
.toc{border-top:1px solid var(--ink);counter-reset:t}
.toc li{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:8px;padding:13px 0;border-bottom:1px solid var(--rule)}
.toc li .k{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.toc li .t{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.1;color:var(--ink);letter-spacing:-.015em;font-variation-settings:"opsz" 36}
.toc li .sw{width:28px;height:10px;border-radius:2px;background:var(--c)}
.sys-copy{margin-top:32px}

/* annotated spread */
.anno{margin-top:clamp(80px,9vw,140px)}
.anno-fig{position:relative}
.anno-fig .sheet{overflow:visible}
.mk{position:absolute;left:var(--x);top:var(--y);width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;display:grid;place-items:center;box-shadow:0 0 0 4px rgba(251,249,244,.85);cursor:default;transition:transform .3s var(--e),background .3s;z-index:2;border:0;padding:0}
.mk.on,.mk:hover{transform:scale(1.25);background:var(--deep)}
.mk.n{background:var(--tb-blue)}.mk.u{background:var(--tb-green)}.mk.r{background:var(--tb-red)}
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--ink)}
.legend li{display:grid;grid-template-columns:34px 1fr;gap:6px;padding:14px 0 14px;border-bottom:1px solid var(--rule);transition:background .3s}
.legend li.on{background:rgba(28,29,33,.05)}
.legend .k{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding-top:2px}
.legend b{display:block;color:var(--ink);font-weight:500;font-size:15px}
.legend span{font-size:14px;line-height:1.45}

/* ---------- spreads sequence ---------- */
.seq{display:flex;flex-direction:column;gap:clamp(96px,11vw,176px);margin-top:clamp(64px,7vw,112px)}
.fig-full .sheet{cursor:zoom-in}
.fig-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:18px}
.fig-head h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.015em;color:var(--ink);line-height:1.1}
.fig-note{max-width:46ch;margin-top:20px;font-size:15px;line-height:1.55}
.sp{position:relative}
.sp::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:60px;margin-left:-30px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.08) 46%,rgba(0,0,0,.16) 50%,rgba(255,255,255,.1) 51%,transparent);pointer-events:none}
.crop-fig{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end}
.zoom{position:relative;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(28,29,33,.35)}
.zoom img{width:100%;transform:scale(1.06);transform-origin:var(--o,50% 50%);transition:transform 2.2s var(--e)}
.zoom.in img,.in .zoom img{transform:none}
.zoom .loupe{position:absolute;left:12px;top:12px;background:var(--paper);color:var(--ink-2);padding:5px 8px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.two.offset>*:nth-child(2){margin-top:clamp(48px,8vw,140px)}

/* ---------- localisation ---------- */
.loc{background:var(--deep);color:#C5CCD8}
.loc .slug{border-color:rgba(255,255,255,.3)}
.loc .mono{color:#8C98AD}
.loc .h-l,.loc .h-m,.loc .lede{color:#F4EFE6}
.loc .body b{color:#F4EFE6}
.loc-front{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin-top:clamp(56px,7vw,104px);align-items:end}
.loc-front figure:nth-child(3){position:relative}
.loc-front .sheet{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.loc .cap{color:#8C98AD}.loc .cap b{color:#F4EFE6}
.handover{display:flex;align-items:center;gap:16px;margin-top:28px}
.handover .ln{flex:1;height:1px;background:rgba(255,255,255,.3)}
.loc-detail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);margin-top:clamp(80px,9vw,140px);align-items:start}
.loc-detail figure .sheet{box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.loc-detail .a{grid-column:1/8}.loc-detail .b{grid-column:8/13;margin-top:clamp(40px,6vw,96px)}
.loc-detail .c{grid-column:1/6}.loc-detail .d{grid-column:6/13;margin-top:clamp(24px,4vw,64px)}
.loc-detail .e{grid-column:3/11}
.survive{margin-top:clamp(96px,11vw,176px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px)}
.survive-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:8px}

/* ---------- statement ---------- */
.statement{min-height:100svh;display:flex;align-items:center;background:var(--paper)}
.statement .h-xl{font-size:clamp(46px,8.8vw,156px)}
.statement .a{color:var(--ink-3)}
.statement .gap{display:block;height:clamp(28px,4vw,64px)}

/* ---------- Təbiət ---------- */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,72px);margin-top:clamp(56px,7vw,112px)}
.pair-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,32px);margin-top:clamp(64px,8vw,128px)}
.pair-title span{font-family:var(--serif);font-weight:560;font-size:clamp(44px,9vw,160px);letter-spacing:-.04em;line-height:.9;color:var(--ink);font-variation-settings:"opsz" 60}
.pair-title span:last-child{text-align:right}
.pair-title i{font-family:var(--serif);font-size:clamp(44px,9vw,160px);font-weight:200;color:var(--tb-green);line-height:.9}
.credit{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center;margin-top:clamp(48px,6vw,80px);padding:20px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.credit .sheet{width:clamp(220px,24vw,340px)}

.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(32px,4vw,56px)}
.pr{border-top:3px solid var(--c);padding-top:18px}
.pr h3{font-family:var(--serif);font-weight:560;font-size:clamp(34px,3.6vw,56px);letter-spacing:-.03em;line-height:.95;color:var(--ink);text-transform:uppercase}
.pr p.t{font-family:var(--serif);font-size:clamp(18px,1.4vw,22px);color:var(--ink);margin-top:10px;line-height:1.25}
.pr ul{margin-top:18px;border-top:1px solid var(--rule)}
.pr li{display:grid;grid-template-columns:30px 1fr;gap:6px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.45;cursor:default}
.pr li .k{font-family:var(--mono);font-size:11px;color:var(--c);padding-top:2px}
.pr li.on{background:rgba(28,29,33,.05)}
.guide-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);margin-top:28px;border-top:1px solid var(--ink)}
.guide-list li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:14px}
.guide-list b{display:block;color:var(--ink);font-weight:500;font-size:15px}
.guide-list .sw{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c);margin-right:8px}

/* wipe compare */
.wipe{position:relative;user-select:none;touch-action:pan-y;cursor:ew-resize}
.wipe .top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p,50%));}
.wipe .top img{width:100%;height:100%}
.wipe .bar{position:absolute;top:-14px;bottom:-14px;left:var(--p,50%);width:1px;background:var(--ink);pointer-events:none}
.wipe .bar::after{content:"AZ  |  RU";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:8px 12px;white-space:pre;border-radius:2px}
.wipe input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.aligned{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);margin-top:clamp(64px,7vw,112px)}
.aligned .row-cap{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--rule-2);padding-top:10px;margin-top:clamp(20px,3vw,48px)}
.aligned .row-cap:first-child{margin-top:0}

/* ---------- skills through the work ---------- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(56px,6vw,96px)}
.proof h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,36px);color:var(--ink);letter-spacing:-.02em;margin-top:22px}
.proof ul{margin-top:14px;border-top:1px solid var(--rule)}
.proof li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.tools{display:flex;gap:28px;justify-content:center;margin-top:clamp(56px,6vw,96px)}

/* scope band */
.scope{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:clamp(48px,6vw,96px)}
.scope div{padding:clamp(20px,2.4vw,36px) clamp(12px,1.6vw,24px) clamp(20px,2.4vw,36px) 0;border-right:1px solid var(--rule)}
.scope div+div{padding-left:clamp(12px,1.6vw,24px)}
.scope div:last-child{border-right:0}
.scope b{display:block;font-family:var(--serif);font-weight:560;font-size:clamp(44px,5.6vw,96px);line-height:.9;letter-spacing:-.04em;color:var(--ink);font-variation-settings:"opsz" 60}
.scope span{display:block;margin-top:12px}

/* ---------- ending ---------- */
.end{min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:var(--sheet);overflow:hidden;border-top:1px solid var(--rule-2)}
.end-h{font-size:clamp(48px,9.6vw,168px)}
.end-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,96px);align-items:end;margin-top:clamp(40px,5vw,80px)}
.end-words{font-family:var(--serif);font-size:clamp(26px,2.8vw,44px);line-height:1.15;color:var(--ink);letter-spacing:-.015em}
.end-words span{display:block;opacity:0;transform:translateY(12px);transition:opacity .9s var(--e),transform .9s var(--e)}
.end.in .end-words span{opacity:1;transform:none}
.end.in .end-words span:nth-child(2){transition-delay:.25s}.end.in .end-words span:nth-child(3){transition-delay:.5s}.end.in .end-words span:nth-child(4){transition-delay:.75s;color:var(--ink-3)}
.leaf{position:relative;aspect-ratio:1.42;perspective:2200px}
.leaf .pgL,.leaf .pgR,.leaf .turn{position:absolute;top:0;bottom:0;width:50%;background-size:200% 100%;box-shadow:0 30px 60px -30px rgba(28,29,33,.4)}
.leaf .pgL{left:0;background-position:0 0}
.leaf .pgR{right:0;background-position:100% 0}
.leaf .turn{right:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 2.4s var(--e);background-position:100% 0;z-index:2}
.leaf .turn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%);opacity:0;transition:opacity 2.4s var(--e)}
.end.in .leaf .turn{transform:rotateY(-12deg)}
.end.in .leaf .turn::after{opacity:1}
.end-foot{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(64px,8vw,120px);border-top:1px solid var(--rule-2);padding-top:16px;flex-wrap:wrap}
.end-foot a{font-size:16px;font-weight:500;color:var(--ink);text-decoration:none}
.end-foot a:hover{text-decoration:underline;text-underline-offset:4px}

/* folio counter */
.folio{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,24px);z-index:40;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-2);background:rgba(241,236,226,.9);padding:6px 10px;border:1px solid var(--rule);display:flex;gap:10px;transition:opacity .4s}
.folio.dark{background:rgba(22,35,59,.9);color:#C5CCD8;border-color:rgba(255,255,255,.18)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(24,25,28,.94);display:none;overflow:auto;-webkit-overflow-scrolling:touch}
.lb.open{display:block}
.lb img{max-width:none;width:min(2400px,180vw);margin:56px auto;display:block;cursor:zoom-out}
@media (min-width:1000px){.lb img{width:min(2400px,96vw)}}
.lb button{position:fixed;top:12px;right:16px;background:var(--paper);color:var(--ink);border:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:10px 14px;cursor:pointer;z-index:2}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e),transform 1s var(--e)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}
.settle{opacity:0;transform:translateY(28px) scale(.985);transition:opacity 1s var(--e),transform 1.4s var(--e)}
.settle.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .intro-grid{grid-template-columns:1fr;align-items:start}
  .shelf{margin-top:24px}
  .sys-grid,.ch-intro,.crop-fig,.end-grid{grid-template-columns:1fr}
  .pull,.role{grid-template-columns:1fr}
  .scale-meta{grid-template-columns:1fr 1fr}
  .scale-meta .evidence{grid-column:1/-1}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loc-detail .a,.loc-detail .b,.loc-detail .c,.loc-detail .d,.loc-detail .e{grid-column:1/-1;margin-top:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .pbar .mid{display:none}
  .pbar .wrap{grid-template-columns:1fr auto}
  .pbar nav{gap:14px}
  .intro-copy,.covers,.principles,.proof,.guide-list,.two,.survive,.aligned{grid-template-columns:1fr}
  .two.offset>*:nth-child(2){margin-top:0}
  .legend{grid-template-columns:1fr}
  .shelf-cap{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:9.5px}
  .shelf-cap b{font-size:11px}
  .book{--w:21vw}
  .ledger table thead{display:none}
  .ledger table,.ledger tbody,.ledger tfoot,.ledger tr,.ledger td{display:block;width:100%}
  .ledger tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--rule)}
  .ledger td{border:0;padding:0}
  .ledger td:first-child{grid-column:1/-1}
  .ledger td.hide-m{display:none}
  .ledger tfoot tr{border-top:1px solid var(--ink);border-bottom:0}
  .x-line{flex-wrap:wrap}.x-line p{margin-left:0;text-align:left;width:100%}
  .scale-meta{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .scope{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scope div{border-bottom:1px solid var(--rule)}
  .scope div:nth-child(2n+1){padding-left:0}
  .scope div:nth-child(2n){border-right:0}
  .loc-front{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mk{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:10px;box-shadow:0 0 0 3px rgba(251,249,244,.85)}
  .sp::after{display:none}
  .ch-tab{display:none}
  .credit{grid-template-columns:1fr}
  .tools{flex-wrap:wrap;gap:12px 20px}
  .slug{flex-direction:column;gap:4px}.slug span:last-child{text-align:left}
  .folio{display:none}
  .edges-cap{flex-direction:column;gap:4px}
}
@media (max-width:480px){.pbar nav a:first-child{display:none}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rv,.settle,.intro h1 .ln>span,.intro-rev,.intro-copy,.shelf,.end-words span{opacity:1!important;transform:none!important}
}

/* 03 · Oliver! JR. programme */
.ol .pair{max-width:980px}
.ol .zoom{background:#fff}
@media (max-width:760px){.ol .pair{grid-template-columns:1fr 1fr;gap:14px}}
/* slim end: closing statement removed, only the page footer remains */
.end.end-slim{min-height:0;display:block;border-top:0;padding:clamp(24px,3vw,40px) 0 clamp(72px,7vw,96px)}
.end.end-slim .end-foot{margin-top:0}