/* ============================================================
   DYSBALANS.SYSTEM — terminal shell
   Paleta: #0B0B0B / #FFFFFF / #A90000 / #F2AF0D
   ============================================================ */

:root {
  --bg: #0b0b0b;
  --fg: #ffffff;
  --red: #a90000;
  --yellow: #f2af0d;

  --fg-dim: rgba(255, 255, 255, 0.55);
  --fg-faint: rgba(255, 255, 255, 0.28);
  --grid: rgba(242, 175, 13, 0.07);
  --grid-strong: rgba(242, 175, 13, 0.14);

  /* Driven by Tweaks */
  --grid-opacity: 1;
  --particles-density: 1;
  --trail-intensity: 1;
}

/* ============================================================
   MU/TH/UR 6000 — Nostromo green-phosphor mode (console: "mother" / "nostromo").
   Whole UI is var-driven, so re-mapping the four palette tokens recolours
   everything to amber-free green-on-black. A faint phosphor glow + slightly
   stronger scanlines sell the CRT.
   ============================================================ */
html.muthur {
  --bg: #020a05 !important;
  --fg: #5bff9b !important;
  --red: #1f9c52 !important;
  --yellow: #8fffae !important;
  --fg-dim: rgba(91, 255, 155, 0.6) !important;
  --fg-faint: rgba(91, 255, 155, 0.3) !important;
  --grid: rgba(91, 255, 155, 0.07) !important;
  --grid-strong: rgba(91, 255, 155, 0.16) !important;
}
html.muthur body {
  text-shadow: 0 0 4px rgba(91, 255, 155, 0.35);
}
/* a couple of hardcoded whites → phosphor green */
html.muthur .about__copy p strong,
html.muthur .window__title { color: #c6ffd9; }
html.muthur ::selection { background: #1f9c52; color: #021006; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Nippo', system-ui, monospace;
  font-weight: 400;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  cursor: none;
}

/* Custom crosshair is the only cursor on desktop — suppress UA pointer/hand */
a, button, [data-clickable], .choice, .tile, .project { cursor: none; }

/* Custom crosshair is the only cursor — suppress the system I-beam too */
input, textarea { cursor: none; }

::selection {
  background: var(--red);
  color: var(--fg);
}

/* ============================================================
   1. BACKGROUND LAYERS
   ============================================================ */

/* Grid — drawn in <canvas id="bg-grid"> */
#bg-grid,
#bg-particles,
#cursor-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
#bg-grid { z-index: 0; opacity: var(--grid-opacity); }
#bg-particles { z-index: 1; }
#cursor-trail { z-index: 9999; }

/* Vignette to focus the centre, sells the cinematic mood */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.65) 100%);
  mix-blend-mode: multiply;
}

/* Subtle horizontal scanline that travels slowly down */
.scanline {
  position: fixed;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(180deg,
    transparent,
    rgba(242, 175, 13, 0.5),
    rgba(255, 255, 255, 0.18),
    transparent);
  box-shadow: 0 0 14px 2px rgba(242, 175, 13, 0.22);
  z-index: 3;
  pointer-events: none;
  animation: scan 8s linear infinite;
  opacity: 0.9;
  mix-blend-mode: screen;
}
@keyframes scan {
  0%   { transform: translateY(-4px); }
  100% { transform: translateY(100vh); }
}

/* CRT noise — very faint */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9JzAuOScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  background-size: 180px 180px;
}

/* ============================================================
   2. APP SHELL
   ============================================================ */

#app {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.shell {
  position: absolute;
  inset: 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* minmax(0, 1fr) — NOT plain 1fr. A `1fr` track keeps an implicit `auto`
     (=min-content) floor, so any grid item wider than the column (on 2226 the
     status bar gains a 4th button → its min-content hit ~395px) blows the track
     out past the viewport and the whole page got clipped on the right. minmax(0,…)
     drops that floor so the column can't exceed the shell, and the bars/stage
     shrink (brand ellipsis, story wraps) to fit instead of overflowing. */
  grid-template-columns: minmax(0, 1fr);
  z-index: 5;
  pointer-events: none;
}
.shell > * { pointer-events: auto; }

/* Corner brackets — give the viewport an instrument-panel feel */
.shell::before,
.shell::after,
.bracket-bl,
.bracket-br {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--yellow);
  pointer-events: none;
}
.shell::before {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
}
.shell::after {
  top: 0; right: 0;
  border-left: none; border-bottom: none;
}
.bracket-bl {
  bottom: 0; left: 0;
  border-right: none; border-top: none;
}
.bracket-br {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
}

/* ============================================================
   3. TOP STATUS BAR
   ============================================================ */

.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 22px;
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  user-select: none;
}
.statusbar__left,
.statusbar__right {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.statusbar__right {
  align-items: flex-end;
  flex-direction: row;
  gap: 16px;
}
.statusbar__brand {
  color: var(--fg);
  font-family: 'SYN Nova', sans-serif;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.statusbar__brand .dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--red);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.statusbar__meta {
  font-size: 10px;
  letter-spacing: 0.16em;
}
.statusbar button {
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--fg-dim);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 11px;
  cursor: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.statusbar button:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}
.statusbar button.is-active {
  border-color: var(--red);
  color: var(--red);
}

/* ============================================================
   4. MAIN STAGE
   ============================================================ */

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  min-height: 0;
  min-width: 0;
}

.view {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: viewIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view.is-leaving {
  animation: viewOut 0.25s ease-in both;
}
@keyframes viewOut {
  to { opacity: 0; transform: translateY(-6px); }
}

/* ============================================================
   5. PROMPT (bottom bar)
   ============================================================ */

.prompt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  user-select: none;
}
.prompt__cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--yellow);
  margin-right: 10px;
  vertical-align: middle;
  animation: blink 1.1s steps(2, end) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}
