/* Yashika, in the making — editorial paper notebook system */
:root{
  /* 2026-10-12 livelier palette (Yashika): warm paper canvas, mustard/butter highlights, rust + olive + dusty pink accents */
  --paper:#ffffff; --paper-2:#fbe18d; --paper-3:#f6cb45; --card:#ffffff;
  --ink:#211f1a; --ink-2:#403b32; --muted:#6c665b; --pencil:#8a857b; --rule:#ece6d6;
  --red:#b75d43; --kraft:#a9845a; --kraft-2:#8c6a44;
  --mustard:#e7ad1c; --butter:#fde58c; --olive:#6f7a3f; --rose:#c98f88;
  --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(--butter);color:var(--ink)}
: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:3px;background:var(--mustard);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-back{visibility:hidden;transition:visibility 0s linear .8s}.nb.open .nb-back{visibility:visible}.nb-front{transition:visibility 0s linear .8s}.nb.open .nb-front{visibility:hidden}.nb.calm .nb-back,.nb.calm .nb-front{transition:none}
.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}
/* nav = turning a leaf: the old page lifts off its left spine, the next page waits underneath in its shadow */
::view-transition-old(root){z-index:2;transform-origin:left center;animation:.72s cubic-bezier(.55,.05,.35,1) both vt-leaf}
::view-transition-new(root){z-index:1;animation:.72s var(--ease) both vt-under}
@keyframes vt-leaf{0%{transform:perspective(2200px) rotateY(0);filter:brightness(1)}60%{filter:brightness(.92)}100%{transform:perspective(2200px) rotateY(-92deg);filter:brightness(.8)}}
@keyframes vt-under{from{filter:brightness(.86);transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){::view-transition-old(root),::view-transition-new(root){animation:.2s linear both vt-fade;transform:none;filter:none}::view-transition-old(root){animation-direction:reverse}}
@keyframes vt-fade{from{opacity:0}}

/* ---------- 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)}
@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) and (max-width:0px){
  *,*::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;content-visibility:auto}   /* off screen, the book's 3D page layers drop out of every frame; it already clips like this (overflow:hidden) and its height is fixed */
.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) and (max-width:0px){.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(--mustard);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:-5px;transform:translateY(calc(var(--p,0)*(100vh - 110px)));will-change:transform;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}
@media (pointer:coarse){[data-develop].developing img,[data-develop].developing video{will-change:filter}}   /* phones: own layer only while it develops, so the fade runs on the compositor; on a big desktop canvas that filtered layer cost the GPU more than the repaint (cover_enter A/B) */
[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}

