/* ============================================================
   HOUTOS LABS — STUDIO LAYER (studio.css)
   Extends the shared Precision Instrument system (styles.css).
   Rules: tokens only (no raw hex outside dark-tweak color-mix),
   st- prefix, no-JS floor = fully visible, reduced-motion = static.
   Animation states are gated under html.st-js (set by studio.js),
   so a missing/failed studio.js can never hide content.
   ============================================================ */

/* JS behavior hooks (no styles of their own — styled via base class):
   .st-anim--load / .st-fade--load  → studio.js resolves .in on page load
   .st-anim--io   / .st-fade--io    → studio.js resolves .in on scroll into view */

/* ---------- scroll progress hairline ---------- */
.st-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none;background:transparent}
.st-progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---------- hero ---------- */
.st-hero{position:relative;overflow:hidden;min-height:min(92vh,880px);display:flex;align-items:flex-end}
.st-hero__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(120px,16vh,180px) var(--pad-x) clamp(44px,6vh,72px)}
.st-hero__kick{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3.5vh,38px);flex-wrap:wrap}
.st-title{margin:0;font-weight:900;letter-spacing:-.035em;line-height:.97;
  font-size:clamp(2.85rem,8.4vw,7.4rem);text-transform:uppercase;color:var(--ink)}
.st-title .acc{color:var(--accent)}
.st-ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.st-w{display:inline-block;white-space:pre}
.st-hero__row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);
  align-items:end;margin-top:clamp(28px,4.5vh,48px)}
.st-sub{margin:0;max-width:56ch;color:var(--muted);font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.6}
.st-sub strong{color:var(--ink);font-weight:600}
.st-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.st-hero__foot{display:flex;justify-content:space-between;align-items:center;gap:18px;
  margin-top:clamp(30px,5vh,54px);padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.st-hero__wm{position:absolute;right:-9vw;top:50%;transform:translateY(-58%);z-index:1;
  color:var(--ink);opacity:.05;pointer-events:none}
.st-hero__wm svg{width:min(58vw,640px);height:auto;display:block}
@media (max-width:820px){
  .st-hero{min-height:0}
  .st-hero__row{grid-template-columns:1fr}
  .st-actions{justify-content:flex-start}
  .st-hero__wm{right:-30vw;opacity:.04}
}

/* hero + statement entrance (only when studio.js confirmed running) */
html.st-js .st-anim .st-w{transform:translateY(112%);transition:transform .9s var(--le-ease,cubic-bezier(.2,.7,0,1))}
html.st-js .st-anim.in .st-w{transform:translateY(0)}
html.st-js .st-fade{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s var(--le-ease,cubic-bezier(.2,.7,0,1))}
html.st-js .st-fade.in{opacity:1;transform:none}

/* ---------- editorial statement ---------- */
.st-statement{max-width:20.5em;margin:0;font-size:clamp(1.42rem,3.1vw,2.45rem);
  font-weight:500;letter-spacing:-.018em;line-height:1.3;color:var(--ink)}
.st-statement .em{font-style:italic;font-weight:500;color:var(--accent)}
.st-statement .dim{color:var(--muted)}
.st-statement + .st-statement{margin-top:1.1em}

/* ---------- capability cards (extends .lenscard) ---------- */
.st-capgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:38px}
.st-cap h3{margin:14px 0 8px;font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.st-cap p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.st-cap .lenscard__ico svg{display:block}
.st-cap__go{position:absolute;top:20px;right:18px;color:var(--faint);transition:color .25s,transform .25s}
.st-cap:hover .st-cap__go{color:var(--accent);transform:translate(2px,-2px)}

/* ---------- featured work ---------- */
.st-feat{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:clamp(24px,4vw,56px);
  align-items:center;margin-top:40px}
@media (max-width:880px){.st-feat{grid-template-columns:1fr}}
.st-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);
  border-radius:999px;padding:5px 11px;color:var(--muted);background:var(--card)}
.st-status i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.st-status.is-live{color:var(--good);border-color:color-mix(in oklab,var(--good),transparent 55%)}
.st-status.is-live i{background:var(--good)}
.st-status.is-build{color:var(--accent);border-color:color-mix(in oklab,var(--accent),transparent 55%)}
.st-status.is-build i{background:var(--accent)}
.st-status.is-concept i{background:var(--muted)}
.st-feat__panel{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);overflow:hidden;min-height:min(58vw,420px);box-shadow:var(--shadow)}
.st-feat__panel .grid{position:absolute;inset:0}
.st-diagram{position:absolute;inset:0;display:grid;place-items:center;padding:8%}
.st-diagram svg{width:100%;height:auto;max-height:100%;display:block;color:var(--ink)}
.st-feat h3{margin:16px 0 10px;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:900;letter-spacing:-.03em}
.st-feat__kv{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin:20px 0 24px}
.st-feat__kv div{border-top:1px solid var(--line);padding-top:10px}
.st-feat__kv dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 5px}
.st-feat__kv dd{margin:0;font-size:.92rem;color:var(--muted);line-height:1.55}
.st-feat__kv dd b{color:var(--ink);font-weight:600}