.prompt__path { color: var(--yellow); }
.prompt__copy {
  font-family: 'SYN Nova', sans-serif;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--fg-faint);
  text-transform: none;
  white-space: nowrap;
}
.prompt__hints { display: flex; gap: 18px; }
.prompt__hint kbd {
  display: inline-block;
  border: 1px solid var(--fg-faint);
  padding: 1px 6px;
  margin-right: 6px;
  font-family: inherit;
  font-size: 9px;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.03);
}
/* tappable console chip — looks like a hint, behaves like a button */
.prompt__hint--btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.prompt__hint--btn:focus { outline: none; }
.prompt__hint--btn:hover kbd,
.prompt__hint--btn:focus-visible kbd {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(242, 175, 13, 0.1);
}

/* ============================================================
   7. MENU VIEW (section selector)
   ============================================================ */

.menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 20px;
  max-width: 1180px;
  width: 100%;
  padding: 0 24px;
}

.menu__head {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 32px;
}
.menu__head h2 {
  font-family: 'SYN Nova', sans-serif;
  font-weight: 200;
  font-size: clamp(1.6rem, 3vw, 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 12px;
}
.menu__head h2 em {
  font-style: normal;
  color: var(--yellow);
  font-weight: 700;
}
.menu__head p {
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.menu__slogan {
  grid-column: 1 / -1;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  font-family: 'SYN Nova', sans-serif;
  font-weight: 400;
  font-size: clamp(0.72rem, 1.05vw, 1.02rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  pointer-events: none;
}
.menu__slogan span:last-child { color: var(--yellow); }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 24px 22px;
  background: transparent;
  border: 1px solid transparent; /* the animated frame draws the visible border */
  color: var(--fg);
  text-decoration: none;
  cursor: none;
  text-align: left;
  font-family: inherit;
  transition: transform 0.2s ease;
  overflow: hidden;
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(242, 175, 13, 0) 0%, rgba(242, 175, 13, 0.06) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0;
}
.tile:hover { transform: translateY(-2px); }
.tile:hover::before { opacity: 1; }

/* animated perimeter frame */
.tile__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.tile__frame-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tileDraw 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tile:hover .tile__frame-path { stroke: var(--yellow); }
@keyframes tileDraw {
  to { stroke-dashoffset: 0; }
}
.tile__frame-dot {
  fill: var(--yellow);
  offset-distance: 0%;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--yellow));
  animation: tileDot 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes tileDot {
  0%   { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.tile__num {
  font-family: 'SYN Nova', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--fg-dim);
  position: relative;
  z-index: 2;
}
.tile:hover .tile__num { color: var(--yellow); }

.tile__label {
  font-family: 'Nippo', sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: auto;       /* push toward bottom */
  position: relative;
  z-index: 2;
}
/* the 2226 feature label in SYN Nova heavy */
.tile__label--syn {
  font-family: 'SYN Nova', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  /* SYN Nova caps sit higher than Nippo in the same line box — drop to match */
  transform: translateY(12px);
  letter-spacing: 0.02em;
}
.tile__desc {
  font-family: 'SYN Nova', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 10px;
  min-height: 1.4em;      /* fixed → all titles align on the same line */
  line-height: 1.4;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lock-ico {
  width: 13px; height: 13px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.6;
  flex: 0 0 auto;
}
.tile__corner {
  position: absolute;
  top: 12px; right: 12px;
  font-family: 'SYN Nova', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--fg-faint);
  z-index: 2;
}
.tile:hover .tile__corner { color: var(--yellow); }

/* ============================================================
   8. SECTION WINDOWS
   ============================================================ */

.window {
  position: relative;
  width: min(1100px, 96%);
  max-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(11, 11, 11, 0.65);
  border: 1px solid rgba(242, 175, 13, 0.28);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.window__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(242, 175, 13, 0.18);
  font-family: 'Nippo', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.window__bar .lights {
  display: inline-flex;
  gap: 6px;
}
.window__bar .lights span {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
.window__bar .lights span:nth-child(1) { background: var(--red); }
.window__bar .lights span:nth-child(2) { background: var(--yellow); }
.window__bar .lights span:nth-child(3) { background: rgba(255,255,255,0.4); }

.window__title {
  color: var(--fg);
  letter-spacing: 0.28em;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window__close {
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--fg-dim);
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: none;
}
.window__close:hover { border-color: var(--red); color: var(--red); }
.window__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.window__body {
  flex: 1;
  padding: 36px 44px;
  overflow: auto;
  position: relative;
}

/* ============================================================
   9. ABOUT — hologram + copy
   ============================================================ */

.about {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  height: 100%;
  min-height: 0;
}
.about__holo {
  position: relative;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  perspective: 900px;
}
/* ---- holographic origami unicorn (Gaff) ---- */
.holo-unicorn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: none;
  z-index: 1;
  transform-style: preserve-3d;
}
.holo-unicorn__float {
  display: block;
  width: 92%;
  transform-style: preserve-3d;
  animation: holoBob 6.5s ease-in-out infinite;
  will-change: transform;
}
.holo-unicorn__svg {
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
  filter:
    drop-shadow(0 0 14px rgba(242, 175, 13, 0.55))
    drop-shadow(0 0 34px rgba(242, 175, 13, 0.28))
    drop-shadow(2px 0 1px rgba(169, 0, 0, 0.6));
  animation: holoFlicker 4.2s steps(60) infinite;
}
.holo-unicorn__svg svg { display: block; width: 100%; height: auto; }
/* recolour the silhouette into amber→red holographic duotone
   (path carries an inline fill:white, so force it) */
.holo-unicorn__svg svg path {
  fill: url(#holoGrad) !important;
}
.holo-unicorn:hover .holo-unicorn__svg {
  filter:
    drop-shadow(0 0 18px rgba(242, 175, 13, 0.8))
    drop-shadow(0 0 46px rgba(242, 175, 13, 0.4))
    drop-shadow(3px 0 1px rgba(169, 0, 0, 0.75));
}
@keyframes holoBob {
  0%, 100% { transform: translateY(-2%) rotateZ(-0.6deg); }
  50%      { transform: translateY(2%) rotateZ(0.6deg); }
}
@keyframes holoFlicker {
  0%, 96%, 100% { opacity: 0.92; }
  97%           { opacity: 0.74; }
  98%           { opacity: 0.97; }
  99%           { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .holo-unicorn__float, .holo-unicorn__svg { animation: none; }
}
/* deep-hidden easter egg: Deckard's serial (Blade Runner, 1982) tagged on the
   operator hologram — Gaff's unicorn + B26354 in one frame. Very faint. */
.about__serial {
  position: absolute;
  left: 2px;
  bottom: -2px;
  z-index: 2;
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: rgba(242, 175, 13, 0.5);
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.85),
    0 0 7px rgba(242, 175, 13, 0.35);
  pointer-events: none;
  user-select: none;
}
/* empty instrument frame — corner brackets (head retired) */
.about__holo-c {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(242, 175, 13, 0.35);
}
.about__holo-c--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.about__holo-c--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.about__holo-c--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.about__holo-c--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.about__holo::after {
  /* scan lines on hologram */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(242, 175, 13, 0.06) 3px,
    rgba(242, 175, 13, 0.06) 4px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}

.about__copy h3 {
  font-family: 'SYN Nova', sans-serif;
  font-weight: 200;
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 24px;
}
.about__copy h3 em {
  font-style: normal;
  font-weight: 700;
  color: var(--yellow);
}
.about__copy p {
  font-family: 'Nippo', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}
.about__copy p + p { margin-top: 0; }
/* Easter egg: invisible until you drag-select the bio — the red ::selection
   reveals it. color:transparent blends on any bg; ::selection overrides it. */
.about__tears {
  color: transparent !important;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
.about__copy p strong {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.about__cta {
  margin-top: 18px !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--fg-dim) !important;
}
.about__cta em {
  font-style: normal;
  color: var(--yellow);
  font-weight: 600;
}
.about__tags {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about__tags span {
  font-family: 'Nippo', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(242, 175, 13, 0.35);
  color: var(--yellow);
}

/* ============================================================
   10. PORTFOLIO
   ============================================================ */

.portfolio {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.portfolio__intro {
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 28px;
}
.portfolio__intro em {
  font-style: normal;
  color: var(--yellow);
}
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  flex: 1;
}
.project {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 22px 22px 18px;
  background: rgba(0,0,0,0.32);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  cursor: none;
  transition: all 0.2s ease;
}
.project:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
.project__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.project__num {
  font-family: 'SYN Nova', sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--fg-dim);
}
.project__status {
  font-family: 'Nippo', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--yellow);
  border: 1px solid currentColor;
  padding: 3px 7px;
}
.project__status--locked {
  color: var(--red);
}
.project__title {
  font-family: 'Nippo', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: auto;
}
.project__meta {
  font-family: 'SYN Nova', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.project__bar {
  height: 1px;
  background: linear-gradient(90deg, var(--yellow), transparent);
  width: 40%;
  margin-top: 8px;
  transition: width 0.3s ease;
}
.project:hover .project__bar { width: 100%; background: linear-gradient(90deg, var(--red), transparent); }

/* linked projects (open Behance) — yellow accent + arrow */
.project--link:hover {
  border-color: var(--yellow);
}
.project--link:hover .project__bar { background: linear-gradient(90deg, var(--yellow), transparent); }
.project__arrow {
  display: inline-block;
  margin-left: 8px;
  color: var(--yellow);
  font-weight: 400;
  transform: translateY(-1px);
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.project__arrow svg { display: block; }
.project--link:hover .project__arrow {
  opacity: 1;
  transform: translate(2px, -3px);
}

/* ============================================================
   11. CONTACT
   ============================================================ */

.contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  gap: 36px;
}
.contact__label {
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--yellow);
}
.contact__email-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.contact__email {
  font-family: 'SYN Nova', sans-serif;
  font-weight: 200;
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);
  letter-spacing: -0.005em;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}
.contact__email:hover {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}
.contact__copy {
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);
  font-family: 'Nippo', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: none;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.contact__copy:hover {
  background: var(--yellow);
  color: var(--bg);
  border-color: var(--yellow);
}
.contact__copy.is-copied {
  background: var(--red);
  border-color: var(--red);
  color: var(--fg);
}
.contact__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.contact__channel {
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.contact__channel::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--yellow);
  border-radius: 50%;
  flex: 0 0 auto;
}
.contact__channel:hover { color: var(--fg); border-color: var(--yellow); }
/* keep the scramble text matched to the small button (override the global 25px) */
.contact__channel .scramble__anim {
  font-size: 11px !important;
  line-height: normal !important;
  letter-spacing: 0.24em !important;
}
.contact__sig {
  margin-top: 16px;
  font-family: 'Nippo', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-faint);
  line-height: 1.6;
}

/* ============================================================
   12. INTRO OVERLAY
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
  /* pure black cinematic stage — no grid bleeds through */
}
.intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

