/* Bad Opa — palette taken from the room's own materials.
   Nothing here is a brand colour; every value is a surface in the bathroom. */
:root{
  --ink:    #14161a;   /* anthracite floor tile, near-black with a blue cast */
  --ink-2:  #1d2026;   /* the same tile in shadow */
  --paper:  #eceae5;   /* glazed white tile in shade */
  --tile:   #f7f7f5;   /* gloss highlight on the wall tile */
  --grout:  #b9b5ad;   /* grout line — every hairline on this page */
  --chrome: #7d8894;   /* the brassware; all interactive accents */
  --oak:    #a8825a;   /* vanity laminate — the one warm note, used once */

  --f-disp: "Archivo", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --bar: 54px;
  --gut: clamp(20px, 5vw, 76px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
:focus-visible{ outline:2px solid var(--chrome); outline-offset:3px; }
img,video{ max-width:100%; display:block; }

/* ── bar ─────────────────────────────────────────────────────────── */
.bar{
  position:fixed; inset:0 0 auto 0; height:var(--bar); z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gut);
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--grout) 22%, transparent);
}
.wordmark{ display:flex; align-items:baseline; gap:12px; text-decoration:none; color:inherit; }
.wordmark__name{
  font-family:var(--f-disp); font-variation-settings:"wdth" 112,"wght" 700;
  font-size:15px; letter-spacing:.14em; text-transform:uppercase;
}
.wordmark__sub{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--grout);
}
@media (max-width:640px){ .wordmark__sub{ display:none; } }

.modes{ display:flex; gap:2px; }
.mode{
  appearance:none; border:1px solid transparent; background:none; cursor:pointer;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grout); padding:7px 13px; border-radius:2px;
  transition:color .18s, border-color .18s, background .18s;
}
.mode:hover{ color:var(--paper); }
.mode.is-on{
  color:var(--ink); background:var(--paper); border-color:var(--paper);
}

/* ── stage ───────────────────────────────────────────────────────── */
.stage{
  position:relative; height:100svh; min-height:520px;
  background:var(--ink-2); overflow:hidden;
}
.stage__canvas{ position:absolute; inset:0; }
.stage__canvas canvas{ display:block; width:100%!important; height:100%!important; touch-action:none; cursor:grab; }
.stage__canvas canvas:active{ cursor:grabbing; }

.stage__film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background:var(--ink); display:none;
}
body[data-mode="film"] .stage__film{ display:block; }
body[data-mode="film"] .stage__canvas,
body[data-mode="film"] .plan,
body[data-mode="film"] .readout,
body[data-mode="film"] .hint{ display:none; }
body[data-mode="model"] .hint{ display:none; }

.stage__loading{
  position:absolute; left:var(--gut); top:calc(var(--bar) + 26px); z-index:5;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--grout); display:flex; align-items:center; gap:9px;
}
.stage__loading[hidden]{ display:none; }
.tick{ width:6px; height:6px; background:var(--oak); animation:blip 1.1s ease-in-out infinite; }
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.15} }

/* ── the plan: a drawing that navigates ──────────────────────────── */
.plan{
  position:absolute; left:var(--gut); bottom:clamp(74px,11vh,104px); z-index:20;
  margin:0; width:clamp(180px, 21vw, 258px);
  padding:15px 17px 11px;
  background:color-mix(in srgb, var(--ink) 76%, transparent);
  backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, var(--grout) 26%, transparent);
}
.plan__cap{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:11px; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
}
.plan__title{ color:var(--paper); text-transform:uppercase; }
.plan__scale{ color:var(--grout); }
.plan svg{ width:100%; height:auto; overflow:visible; }

.pl-room{ fill:color-mix(in srgb, var(--paper) 7%, transparent); stroke:var(--paper); stroke-width:2.4; }
.pl-fix rect{ fill:none; stroke:var(--grout); stroke-width:1.4; }
.pl-fix .pl-shower{ fill:color-mix(in srgb, var(--chrome) 26%, transparent); stroke:none; }
.pl-glass{ stroke:var(--chrome); stroke-width:3; }
.pl-door{ stroke:var(--ink); stroke-width:4; }
.pl-door-swing{ fill:none; stroke:var(--grout); stroke-width:1; stroke-dasharray:3 3; opacity:.55; }
.pl-window{ stroke:var(--chrome); stroke-width:4; }
.pl-labels text{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.08em;
  fill:var(--grout); text-anchor:middle;
}
.pl-dim{ color:var(--grout); }
.pl-dim path{ stroke:var(--grout); stroke-width:.8; fill:none; opacity:.75; }
.pl-dim text{
  font-family:var(--f-mono); font-size:9px; fill:var(--grout);
  text-anchor:middle; paint-order:stroke;
  stroke:var(--ink); stroke-width:3px; stroke-linejoin:round;
}

.pl-cone path{ fill:var(--oak); opacity:.2; }
.pl-cone{ transition:transform .05s linear; }

