/* Dheer Vora portfolio. Tokens first; see CLAUDE.md for the design system. */
:root{
  --ink:#0F1A2A;
  --ink-2:#15233A;
  --ink-3:#1E2F4B;
  --porcelain:#E7EAEE;
  --mist:#93A0B3;
  --brass:#C9A25A;
  --brass-soft:#E2C68C;
  --paper:#E4E8EC;
  --paper-ink:#3C4859;
  --rule:rgba(231,234,238,.13);
  --rule-dark:rgba(15,26,42,.16);
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --max:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--porcelain);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
img,video{max-width:100%;display:block}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--ink);padding:.5rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;transition:transform .45s var(--ease),background .3s}
.top.scrolled{background:rgba(15,26,42,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.top.hide{transform:translateY(-100%)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.mark{font-family:var(--serif);font-size:1.25rem;text-decoration:none;display:flex;align-items:center;gap:.6rem}
.mark i{width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block}
.nav{display:flex;gap:2rem;align-items:center;font-size:.95rem}
.nav a{text-decoration:none;color:var(--mist);transition:color .2s}
.nav a:hover,.nav a.on{color:var(--porcelain)}
.nav .pill{color:var(--porcelain);border:1px solid var(--rule);padding:.42rem 1rem;border-radius:999px;transition:border-color .2s,background .2s}
.nav .pill:hover{border-color:var(--brass);background:rgba(201,162,90,.08)}
.nav .short{display:none}
@media (max-width:760px){
  .nav{gap:1.1rem;font-size:.9rem}
  .nav a[href="#about"]{display:none}
  .nav .pill{padding:.36rem .8rem}
  .nav .long{display:none}.nav .short{display:inline}
}
@media (max-width:370px){.nav{gap:.85rem}.mark i{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.hero .wrap{position:relative;width:100%;pointer-events:none}
.hero-text{max-width:37rem;padding:5rem 0 7rem;pointer-events:auto}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.55rem,5.1vw,4.9rem);line-height:1.04;letter-spacing:-.018em}
.lede{margin-top:1.6rem;font-size:clamp(1.05rem,1.35vw,1.2rem);color:var(--mist);max-width:34rem;line-height:1.65}
.lede strong{color:var(--porcelain);font-weight:500}
.actions{margin-top:2.3rem;display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.4rem;border-radius:999px;text-decoration:none;font-weight:500;font-size:.98rem;border:1px solid var(--rule);transition:background .25s,border-color .25s,color .25s}
.btn.solid{background:var(--porcelain);color:var(--ink);border-color:var(--porcelain)}
.btn.solid:hover{background:var(--brass-soft);border-color:var(--brass-soft)}
.btn:not(.solid):hover{border-color:var(--brass)}
/* Scroll cue: centred, label above a short track with a travelling dot */
.cue{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--mist);font-size:.8rem;letter-spacing:.02em;pointer-events:none;transition:opacity .4s}
.cue .track{position:relative;width:1px;height:40px;background:var(--rule);overflow:hidden}
.cue .track::after{content:"";position:absolute;left:-1px;top:0;width:3px;height:10px;border-radius:2px;background:var(--brass);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-12px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(42px);opacity:0}}
.cue.gone{opacity:0}
@media (max-width:860px){
  .hero{align-items:flex-start}
  .hero-text{padding:calc(12svh + 21vw + 3.5rem) 0 7.5rem}
}
@media (max-height:640px){.cue{display:none}}

/* ---------- Section scaffolding ---------- */
section{position:relative}
.sec-head{max-width:44rem;padding:clamp(6rem,12vw,10rem) 0 clamp(2.5rem,5vw,4rem)}
.sec-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,3.8vw,3.4rem);line-height:1.08;letter-spacing:-.012em}
.sec-head p{margin-top:1.1rem;color:var(--mist);font-size:1.08rem;max-width:36rem}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-top:clamp(5rem,10vw,8rem)}
.portrait{position:relative;aspect-ratio:4/5;max-width:460px;width:100%;border-radius:4px;overflow:hidden;background:var(--ink)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s linear;-webkit-mask-image:radial-gradient(120% 95% at 50% 40%,#000 62%,transparent 100%);mask-image:radial-gradient(120% 95% at 50% 40%,#000 62%,transparent 100%)}
.portrait canvas{position:absolute;inset:0;width:100%;height:100%}
.portrait figcaption{position:absolute;left:0;right:0;bottom:.9rem;text-align:center;font-size:.82rem;color:var(--mist)}
.about blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.12;letter-spacing:-.012em}
.about blockquote span{display:block;color:var(--mist);font-style:italic}
.about .bio{margin-top:1.6rem;color:var(--mist);max-width:36rem}
.about .bio + .bio{margin-top:1rem}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem 2rem;margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--rule);max-width:36rem}
.facts dt{font-size:.85rem;color:var(--mist)}
.facts dd{margin-top:.2rem;font-size:.98rem}
@media (max-width:860px){
  .about{grid-template-columns:1fr}
  .portrait{max-width:520px;aspect-ratio:4/4.4}
  .facts{grid-template-columns:1fr 1fr}
}

