/* YEENYUS — Designer Worktable
   Architect drafting table × video-game crafting bench
   Chambers whoosh horizontally · solid hex emblem ticks as one object */

:root {
  --void: #0c0e11;
  --slate: #15181d;
  --slate-lift: #1e232b;
  --silver: #a8b0bd;
  --silver-hot: #e8eaef;
  --line: rgba(232, 234, 239, 0.12);

  --mint: #8affcf;
  --mint-deep: #3faa7e;
  --lavender: #c4a3ff;
  --lavender-deep: #8468e0;
  --aqua: #7aeeff;
  --aqua-deep: #2f9cb8;
  --blush: #e48488;
  --blush-deep: #a85458;
  --orange: #ffaa5c;
  --orange-deep: #c46628;
  --yellow: #ffe066;
  --yellow-deep: #b88620;

  /* worktable */
  --blueprint: rgba(110, 232, 255, 0.07);
  --blueprint-major: rgba(110, 232, 255, 0.13);
  --vellum: #dfe3ea;
  --vellum-ink: #1c2430;
  --tape: rgba(236, 232, 210, 0.5);

  --accent: var(--mint);
  --accent-deep: var(--mint-deep);

  --nav-h: 7.5rem; /* fallback; JS syncs from live nav height */
  --dock-h: 2.6rem; /* fallback; JS syncs from brand dock */
  --nav-gap: 4px;

  /* shared chamber shell — plates line up with tape across pages */
  --shell-x: clamp(0.8rem, 2.4vw, 1.6rem);
  --shell-nav-gap: 0.4rem;
  --shell-top: 0.4rem;
  --shell-bottom: calc(var(--dock-h) + 0.65rem);
  --plate-max: 72rem;
  --plate-pad: clamp(1rem, 2.4vw, 1.6rem);
  --tape-w: 92px;
  --tape-h: 26px;
  --tape-overhang: 12px;
  --mode-ms: 420ms;
  --spin-ms: 520ms;
  --font-display: "Syne", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-etch: "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;
  --ease-transit: cubic-bezier(0.22, 0.9, 0.18, 1);
  --ease-rocker: cubic-bezier(0.22, 1, 0.36, 1);

  /* game-UI corner notch */
  --notch: polygon(
    0 8px, 8px 0,
    calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px)
  );
}

@media (min-width: 1100px) {
  :root {
    --nav-gap: 4px;
  }
}

.hub[data-face="0"] {
  --accent: var(--mint);
  --accent-deep: var(--mint-deep);
  --face-i: 0;
}
.hub[data-face="1"] {
  --accent: var(--aqua);
  --accent-deep: var(--aqua-deep);
  --face-i: 1;
}
.hub[data-face="2"] {
  --accent: var(--blush);
  --accent-deep: var(--blush-deep);
  --face-i: 2;
}
.hub[data-face="3"] {
  --accent: var(--lavender);
  --accent-deep: var(--lavender-deep);
  --face-i: 3;
}
.hub[data-face="4"] {
  --accent: var(--yellow);
  --accent-deep: var(--yellow-deep);
  --face-i: 4;
}
.hub[data-face="5"] {
  --accent: var(--orange);
  --accent-deep: var(--orange-deep);
  --face-i: 5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body,
.landing,
.home-mount,
.home-mount__body,
.music-mount,
.music-mount__body,
.design-mount,
.design-mount__body,
.writing-mount,
.writing-mount__body,
.resume-mount,
.resume-mount__body,
.chamber,
.resume-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--silver-hot);
  font-family: var(--font-display);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
  fill: none;
  color: inherit;
}

.hub {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 40% at 30% 12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 35% at 78% 80%, rgba(110, 232, 255, 0.06), transparent 50%),
    linear-gradient(160deg, #141a22, #0a0d12 72%);
}

/* ─── NAV · rubber workbench strip (edge-to-edge) ─── */
.nav {
  --speaker-beat: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nav-gap);
  padding: calc(0.22rem + env(safe-area-inset-top) + 4px) 4px 4px;
  box-sizing: border-box;
  /* soft-touch rubber mat */
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 255, 255, 0.06), transparent 55%),
    repeating-radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 0 0.6px, transparent 0.8px 3px),
    linear-gradient(180deg, #2a3038 0%, #1a1e24 48%, #12151a 100%);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 50%, #0a0c10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 10px rgba(0, 0, 0, 0.32),
    0 8px 20px rgba(0, 0, 0, 0.38);
  transition: border-bottom-color 0.4s ease;
}

