/* Section choreography for the home page. Progress variables (--p, --tl, --route, --drum…) are written by sections.js;
   each defaults to its finished state so no-JS, reduced motion and paused motion show complete, flat sections. */
:root{--press-ink:#8b95ff;--press-violet:#d891e6}
:root[data-theme=light]{--press-ink:#5b67e8;--press-violet:#a743be}
@keyframes soak{to{-webkit-mask-position:0 0;mask-position:0 0}}

/* Edge bands: the page rolls over a barrel at the top and bottom of the screen (sections.js shapes the warp, sets the
   depth, 22% of the screen's height or 18% on phones, and writes the shading, which follows the barrel's turn: clear where
   the bend begins, solid page colour past its horizon; black on dark, white on light). Content is never transformed.
   Bands come in once the page moves. */
.edge-band{--edge-h:22vh;--edge-fade:var(--bg) 3%,color-mix(in srgb,var(--bg) 60%,transparent) 20%,color-mix(in srgb,var(--bg) 15%,transparent) 50%,transparent 80%;position:fixed;left:0;right:0;z-index:15;height:var(--edge-h);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
/* A hidden band is not painted at all, so its warp costs nothing until it is needed. */
html.scrolled .edge-band{opacity:1;visibility:visible;transition:opacity .6s}
.edge-band.top{top:0;-webkit-backdrop-filter:url(#drum-top);backdrop-filter:url(#drum-top);background:linear-gradient(var(--edge-fade))}
.edge-band.bottom{bottom:0;-webkit-backdrop-filter:url(#drum-bottom);backdrop-filter:url(#drum-bottom);background:linear-gradient(0deg,var(--edge-fade))}
@media(max-width:700px){.edge-band{--edge-h:18vh}}
html.motion-paused .edge-band{-webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.edge-band{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- SIH: the front page ---------- */
.masthead{display:grid;justify-items:center;gap:10px;margin-top:40px;padding-bottom:16px;border-bottom:3px double var(--paper)}
.masthead .flag{font:italic 400 clamp(34px,4.6vw,72px)/1 Editorial,Georgia,serif;letter-spacing:-.02em}
.headline-wrap{position:relative;margin:34px 0 18px;padding:8px 0}
.headline{font:600 clamp(58px,10.6vw,190px)/.92 Display,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.headline em{font-family:Editorial,Georgia,serif;text-transform:none;font-weight:400;font-size:1.06em;letter-spacing:-.02em;padding:0 .1em 0 .02em;margin:0 -.08em 0 0;color:var(--heading-accent,var(--press-ink))}
/* The pressed impression the ink soaks into… */
.headline.blind,.headline.blind em{color:color-mix(in srgb,var(--paper) 6%,var(--bg))}
.headline.blind{text-shadow:0 1px 0 color-mix(in srgb,var(--paper) 14%,transparent),0 -1px 0 color-mix(in srgb,#000 30%,transparent)}
/* …and the ink, soaking in from the left behind the grainy front as the headline rises up the screen. The mask is
   three headline-widths wide: opaque, a ragged front, then clear. */
.headline.inked{position:absolute;inset:8px 0 auto 0;-webkit-mask:var(--ink-edge) calc((1 - var(--p,1))*100%) 0/300% 100% no-repeat;mask:var(--ink-edge) calc((1 - var(--p,1))*100%) 0/300% 100% no-repeat}
.deck{font:italic 400 clamp(22px,2.4vw,36px)/1.25 Editorial,Georgia,serif;max-width:820px;padding:20px 0 26px;border-bottom:1px solid var(--line)}

/* The interview */
.v2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:start;margin-top:70px}
.hugequote{position:relative;margin:0;font:italic 400 clamp(44px,6.2vw,108px)/1 Editorial,Georgia,serif;letter-spacing:-.02em;padding-top:.5em}
.hugequote .qmark{position:absolute;left:-.06em;top:-.18em;font-size:2.6em;line-height:1;color:var(--press-ink);transform:translateY(calc(var(--depth,0)*56px))}
.hugequote .words em{color:var(--heading-accent,var(--press-ink))}
.hugequote cite{display:block;margin-top:28px;font:normal 15px/1.6 Arial,sans-serif;letter-spacing:normal;color:var(--muted)}
.hugequote cite a{text-decoration:underline;text-underline-offset:4px}
.v2-side{position:relative;padding-top:24px}
.v2-side::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-top:1px solid var(--paper);border-bottom:1px solid var(--paper);transform-origin:left}
.big-h{font:600 clamp(40px,4.4vw,74px)/.95 Display,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:-.005em;margin:14px 0 22px}
.big-h em{font-family:Editorial,Georgia,serif;text-transform:none;font-weight:400;font-size:1.02em;color:var(--heading-accent,var(--press-ink))}
.lede{font:clamp(18px,1.45vw,22px)/1.65 Georgia,serif;color:color-mix(in srgb,var(--paper) 78%,var(--bg));max-width:620px}
.lede::first-letter{float:left;font:600 4.1em/.78 Display,sans-serif;margin:.08em .12em 0 0;color:var(--press-ink)}
.fund-box{position:relative;display:grid;gap:4px;margin-top:34px;padding:22px 0}
.fund-box::before,.fund-box::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:left}
.fund-box::before{top:0}.fund-box::after{bottom:0}
.fund-box .label{font:11px/1.4 "Courier New",monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.fund-box strong{font:600 clamp(64px,7vw,118px)/1 Display,sans-serif;font-weight:600;font-variant-numeric:tabular-nums}
.fund-box>span:last-child{font-size:14px;color:var(--muted)}
/* Entrance, once JS has armed it: the quote's words rise out of their own line masks, the cite follows, the side
   column's rules draw and its lines follow. */
.v2.armed .hugequote .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .1em .12em 0;margin:0 -.1em -.12em 0}
.v2.armed .hugequote .w>span{display:inline-block;transform:translateY(108%);transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--k)*60ms + .3s)}
.v2.armed cite{opacity:0;transition:opacity .8s 1.4s}
.v2.armed .v2-side::before,.v2.armed .fund-box::before,.v2.armed .fund-box::after{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .5s}
.v2.armed .fund-box::after{transition-delay:.8s}
.v2.armed .v2-side>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) var(--d),transform .9s var(--ease) var(--d)}
.v2.armed .v2-side>:nth-child(1){--d:.55s}.v2.armed .v2-side>:nth-child(2){--d:.65s}.v2.armed .v2-side>:nth-child(3){--d:.8s}.v2.armed .v2-side>:nth-child(4){--d:.95s}
.v2.in .hugequote .w>span{transform:none}
.v2.in cite{opacity:1}
.v2.in .v2-side::before,.v2.in .fund-box::before,.v2.in .fund-box::after{transform:none}
.v2.in .v2-side>*{opacity:1;transform:none}

/* Fig. 1: a sensor reading filled with marbled ink, soaking in from the left behind the same grainy front. Below the
   alert line the ink is faint, above it full strength. The drawing stretches to the figure; everything that must
   stay crisp (labels, dot, note) is HTML laid over it. */
.reading{margin-top:90px}
.reading .figlabel{display:flex;justify-content:space-between;gap:12px;font:11px/1.4 "Courier New",monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.reading figcaption{font:13px/1.55 Georgia,serif;font-style:italic;color:var(--muted);margin-top:14px;max-width:640px}
.plot{position:relative;height:clamp(220px,24vw,330px);margin:18px 0 0 34px}
.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot svg *{vector-effect:non-scaling-stroke}
.plot .axis{stroke:var(--paper);stroke-opacity:.5}
.plot .trace{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linejoin:round}
.plot .trace.inked{stroke:url(#rd-inkline);stroke-width:2.6}
.reading.armed .plot svg{-webkit-mask:var(--ink-edge) 100% 0/300% 100% no-repeat;mask:var(--ink-edge) 100% 0/300% 100% no-repeat}
.reading.drawn .plot svg{animation:soak 2.4s cubic-bezier(.45,0,.25,1) forwards}
.plot .grid{position:absolute;left:-34px;right:0;border-top:1px dashed color-mix(in srgb,var(--paper) 12%,transparent)}
.plot .grid span{position:absolute;left:0;top:-7px;font:10px "Courier New",monospace;color:var(--muted);background:var(--bg);padding-right:6px}
.plot .thr{position:absolute;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--press-violet) 70%,transparent)}
.plot .thr span{position:absolute;right:0;bottom:7px;font:10px "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--press-violet)}
.plot .dot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--press-violet);box-shadow:0 0 0 4px var(--bg);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.plot .dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--press-violet);opacity:0}
.plot .leader{position:absolute;width:1px;height:54px;margin-top:-60px;background:var(--press-violet);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease) .15s}
.plot .note{position:absolute;margin:0;white-space:nowrap;font:italic 400 clamp(18px,1.9vw,28px)/1.1 Editorial,Georgia,serif;transform:translate(calc(-100% - 12px),-78px);opacity:0;transition:opacity .6s .4s}
.plot .note em{color:var(--press-violet)}
.reading.alerted .dot{transform:none}.reading.alerted .dot::after{animation:ripple 1.6s ease-out .2s 2}
.reading.alerted .leader{transform:none}.reading.alerted .note{opacity:1}
@keyframes ripple{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
.reading:not(.armed) .dot,.reading:not(.armed) .leader{transform:none}.reading:not(.armed) .note{opacity:1}

/* ---------- Highlights: clippings, in 3D ---------- */
.board{columns:3 300px;column-gap:34px;list-style:none;margin:0;padding:0}
/* Each clipping's sheet keeps its own small tilt and turns toward the cursor (--tx/--ty) as it lifts
   (--tz), straightening while hovered (--hov). */
.clip{position:relative;break-inside:avoid;margin:0 0 34px}
.clip .sheet{position:relative;transform:rotate(var(--r));transition:filter .4s}
.clip.lifted .sheet,.clip.settling .sheet{transform:rotate(calc(var(--r) * (1 - var(--hov,0)))) perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(var(--tz,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .4s}
.clip.lifted{--hov:1;z-index:2}
:root[data-theme=light] .clip.lifted .sheet{filter:drop-shadow(0 18px 22px rgba(0,0,0,.12))}
.cut{position:relative;background:var(--bg);padding:26px 24px 24px}
.cut::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.1),transparent 55%)}
:root[data-theme=light] .cut::after{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),transparent 30%,rgba(21,18,27,.05))}
.clip.lifted .cut::after{opacity:1}
/* The cut outline: the clip-path polygon redrawn as a hairline outside the clipped sheet. */
.clip .edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.clip .edge polygon{fill:none;stroke:var(--paper);stroke-opacity:.32;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke-opacity .4s}
.clip.lifted .edge polygon,.clip:focus-within .edge polygon{stroke-opacity:.85}
.dateline{font:10.5px/1.4 "Courier New",monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}
.clip h3{margin:14px 0 12px;font:600 clamp(26px,2.3vw,34px)/1 Display,"Arial Narrow",sans-serif;text-transform:uppercase}
.clip h3 em{display:block;width:max-content;max-width:100%;font-family:Editorial,Georgia,serif;text-transform:none;font-weight:400;font-size:1.45em;line-height:1.02;letter-spacing:-.02em;margin-bottom:4px;color:var(--heading-accent,var(--press-ink))}
.clip.big h3 em{font-size:2em}
.clip .body{font:15px/1.65 Georgia,serif;color:color-mix(in srgb,var(--paper) 75%,var(--bg))}
.clip .tag{margin-top:12px;font:italic 14px Georgia,serif;color:var(--muted)}
.clip .studio-link{font-size:13px}
.clip a:focus-visible{outline-offset:2px}
/* Arrival: a sheet tossed onto the table. It falls from a tilt toward the reader, lands and settles; its result word
   then floods with ink as it rises up the screen. */
.board.armed .clip:not(.in){opacity:0}
.board.armed .clip.in .sheet{animation:fall 1s cubic-bezier(.2,.8,.2,1) var(--delay) backwards}
@keyframes fall{0%{opacity:0;transform:translateY(-40px) rotate(calc(var(--r) + 5deg)) perspective(900px) rotateX(64deg) translateZ(160px)}55%{opacity:1;transform:rotate(var(--r)) perspective(900px) rotateX(-8deg)}78%{transform:rotate(var(--r)) perspective(900px) rotateX(3deg)}100%{opacity:1;transform:rotate(var(--r))}}
/* A small swipe cue for the sideways rows on phones, in the tilt prompt's style: a dot glides along a short track. */
.swipe-hint{display:none;align-items:center;justify-content:center;gap:10px;font:11px/1.4 "Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.swipe-hint i{position:relative;width:26px;height:9px}
.swipe-hint i::before{content:'';position:absolute;left:0;right:0;top:4px;border-top:1px solid currentColor;opacity:.35}
.swipe-hint i::after{content:'';position:absolute;left:0;top:1px;width:7px;height:7px;border-radius:50%;background:currentColor;animation:swipe-dot 2.4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes swipe-dot{0%{transform:translateX(19px);opacity:0}18%{opacity:1}62%{transform:translateX(0);opacity:1}80%,100%{transform:translateX(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.swipe-hint i::after{animation:none}}
/* Phones: the clippings become one sideways row; each card turns like a coverflow as it slides through the centre. */
@keyframes flow-in{0%{transform:perspective(900px) translateZ(-130px) rotateY(-48deg)}100%{transform:none}}
@keyframes flow-out{0%{transform:none}100%{transform:perspective(900px) translateZ(-130px) rotateY(48deg)}}
@media(max-width:700px){
 .board{display:flex;columns:auto;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:26px 11vw 30px;margin:0 calc(-1*var(--gutter))}
 .board::-webkit-scrollbar{display:none}
 .board>.clip{flex:0 0 78vw;margin:0;scroll-snap-align:center}
 .swipe-hint{display:flex;margin-top:4px}
}
@supports (animation-timeline:view()){@media(max-width:700px){.board>.clip{animation:flow-in linear none,flow-out linear none;animation-timeline:view(inline),view(inline);animation-range:cover 0% cover 38%,cover 62% cover 100%}}}

.motion-paused .hugequote .qmark{transform:none}
@media(max-width:900px){.headline{white-space:normal}.v2{grid-template-columns:1fr}}
@media(max-width:600px){.plot{margin:84px 0 0 30px}.plot .note{transform:translate(-50%,-100px);white-space:normal;width:max-content;max-width:58vw;text-align:center}.plot .leader{height:26px;margin-top:-32px}}

/* Person: the heading holds while "code." floods; a route draws from Delhi to Jaipur; the facts count up;
   an ink line runs down the story so far, filling each chapter's node as it arrives. */
/* Desktop: "Made of more than code." holds while the story rises to meet it (phones scroll straight through). */
.person-hold{display:none}
@media(min-width:701px){.person-heading{position:sticky;top:14vh;z-index:2}.person-hold{display:block;height:35vh}}
.person-locations .route{width:clamp(80px,8vw,140px);height:auto;overflow:visible;flex:0 0 auto}
.route-track{stroke:var(--line);stroke-dasharray:2 4}
.route-path{stroke:var(--studio-accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--route,1))}
.route-city{fill:var(--muted)}
.route-dot{fill:var(--studio-accent)}

.person-timeline{min-width:0}
.person-timeline>.studio-eyebrow{display:block;margin-bottom:34px}
.ink-timeline{--tl:1;position:relative;list-style:none;margin:0;padding:0}
.ink-timeline::before,.ink-timeline::after{content:"";position:absolute;left:6px;top:10px;bottom:40px;width:1px;background:var(--line)}
.ink-timeline::after{left:5px;width:3px;border-radius:2px;background:linear-gradient(var(--studio-accent),color-mix(in srgb,var(--studio-accent) 55%,var(--paper)));transform-origin:top;transform:scaleY(var(--tl))}
.ink-timeline>li{position:relative;padding:0 0 48px 44px}
.tl-node{position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:50%;border:1px solid var(--studio-accent);background:var(--studio-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--studio-accent) 16%,transparent);transition:background .5s var(--ease),box-shadow .6s var(--ease),border-color .5s}
.tl-body{transition:opacity .8s var(--ease),transform .9s var(--ease)}
.tl-date{display:block;font:12px/1.4 "Courier New",monospace;letter-spacing:.07em;color:var(--muted);margin-bottom:12px}
.ink-timeline h3{font:400 clamp(26px,2.4vw,38px)/1.15 Arial,sans-serif;letter-spacing:-.045em;margin:0 0 16px}
.ink-timeline h3 em{font-size:1.1em;letter-spacing:-.02em;color:var(--studio-accent)}
.ink-timeline p{font-size:17px;line-height:1.7;color:var(--muted);max-width:560px}
.ink-timeline .tl-detail{font-size:15px;margin-top:10px}
.ink-timeline.is-armed>li:not(.is-reached) .tl-node{background:var(--bg);border-color:var(--line);box-shadow:0 0 0 0 transparent}
.ink-timeline.is-armed>li:not(.is-reached) .tl-body{opacity:.16;transform:translateY(14px)}

.playground{margin-top:110px}
.playground .playground-head{border-top:1px solid var(--line);padding-top:28px}
/* A hand of three cards, fanned. Hovering lifts one; turning it over (a 3D flip) puts its toy face up. */
.hand{list-style:none;display:flex;justify-content:center;align-items:flex-start;margin:56px 0 0;padding:0 0 30px;overflow-x:clip}
/* Narrower screens fan the hand less, so the outer cards never swing past the edge. */
@media(max-width:1100px){.hand>.card{transform:translateY(calc(var(--drop) * .5)) rotate(calc(var(--rot) * .5))}}
.hand>.card{position:relative;flex:0 1 410px;min-width:0;margin:0 9px;transform:translateY(var(--drop)) rotate(var(--rot));transform-origin:50% 150%;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;z-index:var(--z)}
.hand-ready>.card:hover,.hand-ready>.card:focus-within{transform:translateY(-16px) rotate(calc(var(--rot) * .3));z-index:5}
.hand-ready>.card.flipped{transform:translateY(-8px) rotate(0);z-index:6}
.hand-ready.has-flipped>.card:not(.flipped){opacity:.45}
.hand-ready .card-inner{display:grid;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.hand-ready .card.flipped .card-inner{transform:rotateY(180deg)}
/* Both faces share one grid cell, so the card is as tall as its taller face. An even ease puts the card edge-on at
   exactly half time, and that is when the faces swap, so the face turning away is never seen mirrored. */
.hand-ready .card-face{grid-area:1/1;margin:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:visibility 0s .45s}
.hand-ready .card-front{min-height:clamp(560px,44vw,660px)}
.hand-ready .card-back{transform:rotateY(180deg);visibility:hidden}
.hand-ready .card.flipped .card-back{visibility:visible}
.hand-ready .card.flipped .card-front{visibility:hidden}
.card-front{display:flex;flex-direction:column;justify-content:space-between;width:100%;min-height:420px;padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--paper);text-align:left;font:inherit;cursor:pointer}
.card-front:hover .card-cue,.card-front:focus-visible .card-cue{color:var(--paper)}
.card-corner{font:11px/1.4 "Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card-glyph{align-self:center;font:400 clamp(150px,15vw,240px)/1 Editorial,Georgia,"Segoe UI Symbol",serif;color:var(--heading-accent,var(--press-ink))}
.card-glyph.is-time{display:grid;justify-items:center;font:600 clamp(96px,9vw,150px)/.82 Display,sans-serif}
.card-glyph.is-time span:first-child{border-bottom:3px solid currentColor;padding-bottom:6px;margin-bottom:6px}
.card-title{font-size:clamp(28px,2.6vw,40px);line-height:1.05;letter-spacing:-.045em}
.card-title em{color:var(--heading-accent,var(--press-ink))}
.card-cue{display:flex;justify-content:space-between;font:11px/1.4 "Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.card-back{border-radius:22px}
.card-back{position:relative}
.card-close{position:absolute;top:22px;right:24px;z-index:2;border:0;background:none;padding:4px 0;font:11px/1.4 "Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .3s}
.card-close:hover,.card-close:focus-visible{color:var(--paper)}
@media(prefers-reduced-motion:reduce){.hand>.card,.hand-ready .card-inner{transition:none}}
/* Phones: the hand becomes a sideways row that turns like a coverflow. */
@media(max-width:700px){
 .hand{justify-content:flex-start;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 15vw 18px;margin:28px calc(-1*var(--gutter)) 0}
 .hand::-webkit-scrollbar{display:none}
 .hand>.card{flex:0 0 70vw;margin:0;transform:none;scroll-snap-align:center}
 .hand-ready>.card:hover,.hand-ready>.card:focus-within,.hand-ready>.card.flipped{transform:none}
 .hand-ready .card-face{min-height:0;height:clamp(440px,60svh,500px)}
 .card-front{min-height:0;padding:20px}
 .card-glyph{font-size:min(132px,17svh)}.card-glyph.is-time{font-size:min(100px,13svh)}
 .card-title{font-size:26px}
 /* Only the face that is up sets the card's height (chapters.js swaps it when the card is edge-on), so a face-down
    toy never stretches its card. */
 .hand-ready .card-inner{position:relative}
 .hand-ready .card:not(.show-back) .card-back,.hand-ready .card.show-back .card-front{position:absolute;inset:0;overflow:hidden}
 /* Both faces share one medium height, and the toy face is laid out to fit it: a short title and two-line note, the
    toy taking the space between, compact controls (the rhythm's step editor stays on larger screens). */
 .hand .play-card{padding:20px;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
 .hand .play-card h4{font-size:27px;margin:12px 0 6px}.hand .play-card h4 br{display:none}
 .hand .play-card>p:not(.play-hint){font-size:13px;line-height:1.5;min-height:0;max-width:none;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .hand .play-visual{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
 .hand .knight-board{width:min(100%,clamp(170px,30svh,230px));max-width:none;margin:0 auto}.hand .knight-piece{font-size:24px}
 .hand .drum-pads{min-height:0;width:100%;margin:0}.hand .drum-key{font-size:14px}.hand .drum-key kbd{display:none}
 .hand .rhythm-wave{max-height:38px;margin-top:22px}.hand .rhythm-editor{display:none}
 .hand .word-canvas{min-height:64px;padding:10px 0;width:100%}.hand .word-bank{gap:5px;margin:10px 0 0}.hand .word-bank button{font-size:12px;padding:4px 8px}
 .hand .play-tools{padding-top:8px;font-size:12px;max-width:none}.hand .play-tools button{font-size:12px;padding:4px 0}
 .hand .play-hint{font-size:12px;line-height:1.45;padding-top:6px;min-height:0;max-width:none}
 .hand-hint{margin-top:2px}
}
/* The cards turn more gently than the clippings, so the next one always shows at the edge. */
@keyframes hand-in{0%{transform:perspective(900px) translateZ(-50px) rotateY(-22deg)}100%{transform:none}}
@keyframes hand-out{0%{transform:none}100%{transform:perspective(900px) translateZ(-50px) rotateY(22deg)}}
@supports (animation-timeline:view()){@media(max-width:700px){.hand>.card{animation:hand-in linear none,hand-out linear none;animation-timeline:view(inline),view(inline);animation-range:cover 0% cover 38%,cover 62% cover 100%}}}
.motion-paused .ink-timeline>li .tl-body,.motion-paused .ink-timeline>li .tl-node{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.tl-body,.tl-node{transition:none}}
@media(max-width:700px){.ink-timeline>li{padding-left:34px;padding-bottom:40px}.ink-timeline h3{font-size:28px}}

/* Toolkit: a type specimen. Each domain drifts past as a slow marquee (rows 2 and 4 the other way), pausing
   under the pointer or focus; the active name takes the accent and an ink underline, and the caption says
   where it shows up. */
.specimen{margin-top:10px;border-top:1px solid var(--line)}
.specimen-row{display:grid;grid-template-columns:minmax(150px,.15fr) 1fr;align-items:center;border-bottom:1px solid var(--line)}
.specimen-label{font:12px/1.4 "Courier New",monospace;letter-spacing:.07em;color:var(--muted);padding-right:20px}
.specimen-viewport{position:relative;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab}
.specimen-viewport::-webkit-scrollbar{display:none}
.specimen-viewport.dragging{cursor:grabbing}
.specimen-viewport.dragging .specimen-name{pointer-events:none}
.specimen-track{display:flex;width:max-content}
.specimen-set{display:flex;align-items:center;flex:0 0 auto}
.specimen-name{border:0;padding:.08em .06em .14em;margin:0;font:400 clamp(52px,7vw,120px)/1.05 Arial,sans-serif;letter-spacing:-.06em;color:var(--paper);white-space:nowrap;background:linear-gradient(currentColor,currentColor) 0 94%/0 2px no-repeat;transition:color .35s var(--ease),background-size .55s var(--ease)}
.specimen-name.is-serif{font-family:Editorial,Georgia,serif;font-style:italic;letter-spacing:-.03em;font-size:clamp(58px,7.8vw,134px)}
.specimen-name.is-active{color:var(--studio-accent);background-size:100% 2px}
.specimen-sep{font:400 clamp(20px,2.4vw,38px)/1 Arial,sans-serif;color:var(--studio-accent);margin:0 .9em;opacity:.65}
.specimen-caption{min-height:3.4em;margin-top:26px;font-size:17px;line-height:1.7;color:var(--muted);max-width:760px}
.specimen-caption strong{font-weight:400;color:var(--paper)}
.specimen-caption a{color:var(--studio-accent);border-bottom:1px solid currentColor}
@media(prefers-reduced-motion:reduce){.specimen-track{animation:none;width:auto;flex-wrap:wrap}.specimen-set{flex-wrap:wrap}.specimen-set+.specimen-set{display:none}.specimen-viewport::before,.specimen-viewport::after{display:none}}
@media(max-width:700px){.specimen-row{grid-template-columns:1fr}.specimen-label{padding:16px 0 2px}.specimen-name{font-size:50px}.specimen-name.is-serif{font-size:56px}.specimen-caption{font-size:16px}}

/* Light theme: text-sized accents use the stronger periwinkle (5.3:1 on white). */
:root[data-theme=light] .specimen-caption a{color:var(--studio-strong)}

/* Phones: the Selected work heading stands alone (its side note and index link crowd it). */
@media(max-width:700px){.selected-heading>p{display:none}}