/* claudestudio site: overrides on tokens.css. Spine at the top of index.html. */

:root{
  --paper:#FCFCFB; --paper-2:#F3F3F1; --surface:#FFFFFF;
  --ink-rgb:18 18 17;
  --ink:rgb(var(--ink-rgb)); --ink-2:rgb(var(--ink-rgb) / .62); --ink-3:rgb(var(--ink-rgb) / .44);
  --hairline:rgb(var(--ink-rgb) / .1); --hairline-2:rgb(var(--ink-rgb) / .18);
  --red:#E8321F; --red-ink:#C42617;
  --accent:var(--red); --accent-ink:#FFFFFF; --focus:var(--red-ink);

  --font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-text:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-serif:"Newsreader", Georgia, serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  --word:clamp(5.25rem, .5rem + 21vw, 13.5rem);
  --word-wt:400; --word-lh:.86; --word-ls:-.055em;
  --h2:clamp(1.875rem, 1.2rem + 1.9vw, 3rem); --h2-wt:400; --h2-lh:1.02; --h2-ls:-.035em;
  --h3:clamp(1.375rem, 1.1rem + .9vw, 2rem); --h3-wt:400; --h3-lh:1.12; --h3-ls:-.025em;
  --lead:clamp(1.2rem, 1rem + .6vw, 1.5rem);
  --body:1.0625rem;
  --label-ls:.04em;

  --container:1320px;
  --margin:clamp(1.25rem, .6rem + 2.6vw, 2.5rem);
  --r-btn:6px; --r-card:6px; --r-media:6px; --btn-h:46px; --btn-h-sm:34px;
  --nav-h:60px;
}

body{font-variation-settings:"opsz" 14;letter-spacing:-.003em}
.t-word,.t-h2,.t-h3,.hero-h1,.finale-h,.sp-name,.stats dd{font-variation-settings:"opsz" 96}
.t-lead{font-family:var(--font-text);font-weight:400;letter-spacing:-.012em;line-height:1.36;font-variation-settings:"opsz" 24}
.t-label{font-family:var(--font-mono);font-weight:400;font-size:12px;text-transform:none;letter-spacing:0}
.t-small{font-size:var(--small);line-height:1.5}
code{font-family:var(--font-mono);font-size:.92em}
.link{text-underline-offset:.25em}

/* ---------------------------------------- nav */
.nav{position:sticky;top:0;z-index:50;background:rgb(252 252 251 / .86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--t-ui) var(--ease-ui)}
.nav.is-scrolled{border-bottom-color:var(--hairline)}
.nav-in{width:min(100% - 2 * var(--margin), var(--container));margin-inline:auto;height:var(--nav-h);display:flex;align-items:center;gap:40px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:17px;letter-spacing:-.02em;text-decoration:none;font-variation-settings:"opsz" 24}
.brand-mark{width:20px;height:20px}
.brand-mark path{color:var(--red)}
.nav-links{display:flex;gap:28px;font-size:var(--ui)}
.nav-links a,.nav-gh{text-decoration:none;color:var(--ink-2);padding-block:10px;transition:color var(--t-fast) var(--ease-ui)}
.nav-links a:hover,.nav-gh:hover{color:var(--ink)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:var(--ui)}
.btn{font-weight:500;font-size:15px;letter-spacing:-.01em}
.btn--sm{font-size:13px}

