/* ═══════════════════════════════════════════════════════════════════════════
   ALYA PUTRI ASHYIFA — STUDIO EXPLORER
   Blueprint / CAD visual system. No external assets, no build step.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:        #060d18;
  --bg-2:      #0a1526;
  --bg-3:      #0e1c30;
  --ink:       #dbeeff;
  --ink-2:     #94b3cf;
  --dim:       #5f7d9c;
  --line:      rgba(53,224,239,.20);
  --line-2:    rgba(53,224,239,.42);
  --cyan:      #35e0ef;
  --cyan-soft: #7ef0f8;
  --amber:     #ffb648;
  --green:     #56e39f;
  --red:       #ff5f6d;
  --arup:      #e61e28;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --r: 2px;

  /* exhibition palette — the gallery + boot live on paper, the studio stays dark */
  --paper:   #f2eee6;
  --paper-2: #eae4d8;
  --wall:    #ede8dd;
  --wall-2:  #e2dccd;
  --floor-1: #cbbfa9;
  --floor-2: #b3a68e;
  --ink-g:   #2b2926;
  --ink-g2:  #57514a;
  --dim-g:   #8b8378;
  --seal:    #9e2b25;
  --hair:    rgba(43,41,38,.14);
  --hair-2:  rgba(43,41,38,.32);
  --serif: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* monochrome site palette — white / near-black / electric blue */
  --w-bg:    #ffffff;
  --w-ink:   #101010;
  --w-ink2:  #3c3c3c;
  --w-dim:   #9a9a9a;
  --w-hair:  rgba(16,16,16,.12);
  --w-hair2: rgba(16,16,16,.34);
  --elec:    #1a3cff;
  --w-sans:  "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
/* author display rules (grid/flex) would otherwise override the hidden attribute */
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  overscroll-behavior:none;
}
body.doc-open{ overflow:auto; }
button{ font:inherit; color:inherit; }
a{ color:var(--cyan); text-decoration:none; border-bottom:1px solid var(--line-2); }
a:hover{ color:var(--cyan-soft); border-bottom-color:var(--cyan); }
kbd{
  font-family:var(--mono); font-size:.72em; padding:.14em .45em; margin:0 .12em;
  border:1px solid var(--line-2); border-bottom-width:2px; border-radius:var(--r);
  color:var(--cyan-soft); background:rgba(53,224,239,.07); white-space:nowrap;
}
::selection{ background:var(--cyan); color:var(--bg); }

/* graph-paper backdrop used by several surfaces */
.grid-bg{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:32px 32px;
}

/* ─────────────────────────── BUTTONS ─────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  padding:.72em 1.4em; border-radius:var(--r); letter-spacing:.14em;
  font-size:12px; text-transform:uppercase; background:transparent;
  border:1px solid var(--line-2); transition:.16s ease;
}
.btn.sm{ padding:.5em .9em; font-size:11px; }
.btn-primary{ color:var(--bg); background:var(--cyan); border-color:var(--cyan); font-weight:700; }
.btn-primary:hover{ background:var(--cyan-soft); box-shadow:0 0 26px rgba(53,224,239,.45); }
.btn-ghost{ color:var(--ink-2); }
.btn-ghost:hover{ color:var(--cyan); border-color:var(--cyan); background:rgba(53,224,239,.08); }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.linkish{
  background:none; border:0; border-bottom:1px solid var(--line-2); color:var(--cyan);
  cursor:pointer; padding:0; font-size:inherit;
}

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }

/* ═══════════════════════════ GAME LAYER ═══════════════════════════ */
#game{ position:fixed; inset:0; }
#stage{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* ───────── HUD ───────── */
#hud{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; gap:1.4rem; padding:.85rem 1.1rem;
  background:linear-gradient(180deg, rgba(6,13,24,.94), rgba(6,13,24,0));
  pointer-events:none;
}
#hud > *{ pointer-events:auto; }
.hud-id{ display:flex; flex-direction:column; line-height:1.25; }
.hud-name{ font-weight:700; letter-spacing:.2em; font-size:12.5px; color:#fff; }
.hud-role{ color:var(--dim); font-size:9.5px; letter-spacing:.24em; }

.hud-xp{ flex:1; max-width:420px; }
.xp-top{ display:flex; gap:.7rem; align-items:baseline; font-size:10px; letter-spacing:.16em; }
#xp-level{ color:var(--cyan); font-weight:700; }
#xp-title{ color:var(--ink-2); flex:1; text-transform:uppercase; }
#xp-num{ color:var(--dim); }
.xp-bar{
  margin-top:5px; height:7px; border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(53,224,239,.06); overflow:hidden;
}
.xp-bar i{
  display:block; height:100%; width:0%;
  background:repeating-linear-gradient(90deg, var(--cyan) 0 6px, rgba(53,224,239,.55) 6px 9px);
  box-shadow:0 0 14px rgba(53,224,239,.75); transition:width .55s cubic-bezier(.2,.8,.2,1);
}

.hud-actions{ display:flex; align-items:center; gap:.4rem; margin-left:auto; }
.hud-chip{
  color:var(--amber); font-size:11px; letter-spacing:.14em; padding:.35em .6em;
  border:1px solid rgba(255,182,72,.35); border-radius:var(--r);
}
.hud-btn{
  cursor:pointer; background:rgba(10,21,38,.75); border:1px solid var(--line-2);
  border-radius:var(--r); color:var(--ink-2); font-size:10px; letter-spacing:.14em;
  padding:.5em .7em; transition:.15s;
}
.hud-btn:hover{ color:var(--cyan); border-color:var(--cyan); background:rgba(53,224,239,.1); }
.hud-btn[aria-pressed="false"]{ opacity:.4; }

/* ───────── minimap ───────── */
#minimap-wrap{
  position:absolute; right:1.1rem; bottom:1.1rem; z-index:10;
  border:1px solid var(--line-2); background:rgba(6,13,24,.85);
  border-radius:var(--r); padding:6px 6px 4px; backdrop-filter:blur(3px);
}
#minimap{ display:block; }
.mm-label{ display:block; text-align:center; color:var(--dim); font-size:8.5px; letter-spacing:.24em; margin-top:3px; }

/* ───────── interact prompt ───────── */
#prompt{
  position:absolute; left:50%; bottom:12%; transform:translateX(-50%); z-index:10;
  display:flex; align-items:center; gap:.65rem; padding:.6rem 1.1rem;
  border:1px solid var(--cyan); border-radius:var(--r);
  background:rgba(6,13,24,.92); color:var(--ink); font-size:12px; letter-spacing:.1em;
  box-shadow:0 0 30px rgba(53,224,239,.3); animation:bob 1.9s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,-6px) } }

/* ───────── zone banner ───────── */
#zone-banner{
  position:absolute; left:50%; top:19%; transform:translateX(-50%); z-index:9;
  text-align:center; pointer-events:none; animation:bannerIn 2.6s ease forwards;
}
#zone-banner b{ display:block; font-size:clamp(15px,3.4vw,22px); letter-spacing:.3em; color:#fff; }
#zone-banner span{ display:block; font-size:10px; letter-spacing:.28em; color:var(--cyan); margin-top:.4rem; }
@keyframes bannerIn{
  0%{ opacity:0; transform:translate(-50%,14px) } 14%{ opacity:1; transform:translate(-50%,0) }
  76%{ opacity:1 } 100%{ opacity:0 }
}

/* ───────── toasts ───────── */
#toasts{
  position:absolute; left:1.1rem; bottom:1.1rem; z-index:12;
  display:flex; flex-direction:column-reverse; gap:.5rem; max-width:min(330px,72vw);
}
.toast{
  border:1px solid var(--line-2); border-left:3px solid var(--cyan);
  background:rgba(10,21,38,.95); padding:.6rem .85rem; border-radius:var(--r);
  animation:toastIn .35s cubic-bezier(.2,.9,.25,1) both;
}
.toast.gold{ border-left-color:var(--amber); }
.toast.out{ animation:toastOut .4s ease forwards; }
.toast b{ display:block; font-size:9.5px; letter-spacing:.24em; color:var(--cyan); }
.toast.gold b{ color:var(--amber); }
.toast p{ margin:.2rem 0 0; font-size:12px; color:var(--ink); }
@keyframes toastIn{ from{ opacity:0; transform:translateX(-24px) } to{ opacity:1; transform:none } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(-24px) } }

/* ───────── touch controls ───────── */
#touch{ position:absolute; left:0; right:0; bottom:0; z-index:11; pointer-events:none; }
#touch button{
  pointer-events:auto; background:rgba(10,21,38,.8); border:1px solid var(--line-2);
  color:var(--cyan); border-radius:var(--r); width:52px; height:52px; font-size:16px;
  display:grid; place-items:center; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#touch button:active{ background:rgba(53,224,239,.25); }
.dpad{
  position:absolute; left:1rem; bottom:5.4rem; width:168px; height:168px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:4px;
}
.dpad [data-dir="up"]{ grid-area:1/2 }
.dpad [data-dir="left"]{ grid-area:2/1 }
.dpad [data-dir="right"]{ grid-area:2/3 }
.dpad [data-dir="down"]{ grid-area:3/2 }
#touch-action{
  position:absolute; right:1rem; bottom:8.6rem; width:66px !important; height:66px !important;
  border-color:var(--cyan) !important; font-weight:700; letter-spacing:.08em;
}

