:root{
  --paper:#F4F0E6; --paper-2:#EAE4D6; --sheet:#FBF9F3;
  --ink:#15130E; --ink-2:#3A362E; --muted:#6B665C; --pencil:#857E71;
  --hair:rgba(21,19,14,.13); --hair-2:rgba(21,19,14,.07);
  --red:#C2331B; --red-soft:rgba(194,51,27,.10); --on-red:#fff;
  --inv-bg:#15130E; --inv-card:#1E1C17; --inv-fg:#EDE8DE; --inv-muted:#A39D90; --inv-hair:rgba(237,232,222,.10); --inv-red:#FF6B4F;
  --block:#C2331B; --on-block:#FBF6EC;
  --lift:0 40px 80px -40px rgba(60,40,15,.35),0 12px 28px -16px rgba(60,40,15,.18);
  --grain:.035;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hand:"Nanum Pen Script","Bradley Hand","Segoe Print",cursive;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.32,.72,0,1);
  --wrap:1240px; --gut:clamp(16px,4vw,48px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12110E; --paper-2:#1B1914; --sheet:#1C1A15;
    --ink:#EDE8DE; --ink-2:#CFC8BB; --muted:#A39D90; --pencil:#8A8478;
    --hair:rgba(237,232,222,.14); --hair-2:rgba(237,232,222,.07);
    --red:#FF6B4F; --red-soft:rgba(255,107,79,.12); --on-red:#15130E;
    --inv-bg:#1F1D18; --inv-card:#282520;
    --block:#B8311A;
    --lift:0 40px 80px -40px rgba(0,0,0,.8),0 12px 28px -16px rgba(0,0,0,.5);
    --grain:.03;
  }
}
:root[data-theme="dark"]{
  --paper:#12110E; --paper-2:#1B1914; --sheet:#1C1A15;
  --ink:#EDE8DE; --ink-2:#CFC8BB; --muted:#A39D90; --pencil:#8A8478;
  --hair:rgba(237,232,222,.14); --hair-2:rgba(237,232,222,.07);
  --red:#FF6B4F; --red-soft:rgba(255,107,79,.12); --on-red:#15130E;
  --inv-bg:#1F1D18; --inv-card:#282520;
  --block:#B8311A;
  --lift:0 40px 80px -40px rgba(0,0,0,.8),0 12px 28px -16px rgba(0,0,0,.5);
  --grain:.03;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:var(--grain);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--red);color:var(--on-red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px;z-index:100;text-decoration:none;font-size:14px}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.02em;font-optical-sizing:auto}
h2{font-size:clamp(2.3rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.03em}
h2 em{font-style:italic;font-weight:400}
h3{font-size:1.45rem;line-height:1.2}
p{margin:0}
.lead{font:400 clamp(1.1rem,1.5vw,1.28rem)/1.6 var(--serif);color:var(--ink-2);max-width:44ch}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 13px 7px 11px;box-shadow:inset 0 0 0 1px var(--hair);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 26px}
.eyebrow b{font:400 15px/0 var(--serif);color:var(--red);letter-spacing:0}
.mono{font-family:var(--mono)}
@media (max-width:420px){.xs-hide{display:none}}

