/* Yashika, in the making — editorial paper notebook system */
:root{
  --paper:#f3ede2; --paper-2:#ebe3d4; --paper-3:#e2d8c6; --card:#faf6ee;
  --ink:#171411; --ink-2:#3f3932; --muted:#7a7064; --rule:#d6ccba;
  --red:#b4412b; --kraft:#a9845a; --kraft-2:#8c6a44;
  --accent:var(--red);
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --sans:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --hand:"Caveat",cursive;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4vw,56px);
  --max:1360px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);font-variation-settings:"wdth" 100;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* paper grain + faint fibres over everything */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.2;mix-blend-mode:multiply;
  background-image: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 .24 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
.display{font:400 clamp(56px,11.5vw,188px)/.86 var(--serif);letter-spacing:-.02em;margin:0}
.h1{font:400 clamp(44px,7.4vw,112px)/.9 var(--serif);letter-spacing:-.015em;margin:0}
.h2{font:400 clamp(34px,4.8vw,72px)/.95 var(--serif);letter-spacing:-.01em;margin:0}
.h3{font:400 clamp(26px,2.6vw,38px)/1.05 var(--serif);margin:0}
.cond{font-family:var(--sans);font-variation-settings:"wdth" 68;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.9}
.label{font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hand{font:500 clamp(22px,2.1vw,30px)/1.05 var(--hand);color:var(--accent)}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink-2);max-width:34em}
.muted{color:var(--muted)}
em{font-style:italic}
.serif-i{font-family:var(--serif);font-style:italic}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.pad{padding-block:clamp(72px,11vw,168px)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.grid{display:grid;gap:clamp(16px,2vw,28px)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{font:400 21px/1 var(--serif);text-decoration:none;white-space:nowrap}
.brand i{font-style:italic}
.nav{display:flex;gap:clamp(14px,2.4vw,30px);font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:640px){.nav{gap:12px;font-size:10.5px;letter-spacing:.1em}.brand{font-size:17px}.nav .hide-sm{display:none}}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
[data-reveal].in{opacity:1;transform:none}
.js-off [data-reveal]{opacity:1;transform:none}

/* kinetic line reveal: wrap each line in .ln > span */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
.in .ln>span,.ln.in>span{transform:none}

/* typing */
.type-caret::after{content:"";display:inline-block;width:.06em;height:.82em;margin-left:.06em;background:currentColor;vertical-align:-.04em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* handwritten annotation + drawn arrow */
.note{display:inline-flex;align-items:flex-end;gap:6px;transform:rotate(-4deg)}
.note svg{width:64px;height:26px;flex:none;overflow:visible}
.note path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.2s var(--ease) .5s}
.note.in path,.in .note path{stroke-dashoffset:0}
.scribble{position:relative;white-space:nowrap}
.scribble svg{position:absolute;left:-4%;bottom:-.12em;width:108%;height:.4em;overflow:visible}
.scribble path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.4s var(--ease) .6s}
.in .scribble path,.scribble.in path{stroke-dashoffset:0}

/* ---------- paper objects ---------- */
.sheet{background:var(--card);box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px -18px rgba(60,40,20,.35),0 2px 6px -2px rgba(60,40,20,.18);position:relative}
.tape{position:absolute;width:92px;height:26px;background:rgba(233,222,196,.78);box-shadow:0 1px 2px rgba(0,0,0,.08);top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);backdrop-filter:blur(1px)}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:6px;background:inherit;-webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px 4px,transparent 4px);}
.tape::before{left:-5px}.tape::after{right:-5px}
.torn{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1 L6 0 L13 1.4 L21 .3 L29 1.2 L37 .2 L46 1.5 L55 .4 L63 1.3 L72 .1 L80 1.1 L89 .3 L100 1.2 L100 98.8 L93 100 L84 98.6 L76 99.8 L67 98.7 L58 99.9 L49 98.5 L41 99.7 L32 98.8 L23 99.9 L14 98.6 L6 99.8 L0 98.9Z'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 1 L6 0 L13 1.4 L21 .3 L29 1.2 L37 .2 L46 1.5 L55 .4 L63 1.3 L72 .1 L80 1.1 L89 .3 L100 1.2 L100 98.8 L93 100 L84 98.6 L76 99.8 L67 98.7 L58 99.9 L49 98.5 L41 99.7 L32 98.8 L23 99.9 L14 98.6 L6 99.8 L0 98.9Z'/%3E%3C/svg%3E") 0 0/100% 100%}
.ruled{background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(120,140,170,.22) 31px 32px)}
.polaroid{background:#fbf8f2;padding:10px 10px 38px;box-shadow:0 14px 30px -14px rgba(60,40,20,.4)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7em;font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:16px 22px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.link{font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:5px}
.link:hover{color:var(--accent)}

/* ---------- notebook cover intro (home) ---------- */
.nb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#e7dfd0;perspective:2200px;transition:opacity .8s var(--ease) .2s}
.nb.gone{opacity:0;pointer-events:none}
.nb{padding-bottom:70px}
.nb-book{position:relative;width:min(78vw,520px,calc((100svh - 170px)*.75));aspect-ratio:3/4;transform-style:preserve-3d;transform:rotateX(8deg) rotateZ(-2deg);transition:transform 1.4s var(--ease)}
.nb.open .nb-book{transform:rotateX(0) rotateZ(0) scale(1.04) translateX(12%)}
.nb-page{position:absolute;inset:0;background:var(--card);border-radius:3px 10px 10px 3px;box-shadow:0 40px 80px -30px rgba(40,25,10,.55);padding:12% 11%;display:flex;flex-direction:column;justify-content:center;gap:16px}
.nb-page .ruled{position:absolute;inset:0;opacity:.6;border-radius:inherit}
.nb-page>*{position:relative}
.nb-cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.65,.02,.22,1);z-index:2}
.nb.open .nb-cover{transform:rotateY(-168deg)}
.nb-front,.nb-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3px 12px 12px 3px}
.nb-front{background:radial-gradient(120% 90% at 30% 20%,#c09a6c,#a17a4d 55%,#8a6439);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 14px 0 18px -10px rgba(0,0,0,.35),0 40px 80px -30px rgba(40,25,10,.6);display:flex;flex-direction:column;justify-content:space-between;padding:10% 10% 9% 14%;color:#2a1d10}
.nb-front::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.5;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E")}
.nb-front>*{position:relative}
.nb-band{position:absolute;top:0;bottom:0;right:13%;width:14px;background:linear-gradient(90deg,#1b1714,#3a332d 50%,#1b1714);box-shadow:2px 0 4px rgba(0,0,0,.3);z-index:3;transition:transform .7s var(--ease),opacity .5s}
.nb.unband .nb-band{transform:translateX(70px) rotate(8deg);opacity:0}
.nb-label{background:#f6f0e2;padding:18px 20px 16px;box-shadow:0 2px 6px rgba(0,0,0,.2);transform:rotate(-1.5deg);align-self:flex-start;max-width:86%}
.nb-label .t{font:400 clamp(26px,4.4vw,40px)/.95 var(--serif)}
.nb-back{transform:rotateY(180deg);background:#e9e0cf;box-shadow:inset -10px 0 20px -10px rgba(0,0,0,.25)}
.nb-back .hand{position:absolute;inset:auto 12% 14% 12%;color:#6b5a45;font-size:24px}
.nb-hint{position:absolute;bottom:clamp(24px,5vh,48px);left:0;right:0;text-align:center}
.nb-hint button{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:14px 22px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper)}
.nb-hint button:hover{background:var(--ink);color:var(--paper)}
.nb-skip{position:absolute;top:18px;right:20px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:underline}

/* ---------- project index tabs (editorial papers) ---------- */
.papers{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,34px);align-items:start}
.paper{--tab:var(--ink);grid-column:span 4;position:relative;text-decoration:none;display:block;padding-top:30px;transition:transform .6s var(--ease)}
.paper:nth-child(5n+1){transform:rotate(-1.2deg)}
.paper:nth-child(5n+2){transform:rotate(.9deg) translateY(36px)}
.paper:nth-child(5n+3){transform:rotate(-.6deg) translateY(10px)}
.paper:nth-child(5n+4){transform:rotate(1.1deg)}
.paper:nth-child(5n+5){transform:rotate(-.9deg) translateY(28px)}
.paper:hover{transform:rotate(0) translateY(-8px)}
.paper .tabx{position:absolute;top:0;left:22px;height:32px;padding:0 14px;display:flex;align-items:center;background:var(--tab);color:#fff;font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;border-radius:6px 6px 0 0}
.paper .sheet{padding:14px 14px 20px}
.paper .ph{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.paper .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.paper:hover .ph img{transform:scale(1.045)}
.paper .meta{padding:16px 4px 0;display:grid;gap:8px}
.paper .num{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.paper .name{font:400 clamp(28px,2.6vw,38px)/.95 var(--serif)}
.paper .q{font:400 italic 18px/1.3 var(--serif);color:var(--ink-2)}
.paper .cat{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.paper .sig{font:700 14px/1.3 var(--sans);font-variation-settings:"wdth" 80;color:var(--tab)}
.paper .kind{position:absolute;top:44px;right:-8px;z-index:2;background:var(--paper);border:1.5px solid var(--ink);padding:6px 10px;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;transform:rotate(4deg)}
@media (max-width:980px){.paper{grid-column:span 6}}
@media (max-width:620px){.paper{grid-column:span 12}.paper:nth-child(n){transform:none}}

/* page-open transition (scrapbook unfold) */
.unfold{position:fixed;z-index:300;background:var(--card);pointer-events:none;transform-origin:top left;box-shadow:0 30px 80px -20px rgba(40,25,10,.5);transition:all .75s cubic-bezier(.7,0,.2,1)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.45s var(--ease) both vt-out}
::view-transition-new(root){animation:.7s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px) rotate(.4deg)}}

/* ---------- four worlds ---------- */
.worlds{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--ink)}
.world{padding:26px clamp(14px,1.6vw,26px) 34px;border-right:1px solid var(--rule);position:relative;overflow:hidden}
.world:last-child{border-right:0}
.world h3{font:400 clamp(44px,5vw,80px)/.9 var(--serif);margin:0 0 10px;transition:color .4s}
.world .hand{font-size:22px;display:block;margin-bottom:18px;min-height:2.2em}
.world ul{list-style:none;margin:0;padding:0;font:500 12px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.world:hover h3{color:var(--accent)}
.world::before{content:attr(data-n);position:absolute;right:14px;top:18px;font:500 11px/1 var(--mono);color:var(--muted)}
@media (max-width:900px){.worlds{grid-template-columns:1fr 1fr}.world:nth-child(2){border-right:0}.world{border-bottom:1px solid var(--rule)}}
@media (max-width:520px){.worlds{grid-template-columns:1fr}.world{border-right:0}}

/* marquee */
.marquee{overflow:hidden;border-block:1.5px solid var(--ink);padding:18px 0;white-space:nowrap}
.marquee .track{display:inline-flex;gap:48px;animation:mq 38s linear infinite;font:400 clamp(30px,4vw,56px)/1 var(--serif)}
.marquee .track span:nth-child(even){font-style:italic;color:var(--accent)}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* timeline */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:48px}
.tl::before{content:"";position:absolute;left:0;right:0;top:12px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.tl.in::before{transform:scaleX(1)}
.tl li{list-style:none;padding:36px 18px 0 0;position:relative}
.tl li::before{content:"";position:absolute;top:6px;left:0;width:13px;height:13px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.tl li:last-child::before{background:var(--accent);border-color:var(--accent)}
.tl .yr{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.tl .who{font:400 clamp(26px,2.6vw,38px)/1 var(--serif);margin:10px 0 8px}
.tl p{margin:0;color:var(--ink-2);font-size:15.5px}
@media (max-width:820px){.tl{grid-template-columns:1fr 1fr;row-gap:28px}}
@media (max-width:480px){.tl{grid-template-columns:1fr}}

/* side-quest strip */
.quests{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,22px)}
.quest{text-decoration:none;transition:transform .5s var(--ease)}
.quest:nth-child(odd){transform:rotate(-2deg)}.quest:nth-child(even){transform:rotate(1.6deg) translateY(14px)}
.quest:hover{transform:rotate(0) translateY(-6px)}
.quest .polaroid div{aspect-ratio:1;overflow:hidden;background:#222}
.quest img,.quest video{width:100%;height:100%;object-fit:cover}
.quest .cap{font:500 20px/1 var(--hand);text-align:center;margin-top:-26px;position:relative;color:var(--ink-2)}
@media (max-width:820px){.quests{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.quests{grid-template-columns:repeat(2,1fr)}}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding:clamp(80px,12vw,160px) 0 34px;position:relative;overflow:hidden}
.foot .h1{color:var(--paper)}
.foot a{color:var(--paper)}
.foot .row{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:36px}
.foot .btn{border-color:var(--paper);color:var(--paper)}
.foot .btn:hover{background:var(--paper);color:var(--ink)}
.foot .end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:clamp(70px,10vw,130px);padding-top:22px;border-top:1px solid rgba(243,237,226,.2);font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a99f90}
.foot .hand{color:#e4836c}

/* ---------- case-study broadsheet ---------- */
.cs{--accent:var(--red)}
.mast{border-bottom:3px double var(--ink);padding:26px 0 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px}
.mast .label:last-child{text-align:right}
.mast .paper-name{font:400 clamp(22px,2.4vw,32px)/1 var(--serif);font-style:italic;text-align:center}
@media (max-width:700px){.mast{grid-template-columns:1fr}.mast .label:last-child,.mast .paper-name{text-align:left}}
.cs-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(40px,6vw,90px) 0 clamp(36px,5vw,70px)}
.cs-hero .ph{position:relative}
.cs-hero .ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:860px){.cs-hero{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-block:1.5px solid var(--ink)}
.fact{padding:18px 18px 18px 0;border-right:1px solid var(--rule)}
.fact:last-child{border-right:0}
.fact b{display:block;font:800 clamp(28px,3vw,46px)/1 var(--sans);font-variation-settings:"wdth" 72;letter-spacing:-.01em}
.fact span{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chapter{display:grid;grid-template-columns:minmax(150px,.32fr) 1fr;gap:clamp(18px,4vw,64px);padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--rule)}
.chapter>.label{position:sticky;top:90px;align-self:start;color:var(--accent)}
.chapter .body{max-width:44em}
.chapter .body p{margin:0 0 1em;font-size:clamp(17px,1.35vw,19.5px);color:var(--ink-2)}
.chapter .body p.big{font:400 clamp(30px,3.6vw,52px)/1.04 var(--serif);color:var(--ink);margin-bottom:.6em}
.dropcap::first-letter{float:left;font:400 5.2em/.78 var(--serif);margin:.06em .1em 0 0;color:var(--accent)}
@media (max-width:760px){.chapter{grid-template-columns:1fr}.chapter>.label{position:static}}
.pull{font:400 clamp(40px,6.4vw,104px)/.92 var(--serif);text-align:center;padding:clamp(64px,10vw,140px) 0;max-width:15em;margin-inline:auto}
.pull .hand{display:block;font-size:clamp(22px,2vw,28px);margin-top:20px}
.moves{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.move{padding:22px 20px 26px 0;border-bottom:1px solid var(--rule)}
.move:not(:nth-child(3n)){border-right:1px solid var(--rule);margin-right:0}
.move .n{font:800 46px/1 var(--sans);font-variation-settings:"wdth" 70;color:var(--accent)}
.move h4{font:800 17px/1.1 var(--sans);font-variation-settings:"wdth" 80;text-transform:uppercase;margin:10px 0 8px}
.move p{margin:0;font-size:15px;color:var(--ink-2);padding-right:12px}
.move{padding-left:18px}
@media (max-width:820px){.moves{grid-template-columns:1fr 1fr}.move:not(:nth-child(3n)){border-right:0}.move:nth-child(odd){border-right:1px solid var(--rule)}}
@media (max-width:520px){.moves{grid-template-columns:1fr}.move:nth-child(n){border-right:0}}
.receipts{display:grid;gap:0;border-top:1.5px solid var(--ink)}
.receipt{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;padding:26px 0;border-bottom:1px solid var(--rule)}
.receipt b{font:800 clamp(52px,8.4vw,132px)/.86 var(--sans);font-variation-settings:"wdth" 66;letter-spacing:-.02em}
.receipt span{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right;max-width:20em}
@media (max-width:640px){.receipt{grid-template-columns:1fr}.receipt span{text-align:left}}
.frame{background:var(--ink);color:var(--paper);padding:clamp(40px,7vw,100px) clamp(22px,5vw,80px);margin:0}
.frame .label{color:#a99f90}
.frame-cream{background:var(--paper-2)}
.figure{margin:0}
.figure img{width:100%}
.figure figcaption{margin-top:12px;font:500 11.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.honest{border:1.5px dashed var(--muted);padding:22px 24px;font-size:15px;color:var(--ink-2);max-width:46em;background:rgba(255,255,255,.25)}
.honest .label{display:block;margin-bottom:8px;color:var(--accent)}
.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px);align-items:start}
.collage>*{grid-column:span 4}
.collage .w6{grid-column:span 6}.collage .w8{grid-column:span 8}.collage .w3{grid-column:span 3}.collage .w12{grid-column:span 12}.collage .w5{grid-column:span 5}.collage .w7{grid-column:span 7}
.collage .tilt-l{transform:rotate(-1.4deg)}.collage .tilt-r{transform:rotate(1.2deg)}
@media (max-width:760px){.collage>*{grid-column:span 6!important}.collage .w12,.collage .w8,.collage .w7{grid-column:span 12!important}}
@media (max-width:460px){.collage>*{grid-column:span 12!important}}
.next{display:block;text-decoration:none;padding:clamp(70px,10vw,140px) 0;border-top:3px double var(--ink);text-align:center}
.next .h1{transition:color .4s}
.next:hover .h1{color:var(--accent)}

/* ---------- story film player ---------- */
.play-story{display:inline-flex;align-items:center;gap:14px;text-decoration:none;cursor:pointer}
.play-story .disc{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:transform .5s var(--ease),background .4s;position:relative}
.play-story .disc::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed var(--ink);animation:spin 14s linear infinite}
.play-story:hover .disc{transform:scale(1.08);background:var(--accent)}
.play-story .t{display:grid;gap:4px;text-align:left}
.play-story .t b{font:400 26px/1 var(--serif)}
@keyframes spin{to{transform:rotate(360deg)}}
.film{position:fixed;inset:0;z-index:400;background:#0d0b09;color:#f3ede2;display:none;overflow:hidden}
.film.on{display:block}
.film .scene{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.film .scene.cur{opacity:1}
.film .scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transform:scale(1.04)}
.film .scene.cur img{animation:kb 9s linear both}
.film .scene:nth-child(even).cur img{animation-name:kb2}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-2%,-1.5%)}}
@keyframes kb2{from{transform:scale(1.16) translate(2%,1%)}to{transform:scale(1.04) translate(0,0)}}
.film .scene.paper-card{background:var(--paper);color:var(--ink)}
.film .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,9,.25),rgba(13,11,9,.1) 40%,rgba(13,11,9,.78))}
.film .scene.paper-card::after{display:none}
.film .cap{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(70px,13vh,130px);z-index:2;max-width:980px}
.film .cap .label{color:#d9a48f}
.film .paper-card .cap .label{color:var(--accent)}
.film .cap p{font:400 clamp(30px,4.4vw,64px)/1.04 var(--serif);margin:14px 0 0}
.film .cap .hand{display:block;margin-top:14px;color:#ef9a82}
.film .paper-card .cap{top:50%;bottom:auto;transform:translateY(-50%)}
.film .bars{position:absolute;top:16px;left:var(--gut);right:var(--gut);display:flex;gap:6px;z-index:3}
.film .bars i{flex:1;height:2.5px;background:rgba(243,237,226,.25);overflow:hidden;border-radius:2px}
.film .bars i b{display:block;height:100%;background:#f3ede2;transform:scaleX(0);transform-origin:left}
.film .bars i.done b{transform:scaleX(1)}
.film .ui{position:absolute;top:34px;left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:center;z-index:3;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.film .ui button{padding:10px 14px;border:1px solid rgba(243,237,226,.4);border-radius:999px}
.film .ui button:hover{background:#f3ede2;color:#0d0b09}
.film .hit{position:absolute;top:80px;bottom:0;width:35%;z-index:2}
.film .hit.l{left:0;cursor:w-resize}.film .hit.r{right:0;cursor:e-resize}
.film.paper .bars i{background:rgba(23,20,17,.15)}.film.paper .bars i b{background:var(--ink)}
.film.paper .ui{color:var(--ink)}.film.paper .ui button{border-color:rgba(23,20,17,.4)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal],.ln>span{opacity:1;transform:none}
}
/* documents/charts inside a story film sit on paper, never cropped */
.film .scene.doc{background:var(--paper-2);color:var(--ink)}
.film .scene.doc::after{display:none}
.film .scene.doc img{inset:96px var(--gut) auto;width:auto;height:auto;max-width:calc(100% - 2*var(--gut));max-height:42vh;margin-inline:auto;object-fit:contain;opacity:1;box-shadow:0 18px 40px -20px rgba(60,40,20,.45)}
.film .scene.doc.cur img{animation:docin 1.2s var(--ease) both}
@keyframes docin{from{opacity:0;transform:translateY(16px) rotate(-1deg)}to{opacity:1;transform:rotate(-.6deg)}}
.film .scene.doc .cap .label{color:var(--accent)}
.film .scene.doc .cap .hand{color:var(--accent)}

/* ================= FLIPBOOK: scroll turns real pages ================= */
.book{position:relative;height:calc(var(--leaves,6) * 85svh + 100svh)}
.book-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding-top:64px;perspective:2600px;overflow:hidden}
.book-body{position:relative;width:min(94vw,1180px);aspect-ratio:2/1.28;max-height:74svh;transform-style:preserve-3d;transform:rotateX(9deg);transition:transform 1s var(--ease)}
.book.single .book-body{width:min(90vw,460px);aspect-ratio:3/4.35;max-height:78svh}
.book-base,.leaf{position:absolute;top:0;bottom:0;width:50%}
.book.single .book-base,.book.single .leaf{width:100%}
.book-base.l{left:0}.book-base.r{right:0}
.book.single .book-base.l{display:none}
.leaf{right:0;transform-origin:left center;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);overflow:hidden}
.face.back{transform:rotateY(180deg)}
.book-base,.face{box-shadow:0 30px 60px -30px rgba(60,40,20,.5)}
.face::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:var(--shade,0);background:linear-gradient(90deg,rgba(40,25,10,.38),rgba(40,25,10,0) 70%)}
.face.back::before{background:linear-gradient(270deg,rgba(40,25,10,.38),rgba(40,25,10,0) 70%)}
.book-base.l,.face.back{border-radius:6px 0 0 6px}
.book-base.r,.face.front{border-radius:0 6px 6px 0}
.book.single .face.front,.book.single .book-base.r{border-radius:4px 8px 8px 4px}
/* gutter shading */
.face.front::after,.book-base.r::after{content:"";position:absolute;top:0;bottom:0;left:0;width:9%;background:linear-gradient(90deg,rgba(60,40,20,.2),transparent);pointer-events:none;z-index:2}
.face.back::after,.book-base.l::after{content:"";position:absolute;top:0;bottom:0;right:0;width:9%;background:linear-gradient(270deg,rgba(60,40,20,.2),transparent);pointer-events:none;z-index:2}
.book.single .face.front::after{width:4%}
.pg{position:absolute;inset:0;padding:clamp(18px,3.2vw,46px);display:flex;flex-direction:column;gap:12px}
.pg.ruled{background-color:var(--card)}
.pg .folio{position:absolute;bottom:14px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.face.front .pg .folio,.book-base.r .folio{right:20px}.face.back .pg .folio,.book-base.l .folio{left:20px}
.pg.photo{padding:0}
.pg.photo img,.pg.photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg.photo .cap{position:absolute;left:18px;bottom:16px;z-index:2;background:var(--card);padding:6px 10px;font:500 20px/1 var(--hand);color:var(--ink);transform:rotate(-2deg);box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.pg .name{font:400 clamp(34px,4.4vw,66px)/.9 var(--serif);margin:6px 0 0}
.pg .q{font:400 italic clamp(18px,1.7vw,24px)/1.25 var(--serif);color:var(--ink-2);margin:0}
.pg .stamp{align-self:flex-start;margin-top:auto;border:2px solid var(--tab,var(--accent));color:var(--tab,var(--accent));padding:10px 14px;font:700 clamp(13px,1.1vw,16px)/1.15 var(--sans);font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.02em;transform:rotate(-3deg);max-width:92%;mix-blend-mode:multiply;opacity:.92}
.pg .acts{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:14px}
.pg .tabmark{position:absolute;top:0;right:22px;width:34px;height:52px;background:var(--tab,var(--accent));clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.pg .idx{list-style:none;margin:8px 0 0;padding:0;display:grid}
.pg .idx li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--rule);padding:9px 0;font:400 clamp(18px,1.7vw,24px)/1.1 var(--serif)}
.pg .idx li span{font:500 11px/1 var(--mono);color:var(--muted);letter-spacing:.1em}
.single .pg.combo .ph{height:46%;margin:-18px -18px 6px;overflow:hidden;position:relative}
.single .pg.combo .ph img{width:100%;height:100%;object-fit:cover}
.book-hint{position:absolute;bottom:clamp(14px,3svh,30px);left:0;right:0;text-align:center;font:500 22px/1 var(--hand);color:var(--ink-2);transition:opacity .4s}
.book-count{position:absolute;top:76px;left:0;right:0;text-align:center}
@media (prefers-reduced-motion:reduce){.book{height:auto}.book-stage{position:static;height:auto;padding:40px 0}}

/* ================= site-wide motion layer ================= */
/* ink thread: a pencil line drawn down the margin as you read */
.thread{position:fixed;left:clamp(6px,1.2vw,18px);top:80px;bottom:30px;width:2px;z-index:40;pointer-events:none}
.thread i{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0));border-radius:2px;opacity:.75}
.thread b{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent);top:calc(var(--p,0)*100%);transform:translateY(-50%);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
@media (max-width:640px){.thread{display:none}}
/* highlighter sweeps under key lines as they arrive */
.hl{background-image:linear-gradient(transparent 58%,color-mix(in srgb,var(--accent) 24%,transparent) 58%,color-mix(in srgb,var(--accent) 24%,transparent) 92%,transparent 92%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.4s var(--ease) .35s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.in .hl,.hl.in{background-size:100% 100%}
/* photos develop like film when they arrive */
[data-develop] img,[data-develop] video{filter:grayscale(1) contrast(.7) brightness(1.25) sepia(.3);transition:filter 2.2s var(--ease) .15s}
[data-develop].in img,[data-develop].in video{filter:none}
/* ink cursor */
.ink{position:fixed;left:0;top:0;z-index:500;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);mix-blend-mode:multiply;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s;display:grid;place-items:center}
.ink span{font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:0;transition:opacity .2s}
.ink.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--accent);mix-blend-mode:normal}
.ink.big span{opacity:1}
@media (hover:none),(pointer:coarse){.ink{display:none}}

.pg .bigsig{margin:auto 0 0;display:grid;gap:6px}
.pg .bigsig b{font:800 clamp(52px,6.4vw,104px)/.85 var(--sans);font-variation-settings:"wdth" 64;letter-spacing:-.02em;color:var(--tab,var(--accent))}
.pg .bigsig>span{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.single .pg .bigsig b{font-size:clamp(40px,12vw,64px)}
.pg .bigsig+.stamp{margin-top:10px}

/* reel player */
.reelbox{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0d0b09;display:grid;place-items:center}
.reelbox::backdrop{background:#0d0b09}
.reelbox video{width:min(100vw,calc(100svh*16/9));height:auto;max-height:100svh}
.reelbox .x{position:absolute;top:16px;right:16px;z-index:2;color:#f3ede2;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;border:1px solid rgba(243,237,226,.4);border-radius:999px}
.reelbox .x:hover{background:#f3ede2;color:#0d0b09}
.reel-cta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:14px;text-decoration:none}
.reel-cta .thumb{position:relative;width:132px;aspect-ratio:16/9;overflow:hidden;box-shadow:0 10px 24px -12px rgba(60,40,20,.5)}
.reel-cta .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.reel-cta .thumb::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;background:rgba(23,20,17,.35);transition:background .3s}
.reel-cta:hover .thumb img{transform:scale(1.08)}
.reel-cta:hover .thumb::after{background:rgba(180,65,43,.55)}
.reel-cta b{display:block;font:400 24px/1.05 var(--serif)}

/* the story behind the slides: the animated film on every case study */
.story-film{overflow-x:clip;padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:start}
.story-film .sf-head{position:sticky;top:90px}
.story-film .h2{margin:14px 0 18px}
.story-film .sf-note{font:500 12px/1.6 var(--mono);color:var(--muted);letter-spacing:.02em;max-width:34em}
.story-film .sf-frame{margin:0;background:#141110;padding:clamp(8px,1vw,14px);box-shadow:0 30px 70px -30px rgba(40,25,10,.55);transform:rotate(-.4deg)}
.story-film video{display:block;width:100%;aspect-ratio:16/9;background:#141110}
.story-film video::cue{font:400 1.05em/1.3 var(--sans);background:rgba(23,20,17,.78);color:#f3ede2}
.story-film .sf-transcript{grid-column:2;border-top:1.5px solid var(--ink);padding-top:16px}
.story-film .sf-transcript summary{cursor:pointer;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;list-style:none;padding:8px 0}
.story-film .sf-transcript summary::before{content:"+ ";color:var(--accent)}
.story-film .sf-transcript[open] summary::before{content:"\2212 "}
.story-film .sf-transcript div{columns:2 22em;column-gap:40px;margin-top:14px}
.story-film .sf-transcript p{margin:0 0 .8em;font-size:15.5px;color:var(--ink-2);break-inside:avoid}
@media (max-width:860px){.story-film{grid-template-columns:1fr}.story-film .sf-head{position:static}.story-film .sf-transcript{grid-column:1}}
.reelbox video::cue{font:400 22px/1.3 var(--sans);background:rgba(23,20,17,.78);color:#f3ede2}

/* ---- review fixes (Opus + Codex review lanes, 2026-10-12) ---- */
/* one header on every page; on phones the five links sit on their own row */
@media (max-width:640px){
  .top .wrap{height:auto;flex-direction:column;align-items:stretch;justify-content:center;padding-block:10px 2px;gap:0}
  .brand{font-size:18px}
  .nav{justify-content:space-between;gap:0;font-size:10px;letter-spacing:.06em;white-space:nowrap}
  .nav a{padding:12px 0;min-height:42px;display:inline-flex;align-items:center}
  .nav .hide-sm{display:inline-flex}
}
@media (max-width:360px){.nav{font-size:9px;letter-spacing:.03em}}
/* case-study openings: the picture leads on phones */
@media (max-width:860px){
  .cs-hero{padding-top:20px}
  .cs-hero>figure,.cs-hero>.ph{order:-1}
  .cs-hero .ph img,.cs-hero>figure img{aspect-ratio:4/3;max-height:40svh;object-fit:cover}
}
/* the work grid never ends on a hole */
.papers::after{content:"More pages being written.";grid-column:span 4;align-self:center;justify-self:center;padding:40px 28px;border:1.5px dashed var(--muted);font:500 28px/1.1 var(--hand);color:var(--ink-2);transform:rotate(1.5deg);text-align:center}
@media (max-width:980px){.papers::after{grid-column:span 6}}
@media (max-width:620px){.papers::after{grid-column:span 12}}
/* ink cursor waits for the mouse */
.ink{opacity:0}.ink.live{opacity:1}