/* ============================================================
   site.css — compositions, not components.
   Rhythm: sparse → vast → dense → medium → dense → vast.
   ============================================================ */

/* --- HERO ------------------------------------------------ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:calc(var(--header-h) + clamp(2rem,7vh,5rem));
  padding-bottom:clamp(1.5rem,4vh,2.5rem);
  overflow:hidden;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85;pointer-events:none}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 75% at 50% 42%,rgba(5,5,6,.1) 0%,rgba(5,5,6,.72) 62%,var(--ink-000) 100%),
    linear-gradient(to bottom,rgba(5,5,6,.6) 0%,transparent 22%);
}
.hero__in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;width:100%}

.hero__kick{display:flex;align-items:center;gap:.8rem;margin-bottom:auto}
.hero__kick .bar{width:clamp(28px,5vw,64px);height:1px;background:var(--sig);flex-shrink:0}

.hero__main{display:block}
@media(min-width:1100px){
  .hero__main{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(200px,17vw,264px);
    gap:clamp(2rem,5vw,5rem);
    align-items:end;
  }
}
.hero__index{display:none;opacity:0;animation:fadeUp .9s var(--ease-out) 1.05s forwards;padding-bottom:.4rem}
@media(min-width:1100px){.hero__index{display:block}}
.hero__index ol{display:flex;flex-direction:column}
.hero__index li{
  display:grid;grid-template-columns:2.1rem 1fr;gap:.5rem;align-items:baseline;
  padding-block:.62rem;border-bottom:1px solid var(--line);
  font-size:.86rem;color:var(--text-dim);
  transition:color var(--t-fast) var(--ease);
}
.hero__index li:hover{color:var(--text)}
.hero__index li:hover .meta{color:var(--sig)}

.hero__h{
  font-size:var(--fs-hero);line-height:.86;letter-spacing:-.048em;
  font-weight:500;margin-block:clamp(1.5rem,5vh,3rem) 0;
}
.hero__h .ln{display:block;overflow:hidden}
.hero__h .ln > span{
  display:block;transform:translateY(105%);
  animation:riseIn 1.05s var(--ease-out) forwards;animation-delay:var(--d,0ms);
}
@keyframes riseIn{to{transform:none}}
/* Accent budget: the signal colour lands on the full stop, not the word. */
.hero__h em{font-style:normal;color:inherit}
.hero__h em::after{content:".";color:var(--sig)}

.hero__sub{margin-top:clamp(1.4rem,3.5vh,2.4rem);max-width:46ch;opacity:0;animation:fadeUp .9s var(--ease-out) .72s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.8rem,4.5vh,3rem);opacity:0;animation:fadeUp .9s var(--ease-out) .86s forwards}

.hero__status{
  margin-top:clamp(2rem,5vh,3.6rem);
  border-top:1px solid var(--line-mid);padding-top:1.1rem;
  display:grid;gap:1.1rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr));
  opacity:0;animation:fadeUp .9s var(--ease-out) 1s forwards;
}
@media(min-width:760px){.hero__status{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column;gap:.42rem;min-width:0}
.stat__k{color:var(--text-faint)}
.stat__v{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text);display:flex;align-items:center;gap:.5rem;font-variant-numeric:tabular-nums;
}
.stat__v .dot{width:5px;height:5px}
.stat--wide{grid-column:span 2}
@media(min-width:760px){.stat--wide{grid-column:span 1}}

/* --- STATEMENT -------------------------------------------
   Breaks the editorial frame. One idea owns the viewport. */