/* ---- enter gate: appears under the wordmark once the reveal finishes ----
   FIXED to the viewport (not absolute inside the content-sized stage), so its
   distance from the bottom edge is identical on every device height instead of
   being a % of the column height — which on short/tall mobile viewports landed
   it right on top of the wordmark. The wordmark stays vertically centred, so a
   bottom-anchored gate is always well clear of it. Its arrival no longer
   touches the flex column, so the wordmark never jumps. */
.intro__enter {
  position: fixed;
  left: 50%;
  bottom: clamp(56px, 11vh, 132px);
  font-family: 'Nippo', sans-serif;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--yellow);
  background: transparent;
  border: 1px solid rgba(242, 175, 13, 0.5);
  padding: 14px 40px;
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  animation: introEnterIn 0.7s ease-out forwards;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.intro__enter:hover {
  background: rgba(242, 175, 13, 0.12);
  border-color: var(--yellow);
}
@keyframes introEnterIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- strap: slow tracking-out fade, settles, then dims as logo arrives ---- */
.intro__strap {
  font-family: 'Nippo', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  animation: introStrap 6.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes introStrap {
  0%   { opacity: 0; letter-spacing: 0.9em; filter: blur(6px); }
  14%  { opacity: 0.9; letter-spacing: 0.46em; filter: blur(0); }
  44%  { opacity: 0.9; letter-spacing: 0.46em; filter: blur(0); }
  62%  { opacity: 0.32; letter-spacing: 0.5em; }
  100% { opacity: 0.32; letter-spacing: 0.5em; }
}

/* ---- logo: white solid, +20% size, Alien-style outline draw-on (JS-driven) ---- */
.intro__logo {
  position: relative;
  width: min(768px, 77vw); /* +20% over previous 640/64vw */
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.22));
}
.intro__logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* glyphs start invisible; JS adds stroke + animates the trace, then fill */
.intro__logo svg path,
.intro__logo svg rect {
  fill: #ffffff;
  fill-opacity: 0;
}
.intro__logo svg #logotyp { fill: none !important; stroke: none !important; }
.intro__logo-fallback {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
}