.pl-stations circle{ cursor:pointer; }
.st-hit{ fill:transparent; }
.st-dot{ fill:var(--paper); stroke:var(--ink); stroke-width:1.6; transition:r .18s, fill .18s; }
.st-g:hover .st-dot{ fill:var(--chrome); }
.st-g.is-on .st-dot{ fill:var(--oak); }
.st-g.is-on .st-ring{ opacity:1; transform:scale(1); }
.st-ring{
  fill:none; stroke:var(--oak); stroke-width:1.2; opacity:0;
  transform-origin:center; transform:scale(.4); transition:opacity .2s, transform .2s;
}

/* ── readout ─────────────────────────────────────────────────────── */
.readout{
  position:absolute; left:var(--gut); bottom:clamp(30px,5vh,42px); z-index:20;
  display:flex; align-items:baseline; gap:13px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.07em;
}
.readout__idx{ color:var(--oak); }
.readout__label{
  font-family:var(--f-disp); font-variation-settings:"wdth" 108,"wght" 600;
  font-size:15px; letter-spacing:.05em; color:var(--paper); text-transform:uppercase;
}
.readout__eye{ color:var(--grout); }
@media (max-width:640px){ .readout__eye{ display:none; } }

.hint{
  position:absolute; right:var(--gut); bottom:clamp(30px,5vh,42px); z-index:20; margin:0;
  font-family:var(--f-mono); font-size:10.5px; color:var(--grout); letter-spacing:.05em;
  transition:opacity .5s; max-width:44ch; text-align:right;
}
.hint.is-gone{ opacity:0; }
@media (max-width:900px){ .hint{ display:none; } }

/* ── prose sections ──────────────────────────────────────────────── */
.brief,.method,.honest{ padding:clamp(72px,11vh,132px) var(--gut); }
.brief{ background:var(--paper); color:var(--ink); }

.brief__eyebrow,.method__eyebrow,.honest__eyebrow{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 26px; color:var(--chrome);
}
.brief__h{
  font-family:var(--f-disp); font-variation-settings:"wdth" 96,"wght" 700;
  font-size:clamp(31px,5.6vw,68px); line-height:1.03; letter-spacing:-.018em;
  margin:0 0 clamp(28px,4vw,44px); max-width:16ch;
}
.brief__body{ max-width:60ch; display:grid; gap:16px; }
.brief__body p{ margin:0; font-size:clamp(15px,1.5vw,17.5px); }

.facts{
  margin:clamp(44px,6vw,74px) 0 0; padding-top:26px;
  border-top:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  display:grid; gap:26px 40px;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
}
.fact dt{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--chrome); margin-bottom:7px;
}
.fact dd{
  margin:0; font-family:var(--f-disp);
  font-variation-settings:"wdth" 88,"wght" 600;
  font-size:clamp(30px,4.2vw,46px); line-height:1; letter-spacing:-.01em;
}
.fact dd span{
  font-family:var(--f-mono); font-size:11px; font-variation-settings:normal;
  letter-spacing:.05em; color:var(--chrome); margin-left:6px; vertical-align:.55em;
}

/* ── method ──────────────────────────────────────────────────────── */
.method{ background:var(--ink); }
.method__grid{
  display:grid; gap:clamp(26px,4vw,54px);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start;
}
@media (max-width:760px){ .method__grid{ grid-template-columns:1fr; } }
.method__shot{ margin:0; }
.method__shot img{
  width:100%; border:1px solid color-mix(in srgb, var(--grout) 30%, transparent);
  background:var(--ink-2); aspect-ratio:3/4; object-fit:cover;
}
.method__shot figcaption{
  margin-top:10px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.06em; color:var(--grout);
}
.method__note{ display:grid; gap:18px; max-width:56ch; }
.method__note p{ margin:0; }
.method__calc{
  font-family:var(--f-mono); font-size:clamp(15px,2vw,20px);
  padding:18px 20px; border-left:2px solid var(--oak);
  background:color-mix(in srgb, var(--paper) 5%, transparent);
}
.method__calc span{ color:var(--grout); }
.method__calc strong{ color:var(--oak); font-weight:500; }

/* ── honest list ─────────────────────────────────────────────────── */
.honest{ background:var(--ink-2); }
.honest__list{ margin:0; padding:0; list-style:none; display:grid; gap:2px; max-width:88ch; }
.honest__list li{
  display:grid; grid-template-columns:132px 1fr; gap:20px; align-items:baseline;
  padding:19px 0; border-top:1px solid color-mix(in srgb, var(--grout) 20%, transparent);
  font-size:15px;
}
.honest__list li:last-child{ border-bottom:1px solid color-mix(in srgb, var(--grout) 20%, transparent); }
@media (max-width:640px){
  .honest__list li{ grid-template-columns:1fr; gap:8px; }
}
.tag{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border:1px solid currentColor; justify-self:start; white-space:nowrap;
}
.tag--known{ color:var(--chrome); }
.tag--est{ color:var(--oak); }

/* ── foot ────────────────────────────────────────────────────────── */
.foot{
  padding:30px var(--gut); background:var(--ink);
  border-top:1px solid color-mix(in srgb, var(--grout) 20%, transparent);
  font-family:var(--f-mono); font-size:10.5px; color:var(--grout);
  display:flex; gap:11px; flex-wrap:wrap;
}
.foot__dot{ opacity:.5; }