.stmt{
  min-height:min(92svh,1000px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(4rem,9vh,7rem);
  position:relative;
}
.stmt__tag{margin-bottom:clamp(2rem,5vh,3.5rem)}
.stmt__h{
  font-size:var(--fs-stmt);line-height:.84;letter-spacing:-.052em;
  font-weight:500;max-width:15ch;
}
.stmt__h .off{display:block;color:var(--text-faint)}
.stmt__h em{font-style:normal;color:inherit}
.stmt__h em::after{content:".";color:var(--sig)}

/* Supporting line is pushed off-axis, never centred under the headline. */
.stmt__foot{margin-top:clamp(2.2rem,6vh,4.5rem);display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
@media(min-width:900px){
  .stmt__foot{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.2vw,32px);align-items:end}
  .stmt__sup{grid-column:6 / span 6}
  .stmt__aside{grid-column:1 / span 4}
}
.stmt__sup{font-size:clamp(1.05rem,1.75vw,1.5rem);line-height:1.45;color:var(--text-dim);letter-spacing:-.014em;max-width:44ch}
.stmt__sup strong{color:var(--text);font-weight:400}

/* Line-mask reveal for statement headlines. A mask only works while the
   manual break matches the rendered line — once the type wraps inside a
   .ln block the reveal tears, so narrow screens fall back to a fade. */
.rvl .ln{display:block;overflow:hidden}
.js .rvl .ln > span{display:block;transform:translateY(106%)}
.rvl.is-in .ln > span{transform:none;transition:transform 950ms var(--ease-out) var(--d,0ms)}

@media(max-width:700px){
  .rvl .ln{overflow:visible}
  .js .rvl .ln > span{transform:none}
  .js .rvl{opacity:0;transform:translateY(16px)}
  .js .rvl.is-in{
    opacity:1;transform:none;
    transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);
  }
}

/* --- DENSE INDEX (disciplines) ---------------------------- */
.disc{border-top:1px solid var(--line-mid)}
.disc__row{
  display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem;align-items:baseline;
  padding-block:clamp(1.5rem,3.2vw,2.4rem);border-bottom:1px solid var(--line);position:relative;
}
@media(min-width:900px){.disc__row{grid-template-columns:4rem 1fr 1.15fr;gap:2.5rem;align-items:center}}
.disc__row::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--sig);transition:width var(--t-slow) var(--ease-out);
}
.disc__row:hover::before{width:100%}
.disc__n{color:var(--sig);font-variant-numeric:tabular-nums}
.disc__t{
  font-size:clamp(1.5rem,3.6vw,2.5rem);font-weight:500;letter-spacing:-.03em;line-height:1;
  transition:transform var(--t-mid) var(--ease-out);
}
@media(min-width:900px){.disc__row:hover .disc__t{transform:translateX(10px)}}
.disc__d{color:var(--text-dim);max-width:42ch}

/* --- DOSSIERS --------------------------------------------- */
.dossier{display:block;border-top:1px solid var(--line-mid);padding-block:clamp(1.7rem,3.4vw,2.5rem);position:relative}
.dossier:last-of-type{border-bottom:1px solid var(--line-mid)}
.dossier::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--sig);transition:width var(--t-slow) var(--ease-out);
}
.dossier:hover::after,.dossier:focus-visible::after{width:100%}

.dossier__head{display:grid;gap:.85rem;align-items:start}
@media(min-width:900px){.dossier__head{grid-template-columns:5rem minmax(0,1fr) minmax(0,.92fr) auto;gap:2rem;align-items:center}}
.dossier__id{
  color:var(--text-faint);font-variant-numeric:tabular-nums;
  font-family:var(--mono);font-size:clamp(.8rem,1.5vw,1.05rem);letter-spacing:.1em;
  transition:color var(--t-mid) var(--ease);
}
.dossier:hover .dossier__id{color:var(--sig)}
.dossier__name{
  font-size:clamp(1.8rem,4.8vw,3.3rem);font-weight:500;letter-spacing:-.036em;line-height:1;
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  transition:transform var(--t-mid) var(--ease-out);
}
@media(min-width:900px){.dossier:hover .dossier__name{transform:translateX(10px)}}
.dossier__cat{color:var(--text-dim);max-width:36ch}
.dossier__go{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--text-faint);white-space:nowrap;
  transition:color var(--t-fast) var(--ease),gap var(--t-mid) var(--ease-out);
}
.dossier:hover .dossier__go{color:var(--sig);gap:.85rem}

/* Featured dossier — the one with verified live status earns more room. */
.dossier--lead{padding-block:clamp(2.2rem,4.6vw,3.4rem)}
.dossier--lead .dossier__name{font-size:clamp(2.1rem,6.4vw,4.6rem)}
.dossier__pull{
  margin-top:1.5rem;font-size:clamp(1.05rem,2vw,1.5rem);line-height:1.3;
  letter-spacing:-.022em;color:var(--text);max-width:30ch;
}
@media(min-width:900px){.dossier__pull{margin-left:7rem}}

.chip{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line-mid);padding:.28em .55em;color:var(--text-faint);white-space:nowrap;
  line-height:1.4;border-radius:2px;position:relative;top:-.2em;
}
.chip--live{color:var(--sig);border-color:var(--sig-dim)}