/* buttons: pill with nested icon */
.btn{--bg:var(--ink);--fg:var(--paper);--ic:color-mix(in srgb,var(--paper) 16%,transparent);display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 22px;border:0;border-radius:999px;background:var(--bg);color:var(--fg);font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .6s var(--ease),color .6s var(--ease),transform .5s var(--spring),box-shadow .6s var(--ease)}
.btn .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ic);transition:transform .6s var(--spring),background .6s var(--ease)}
.btn .ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{--bg:var(--red);--fg:var(--on-red);--ic:rgba(255,255,255,.18)}
.btn:hover .ic{transform:translate(2px,-1px) scale(1.06)}
.btn:active{transform:scale(.98)}
/* buttons keep their own colours inside prose that restyles links */
a.btn.btn{color:var(--fg);text-decoration:none}
.btn.plain{padding:14px 22px}
.btn.ghost{--bg:transparent;--fg:var(--ink);--ic:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair)}
.btn.ghost:hover{--bg:transparent;--fg:var(--ink);--ic:var(--red);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover .ic{color:var(--on-red)}
.ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* floating island nav */
.top{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),1180px);z-index:50;border-radius:999px;background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 0 0 1px var(--hair-2),0 18px 40px -26px rgba(40,30,15,.35);transition:transform .7s var(--spring)}
.top.hide{transform:translate(-50%,-130%)}
.top .in{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 7px 0 24px;gap:16px}
.brand{font:600 1.22rem/1 var(--serif);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand i{color:var(--red);font-style:normal}
.nav{display:flex;align-items:center;gap:2px}
.nav a:not(.btn){font:500 14px/1 var(--sans);text-decoration:none;color:var(--ink-2);padding:12px 14px;border-radius:999px;transition:background .4s var(--ease),color .4s var(--ease)}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{background:var(--paper-2);color:var(--ink)}
.overlay a[aria-current="page"]{color:var(--red)}
.nav .btn{margin-left:8px;font-size:14px;padding:6px 6px 6px 18px}
.nav .btn .ic{width:34px;height:34px}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--ink);cursor:pointer;position:relative}
.burger span{position:absolute;left:15px;right:15px;height:1.5px;background:var(--paper);border-radius:2px;transition:transform .6s var(--spring),top .6s var(--spring)}
.burger span:nth-child(1){top:20px}.burger span:nth-child(2){top:27px}
.menu-open .burger span:nth-child(1){top:23.5px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:23.5px;transform:rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:45;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;flex-direction:column;justify-content:center;padding:100px var(--gut) 40px;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.overlay a{font:500 clamp(2.4rem,11vw,3.4rem)/1.1 var(--serif);letter-spacing:-.03em;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--hair-2);opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.overlay a em{font-style:italic;color:var(--red)}
.menu-open .overlay{opacity:1;visibility:visible}
.menu-open .overlay a{opacity:1;transform:none}
.menu-open .overlay a:nth-child(2){transition-delay:.06s}.menu-open .overlay a:nth-child(3){transition-delay:.12s}.menu-open .overlay a:nth-child(4){transition-delay:.18s}.menu-open .overlay a:nth-child(5){transition-delay:.24s}
@media (max-width:860px){.nav{display:none}.burger{display:block}.top .in{height:60px;padding:0 6px 0 20px}}

/* hero */
.hero{padding:clamp(128px,15vw,176px) 0 0;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.88fr);gap:clamp(40px,6vw,104px);align-items:center}
.status{display:inline-flex;align-items:center;gap:9px}
.status i{width:7px;height:7px;border-radius:50%;background:#2F9E5B;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,158,91,.45)}70%{box-shadow:0 0 0 8px rgba(47,158,91,0)}100%{box-shadow:0 0 0 0 rgba(47,158,91,0)}}
h1.headline{font-size:clamp(3.2rem,7.3vw,7.4rem);line-height:1.02;font-weight:450;letter-spacing:-.04em}
h1.headline .ln{display:block}
h1.headline .ln.e{padding-top:.4em}
.w{position:relative;display:inline-block}
.cut{position:absolute;left:.04em;bottom:100%;margin-bottom:-.2em;font:400 .4em/1 var(--serif);letter-spacing:0;color:var(--pencil);white-space:nowrap}
.cut::before{content:attr(data-cut)}
.cut svg{position:absolute;left:-6%;top:50%;width:112%;height:auto;aspect-ratio:10/1;overflow:visible;transform:translateY(-40%)}
.cut path{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.add{font-style:italic;font-weight:450;display:inline-block;position:relative}
.fn{font:500 .24em/1 var(--mono);color:var(--red);text-decoration:none;vertical-align:super;margin-left:.1em;letter-spacing:0;position:relative;top:-.3em;padding:3px 4px;border-radius:5px;transition:background .3s}
.fn:hover,.fn:focus-visible{background:var(--red-soft)}
p .fn,dd .fn,.stat .fn,.tiny .fn{font-size:.66em;top:-.15em}
.js .cut{opacity:0;animation:fade .4s var(--ease) forwards}
.js .cut path{stroke-dashoffset:1;animation:draw .5s cubic-bezier(.6,0,.2,1) forwards}
.js .add{opacity:0;transform:translateY(.15em);filter:blur(6px);animation:rise .8s var(--ease) forwards}
.js .ln:nth-child(2) .cut{animation-delay:.15s}.js .ln:nth-child(2) path{animation-delay:.4s}.js .ln:nth-child(2) .add{animation-delay:.7s}
.js .ln:nth-child(3) .cut{animation-delay:.75s}.js .ln:nth-child(3) path{animation-delay:1s}.js .ln:nth-child(3) .add{animation-delay:1.3s}
.js .ln:nth-child(4) .cut{animation-delay:1.35s}.js .ln:nth-child(4) path{animation-delay:1.6s}.js .ln:nth-child(4) .add{animation-delay:1.9s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
.hero .lead{margin-top:clamp(28px,3.4vw,40px)}
.hero .ctas{margin-top:32px}

/* hero desk: portrait + pinned proof */
.desk{position:relative;justify-self:end;width:100%;max-width:450px}
.bezel{padding:8px;border-radius:32px;background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1px var(--hair-2)}
.bezel>.core{border-radius:24px;overflow:hidden;background:var(--sheet);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--lift)}
.portrait .core{aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:52% 28%;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.desk:hover .portrait img{transform:scale(1.08)}
.pin{position:absolute;background:var(--sheet);border-radius:20px;padding:16px 18px;box-shadow:inset 0 0 0 1px var(--hair-2),var(--lift);width:218px}
.pin .tiny{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.pin .fig{font:500 1.7rem/1.05 var(--serif);letter-spacing:-.02em;margin-top:10px}
.pin .fig small{font-size:.55em;color:var(--pencil);margin:0 .15em}
.pin p{font:400 13px/1.4 var(--sans);color:var(--ink-2);margin-top:4px}
.mini{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:12px}
.mini i{flex:1;background:var(--ink);border-radius:2px 2px 1px 1px;opacity:.85}
.mini i:nth-child(12){background:var(--red);opacity:1}
.p1{left:-78px;top:64px;transform:rotate(-4deg)}
.p2{right:-34px;bottom:96px;transform:rotate(3deg)}
.js .pin{opacity:0;animation:pinIn 1s var(--ease) forwards}
.js .p1{--r:-4deg;animation-delay:2.1s}.js .p2{--r:3deg;animation-delay:2.3s}
@keyframes pinIn{from{opacity:0;transform:translateY(24px) rotate(0) scale(.96)}to{opacity:1;transform:rotate(var(--r))}}
.note{position:absolute;right:6px;top:-40px;font:400 1.6rem/1 var(--hand);color:var(--red);transform:rotate(-5deg);white-space:nowrap}
.note svg{position:absolute;left:-34px;top:16px;width:36px;height:34px;overflow:visible}
.note path{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round}
.desk figcaption{font:400 12px/1.5 var(--mono);color:var(--muted);margin-top:16px;padding-left:10px;letter-spacing:.02em}
.desk figcaption b{color:var(--ink);font-weight:500}
@media (max-width:1100px){.p1{left:-40px}.p2{right:-16px}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .desk{justify-self:start;max-width:520px}
  .pins{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .pin,.js .pin{position:static;width:auto;transform:none;animation:none;opacity:1}
  .note{display:none}
}
@media (prefers-reduced-motion:reduce){.js .cut,.js .cut path,.js .add,.js .pin{animation:none;opacity:1;transform:none;filter:none;stroke-dashoffset:0}.js .p1{transform:rotate(-4deg)}.js .p2{transform:rotate(3deg)}}

.fineprint{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--ink);padding-top:16px;display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));gap:12px 32px;font:400 13px/1.55 var(--sans);color:var(--muted)}
.fineprint .lbl{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.fineprint b{font:500 11px/1 var(--mono);color:var(--red);margin-right:7px;vertical-align:1px}
@media (max-width:860px){.fineprint{grid-template-columns:1fr}}

.strip{margin-top:clamp(40px,5vw,56px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:22px 0;overflow:hidden}
.marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;gap:44px;list-style:none;margin:0;padding:0 22px 0 0;flex:none;animation:slide 44s linear infinite}
.marquee li{font:italic 400 clamp(1.4rem,2.4vw,2rem)/1.2 var(--serif);white-space:nowrap;color:var(--ink-2);display:flex;align-items:center;gap:44px;letter-spacing:-.01em}
.marquee li::after{content:"\2731";font:400 .6em/1 var(--sans);color:var(--red);font-style:normal}
.marquee li.lab{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marquee li.lab::after{content:none}
@keyframes slide{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marquee ul{animation:none;flex-wrap:wrap}.marquee ul[aria-hidden]{display:none}}

/* sections */
section.block{padding:clamp(96px,13vw,176px) 0 0;position:relative}
.sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 72px;align-items:end;margin-bottom:clamp(44px,6vw,80px)}
.sec-head .lead{justify-self:end}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}.sec-head .lead{justify-self:start}}

/* contents list */
.toc{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair)}
.toc>li{display:grid;grid-template-columns:140px minmax(0,1fr) 280px;gap:24px 40px;padding:clamp(32px,4vw,52px) 0;border-top:1px solid var(--hair);position:relative}
.toc>li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--red);transition:width 1s var(--ease)}
.toc>li:hover::before{width:100%}
.toc .n{font:italic 300 clamp(3.4rem,6vw,5.4rem)/.8 var(--serif);color:var(--pencil);letter-spacing:-.04em;transition:color .6s var(--ease)}
.toc>li:hover .n{color:var(--red)}
.toc h3{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.04;letter-spacing:-.03em;margin-bottom:14px}
.toc p{color:var(--ink-2);max-width:50ch;font-size:17px}
.toc ul{list-style:none;margin:0;padding:6px 0 0;font:400 14.5px/1.5 var(--sans);color:var(--ink-2)}
.toc ul li{display:flex;gap:10px;align-items:baseline;padding:6px 0}
.toc ul li::before{content:"";flex:none;width:6px;height:6px;background:var(--red);transform:rotate(45deg) translateY(-2px)}
@media (max-width:980px){.toc>li{grid-template-columns:90px minmax(0,1fr)}.toc ul{grid-column:2}}
@media (max-width:600px){.toc>li{grid-template-columns:1fr;gap:14px}.toc ul{grid-column:auto}.toc .n{font-size:3rem}}

