/* ===========================================================
   KILN — the kiln door (mobile navigation)
   Loaded by EVERY page, including index.html. The homepage is
   otherwise self-contained; this is the one shared chrome layer,
   so the menu cannot drift between the homepage and a case study.

   Every colour is written as rgba(var(--token), n) WITH a literal
   fallback, because index.html's inline :root historically carried
   no channel tokens. The fallbacks are the untinted kiln values;
   on a themed project page the tokens win and the door takes that
   project's palette.
   =========================================================== */

/* ---------- the handle ----------------------------------------------------
   Lives inside .bar nav, so it inherits the bar's padding and stuck state.
   .bar nav a:not(.cta){display:none} only matches <a>, so a <button> here
   survives the mobile nav cull untouched. */
.mtoggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 2px 9px 12px;
  min-height:44px;                       /* tap floor */
  background:none;
  border:0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ash-dim);
  transition:color .25s var(--ease);
}
.mtoggle:hover,.mtoggle:focus-visible{color:var(--ash)}

/* two hairlines, not a hamburger: the same 1px ember rule the rest of the
   instrument panel is drawn with. They part when the door is open. */
.mtoggle .mt-b{position:relative;display:block;width:20px;height:9px}
.mtoggle .mt-b i{
  position:absolute;left:0;right:0;height:1px;
  background:currentColor;
  transition:transform .42s var(--ease),background .42s var(--ease);
}
.mtoggle .mt-b i:first-child{top:0}
.mtoggle .mt-b i:last-child{bottom:0}
.mtoggle[aria-expanded="true"] .mt-b i{background:var(--ember)}
.mtoggle[aria-expanded="true"] .mt-b i:first-child{transform:translateY(4px) rotate(45deg)}
.mtoggle[aria-expanded="true"] .mt-b i:last-child{transform:translateY(-4px) rotate(-45deg)}

@media(max-width:760px){.mtoggle{display:inline-flex}}

/* ---------- the door ------------------------------------------------------
   z-index 210: above .bar (90), the HUD and therm (92) and #sparkfx (94);
   below #wipe (250) and #preload (300), so navigating from an open door
   still plays the kiln wipe over it and the preloader still covers all. */
.kmenu{
  position:fixed;
  inset:0;
  z-index:210;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:96px 22px 30px;
  background:rgba(var(--char3-rgb,14,11,6),.985);
  /* rises from the foot, like a kiln door lifting. Same device as #wipe,
     which travels the other way — so entering and leaving read as one system. */
  clip-path:inset(100% 0 0 0);
  transition:clip-path .58s var(--ease);
}
.kmenu[hidden]{display:none}
.kmenu.open{clip-path:inset(0 0 0 0)}

/* the heat still bleeding through the door */
.kmenu::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(96% 58% at 12% 104%,
    rgba(var(--ember-rgb,226,99,42),.20),
    rgba(var(--ember-hi-rgb,240,138,60),.05) 42%,
    rgba(var(--char-rgb,20,16,9),0) 70%);
}

/* the leading edge of the opening door */
.km-edge{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    rgba(var(--ember-rgb,226,99,42),0),
    var(--ember) 22%,
    var(--ember-hi) 52%,
    rgba(var(--ember-rgb,226,99,42),0));
  opacity:0;
  transition:opacity .3s var(--ease);
}
.kmenu.open .km-edge{opacity:.9}

.km-in{position:relative;z-index:1;width:100%}

/* ---------- the index ---------- */
.km-nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.km-nav a{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(34px,11.5vw,60px);
  line-height:1;
  letter-spacing:-.015em;
  color:var(--ash);
  /* each slat settles after the door is up */
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .55s var(--ease),color .25s var(--ease);
  transition-delay:var(--d,0s);
}
.kmenu.open .km-nav a{opacity:1;transform:none}
.km-nav a b{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.2em;
  color:var(--ash-dim);
  flex:0 0 auto;
  transition:color .25s var(--ease);
}
.km-nav a:hover,.km-nav a:focus-visible{color:var(--ember-hi)}
.km-nav a:hover b,.km-nav a:focus-visible b{color:var(--ember)}

/* the current page is stated, not guessed at */
.km-nav a[aria-current="page"]{color:var(--ember)}
.km-nav a[aria-current="page"] b{color:var(--ember)}

/* the ask carries the ember, exactly as it does in the bar */
.km-nav a.km-cta{color:var(--ember)}
.km-nav a.km-cta b{color:var(--ember)}

/* ---------- the readout ----------------------------------------------------
   The temperature is written from the page's own scroll-progress module —
   the same number the thermometer reads. It holds real information or it
   does not ship. */
.km-foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:28px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ash-dim);
  opacity:0;
  transition:opacity .5s var(--ease);
  transition-delay:.34s;
}
.kmenu.open .km-foot{opacity:1}
.km-foot .km-t b{color:var(--ember);font-weight:400;font-style:normal}
.km-foot .km-mail{color:var(--ash-dim);text-transform:none;letter-spacing:.04em;transition:color .25s var(--ease)}
.km-foot .km-mail:hover{color:var(--ash)}

/* ---------- reduced motion ----------------------------------------------
   The door is a state change, not a performance: it is simply there. */
@media(prefers-reduced-motion:reduce){
  .kmenu,.km-nav a,.km-foot,.km-edge,.mtoggle .mt-b i{transition:none;transition-delay:0s}
  .kmenu.open .km-nav a{transform:none}
}