.intro__skip {
  position: absolute;
  top: 28px;
  right: 28px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.55);
  font-family: 'Nippo', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.intro__skip:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}
.intro__skip kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid currentColor;
  margin-right: 6px;
  font-size: 9px;
  opacity: 0.7;
}
.intro__meta {
  position: absolute;
  bottom: 32px;
  left: 32px;
  font-family: 'Nippo', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-faint);
  line-height: 1.7;
}
.intro__meta b {
  color: var(--yellow);
  font-weight: 400;
}
.intro.is-leaving {
  animation: introOut 0.6s ease-in forwards;
}
@keyframes introOut {
  to { opacity: 0; }
}

/* ============================================================
   13. CUSTOM CURSOR
   ============================================================ */

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor::before,
.cursor::after {
  content: '';
  position: absolute;
  background: var(--fg);
}
.cursor::before {
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}
.cursor::after {
  top: 50%; left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
}
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 4px; height: 4px;
  background: var(--red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease-out;
}
.cursor.is-clickable::before,
.cursor.is-clickable::after {
  background: var(--yellow);
}
.cursor.is-clickable {
  width: 36px; height: 36px;
}

/* over text inputs: morph crosshair into a ">" prompt caret */
.cursor.is-text {
  mix-blend-mode: normal;
  width: auto; height: auto;
}
.cursor.is-text::before,
.cursor.is-text::after { display: none; }
.cursor.is-text::after {
  display: block;
  content: '>';
  position: static;
  width: auto; height: auto;
  background: none;
  font-family: 'Nippo', monospace;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(242, 175, 13, 0.6);
}

/* ============================================================
   14. TWEAKS PANEL override
   ============================================================ */

.tweaks-panel,
[data-tweaks-panel] {
  font-family: 'Nippo', monospace !important;
}

/* ============================================================
   14b. CRT GLITCH — random, global
   ============================================================ */

/* Full-screen glitch overlay. JS toggles .is-glitching for short bursts
   and randomizes --gx / --gy / --gh offsets per burst. */
#crt-glitch {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  --gx: 0px;
  --gy: 0px;
}

/* The whole app jolts + RGB-splits during a burst */
#app.is-glitching {
  animation: glitchShake 0.22s steps(2, end) 1;
}
@keyframes glitchShake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(calc(var(--gx, 2px) * 1), calc(var(--gy, -1px))); }
  40%  { transform: translate(calc(var(--gx, -2px) * -1), 0); filter: hue-rotate(8deg); }
  60%  { transform: translate(2px, 1px); }
  80%  { transform: translate(-1px, 0); }
  100% { transform: translate(0, 0); }
}

/* RGB split clones — driven by ::before / ::after color tints */
#app.is-glitching::before,
#app.is-glitching::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9991;
  pointer-events: none;
  mix-blend-mode: screen;
}
#app.is-glitching::before {
  background: rgba(169, 0, 0, 0.06);
  transform: translateX(3px);
  animation: glitchBlockR 0.22s steps(3, end) 1;
}
#app.is-glitching::after {
  background: rgba(0, 180, 255, 0.05);
  transform: translateX(-3px);
  animation: glitchBlockB 0.22s steps(3, end) 1;
}
@keyframes glitchBlockR {
  0%, 100% { clip-path: inset(0 0 0 0); }
  33% { clip-path: inset(18% 0 62% 0); transform: translateX(6px); }
  66% { clip-path: inset(70% 0 8% 0); transform: translateX(-4px); }
}
@keyframes glitchBlockB {
  0%, 100% { clip-path: inset(0 0 0 0); }
  33% { clip-path: inset(54% 0 30% 0); transform: translateX(-6px); }
  66% { clip-path: inset(8% 0 78% 0); transform: translateX(4px); }
}

/* A torn horizontal scan band that flickers across during the burst */
#crt-glitch.is-glitching {
  opacity: 1;
  background:
    linear-gradient(0deg,
      transparent 0%, transparent calc(var(--gy, 30%) - 2%),
      rgba(255,255,255,0.07) var(--gy, 30%),
      rgba(242,175,13,0.10) calc(var(--gy, 30%) + 1.5%),
      transparent calc(var(--gy, 30%) + 3%), transparent 100%);
  animation: glitchBand 0.22s steps(4, end) 1;
}
@keyframes glitchBand {
  0%   { opacity: 0.9; }
  50%  { opacity: 0.3; transform: translateY(-4px); }
  100% { opacity: 0; }
}