.dossier__meta{margin-top:1.4rem;display:grid;gap:1.1rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){
  .dossier__meta{grid-template-columns:5rem repeat(4,minmax(0,1fr));gap:2rem}
  .dossier__meta::before{content:""}
}
.mrow{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.mrow dt{color:var(--text-faint)}
.mrow dd{font-size:.86rem;color:var(--text-dim);line-height:1.45}

/* A dossier now offers two destinations — the write-up and the running
   system — so it is an article with explicit links rather than one big
   anchor (nested anchors are invalid, and two targets read clearer). */
.dossier__name a{color:inherit;text-decoration:none}
.dossier__name a:hover{color:var(--sig)}
.dossier__links{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-top:1.3rem}
@media(min-width:900px){.dossier__links{padding-left:7rem}}
.dossier__links .alink{color:var(--text-faint)}
.dossier__links .alink:hover{color:var(--sig)}
.dossier__live{color:var(--sig)}

/* --- HORIZONTAL RAIL -------------------------------------- */
.rail{
  display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:clamp(2.5rem,5vw,4rem);background:var(--line);
  border-block:1px solid var(--line);
  scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-thumb{background:var(--line-hi)}
.rail__card{
  flex:0 0 min(82vw,320px);scroll-snap-align:start;background:var(--ink-000);
  padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.7rem;min-height:190px;
  transition:background var(--t-mid) var(--ease);
}
.rail__card:hover{background:var(--ink-100)}
.rail__n{color:var(--sig)}
.rail__t{font-size:1.16rem;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.rail__d{color:var(--text-dim);font-size:.88rem;line-height:1.5;margin-top:auto}

/* --- FLOW CHAIN ------------------------------------------- */
.flow{--node:34px;position:relative;margin-top:clamp(1.5rem,3vw,2.5rem);padding-left:calc(var(--node) / 2)}
.flow__track{position:absolute;left:0;top:calc(var(--node) / 2);bottom:calc(var(--node) / 2);width:1px;background:var(--line-mid)}
.flow__pulse{
  position:absolute;left:-1px;top:0;width:3px;height:44px;
  background:linear-gradient(to bottom,transparent,var(--sig),transparent);opacity:0;
}
.flow.is-in .flow__pulse{animation:pulseDown 2.9s var(--ease) 1 forwards;animation-delay:.5s}
@keyframes pulseDown{
  0%{opacity:0;transform:translateY(0)}
  8%{opacity:.85}92%{opacity:.85}
  100%{opacity:0;transform:translateY(calc(var(--h,600px) - 44px))}
}
.flow__step{
  position:relative;display:grid;grid-template-columns:var(--node) 1fr;gap:1rem;align-items:start;
  padding-block:clamp(.8rem,1.7vw,1.15rem);margin-left:calc(var(--node) / -2);
}
.js .flow__step{opacity:0;transform:translateY(12px)}
.flow.is-in .flow__step{
  opacity:1;transform:none;
  transition:opacity 620ms var(--ease-out) var(--d,0ms),transform 620ms var(--ease-out) var(--d,0ms);
}
@media(min-width:760px){.flow__step{grid-template-columns:var(--node) 12rem 1fr;gap:1.6rem;align-items:baseline}}
.flow__mark{
  width:var(--node);height:var(--node);border-radius:50%;
  border:1px solid var(--line-mid);background:var(--ink-000);
  display:grid;place-items:center;flex-shrink:0;
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-faint);
  transition:border-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
  position:relative;z-index:1;
}
.flow__step:hover .flow__mark{border-color:var(--sig);color:var(--sig)}
.flow__t{font-family:var(--mono);font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text);line-height:1.35;align-self:center}
.flow__d{color:var(--text-dim);font-size:.9rem;line-height:1.55;max-width:56ch}
@media(max-width:759px){.flow__d{grid-column:2}}

/* --- SIGNAL TREE ------------------------------------------ */
.tree{margin-top:clamp(1.5rem,3vw,2.5rem);font-family:var(--mono)}
.tree__root{
  display:inline-flex;align-items:center;gap:.7rem;font-size:.95rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--line-hi);padding:.65rem 1rem;color:var(--text);
}
.tree__branches{margin-top:.2rem;padding-left:clamp(.6rem,2vw,1.4rem)}
.tree__b{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;padding-block:.62rem;border-bottom:1px solid var(--line)}
@media(min-width:760px){.tree__b{grid-template-columns:2.2rem 9rem 1fr;gap:1.2rem}}
.tree__glyph{color:var(--text-faint);font-size:.8rem;line-height:1.4;user-select:none}
.tree__k{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);transition:color var(--t-fast) var(--ease)}
.tree__v{font-family:var(--sans);font-size:.88rem;color:var(--text-faint);line-height:1.5;transition:color var(--t-mid) var(--ease)}
@media(max-width:759px){.tree__v{grid-column:2}}
.tree__b:hover .tree__k{color:var(--sig)}
.tree__b:hover .tree__v{color:var(--text-dim)}
.tree__out{margin-top:1.6rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-left:clamp(.6rem,2vw,1.4rem)}
.tree__out p{font-family:var(--sans)}
.tree__arrow{color:var(--sig);font-size:.9rem}
.tree__inf{font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sig);border:1px solid var(--sig-dim);padding:.65rem 1rem;background:var(--sig-wash)}