/* results: ink sheet */
.ink{background:var(--inv-bg);color:var(--inv-fg);margin:clamp(96px,13vw,176px) 12px 0;border-radius:clamp(24px,3vw,44px);padding:clamp(84px,10vw,150px) 0 clamp(64px,8vw,110px);position:relative;overflow:hidden}
.ink .eyebrow{box-shadow:inset 0 0 0 1px var(--inv-hair);color:var(--inv-muted)}
.ink .eyebrow b{color:var(--inv-red)}
.ink .lead{color:var(--inv-muted)}
.ink .fn{color:var(--inv-red)}
.bighead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(32px,5vw,72px);align-items:end}
.giant{font:italic 300 clamp(8rem,21vw,19.5rem)/.76 var(--serif);letter-spacing:-.07em;color:var(--inv-red);margin-left:-.04em}
.giant .fn{font-size:.1em;top:-3.4em;color:var(--inv-fg)}
.bighead h2{font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.08;max-width:18ch}
.bighead .lead{margin-top:22px}
@media (max-width:760px){.bighead{grid-template-columns:1fr}}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:clamp(56px,7vw,96px)}
.cell{padding:6px;border-radius:30px;background:rgba(237,232,222,.035);box-shadow:inset 0 0 0 1px var(--inv-hair)}
.cell>.core{border-radius:24px;background:var(--inv-card);padding:clamp(20px,2.4vw,30px);height:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.c-chart{grid-column:span 7;grid-row:span 2}
.c-a{grid-column:span 5}
.c-b{grid-column:span 4}
.c-full{grid-column:span 12}
.c-half{grid-column:span 6}
@media (max-width:980px){.c-chart,.c-a,.c-full{grid-column:span 12}.c-b,.c-half{grid-column:span 6}}
@media (max-width:640px){.c-b,.c-half{grid-column:span 12}}
.cardlbl{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.ink .cardlbl{color:var(--inv-muted)}
.stat .num{font:400 clamp(2.8rem,4.6vw,4.2rem)/1 var(--serif);letter-spacing:-.04em;margin:26px 0 10px;font-variant-numeric:lining-nums tabular-nums}
.stat .num small{font-size:.5em;color:var(--inv-muted);margin:0 .12em;letter-spacing:0}
.stat p:not(.cardlbl):not(.num){font:400 15px/1.45 var(--sans);color:var(--inv-fg);opacity:.86;max-width:32ch}
.viz{--c-bar:var(--ink);--c-hi:var(--red);--c-text:var(--ink);--c-muted:var(--muted);--c-grid:var(--hair-2);--c-tipfg:var(--paper)}
.ink .viz{--c-bar:var(--inv-fg);--c-hi:var(--inv-red);--c-text:var(--inv-fg);--c-muted:var(--inv-muted);--c-grid:var(--inv-hair);--c-tipfg:var(--inv-bg)}
.chart-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}
.chart-head h3{font:500 15px/1.35 var(--sans);letter-spacing:0;color:var(--c-text)}
.chart-head p{font:400 13px/1.4 var(--sans);color:var(--c-muted)}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .grid line{stroke:var(--c-grid);stroke-width:1}
.chart .base{stroke:var(--c-text);stroke-opacity:.5;stroke-width:1}
.chart .axis text{font:400 11px var(--mono);fill:var(--c-muted)}
.chart .axis .yr{fill:var(--c-text)}
.chart .bar{fill:var(--c-bar);fill-opacity:.88;transition:fill .2s,fill-opacity .2s}
.chart .bar.on{fill:var(--c-hi);fill-opacity:1}
.chart .lbl{font:500 12px var(--mono);fill:var(--c-text)}
.chart .lbl.peak{fill:var(--c-hi)}
.chart .hit{fill:transparent;cursor:crosshair}
.tip{position:absolute;pointer-events:none;background:var(--c-text);color:var(--c-tipfg);font:500 12px/1.35 var(--mono);padding:8px 11px;border-radius:10px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .15s}
.tip.on{opacity:1}
.tip span{display:block;font-weight:400;opacity:.65;font-size:11px}
details.table{margin-top:16px;font-size:13px;color:var(--c-muted)}
details.table summary{cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 0;width:max-content}
details.table table{border-collapse:collapse;margin-top:8px;font:400 13px/1.4 var(--mono);width:100%;max-width:340px}
details.table td,details.table th{padding:5px 0;border-bottom:1px solid var(--c-grid);text-align:left;color:var(--c-text)}
details.table td:last-child,details.table th:last-child{text-align:right}
.ledger{--l-fg:var(--ink);--l-muted:var(--muted);--l-hair:var(--hair);--l-hi:var(--red);--l-hifg:var(--on-red)}
.ink .ledger{--l-fg:var(--inv-fg);--l-muted:var(--inv-muted);--l-hair:var(--inv-hair);--l-hi:var(--inv-red);--l-hifg:#15130E}
.ledger ol{list-style:none;margin:18px 0 0;padding:0}
.ledger li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--l-hair)}
.pos{font:500 14px/1 var(--mono);color:var(--l-fg);border-radius:999px;padding:9px 0;text-align:center;width:52px;box-shadow:inset 0 0 0 1px var(--l-hair)}
.pos.p1st{background:var(--l-hi);color:var(--l-hifg);box-shadow:none}
.kw{font:400 1.2rem/1.3 var(--serif);min-width:0;letter-spacing:-.01em}
.kw a{display:block;font:400 13px/1.4 var(--sans);color:var(--l-muted);text-decoration:none;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s}
.kw a:hover{color:var(--l-hi)}
.vol{font:400 13px/1.3 var(--mono);text-align:right;white-space:nowrap}
.vol span{display:block;font-size:11px;color:var(--l-muted)}
.proof h3{font-size:1.6rem;margin:22px 0 10px}
.proof p:not(.cardlbl){font:400 15.5px/1.55 var(--sans);color:var(--inv-fg);opacity:.86}