/* ---------- program cards ---------- */
.st-programs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px;margin-top:22px}
.st-prog{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink);text-decoration:none;overflow:hidden}
.st-prog__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.st-prog h3{margin:2px 0 0;font-size:1.14rem;font-weight:700;letter-spacing:-.01em}
.st-prog p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6;flex:1}
.st-prog .taglist{margin-top:4px}

/* ---------- tilt + magnetic (JS decorates; CSS keeps it cheap) ---------- */
.st-tilt{transition:transform .5s var(--le-ease,cubic-bezier(.2,.7,0,1)),box-shadow .3s,border-color .3s;will-change:transform}
[data-mag]{transition:transform .35s var(--le-ease,cubic-bezier(.2,.7,0,1))}

/* ---------- case study blocks (work page) ---------- */
.st-case{border-top:1px solid var(--line);padding:clamp(34px,5vw,58px) 0}
.st-case:last-of-type{border-bottom:1px solid var(--line)}
.st-case__head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.st-case__head .no{font-family:var(--mono);font-size:.68rem;color:var(--accent);letter-spacing:.1em}
.st-case h3{margin:6px 0 12px;font-size:clamp(1.85rem,4vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.02}
.st-case__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px;margin-top:22px}
.st-kv{border-top:1px solid var(--line-2);padding-top:12px}
.st-kv dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 7px}
.st-kv dd{margin:0;font-size:.93rem;color:var(--muted);line-height:1.62}
.st-kv dd b{color:var(--ink);font-weight:600}
.st-case__foot{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px}

/* ---------- capability deep rows (capabilities page) ---------- */
.st-caprow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);
  border-top:1px solid var(--line);padding:clamp(30px,4.5vw,50px) 0}
.st-caprow:last-of-type{border-bottom:1px solid var(--line)}
@media (max-width:760px){.st-caprow{grid-template-columns:1fr}}
.st-caprow h3{margin:8px 0 10px;font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:900;letter-spacing:-.025em}
.st-caprow .lede{margin:0;color:var(--muted);line-height:1.62}
.st-caprow__meta{display:grid;gap:16px}
.st-caprow__meta .st-kv dt{color:var(--faint)}

/* ---------- field notes ---------- */
.st-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;margin-top:34px}
.st-note{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:22px;color:var(--ink);text-decoration:none}
.st-note .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.st-note h3{margin:0;font-size:1.12rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.st-note p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.58;flex:1}
.st-note .go{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--accent)}

/* ---------- final CTA ---------- */
.st-cta{position:relative;overflow:hidden}
.st-cta__in{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,10vw,130px) var(--pad-x)}
.st-cta__kick{margin-bottom:26px}
.st-cta__title{margin:0 0 18px;font-size:clamp(2.5rem,6.8vw,5.6rem);font-weight:900;
  letter-spacing:-.035em;line-height:.99;text-transform:uppercase}
.st-cta__title .acc{color:var(--accent)}
.st-cta__sub{margin:0 0 34px;max-width:52ch;color:var(--muted);font-size:1.06rem;line-height:1.6}
.st-cta__mail{display:inline-block;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  font-size:clamp(1.3rem,3.2vw,2.2rem);border-bottom:2px solid var(--accent);padding-bottom:6px}
.st-cta__mail:hover{color:var(--accent)}
.st-cta__row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}

/* ---------- contact form ---------- */
.st-form{display:grid;gap:18px;max-width:640px}
.st-form label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.st-form input,.st-form textarea,.st-form select{width:100%;font:inherit;color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px}
.st-form textarea{min-height:150px;resize:vertical}
.st-form input:focus-visible,.st-form textarea:focus-visible,.st-form select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.st-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.st-form .row2{grid-template-columns:1fr}}
.st-form__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.st-form__foot .alt{font-size:.86rem;color:var(--muted)}
.st-form__foot .alt a{color:var(--accent)}

/* ---------- breadcrumb ---------- */
.st-crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.st-crumb a{color:var(--muted);text-decoration:none}
.st-crumb a:hover{color:var(--ink)}
.st-crumb .sep{color:var(--faint)}
.st-crumb [aria-current]{color:var(--accent)}

/* ---------- engagement models ---------- */
.st-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;margin-top:34px}
.st-model{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 22px}
.st-model .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.st-model h3{margin:10px 0 8px;font-size:1.2rem;font-weight:700}
.st-model p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.st-model ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.st-model li{position:relative;padding-left:18px;font-size:.9rem;color:var(--muted)}
.st-model li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;background:var(--accent)}

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce){
  html.st-js .st-anim .st-w,html.st-js .st-fade{transform:none;opacity:1;transition:none}
  .st-progress{display:none}
  .st-tilt,[data-mag]{transition:none}
}

/* ============================================================
   THE REGISTRY — Studio work presentation v2 (spec:
   specs/studio-work-registry.md). One plate per project;
   status as architecture; diagrams as the honest artifact.
   ============================================================ */