/* --- LAB --------------------------------------------------- */
.lab{border-top:1px solid var(--line-mid);margin-top:clamp(1.5rem,3vw,2.5rem)}
.lab__item{border-bottom:1px solid var(--line-mid)}
.lab__btn{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding-block:clamp(1.15rem,2.4vw,1.7rem)}
@media(min-width:760px){.lab__btn{grid-template-columns:4rem 1fr 1.1fr auto;gap:2rem}}
.lab__n{color:var(--sig);font-variant-numeric:tabular-nums}
.lab__t{font-size:clamp(1.2rem,2.8vw,1.8rem);font-weight:500;letter-spacing:-.025em;line-height:1.05;transition:transform var(--t-mid) var(--ease-out)}
.lab__s{color:var(--text-dim);display:none}
@media(min-width:760px){.lab__s{display:block}}
.lab__btn:hover .lab__t{transform:translateX(8px)}
.lab__sign{width:22px;height:22px;position:relative;flex-shrink:0}
.lab__sign::before,.lab__sign::after{content:"";position:absolute;background:var(--text-faint);transition:transform var(--t-mid) var(--ease),background var(--t-fast) var(--ease)}
.lab__sign::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.lab__sign::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.lab__btn[aria-expanded="true"] .lab__sign::after{transform:scaleY(0)}
.lab__btn[aria-expanded="true"] .lab__sign::before{background:var(--sig)}
.lab__panel{overflow:hidden;height:0;transition:height var(--t-mid) var(--ease)}
.lab__inner{padding-bottom:clamp(1.5rem,3.2vw,2.4rem)}
@media(min-width:760px){.lab__inner{padding-left:6rem;max-width:74ch}}
.lab__tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.tag{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-mid);padding:.35em .6em;color:var(--text-faint);border-radius:2px;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.tag:hover{border-color:var(--sig-dim);color:var(--text-dim)}

/* --- STACK INDEX ------------------------------------------
   Was a four-column card grid. Now a dense technical index —
   the density itself is the message. */
.sx{border-top:1px solid var(--line-mid);margin-top:clamp(1.5rem,3vw,2.5rem)}
.sx__row{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem;
  padding-block:clamp(1.5rem,3vw,2.3rem);border-bottom:1px solid var(--line);position:relative;
}
@media(min-width:900px){.sx__row{grid-template-columns:4rem 13rem minmax(0,1fr);gap:2.5rem;align-items:baseline}}
.sx__row::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--sig-dim);transition:width var(--t-slow) var(--ease-out);
}
.sx__row:hover::before{width:100%}
.sx__n{color:var(--sig);font-variant-numeric:tabular-nums}
.sx__t{font-size:clamp(1.35rem,2.8vw,2rem);font-weight:500;letter-spacing:-.026em;line-height:1.05}
.sx__t small{display:block;font-size:var(--fs-meta);font-family:var(--mono);letter-spacing:var(--trk-meta);text-transform:uppercase;color:var(--text-faint);font-weight:400;margin-top:.5rem}
.sx__items{display:flex;flex-wrap:wrap;align-items:baseline}
.sx__items li{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--text-dim);
  transition:color var(--t-fast) var(--ease);
}
.sx__items li:hover{color:var(--text)}
.sx__items li:not(:last-child)::after{content:"/";margin-inline:.6rem;color:var(--text-faint);opacity:.55}

/* --- PRINCIPLES -------------------------------------------
   Was three equal cards. Now a numbered editorial run. */