/* red pen */
.edit{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:900px){.edit{grid-template-columns:1fr}}
.paper{padding:8px;border-radius:32px;background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1px var(--hair-2);transform:rotate(-.6deg)}
.paper>.core{border-radius:24px;background:var(--sheet);padding:clamp(22px,4vw,48px);box-shadow:var(--lift)}
.js .paper.rv{transform:translateY(32px) rotate(0)}
.js .paper.rv.in{transform:rotate(-.6deg)}
@media (max-width:760px){.paper,.js .paper.rv.in{transform:none}}
.seg{display:inline-flex;border-radius:999px;padding:5px;background:var(--paper-2);position:relative;box-shadow:inset 0 0 0 1px var(--hair-2)}
.seg button{font:500 13.5px/1 var(--sans);color:var(--ink-2);background:none;border:0;border-radius:999px;padding:11px 18px;cursor:pointer;position:relative;z-index:1;transition:color .5s var(--ease)}
.seg button span{font:400 11.5px/1 var(--mono);opacity:.65;margin-left:6px}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--paper)}
.seg .pill{position:absolute;top:5px;bottom:5px;left:0;border-radius:999px;background:var(--ink);transition:transform .6s var(--spring),width .6s var(--spring)}
.draft{font:400 clamp(1.15rem,2.1vw,1.55rem)/2.2 var(--serif);margin:30px 0 0;color:var(--ink);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(2.2em - 1px),var(--hair-2) calc(2.2em - 1px),var(--hair-2) 2.2em);background-position:0 -.35em}
.draft del,.draft ins{text-decoration:none}
.draft ins{font-family:var(--hand);color:var(--red);font-size:1.3em;line-height:1}
.draft .tag{font:500 11px/1 var(--mono);color:var(--red);vertical-align:super;margin-left:2px}
.draft[data-mode="edits"] del{color:var(--pencil);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.draft[data-mode="edits"] del + ins{margin-left:.3em}
.draft[data-mode="before"] ins,.draft[data-mode="before"] .tag{display:none}
.draft[data-mode="after"] del,.draft[data-mode="after"] .tag{display:none}
.draft[data-mode="after"] ins{font-family:var(--serif);color:var(--ink);font-size:1em;line-height:inherit}
.count{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font:400 13px/1.4 var(--mono);color:var(--muted)}
.count b{color:var(--ink);font-weight:500}
.notes{list-style:none;margin:0;padding:0}
.notes li{font:400 1.7rem/1.05 var(--hand);color:var(--red);padding:18px 0 18px 38px;border-bottom:1px dashed color-mix(in srgb,var(--red) 35%,transparent);position:relative}
.notes li b{position:absolute;left:0;top:20px;font:500 11px/1 var(--mono);border:1.5px solid var(--red);border-radius:50%;width:24px;height:24px;display:grid;place-items:center}

/* writing index */
.tabs{margin-bottom:clamp(28px,4vw,44px)}
.idx{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair)}
.idx[hidden]{display:none}
.idx a{display:grid;grid-template-columns:190px minmax(0,1fr) 250px 48px;gap:18px 32px;align-items:center;padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--hair);text-decoration:none;position:relative}
.idx .meta{font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.idx .meta span{display:block;color:var(--muted)}
.idx h3{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.15;letter-spacing:-.02em;transition:transform .7s var(--ease),color .5s var(--ease)}
.idx .res{font:400 12.5px/1.45 var(--mono);color:var(--red)}
.idx .res.plain{color:var(--muted)}
.go{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--hair);transition:background .5s var(--ease),box-shadow .5s,color .5s}
.go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--spring)}
.idx a:hover h3{transform:translateX(10px)}
.idx a:hover .go{background:var(--red);box-shadow:none;color:var(--on-red)}
.idx a:hover .go svg{transform:rotate(-45deg)}
@media (max-width:980px){.idx a{grid-template-columns:minmax(0,1fr) 48px}.idx .meta{grid-column:1/-1}.idx .res{grid-column:1}.idx .go{grid-column:2;grid-row:2 / span 2}}
.all-link{margin-top:24px;font:400 14.5px/1.5 var(--sans);color:var(--muted)}
.all-link a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--red)}

/* resume */
.cv{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:980px){.cv{grid-template-columns:1fr}}
.roles{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair)}
.role{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px 28px;padding:28px 0;border-top:1px solid var(--hair)}
.role .when{font:500 13px/1.6 var(--mono);color:var(--muted)}
.role .when em{display:block;font-style:normal;font-weight:400;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.role.now .when{color:var(--red)}
.role h3{font-size:1.5rem;letter-spacing:-.02em}
.role h3 span{font:italic 400 1.1rem var(--serif);color:var(--muted);letter-spacing:0;margin-left:6px}
.role ul{margin:12px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:15.5px}
.role li{padding-left:20px;position:relative;margin:5px 0}
.role li::before{content:"";position:absolute;left:2px;top:.75em;width:8px;height:1.5px;background:var(--red)}
@media (max-width:640px){.role{grid-template-columns:1fr}}
.aside{position:sticky;top:100px;display:grid;gap:14px}
.aside .core{padding:24px}
.aside .cardlbl{color:var(--muted)}
.aside ul{list-style:none;margin:10px 0 0;padding:0}
.aside li{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair-2);font-size:14.5px}
.aside li:last-child{border-bottom:0}
.aside li span{font:400 12px/1.6 var(--mono);color:var(--muted)}
.aside .btn{justify-self:start}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tools span{font:400 12.5px/1 var(--sans);color:var(--ink-2);border-radius:999px;padding:8px 11px;box-shadow:inset 0 0 0 1px var(--hair)}

/* contact: red sheet */
.redsheet{background:var(--block);color:var(--on-block);margin:clamp(96px,13vw,176px) 12px 0;border-radius:clamp(24px,3vw,44px);padding:clamp(84px,10vw,150px) 0;position:relative;overflow:hidden}
.redsheet .eyebrow{color:var(--on-block);box-shadow:inset 0 0 0 1px rgba(251,246,236,.3)}
.redsheet .eyebrow b{color:var(--on-block)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px clamp(40px,6vw,96px);align-items:end}
.redsheet h2{font-size:clamp(3.4rem,10vw,9.6rem);line-height:.9;letter-spacing:-.05em;font-weight:450}
.redsheet h2 em{font-weight:300}
.redsheet .lead{color:var(--on-block);margin-top:28px;max-width:46ch}
.redsheet .ctas{margin-top:36px}
.redsheet .btn{--bg:var(--on-block);--fg:#15130E;--ic:rgba(21,19,14,.08)}
.redsheet .btn:hover{--bg:#15130E;--fg:var(--on-block);--ic:rgba(251,246,236,.14)}
.redsheet .btn.ghost{--bg:transparent;--fg:var(--on-block);--ic:rgba(251,246,236,.14);box-shadow:inset 0 0 0 1px rgba(251,246,236,.4)}
.redsheet .btn.ghost:hover{--bg:transparent;--ic:var(--on-block);box-shadow:inset 0 0 0 1px var(--on-block)}
.redsheet .btn.ghost:hover .ic{color:#15130E}
.avatar{width:clamp(140px,17vw,230px);border-radius:50%;padding:7px;background:rgba(251,246,236,.12);box-shadow:inset 0 0 0 1px rgba(251,246,236,.25)}
.avatar img{border-radius:50%;aspect-ratio:1;object-fit:cover;transform:scale(1.03)}
.copied{font:400 13px/1 var(--mono);opacity:0;transition:opacity .3s}
.copied.on{opacity:1}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}.avatar{order:-1;width:120px}}

/* fine print + footer */
.notes-foot{padding:clamp(72px,9vw,112px) 0 0}
.notes-foot h2{font-size:clamp(1.6rem,2.4vw,2rem)}
.notes-foot .sub{color:var(--muted);font-size:14.5px;margin:8px 0 26px}
.notes-foot ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.notes-foot li{font:400 13.5px/1.6 var(--sans);color:var(--ink-2);padding:14px 10px 14px 32px;border-top:1px solid var(--hair-2);position:relative;scroll-margin-top:110px;border-radius:8px;transition:background 1s var(--ease)}
.notes-foot li b{position:absolute;left:4px;top:15px;font:500 12px/1 var(--mono);color:var(--red)}
.notes-foot li:target{background:var(--red-soft)}
@media (max-width:760px){.notes-foot ol{grid-template-columns:1fr}}
footer{padding:clamp(64px,8vw,96px) 0 0;overflow:hidden}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;font:400 13px/1.6 var(--sans);color:var(--muted);border-top:1px solid var(--hair);padding-top:20px}
.foot-row a{color:var(--ink-2);text-underline-offset:3px}

/* footnote popover */
.pop{position:fixed;z-index:70;max-width:310px;background:var(--ink);color:var(--paper);font:400 13px/1.55 var(--sans);padding:13px 15px;border-radius:14px;box-shadow:0 24px 50px -20px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;transform:translateY(6px) scale(.98);transition:opacity .25s var(--ease),transform .35s var(--spring);pointer-events:none}
.pop.on{opacity:1;transform:none}
.pop b{font:500 11px/1 var(--mono);color:var(--red);margin-right:7px}