.nav__side,
.nav-skin-switch,
.nav__chassis,
.nav__bay,
.nav__brand {
  display: none !important;
}

/* Rocker + deck flanked by speakers (height tracks controls; width scales) */
.nav__rack {
  --speaker-size: auto;
  --speaker-w-scale: 1;
  display: flex;
  align-items: stretch;
  gap: var(--nav-gap);
  width: 100%;
  min-width: 0;
}

.nav__controls {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nav-gap);
  min-width: 0;
}

.nav__speaker {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;
  width: calc(var(--speaker-size) * var(--speaker-w-scale, 1));
  height: var(--speaker-size);
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #080a0d;
  background: linear-gradient(180deg, #0a0d12, #141820);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav__speaker-well {
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  background: #06080c;
  box-shadow:
    inset 0 5px 14px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.nav__speaker-grille {
  position: absolute;
  inset: 7px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 4px,
      color-mix(in srgb, var(--accent) 24%, transparent) 4px 5px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 4px,
      color-mix(in srgb, var(--accent) 14%, transparent) 4px 5px
    ),
    radial-gradient(circle, #1c2128 0 1px, transparent 1.2px),
    #0c0f14;
  background-size: auto, auto, 4px 4px, auto;
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  pointer-events: none;
  transform-origin: center;
}

.nav__speaker-glow {
  position: absolute;
  z-index: 1;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 48%, transparent) 0%,
    color-mix(in srgb, var(--accent) 16%, transparent) 42%,
    transparent 70%
  );
  filter: blur(1px);
  opacity: 0.45;
  pointer-events: none;
}

.nav__speaker-cone {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(58%, 3.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.18), transparent 22%),
    radial-gradient(
      circle,
      #3a4048 0 18%,
      #1a1e24 20% 34%,
      #5a616a 36% 48%,
      #12161b 50% 68%,
      #2a3038 70% 86%,
      #0e1116 88%
    );
  border: 1px solid #6a727c;
  box-shadow:
    0 0 0 2px #0a0c10,
    0 0 18px color-mix(in srgb, var(--accent) 20%, transparent),
    inset 0 0 14px rgba(0, 0, 0, 0.85),
    inset 0 2px 3px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  transform: scale(0.98);
}