.prin{border-top:1px solid var(--line-mid);margin-top:clamp(2.5rem,6vw,5rem)}
.prin__i{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;
  padding-block:clamp(1.7rem,3.4vw,2.7rem);border-bottom:1px solid var(--line);
}
@media(min-width:900px){.prin__i{grid-template-columns:5rem minmax(0,.85fr) minmax(0,1.15fr);gap:2.5rem;align-items:baseline}}
.prin__n{font-family:var(--mono);font-size:clamp(1.1rem,2.2vw,1.7rem);color:var(--sig);line-height:1;letter-spacing:.04em}
.prin__t{font-size:clamp(1.45rem,3.1vw,2.25rem);font-weight:500;letter-spacing:-.028em;line-height:1.05}
.prin__d{color:var(--text-dim);max-width:42ch}

/* --- ORIGIN ------------------------------------------------ */
.origin__grid{display:grid;gap:clamp(2.5rem,6vw,5rem)}
@media(min-width:1024px){.origin__grid{grid-template-columns:1.05fr .95fr;gap:clamp(3rem,7vw,7rem)}}
.origin__body p{color:var(--text-dim);max-width:52ch;margin-bottom:1.15rem;font-size:var(--fs-lead);line-height:1.55}
.origin__body p:last-child{margin-bottom:0}
.origin__body strong{color:var(--text);font-weight:500}
.arc{border-top:1px solid var(--line-mid)}
.arc__i{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;padding-block:clamp(.7rem,1.6vw,1rem);border-bottom:1px solid var(--line);position:relative}
.arc__n{font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-faint);letter-spacing:.16em;width:1.5rem}
.arc__t{font-family:var(--mono);font-size:clamp(.82rem,2vw,.95rem);letter-spacing:.11em;text-transform:uppercase;transition:color var(--t-fast) var(--ease),transform var(--t-mid) var(--ease-out)}
.arc__y{font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-faint);letter-spacing:.12em}
.arc__i:hover .arc__t{color:var(--sig);transform:translateX(6px)}
.arc__i::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--sig-dim);transition:width var(--t-slow) var(--ease-out)}
.arc__i:hover::before{width:100%}

/* --- CLOSING -----------------------------------------------
   Unlike the other statements this one carries real content, so it
   is sized by that content rather than pinned to the 92vh floor —
   otherwise the contact routes get pushed under the fold. */
.cta{
  border-top:1px solid var(--line-mid);
  min-height:0;
  padding-block:clamp(3.5rem,7vh,6rem);
}
.cta__row{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;margin-top:clamp(2rem,4vw,3rem)}
.cta__note{max-width:38ch}

/* --- CONTACT INDEX -----------------------------------------
   Real routes, set as an index rather than a row of buttons so
   the closing section speaks the same language as the rest. */
.ci{border-top:1px solid var(--line-mid);margin-top:clamp(2rem,5vw,3.5rem)}
.ci__row{
  display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:baseline;
  padding-block:clamp(1rem,2.1vw,1.45rem);border-bottom:1px solid var(--line);
  position:relative;
}
@media(min-width:760px){
  .ci__row{grid-template-columns:7rem minmax(0,1fr) auto;gap:2rem;align-items:center}
}
.ci__row::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--sig);transition:width var(--t-slow) var(--ease-out);
}
.ci__row:hover::before,.ci__row:focus-visible::before{width:100%}
.ci__k{color:var(--text-faint);order:-1}
@media(min-width:760px){.ci__k{order:0}}
.ci__v{
  font-size:clamp(1.02rem,2.3vw,1.45rem);font-weight:500;letter-spacing:-.022em;
  line-height:1.2;overflow-wrap:anywhere;
  transition:transform var(--t-mid) var(--ease-out),color var(--t-fast) var(--ease);
}
.ci__row:hover .ci__v{color:var(--sig)}
@media(min-width:760px){.ci__row:hover .ci__v{transform:translateX(8px)}}
.ci__go{
  color:var(--text-faint);white-space:nowrap;
  transition:color var(--t-fast) var(--ease),transform var(--t-mid) var(--ease-out);
}
.ci__row:hover .ci__go{color:var(--sig);transform:translateX(4px)}

/* --- ELSEWHERE ---------------------------------------------
   Presence is subordinate to contact routes — visible, but never
   competing with the email address for the eye. */
