/* ═══════════════════════════════════════════════════════════════
   room.css: the shielded room. Every page links tokens.css, then
   this. Pages add only what is unique to them.
   ═══════════════════════════════════════════════════════════════ */

/* ── base ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--seam-dark) var(--zinc-lo);}
body{
  margin:0;min-height:100svh;
  background-color:var(--zinc);
  /* galvanized steel, rendered by tools/textures.py */
  background-image:url("../assets/room/zinc.webp");
  background-size:384px 384px;
  color:var(--z-ink);
  font-family:var(--sans);
  font-size:var(--t0);line-height:1.55;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,dl,dd,dt,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
img{max-width:100%;display:block;}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
::selection{background:var(--z-ink);color:var(--zinc-hi);}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:var(--r-steel);}
input{caret-color:var(--karta);}

.wrap{width:min(100% - 2.5rem, var(--measure));margin-inline:auto;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ── type roles ──────────────────────────────────────────────── */
.h1,.h2,.h3,.name{
  font-variation-settings:"wdth" 108,"wght" 760;
  letter-spacing:-.034em;line-height:.98;text-wrap:balance;
}
.h1{font-size:var(--d-1);}
.h2{font-size:var(--d-2);line-height:1.02;}
.h3{font-size:var(--d-3);line-height:1.08;letter-spacing:-.022em;font-variation-settings:"wdth" 104,"wght" 700;}
.name{
  font-size:var(--d-name);line-height:.9;letter-spacing:-.04em;
  font-variation-settings:"wdth" 125,"wght" 800;
}
.lede{font-size:var(--t1);line-height:1.45;color:var(--z-ink-2);max-width:40ch;text-wrap:pretty;}
.body{color:var(--z-ink-2);max-width:58ch;text-wrap:pretty;}
.body + .body{margin-top:1em;}

/* a stencilled plate: only ever a label on an object in the room */
.plate{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:"wdth" 125,"wght" 720;
  padding:.35rem .6rem .32rem;border-radius:2px;
  background:var(--zinc-hi);color:var(--z-ink);
  box-shadow:inset 0 0 0 1px var(--seam),0 1px 0 rgba(255,255,255,.6);
}

/* devanagari name marks: no negative tracking, it has a headline stroke */
.deva{
  display:block;font-family:"Noto Sans Devanagari",var(--sans);
  font-weight:700;letter-spacing:0;line-height:1.15;
  font-size:clamp(3.6rem, 9vw, 6rem);
}

/* ── panel seams: sections are riveted plates, not colour bands ─ */
.seam{
  height:14px;
  background:url("../assets/room/seam.webp") 0 0/56px 14px repeat-x;
}

/* ── top bar ─────────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--zinc-hi) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--seam);
}
.bar .wrap{display:flex;align-items:center;gap:1.25rem;min-height:3.5rem;}
.mark{
  font-variation-settings:"wdth" 118,"wght" 760;letter-spacing:-.02em;
  font-size:15px;text-decoration:none;margin-right:auto;white-space:nowrap;
}
.nav{display:flex;gap:1.25rem;font-size:14px;}
.nav a{
  text-decoration:none;color:var(--z-ink-3);padding-block:.2rem;
  border-bottom:1px solid transparent;transition:color var(--t-ui) ease,border-color var(--t-ui) ease;
}
.nav a[aria-current]{color:var(--z-ink);border-bottom-color:var(--z-ink);}
@media (hover:hover) and (pointer:fine){ .nav a:hover{color:var(--z-ink);} }

/* the signal readout in the bar mirrors the room's door */
.sig{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:12px;color:var(--z-ink-3);
  padding-left:1.25rem;border-left:1px solid var(--seam);
}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px;}
.bars i{width:3px;background:var(--z-ink);border-radius:1px;transition:opacity 160ms ease;}
.bars i:nth-child(1){height:4px;} .bars i:nth-child(2){height:6px;}
.bars i:nth-child(3){height:8px;} .bars i:nth-child(4){height:10px;}
.bars i:nth-child(5){height:12px;}
.bars i.off{opacity:.18;}
@media (max-width:40rem){
  .sig span{display:none;}
  .sig{padding-left:.9rem;}
  .nav{gap:.9rem;font-size:13px;}
}
@media (max-width:23.5rem){
  .mark{font-size:14px;}
  .nav{gap:.7rem;}
}