/* reveal */
.js .rv{opacity:0;transform:translateY(32px);filter:blur(8px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.js .rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- multi-page additions ---------- */
.page-head{padding:clamp(140px,16vw,196px) 0 0}
.page-head h1{font-size:clamp(3.4rem,9.4vw,8.6rem);line-height:.92;letter-spacing:-.05em;font-weight:450}
.page-head h1 em{font-style:italic;font-weight:300;color:var(--red)}
.page-head .row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 64px;align-items:end;margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid var(--ink)}
.page-head .lead{max-width:52ch}
.page-head .ctas{justify-content:flex-end}
@media (max-width:860px){.page-head .row{grid-template-columns:1fr}.page-head .ctas{justify-content:flex-start}}
.jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
@media (max-width:860px){.jump{justify-content:flex-start}}
.jump a{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:10px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair);transition:background .4s var(--ease),color .4s var(--ease)}
.jump a:hover{background:var(--ink);color:var(--paper)}
.ink .btn{--bg:var(--inv-fg);--fg:var(--inv-bg);--ic:rgba(21,19,14,.1)}
.ink .btn:hover{--bg:var(--inv-red);--fg:#15130E;--ic:rgba(21,19,14,.12)}
.more-row{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-top:clamp(28px,4vw,44px)}
.more-row p{font:400 14.5px/1.5 var(--sans);color:var(--muted);max-width:52ch}
.ink .more-row p{color:var(--inv-muted)}
.panel{padding:8px;border-radius:32px;background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1px var(--hair-2)}
.panel>.core{border-radius:24px;background:var(--sheet);padding:clamp(20px,3vw,36px);box-shadow:var(--lift)}
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:14px;align-items:stretch}
.split .panel>.core{height:100%}
.stack{display:grid;gap:14px;grid-auto-rows:1fr}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.side-stat{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.side-stat .num{font:400 clamp(3rem,5vw,4.6rem)/1 var(--serif);letter-spacing:-.04em}
.side-stat .num small{font-size:.45em;color:var(--muted);margin:0 .1em;letter-spacing:0}
.side-stat p:not(.num):not(.cardlbl){font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.cardlbl.dark{color:var(--muted)}
.rates{display:grid;gap:22px;margin-top:26px}
.rate .lbl{display:flex;justify-content:space-between;gap:12px;font:400 14.5px/1.4 var(--sans);color:var(--ink-2);margin-bottom:10px}
.rate .lbl b{font:500 14px/1.4 var(--mono);color:var(--ink)}
.rate .track{height:14px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.rate .fill{height:100%;border-radius:999px;background:var(--ink);transform-origin:left;transform:scaleX(var(--w));transition:transform 1.4s var(--ease)}
.rate.hi .fill{background:var(--red)}
.js .rv .rate .fill{transform:scaleX(0)}
.js .rv.in .rate .fill{transform:scaleX(var(--w))}
.plain-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.plain-cards{grid-template-columns:1fr}}
.plain-cards .core{padding:clamp(22px,3vw,34px)}
.plain-cards h3{font-size:1.7rem;margin:22px 0 10px;letter-spacing:-.02em}
.plain-cards p:not(.cardlbl){font:400 15.5px/1.6 var(--sans);color:var(--ink-2)}
.more{list-style:none;margin:0;padding:0;columns:2;column-gap:48px}
.more li{break-inside:avoid;border-top:1px solid var(--hair-2)}
.more a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 0;text-decoration:none;font:400 1.08rem/1.35 var(--serif);transition:color .4s var(--ease)}
.more a span{font:400 11px/1 var(--mono);color:var(--muted);flex:none;transition:transform .5s var(--spring),color .4s}
.more a:hover{color:var(--red)}
.more a:hover span{color:var(--red);transform:translate(2px,-2px)}
@media (max-width:760px){.more{columns:1}}
.sub-h{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:clamp(44px,6vw,64px) 0 12px}
.cvlist{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair)}
.cvlist li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px 24px;align-items:baseline;padding:18px 0;border-top:1px solid var(--hair)}
.cvlist .yr{font:500 13px/1.4 var(--mono);color:var(--muted)}
.cvlist .now{color:var(--red)}
.cvlist b{font:500 1.25rem/1.25 var(--serif);letter-spacing:-.01em}
.cvlist em{font:italic 400 1.02rem/1.3 var(--serif);color:var(--muted);text-align:right}
@media (max-width:640px){.cvlist li{grid-template-columns:1fr}.cvlist em{text-align:left}}
.skills{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.skills span{font:400 14.5px/1.5 var(--sans);padding:9px 0;border-bottom:1px solid var(--hair-2)}
.skills span:last-child{border-bottom:0}

/* ---------- phase 1: contact, privacy, footer ---------- */
.page-head .direct{font:400 15px/1.5 var(--sans);color:var(--muted);text-align:right}
.page-head .direct a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--red)}
@media (max-width:860px){.page-head .direct{text-align:left}}
.brief{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:980px){.brief{grid-template-columns:1fr}}
.form{display:grid;gap:22px}
.field{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.field label,.field legend{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:0}
.field>label>span,.field>legend>span{color:var(--muted);margin-left:6px}
.field legend{margin-bottom:10px}
.form input[type=text],.form input[type=email],.form select,.form textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:0;border-radius:14px;padding:15px 16px;box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .3s var(--ease),background .3s var(--ease);-webkit-appearance:none;appearance:none}
.form textarea{resize:vertical;min-height:150px;line-height:1.55}
.form select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23948D80' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}
.form input::placeholder,.form textarea::placeholder{color:var(--pencil)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--red-soft);background:var(--sheet)}
.chips-in{display:flex;flex-wrap:wrap;gap:8px}
.chips-in label{position:relative;font:inherit;text-transform:none;letter-spacing:0;cursor:pointer}
.chips-in input{position:absolute;opacity:0;width:1px;height:1px}
.chips-in span{display:inline-block;font:400 14.5px/1 var(--sans);color:var(--ink-2);padding:12px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair);transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s}
.chips-in label:hover span{box-shadow:inset 0 0 0 1px var(--ink)}
.chips-in input:checked+span{background:var(--ink);color:var(--paper);box-shadow:none}
.chips-in input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
.err{display:none;font:400 13px/1.4 var(--sans);color:var(--red);margin:0}
.field.bad .err{display:block}
.field.bad input,.field.bad textarea{box-shadow:inset 0 0 0 1.5px var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-top:6px}
.submit-row .fine{font:400 13px/1.5 var(--sans);color:var(--muted);max-width:34ch}
.submit-row .fine a{color:var(--ink-2);text-underline-offset:3px}
.form .btn[disabled]{opacity:.65;pointer-events:none}
.fallback{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px;border-radius:16px;background:var(--red-soft);font:400 14.5px/1.5 var(--sans);color:var(--ink)}
.fallback[hidden]{display:none}
.next .eyebrow{margin-bottom:8px}
.steps{list-style:none;margin:0 0 28px;padding:0}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:20px 0;border-bottom:1px solid var(--hair)}
.steps b{font:italic 300 1.9rem/1 var(--serif);color:var(--red);letter-spacing:-.03em}
.steps h3{font-size:1.25rem;margin-bottom:4px}
.steps p{font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.next .core{padding:22px 24px}
.aside-p{font:400 15px/1.5 var(--sans);color:var(--ink-2);margin:10px 0 6px}
.aside-links a{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--hair-2);text-decoration:none;font:400 1.05rem/1.3 var(--serif);transition:color .3s}
.aside-links a:last-child{border-bottom:0}
.aside-links a:hover{color:var(--red)}
.aside-links a span{transition:transform .5s var(--spring)}
.aside-links a:hover span{transform:translateX(3px)}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:44px 0 12px;letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose p{font:400 1.12rem/1.7 var(--serif);color:var(--ink-2);margin:0 0 14px}
.prose a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--red)}
.thanks h1 em{color:var(--red)}
footer{padding-top:clamp(72px,9vw,112px);padding-bottom:clamp(28px,4vw,48px)}
.foot-cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px 40px;padding:36px 0 40px;border-top:1px solid var(--hair)}
.foot-intro p{font:400 14.5px/1.6 var(--sans);color:var(--muted);max-width:34ch}
.foot-brand{font:600 1.35rem/1 var(--serif)!important;color:var(--ink)!important;letter-spacing:-.02em;margin-bottom:12px!important}
.foot-brand i{color:var(--red);font-style:normal}
.foot-cols nav{display:flex;flex-direction:column;gap:2px}
.foot-h{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.foot-cols nav a{font:400 15px/1.4 var(--sans);color:var(--ink-2);text-decoration:none;padding:5px 0;width:max-content;transition:color .3s}
.foot-cols nav a:hover{color:var(--red)}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}.foot-intro{grid-column:1/-1}}