/* ============================================================
   16. ENHANCEMENT LAYERS — boot, scramble, cmdline, idle, flash
   ============================================================ */

/* ---- scramble ---- */
.scr-rnd { color: var(--yellow); opacity: 0.85; }
.scramble { position: relative; display: inline-block; }
.scramble__sizer { visibility: hidden; }
.scramble__anim {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
}

/* ---- boot log ---- */
.bootlog {
  font-family: 'Nippo', monospace;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  width: min(640px, 90%);
  line-height: 1.9;
  position: relative;
}
.bootlog__line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  opacity: 0;
  animation: bootLineIn 0.18s ease-out forwards;
}
@keyframes bootLineIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.bootlog__caret { color: var(--yellow); }
.bootlog__text { color: var(--fg); flex: 1; }
.bootlog__ok { color: var(--yellow); letter-spacing: 0.2em; }
.bootlog__q  { color: var(--red); letter-spacing: 0.2em; }
.bootlog__line--cursor { opacity: 1; animation: none; }
.bootlog__skip {
  margin-top: 22px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-faint);
}

/* ---- sys flash (transition interstitial) ---- */
.sysflash {
  position: fixed;
  inset: 0;
  z-index: 9992;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  background: rgba(11, 11, 11, 0.35);
  animation: sysFlashIn 0.42s ease-out;
}
@keyframes sysFlashIn {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
.sysflash__art {
  font-family: 'Nippo', monospace;
  font-size: clamp(9px, 1.1vw, 13px);
  line-height: 1.3;
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(242, 175, 13, 0.4);
  white-space: pre;
}
.sysflash__label {
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg);
}

/* ---- command line ---- */
.cmdline {
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translate(-50%, 12px);
  width: min(620px, 86%);
  z-index: 9996;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.cmdline.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.cmdline__log {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
}
/* command hint panel */
.cmdline__hint {
  margin-bottom: 10px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(242, 175, 13, 0.22);
  backdrop-filter: blur(6px);
}
.cmdline__hint-title {
  display: block;
  font-family: 'Nippo', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 8px;
}
.cmdline__hint-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px 24px;
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}
.cmdline__hint-grid b {
  color: var(--fg);
  font-weight: 600;
}
.cmdline__hint-secret b { color: var(--red); }
.cmdline__hint-secret { grid-column: 1 / -1; opacity: 0.85; }
.cmdline__hint-secret.is-full  { grid-column: 1 / -1; }
.cmdline__hint-secret.is-left  { grid-column: 1; }
.cmdline__hint-secret.is-right { grid-column: 2; }
.cmdline__out--dim { color: var(--fg-dim); }
.cmdline__out--ok { color: var(--fg); }
.cmdline__out--err { color: var(--red); }
.cmdline__out--secret { color: var(--yellow); text-shadow: 0 0 10px rgba(242,175,13,0.4); }
.cmdline__row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid var(--yellow);
  padding: 12px 16px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(242, 175, 13, 0.12);
}
.cmdline__prompt {
  font-family: 'Nippo', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--yellow);
  white-space: nowrap;
}
.cmdline__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: 'Nippo', monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
}
.cmdline__input::placeholder { color: var(--fg-faint); }

/* ---- idle overlay ---- */
.idle {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: block;
  background: rgba(7, 7, 7, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease, background 1.2s ease;
  overflow: hidden;
}
.idle.is-idle {
  opacity: 1;
  background: rgba(7, 7, 7, 0.93);
  pointer-events: auto;
  backdrop-filter: blur(2px);
}
/* glow bed behind the eagle badge */
.idle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(50vh, 72vw);
  height: min(50vh, 72vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(169, 0, 0, 0.6) 0%,
    rgba(169, 0, 0, 0.26) 36%,
    rgba(169, 0, 0, 0) 72%);
  filter: blur(38px);
  z-index: 0;
  pointer-events: none;
}
html.muthur .idle::before {
  background: radial-gradient(circle,
    rgba(31, 156, 82, 0.5) 0%,
    rgba(31, 156, 82, 0.22) 36%,
    rgba(31, 156, 82, 0) 72%);
}
.idle__msg {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 13vh;
  transform: translateX(-50%);
  z-index: 3;
  font-family: 'Nippo', monospace;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: 0 0 12px rgba(7, 7, 7, 0.9), 0 0 4px rgba(7, 7, 7, 0.9);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* ---- live readouts ---- */
.readouts {
  display: flex;
  gap: 14px;
  font-family: 'Nippo', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}
.readouts__item b {
  color: var(--yellow);
  font-weight: 400;
  margin-right: 5px;
  letter-spacing: 0.16em;
}

/* ============================================================
   17. REVEAL TEXT · STORY · BSOD · WAVEFORM · EAGLE
   ============================================================ */

/* ---- machine reveal behind a caret ---- */
.reveal { position: relative; }
.reveal__caret {
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  background: var(--yellow);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s steps(2, end) infinite;
  box-shadow: 0 0 8px var(--yellow);
}

/* ---- ghost waveform (bg, top-right) ---- */
#ghost-wave {
  position: fixed;
  top: 56px;
  right: 18px;
  width: 440px;
  height: 260px;
  z-index: 1;
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---- idle eagle (centered badge; red→yellow duotone, green in MU/TH/UR) ---- */
.idle__eagle {
  position: absolute;
  left: 50%;
  top: 50%;
  height: clamp(200px, 44vh, 440px);
  width: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 0 26px rgba(169, 0, 0, 0.5));
  pointer-events: none;
}
.idle__eagle svg { height: 100%; width: auto; display: block; }
/* recolour the badge in place: keep its two-tone, map the dark silhouette → red
   and the accent strokes/lightning → yellow (the source fills are inline rgb). */