.nav__speaker-cone i {
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a4048, #080a0d 70%);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.14),
    0 0 6px rgba(0, 0, 0, 0.9),
    0 0 8px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Accent ring — matches cone diameter, strobes with the beat */
.nav__speaker-ring {
  position: absolute;
  z-index: 3;
  width: min(58%, 3.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 62%, #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: 0.22;
  pointer-events: none;
  transition:
    opacity 0.05s linear,
    border-color 0.35s ease,
    box-shadow 0.05s linear;
}

.nav__speaker-screw {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a828c, #2a3038 55%, #12161b);
  border: 1px solid #1a1e24;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.nav__speaker-screw::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 42%, #0a0c10 44% 56%, transparent 58%);
}

.nav__speaker-screw--tl { top: 3px; left: 3px; }
.nav__speaker-screw--tr { top: 3px; right: 3px; }
.nav__speaker-screw--bl { bottom: 3px; left: 3px; }
.nav__speaker-screw--br { bottom: 3px; right: 3px; }

/* Beat strobe — both speakers in sync */
.nav.is-playing .nav__speaker-glow {
  opacity: calc(0.35 + var(--speaker-beat) * 0.65);
  transform: scale(calc(0.9 + var(--speaker-beat) * 0.22));
  transition: opacity 0.05s linear, transform 0.05s linear;
}

.nav.is-playing .nav__speaker-grille {
  filter: brightness(calc(0.92 + var(--speaker-beat) * 0.28));
  transform: scaleY(calc(1 + var(--speaker-beat) * 0.04));
  transition: filter 0.05s linear, transform 0.05s linear;
}

.nav.is-playing .nav__speaker-cone {
  transform: scale(calc(0.96 + var(--speaker-beat) * 0.12));
  filter: brightness(calc(1 + var(--speaker-beat) * 0.85)) saturate(calc(1 + var(--speaker-beat) * 0.3));
  transition: transform 0.05s linear, filter 0.05s linear;
}

.nav.is-playing .nav__speaker-cone i {
  transform: scale(calc(1 + var(--speaker-beat) * 0.18));
  transition: transform 0.05s linear;
}

.nav.is-playing .nav__speaker-ring {
  opacity: calc(0.28 + var(--speaker-beat) * 0.72);
  border-color: color-mix(in srgb, var(--accent) 45%, #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 calc(8px + var(--speaker-beat) * 16px) color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 0 calc(4px + var(--speaker-beat) * 8px) color-mix(in srgb, var(--accent) 30%, transparent);
}

.nav.is-playing.is-on-beat .nav__speaker-glow {
  opacity: 1;
}

.nav.is-playing.is-on-beat .nav__speaker-ring {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 30%, #fff);
}

/* Rubber inset wells for rocker + deck */
.nav__rocker {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  margin: 0;
  --rocker-pad: 3px;
  --rocker-gap: 3px;
  border: 1px solid #0a0c10;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #0e1116, #181c22);
  padding: var(--rocker-pad);
  gap: var(--rocker-gap);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.35s ease;
}

.nav__glider {
  position: absolute;
  top: var(--rocker-pad);
  bottom: var(--rocker-pad);
  left: var(--rocker-pad);
  width: calc(
    (100% - 2 * var(--rocker-pad) - var(--rocker-gap) * (var(--tabs, 4) - 1)) / var(--tabs, 4)
  );
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 82%, #fff),
    color-mix(in srgb, var(--accent) 72%, var(--accent-deep))
  );
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #fff);
  border-radius: 4px;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: transform var(--mode-ms) var(--ease-rocker), background 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease;
  z-index: 0;
  pointer-events: none;
  transform: translateX(calc(var(--nav-i, 0) * (100% + var(--rocker-gap))));
}

.phase {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.14rem;
  min-width: 0;
  min-height: 2.75rem;
  color: color-mix(in srgb, var(--silver-hot) 52%, transparent);
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.35vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.2rem 0.32rem;
  border-radius: 4px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.phase .icon {
  flex: 0 0 auto;
  width: clamp(14px, 2.1vw, 18px);
  height: clamp(14px, 2.1vw, 18px);
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.phase__label {
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.phase__key {
  display: none;
}

.phase.is-active {
  color: #1a1c20;
  text-shadow: none;
}

.phase.is-active .icon {
  opacity: 1;
  color: #1a1c20;
  transform: none;
}

.phase:hover:not(.is-active) {
  color: var(--silver-hot);
}

.phase:hover:not(.is-active) .icon {
  opacity: 1;
}

.nav__meter {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 55%, var(--silver));
  min-width: 3.2rem;
  text-align: right;
}

.nav__deck {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0.12rem, 0.6vw, 0.32rem);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0.2rem 0.32rem;
  border: 1px solid #0a0c10;
  border-radius: 8px;
  background: linear-gradient(180deg, #0e1116, #181c22);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav__deck.is-playing {
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

.deck__btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(1.35rem, 2.8vw, 1.85rem);
  height: clamp(1.35rem, 2.8vw, 1.85rem);
  color: color-mix(in srgb, var(--silver-hot) 58%, transparent);
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.deck__btn .icon {
  width: clamp(10px, 1.8vw, 14px);
  height: clamp(10px, 1.8vw, 14px);
}

.deck__btn:hover {
  color: var(--silver-hot);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.nav__deck.is-playing [data-deck-play] {
  color: #061018;
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 80%, #fff);
}

.nav__deck.is-muted [data-deck-mute] {
  color: var(--blush);
}

.deck__vol {
  display: flex;
  align-items: center;
  flex: 0 1 4.5rem;
  width: clamp(2.5rem, 8vw, 5rem);
  min-width: 2.2rem;
  margin: 0 0.1rem;
}

.deck__vol input[type="range"] {
  width: 100%;
  height: 4px;
  appearance: none;
  background: color-mix(in srgb, var(--accent) 18%, #1a2030);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.deck__vol input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
  border: 1px solid #fff;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
}

.deck__vol input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
  border: 1px solid #fff;
}

.deck__now {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  margin: 0;
}

.deck__select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.22rem 1.2rem 0.22rem 0.35rem;
  font-family: var(--font-mono);
  font-size: clamp(0.42rem, 1.1vw, 0.55rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
  background: color-mix(in srgb, #05070b 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 4px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--silver) 50%),
    linear-gradient(135deg, var(--silver) 50%, transparent 50%);
  background-position:
    calc(100% - 9px) calc(50% - 1px),
    calc(100% - 5px) calc(50% - 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  outline: none;
}

.deck__select:hover,
.deck__select:focus {
  color: var(--silver-hot);
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

.deck__select option {
  background: #0c1018;
  color: var(--silver-hot);
  text-transform: none;
  letter-spacing: 0.02em;
}

.nav__deck.is-playing .deck__select {
  color: var(--silver-hot);
}

.nav__deck .nav__meter {
  margin-left: 0.1rem;
  padding-left: 0.35rem;
  border-left: 1px solid var(--line);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .phase__label {
    display: block;
    font-size: clamp(0.42rem, 2vw, 0.55rem);
    letter-spacing: 0.05em;
  }

  .phase {
    gap: 0.12rem;
    padding: 0.32rem 0.15rem;
    min-height: 2.55rem;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-gap: 4px;
    --shell-x: clamp(1rem, 5vw, 1.5rem);
  }

  .nav {
    padding: calc(env(safe-area-inset-top) + 4px) 4px 4px;
  }

  /* Speakers: same height, 66% width → more room for face buttons */
  .nav__rack {
    --speaker-w-scale: 0.66;
  }

  .nav__speaker {
    border-radius: 7px;
  }

  .nav__rocker,
  .nav__deck {
    border-radius: 7px;
  }

  .nav__rocker {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav__meter,
  .deck__vol,
  .nav__deck [data-deck-stop] {
    display: none;
  }

  .nav__deck {
    gap: 2px;
    padding: 2px 3px;
  }

  .deck__btn {
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 3px;
  }

  .deck__btn .icon {
    width: 9px;
    height: 9px;
  }

  .deck__now {
    flex: 1 1 auto;
    min-width: 4.5rem;
  }

  .deck__select {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    padding: 0.32rem 1.15rem 0.32rem 0.4rem;
    color: var(--silver-hot);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    background-color: color-mix(in srgb, #05070b 82%, transparent);
  }

  .phase {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.4rem 0.06rem;
    min-height: 2.75rem;
  }

  .phase .icon {
    width: 15px;
    height: 15px;
  }

  .phase__label {
    font-size: clamp(0.4rem, 2.4vw, 0.52rem);
  }

  .nav__speaker-cone {
    width: min(78%, 1.65rem);
  }

  .nav__speaker-screw {
    width: 4px;
    height: 4px;
  }

  .nav__speaker-well {
    inset: 3px;
  }

  .nav__speaker-grille {
    inset: 5px;
  }
}

/* ─── STAGE / RAIL ─── */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
  /* vertical scroll in chambers; horizontal face-swipe handled in JS */
  touch-action: pan-y;
}

.aurora {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(ellipse 45% 35% at 80% 70%, color-mix(in srgb, var(--aqua) 10%, transparent), transparent 55%);
  transition: background 0.7s ease;
  animation: auroraDrift 18s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 2%, 0) scale(1.05);
  }
}

.fog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, rgba(7, 9, 13, 0.55), transparent 18%, transparent 82%, rgba(7, 9, 13, 0.55));
  opacity: 0.65;
}

.rail {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(calc(var(--i, 0) * -100%), 0, 0);
  transition: transform var(--spin-ms) var(--ease-transit);
  will-change: transform;
}

/* Chamber = drafting table surface: light section wash behind the work mat */
.chamber {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background:
    radial-gradient(ellipse 70% 55% at 38% 18%, color-mix(in srgb, var(--accent) 16%, rgba(255, 244, 214, 0.08)), transparent 58%),
    radial-gradient(ellipse 50% 40% at 72% 70%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    linear-gradient(var(--blueprint-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-major) 1px, transparent 1px),
    linear-gradient(var(--blueprint) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint) 1px, transparent 1px),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 14%, #1a2430) 0%,
      color-mix(in srgb, var(--accent) 7%, #121a24) 42%,
      #0a1018 100%
    );
  background-size:
    auto,
    auto,
    96px 96px,
    96px 96px,
    16px 16px,
    16px 16px,
    auto;
}

/* table edge is now the brand dock — no chamber faux-rail */
.chamber::after {
  display: none;
}

/* ─── Bottom brand dock — accent wordmark strip ─── */
.brand-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
  padding: 0.22rem clamp(0.55rem, 2vw, 1.25rem) calc(0.22rem + env(safe-area-inset-bottom));
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 120% at 50% 120%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    repeating-radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 0 0.6px, transparent 0.8px 3px),
    linear-gradient(0deg, #12161c 0%, #1c2028 55%, #2a3038 100%);
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, #0a0c10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 -10px 24px rgba(0, 0, 0, 0.35);
  transition: border-top-color 0.35s ease, color 0.35s ease;
}

.brand-dock__kicker {
  align-self: center;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 1.2vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.92;
  line-height: 1;
}

.brand-dock__row {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
  align-items: center;
  column-gap: 0.65rem;
  width: 100%;
  min-width: 0;
  color: var(--accent);
  transition: color 0.35s ease;
}

.brand-dock__rail {
  height: 3px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--accent) 0 10px,
      #0a0c10 10px 18px
    );
  opacity: 0.9;
  transition: background 0.35s ease;
}

.brand-dock__rail--flip {
  transform: scaleX(-1);
}

.brand-dock__svg {
  display: block;
  width: clamp(14rem, 52vw, 22rem);
  height: auto;
  max-width: 100%;
  overflow: visible;
  color: inherit;
  opacity: 0.95;
}

/* ─── Shared taped plate (Home sheet / Resume board language) ─── */
.home-mount,
.music-mount,
.design-mount,
.writing-mount,
.resume-mount {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--nav-h) 0 0;
  overflow: hidden;
}

.home-mount__body,
.music-mount__body,
.design-mount__body,
.writing-mount__body,
.resume-mount__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--shell-top) var(--shell-x) var(--shell-bottom);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* soft face tint behind the plate — hub/stage chrome stays dark */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 11%, transparent),
      color-mix(in srgb, var(--accent) 4%, transparent) 55%,
      transparent 100%
    );
}