/* ══════════ GALLERY — 3D SCROLL SPACE ══════════ */
#gallery{
  position:fixed; inset:0; z-index:30; overflow-y:auto; overflow-x:hidden;
  background:var(--w-bg); color:var(--w-ink); font-family:var(--w-sans);
  overscroll-behavior:contain;
}
#gal-view{
  position:sticky; top:0; height:100vh; overflow:hidden;
  perspective:1150px; perspective-origin:50% 46%;
  background:radial-gradient(130% 100% at 50% 32%, #ffffff 52%, #efefef 100%);
}
/* the world is a full-viewport 3D plane: left interactive it hit-tests at
   z=0 and swallows every click before the copy behind it can receive one.
   So the plane is transparent to the pointer, and only the things meant to
   be pressed take events back - links, buttons, and the landing cards that
   already carry pointer-events:auto of their own. Everything else falls
   through to the hero canvas, which is what makes tap-to-walk work. */
#gal-world{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; pointer-events:none; }
#gal-world a, #gal-world button{ pointer-events:auto; }
#gal-space{ width:1px; }

.cluster{ position:absolute; inset:0; transform-style:preserve-3d; }
.cluster > *{ position:absolute; }

/* main image plane */
.c-main{
  margin:0; left:50%; top:44%; width:min(40vw,640px);
  transform:translate(-50%,-50%) translateX(-12vw) rotateY(7deg);
}
.cluster.alt .c-main{ transform:translate(-50%,-50%) translateX(12vw) rotateY(-7deg); }
.c-main img{ width:100%; height:auto; display:block; box-shadow:0 46px 90px rgba(16,16,16,.30); }
.c-main .svgbox{
  background:#fff; border:1px solid var(--w-hair2); box-shadow:0 46px 90px rgba(16,16,16,.22);
}
.c-main .svgbox svg{ width:100%; height:auto; display:block; }
.c-main figcaption{
  margin-top:.8rem; font-size:9.5px; letter-spacing:.24em; color:var(--w-dim);
  text-transform:uppercase; font-weight:600;
}
.c-main figcaption b{ color:var(--elec); font-weight:700; margin-right:.7em; }

/* secondary floating planes */
.c-side{ margin:0; width:min(18vw,280px); }
.c-side img{ width:100%; height:auto; display:block; box-shadow:0 26px 60px rgba(16,16,16,.25); }
.c-side.s1{ left:50%; top:17%; transform:translate(-50%,-50%) translateX(23vw) translateZ(-280px) rotateY(-6deg); }
.cluster.alt .c-side.s1{ transform:translate(-50%,-50%) translateX(-23vw) translateZ(-280px) rotateY(6deg); }
.c-side.s2{ left:50%; top:80%; transform:translate(-50%,-50%) translateX(27vw) translateZ(-460px) rotateY(-4deg); }
.cluster.alt .c-side.s2{ transform:translate(-50%,-50%) translateX(-27vw) translateZ(-460px) rotateY(4deg); }

/* giant outline index */
.c-num{
  left:50%; top:50%; transform:translate(-50%,-50%) translateX(-31vw) translateZ(-620px);
  font-weight:800; font-size:min(42vh,30vw); line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:2px rgba(26,60,255,.30); user-select:none;
}
.cluster.alt .c-num{ transform:translate(-50%,-50%) translateX(31vw) translateZ(-620px); }

/* project text */
.c-info{
  left:50%; top:47%; width:min(26vw,370px);
  transform:translate(-50%,-50%) translateX(24vw) translateZ(90px);
}
.cluster.alt .c-info{ transform:translate(-50%,-50%) translateX(-24vw) translateZ(90px); }
.c-info .no{ font-size:10px; letter-spacing:.3em; color:var(--elec); font-weight:700; margin:0 0 .7rem; }
.c-info h2{
  margin:0; font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.5rem,2.9vw,2.5rem); line-height:1.02; color:var(--w-ink);
}
.c-info .sub{ margin:.6rem 0 0; font-size:12.5px; color:var(--w-ink2); line-height:1.6; }
.c-info .meta{ margin:.9rem 0 0; font-size:9.5px; letter-spacing:.26em; color:var(--w-dim); font-weight:600; }
.c-info .facts{ margin:1rem 0 0; padding:0; list-style:none; }
.c-info .facts li{
  position:relative; padding:.38em 0 .38em 1.2em; font-size:11px; color:var(--w-ink2);
  border-top:1px solid var(--w-hair);
}
.c-info .facts li::before{ content:"/"; position:absolute; left:0; color:var(--elec); font-weight:700; }
.c-link{
  display:inline-block; margin-top:1.1rem; font-size:10.5px; letter-spacing:.24em; font-weight:700;
  color:var(--elec); border-bottom:2px solid var(--elec); padding-bottom:.2em; text-transform:uppercase;
}
.c-link:hover{ color:var(--w-ink); border-bottom-color:var(--w-ink); }
.c-ctas{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem; }
.c-ctas a{
  padding:.65em 1.1em; font-size:10px; letter-spacing:.2em; font-weight:700; border-radius:0;
  border:1px solid var(--w-ink); color:var(--w-ink); text-transform:uppercase;
}
.c-ctas a.pri{ background:var(--elec); border-color:var(--elec); color:#fff; }
.c-ctas a:hover{ background:var(--w-ink); border-color:var(--w-ink); color:#fff; }

/* intro cluster */
.c-intro{
  left:50%; top:46%; transform:translate(-50%,-50%); text-align:center; width:min(92vw,1100px);
}
.c-intro .i-kicker{ color:var(--elec); font-size:11px; letter-spacing:.4em; font-weight:700; margin:0 0 1.6rem; }
.c-intro h1{
  margin:0; font-weight:800; text-transform:uppercase; letter-spacing:-.025em;
  font-size:clamp(3.2rem,11vw,8.5rem); line-height:.9; color:var(--w-ink);
}
.c-intro .i-sub{ margin:1.6rem 0 0; font-size:11.5px; letter-spacing:.34em; color:var(--w-ink2); font-weight:600; }
.c-intro .i-sub b{ color:var(--elec); font-weight:700; }

/* grayscale-by-distance hooks */
.cluster{ --gs:0; }
.cluster img{ filter:grayscale(var(--gs)); transition:filter .25s linear; }

/* ── fixed chrome ── */
#gal-head{
  position:fixed; top:0; left:0; right:0; z-index:33;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.7rem;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 40%, rgba(255,255,255,0));
}
.gal-id{ display:flex; flex-direction:column; line-height:1.35; }
.gal-name{ font-weight:800; font-size:12px; letter-spacing:.24em; color:var(--w-ink); }
.gal-role{ font-size:8.5px; letter-spacing:.34em; color:var(--w-dim); font-weight:600; }
.gal-actions{ display:flex; gap:1.2rem; align-items:center; }
.gal-stamps{ font-size:9.5px; letter-spacing:.24em; color:var(--elec); font-weight:700; margin-right:.4rem; white-space:nowrap; }
.gal-btn{
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  font-family:var(--w-sans); font-size:10px; letter-spacing:.26em; font-weight:700; color:var(--w-ink);
  padding:.25em 0; transition:.15s;
}
.gal-btn:hover{ color:var(--elec); border-bottom-color:var(--elec); }

#gal-dots{
  position:fixed; right:1.4rem; top:50%; transform:translateY(-50%); z-index:33;
  display:flex; flex-direction:column; gap:.55rem; align-items:flex-end;
}
.gal-dot{
  background:none; border:0; cursor:pointer; padding:.1em 0;
  font-family:var(--w-sans); font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--w-dim);
  display:flex; align-items:center; gap:.5em; transition:.15s;
}
.gal-dot::after{ content:""; width:14px; height:2px; background:var(--w-hair2); transition:.15s; }
.gal-dot:hover{ color:var(--w-ink); }
.gal-dot.got{ color:var(--w-ink2); }
.gal-dot.on{ color:var(--elec); }
.gal-dot.on::after{ background:var(--elec); width:26px; }

.gal-arrow{
  position:fixed; right:1.15rem; z-index:33; width:40px; height:40px;
  border:1px solid var(--w-hair2); background:rgba(255,255,255,.9); color:var(--w-ink);
  font-size:15px; cursor:pointer; transition:.15s; border-radius:0;
}
.gal-arrow.prev{ bottom:5.4rem; } .gal-arrow.next{ bottom:1.2rem; }
.gal-arrow:hover{ background:var(--elec); border-color:var(--elec); color:#fff; }

#gal-progress{
  position:fixed; left:0; right:0; bottom:0; height:3px; z-index:34; background:rgba(16,16,16,.07);
}
#gal-progress i{ display:block; height:100%; width:0; background:var(--elec); }

#gal-hint{
  position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:33;
  font-size:10px; letter-spacing:.4em; color:var(--elec); font-weight:700;
  animation:hintPulse 1.6s ease-in-out infinite; pointer-events:none; transition:opacity .4s;
}
#gal-hint.off{ opacity:0; }
@keyframes hintPulse{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(5px) } }