/* mustard as highlighter, not as paint: italic words in big headings get a pen-stroke underlay */
.display i,.h1:not(.cond) i,.h2:not(.cond) i{background:linear-gradient(transparent 64%,color-mix(in srgb,var(--butter) 88%,transparent) 64%,color-mix(in srgb,var(--butter) 88%,transparent) 92%,transparent 92%);padding-inline:.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.frame .display i,.frame .h1 i,.frame .h2 i{background:none;color:var(--mustard)}
.label::before{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.6em;background:var(--mustard);border-radius:50%;vertical-align:.02em}
.frame .label::before{background:var(--mustard)}

/* data typography: a number and its %, ₹, →, / and units read as one unit */
.cnt{font:inherit;letter-spacing:inherit;color:inherit}
.fact b,.receipt b,.bigsig b,.move .n,[data-count]{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.dnum{font:800 clamp(44px,6vw,96px)/.9 var(--sans);font-variation-settings:"wdth" 66;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.dnum small{font:inherit;font-size:.55em;letter-spacing:0;vertical-align:baseline}
/* footer LinkedIn mark */
.li-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;font:600 15px/1 var(--sans);color:inherit;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.li-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.li-link:hover svg,.li-link:focus-visible svg{transform:rotate(-8deg) scale(1.08)}

/* 2026-10-13, Yashika: mustard + white, livelier; case-study chapters read as title-over-body with no dead column */
body{background:var(--paper) linear-gradient(90deg,var(--paper-3) 0 10px,transparent 10px)}
.top{background:color-mix(in srgb,var(--paper) 92%,transparent)}
.cs .chapter{grid-template-columns:1fr;gap:14px;padding:clamp(36px,5vw,64px) 0}
.cs .chapter>.label{position:static;font:700 clamp(15px,1.25vw,18px)/1.2 var(--mono);letter-spacing:.12em;color:var(--accent);display:flex;align-items:center;gap:12px}
.cs .chapter>.label::after{content:"";flex:0 0 48px;height:3px;background:var(--paper-3)}
.cs .chapter .body{max-width:60em}
.cs .chapter .body p{font-size:clamp(17.5px,1.4vw,20px)}

/* background music: Home-only player, top-right of the first screen */
[data-music-home]{position:relative}
.music-player{position:absolute;top:clamp(14px,2.4vw,30px);right:clamp(16px,4vw,56px);z-index:20;display:flex;align-items:center;gap:14px;max-width:min(380px,calc(100% - 32px));padding:12px 18px 12px 12px;background:var(--paper-3);border:1.5px solid var(--ink);border-radius:999px;box-shadow:0 12px 28px -16px rgba(30,20,10,.55),inset 0 0 0 4px rgba(255,253,246,.35)}
.mp-btn{display:flex;align-items:center;gap:8px;min-width:96px;min-height:46px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.mp-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mp-text{margin:0;font:500 13px/1.3 var(--sans);color:var(--ink)}.mp-text b{display:block;font:400 19px/1.1 var(--serif)}.mp-text span{color:var(--ink-2)}
.eq{display:flex;gap:3px;align-items:flex-end;height:16px}.eq i{width:3px;height:5px;background:currentColor}
.eq.on i{animation:eq .9s ease-in-out infinite alternate}.eq.on i:nth-child(2){animation-delay:.3s}.eq.on i:nth-child(3){animation-delay:.6s}
@keyframes eq{to{height:16px}}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.eq.on i{animation:none;height:12px}}
@media (max-width:700px){.music-player{position:relative;top:auto;right:auto;margin:10px 16px 0;max-width:none;border-radius:22px}}
@media (max-width:700px){.intro .music-player{order:-1}}
/* ink cursor over buttons: liquid glass, so the button underneath stays readable */
.ink.big{background:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.22));mix-blend-mode:normal;-webkit-backdrop-filter:blur(.35px) saturate(1.5) brightness(1.05);backdrop-filter:blur(.35px) saturate(1.5) brightness(1.05);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -6px 14px color-mix(in srgb,var(--accent) 22%,transparent),0 8px 22px -10px rgba(20,15,10,.45)}
.ink.big span{color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.8);transform:translateY(-22px);font-size:9px}

/* 2026-10-13: no beige paper or grain (read as an AI template). Clean white page, mustard does the warmth. */
body::after{display:none}