/* ---------------------------------------- hero */
.hero{padding-block:clamp(3rem, 1rem + 6vw, 6.5rem) var(--s-9)}
.hero-kicker{display:flex;justify-content:space-between;gap:16px;color:var(--ink-2);margin-bottom:clamp(2.5rem, 1rem + 5vw, 5.5rem)}
.h1-wrap{position:relative;width:fit-content;max-width:100%}
.hero-h1{position:relative;z-index:1}
.redlines{position:absolute;inset:0;pointer-events:none;z-index:2}
.rl{position:absolute;color:var(--red)}
.rl-h{height:1px;background:currentColor;transform-origin:left;transform:scaleX(var(--k,0));transition:transform 700ms var(--ease) var(--d,0ms)}
.rl-h::before,.rl-h::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:currentColor}
.rl-h::before{left:0}.rl-h::after{right:0}
.rl-v{width:1px;background:currentColor;transform-origin:top;transform:scaleY(var(--k,0));transition:transform 700ms var(--ease) var(--d,0ms)}
.rl-v::before,.rl-v::after{content:"";position:absolute;left:-4px;height:1px;width:9px;background:currentColor}
.rl-v::before{top:0}.rl-v::after{bottom:0}
.rl-guide{height:0;border-top:1px dashed rgb(232 50 31 / .55);transform-origin:left;transform:scaleX(var(--k,0));transition:transform 900ms var(--ease) var(--d,0ms)}
.rl-tag{font:400 11px/1 var(--font-mono);letter-spacing:.02em;color:var(--red-ink);background:var(--paper);padding:3px 5px;white-space:nowrap;
  opacity:var(--k,0);transition:opacity 500ms var(--ease-ui) var(--d,0ms)}
.redlines.is-on{--k:1}

.hero-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(2.5rem, 1rem + 4vw, 4.5rem);align-items:end}
.hero-lede{grid-column:1 / span 5;max-width:34ch}
.hero-act{grid-column:7 / span 6;display:grid;gap:14px}
.cmd{display:flex;align-items:center;gap:12px;height:56px;padding:0 6px 0 18px;border-radius:8px;background:var(--surface);
  box-shadow:0 0 0 1px var(--hairline-2),0 1px 2px rgb(0 0 0 / .04),0 8px 24px -12px rgb(0 0 0 / .12);font-family:var(--font-mono);font-size:14px;min-width:0}