/* layout: sticky index + plates */
.registry{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){.registry{grid-template-columns:190px minmax(0,1fr);gap:clamp(28px,4vw,60px)}}
.rgnav{display:none}
@media (min-width:1080px){.rgnav{display:block;position:sticky;top:96px;align-self:start;padding-top:6px}}
.rgnav__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.rg{display:flex;align-items:center;gap:9px;padding:8px 10px;border-left:2px solid var(--line);
  color:var(--muted);text-decoration:none;font-size:.84rem;line-height:1.3}
.rg:hover{color:var(--ink)}
.rg[aria-current="true"]{border-left-color:var(--accent);color:var(--ink);background:var(--card)}
.rg__no{font-family:var(--mono);font-size:.64rem;color:var(--faint);min-width:36px}
.rg__nm{min-width:0}
.rg__dot{width:8px;height:8px;border-radius:50%;margin-left:auto;background:var(--muted);flex:none}
.rg__dot.is-live{background:var(--good)}
.rg__dot.is-build{background:var(--accent)}
.rg__dot.is-concept{background:transparent;border:1.5px solid var(--muted)}
.rgnav__legend{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:6px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.rgnav__legend span{display:flex;align-items:center;gap:8px}
.rgnav__legend i{width:8px;height:8px;border-radius:50%;flex:none}

/* plates */
.plates{display:grid;gap:clamp(84px,11vw,156px)}
.plate{position:relative;border-top:1px solid var(--line);padding-top:clamp(34px,4.5vw,54px);scroll-margin-top:110px}
.plate__ghost{position:absolute;top:clamp(6px,1.6vw,14px);right:0;z-index:0;margin:0;
  font-weight:900;font-size:clamp(4.5rem,9vw,8.5rem);line-height:1;letter-spacing:-.04em;
  color:var(--ink);opacity:.05;pointer-events:none;user-select:none}
.plate__head{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.plate__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,3.5vw,44px);align-items:center}
@media (min-width:880px){
  .plate__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
  .plate--flip .plate__grid > .plate__fig{order:-1}
}
.plate__kind{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.plate__kind b{font-weight:600}
.plate__name{margin:0 0 14px;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;letter-spacing:-.03em;line-height:1.0}
.plate__thesis{margin:0;font-size:clamp(1.08rem,1.7vw,1.4rem);line-height:1.45;color:var(--muted);max-width:36ch}
.plate__thesis b{color:var(--ink);font-weight:600}

/* stage rail — status as architecture (never color-only) */
.stage{max-width:430px;margin:28px 0 6px}
.stage__bar{display:block;height:2px;background:var(--line-2);border-radius:2px;position:relative;overflow:hidden}
.stage__bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.stage.is-live .stage__bar i{width:100%;background:var(--good)}
.stage.is-build .stage__bar i{width:50%}
.stage.is-concept .stage__bar i{width:14%;background:var(--muted)}
.stage__stops{display:flex;justify-content:space-between;margin-top:9px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.stage__stop{position:relative;padding-left:13px}
.stage__stop::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;border:1.5px solid var(--faint);background:transparent}
.stage__stop.is-done::before{background:var(--muted);border-color:var(--muted)}
.stage__stop.is-now{color:var(--ink);font-weight:600}
.stage.is-live .stage__stop.is-now::before{background:var(--good);border-color:var(--good)}
.stage.is-build .stage__stop.is-now::before{background:var(--accent);border-color:var(--accent)}
.stage.is-concept .stage__stop.is-now::before{background:var(--muted);border-color:var(--muted)}

/* diagram panel — the honest artifact */
.plate__fig{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);box-shadow:var(--shadow);padding:clamp(18px,3vw,30px);
  min-height:300px;display:grid;place-items:center;overflow:hidden}
@media (min-width:880px){.plate__fig{min-height:348px}}
.plate__fig svg{width:100%;height:auto;display:block;color:var(--ink)}
.plate__fig .cap{position:absolute;left:14px;bottom:10px;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
html.st-js .plate__fig .dr{stroke-dasharray:700;stroke-dashoffset:700;
  transition:stroke-dashoffset 1.5s cubic-bezier(.2,.7,0,1) .15s}
html.st-js .plate__fig.in .dr{stroke-dashoffset:0}

/* project file — progressive disclosure */
.plate__file{margin:26px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plate__file summary{display:flex;align-items:center;gap:10px;padding:13px 2px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plate__file summary::-webkit-details-marker{display:none}
.plate__file summary:hover{color:var(--accent)}
.plate__file summary .tw{transition:transform .3s;color:var(--accent);flex:none}
.plate__file[open] summary .tw{transform:rotate(90deg)}
.plate__filein{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:20px 32px;padding:12px 2px 26px}
.plate__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}

@media (max-width:640px){.plate__ghost{font-size:4rem;opacity:.045}}
@media (prefers-reduced-motion: reduce){
  html.st-js .plate__fig .dr{stroke-dashoffset:0;transition:none}
}

@media(max-width:480px){.st-feat__kv{grid-template-columns:1fr}}