.plate,
.sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--plate-max);
  min-height: calc(100% - 0.25rem);
  margin: var(--tape-overhang) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
  padding: var(--plate-pad);
  color: var(--silver-hot);
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(168deg, #131b28 0%, #0e1420 55%, #0b0f18 100%);
  background-size: 24px 24px, 24px 24px, auto;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(110, 232, 255, 0.22));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 90px color-mix(in srgb, var(--accent) 5%, transparent);
}

.plate::before,
.sheet::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(110, 232, 255, 0.18));
  pointer-events: none;
  z-index: 0;
}

.plate > *:not(.plate__tape),
.sheet > *:not(.sheet__tape) {
  position: relative;
  z-index: 1;
}

.plate__tape,
.sheet__tape {
  position: absolute;
  width: var(--tape-w);
  height: var(--tape-h);
  z-index: 3;
  background: linear-gradient(180deg, rgba(240, 235, 214, 0.5), rgba(226, 220, 196, 0.38));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  opacity: 0.85;
  pointer-events: none;
}

.plate__tape--tl,
.sheet__tape--tl {
  top: calc(-1 * var(--tape-overhang));
  left: 7%;
  transform: rotate(-6deg);
}

.plate__tape--tr,
.sheet__tape--tr {
  top: calc(-1 * var(--tape-overhang));
  right: 8%;
  transform: rotate(5deg);
}

