/* ==========================================================================
   chrome — boot, top bar, the sound switch, menu
   ========================================================================== */

/* ── boot ──────────────────────────────────────────────────────────────── */

.boot {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  background: var(--pitch);
  padding: var(--gut);
}

.boot__inner { align-self: center; display: grid; justify-items: center; gap: clamp(1rem, 3vh, 2rem); }

.boot__wave { width: min(70vw, 600px); height: auto; }

.boot__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* pathLength normalises the path so one dash value drives it whatever the
     geometry is. */
  stroke-linecap: round;
}

.boot__word {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  opacity: 0;
}

.boot__bar {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* ── top bar ───────────────────────────────────────────────────────────── */

.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(0.85rem, 2.1vh, 1.4rem) var(--gut);
}

.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--pitch) 0%, rgba(14, 21, 18, 0.9) 55%, rgba(14, 21, 18, 0) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--release);
}

.bar.is-stuck::before { opacity: 1; }

.bar__mark { display: inline-flex; align-items: baseline; gap: 0.5em; }

.bar__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bar__state { display: none; }
@media (min-width: 980px) { .bar__state { display: block; } }

.bar__right { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.8rem); }

/* ── the sound switch ──────────────────────────────────────────────────────
   Present in the chrome on every screen. Anything that can make noise has to
   be silenceable from wherever the reader happens to be, not only from the
   section that started it.

   The four bars are a level meter at rest and an animation when live. They
   scale on Y — never height — so an idle page is not relaying out four
   elements sixty times a second.
   ------------------------------------------------------------------------ */

.sound {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-3);
  transition: color 0.4s var(--release);
}

.sound:hover { color: var(--cream); }
.sound[aria-pressed="true"] { color: var(--signal); }

.sound__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 18px; height: 14px;
}

.sound__bars b {
  flex: 1;
  height: 100%;
  background: currentColor;
  transform: scaleY(0.22);
  transform-origin: bottom;
  transition: transform 0.35s var(--attack);
}

.sound[aria-pressed="true"] .sound__bars b { animation: vu 0.9s var(--release) infinite; }
.sound[aria-pressed="true"] .sound__bars b:nth-child(2) { animation-delay: 0.12s; }
.sound[aria-pressed="true"] .sound__bars b:nth-child(3) { animation-delay: 0.26s; }
.sound[aria-pressed="true"] .sound__bars b:nth-child(4) { animation-delay: 0.06s; }

@keyframes vu {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

.sound__label i { font-style: normal; color: currentColor; }
@media (max-width: 560px) { .sound__label { display: none; } }

/* Under reduced motion the bars stop dancing but still report state, so the
   control never becomes ambiguous. */
@media (prefers-reduced-motion: reduce) {
  .sound[aria-pressed="true"] .sound__bars b { animation: none; transform: scaleY(0.85); }
}

.menubtn { display: inline-flex; align-items: center; }

.menubtn__label {
  position: relative;
  display: block;
  height: 1.45em;
  min-width: 5ch;
  overflow: hidden;
  text-align: right;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Height and line-height 1.45, not 1, so the mask does not shear descenders,
   and a min-width from the longer word so the bar does not jump on swap. */
.menubtn__label i {
  display: block;
  font-style: normal;
  line-height: 1.45;
  transition: transform 0.5s var(--attack);
}

.menubtn__label i:last-child { position: absolute; top: 100%; right: 0; }
body.menu-open .menubtn__label i { transform: translateY(-100%); }

/* ── menu ──────────────────────────────────────────────────────────────── */

.menu {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  padding: clamp(5rem, 13vh, 8rem) var(--gut) clamp(1.5rem, 4vh, 3rem);
  visibility: hidden;
}

body.menu-open .menu { visibility: visible; }

.menu__sheet {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pitch-2);
  border-bottom: 1px solid var(--signal);
  transform: scaleY(0);
  transform-origin: top;
}

.menu__nav { align-self: center; width: 100%; }
.menu__list { display: grid; }
.menu__list li { overflow: hidden; border-bottom: 1px solid var(--line); }

.menu__list a {
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.5rem, 1.7vh, 0.95rem) 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transform: translateY(115%);
  transition: color 0.4s var(--release);
}

/* The label slides; the number stays. The anchor's transform belongs to the
   open/close stagger, so the hover shift lives on the span. */
.menu__list a span { display: inline-block; transition: transform 0.5s var(--attack); }
.menu__list a:hover span { transform: translateX(0.5rem); }
.menu__list a:hover { color: var(--signal); }

.menu__list a em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  color: var(--cream-4);
  transition: color 0.4s var(--release);
}

.menu__list a:hover em { color: var(--signal); }

@media (max-width: 620px) { .menu__list a { grid-template-columns: 2.6rem 1fr; } }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  opacity: 0;
}