/* ---------- phase 2: services ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;list-style:none;margin:0 0 22px;padding:0;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .3s}
.crumbs a:hover{color:var(--red)}
.crumbs li+li::before{content:"\203A";margin-right:10px;color:var(--pencil)}
.crumbs [aria-current]{color:var(--ink)}
.page-head .eyebrow+h1,.page-head .crumbs+.eyebrow{margin-top:0}
.toc h3 a{text-decoration:none;color:inherit;display:inline-flex;align-items:baseline;gap:12px;transition:color .4s var(--ease)}
.toc h3 a span{font:400 .55em/1 var(--sans);color:var(--pencil);transition:transform .5s var(--spring),color .4s}
.toc h3 a:hover{color:var(--red)}
.toc h3 a:hover span{color:var(--red);transform:translate(3px,-3px)}
.svc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:860px){.svc-cards{grid-template-columns:1fr}}
.svc-card{display:block;text-decoration:none;color:inherit;transition:transform .6s var(--spring)}
.svc-card:hover{transform:translateY(-4px)}
.svc-card .core{padding:clamp(24px,3.4vw,40px);display:flex;flex-direction:column;gap:18px;height:100%}
.svc-card h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1}
.svc-card h2 em{color:var(--red)}
.svc-card p:not(.cardlbl):not(.big){font:400 16px/1.6 var(--sans);color:var(--ink-2);max-width:46ch}
.svc-card .big{font:300 italic clamp(3rem,5vw,4.4rem)/1 var(--serif);letter-spacing:-.04em;color:var(--red)}
.svc-card .big small{font:400 15px/1.4 var(--sans);font-style:normal;color:var(--ink-2);letter-spacing:0;display:block;margin-top:8px}
.svc-card .go{margin-top:auto}
.svc-card:hover .go{background:var(--red);box-shadow:none;color:var(--on-red)}
.svc-card:hover .go svg{transform:rotate(-45deg)}
.engage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.engage{grid-template-columns:1fr}}
.engage .core{padding:clamp(22px,3vw,32px);height:100%}
.engage h3{font-size:1.6rem;margin:20px 0 10px}
.engage p:not(.cardlbl){font:400 15.5px/1.6 var(--sans);color:var(--ink-2)}
.price-note{font:400 15px/1.6 var(--sans);color:var(--muted);margin-top:22px;max-width:60ch}
.price-note a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--red)}
.faq{border-bottom:1px solid var(--hair);max-width:880px}
.faq details{border-top:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:400 clamp(1.2rem,2vw,1.5rem)/1.3 var(--serif);letter-spacing:-.01em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary i{flex:none;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);position:relative;transition:transform .5s var(--spring),background .4s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
.faq .a{padding:0 60px 26px 0;font:400 1.08rem/1.7 var(--serif);color:var(--ink-2);max-width:68ch}
.faq .a a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--red)}
.page-head .ctas.solo{justify-content:flex-end}
@media (max-width:860px){.page-head .ctas.solo{justify-content:flex-start}}
.toc p a,.more-row p a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--red)}
.inline-go{display:inline-flex;gap:8px;font:500 14px/1.4 var(--sans);color:var(--ink);text-decoration:none;margin-top:4px}
.inline-go span{color:var(--red);transition:transform .5s var(--spring)}
.inline-go:hover{color:var(--red)}
.inline-go:hover span{transform:translateX(3px)}
.svc-card .fn{cursor:help}

/* ---------- phase 3: articles ---------- */
.art-head{padding:clamp(140px,16vw,190px) 0 0}
.art-head .wrap{max-width:980px}
.art-kicker{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:22px}
.art-head h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:.98;letter-spacing:-.04em;font-weight:450}
.art-head h1 em{font-style:italic;font-weight:300;color:var(--red)}
.dek{font:400 clamp(1.2rem,2vw,1.5rem)/1.5 var(--serif);color:var(--ink-2);margin-top:24px;max-width:46ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:30px;padding-top:20px;border-top:1px solid var(--ink);font:400 13px/1.5 var(--mono);color:var(--muted);letter-spacing:.02em}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.byline b{color:var(--ink);font-weight:500;font-family:var(--sans);font-size:15px;letter-spacing:0}
.byline .sep{color:var(--pencil)}
.art{padding:clamp(48px,6vw,80px) 0 0}
.art .wrap{max-width:980px}
.art-body{max-width:68ch}
.art-body>p,.art-body li{font:400 1.18rem/1.75 var(--serif);color:var(--ink-2)}
.art-body>p{margin:0 0 20px}
.art-body h2{font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.1;letter-spacing:-.025em;margin:64px 0 18px;scroll-margin-top:100px}
.art-body h3{font-size:1.35rem;margin:36px 0 10px}
.art-body a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--red)}
.art-body strong{color:var(--ink);font-weight:600}
.art-body ul,.art-body ol{margin:0 0 24px;padding-left:0;list-style:none;counter-reset:li}
.art-body ul li,.art-body ol li{position:relative;padding-left:30px;margin:0 0 12px}
.art-body ul li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:1.5px;background:var(--red)}
.art-body ol li{counter-increment:li}
.art-body ol li::before{content:counter(li);position:absolute;left:0;top:.2em;font:500 12px/1.6 var(--mono);color:var(--red)}
.art-body .fn{font-size:.62em;top:-.15em}
.keybox{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);margin:8px 0 48px}
.keybox div{padding:20px 18px 22px 0}
.keybox div+div{padding-left:18px;border-left:1px solid var(--hair)}
.keybox b{display:block;font:400 clamp(2.2rem,4vw,3.2rem)/1 var(--serif);letter-spacing:-.04em;color:var(--ink);margin-bottom:8px}
.keybox b.r{color:var(--red)}
.keybox span{font:400 14px/1.45 var(--sans);color:var(--ink-2)}
@media (max-width:760px){.keybox{grid-template-columns:1fr 1fr}.keybox div:nth-child(3){padding-left:0;border-left:0}.keybox div:nth-child(n+3){border-top:1px solid var(--hair)}}
.art-table{width:100%;border-collapse:collapse;margin:8px 0 28px;font:400 15px/1.45 var(--sans)}
.art-table th{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--ink)}
.art-table td{padding:13px 12px 13px 0;border-bottom:1px solid var(--hair-2);color:var(--ink-2);vertical-align:top}
.art-table td:first-child{font:400 1.05rem/1.35 var(--serif);color:var(--ink)}
.art-table td.n{font:500 14px/1.4 var(--mono);color:var(--ink);white-space:nowrap}
.table-wrap{overflow-x:auto;margin:0 0 8px}
.callout{margin:32px 0;padding:22px 24px;border-radius:20px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--hair-2)}
.callout .cardlbl{margin-bottom:10px}
.callout p{font:400 15.5px/1.6 var(--sans);color:var(--ink-2);margin:0 0 8px}
.callout p:last-child{margin-bottom:0}
.art-cta{margin:64px 0 0;padding:clamp(24px,4vw,40px);border-radius:28px;background:var(--inv-bg);color:var(--inv-fg)}
.art-cta h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:0 0 12px;color:var(--inv-fg)}
.art-cta p{font:400 1.1rem/1.6 var(--serif);color:var(--inv-muted);margin:0 0 22px;max-width:52ch}
.art-cta .btn{--bg:var(--inv-fg);--fg:var(--inv-bg);--ic:rgba(21,19,14,.1)}
.art-cta .btn:hover{--bg:var(--inv-red);--fg:#15130E}
.related{margin-top:56px}
.own-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.own-list{grid-template-columns:1fr}}
.own-card{display:block;text-decoration:none;color:inherit;transition:transform .6s var(--spring)}
.own-card:hover{transform:translateY(-4px)}
.own-card .core{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px;height:100%}
.own-card h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1;letter-spacing:-.025em}
.own-card p:not(.cardlbl){font:400 15.5px/1.55 var(--sans);color:var(--ink-2)}
.own-card .go{margin-top:auto}
.own-card:hover .go{background:var(--red);box-shadow:none;color:var(--on-red)}
.own-card:hover .go svg{transform:rotate(-45deg)}
.also{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between;padding:clamp(24px,3.4vw,40px)!important}
.also h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.02;margin:18px 0 12px}
.also h2 em{font-style:italic;font-weight:400}
.also p:not(.cardlbl){font:400 16px/1.6 var(--sans);color:var(--ink-2);max-width:56ch}
.sec-head .lead a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--red)}
.toc p+p{margin-top:12px}