.plate__tape--bl,
.sheet__tape--bl {
  bottom: calc(-1 * var(--tape-overhang));
  left: 14%;
  transform: rotate(4deg);
}

.hub.is-whooshing .rail {
  filter: saturate(1.08) brightness(1.04);
}

.hub.is-whooshing .chamber:not(.is-active) {
  filter: blur(1.5px);
}

/* Locked chamber = unclaimed schematic slot */
.chamber__pad {
  position: absolute;
  inset: 0;
  padding: calc(var(--nav-h) + 1.35rem) 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
}

.chamber__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
}

.chamber__canvas {
  position: relative;
  flex: 1;
  margin-top: 1rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 3%, rgba(7, 9, 13, 0.35));
  clip-path: var(--notch);
}

/* corner brackets */
.chamber__canvas::before,
.chamber__canvas::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  pointer-events: none;
}

.chamber__canvas::before {
  top: 10px;
  left: 10px;
  border-right: 0;
  border-bottom: 0;
}

.chamber__canvas::after {
  bottom: 10px;
  right: 10px;
  border-left: 0;
  border-top: 0;
}

.chamber__lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}

.chamber__lock .icon {
  width: 34px;
  height: 34px;
  color: color-mix(in srgb, var(--accent) 70%, var(--silver));
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 35%, transparent));
}

.chamber__lock-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-hot);
}

.chamber__lock-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 55%, var(--silver));
}

/* ─── WHOOSH STREAK ─── */
.streak {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    color-mix(in srgb, var(--accent) 8%, transparent) 42%,
    rgba(255, 255, 255, 0.22) 50%,
    color-mix(in srgb, var(--aqua) 12%, transparent) 58%,
    transparent 80%
  );
  mix-blend-mode: screen;
}