/* ── controls ────────────────────────────────────────────────── */
/* the lever: the one primary action on a page */
.lever{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.8rem 1.15rem .8rem .9rem;border-radius:var(--r-steel);
  background:var(--z-ink);color:var(--zinc-hi);
  font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 14px -8px rgba(17,21,19,.55);
  transition:transform var(--t-press) var(--ease-out),background var(--t-ui) ease;
}
.lever svg{width:22px;height:22px;flex:none;transition:transform 420ms var(--ease-io);}
.lever:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){ .lever:hover{background:#252B28;} }
.lever[aria-pressed="true"] svg{transform:rotate(-90deg);}

/* a quiet text action with a drawn arrow */
.go{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:15px;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.go svg{width:14px;height:14px;transition:transform var(--t-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .go:hover svg{transform:translateX(3px);} }
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;}

/* ── foam: the inside of every chamber ───────────────────────── */
.foam{
  position:relative;color:var(--f-ink);border-radius:var(--r-foam);
  background-color:var(--foam);
  background-image:url("../assets/room/foam.webp");
  background-size:88px 88px;
}
/* the steel frame around a chamber, with copper gasket on its inner edge */
.frame{
  position:relative;padding:10px;border-radius:var(--r-steel);
  background:url("../assets/room/zinc-panel.webp") 0 0/192px 192px var(--zinc-hi);
  box-shadow:inset 0 0 0 1px var(--seam),0 18px 40px -24px rgba(17,21,19,.45);
}
.frame::before{
  content:"";position:absolute;inset:1px;pointer-events:none;
  background:
    url("../assets/room/rivet.webp") 0 0/8px 8px no-repeat,
    url("../assets/room/rivet.webp") 100% 0/8px 8px no-repeat,
    url("../assets/room/rivet.webp") 0 100%/8px 8px no-repeat,
    url("../assets/room/rivet.webp") 100% 100%/8px 8px no-repeat;
}
.frame > .foam{box-shadow:0 0 0 2px var(--copper),0 0 0 3px var(--copper-lo);}

/* ── the log: states print themselves ────────────────────────── */
.log{
  font-family:var(--mono);font-size:12.5px;line-height:1.7;
  color:var(--f-ink-2);min-height:calc(1.7em * 4);
}
.log p{display:flex;gap:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.log p time{color:var(--f-ink-3);flex:none;}
.log p b{font-weight:500;color:var(--f-ink);}
.log p.new{animation:log-in 260ms var(--ease-out) both;}
@keyframes log-in{from{opacity:0;transform:translateY(4px);}}
.log .ok{color:var(--fit-bright);}
.log .no{color:#F08DBF;}

/* ── test report: facts as condition / result rows ───────────── */
.report{display:grid;font-size:15px;border-top:2px solid currentColor;}
.report > div{
  display:grid;grid-template-columns:minmax(8rem,1fr) 1.4fr;gap:.25rem 1.5rem;
  padding-block:.85rem;
}
.report > div + div{border-top:1px solid color-mix(in srgb, currentColor 22%, transparent);}
.report dt{color:var(--z-ink-3);}
.report dd{font-weight:600;}
.report dd .mono{font-weight:500;font-size:.92em;}
@media (max-width:30rem){ .report > div{grid-template-columns:1fr;} }

/* ── limit rows: what a thing will not do ────────────────────── */
.limits{display:grid;}
.limit{
  display:grid;gap:.4rem 2.5rem;padding-block:1.6rem;
  border-top:1px solid var(--seam);
}
.limit:last-child{border-bottom:1px solid var(--seam);}
@media (min-width:52rem){ .limit{grid-template-columns:18rem 1fr;align-items:baseline;} }
.limit h3{font-variation-settings:"wdth" 112,"wght" 720;font-size:var(--t2);letter-spacing:-.02em;line-height:1.1;}
.limit p{color:var(--z-ink-2);max-width:56ch;}
.limit .why{display:block;margin-top:.55rem;font-family:var(--mono);font-size:13px;color:var(--z-ink-3);}

/* ── working / not working, printed ──────────────────────────── */
.today{display:grid;gap:10px;}
@media (min-width:52rem){ .today{grid-template-columns:1fr 1fr;} }
.today .frame{display:grid;}
.today .foam{padding:1.5rem 1.5rem 1.7rem;}
.today h3{font-size:15px;font-weight:600;color:var(--f-ink);margin-bottom:1rem;}
.today li{
  display:grid;grid-template-columns:2.2rem 1fr;gap:.5rem;
  font-size:15px;line-height:1.5;color:var(--f-ink-2);padding-block:.45rem;
}
.today li::before{font-family:var(--mono);font-size:12.5px;padding-top:.15rem;}
.today .yes li::before{content:"ok";color:var(--fit-bright);}
.today .not li::before{content:"not";color:#F08DBF;}

/* ── sections ────────────────────────────────────────────────── */
.sec{padding-block:clamp(4rem,9vw,7.5rem);}
.sec-head{display:grid;gap:1.1rem;margin-bottom:clamp(2rem,4vw,3.25rem);}
.sec-head .body{font-size:17px;}

/* ── close: the one way to reach me ──────────────────────────── */
.close{padding-block:clamp(4rem,9vw,7rem) 2.5rem;}
.close .h2{max-width:16ch;}
.close .body{margin-top:1.1rem;max-width:44ch;}
.close .acts{margin-top:2rem;}
.foot{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-top:clamp(3rem,7vw,5rem);padding-top:1.1rem;border-top:1px solid var(--seam);
  font-family:var(--mono);font-size:12px;color:var(--z-ink-3);
}

/* ── entrance: content is visible by default; motion only adds ─ */
.js .rise{opacity:0;transform:translateY(14px);}
.js .rise.in{
  opacity:1;transform:none;
  transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}

/* headline words lift out of a mask, once, on load */
.lift{display:inline-block;overflow:clip;overflow-clip-margin:.1em;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em;}
.lift > span{display:inline-block;animation:lift 900ms var(--ease-out) both;animation-delay:calc(120ms + var(--w,0) * 45ms);}
@keyframes lift{from{transform:translateY(105%);}}

@media (prefers-reduced-motion:reduce){
  .lift > span{animation:none;}
  .js .rise{opacity:1;transform:none;}
  .js .rise.in{transition:opacity 300ms ease;}
  .log p.new{animation:none;}
  *,*::before,*::after{scroll-behavior:auto !important;}
}

/* ── the phone: a frame for the live prototypes ──────────────────
   Prototypes are designed at 390x844 logical px and scaled to fit,
   so every pixel decision inside them holds at any frame size.
   Markup: .phone > .phone-glass > .screen[data-proto="name"]      */
.phone{
  --s:1;
  position:relative;width:var(--pw, min(100%, 340px));
  padding:calc(11px * var(--s));border-radius:calc(58px * var(--s));
  background:linear-gradient(145deg,#2A2F2D,#0E1110 55%,#1C201E);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 40px 70px -35px rgba(10,12,11,.7),0 0 0 1px #070908;
}
.phone-glass{position:relative;aspect-ratio:390/844;border-radius:calc(47px * var(--s));overflow:hidden;background:#000;isolation:isolate;}
.phone-glass::after{ /* the island */
  content:"";position:absolute;z-index:50;left:50%;top:calc(11px * var(--s));
  width:calc(124px * var(--s));height:calc(36px * var(--s));translate:-50% 0;
  border-radius:99px;background:#000;pointer-events:none;
}
.phone .screen{
  position:absolute;left:0;top:0;width:390px;height:844px;
  transform:scale(var(--s));transform-origin:0 0;overflow:hidden;
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
.proto-note{margin-top:1rem;font-family:var(--mono);font-size:12.5px;color:var(--z-ink-3);max-width:34ch;}

/* ── karta instrument: words go into the phone ───────────────── */
.ask{display:grid;gap:.6rem;}
.ask label{font-size:14px;color:var(--f-ink-2);}
.ask input{
  width:100%;font:inherit;font-size:17px;color:var(--f-ink);
  padding:.9rem 1rem;border-radius:var(--r-steel);
  background:#0C0F1C;border:1px solid rgba(143,184,242,.3);
  transition:border-color var(--t-ui) ease;
}
.ask input::placeholder{color:var(--f-ink-3);}
.ask input:focus{outline:none;border-color:var(--karta);}
.lanes{display:grid;gap:10px;margin-top:1.25rem;}
.lane{border-radius:var(--r-steel);padding:.8rem .9rem .9rem;background:rgba(12,15,28,.7);box-shadow:inset 0 0 0 1px var(--f-line);}
.lane.here{box-shadow:inset 0 0 0 1px rgba(55,128,223,.55);background:rgba(55,128,223,.08);}
.lane-top{display:flex;justify-content:space-between;gap:1rem;font-size:13.5px;}
.lane-top b{font-weight:600;}
.lane-top span{font-family:var(--mono);font-size:12.5px;color:var(--f-ink-3);}
.lane.here .lane-top span{color:#8FB8F2;}
.track{
  position:relative;margin-top:.7rem;min-height:2.2rem;
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;
}
.track .t{
  font-family:var(--mono);font-size:12px;padding:.2rem .45rem;border-radius:2px;
  background:rgba(55,128,223,.2);color:#CFE0FA;box-shadow:inset 0 0 0 1px rgba(55,128,223,.5);
  animation:drop 420ms var(--ease-out) both;
}
.track .t.done{background:var(--karta);color:#fff;transition:background 300ms ease;}
@keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.96);filter:blur(3px);}}
.track .none{font-family:var(--mono);font-size:12.5px;color:var(--f-ink-3);align-self:center;}
.counts{display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;margin-top:1rem;font-family:var(--mono);font-size:12.5px;color:var(--f-ink-3);}
.counts b{color:var(--f-ink);font-weight:500;}
.aside{margin-top:.75rem;font-size:12.5px;color:var(--f-ink-3);}

/* ── raksha instrument: radar room, you are the return ───────── */
.raksha-room{position:relative;min-height:clamp(32rem,72vh,44rem);overflow:hidden;touch-action:pan-y;cursor:crosshair;}
.raksha-room canvas{position:absolute;left:0;top:0;width:100%;height:var(--beam,100%);display:block;}
.raksha-say{
  position:absolute;z-index:2;left:clamp(1.25rem,4vw,3rem);bottom:clamp(1.25rem,4vw,3rem);
  max-width:min(34rem, calc(100% - 2.5rem));pointer-events:none;
}
.raksha-say .deva{color:var(--f-ink);}
.raksha-say .h3{margin-top:.5rem;color:var(--f-ink);max-width:16ch;}
.raksha-say .body{color:var(--f-ink-2);margin-top:.9rem;max-width:42ch;}
.raksha-say .go{pointer-events:auto;color:var(--raksha-core);margin-top:1.4rem;}
.raksha-log{
  position:absolute;z-index:2;right:clamp(1rem,3vw,2rem);top:clamp(1rem,3vw,2rem);
  width:min(20rem, calc(100% - 2rem));padding:.9rem 1rem;border-radius:var(--r-steel);
  background:rgba(16,10,22,.78);box-shadow:inset 0 0 0 1px rgba(232,68,155,.3);
  backdrop-filter:blur(6px);
}
.raksha-log .cap{font-size:12px;color:var(--f-ink-3);margin-bottom:.4rem;}
.raksha-log .log{min-height:calc(1.7em * 3);}
@media (max-width:40rem){
  .raksha-room{min-height:44rem;--beam:56%;}
  .raksha-say .body{display:none;}
}