/* ---------- home: four jobs, each with a figure ---------- */
.jobs{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair)}
.job{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:32px clamp(40px,6vw,104px);align-items:center;padding:clamp(48px,6vw,92px) 0;border-top:1px solid var(--hair);position:relative}
.job::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--red);transition:width 1s var(--ease)}
.job:hover::before{width:100%}
.job-text{grid-column:1;grid-row:1}
.job .spec{grid-column:2;grid-row:1;margin:0;min-width:0}
.job .n{display:block;font:italic 300 clamp(3.4rem,6vw,5.4rem)/.8 var(--serif);color:var(--pencil);letter-spacing:-.04em;margin-bottom:26px;transition:color .6s var(--ease)}
.job:hover .n{color:var(--red)}
.job h3{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-.03em;margin-bottom:16px}
.job h3 a{text-decoration:none;color:inherit;display:inline-flex;align-items:baseline;gap:12px;transition:color .4s var(--ease)}
.job h3 a span{font:400 .55em/1 var(--sans);color:var(--pencil);transition:transform .5s var(--spring),color .4s}
.job h3 a:hover{color:var(--red)}
.job h3 a:hover span{color:var(--red);transform:translate(3px,-3px)}
.job-text p{color:var(--ink-2);max-width:42ch;font:400 clamp(1.05rem,1.4vw,1.18rem)/1.6 var(--serif)}
@media (max-width:980px){
  .job{grid-template-columns:1fr;gap:36px}
  .job-text,.job .spec{grid-column:1;grid-row:auto}
  .job .spec{max-width:600px}
}

/* the figure: a working document in a bezel */
.spec .bezel{transform:rotate(var(--tilt,-.6deg));transition:transform .9s var(--spring)}
.job:nth-child(even) .spec{--tilt:.6deg}
.job:hover .spec .bezel{transform:rotate(0) translateY(-4px)}
@media (max-width:760px){.spec .bezel,.job:hover .spec .bezel{transform:none}}
.spec .core{padding:clamp(18px,2.4vw,28px)}
.spec figcaption{font:400 12px/1.5 var(--mono);color:var(--muted);margin-top:18px;padding-left:10px;letter-spacing:.02em;max-width:60ch}
.spec figcaption b{color:var(--ink);font-weight:500;margin-right:6px}
.spec-h{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:10px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--hair-2)}
.spec-h span:first-child{color:var(--ink)}
.spec-h span:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:1px}
.var{font:500 .74em/1 var(--mono);font-style:normal;color:var(--ink-2);background:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:inset 0 0 0 1px var(--hair-2);border-radius:6px;padding:.28em .45em;letter-spacing:0;white-space:nowrap;vertical-align:.08em}
.spec .pen{font:400 1.45rem/1 var(--hand);color:var(--red)}
.spec svg{display:block}
.spec li i svg,.engines i svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 01 keyword map */
.kr{display:grid;grid-template-columns:minmax(0,1fr) 70px 138px;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--hair-2)}
.kr:last-child{border-bottom:0}
.kr.hd{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 0 9px}
.kr .q{font:400 1.04rem/1.3 var(--serif);color:var(--ink);min-width:0}
.kr .it{font:400 12px/1 var(--mono);color:var(--muted)}
.kr.hd .it{font:inherit;color:inherit}
.pt{display:inline-block;justify-self:start;font:500 12px/1 var(--sans);color:var(--paper);background:var(--ink);border-radius:999px;padding:7px 11px;white-space:nowrap}
.kr.gap{border-bottom:0;padding-bottom:4px}
.kr.gap .pt{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 55%,transparent)}
.ring{position:relative;justify-self:start}
.ring svg{position:absolute;left:-12px;right:-12px;top:-9px;bottom:-9px;width:calc(100% + 24px);height:calc(100% + 18px);overflow:visible}
.ring path,.spark .line{fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kr-note{text-align:right;padding:2px 4px 10px 0;border-bottom:1px solid var(--hair-2)}
@media (max-width:520px){.kr{grid-template-columns:minmax(0,1fr) auto}.kr .it{display:none}}

/* 02 AI answer */
.ask{margin-left:auto;width:max-content;max-width:88%;background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:18px 18px 4px 18px;padding:10px 15px;font:400 14.5px/1.45 var(--sans);color:var(--ink)}
.ans{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;margin-top:18px;align-items:start}
.bot{width:30px;height:30px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.bot svg{width:14px;height:14px;fill:var(--paper)}
.ans p{font:400 1.08rem/1.75 var(--serif);color:var(--ink)}
.ans .c{font:500 10px/1 var(--mono);color:var(--red);vertical-align:super;margin-left:2px}
.fix del{text-decoration:none;color:var(--pencil);background:linear-gradient(var(--red),var(--red)) no-repeat 0 58%/100% 2px}
.fix ins{text-decoration:none;font:400 1.4em/1 var(--hand);color:var(--red)}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-left:42px}
.src{font:400 11.5px/1 var(--mono);color:var(--muted);border-radius:999px;padding:7px 10px;box-shadow:inset 0 0 0 1px var(--hair)}
.src b{color:var(--red);font-weight:500;margin-right:6px}
.src.you{color:var(--ink);background:var(--red-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 45%,transparent)}
.engines{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair-2);font:400 13px/1 var(--sans);color:var(--ink-2)}
.engines span{display:inline-flex;align-items:center;gap:7px}
.engines i{width:16px;height:16px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center}
.engines em{font:400 11px/1 var(--mono);font-style:normal;color:var(--muted)}
@media (max-width:520px){.srcs{padding-left:0}}