.hub.is-whooshing .streak {
  animation: streakWhoosh var(--spin-ms) var(--ease-transit) both;
}

.hub[data-dir="-1"].is-whooshing .streak {
  animation-name: streakWhooshRev;
}

@keyframes streakWhoosh {
  0% {
    opacity: 0;
    transform: translate3d(-40%, 0, 0) skewX(-12deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(40%, 0, 0) skewX(-12deg);
  }
}

@keyframes streakWhooshRev {
  0% {
    opacity: 0;
    transform: translate3d(40%, 0, 0) skewX(12deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-40%, 0, 0) skewX(12deg);
  }
}

.hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + 0.45rem);
  transform: translateX(-50%);
  z-index: 29;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 55%, var(--silver));
  pointer-events: none;
  text-align: center;
  transition: color 0.3s ease, opacity 0.4s ease, bottom 0.25s ease;
}

/* BACKSIDE — mirrored service panel (keep scaleX(-1)) */
.backside {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255, 176, 64, 0.06), transparent 65%),
    rgba(8, 10, 14, 0.92);
  backdrop-filter: blur(14px);
}

.backside[hidden] {
  display: none !important;
}

.backside__chassis {
  width: min(92vw, 28rem);
  padding: 0.75rem;
  border: 12px solid color-mix(in srgb, var(--accent) 48%, #2a3038);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.022) 0 1px,
      rgba(0, 0, 0, 0.028) 1px 3px
    ),
    linear-gradient(180deg, #4a5058 0%, #2a3038 40%, #1a1c24 100%);
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.18)),
    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    inset 0 10px 22px rgba(0, 0, 0, 0.4),
    0 24px 60px rgba(0, 0, 0, 0.65);
  transform: scaleX(-1);
}

.backside__plate {
  padding: 1.45rem 1.35rem 1.35rem;
  background: linear-gradient(180deg, #3a4048, #1a1c24);
  border: 2px solid #5a6068;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 176, 64, 0.1);
}

.backside__kicker {
  margin: 0 0 0.7rem;
  font-family: var(--font-etch, var(--font-mono));
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 -1px 0 rgba(0, 0, 0, 0.7);
}

.backside__title {
  margin: 0;
  font-family: var(--font-etch, var(--font-mono));
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 228, 216, 0.92);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1),
    0 -1px 0 rgba(0, 0, 0, 0.75);
}

.backside__copy {
  margin: 0.95rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--silver);
}

.backside__meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.15rem 0 0;
  padding: 0.55rem 0.7rem;
  background: #12151c;
  border: 1px solid #5a6068;
  border-top-color: #1a1c24;
  border-bottom-color: #7a8088;
  border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}

.backside__meter-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}

.backside__meter strong {
  font-family: var(--font-etch, var(--font-mono));
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.backside__close {
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.72rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 228, 216, 0.78);
  background: linear-gradient(180deg, #5a6068 0%, #3a4048 55%, #2a3038 100%);
  border: 1px solid #6a7078;
  border-top-color: #7a8088;
  border-bottom-color: #1a1c24;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 0 #0a0c10;
  transition: color 0.15s ease, filter 0.15s ease, transform 0.1s ease;
}

.backside__close:hover {
  color: #fff8e8;
  filter: brightness(1.08);
}

.backside__close:active {
  transform: translateY(2px);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55);
}

.hub.is-tour-complete .brand-dock {
  border-top-color: color-mix(in srgb, var(--accent) 72%, #0a0c10);
}

@media (prefers-reduced-motion: reduce) {
  .nav.is-playing .nav__speaker-glow,
  .nav.is-playing .nav__speaker-grille,
  .nav.is-playing .nav__speaker-cone,
  .nav.is-playing .nav__speaker-cone i,
  .nav.is-playing .nav__speaker-ring {
    animation: none;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 0.55;
  }

  .rail,
  .streak,
  .aurora {
    transition: none !important;
    animation: none !important;
  }
  .hub.is-whooshing .chamber:not(.is-active) {
    filter: none;
  }
}

/* ─── Shared chamber subnav (Design / Writing) — thin rubber rocker strip ─── */
.subnav {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.14rem var(--shell-x);
  margin: 0;
  z-index: 5;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 255, 255, 0.07), transparent 55%),
    repeating-radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 0 0.6px, transparent 0.8px 3px),
    linear-gradient(180deg, #2e343c 0%, #1c2028 48%, #12161c 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 52%, #0a0c10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.28);
}