/* hero: name block raised, walking game below */
.cluster.intro .c-intro{ top:27%; pointer-events:none; }
.cluster.intro .c-intro .i-ctas a{ pointer-events:auto; }
.cluster.intro h1{ font-size:clamp(2.6rem,7.5vw,5.6rem); }
.i-ctas{ justify-content:center; margin-top:1.5rem; }
/* the game is the hero's full-screen backdrop; 157% counters the perspective
   scale-down (1150 / (1150 + 650) = 0.639) so it covers the whole viewport */
.c-game{
  margin:0; left:50%; top:50%; width:157vw; height:157vh;
  transform:translate(-50%,-50%);
}
.c-game canvas{
  width:100%; height:100%; display:block; background:transparent;
  cursor:pointer; touch-action:pan-y;
}
#hero-help{
  position:fixed; left:50%; bottom:3.9rem; transform:translateX(-50%); z-index:33;
  padding:.55em 1.1em; background:rgba(255,255,255,.9); border:1px solid var(--w-hair);
  font-size:9.5px; letter-spacing:.16em; color:var(--w-ink2); text-transform:uppercase;
  font-weight:600; backdrop-filter:blur(2px); transition:opacity .4s;
  pointer-events:none; white-space:nowrap;
}
#hero-help b{ color:var(--elec); }
#hero-help.off{ opacity:0; }

@media (max-width:920px){
  #gal-view{ perspective:900px; }
  .c-main{ top:34%; width:min(84vw,620px); transform:translate(-50%,-50%) rotateY(0); }
  .cluster.alt .c-main{ transform:translate(-50%,-50%) rotateY(0); }
  .c-info{ top:72%; width:min(88vw,540px); transform:translate(-50%,-50%) translateZ(60px); }
  .cluster.alt .c-info{ transform:translate(-50%,-50%) translateZ(60px); }
  .c-info .facts{ display:none; }
  .c-side.s2{ display:none; }
  .c-side.s1{ top:12%; width:24vw; transform:translate(-50%,-50%) translateX(30vw) translateZ(-300px); }
  .cluster.alt .c-side.s1{ transform:translate(-50%,-50%) translateX(-30vw) translateZ(-300px); }
  .c-num{ transform:translate(-50%,-50%) translateX(0) translateZ(-650px); opacity:.7; }
  .cluster.alt .c-num{ transform:translate(-50%,-50%) translateX(0) translateZ(-650px); }
  .cluster.intro .c-intro{ top:22%; }
  .cluster.intro h1{ font-size:clamp(2.2rem,9vw,3.6rem); }
  #hero-help{ white-space:normal; text-align:center; max-width:92vw; bottom:3.4rem; }
  #gal-dots{ display:none; }
  .gal-arrow{ display:none; }
}
@media (max-width:560px){
  #gal-head{ padding:.7rem .9rem; }
  .gal-actions{ gap:.8rem; }
  .gal-stamps{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  #gal-hint{ animation:none; }
  .cluster img{ transition:none; }
}

/* ═══════════════════════════ OVERLAYS / PANELS ═══════════════════════════ */
.overlay{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  padding:clamp(.6rem,3vw,2rem); background:rgba(3,7,14,.82);
  backdrop-filter:blur(6px); animation:fadeIn .2s ease both;
}
.overlay.out{ animation:fadeOut .18s ease both; }
.panel-box{
  position:relative; width:min(820px,100%); max-height:min(88vh,940px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:0 30px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(53,224,239,.05) inset;
  animation:panelIn .28s cubic-bezier(.2,.9,.25,1) both;
}
.panel-box.wide{ width:min(940px,100%); }
.panel-box.narrow{ width:min(560px,100%); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px) scale(.985) } to{ opacity:1; transform:none } }

.panel-corner{ position:absolute; width:13px; height:13px; border:1px solid var(--cyan); pointer-events:none; }
.panel-corner.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.panel-corner.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.panel-corner.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.panel-corner.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.panel-head{
  display:flex; align-items:flex-start; gap:1rem; padding:1.3rem 1.5rem 1rem;
  border-bottom:1px solid var(--line);
}
.panel-kicker{ margin:0; color:var(--cyan); font-size:9.5px; letter-spacing:.3em; }
.panel-head h2{ margin:.35rem 0 0; font-size:clamp(1.1rem,3.2vw,1.55rem); letter-spacing:.03em; color:#fff; font-weight:700; }
.panel-sub{ margin:.4rem 0 0; color:var(--ink-2); font-size:12px; }
.panel-close{
  margin-left:auto; background:none; border:1px solid var(--line-2); border-radius:var(--r);
  width:30px; height:30px; cursor:pointer; color:var(--ink-2); flex:none;
}
.panel-close:hover{ color:var(--cyan); border-color:var(--cyan); }

.panel-body{ padding:1.3rem 1.5rem; overflow:auto; flex:1; scrollbar-width:thin; }
.panel-body::-webkit-scrollbar{ width:8px; }
.panel-body::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
.panel-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.5rem; border-top:1px solid var(--line);
}
.panel-hint{ color:var(--dim); font-size:10.5px; letter-spacing:.1em; }

/* ───────── panel content atoms ───────── */
.lede{ margin:0 0 1.3rem; font-size:14px; color:var(--ink); }
.metrics{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1.4rem; }
.metric{ border:1px solid var(--line); border-radius:var(--r); padding:.55rem .8rem; min-width:112px; background:rgba(53,224,239,.035); }
.metric b{ display:block; color:var(--cyan); font-size:1.22rem; line-height:1.1; }
.metric span{ color:var(--dim); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; }

.sec-title{
  margin:1.8rem 0 .8rem; color:var(--cyan); font-size:10px; letter-spacing:.28em;
  display:flex; align-items:center; gap:.8rem;
}
.sec-title::after{ content:""; flex:1; height:1px; background:var(--line); }
.sec-title:first-child{ margin-top:0; }

.cards{ display:grid; gap:.75rem; }
.card{ border:1px solid var(--line); border-left:2px solid var(--line-2); border-radius:var(--r); padding:.85rem 1rem; background:rgba(255,255,255,.015); }
.card h4{ margin:0; font-size:13.5px; color:#fff; font-weight:700; }
.card .meta{ margin:.2rem 0 .5rem; color:var(--dim); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
.card ul{ margin:.4rem 0 0; padding-left:1.05rem; }
.card li{ margin:.3rem 0; color:var(--ink-2); font-size:12.5px; }
.card li b{ color:var(--cyan-soft); font-weight:700; }

.chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.9rem 0 0; }
.chip{
  font-size:10.5px; letter-spacing:.1em; padding:.3em .65em; border-radius:99px;
  border:1px solid var(--line-2); color:var(--ink-2); background:rgba(53,224,239,.05);
}

.cta-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }

/* ───────── minigame shell ───────── */
.mg{ margin-top:1.6rem; border:1px dashed var(--line-2); border-radius:var(--r); background:rgba(0,0,0,.28); }
.mg-head{ display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-bottom:1px dashed var(--line); flex-wrap:wrap; }
.mg-head b{ font-size:11px; letter-spacing:.2em; color:var(--amber); }
.mg-head .mg-brief{ color:var(--dim); font-size:11px; flex:1 1 220px; }
.mg-head .mg-status{ font-size:11px; letter-spacing:.1em; color:var(--cyan); }
.mg-body{ padding:.9rem; }
.mg-done{ border-color:var(--green); }
.mg-done .mg-head b{ color:var(--green); }

.stat-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; font-size:11.5px; color:var(--ink-2); }
.gauge{ flex:1 1 150px; height:8px; border:1px solid var(--line-2); border-radius:99px; overflow:hidden; background:rgba(0,0,0,.4); position:relative; }
.gauge i{ display:block; height:100%; background:var(--cyan); transition:width .3s ease, background .3s ease; }
.gauge.ok i{ background:var(--green); }
.gauge.bad i{ background:var(--red); }
.gauge u{ position:absolute; top:-3px; width:2px; height:14px; background:var(--amber); }

/* ───────── minigame: clash sweep ───────── */
.sweep-svg{ width:100%; height:auto; display:block; background:rgba(4,10,20,.7); border:1px solid var(--line); border-radius:var(--r); }
.sweep-svg .hit{ cursor:pointer; }
.sweep-svg .hit circle{ transition:.15s; }
.sweep-svg .hit:hover circle:first-child{ stroke:var(--amber); r:11; }

/* ───────── minigame: node wiring ───────── */
.gh{ position:relative; height:330px; background:
  radial-gradient(circle at 1px 1px, rgba(53,224,239,.16) 1px, transparent 1px) 0 0/22px 22px, rgba(4,10,20,.72);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; touch-action:none; }