/* ---------- Story ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--gut);max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.story-visual{grid-column:2;grid-row:1;position:sticky;top:0;height:100vh;align-self:start}
#storyCanvas{width:100%;height:100%;display:block}
.story-cap{position:absolute;left:0;right:0;bottom:2.2rem;text-align:center;color:var(--mist);font-size:.88rem}
.chapters{grid-column:1;grid-row:1;position:relative;padding-left:2.2rem}
.rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule)}
.rail-fill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--brass);transform-origin:top;transform:scaleY(0)}
.chapter{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:4rem 0;opacity:.28;transition:opacity .6s ease}
.chapter.active{opacity:1}
.chapter .when{color:var(--mist);font-size:.95rem;font-variant-numeric:tabular-nums;position:relative}
.chapter .when::before{content:"";position:absolute;left:calc(-2.2rem - 4px);top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;background:var(--ink);border:1px solid var(--mist);transition:background .4s,border-color .4s}
.chapter.active .when::before{background:var(--brass);border-color:var(--brass)}
.chapter h3{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,3.9vw,3.5rem);line-height:1.05;letter-spacing:-.015em;margin-top:.35rem}
.chapter .role{margin-top:.5rem;font-weight:500}
.question{margin-top:1.7rem;max-width:31rem}
.question small{display:block;font-size:.85rem;color:var(--mist);margin-bottom:.4rem}
.question p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.32;color:var(--brass-soft)}
.chapter .body{margin-top:1.1rem;color:var(--mist);max-width:32rem}
.figs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2rem;margin-top:2rem;max-width:34rem;border-top:1px solid var(--rule);padding-top:1.5rem}
.figs b{display:block;font-family:var(--serif);font-weight:400;font-size:2.1rem;line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.figs span{display:block;margin-top:.45rem;font-size:.9rem;color:var(--mist);line-height:1.45}
.interlude{color:var(--mist);font-size:.95rem;margin-top:2rem;max-width:30rem}
.interlude em{font-style:normal;color:var(--porcelain)}
.interlude a{color:var(--porcelain);text-underline-offset:4px;text-decoration-color:var(--brass)}
@media (max-width:860px){
  .story{display:block;padding:0}
  .story-visual{position:sticky;top:0;height:44svh;z-index:2;background:var(--ink)}
  .story-visual::after{content:"";position:absolute;left:0;right:0;top:100%;height:2.5rem;background:linear-gradient(var(--ink),rgba(15,26,42,0));pointer-events:none}
  .story-cap{bottom:.6rem;font-size:.82rem}
  .chapters{margin:0 var(--gut);z-index:1}
  .chapter{min-height:auto;padding:3rem 0 4.5rem;justify-content:flex-start;opacity:.5}
  .figs b{font-size:1.8rem}
}

/* ---------- Glyphs (small animated icons) ---------- */
.glyph{width:44px;height:44px;flex:none;color:var(--porcelain)}
.glyph *{vector-effect:non-scaling-stroke}
.glyph .acc{stroke:var(--brass)}
.glyph .accf{fill:var(--brass)}
.g-ring{transform-box:fill-box;transform-origin:center}
.anim .g-ring{animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}
.anim .g-ptr{animation:ptr 2.4s var(--ease) infinite}
@keyframes ptr{0%,100%{transform:translate(8px,8px)}40%,70%{transform:translate(0,0)}}
.g-bar{transform-box:fill-box;transform-origin:center}
.anim .g-bar{animation:bar 1.1s ease-in-out infinite alternate}
.anim .g-bar:nth-child(2){animation-delay:-.3s}.anim .g-bar:nth-child(3){animation-delay:-.6s}.anim .g-bar:nth-child(4){animation-delay:-.15s}.anim .g-bar:nth-child(5){animation-delay:-.45s}
@keyframes bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.anim .g-msg{animation:msg 3.2s var(--ease) infinite}
.anim .g-lock{animation:lock 3.2s var(--ease) infinite}
@keyframes msg{0%,10%{opacity:0;transform:translateY(4px)}20%,55%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes lock{0%,60%{opacity:0;transform:scale(.8)}72%,92%{opacity:1;transform:none}100%{opacity:0}}
.g-lock,.g-msg{transform-box:fill-box;transform-origin:center}
.g-iris{transform-origin:22px 22px}
.anim .g-iris{animation:iris 6s linear infinite}
@keyframes iris{to{transform:rotate(360deg)}}

/* ---------- Lab ---------- */
.lab-group{border-top:1px solid var(--rule)}
.group-name{font-size:.95rem;color:var(--mist);padding:1.1rem 0;display:flex;justify-content:space-between;gap:1rem}
.proj{border-bottom:1px solid var(--rule)}
.proj-head{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:44px minmax(9rem,14rem) 1fr 34px;gap:1.5rem;align-items:center;padding:1.6rem 0;cursor:pointer}
.proj-head:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.proj-name{font-family:var(--serif);font-size:clamp(1.65rem,2.4vw,2.2rem);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.proj-line{color:var(--mist);font-size:1.02rem;transition:color .25s}
.proj-head:hover .proj-line,.proj.open .proj-line{color:var(--porcelain)}
.proj-tog{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);position:relative;transition:border-color .25s}
.proj-tog::before,.proj-tog::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--porcelain);transform:translate(-50%,-50%)}
.proj-tog::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease)}
.proj.open .proj-tog{border-color:var(--brass)}
.proj.open .proj-tog::after{transform:translate(-50%,-50%) rotate(0)}
.proj-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.proj.open .proj-body{grid-template-rows:1fr}
.proj-inner{overflow:hidden;min-height:0}
.proj-cols{display:grid;grid-template-columns:calc(44px + 1.5rem + 14rem) 1fr;gap:1.5rem;padding:0 0 2.6rem}
.proj-meta{font-size:.9rem;color:var(--mist);line-height:1.9;padding-left:calc(44px + 1.5rem)}
.proj-meta a{color:var(--porcelain);text-decoration-color:var(--brass);text-underline-offset:4px}
.proj-desc{max-width:44rem}
.proj-desc p{color:var(--mist);max-width:40rem}
.proj-desc p + p{margin-top:.9rem}
.proj-desc p.first{color:var(--porcelain)}
/* Browser frame for the Claro demo */
.frame{margin-top:1.8rem;border-radius:10px;overflow:hidden;border:1px solid var(--rule);background:var(--ink-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.frame-bar{display:flex;align-items:center;gap:6px;padding:.6rem .8rem;border-bottom:1px solid var(--rule)}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.frame-bar span{margin-left:.6rem;font-size:.78rem;color:var(--mist)}
.frame-bar button{all:unset;margin-left:auto;cursor:pointer;font-size:.78rem;color:var(--porcelain);border:1px solid var(--rule);border-radius:999px;padding:.15rem .7rem}
.frame-bar button:hover{border-color:var(--brass)}
.frame-bar button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.frame video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#fff}
@media (max-width:860px){
  .proj-head{grid-template-columns:40px 1fr 34px;gap:.4rem 1rem;align-items:start}
  .glyph{width:40px;height:40px}
  .proj-name{grid-column:2;align-self:center}
  .proj-tog{grid-column:3;grid-row:1;align-self:center}
  .proj-line{grid-column:2 / 4;font-size:.98rem}
  .proj-cols{grid-template-columns:1fr;gap:1rem}
  .proj-meta{order:2;padding-left:0}
}

/* ---------- Views (inverted, with diagrams) ---------- */
.views{background:var(--paper);color:var(--ink);margin-top:clamp(6rem,12vw,10rem)}
.views .sec-head p{color:var(--paper-ink)}
.view-list{list-style:none;padding-bottom:clamp(5rem,10vw,8rem)}
.view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem var(--gut);align-items:center;padding:3rem 0;border-top:1px solid var(--rule-dark)}
.view h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.1;letter-spacing:-.012em}
.view p{color:var(--paper-ink);max-width:32rem;margin-top:1rem}
.view figure{background:#EDF0F3;border:1px solid var(--rule-dark);border-radius:8px;padding:clamp(1rem,2.5vw,1.8rem)}
.view svg{width:100%;height:auto;display:block;overflow:visible}
.view figcaption{margin-top:.8rem;font-size:.82rem;color:#5A6676}
.dg text{font-family:var(--sans);font-size:11px;fill:#3C4859}
.dg .t-strong{fill:var(--ink);font-weight:600}
.dg .t-acc{fill:#8A6A2E;font-weight:600}
/* Diagram animations start when the figure enters the viewport (.in) */
.dg .draw{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.6s var(--ease)}
.in .dg .draw{stroke-dashoffset:0}
.dg .fadein{opacity:0;transition:opacity .8s ease}
.in .dg .fadein{opacity:1}
.dg .grow{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform 1.1s var(--ease)}
.in .dg .grow{transform:scaleY(1)}
.dg .d1{transition-delay:.15s}.dg .d2{transition-delay:.35s}.dg .d3{transition-delay:.55s}.dg .d4{transition-delay:.75s}.dg .d5{transition-delay:.95s}.dg .d6{transition-delay:1.15s}
.in .dg .pulse{animation:pulse 2.6s ease-in-out 1.6s infinite}
@keyframes pulse{0%,100%{stroke-width:7}50%{stroke-width:10}}
@media (max-width:860px){.view{grid-template-columns:1fr}.view figure{order:2}}

/* ---------- Off the clock ---------- */
.clock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem var(--gut);border-top:1px solid var(--rule);padding-top:2.4rem}
.clock .vis{height:120px;border:1px solid var(--rule);border-radius:8px;background:var(--ink-2);display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;overflow:hidden}
.clock .vis svg{height:104px;width:auto;max-width:90%}
.clock h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.15}
.clock .what{color:var(--brass-soft);font-size:.92rem;margin-top:.35rem}
.clock p{color:var(--mist);margin-top:.9rem;font-size:.98rem}
.clock-note{margin-top:3rem;color:var(--mist);max-width:42rem}
.seq{display:grid;grid-template-columns:repeat(16,1fr);gap:5px;width:min(86%,300px)}
.seq i{aspect-ratio:1;border-radius:2px;background:var(--ink-3);transition:background .12s}
.seq i.hit{background:rgba(201,162,90,.55)}
.seq i.lit{background:var(--porcelain)}
.seq i.hit.lit{background:var(--brass)}
.cave .n{fill:var(--ink-3);stroke:var(--mist);transition:fill .5s,stroke .5s}
.cave .n.on{fill:var(--brass);stroke:var(--brass)}
.cave .e{stroke:var(--rule);transition:stroke .5s}
.cave .e.on{stroke:var(--brass)}
.fret .dot{fill:var(--brass);transition:cx .6s var(--ease),cy .6s var(--ease),opacity .4s}
@media (max-width:860px){
  /* One column: a rule and more air between items, so each image reads with its own text */
  .clock{grid-template-columns:1fr;gap:0}
  .clock>div+div{border-top:1px solid var(--rule);margin-top:2.8rem;padding-top:2.8rem}
  .clock .vis{margin-bottom:1.1rem}
}

/* ---------- Toolkit and background ---------- */
.kit{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.tool{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.5rem 1.3rem;display:flex;flex-direction:column;gap:1rem;transition:background .3s}
.tool:hover{background:var(--ink-2)}
.tool img{width:30px;height:30px;object-fit:contain;opacity:.92}
.tool b{font-weight:500;font-size:1rem}
.bg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem var(--gut);margin-top:4rem;border-top:1px solid var(--rule);padding-top:2.4rem}
.bg h3{font-size:.95rem;color:var(--mist);font-weight:500}
.bg p{margin-top:.6rem}
.bg p small{display:block;color:var(--mist);font-size:.9rem}
@media (max-width:960px){.kit{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.kit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.bg{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.contact{padding:clamp(7rem,14vw,12rem) 0 3rem}
.contact h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5.4vw,5rem);line-height:1.04;letter-spacing:-.018em;max-width:16ch}
.contact p{color:var(--mist);margin-top:1.4rem;max-width:34rem;font-size:1.08rem}
/* Email and LinkedIn carry equal weight: same row, same type */
.reach{margin-top:2.6rem;max-width:46rem;border-top:1px solid var(--rule)}
.reach>div{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:baseline;gap:.4rem 1.5rem;padding:1.3rem 0;border-bottom:1px solid var(--rule)}
.reach dt{color:var(--mist);font-size:.95rem}
.reach dd{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.reach dd a{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.2;text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:.15rem;transition:color .2s;overflow-wrap:anywhere}
.reach dd a:hover{color:var(--brass-soft)}
.copy{all:unset;cursor:pointer;font-size:.9rem;color:var(--mist);border:1px solid var(--rule);border-radius:999px;padding:.35rem .9rem;transition:border-color .2s,color .2s}
.copy:hover{border-color:var(--brass);color:var(--porcelain)}
.copy:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media (max-width:560px){.reach>div{grid-template-columns:1fr}}
footer{border-top:1px solid var(--rule);margin-top:6rem;padding:1.6rem 0 2.2rem;color:var(--mist);font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .portrait img{opacity:1!important}
}

/* ---------- Views v2: evidence-led diagrams ---------- */
.view-list{list-style:none;padding-bottom:clamp(5rem,10vw,8rem)}
.view{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
.view-text p{margin-top:1rem}
.view .so{color:var(--ink);border-left:2px solid var(--brass);padding-left:1rem;margin-top:1.3rem}
.src{list-style:none;margin-top:1.3rem;font-size:.86rem;line-height:1.7}
.src li{color:#5A6676}
.src a{display:inline-block;padding:.2rem 0;color:#3C4859;text-decoration-color:rgba(138,106,46,.6);text-underline-offset:3px}
.src li+li{margin-top:.25rem}
.src a:hover{color:var(--ink)}
.view figcaption q{font-style:italic}
.dg .eq{font-family:var(--serif);font-size:24px;fill:var(--ink)}
.dg .eq-dim{fill:#9AA5B4}
.dg .eq-acc{fill:#8A6A2E}
.dg .axis line,.dg .cols line{stroke:#AEB7C3}
.dg .cols line{stroke-dasharray:2 4}
.dg .cols text{fill:#5A6676}
.dg .track{stroke:#D3D9E0;stroke-width:2}
.dg .gain{stroke:#C9A25A;stroke-width:3;stroke-dasharray:186;stroke-dashoffset:186;transition:stroke-dashoffset 1.4s var(--ease) .4s}
.in .dg .gain{stroke-dashoffset:0}
.dg .dot-base{fill:#9AA5B4}
.dg .dot-move{fill:#C9A25A;transition:transform 1.4s var(--ease) .4s}
.in .dg .dot-move{transform:translateX(186px)}
.dg .num-l,.dg .num-r{font-family:var(--serif);font-size:22px;fill:var(--ink)}
.dg .num-l{fill:#5A6676}
.dg .lbl-l,.dg .lbl-r{font-size:11px}
.dg .delta{font-family:var(--serif);font-style:italic;font-size:14px;fill:#8A6A2E}
.dg .bar.solid{fill:var(--ink)}
.dg .sx{transform-box:fill-box;transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.in .dg .sx{transform:scaleX(1)}
.dg .cut{stroke:#8A6A2E;stroke-width:2;fill:none}
.dg .legend text{font-size:10.5px}
.ctx .agent rect{fill:#fff;stroke:#AEB7C3}
.ctx .link{stroke:#AEB7C3;stroke-dasharray:3 4;fill:none}
.ctx .spin{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ctx .swap text,.ctx .swap rect{transition:opacity .5s ease}
.ctx .swap.out text{opacity:0}
.ctx .swap.out rect{opacity:.35}

/* Ledger and CinePrompt glyphs */
.g-row{stroke-dasharray:9;stroke-dashoffset:9}
.anim .g-row{animation:row 3.6s var(--ease) infinite}
.anim .g-row.r2{animation-delay:.35s}.anim .g-row.r3{animation-delay:.7s}
@keyframes row{0%{stroke-dashoffset:9}20%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
:not(.anim) > .g-row{stroke-dashoffset:0}
.g-reel{transform-box:fill-box;transform-origin:center}
.anim .g-reel{animation:iris 3s linear infinite}

/* Out of the Cave thinkers */
.cave .tk{fill:var(--ink-3);stroke:var(--mist);stroke-width:1.2;transition:fill .5s,stroke .5s}
.cave .tk.on{fill:var(--brass);stroke:var(--brass)}
.cave .arc{fill:none;stroke:var(--rule);stroke-width:1.2;transition:stroke .5s}
.cave .arc.on{stroke:var(--brass)}
.cave text{font-family:var(--serif);fill:var(--porcelain);font-size:13px}
.cave .yr{font-family:var(--sans);fill:var(--mist);font-size:9px}
.cave .rel{font-family:var(--sans);font-size:11px;fill:var(--brass-soft);transition:opacity .4s}

@media (max-width:860px){.view{grid-template-columns:1fr;gap:1.6rem}.view figure{order:2}}
@media (max-width:860px){.view figure{padding:.7rem}}


/* Place sits beside the dates, so the role line carries only the title */
.chapter .when .where::before{content:"\00B7";margin:0 .55em;color:var(--mist);opacity:.7}
footer a{color:var(--mist);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--porcelain)}