.subnav__well {
  --sub-pad: 3px;
  --sub-gap: 3px;
  --sub-tabs: 3;
  --sub-i: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--sub-tabs), minmax(0, 1fr));
  width: min(100%, 28rem);
  min-width: 0;
  margin-inline: auto;
  padding: var(--sub-pad);
  gap: var(--sub-gap);
  border: 1px solid #080a0d;
  border-radius: 8px;
  background: linear-gradient(180deg, #0c0f14, #171b22);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.78),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 1px 0 rgba(255, 255, 255, 0.06);
}

.subnav__glider {
  position: absolute;
  top: var(--sub-pad);
  bottom: var(--sub-pad);
  left: var(--sub-pad);
  width: calc(
    (100% - 2 * var(--sub-pad) - var(--sub-gap) * (var(--sub-tabs) - 1)) / var(--sub-tabs)
  );
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 82%, #fff),
    color-mix(in srgb, var(--accent) 72%, var(--accent-deep))
  );
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #fff);
  border-radius: 4px;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transform: translateX(calc(var(--sub-i) * (100% + var(--sub-gap))));
  transition:
    transform var(--mode-ms) var(--ease-rocker),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  z-index: 0;
  pointer-events: none;
}

.subnav__tabs {
  display: contents;
}

.subnav__btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0.2rem 0.35rem;
  font-family: var(--font-display);
  color: rgba(232, 234, 239, 0.72);
  background: linear-gradient(180deg, #4a515c 0%, #323840 55%, #222830 100%);
  border: 1px solid #5a616a;
  border-top-color: #7a828c;
  border-bottom-color: #12161c;
  border-radius: 3px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 0 #0a0c10;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.12s ease,
    filter 0.15s ease;
}