.gh svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.gh-node{
  position:absolute; width:126px; border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg,#12253d,#0b1729); font-size:10.5px; letter-spacing:.06em;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.gh-node.solved{ border-color:var(--green); box-shadow:0 0 18px rgba(86,227,159,.3); }
.gh-node .t{ padding:.36rem .5rem; border-bottom:1px solid var(--line); color:#fff; font-weight:700; font-size:10px; letter-spacing:.1em; }
.gh-node .s{ padding:.3rem .5rem; color:var(--dim); font-size:9.5px; }
.gh-port{
  position:absolute; width:13px; height:13px; border:1px solid var(--cyan); background:var(--bg);
  border-radius:50%; cursor:crosshair; top:50%; transform:translateY(-50%);
}
.gh-port.out{ right:-7px; } .gh-port.in{ left:-7px; }
.gh-port:hover, .gh-port.live{ background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.gh-port.filled{ background:var(--green); border-color:var(--green); }

/* ───────── minigame: card sorter ───────── */
.fp-card{ border:1px solid var(--line-2); border-radius:var(--r); padding:.8rem .95rem; background:linear-gradient(180deg,#0f1e33,#0a1526); }
.fp-card h5{ margin:0 0 .5rem; font-size:12.5px; color:#fff; }
.fp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.45rem; margin:.6rem 0 .9rem; }
.fp-grid div{ border:1px solid var(--line); border-radius:var(--r); padding:.35rem .5rem; }
.fp-grid span{ display:block; color:var(--dim); font-size:9px; letter-spacing:.16em; }
.fp-grid b{ color:var(--cyan-soft); font-size:12px; }
.fp-verdict{ margin:.7rem 0 0; padding:.6rem .8rem; border-radius:var(--r); font-size:12px; border:1px solid; }
.fp-verdict.right{ border-color:var(--green); color:var(--green); background:rgba(86,227,159,.08); }
.fp-verdict.wrong{ border-color:var(--red); color:var(--red); background:rgba(255,95,109,.08); }

/* ───────── minigame: sliders ───────── */
.sliders{ display:grid; gap:.85rem; }
.slider label{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-2); letter-spacing:.08em; }
.slider label b{ color:var(--cyan); }
.slider input[type=range]{ width:100%; margin-top:.35rem; accent-color:var(--cyan); background:transparent; }
.readouts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.readout{ flex:1 1 130px; border:1px solid var(--line); border-radius:var(--r); padding:.5rem .7rem; }
.readout span{ display:block; font-size:9px; letter-spacing:.16em; color:var(--dim); }
.readout b{ font-size:1.05rem; }
.readout.ok b{ color:var(--green); } .readout.bad b{ color:var(--red); }

/* ───────── minigame: MEP routing ───────── */
.mep-svg{
  width:100%; height:auto; display:block; touch-action:none; user-select:none;
  background:rgba(4,10,20,.72); border:1px solid var(--line); border-radius:var(--r);
  cursor:crosshair;
}
.mep-svg .flow{ stroke-dasharray:12 7; animation:mepflow .8s linear infinite; }
@keyframes mepflow{ to{ stroke-dashoffset:-38; } }

.mep-legend{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; align-items:center; }
.mep-chip{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r); background:rgba(0,0,0,.3);
  padding:.35em .6em; font-size:10px; letter-spacing:.1em; color:var(--ink-2); transition:.15s;
}
.mep-chip:hover{ border-color:var(--cyan); color:var(--ink); }
.mep-chip.on{ background:rgba(53,224,239,.12); color:#fff; }
.mep-chip i{ width:11px; height:11px; border-radius:2px; flex:none; }
.mep-chip b{ font-size:11px; }
.mep-chip.done b{ color:var(--green); }

/* ───────── minigame: bracing grid ───────── */
.brace-svg{ width:100%; height:auto; background:rgba(4,10,20,.7); border:1px solid var(--line); border-radius:var(--r); }

/* ───────── minigame: site walk ───────── */
.walk-cv{
  width:100%; height:auto; display:block; touch-action:manipulation; user-select:none;
  background:rgba(4,10,20,.72); border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer;
}
.brace-svg .cand{ cursor:pointer; stroke:rgba(53,224,239,.16); stroke-width:9; }
.brace-svg .cand:hover{ stroke:rgba(255,182,72,.35); }

/* ═══════════════════════════ DOSSIER ═══════════════════════════ */
.tabs{ display:flex; gap:.3rem; padding:.7rem 1.5rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tab{
  background:none; border:1px solid transparent; border-bottom:0; cursor:pointer;
  padding:.55em .95em; font-size:10px; letter-spacing:.18em; color:var(--dim); border-radius:var(--r) var(--r) 0 0;
}
.tab:hover{ color:var(--ink); }
.tab.is-on{ color:var(--cyan); border-color:var(--line-2); background:rgba(53,224,239,.07); }

.skill{ margin:0 0 .55rem; display:flex; align-items:center; gap:.7rem; }
.skill .nm{ flex:0 0 152px; font-size:12px; color:var(--ink); }
.skill .bar{ flex:1; height:8px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:rgba(0,0,0,.35); }
.skill .bar i{ display:block; height:100%; background:var(--cyan); box-shadow:0 0 10px rgba(53,224,239,.5); transition:width .6s cubic-bezier(.2,.9,.25,1); }
.skill .lv{ flex:0 0 46px; text-align:right; font-size:10px; color:var(--dim); letter-spacing:.1em; }
.skill.locked{ opacity:.32; }
.skill.locked .bar i{ background:var(--dim); box-shadow:none; }

.quest{ position:relative; padding:0 0 1.35rem 1.5rem; border-left:1px solid var(--line-2); }
.quest:last-child{ border-left-color:transparent; padding-bottom:0; }
.quest::before{
  content:""; position:absolute; left:-5px; top:5px; width:9px; height:9px;
  background:var(--bg); border:1px solid var(--cyan); transform:rotate(45deg);
}
.quest.done::before{ background:var(--cyan); }
.quest .when{ color:var(--amber); font-size:10px; letter-spacing:.16em; }
.quest h4{ margin:.15rem 0 .1rem; font-size:13.5px; color:#fff; }
.quest .org{ color:var(--ink-2); font-size:11.5px; }
.quest p{ margin:.45rem 0 0; font-size:12.5px; color:var(--ink-2); }

.ach{ display:flex; gap:.8rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--line); }
.ach:last-child{ border-bottom:0; }
.ach .ic{ flex:none; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--r); font-size:15px; }
.ach.got .ic{ border-color:var(--amber); color:var(--amber); box-shadow:0 0 16px rgba(255,182,72,.25); }
.ach.locked{ opacity:.38; }
.ach b{ display:block; font-size:12.5px; color:#fff; }
.ach span{ font-size:11.5px; color:var(--ink-2); }

.contact-grid{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.contact-grid a, .contact-grid .ci{
  display:block; border:1px solid var(--line); border-radius:var(--r); padding:.7rem .9rem;
  color:var(--ink); text-decoration:none; transition:.15s;
}
.contact-grid a:hover{ border-color:var(--cyan); background:rgba(53,224,239,.07); }
.contact-grid span{ display:block; font-size:9px; letter-spacing:.2em; color:var(--dim); margin-bottom:.15rem; }

.keytable{ width:100%; border-collapse:collapse; }
.keytable td{ padding:.45rem .3rem; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-2); }
.keytable td:first-child{ width:47%; color:var(--ink); }
.note{ margin:1.1rem 0 0; color:var(--ink-2); font-size:12.5px; }

/* ═══════════════════════════ PLAIN DOCUMENT MODE ═══════════════════════════ */
#docmode{ position:relative; z-index:50; min-height:100%; background:var(--bg); }
.doc-bar{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem clamp(1rem,5vw,3rem); border-bottom:1px solid var(--line-2);
  background:rgba(6,13,24,.96); backdrop-filter:blur(6px);
  font-size:10px; letter-spacing:.24em; color:var(--dim);
}
#doc{ max-width:74ch; margin:0 auto; padding:clamp(2rem,6vw,4.5rem) clamp(1rem,5vw,2rem) 6rem; }
#doc h1{ font-size:clamp(1.7rem,5vw,2.5rem); margin:0 0 .2rem; color:#fff; letter-spacing:.01em; }
#doc .role{ color:var(--cyan); letter-spacing:.24em; font-size:12px; margin:0 0 .6rem; }
#doc .contactline{ color:var(--ink-2); font-size:12.5px; margin:0 0 2.6rem; }
#doc h2{
  margin:3rem 0 1rem; font-size:11px; letter-spacing:.3em; color:var(--cyan);
  display:flex; align-items:center; gap:.9rem;
}
#doc h2::after{ content:""; flex:1; height:1px; background:var(--line); }
#doc h3{ margin:1.7rem 0 .1rem; font-size:14px; color:#fff; }
#doc .m{ color:var(--dim); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin:.15rem 0 .5rem; }
#doc ul{ padding-left:1.1rem; margin:.4rem 0 0; }
#doc li{ margin:.35rem 0; color:var(--ink-2); font-size:13.5px; }
#doc p{ color:var(--ink-2); font-size:13.5px; }
#doc .skillline{ margin:.35rem 0; font-size:13.5px; color:var(--ink-2); }
#doc .skillline b{ color:var(--ink); }

.noscript{ max-width:66ch; margin:14vh auto; padding:0 1.5rem; }
.noscript h1{ color:#fff; }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:900px){
  .hud-xp{ display:none; }
  #minimap-wrap{ transform:scale(.82); transform-origin:100% 100%; }
}
@media (max-width:620px){
  .hud-role{ display:none; }
  .hud-btn{ padding:.5em .55em; }
  #toasts{ bottom:auto; top:4.4rem; left:.7rem; max-width:70vw; }
  .panel-head{ padding:1rem 1rem .8rem; }
  .panel-body{ padding:1rem; }
  .panel-foot{ padding:.7rem 1rem; }
  .skill .nm{ flex-basis:104px; font-size:11px; }
  .gh{ height:290px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ==========================================================================
   LIGHT THEME OVERRIDES - the dossier, the plain text version and every
   overlay follow the site palette (white / near-black / electric blue).
   The dormant studio styles above are left untouched.
   ========================================================================== */
.overlay{
  background:rgba(255,255,255,.78); backdrop-filter:blur(7px);
}
.panel-box{
  background:#fff; border:1px solid var(--w-hair2); border-radius:0;
  box-shadow:0 40px 90px rgba(16,16,16,.22), 0 8px 20px rgba(16,16,16,.10);
  font-family:var(--w-sans);
}
.panel-corner{ border-color:var(--elec); }
.panel-head{ border-bottom:1px solid var(--w-hair); }
.panel-kicker{ color:var(--elec); font-weight:700; letter-spacing:.3em; }
.panel-head h2{
  color:var(--w-ink); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
}
.panel-sub{ color:var(--w-ink2); }
.panel-close{
  color:var(--w-ink); border:1px solid var(--w-hair2); background:#fff; border-radius:0;
}
.panel-close:hover{ background:var(--elec); border-color:var(--elec); color:#fff; }
.panel-body{ color:var(--w-ink2); }
.panel-foot{
  border-top:1px solid var(--w-hair); background:#fff;
}
.panel-hint{ color:var(--w-dim); }
.panel-box .lede{ color:var(--w-ink); font-size:14px; line-height:1.7; }
.panel-box .sec-title{
  color:var(--elec); border-bottom:1px solid var(--w-hair); font-weight:700;
  letter-spacing:.26em; margin:1.7rem 0 .8rem; padding-bottom:.4rem; font-size:9.5px;
}
.panel-box .btn{ border-radius:0; font-family:var(--w-sans); letter-spacing:.2em; }
.panel-box .btn-ghost{ color:var(--w-ink); border-color:var(--w-hair2); background:#fff; }
.panel-box .btn-ghost:hover{ color:#fff; background:var(--w-ink); border-color:var(--w-ink); }
.panel-box .btn-primary{ background:var(--elec); border-color:var(--elec); color:#fff; font-weight:700; }
.panel-box .btn-primary:hover{ background:var(--w-ink); border-color:var(--w-ink); }
.panel-box kbd{
  border-color:var(--w-hair2); color:var(--w-ink2); background:rgba(16,16,16,.04);
}
.panel-box a{ color:var(--elec); border-bottom-color:rgba(26,60,255,.4); }
.panel-box a:hover{ color:var(--w-ink); border-bottom-color:var(--w-ink); }
.linkish{ color:var(--elec); border-bottom-color:rgba(26,60,255,.45); }

/* tabs */
.tabs{ border-bottom:1px solid var(--w-hair); gap:1.3rem; padding:.9rem 1.5rem 0; }
.tab{
  color:var(--w-dim); border:0; border-bottom:2px solid transparent; border-radius:0;
  padding:.4em 0 .6em; font-weight:700; letter-spacing:.24em; font-size:10px;
}
.tab:hover{ color:var(--w-ink); background:none; }
.tab.is-on{ color:var(--elec); background:none; border-bottom-color:var(--elec); }

/* quick facts */
.quick-facts{
  display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--w-hair); margin-top:1.4rem;
}
.quick-facts div{ padding:.75rem .9rem .75rem 0; border-bottom:1px solid var(--w-hair); }
.quick-facts b{
  display:block; font-size:9px; letter-spacing:.26em; color:var(--elec); font-weight:700;
  text-transform:uppercase; margin-bottom:.2rem;
}
.quick-facts span{ font-size:12px; color:var(--w-ink2); line-height:1.5; }

/* skills */
.skill .nm{ color:var(--w-ink); font-weight:600; }
.skill .bar{ border:0; background:rgba(16,16,16,.10); height:6px; border-radius:0; }
.skill .bar i{ background:var(--elec); box-shadow:none; }
.skill .lv{ color:var(--w-dim); flex:0 0 72px; font-weight:600; font-size:9px; letter-spacing:.14em; }

/* timeline */
.quest{ border-left:1px solid var(--w-hair2); }
.quest::before{ background:#fff; border:1px solid var(--elec); }
.quest.done::before{ background:var(--elec); }
.quest .when{ color:var(--elec); font-weight:700; }
.quest h4{ color:var(--w-ink); font-weight:800; }
.quest .org{ color:var(--w-ink2); }
.quest p{ color:var(--w-ink2); }

/* contact */
.contact-grid a, .contact-grid .ci{
  border:1px solid var(--w-hair); border-radius:0; color:var(--w-ink); font-weight:600;
}
.contact-grid a{ border-bottom:1px solid var(--w-hair); }
.contact-grid a:hover{ border-color:var(--elec); background:rgba(26,60,255,.04); color:var(--elec); }
.contact-grid span{ color:var(--w-dim); font-weight:700; }
.note{ color:var(--w-ink2); }

/* plain text version */
#docmode{ background:var(--w-bg); font-family:var(--w-sans); }
.doc-bar{
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--w-hair);
  color:var(--w-dim); font-weight:700;
}
.doc-bar .btn{ border-radius:0; color:var(--w-ink); border-color:var(--w-hair2); font-family:var(--w-sans); }
.doc-bar .btn:hover{ background:var(--w-ink); border-color:var(--w-ink); color:#fff; }
#doc h1{ color:var(--w-ink); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; }
#doc .role{ color:var(--elec); font-weight:700; }
#doc .contactline{ color:var(--w-ink2); }
#doc .contactline a{ color:var(--elec); border-bottom-color:rgba(26,60,255,.35); }
#doc .lede-doc{ color:var(--w-ink); font-size:15px; line-height:1.8; margin:0 0 1rem; }
#doc h2{ color:var(--elec); font-weight:700; }
#doc h2::after{ background:var(--w-hair); }
#doc h3{ color:var(--w-ink); font-weight:800; font-size:14.5px; }
#doc .m{ color:var(--w-dim); }
#doc li, #doc p, #doc .skillline{ color:var(--w-ink2); }
#doc .skillline b{ color:var(--w-ink); }
#doc a{ color:var(--elec); border-bottom-color:rgba(26,60,255,.35); }
#doc a:hover{ color:var(--w-ink); border-bottom-color:var(--w-ink); }
.noscript{ color:var(--w-ink2); }
.noscript h1{ color:var(--w-ink); }
.noscript a{ color:var(--elec); }

/* hero hints: hide for certain, not only by opacity (transition-independent) */
#gal-hint, #hero-help{ transition:opacity .4s ease; }
#gal-hint.off, #hero-help.off{ opacity:0; visibility:hidden; }

/* ==========================================================================
   SLIDES - a project is a cover slide plus detail slides you fly through
   ========================================================================== */
.c-info .role{
  margin:.55rem 0 0; font-size:10.5px; letter-spacing:.02em; color:var(--w-ink2); line-height:1.55;
}
.c-info .body{ margin:.9rem 0 0; font-size:12px; line-height:1.75; color:var(--w-ink2); }
.c-info .dtitle{
  margin:0; font-size:11px; letter-spacing:.26em; font-weight:800; color:var(--w-ink);
  text-transform:uppercase;
}
.c-info .dcap{
  margin:.7rem 0 0; font-size:clamp(1.05rem,1.7vw,1.5rem); line-height:1.25; font-weight:800;
  letter-spacing:-.01em; color:var(--w-ink);
}
.c-info .facts li{ font-size:10.5px; }

/* detail slides: the image leads, the text is a quiet column beside it */
.cluster.is-detail .c-main{ width:min(46vw,760px); }
.cluster.is-detail .c-info{ width:min(24vw,340px); }
.cluster.is-detail .c-num{ opacity:.55; }

@media (max-width:920px){
  .cluster.is-detail .c-main{ width:min(88vw,640px); }
  .cluster.is-detail .c-info{ width:min(88vw,540px); }
  .c-info .body{ font-size:11.5px; }
  .c-info .role{ display:none; }
}

.cluster.is-detail .c-main figcaption{ letter-spacing:.3em; }
.c-main figcaption b{ margin-right:.6em; }

/* ==========================================================================
   PROJECT SCREEN ACTIONS + THE DETAIL VIEW
   ========================================================================== */
.c-main video{ width:100%; height:auto; display:block; box-shadow:0 46px 90px rgba(16,16,16,.30); }
.c-side video{ width:100%; height:auto; display:block; }

.c-actions{ display:flex; align-items:center; gap:1.2rem; margin-top:1.3rem; flex-wrap:wrap; }
.c-more{
  display:inline-flex; align-items:center; gap:.7em; cursor:pointer;
  padding:.75em 1.25em; border:0; background:var(--elec); color:#fff;
  font-family:var(--w-sans); font-size:10.5px; letter-spacing:.24em; font-weight:700;
  transition:.15s;
}
.c-more span{ transition:transform .15s ease; }
.c-more:hover{ background:var(--w-ink); }
.c-more:hover span{ transform:translateX(4px); }
.c-actions .c-link{ margin-top:0; }

/* the detail view */
#detail .panel-box{ width:min(1060px,100%); max-height:min(92vh,1000px); }
#detail-body{ padding-top:1.4rem; }
#detail .lede{ margin:0 0 1.2rem; }
.dt-meta{
  display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid var(--w-hair); margin-bottom:.4rem;
}
.dt-meta div{ padding:.7rem .9rem .7rem 0; border-bottom:1px solid var(--w-hair); font-size:12px; color:var(--w-ink2); }
.dt-meta span{
  display:block; font-size:8.5px; letter-spacing:.26em; color:var(--elec); font-weight:700; margin-bottom:.2rem;
}
.dt-fig{ margin:2.2rem 0 0; }
.dt-fig img, .dt-fig video{
  width:100%; height:auto; display:block; background:#fafafa;
  border:1px solid var(--w-hair); box-shadow:0 18px 44px rgba(16,16,16,.14);
}
/* a phone-shaped photograph: at full width it would be the tallest thing in
   the sheet, so it is held to a column and centred */
.dt-fig.is-portrait img{ width:auto; max-width:min(100%,380px); max-height:64vh; margin:0 auto; }
.dt-fig.is-portrait figcaption, .dt-fig.is-portrait .dt-note{
  max-width:min(100%,380px); margin-left:auto; margin-right:auto;
}
.dt-fig figcaption{
  margin-top:.6rem; font-size:11px; letter-spacing:.02em; color:var(--w-ink); font-weight:600; line-height:1.5;
}
.dt-fig figcaption b{ color:var(--elec); margin-right:.5em; letter-spacing:.1em; }
.dt-note{
  margin:.5rem 0 0; font-size:12px; line-height:1.75; color:var(--w-ink2);
  padding-left:.9rem; border-left:2px solid var(--elec);
}
#detail-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

@media (max-width:920px){
  .c-actions{ margin-top:1rem; gap:.8rem; }
  .c-more{ padding:.7em 1em; }
  .dt-fig{ margin-top:1.6rem; }
}

/* side planes float on the free side, never under the text column */
.c-side{ width:min(16vw,250px); }
.c-side.s1{ left:50%; top:11%; transform:translate(-50%,-50%) translateX(-33vw) translateZ(-320px) rotateY(9deg); }
.cluster.alt .c-side.s1{ transform:translate(-50%,-50%) translateX(33vw) translateZ(-320px) rotateY(-9deg); }
.c-side.s2{ left:50%; top:86%; transform:translate(-50%,-50%) translateX(-28vw) translateZ(-540px) rotateY(7deg); }
.cluster.alt .c-side.s2{ transform:translate(-50%,-50%) translateX(28vw) translateZ(-540px) rotateY(-7deg); }
.c-main{ width:min(42vw,680px); }
@media (max-width:920px){
  .c-side.s1, .c-side.s2{ display:none; }
  .c-main{ width:min(88vw,640px); }
}

/* ==========================================================================
   FULL-SCREEN SCALE  +  AWARD BADGES
   The clusters sit at focus distance F in a 1150px perspective, so they render
   at about 64% of their CSS size. Everything here is sized up to compensate,
   which is what makes the composition fill the screen.
   ========================================================================== */
.c-main{ width:min(60vw,1120px); }
.c-side{ width:min(21vw,340px); }
.c-info{ width:min(34vw,520px); }
.c-info .no{ font-size:14px; letter-spacing:.34em; }
.c-info h2{ font-size:clamp(2rem,4.6vw,3.9rem); line-height:.98; }
.c-info .sub{ font-size:17px; line-height:1.5; margin-top:.8rem; }
.c-info .meta{ font-size:12.5px; letter-spacing:.3em; margin-top:1.1rem; }
.c-info .role{ font-size:14px; line-height:1.6; }
.c-info .body{ font-size:16px; line-height:1.7; margin-top:1.1rem; }
.c-info .facts li{ font-size:14.5px; padding:.5em 0 .5em 1.5em; line-height:1.5; }
.c-info .facts li::before{ font-size:15px; }
.c-main figcaption{ font-size:12.5px; letter-spacing:.22em; margin-top:1rem; }
.c-more{ font-size:14px; padding:.9em 1.6em; letter-spacing:.26em; }
.c-link{ font-size:14px; letter-spacing:.26em; }
.c-ctas a{ font-size:13px; padding:.8em 1.4em; }
.c-num{ font-size:min(56vh,40vw); }

/* the intro block scales with it */
.cluster.intro h1{ font-size:clamp(3.4rem,10.5vw,8rem); }
.c-intro .i-kicker{ font-size:17px; letter-spacing:.44em; }
.c-intro .i-sub{ font-size:19px; letter-spacing:.36em; }
.i-ctas a{ font-size:16px; padding:.9em 1.7em; }

/* award: the one thing that should never be missed */
.i-award{
  display:inline-flex; align-items:center; gap:.85em; margin:1.9rem 0 0;
  padding:.7em 1.3em; border:2px solid var(--elec); color:var(--elec);
  font-size:15px; letter-spacing:.22em; font-weight:700; text-transform:uppercase;
}
.i-award b{ background:var(--elec); color:#fff; padding:.25em .6em; letter-spacing:.14em; }
.i-award span{ color:var(--w-ink2); letter-spacing:.06em; font-weight:600; text-transform:none; }
.c-award{
  display:inline-flex; align-items:center; gap:.7em; margin:1rem 0 0;
  padding:.5em 1em; background:var(--elec); color:#fff;
  font-size:12.5px; letter-spacing:.2em; font-weight:700; text-transform:uppercase;
}
.c-award b{ background:#fff; color:var(--elec); padding:.15em .5em; }
.detail-award{
  margin:.5rem 0 0; color:var(--elec); font-size:11px; letter-spacing:.24em;
  font-weight:700; text-transform:uppercase;
}

@media (max-width:920px){
  .c-main{ width:min(92vw,700px); }
  .c-info{ width:min(92vw,620px); }
  .c-info h2{ font-size:clamp(1.9rem,8vw,3rem); }
  .c-info .sub{ font-size:15px; }
  .c-info .body{ font-size:14px; }
  .c-info .facts li{ font-size:13px; }
  .i-award{ font-size:11px; padding:.55em 1em; flex-wrap:wrap; }
  .i-award span{ display:none; }
}

/* keep the enlarged composition from colliding with itself */
.c-main{ width:min(56vw,1040px); transform:translate(-50%,-50%) translateX(-16vw) rotateY(7deg); }
.cluster.alt .c-main{ transform:translate(-50%,-50%) translateX(16vw) rotateY(-7deg); }
.c-info{ transform:translate(-50%,-50%) translateX(30vw) translateZ(90px); }
.cluster.alt .c-info{ transform:translate(-50%,-50%) translateX(-30vw) translateZ(90px); }
.c-side.s1{ top:9%; transform:translate(-50%,-50%) translateX(-42vw) translateZ(-320px) rotateY(9deg); }
.cluster.alt .c-side.s1{ transform:translate(-50%,-50%) translateX(42vw) translateZ(-320px) rotateY(-9deg); }
.c-side.s2{ top:89%; transform:translate(-50%,-50%) translateX(-38vw) translateZ(-540px) rotateY(7deg); }
.cluster.alt .c-side.s2{ transform:translate(-50%,-50%) translateX(38vw) translateZ(-540px) rotateY(-7deg); }
.cluster.intro .c-intro{ top:24%; }
.i-award{ margin-top:1.3rem; }

@media (max-width:920px){
  .c-main, .cluster.alt .c-main{ width:min(92vw,700px); transform:translate(-50%,-50%); }
  .c-info, .cluster.alt .c-info{ transform:translate(-50%,-50%) translateZ(60px); }
}

.dt-fig.is-dwg .svgbox{ border:1px solid var(--w-hair); box-shadow:0 18px 44px rgba(16,16,16,.10); }
.dt-fig .svgbox svg{ width:100%; height:auto; display:block; }

/* ==========================================================================
   HERO: credentials and current focus, above the frame
   ========================================================================== */
.cluster.intro .c-intro{ top:21%; width:min(96vw,1560px); }
.cluster.intro h1{ font-size:clamp(3.4rem,9.8vw,7.6rem); }
.c-intro .i-sub{ margin-top:1.1rem; }

.i-creds{
  display:flex; justify-content:center; gap:0; flex-wrap:wrap;
  margin:2rem auto 0; max-width:1440px;
  border-top:1px solid var(--w-hair); border-bottom:1px solid var(--w-hair);
}
.i-cred{
  flex:1 1 300px; min-width:260px; padding:1.1rem 1.4rem; text-align:left;
  border-right:1px solid var(--w-hair); pointer-events:auto;
}
.i-cred:last-child{ border-right:0; }
.i-cred b{
  display:block; font-size:20px; letter-spacing:.01em; color:var(--w-ink); font-weight:800; line-height:1.25;
}
.i-cred span{ display:block; margin-top:.35rem; font-size:17.5px; color:var(--w-ink2); }
.i-cred i{ display:block; margin-top:.4rem; font-size:14.5px; color:var(--w-dim); font-style:normal; letter-spacing:.02em; }
.i-cred.is-award{ background:rgba(26,60,255,.05); }
.i-cred.is-award b{ color:var(--elec); text-transform:uppercase; letter-spacing:.06em; }

/* the award credential goes somewhere - the photograph at the foot of the
   ClashAI sheet - so it reads as a target: tint on hover and a pill saying so */
.i-cred.is-link{ cursor:pointer; transition:background .18s, box-shadow .18s; }
.i-cred.is-link:hover, .i-cred.is-link:focus-visible{
  background:rgba(26,60,255,.11); outline:none;
  box-shadow:inset 0 0 0 1px rgba(26,60,255,.35);
}
.i-cred-go{
  display:inline-block; margin-top:.55rem; padding:.3em .7em;
  border:1.5px solid var(--elec); color:var(--elec);
  font-size:11.5px; font-weight:800; letter-spacing:.14em; font-style:normal;
  white-space:nowrap; transition:background .18s, color .18s;
}
.i-cred.is-link:hover .i-cred-go, .i-cred.is-link:focus-visible .i-cred-go{
  background:var(--elec); color:#fff;
}

.i-focus{ margin:1.7rem auto 0; max-width:1440px; }
.i-focus-h{
  margin:0 0 .8rem; font-size:14px; letter-spacing:.4em; color:var(--elec); font-weight:700;
}
.i-focus-row{ display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; }
.i-foc{
  flex:1 1 320px; min-width:280px; max-width:460px; text-align:left;
  border-left:2px solid var(--elec); padding:.2rem 0 .2rem .9rem; pointer-events:auto;
}
.i-foc b{ display:block; font-size:16.5px; letter-spacing:.22em; color:var(--w-ink); font-weight:800; }
/* the name as a link: the studio's base anchor rule is cyan on dark, which
   disappears on this white page - so it takes the card's own ink, with the
   electric underline saying it goes somewhere */
.i-foc b a{ color:inherit; border-bottom:2px solid var(--elec); padding-bottom:.08em; }
.i-foc b a:hover{ color:var(--elec); border-bottom-color:var(--elec); }
.i-foc span{ display:block; margin-top:.4rem; font-size:16.5px; line-height:1.55; color:var(--w-ink2); }

/* a card with a live link reads as a button: tint, full border, pointer, and
   a VIEW PROJECT pill in the title row (zero extra height on desktop). Kept
   compact on purpose - the copy above still outranks everything else. */
.i-foc.is-live{
  cursor:pointer; background:rgba(26,60,255,.045);
  border:1px solid rgba(26,60,255,.3); border-left:2px solid var(--elec);
  padding:.55rem .8rem .6rem .9rem;
  transition:background .18s, border-color .18s, transform .18s;
}
.i-foc.is-live:hover{ background:rgba(26,60,255,.09); border-color:var(--elec); transform:translateY(-2px); }
.i-foc.is-live b{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap; }
.i-foc-btn{
  display:inline-block; padding:.3em .75em; border:1.5px solid var(--elec);
  color:var(--elec); font-size:12px; font-weight:800; letter-spacing:.16em;
  white-space:nowrap; transition:background .18s, color .18s;
}
.i-foc.is-live b a:not(.i-foc-btn){ border-bottom:2px solid var(--elec); }
.i-foc.is-live:hover .i-foc-btn, .i-foc-btn:hover{ background:var(--elec); color:#fff; }

.i-ctas{ margin-top:2rem; }

/* the copy is the portfolio and the drawing only supports it, so it is set
   large - but the section band owns the lower two fifths of the viewport, so
   on a short screen the whole block scales back rather than running into the
   drawing. It still lands larger than it was. */
@media (max-height:860px){
  .cluster.intro .c-intro{ transform:translate(-50%,-50%) translateY(14px) scale(.95); }
}
@media (max-height:790px){
  .cluster.intro .c-intro{ transform:translate(-50%,-50%) translateY(20px) scale(.9); }
  /* the kicker only repeats the header, and on a short screen the room it
     takes is worth more than the line is */
  .cluster.intro .i-kicker{ display:none; }
}
@media (max-height:700px){
  .cluster.intro .c-intro{ transform:translate(-50%,-50%) translateY(34px) scale(.84); }
}
@media (max-height:640px){
  .cluster.intro .c-intro{ transform:translate(-50%,-50%) translateY(44px) scale(.74); }
}
/* below this the block cannot fit above the section at any size worth
   reading, so the copy sheds what the CV repeats: the marks and what is on
   the bench right now. The name, the three credentials and the two buttons
   are what a short window keeps. */
@media (max-height:600px){
  .cluster.intro .c-intro{ transform:translate(-50%,-50%) translateY(30px) scale(.66); }
  .i-cred i, .i-focus{ display:none; }
}

@media (max-width:1100px){
  .i-cred{ flex:1 1 100%; border-right:0; border-bottom:1px solid var(--w-hair); padding:.8rem 1rem; }
  .i-cred:last-child{ border-bottom:0; }
  .i-foc{ flex:1 1 100%; max-width:none; }
  .i-focus-row{ gap:.8rem; }
}
@media (max-width:920px){
  .cluster.intro .c-intro{ top:16%; transform:translate(-50%,-50%) translateY(20px) scale(.92); }
  .cluster.intro .i-kicker{ display:none; }
  .cluster.intro h1{ font-size:clamp(2.2rem,8.6vw,3.6rem); }
  .i-creds{ margin-top:1.2rem; }
  .i-cred b{ font-size:16px; }
  .i-cred span{ font-size:15px; }
  .i-cred i{ display:none; }
  .i-focus{ margin-top:1.1rem; }
  .i-foc b{ font-size:14px; }
  .i-foc span{ font-size:14.5px; }
  .i-ctas{ margin-top:1.3rem; }
}

/* ==========================================================================
   CV PREVIEW
   ========================================================================== */
#cv .panel-box{ width:min(980px,100%); max-height:min(94vh,1040px); }
#cv-body{ padding:0; display:flex; flex-direction:column; }
.cv-frame{ flex:1; min-height:min(72vh,760px); background:#f4f4f4; }
.cv-frame iframe{ width:100%; height:100%; min-height:min(72vh,760px); border:0; display:block; }
.cv-fallback{ margin:0; padding:.7rem 1.5rem; border-top:1px solid var(--w-hair); }
.cv-actions{ display:flex; gap:.6rem; align-items:center; }
@media (max-width:920px){
  .cv-frame, .cv-frame iframe{ min-height:60vh; }
}

/* ==========================================================================
   THE GAME AS A FULL SCREEN OVERLAY
   The hero is now clean editorial; the game opens over everything, with
   nothing on top of it but a thin bar.
   ========================================================================== */
#play{
  position:fixed; inset:0; z-index:38; background:var(--w-bg);
  display:flex; flex-direction:column; overflow:hidden;
  animation:fadeIn .28s ease both;
}
#play canvas{
  flex:1; width:100%; height:100%; display:block; cursor:pointer; touch-action:none;
}
#play-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:1.4rem; padding:.9rem 1.6rem;
  background:linear-gradient(0deg, rgba(255,255,255,.96) 55%, rgba(255,255,255,0));
}
.play-title{
  font-size:12px; letter-spacing:.34em; font-weight:800; color:var(--w-ink); white-space:nowrap;
}
.play-help{
  flex:1; font-size:10.5px; letter-spacing:.14em; color:var(--w-ink2);
  text-transform:uppercase; font-weight:600;
}
.play-help b{ color:var(--elec); }
#play-close{
  cursor:pointer; border:1px solid var(--w-hair2); background:#fff; color:var(--w-ink);
  font-family:var(--w-sans); font-size:10.5px; letter-spacing:.24em; font-weight:700;
  padding:.7em 1.1em; white-space:nowrap; transition:.15s;
}
#play-close:hover{ background:var(--w-ink); border-color:var(--w-ink); color:#fff; }
#play-close kbd{ margin-left:.5em; border-color:var(--w-hair2); color:var(--w-ink2); background:rgba(16,16,16,.04); }

/* the button that opens it */
.i-play{
  display:inline-flex; align-items:center; gap:.8em; cursor:pointer;
  padding:.85em 1.5em; border:2px solid var(--w-ink); background:#fff; color:var(--w-ink);
  font-family:var(--w-sans); font-size:13.5px; letter-spacing:.2em; font-weight:700;
  text-transform:uppercase; transition:.15s;
}
.i-play i{
  width:9px; height:9px; background:var(--elec); border-radius:50%;
  animation:playPulse 1.5s ease-in-out infinite;
}
.i-play:hover{ background:var(--w-ink); color:#fff; border-color:var(--w-ink); }
.i-play:hover i{ background:#fff; }
@keyframes playPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.55); opacity:.55 } }

/* the game is inline again, so the hero copy rides high and hands the bottom
   of the viewport to the model. Remember the perspective: the cluster is
   scaled about its centre by ~0.64 at focus (0.58 under the 900px mobile
   perspective), so a 1% change in `top` moves the block ~0.6% on screen. */
.cluster.intro .c-intro{ top:20%; }

@media (max-width:920px){
  #play-bar{ flex-wrap:wrap; gap:.6rem; padding:.7rem 1rem; }
  .play-help{ flex:1 1 100%; order:3; font-size:9.5px; letter-spacing:.1em; }
  .i-play{ font-size:12px; padding:.75em 1.2em; }
}
@media (prefers-reduced-motion: reduce){
  .i-play i{ animation:none; }
  #play{ animation:none; }
}

.play-help{ min-width:0; }
@media (max-width:920px){
  .play-help{ flex:1 1 100%; min-width:0; overflow-wrap:anywhere; }
  #play-bar{ padding-bottom:1rem; }
}

/* ══════════ CONTACT SCREEN - no plates, just the ask ══════════ */
.cluster.is-contact .c-info,
.cluster.alt.is-contact .c-info{
  top:50%;
  width:min(64vw,780px);
  text-align:center;
  transform:translate(-50%,-50%) translateZ(90px);
}
.cluster.is-contact .c-info h2{ font-size:clamp(2.6rem,6.5vw,5rem); }
.cluster.is-contact .c-ctas{ justify-content:center; }
.cluster.is-contact .c-num{ transform:translate(-50%,-50%) translateZ(-620px); }
@media (max-width:760px){
  .cluster.is-contact .c-info,
  .cluster.alt.is-contact .c-info{ top:50%; width:min(92vw,620px); transform:translate(-50%,-50%) translateZ(60px); }
}

/* ══════════ INLINE HERO GAME - clash run along the landing ══════════ */
#hero-cv{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; cursor:pointer; touch-action:pan-y;
  transition:opacity .4s ease;
}
#hero-cv.off{ opacity:0; visibility:hidden; }

/* the controls chip carries two readings: keys, or touch */
#hero-help i{ font-style:normal; }
#hero-help .hh-tap{ display:none; }
@media (hover:none){
  #hero-help .hh-key{ display:none; }
  #hero-help .hh-tap{ display:inline; }
}

@media (max-width:920px){
  .cluster.intro .c-intro{ top:18%; }
}

/* ══════════ THE LIVE DEFINITION - Salapan Ombak, inside MORE DETAIL ══════════
   The model is the argument of that project, so it is given the weight of a
   drawing: a bordered plate for the geometry, and the sliders read as a
   control strip under it rather than as a form. */
.dt-modelbox{
  border:1px solid var(--w-hair); background:#fff;
  box-shadow:0 18px 44px rgba(16,16,16,.14);
}
.ob-stage{ position:relative; }
.ob-cv{
  display:block; width:100%; height:clamp(280px,44vh,460px);
  cursor:grab; touch-action:none; background:#fff;
}
.ob-cv:active{ cursor:grabbing; }
.ob-view, .ob-hint{
  position:absolute; top:12px; font-size:9px; letter-spacing:.26em;
  color:var(--w-dim); pointer-events:none; font-weight:600;
}
.ob-view{ left:14px; }
.ob-hint{ right:14px; }

.ob-panel{ border-top:1px solid var(--w-hair); }

.ob-views{ display:flex; border-bottom:1px solid var(--w-hair); }
.ob-views button{
  flex:1; font:inherit; font-family:var(--w-sans);
  font-size:9.5px; letter-spacing:.2em; font-weight:700; color:var(--w-ink2);
  padding:.85em .4em; background:transparent; cursor:pointer;
  border:0; border-right:1px solid var(--w-hair);
}
.ob-views button:last-child{ border-right:0; }
.ob-views button[aria-pressed="true"]{ background:var(--elec); color:#fff; }
.ob-views button:hover[aria-pressed="false"]{ background:rgba(26,60,255,.06); }
.ob-views button:focus-visible{ outline:2px solid var(--elec); outline-offset:-3px; }

.ob-sliders{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.1rem 1.6rem; padding:1rem 1.2rem .6rem;
}
.ob-ctrl{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:0 .6rem; }
.ob-ctrl label{
  font-size:9.5px; letter-spacing:.2em; font-weight:700; color:var(--w-ink2);
}
.ob-val{
  font-size:11px; font-weight:700; color:var(--elec);
  font-variant-numeric:tabular-nums;
}
.ob-ctrl input[type=range]{
  grid-column:1 / -1; width:100%; height:20px; margin:.1rem 0 .35rem;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:grab;
}
.ob-ctrl input[type=range]:active{ cursor:grabbing; }
.ob-ctrl input[type=range]::-webkit-slider-runnable-track{
  height:1px; background:var(--w-hair2);
}
.ob-ctrl input[type=range]::-moz-range-track{ height:1px; background:var(--w-hair2); }
.ob-ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:0;
  background:var(--elec); border:0; margin-top:-5px;
}
.ob-ctrl input[type=range]::-moz-range-thumb{
  width:11px; height:11px; border-radius:0; background:var(--elec); border:0;
}
.ob-ctrl input[type=range]:focus-visible{ outline:2px solid var(--elec); outline-offset:2px; }

.ob-read{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  border-top:1px solid var(--w-hair);
}
.ob-cell{ padding:.7rem .9rem; border-right:1px solid var(--w-hair); }
.ob-cell:last-child{ border-right:0; }
.ob-k{ display:block; font-size:8.5px; letter-spacing:.2em; color:var(--w-dim); font-weight:700; }
.ob-v{
  display:block; margin-top:.15rem; font-size:15px; font-weight:800;
  color:var(--w-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.ob-cell.is-off .ob-v{ color:var(--elec); }
.ob-s{ display:block; font-size:9.5px; color:var(--w-ink2); font-style:normal; }

.ob-reset{
  display:block; width:100%; font:inherit; font-family:var(--w-sans);
  font-size:9.5px; letter-spacing:.2em; font-weight:700; color:var(--w-ink2);
  padding:.9em; background:transparent; border:0; border-top:1px solid var(--w-hair);
  cursor:pointer;
}
.ob-reset:hover{ background:var(--w-ink); color:#fff; }
.ob-reset:focus-visible{ outline:2px solid var(--elec); outline-offset:-3px; }

@media (max-width:620px){
  .ob-cv{ height:clamp(230px,38vh,320px); }
  .ob-hint{ display:none; }
  .ob-sliders{ grid-template-columns:1fr; padding:.9rem 1rem .5rem; }
}
@media (prefers-reduced-motion: reduce){ .ob-cv{ scroll-behavior:auto; } }

/* ══════════ OPEN CLIMATE - the live workflow demo, inside MORE DETAIL ══════════ */
.oc-cv{ height:clamp(300px,46vh,480px); }
.oc-cmd{ font-family:ui-monospace,Consolas,monospace; letter-spacing:.06em; text-transform:none; }
.oc-sites button{ font-size:9px; }
.oc-legend{
  position:absolute; left:14px; bottom:12px; display:flex; align-items:center; gap:.6em;
  font-size:8.5px; letter-spacing:.14em; color:var(--w-ink2); font-weight:700;
}
.oc-legend i{ width:120px; height:8px; display:block; border:1px solid rgba(16,16,16,.25); }
@media (max-width:620px){
  .oc-cv{ height:clamp(240px,38vh,340px); }
  .oc-legend i{ width:80px; }
}

/* ==========================================================================
   MOBILE FIT - phones only (<=560px). The landing intro is one screen and
   cannot scroll, so on a phone the whole block (name, credentials, focus
   cards, CTAs) must genuinely FIT: compress, never scale - scaled text goes
   unreadable before it goes small enough. Last in the file on purpose: these
   win over every earlier top/transform rule, including the max-height desktop
   rules above, which assume a wide window. */
@media (max-width:560px){
  /* the fixed head sheds its sub-line; the h1 below says the same thing */
  .gal-role{ display:none; }
  .gal-name{ font-size:11px; }

  .cluster.intro .c-intro{
    top:40%; transform:translate(-50%,-50%); width:94vw;
  }
  .cluster.intro h1{ font-size:clamp(2.5rem,12.5vw,3.5rem); line-height:.92; }
  .cluster.intro .i-sub{ margin-top:.7rem; font-size:11.5px; letter-spacing:.22em; }

  .i-creds{ margin-top:.9rem; }
  .i-cred{ padding:.5rem .75rem; }
  .i-cred b{ font-size:15.5px; }
  .i-cred span{ font-size:14px; margin-top:.15rem; }
  .i-cred-go{ margin-top:.4rem; font-size:11px; padding:.25em .65em; }

  .i-focus{ margin-top:.9rem; }
  .i-focus-h{ margin-bottom:.5rem; font-size:12px; }
  .i-focus-row{ gap:.6rem; }
  .i-foc{ padding:.15rem 0 .15rem .75rem; }
  .i-foc.is-live{ padding:.5rem .75rem .55rem; }
  .i-foc b{ font-size:14.5px; }
  .i-foc-btn{ font-size:11px; padding:.3em .65em; }
  /* teaser, not essay: two lines each on a phone; the full text lives on
     desktop and inside the projects */
  .i-foc span{
    margin-top:.3rem; font-size:14px; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  .i-ctas{ display:flex; justify-content:center; gap:.6rem; margin-top:1.1rem; }
  .i-ctas a{ font-size:14px; padding:.75em 1.2em; white-space:nowrap; }

  #hero-help{ font-size:8.5px; letter-spacing:.12em; padding:.5em .9em; }
}

/* short phones: detail lines tighten to one line each, the announcement pill
   and the two unlinked focus teasers give way - names still carry the message */
@media (max-width:560px) and (max-height:720px){
  .cluster.intro .c-intro{ top:42%; }
  .i-cred span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .i-cred-go{ display:none; }
  .i-foc:not(.is-live) span{ display:none; }
  .i-foc span{ -webkit-line-clamp:1; }
}