/* 03 daily check */
.rank{container-type:inline-size;position:relative;padding-bottom:4px}
.rank-lbl,.spark-lbl,.watch-lbl{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cells{position:relative;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:3px}
.cells i{height:30px;border-radius:5px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.cells i:nth-child(n+11){background:color-mix(in srgb,var(--ink) 4%,transparent)}
.cells i.was{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--red) 70%,transparent);border-radius:5px}
.cells::after{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:1px;background:var(--ink);opacity:.35}
.mk{position:absolute;left:0;top:0;height:30px;width:calc((100cqw - 57px) / 20);border-radius:5px;background:var(--red);box-shadow:0 6px 14px -6px var(--red);transform:translateX(calc(5 * (100cqw + 3px) / 20))}
.pages{display:grid;grid-template-columns:1fr 1fr;margin-top:9px;font:400 12px/1 var(--mono);color:var(--muted)}
.pages span{text-align:center}
.rank-note{position:absolute;right:0;top:-6px;font-size:1.3rem!important}
.checks{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--hair-2);display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.checks li,.done li{display:flex;align-items:center;gap:9px;font:400 14px/1.3 var(--sans);color:var(--ink-2)}
.checks li i,.done li i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center}
.checks li b{margin-left:auto;font:400 11px/1 var(--mono);color:var(--muted);font-weight:400}
.checks li.wide{grid-column:1/-1}
.checks li.wide i{background:var(--red)}
@media (max-width:520px){.checks{grid-template-columns:1fr}}
@media (max-width:400px){.rank-note{font-size:1.1rem!important}.rank-lbl{font-size:9px}}

/* 04 weekly report */
.spark-lbl{display:flex;justify-content:space-between}
.spark-lbl span:last-child{color:var(--red)}
.spark-plot{position:relative;height:74px}
.spark-plot svg{width:100%;height:100%;overflow:visible}
.spark .area{fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.spark .line{stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.spark-now{position:absolute;right:0;top:11.25%;width:11px;height:11px;border-radius:50%;background:var(--red);transform:translate(50%,-50%);box-shadow:0 0 0 4px var(--red-soft)}
.done{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--hair-2);display:grid;gap:10px}
.watch{margin-top:16px;border-radius:14px;padding:13px 15px;box-shadow:inset 0 0 0 1px var(--hair);display:grid;gap:4px}
.watch-lbl{margin-bottom:4px}
.watch p:not(.watch-lbl):not(.pen){font:400 1rem/1.4 var(--serif);color:var(--ink)}
.watch .pen{justify-self:end;margin-top:2px}

/* figure motion: plays once when the row reveals */
.js .job .kr,.js .job .kr-note,.js .job .ask,.js .job .ans,.js .job .srcs,.js .job .engines,.js .job .checks li,.js .job .done li,.js .job .watch,.js .job .rank-note{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .job.in .kr,.js .job.in .kr-note,.js .job.in .ask,.js .job.in .ans,.js .job.in .srcs,.js .job.in .engines,.js .job.in .checks li,.js .job.in .done li,.js .job.in .watch,.js .job.in .rank-note{opacity:1;transform:none}
.js .job .kr:nth-child(2),.js .job .ask{transition-delay:.35s}
.js .job .kr:nth-child(3),.js .job .ans{transition-delay:.45s}
.js .job .kr:nth-child(4),.js .job .srcs{transition-delay:.55s}
.js .job .kr:nth-child(6),.js .job .engines{transition-delay:.65s}
.js .job .kr-note{transition-delay:1.5s}
.js .job .checks li:nth-child(1),.js .job .done li:nth-child(1){transition-delay:.5s}
.js .job .checks li:nth-child(2),.js .job .done li:nth-child(2){transition-delay:.58s}
.js .job .checks li:nth-child(3),.js .job .done li:nth-child(3){transition-delay:.66s}
.js .job .checks li:nth-child(4){transition-delay:.74s}
.js .job .checks li:nth-child(5),.js .job .watch{transition-delay:.85s}
.js .job .rank-note{transition-delay:1.7s}
.js .job .ring svg{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.6,0,.2,1) 1.05s}
.js .job.in .ring svg{clip-path:inset(0 0 0 0)}
.js .job .fix del{background-size:0% 2px;transition:background-size .5s cubic-bezier(.6,0,.2,1) 1.1s}
.js .job.in .fix del{background-size:100% 2px}
.js .job .fix ins{opacity:0;transition:opacity .6s var(--ease) 1.55s}
.js .job.in .fix ins{opacity:1}
.js .job .mk{transform:translateX(calc(13 * (100cqw + 3px) / 20));transition:transform 1.2s var(--spring) .7s}
.js .job.in .mk{transform:translateX(calc(5 * (100cqw + 3px) / 20))}
.js .job .spark-plot svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.4,0,.2,1) .4s}
.js .job.in .spark-plot svg{clip-path:inset(0 -2% 0 0)}
.js .job .spark-now{opacity:0;transition:opacity .4s var(--ease) 1.75s}
.js .job.in .spark-now{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .job *{transition:none!important}
  .js .job .kr,.js .job .kr-note,.js .job .ask,.js .job .ans,.js .job .srcs,.js .job .engines,.js .job .checks li,.js .job .done li,.js .job .watch,.js .job .rank-note,.js .job .fix ins,.js .job .spark-now{opacity:1;transform:none}
  .js .job .ring svg,.js .job .spark-plot svg{clip-path:none}
  .js .job .fix del{background-size:100% 2px}
  .js .job .mk{transform:translateX(calc(5 * (100cqw + 3px) / 20))}
}
/* links inside dark sheets */
.ink .more-row p a,.ink .lead a,.ink .proof p a{color:var(--inv-fg)}

/* worked-with strip: single-colour logos drawn with masks so they follow the ink colour */
.marquee li.lg{font-style:normal}
.logo{display:block;height:var(--h,.9em);aspect-ratio:var(--ar);background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.logo.groove{--src:url(/assets/logos/groove.svg);--ar:4.29;--h:.86em}
.logo.imperia{--src:url(/assets/logos/imperia.png);--ar:3.667;--h:1.22em}
.logo.om{--src:url(/assets/logos/om.png);--ar:1.085;--h:1.3em}
.logo.petrusco{--src:url(/assets/logos/petrusco.png);--ar:3.981;--h:.9em}
.logo.loft{--src:url(/assets/logos/loft.svg);--ar:.774;--h:1.38em}
.logo.fiercesix{--src:url(/assets/logos/fiercesix.png);--ar:7.2;--h:.66em}
.logo.untitled{--src:url(/assets/logos/untitled-media.png);--ar:2.325;--h:1.3em}
.logo-helply{display:flex;align-items:center;gap:.3em;font:600 1em/1 var(--sans);letter-spacing:-.035em}
.logo-helply i{width:.85em;height:.85em;background:currentColor;-webkit-mask:url(/assets/logos/helply-mark.png) center/contain no-repeat;mask:url(/assets/logos/helply-mark.png) center/contain no-repeat}