.subnav__label {
  font-size: clamp(0.5rem, 1.05vw, 0.64rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.subnav__btn:hover:not(.is-active) {
  color: var(--silver-hot);
  filter: brightness(1.08);
}

.subnav__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, #fff);
  outline-offset: 2px;
}

.subnav__btn.is-active {
  color: #1a1c20;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
  filter: none;
}

/* Idle strip — same rubber height, no tabs yet (Music lyrics / Resume walk fill later) */
.subnav__well--idle {
  display: block;
  width: min(100%, 28rem);
  min-height: 1.85rem;
  pointer-events: none;
}

.subnav--idle .subnav__well--idle::after {
  content: "";
  display: block;
  width: 42%;
  max-width: 8rem;
  height: 3px;
  margin: 0.7rem auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Home bio ticker — stock-tape marquee inside the rubber strip */
.subnav--ticker {
  padding-block: 0.18rem;
}

.subnav--ticker .ticker {
  width: 100%;
  max-width: var(--plate-max);
  margin-inline: auto;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.subnav--ticker .ticker.is-ready {
  opacity: 1;
}

.ticker__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.ticker__track {
  --ticker-sec: 96s;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: 0;
  will-change: transform;
  animation: ticker-scroll var(--ticker-sec) linear infinite;
}

.ticker__item {
  flex: 0 0 auto;
  padding: 0.22rem 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--accent) 55%, var(--silver-hot));
}

.ticker__item--name {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.ticker__item--brand {
  color: color-mix(in srgb, var(--accent) 78%, #fff);
}

.ticker__item--tool {
  color: var(--silver);
}

.ticker__sep {
  flex: 0 0 auto;
  margin: 0 0.85rem;
  font-size: 0.45rem;
  color: color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0.85;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    row-gap: 0.15rem;
  }

  .ticker__item:nth-child(n + 12),
  .ticker__sep:nth-child(n + 12) {
    display: none;
  }
}

@media (max-width: 720px) {
  .subnav {
    padding-block: 0.12rem;
  }

  .subnav__well {
    width: 100%;
    max-width: none;
  }

  .subnav__btn {
    min-height: 1.65rem;
    padding: 0.18rem 0.28rem;
  }
}

/* ─── CRAFT DESK (default) ───
   Charcoal depressable hardware · Core blueprint sheets. */

.nav__rocker,
.nav__deck,
.subnav__well {
  clip-path: none;
  border-radius: 8px;
}

.deck__btn,
.sheet,
.plate,
.bench,
.bench__stats,
.slot,
.music,
.writing,
.pitch,
.resume-board,
.resume-panel,
.resume-logs,
.resume-id,
.chamber__canvas,
.backside__plate,
.piece__frame,
.piece__nav,
.piece__dot,
.piece__carousel,
.piece__cell,
.subnav__btn {
  clip-path: none;
  border-radius: 4px;
}

.nav__rocker {
  gap: var(--rocker-gap, 4px);
  padding: var(--rocker-pad, 4px);
  border-radius: 10px;
  background: linear-gradient(180deg, #0e1116, #181c22);
  border: 1px solid #0a0c10;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav__glider {
  display: none;
}

.phase {
  border-radius: 4px;
  color: rgba(220, 226, 234, 0.55);
  background:
    linear-gradient(165deg, #4a515c 0%, #343a44 38%, #262b33 72%, #1a1e24 100%);
  border: 1px solid rgba(180, 188, 200, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 3px 0 #0c0e12,
    0 4px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    color 0.15s ease,
    filter 0.15s ease;
}

.phase::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  pointer-events: none;
  background: repeating-linear-gradient(
    95deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.03) 3px,
    rgba(255, 255, 255, 0.03) 4px
  );
  opacity: 0.8;
}

.phase:hover:not(.is-active) {
  color: rgba(236, 240, 246, 0.92);
  filter: brightness(1.1);
}

.phase.is-active,
.phase:active {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, #1c2026 0%, #2a3038 45%, #161a20 100%);
  border-color: color-mix(in srgb, var(--accent) 35%, #4a515c);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.06);
  color: #1a1c20;
}

.phase.is-active .icon {
  opacity: 1;
  color: #1a1c20;
  transform: none;
}

.deck__btn {
  border-radius: 4px;
  background: linear-gradient(180deg, #3f4650, #262b33);
  border: 1px solid rgba(180, 188, 200, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 0 #0c0e12;
  color: rgba(220, 226, 234, 0.82);
}

.deck__btn[aria-pressed="true"] {
  transform: translateY(1px);
  background: linear-gradient(180deg, #1a1e24, #2e343c);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
  color: #e8eaef;
  border-color: color-mix(in srgb, var(--accent) 40%, #4a515c);
}

.stage {
  background:
    radial-gradient(ellipse 60% 45% at 40% 15%, rgba(255, 244, 214, 0.05), transparent 55%),
    radial-gradient(ellipse 45% 40% at 80% 75%, rgba(110, 232, 255, 0.05), transparent 50%),
    linear-gradient(160deg, #121820, #0a0e14 74%);
}

.sheet,
.plate {
  background:
    linear-gradient(rgba(110, 232, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 232, 255, 0.05) 1px, transparent 1px),
    linear-gradient(168deg, #131b28 0%, #0e1420 55%, #0b0f18 100%);
  background-size: 24px 24px, 24px 24px, auto;
  color: var(--silver-hot);
  border-color: rgba(110, 232, 255, 0.22);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 90px rgba(110, 232, 255, 0.05);
}

.piece__frame {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 40%),
    linear-gradient(165deg, #1a1e24, #0d1014 72%);
  border-color: color-mix(in srgb, var(--accent) 28%, #3a404a);
}

/* ─── Section color on type / icons only ─── */
.phase[data-accent="mint"] {
  --lane: var(--mint);
}
.phase[data-accent="aqua"] {
  --lane: var(--aqua);
}
.phase[data-accent="lavender"] {
  --lane: var(--lavender);
}
.phase[data-accent="blush"] {
  --lane: var(--blush);
}
.phase[data-accent="yellow"] {
  --lane: var(--yellow);
}
.phase[data-accent="orange"] {
  --lane: var(--orange);
}

.phase[data-accent] {
  color: color-mix(in srgb, var(--lane) 42%, var(--silver));
}

.phase[data-accent] .icon {
  color: color-mix(in srgb, var(--lane) 55%, var(--silver));
  opacity: 0.85;
}

.phase[data-accent]:hover:not(.is-active) {
  color: color-mix(in srgb, var(--lane) 72%, #fff);
}

.phase[data-accent]:hover:not(.is-active) .icon {
  color: color-mix(in srgb, var(--lane) 85%, #fff);
  opacity: 1;
}

.phase[data-accent].is-active,
.phase[data-accent]:active {
  color: var(--lane);
  text-shadow: 0 0 12px color-mix(in srgb, var(--lane) 28%, transparent);
}

.phase[data-accent].is-active .icon,
.phase[data-accent]:active .icon {
  color: var(--lane);
  opacity: 1;
}