.idle__eagle svg path[style*="rgb(21,21,21)"]   { fill: var(--red) !important; }
.idle__eagle svg path[style*="rgb(242,175,13)"] { fill: var(--yellow) !important; }
.idle__eagle svg path[style*="rgb(85,85,85)"]   { fill: #d4860a !important; }
/* MU/TH/UR mode → phosphor-green duotone + subtle scanlines over the badge */
html.muthur .idle__eagle { filter: drop-shadow(0 0 26px rgba(31, 156, 82, 0.55)); }
html.muthur .idle__eagle svg path[style*="rgb(21,21,21)"]   { fill: #0d6b34 !important; }
html.muthur .idle__eagle svg path[style*="rgb(242,175,13)"] { fill: #3ef08a !important; }
html.muthur .idle__eagle svg path[style*="rgb(85,85,85)"]   { fill: #1f9c52 !important; }
.idle__eagle::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.4) 2px 3px);
  mix-blend-mode: multiply;
}
html.muthur .idle__eagle::after { opacity: 1; }

/* ---- window wide (no lights) ---- */
.window--wide { width: min(1280px, 97%); }

/* ---- story crawl ---- */
.story {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.story__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* story uses its own inner scroller — kill the window body scroll/double bars */
.window--wide .window__body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-left: 30px;
  padding-right: 30px;
}

/* terminal-styled scrollbars */
.window__body, .story__scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(242,175,13,0.5) transparent;
}
.window__body::-webkit-scrollbar,
.story__scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.window__body::-webkit-scrollbar-track,
.story__scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.window__body::-webkit-scrollbar-thumb,
.story__scroll::-webkit-scrollbar-thumb {
  background: rgba(242,175,13,0.45);
  border: 1px solid rgba(242,175,13,0.2);
}
.window__body::-webkit-scrollbar-thumb:hover,
.story__scroll::-webkit-scrollbar-thumb:hover { background: rgba(242,175,13,0.7); }
.story__crawl {
  /* Nippo regular per request; only the highlight stays bold */
  font-family: 'Nippo', sans-serif;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.85;
  color: #ffffff;
  white-space: pre-wrap;
  tab-size: 4;
  -moz-tab-size: 4;
  max-width: 64ch;
  /* book-style ragged-right: even tracking everywhere, clean left edge */
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: pretty;
}
.story__crawl .reveal__text { white-space: pre-wrap; }
.story-hot {
  font-family: 'Nippo', sans-serif;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 0.01em;
}
.story__cta {
  max-width: 70ch;
  width: 100%;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(242, 175, 13, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.story__cta.is-visible { opacity: 1; transform: translateY(0); }
.story__cta-line {
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.story__buy {
  font-family: 'Nippo', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--yellow);
  text-decoration: none;
  padding: 14px 26px;
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background 0.18s ease, color 0.18s ease;
}
.story__buy .arrow-ne { flex: 0 0 auto; display: block; }
.story__buy:hover { background: var(--red); color: var(--fg); }
.story__cta-sub {
  font-family: 'SYN Nova', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---- BSOD joke (fullscreen) ---- */
.bsod {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #0a35c4;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  font-family: 'Nippo', monospace;
}
.bsod__inner {
  max-width: 640px;
  padding: 0 32px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.bsod__title {
  display: inline-block;
  background: #cfcfcf;
  color: #0a35c4;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 2px 14px;
  margin: 0 auto 26px;
  text-align: center;
}
.bsod__inner { text-align: center; }
.bsod__inner p { margin-bottom: 20px; text-align: left; }
.bsod__wait { text-align: center !important; opacity: 0.9; }

/* custom ">" caret inside the command input (suppress system cursor) */
.cmdline__inputwrap {
  position: relative;
  flex: 1;
  display: flex;
  cursor: none;
}
.cmdline__input { cursor: none; }

/* ============================================================
   RETINA SCAN — auth screen (replaces boot + dialog)
   ============================================================ */
.scan {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --tox: #3dff2e;
}
.scan__log {
  position: absolute;
  top: 100px;
  left: 24px;
  font-family: 'Nippo', monospace;
  font-size: 11.5px;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: #e8362a;
  opacity: 0.95;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(232, 54, 42, 0.5);
  max-width: 46vw;
}
.scan__logline { white-space: nowrap; animation: scanLogIn 0.25s ease both; }
.scan__logline.is-ok { color: rgba(208, 212, 218, 0.6); text-shadow: none; }
.scan__logline.is-warn { color: #ffb52e; text-shadow: 0 0 8px rgba(255, 181, 46, 0.55); }
@keyframes scanLogIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

.scan__stage {
  position: relative;
  width: min(56vh, 58vw);
  height: min(56vh, 58vw);
}
.scan__iris { width: 100%; height: 100%; display: block; }

.scan__hud {
  margin-top: 28px;
  width: min(420px, 80vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.scan__status {
  font-family: 'Nippo', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  text-align: center;
  min-height: 1.2em;
}
.scan__bar {
  width: 100%;
  height: 4px;
  background: rgba(169, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
}
.scan__bar-fill {
  height: 100%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  transition: width 0.12s linear;
}
.scan__pct {
  font-family: 'Nippo', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--yellow);
}
.scan__abort {
  position: absolute;
  bottom: 22px;
  right: 24px;
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--fg-dim);
  font-family: 'Nippo', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 8px 14px;
  cursor: none;
  transition: color 0.15s, border-color 0.15s;
}
.scan__abort:hover { color: var(--red); border-color: var(--red); }

/* hide ambient waveform while authenticating — keep focal on the iris */
body.is-scanning #ghost-wave { opacity: 0 !important; transition: opacity 0.5s ease; }

/* error state — red status + shake */
.scan--error .scan__status { color: #ff2a2a; text-shadow: 0 0 10px rgba(255, 40, 40, 0.6); }
.scan--error .scan__stage { animation: scanShake 0.16s steps(2) infinite; }
@keyframes scanShake {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-2px, 1px); }
  100% { transform: translate(2px, -1px); }
}

/* success — toxic-green flash + verdict, hide HUD */
.scan__flash {
  position: absolute;
  inset: 0;
  background: var(--tox);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 0.7s ease;
}
.scan--success .scan__flash { opacity: 0.16; }
.scan__verdict {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.6s ease;
}
.scan--success .scan__verdict { opacity: 1; transform: scale(1); }
.scan__verdict-main {
  font-family: 'Nippo', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 62px);
  letter-spacing: 0.1em;
  color: #0a0a0a;
  background: var(--tox);
  padding: 6px 22px;
}
.scan__verdict-sub {
  font-family: 'Nippo', monospace;
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--tox);
  text-shadow: 0 0 12px rgba(61, 255, 46, 0.6);
}
.scan--success .scan__hud,
.scan--success .scan__log,
.scan--success .scan__abort { opacity: 0; transition: opacity 0.3s; }

/* ============================================================
   15. MOBILE
   ============================================================ */

@media (hover: none), (pointer: coarse) {
  /* Touch devices: kill the sticky :hover state. On iOS a tap first applies
     :hover (revealing the ::before wash + lift) and only a SECOND tap fires the
     click — which read as "the menu tiles don't work". Neutralising the
     hover-reveal makes the first tap a clean activation. Window buttons worked
     because they only tint on hover; the tiles also lifted + revealed a layer,
     which is exactly what trips Safari's two-tap heuristic. */
  .tile:hover { transform: none; }
  .tile:hover::before { opacity: 0; }
  .tile:active { transform: translateY(-1px); }
  .tile:active::before { opacity: 1; }

  /* Remove the 300ms tap delay + double-tap-zoom hijack on every control. */
  .tile, .choice, .window__close, .contact__copy, .contact__channel,
  .statusbar button, .story__buy, .prompt button, button[data-clickable],
  a[data-clickable] { touch-action: manipulation; }

  /* Custom cursor is desktop-only; give touch a normal pointer affordance. */
  .tile, .choice, button, a[data-clickable] { cursor: pointer; }
}

@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  html, body { cursor: auto; overflow-y: auto; overflow-x: hidden; }
  .cursor, .cursor-dot, #cursor-trail { display: none; }

  .shell { inset: 12px; }
  /* tall content (the menu) is taller than this row — let it scroll inside the
     stage and start from the top, instead of centring and bleeding over the
     status/prompt bars above and below. */
  .stage { padding: 14px 12px; align-items: flex-start; overflow: hidden; }
  /* the route wrapper becomes the scroll container: the menu (taller than the
     viewport) scrolls inside it from the top; section windows are height:100%
     so they just fill it and scroll within their own body. */
  .view { align-items: flex-start; overflow-y: auto; overflow-x: hidden; min-width: 0; }
  .window { min-width: 0; }
  /* belt-and-suspenders for the grid-blowout fix above: let the bars shrink
     below their content so the brand ellipsises and the buttons stay on-screen */
  .statusbar, .prompt { min-width: 0; }
  .menu { grid-template-columns: 1fr; gap: 14px; width: 100%; }

  .tile { min-height: 124px; padding: 16px 16px; }

  /* ---- section window chrome: keep [ESC] always visible + tappable ---- */
  .window__bar { padding: 9px 12px; gap: 10px; }
  .window__title { letter-spacing: 0.12em; font-size: 9px; }
  .window__close {
    padding: 8px 11px;
    font-size: 9px;
    letter-spacing: 0.16em;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  .window__body { padding: 22px 16px; overflow-x: hidden; }
  .window, .window__body { max-width: 100%; }

  /* ---- about: stack, scale type down, scroll from top ---- */
  .about { grid-template-columns: 1fr; gap: 22px; height: auto; align-items: start; min-width: 0; }
  /* the holo box is filled by an absolutely-positioned unicorn, so it has no
     intrinsic height — give it an explicit square or it collapses to 0 (which
     is why only the corner brackets + serial were showing). */
  .about__holo { width: 100%; max-width: 200px; height: 200px; margin: 0 auto; }
  .about__copy { min-width: 0; }
  .about__copy h3 { font-size: clamp(1.35rem, 6.5vw, 1.9rem); margin-bottom: 16px; overflow-wrap: anywhere; }
  .about__copy p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  .about__tags { gap: 8px; }

  /* ---- portfolio ---- */
  .portfolio__grid { grid-template-columns: 1fr; }

  /* ---- contact: shrink the huge email so it never overruns ---- */
  .contact { gap: 24px; }
  .contact__email { font-size: clamp(1.1rem, 5vw, 1.7rem); word-break: break-word; }
  .contact__email-row { gap: 12px; }

  /* ---- 2226 story: smaller even crawl. Force the crawl to the scroller's
     width and wrap — because .story__scroll is align-items:flex-start, the
     crawl div would otherwise shrink-to-fit its longest line (max-content)
     and refuse to wrap. width:100% pins it. ---- */
  .story__scroll { align-items: stretch; }
  .story__crawl { font-size: 14px; line-height: 1.7; width: 100%; max-width: 100%; }
  .story__crawl .reveal__text { overflow-wrap: anywhere; }
  .story__cta { max-width: 100%; }
  /* the wide story window uses big side padding on desktop — trim it so the
     crawl text isn't pushed off the right edge on a phone */
  .window--wide .window__body { padding-left: 16px; padding-right: 16px; }

  /* ---- top/bottom bars: shrink so nothing overruns the edge ---- */
  .statusbar { padding: 9px 12px; font-size: 10px; gap: 10px; }
  .statusbar__meta { display: none; }
  .statusbar__left { min-width: 0; flex: 1 1 auto; }
  .statusbar__left .readouts { display: none; }
  /* brand truncates with an ellipsis when the right-hand buttons need the room
     (2226 adds a 4th button: SCORE) so the buttons never get pushed off-screen. */
  .statusbar__brand {
    font-size: 10px;
    letter-spacing: 0.13em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .statusbar__brand .dot { margin-right: 6px; }
  .statusbar__right { gap: 7px; flex: 0 0 auto; }
  .statusbar button {
    font-size: 9px;
    letter-spacing: 0.1em;
    padding: 5px 8px;
  }

  .prompt { padding: 9px 12px; gap: 10px; }
  .prompt__copy { display: none; }
  .prompt__left { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* keep the bar, but show only the tappable console chip on touch */
  .prompt__hints { display: flex; gap: 0; flex: 0 0 auto; }
  .prompt__hints .prompt__hint:not(.prompt__hint--btn) { display: none; }
  .prompt__hint--btn { padding: 8px 4px; }

  /* ---- command console: one column so each command gets a full line, and a
     16px input so iOS doesn't auto-zoom the page when it's focused ---- */
  .cmdline { width: min(620px, 92%); bottom: 72px; }
  .cmdline__hint { padding: 11px 13px; }
  .cmdline__hint-grid { grid-template-columns: 1fr; gap: 5px; font-size: 12px; }
  .cmdline__hint-secret,
  .cmdline__hint-secret.is-full,
  .cmdline__hint-secret.is-left,
  .cmdline__hint-secret.is-right { grid-column: 1; }
  .cmdline__log { font-size: 12px; }
  .cmdline__row { padding: 11px 13px; gap: 10px; }
  .cmdline__prompt { font-size: 13px; }
  .cmdline__input { font-size: 16px; }

  .intro__logo { width: 76vw; }

  /* idle eagle is a centered badge now — keep it centred on mobile too */
  .idle__eagle { transform: translate(-50%, -50%); height: clamp(170px, 34vh, 320px); }
}

/* ============================================================
   15b. LANDSCAPE PHONES — short viewport refinements
   The stage row is only ~430px tall; let it scroll and keep the menu
   multi-column so all four modules fit without a giant scroll.
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
  .shell { inset: 10px; }
  .stage { padding: 14px 18px; align-items: flex-start; overflow-y: auto; }

  /* two columns reads better than one tall stack in landscape */
  .menu { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tile { min-height: 84px; padding: 12px 14px; }
  .menu__head { margin-bottom: 14px; }
  .menu__head h2 { font-size: clamp(1.4rem, 5vh, 2rem); margin-bottom: 6px; }
  .menu__slogan { margin-top: 14px; }

  /* claw back vertical room in the chrome */
  .statusbar { padding: 7px 14px; }
  .prompt { padding: 7px 14px; }

  /* keep section windows usable: fill the stage, scroll inside */
  .window { height: 100%; }
  .about { gap: 16px; }
  .about__holo { max-width: 150px; height: 150px; }
}

/* ============================================================
   16. SAPER — easter-egg minefield
   ============================================================ */

.saper {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: saperIn 0.25s ease;
}
@keyframes saperIn { from { opacity: 0; } to { opacity: 1; } }

.saper__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(2px);
}

.saper__win {
  position: relative;
  background: #0d0d0d;
  border: 1px solid var(--yellow);
  box-shadow: 0 0 0 1px rgba(242, 175, 13, 0.15), 0 24px 80px rgba(0, 0, 0, 0.8),
    inset 0 0 60px rgba(242, 175, 13, 0.04);
  padding: 0 0 14px;
  width: min(92vw, 360px);
}
.saper__win--boom { border-color: var(--red); box-shadow: 0 0 0 1px rgba(169,0,0,0.3), 0 24px 80px rgba(0,0,0,0.8); }

.saper__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--fg-faint);
}
.saper__title {
  font-family: 'SYN Nova', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg);
  text-transform: uppercase;
}
.saper__x {
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--fg-dim);
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 3px 7px;
  cursor: none;
  transition: all 0.15s ease;
}
.saper__x:hover { border-color: var(--red); color: var(--red); }