/* notebook cover: reduced motion = same two steps, soft fades instead of 3D */
.nb.calm .nb-book,.nb.calm .nb-cover,.nb.calm .nb-band{transition:opacity .4s ease}
.nb.calm.open .nb-cover{transform:none;opacity:0}
.nb.calm.open .nb-book{transform:none}
.nb-book{cursor:pointer}
/* phone flipbook reads as a real notebook: smaller page, stitched spine, page block on the fore-edge */
@media (max-width:759px){
  .book.single .book-body{width:min(80vw,400px)}
  .book.single .book-body::before{content:"";position:absolute;top:-1%;bottom:-1%;left:-14px;width:16px;border-radius:6px 0 0 6px;background:linear-gradient(90deg,#8a6439,#b08355 60%,#7a5733);box-shadow:inset -2px 0 3px rgba(0,0,0,.35),0 18px 30px -18px rgba(40,25,10,.6);z-index:0}
  .book.single .book-body::after{content:"";position:absolute;top:1.5%;bottom:1.5%;right:-7px;width:8px;border-radius:0 3px 3px 0;background:repeating-linear-gradient(180deg,#fff 0 2px,#e9e2d0 2px 3px);box-shadow:2px 6px 12px -6px rgba(40,25,10,.45);z-index:0}
  .book.single .leaf{transform-origin:left center}
  .book.single .face.front{box-shadow:0 26px 50px -26px rgba(60,40,20,.55),inset 6px 0 10px -6px rgba(60,40,20,.35)}
}
@media (max-width:759px){.nb.open .nb-book{transform:rotateX(0) rotateZ(0) scale(1.02)}}
.nb-back{background:#d9bd8f}.nb-back .hand{color:#5a4128}
/* Yashika 13 Oct 05:19: mustard yellow background; white + cream only for highlights (cards, panels, markers) */
:root{--paper:#ecb73c;--paper-2:#fff5da;--paper-3:#ffffff;--card:#ffffff;--butter:#fff5da;--mustard:#9a6400;--muted:#584c37;--pencil:#6b604c;--rule:rgba(33,31,26,.18)}
body{background:var(--paper)}
.top{background:color-mix(in srgb,var(--paper) 92%,transparent)}
.nb{background:var(--paper)}
.frame .display i,.frame .h1 i,.frame .h2 i{color:#ecb73c}
.frame .label::before,.foot .label::before{background:#ecb73c}
.hl{background-image:linear-gradient(transparent 58%,color-mix(in srgb,var(--butter) 92%,transparent) 58%,color-mix(in srgb,var(--butter) 92%,transparent) 92%,transparent 92%)}
.sheet .hl,.face .hl,.pg .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%)}

/* Yashika 14 Oct: play button = a hand-drawn cassette whose reels turn only while the song plays (.playing from paint());
   guestbook invitation = a sticky note on the home desk */
.mp-btn{flex-direction:column;gap:4px;min-width:0;min-height:0;padding:4px 2px 2px;background:none;color:var(--ink);border-radius:10px;transition:transform .25s ease}
.mp-btn:hover{transform:rotate(-3deg) translateY(-1px)}
.cassette{display:block;width:104px;height:auto;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 4px 5px rgba(30,20,10,.18))}
.cassette .cs-shell{fill:#c09a6c}.cassette .cs-label{fill:#fff5da}.cassette .cs-win{fill:#211f1a}.cassette .cs-foot{fill:#8a6439}
.cassette .cs-tape{stroke:#8a6439;stroke-width:3}
.cassette text{fill:var(--ink);stroke:none;font:700 17px/1 var(--hand);text-transform:none;letter-spacing:.02em}
.cassette .reel circle{fill:#fff;stroke-width:1.8}.cassette .reel path{stroke-width:1.6}
.cassette>circle{fill:var(--ink);stroke:none}
.mp-btn.playing .reel{animation:mp-reel 1.6s linear infinite}
@keyframes mp-reel{to{transform:rotate(360deg)}}
.mp-state{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 9px 3px;border-radius:999px;background:var(--ink);color:#fff}
.mp-btn.playing .mp-state{background:#ecb73c;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (prefers-reduced-motion:reduce) and (max-width:0px){.mp-btn.playing .reel{animation:none}.mp-btn.playing .reel circle{fill:#ecb73c}.mp-btn:hover{transform:none}}
.desk .gb-tag{left:-16%;top:4%;z-index:4;display:grid;gap:3px;width:min(46%,236px);padding:12px 14px 10px;background:#fff;color:var(--ink);text-decoration:none;transform:rotate(-5deg);box-shadow:0 12px 22px -14px rgba(40,25,10,.6);transition:transform .25s ease}
.desk .gb-tag::before{content:"";position:absolute;top:-10px;left:50%;width:64px;height:20px;background:rgba(236,183,60,.75);transform:translateX(-50%) rotate(3deg)}
.gb-tag small{font:600 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.gb-tag b{font:600 clamp(21px,1.9vw,26px)/1 var(--hand);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.gb-tag svg{width:56px;justify-self:end;margin-top:-4px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.desk .gb-tag:hover{transform:rotate(-2deg) translateY(-3px)}
.gb-tag:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media (max-width:900px){.desk .gb-tag{left:-2%;top:-4%;width:min(54%,210px);padding:10px 12px 8px}.gb-tag b{font-size:20px}.gb-tag svg{width:44px}}
@media (max-width:700px){.cassette{width:88px}}

/* smoothness (16 Oct): loops hold while nothing can see them. Behind the opaque notebook cover the whole page waits;
   .anim-off is set by the scripts on sections that left the screen. Paused, not removed: they resume where they were. */
/* the cover list names the looping parts only: a page-wide selector here made lifting the cover restyle every element at once */
.nb-up :is(.fl,.hd,.wg,.hqm *,.track,.sq-motif *),.nb-up .disc::after,.anim-off,.anim-off *{animation-play-state:paused!important}