.soc{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:0 clamp(1.2rem,2.5vw,2rem);margin-top:clamp(.8rem,2vw,1.4rem);
}
.soc__k{color:var(--text-faint);margin-right:.4rem}
.soc__a{
  font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--trk-meta);
  text-transform:uppercase;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  transition:color var(--t-fast) var(--ease),gap var(--t-mid) var(--ease-out);
}
.soc__a:hover{color:var(--sig);gap:.75rem}

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.case-hero{
  padding-top:calc(var(--header-h) + clamp(3.5rem,11vh,7rem));
  padding-bottom:clamp(3rem,7vh,5.5rem);
  border-bottom:1px solid var(--line);position:relative;
}
.case-hero__back{margin-bottom:clamp(2rem,4vw,3rem);display:inline-flex}
.case-hero__id{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-bottom:1.6rem}
.case-hero__name{font-size:clamp(2.6rem,9vw,7.5rem);line-height:.88;letter-spacing:-.048em;font-weight:500}
/* The opening question is the loudest thing on a case page. */
.case-hero__q{
  margin-top:clamp(2.5rem,7vh,5rem);
  font-size:clamp(1.7rem,5.2vw,4.1rem);
  line-height:1.02;letter-spacing:-.04em;font-weight:500;
  max-width:19ch;color:var(--text);
  padding-left:clamp(1rem,2.5vw,1.8rem);
  border-left:1px solid var(--sig);
}
.case-hero__sub{margin-top:clamp(1.6rem,3.5vw,2.4rem);max-width:56ch}

/* Live-system actions: the strongest evidence on a case page, so it sits
   directly under the summary rather than buried in the spec table. */
.case-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.crednote{
  font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.06em;
  color:var(--text-faint);border:1px solid var(--line-mid);
  padding:.7rem .9rem;border-radius:2px;line-height:1.5;
}
.crednote b{color:var(--sig);font-weight:400}

.spec{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:680px){.spec{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.spec{grid-template-columns:repeat(4,1fr)}}
.spec__i{background:var(--ink-000);padding:clamp(1.1rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:.55rem}
.spec__k{color:var(--text-faint)}
.spec__v{font-size:.9rem;color:var(--text-dim);line-height:1.5}
.spec__v strong{color:var(--text);font-weight:500}

.blk{padding-block:clamp(3.5rem,8vw,6.5rem);border-bottom:1px solid var(--line)}
.blk:last-of-type{border-bottom:0}
.blk__wrap{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media(min-width:1024px){
  .blk__wrap{grid-template-columns:clamp(7rem,12vw,13rem) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:start}
  .blk__label{position:sticky;top:calc(var(--header-h) + 2.2rem)}
}
.blk__h{font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:-.032em;line-height:1.06;font-weight:500;margin-bottom:1.5rem;max-width:22ch}
.blk__body{max-width:68ch}
.blk__body p{color:var(--text-dim);margin-bottom:1.1rem;font-size:var(--fs-lead);line-height:1.58}
.blk__body p:last-child{margin-bottom:0}
.blk__body strong{color:var(--text);font-weight:500}

.loss{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:560px){.loss{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.loss{grid-template-columns:repeat(3,1fr)}}
.loss__i{
  background:var(--ink-000);padding:1.1rem 1.2rem;display:flex;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.loss__i:hover{background:var(--ink-100);color:var(--text)}
.loss__i::before{content:"";width:5px;height:5px;background:var(--sig);flex-shrink:0;opacity:.5}
.loss__i:hover::before{opacity:1}

.evid{
  margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line-mid);background:var(--ink-050);
  aspect-ratio:16/10;display:grid;place-items:center;padding:2rem;text-align:center;position:relative;overflow:hidden;
}
.evid::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.45;
}
.evid__in{position:relative;display:flex;flex-direction:column;gap:.9rem;align-items:center;max-width:36ch}
.evid img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

.pager{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:760px){.pager{grid-template-columns:1fr 1fr}}
.pager__i{background:var(--ink-000);padding:clamp(2rem,4vw,3.2rem) clamp(1.2rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.7rem;transition:background var(--t-mid) var(--ease)}
.pager__i:hover{background:var(--ink-100)}
.pager__i--next{align-items:flex-end;text-align:right}
.pager__t{font-size:clamp(1.3rem,3vw,2rem);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.pager__i:hover .pager__t{color:var(--sig)}

@media(prefers-reduced-motion:reduce){
  .rvl .ln > span{transform:none!important}
}