.saper__hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  gap: 10px;
}
.saper__counter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: 'SYN Nova', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(169, 0, 0, 0.5);
}
.saper__counter i {
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.22em;
  color: var(--fg-faint);
  font-weight: 400;
}
.saper__face {
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--yellow);
  font-family: 'SYN Nova', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 8px 12px;
  cursor: none;
  transition: all 0.15s ease;
}
.saper__face:hover { border-color: var(--yellow); box-shadow: 0 0 14px rgba(242,175,13,0.3); }

.saper__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  padding: 0 14px;
}
.saper__cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 175, 13, 0.05);
  border: 1px solid rgba(242, 175, 13, 0.16);
  color: var(--yellow);
  font-family: 'SYN Nova', monospace;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: none;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.saper__cell:hover:not(.is-revealed) {
  background: rgba(242, 175, 13, 0.14);
  border-color: var(--yellow);
}
.saper__cell.is-revealed {
  background: rgba(255, 255, 255, 0.015);
  border-color: rgba(255, 255, 255, 0.06);
  cursor: none;
}
.saper__cell.is-flag { color: var(--red); }
.saper__cell.is-boom {
  background: var(--red);
  border-color: var(--red);
  color: #0d0d0d;
}
/* number colors: yellow → orange → red as count rises */
.saper__cell.n1 { color: #f2af0d; }
.saper__cell.n2 { color: #efa00a; }
.saper__cell.n3 { color: #e8860a; }
.saper__cell.n4 { color: #e06a08; }
.saper__cell.n5 { color: #d44e06; }
.saper__cell.n6 { color: #c63605; }
.saper__cell.n7 { color: #b81a02; }
.saper__cell.n8 { color: #a90000; }

.saper__foot {
  margin-top: 12px;
  padding: 0 14px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  min-height: 14px;
}
.saper__msg--win { color: var(--yellow); }
.saper__msg--boom { color: var(--red); }