.cmd code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.cmd-prompt{color:var(--red-ink)}
.cmd-copy{height:44px;padding:0 16px;border-radius:5px;border:0;background:var(--ink);color:var(--paper);font:500 13px/1 var(--font-text);cursor:pointer;transition:background-color var(--t-fast) var(--ease-ui)}
.cmd-copy:hover{background:rgb(var(--ink-rgb) / .84)}
.cmd--dark{background:#1B1B1A;color:#EDEDEA;box-shadow:0 0 0 1px rgb(255 255 255 / .08)}
.cmd--dark .cmd-prompt{color:#FF7A66}
.cmd--dark .cmd-copy{background:#EDEDEA;color:#121211}
.hero-meta{max-width:60ch}

/* ---------------------------------------- film */
.film{padding-bottom:var(--s-9)}
.film-frame{margin:0;position:relative;border-radius:10px;overflow:hidden;background:#121211;box-shadow:0 0 0 1px var(--hairline)}
.film-frame video{width:100%;aspect-ratio:16/9;object-fit:cover}
.film-toggle{position:absolute;left:20px;bottom:56px;height:44px;padding:0 18px;border-radius:6px;border:0;display:inline-flex;align-items:center;gap:10px;background:#121211;color:#FCFCFB;font:500 14px/1 var(--font-text);cursor:pointer;box-shadow:0 8px 24px -8px rgb(0 0 0 / .4)}
.film-frame figcaption{display:flex;justify-content:space-between;padding:12px 16px;color:rgb(237 237 234 / .7);background:#121211}

/* ---------------------------------------- section heads */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-bottom:var(--s-8);align-items:start}
.sec-num{grid-column:1 / span 3;color:var(--ink-2);padding-top:.9em}
.sec-head h2{grid-column:4 / span 9;max-width:28ch}

/* ---------------------------------------- work wall */
.work{padding-block:var(--s-9)}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(3rem, 2rem + 4vw, 6rem)}
.card{position:relative;display:block;text-decoration:none;color:inherit}
.shot{margin:0;border-radius:var(--r-media);overflow:hidden;box-shadow:0 0 0 1px var(--hairline);aspect-ratio:16/10;background:var(--paper-2)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 900ms var(--ease)}
.card:hover .shot img{transform:scale(1.025)}
.media{position:relative}
.phone{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);width:clamp(84px,17%,150px);margin:0;border-radius:16px;overflow:hidden;
  box-shadow:0 0 0 1px rgb(0 0 0 / .14),0 0 0 5px #121211,0 24px 40px -16px rgb(0 0 0 / .45);aspect-ratio:390/844;background:#121211;transition:transform 700ms var(--ease)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.card:hover .phone{transform:translateY(-8px)}
.card-cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;font-size:var(--ui)}
.card-cap b{font-weight:500}
.spec{position:relative;display:inline-block;margin-top:10px;padding-top:10px;font:400 11px/1 var(--font-mono);letter-spacing:.02em;color:var(--red-ink)}
.spec::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--red)}
.spec::after{content:"";position:absolute;left:0;right:0;top:-4px;height:9px;border-inline:1px solid var(--red)}
.c-a{grid-column:1 / span 7}
.c-b{grid-column:8 / span 5;margin-top:clamp(2rem,8vw,9rem)}
.c-c{grid-column:1 / span 5}
.c-d{grid-column:6 / span 7;margin-top:clamp(1rem,4vw,4rem)}
.c-e{grid-column:2 / span 7}
.c-f{grid-column:9 / span 4;margin-top:clamp(2rem,10vw,11rem)}
.c-g{grid-column:1 / span 6}
.c-h{grid-column:7 / span 6;margin-top:clamp(1rem,5vw,5rem)}
.c-i{grid-column:3 / span 8}
.wall-note{margin-top:var(--s-7);text-align:center}

/* ---------------------------------------- the gap */
.diff{padding-block:var(--s-9);background:var(--paper-2)}
.table{border-top:1px solid var(--ink)}
.tr{display:grid;grid-template-columns:3fr 3fr 6fr;column-gap:var(--gap);padding:18px 0;border-bottom:1px solid var(--hairline-2);align-items:baseline;font-size:clamp(1rem,.9rem + .4vw,1.25rem)}
.tr i{font-style:normal;font-size:var(--ui);margin-left:10px}
.th{font:400 12px/1 var(--font-mono);color:var(--ink-2);padding:14px 0}
.slop{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}

/* ---------------------------------------- method */
.method{padding-block:var(--s-9)}
.steps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.step-list{grid-column:1 / span 4;list-style:none;margin:0;padding:0;position:sticky;top:calc(var(--nav-h) + 48px);align-self:start}
.step-list a{border-radius:6px;display:flex;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid var(--hairline);text-decoration:none;color:var(--ink-2);
  font-size:clamp(1.1rem,1rem + .5vw,1.5rem);letter-spacing:-.02em;transition:color var(--t-ui) var(--ease-ui)}
.step-list li:last-child a{border-bottom:1px solid var(--hairline)}
.step-list .t-label{color:inherit}
.step-list .is-active a{color:var(--ink)}
.step-list .is-active .t-label{color:var(--red-ink)}
.step-panels{grid-column:6 / span 7}
.panel{min-height:62vh;padding-block:24px 80px;display:grid;align-content:start;gap:20px}
.panel p{max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font:400 12px/1 var(--font-mono);padding:8px 10px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--hairline-2)}
.code{margin:0;padding:20px 22px;border-radius:8px;background:#161615;color:#D9D9D4;font:400 13px/1.7 var(--font-mono);overflow-x:auto;white-space:pre}
.code .k{color:#FF8A78}
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.checks li{padding:12px 0;border-bottom:1px solid var(--hairline);display:flex;gap:14px}
.checks li::before{content:"✓";color:var(--red-ink)}
.term{padding:20px 22px;border-radius:8px;background:#161615;color:#EDEDEA;font:400 13px/1.85 var(--font-mono);--ink-2:rgb(237 237 234 / .55)}
.term .dim{color:rgb(237 237 234 / .55)}
.term .ok{color:#8FD694;font-weight:500}
.term-sum{margin-top:8px;padding-top:8px;border-top:1px solid rgb(255 255 255 / .1)}

/* ---------------------------------------- directions: specimen stack */
.dirs{padding-top:var(--s-9)}
.specimens{list-style:none;margin:0;padding:0}
.sp{background:var(--sp-bg);color:var(--sp-ink)}
.sp-in{display:grid;grid-template-columns:48px minmax(0,1fr) 200px 220px;column-gap:var(--gap);align-items:center;min-height:clamp(96px, 6rem + 4vw, 168px);padding-block:18px}
.sp .t-label{color:inherit;opacity:.86}
.sp-name{margin:0;line-height:.95}
.sp-use{font-size:var(--ui);opacity:.82}
.sp-ex{justify-self:end;text-align:right}
.sp-1{--sp-bg:#08090A;--sp-ink:#F7F8F8}
.sp-1 .sp-name{font:500 clamp(2.25rem,1rem + 3.4vw,4.25rem)/1 var(--font-display);letter-spacing:-.035em}
.sp-2{--sp-bg:#FAFAFA;--sp-ink:#171717;box-shadow:inset 0 1px 0 rgb(0 0 0 / .06)}
.sp-2 .sp-name{font:400 clamp(2.25rem,1rem + 3.4vw,4.25rem)/1 var(--font-display);letter-spacing:-.05em}
.sp-2 .sp-name::before{content:"";display:inline-block;width:3px;height:.7em;background:#533AFD;margin-right:.3em;vertical-align:.02em}
.sp-3{--sp-bg:#F0EEE6;--sp-ink:#141413}
.sp-3 .sp-name{font:300 clamp(2.4rem,1rem + 3.6vw,4.5rem)/1 var(--font-serif);letter-spacing:-.03em}
.sp-4{--sp-bg:#FFFFFF;--sp-ink:#1E1D1C}
.sp-4 .sp-name{font:300 clamp(3rem,1rem + 6vw,7rem)/.8 var(--font-display);letter-spacing:-.06em}
.sp-5{--sp-bg:#FFFEF2;--sp-ink:#333333}
.sp-5 .sp-name{font:400 clamp(1.4rem,1.1rem + .9vw,1.95rem)/1.3 var(--font-serif);letter-spacing:0}
.sp-6{--sp-bg:#1F2A44;--sp-ink:#F3F3EC}
.sp-6 .sp-name{font:600 clamp(3rem,1rem + 6vw,7rem)/.82 var(--font-display);font-stretch:75%;letter-spacing:-.01em}
.sp-7{--sp-bg:#FFFFFF;--sp-ink:#1A1A1A;box-shadow:inset 0 1px 0 rgb(0 0 0 / .06)}
.sp-7 .sp-name{font:400 clamp(2.4rem,1rem + 3.6vw,4.5rem)/1 var(--font-serif);letter-spacing:-.02em;text-decoration:underline;text-decoration-color:#B50938;text-decoration-thickness:2px;text-underline-offset:.12em}
.sp-8{--sp-bg:#121714;--sp-ink:#E9F0E6;background-image:linear-gradient(to right,rgb(255 255 255 / .05) 1px,transparent 1px),linear-gradient(rgb(255 255 255 / .05) 1px,transparent 1px);background-size:56px 56px}
.sp-8 .sp-name{font:500 clamp(1.6rem,1rem + 2vw,2.75rem)/1 var(--font-mono);letter-spacing:.14em;color:#ABFF02}
.sp-9{--sp-bg:#8ED462;--sp-ink:#1E2A12}
.sp-9 .sp-name{font:600 clamp(2.6rem,1rem + 4.4vw,5.5rem)/.92 var(--font-display);letter-spacing:-.06em}
.sp-10{--sp-bg:#100904;--sp-ink:#FFEDD7}
.sp-10 .sp-name{font:300 italic clamp(2.6rem,1rem + 4.4vw,5.5rem)/.95 var(--font-serif);letter-spacing:-.03em;filter:blur(var(--blur,0px));transition:filter 900ms var(--ease)}
.sp-10:not(:hover){--blur:0px}

/* ---------------------------------------- evidence */
.evidence{padding-block:var(--s-9)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 var(--s-8);border-top:1px solid var(--ink)}
.stats div{padding:18px var(--gap) 0 0}
.stats div + div{padding-left:var(--gap);border-left:1px solid var(--hairline)}
.stats dd{margin:28px 0 0;font:400 clamp(3rem,1.5rem + 4vw,6rem)/.9 var(--font-display);letter-spacing:-.05em}
.credits{font-size:clamp(1.35rem,1rem + 1.2vw,2.25rem);line-height:1.3;letter-spacing:-.025em;max-width:58ch;font-variation-settings:"opsz" 48}
.credits b{font-weight:500}
.ev-note{margin-top:var(--s-6);max-width:70ch}

/* ---------------------------------------- finale */
.finale{padding-block:var(--s-9);border-top:1px solid var(--hairline)}
.finale-h{font:400 clamp(3rem,.8rem + 8vw,9rem)/.9 var(--font-display);letter-spacing:-.055em;max-width:14ch;margin-bottom:var(--s-7)}
.finale-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:18px}
.finale-row .cmd{flex:0 1 640px}
.finale-row .btn{height:56px}

/* ---------------------------------------- footer */
.foot{padding-bottom:40px}
.ruler{position:relative;height:28px;border-top:1px solid var(--red);margin-bottom:40px;
  background:linear-gradient(to right,var(--red) 1px,transparent 1px) 0 0/80px 14px repeat-x,linear-gradient(to right,rgb(232 50 31 / .5) 1px,transparent 1px) 0 0/8px 6px repeat-x}
.ruler-w{position:absolute;right:var(--margin);top:12px;color:var(--red-ink);background:var(--paper);padding:2px 6px}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:baseline}
.foot-in nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--ui)}
.foot-in nav a{text-decoration:none;color:var(--ink-2);padding-block:6px}
.foot-in nav a:hover{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:24px;translate:-50% 20px;opacity:0;padding:10px 16px;border-radius:6px;background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);transition:opacity var(--t-ui) var(--ease-ui),translate var(--t-ui) var(--ease);z-index:90;pointer-events:none}
.toast.is-on{opacity:1;translate:-50% 0}

/* ---------------------------------------- mobile, recomposed */
@media (max-width: 900px){
  .nav-links,.nav-gh{display:none}
  .hero-kicker{flex-direction:column;gap:6px}
  .hero-foot,.sec-head,.steps,.wall{display:block}
  .hero-act{margin-top:28px}
  .cmd{height:auto;min-height:56px;padding-block:6px}
  .cmd code{white-space:normal;word-break:break-all;font-size:12.5px;line-height:1.4}
  .sec-num{margin-bottom:14px}
  .card{margin-top:56px!important}
  .card:first-child{margin-top:0!important}
  .card-cap{flex-direction:column;gap:4px}
  .tr{grid-template-columns:1fr 1fr;row-gap:6px}
  .tr > :first-child{grid-column:1 / -1;font-size:var(--small);color:var(--ink-2)}
  .tr i{display:block;margin:2px 0 0}
  .th{display:none}
  .step-list{position:static;margin-bottom:24px}
  .panel{min-height:0;padding-block:24px 32px;border-top:1px solid var(--hairline)}
  .sp-in{grid-template-columns:32px 1fr;row-gap:6px}
  .sp-use{grid-column:2}.sp-ex{grid-column:2;justify-self:start;text-align:left}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(3){padding-left:0;border-left:0}
  .stats div{padding-bottom:20px}
  .finale-row .btn,.finale-row .cmd{width:100%;flex:1 1 100%;justify-content:center}
  .foot-in{grid-template-columns:1fr}
  .film-toggle{bottom:52px;left:12px}
}

@media (prefers-reduced-motion: reduce){
  .rl-h,.rl-v,.rl-guide,.rl-tag{transition:none}
}
.bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.film-toggle .tri{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.film-toggle.is-playing .tri{width:9px;height:12px;border:0;border-inline:3px solid currentColor}