/* ════════════════════════════════════════════════════════════
   paledust.com design system.
   Pale, particulate, contemplative. No bouncy motion, no neon.
   Faded-photograph-of-a-nebula color story.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --bg:        #0a0a0e;        /* void */
  --bg-2:      #12121a;        /* slightly raised */
  --bg-3:      #1a1a24;        /* cards / wells */
  --line:      #2a2a36;        /* hairlines */
  --line-2:    #3a3a48;        /* hover hairlines */
  --ink:       #e8e4dc;        /* bone */
  --ink-2:     #b8b3a8;        /* faded bone */
  --ink-mute:  #74706a;        /* dust */
  --ink-quiet: #4a4844;        /* near-silent */

  --c-cyan:    #7fcfc0;        /* faded cyan, primary accent */
  --c-cyan-2:  #4f9f92;        /* deeper */
  --c-amber:   #d4a574;        /* sun-bleached amber, warm accent */
  --c-violet:  #9b7fb8;        /* dusty violet, rare highlight */

  /* Type scale */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --pad-page:  clamp(16px, 4vw, 48px);
  --max-w:     1180px;
  --rad-sm:    2px;
  --rad-md:    4px;

  /* Motion */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Section anchors: leave breathing room above the heading when nav
   clicks land on them, so the eyebrow + heading aren't flush with
   the viewport edge. The header is absolute (not fixed), so we only
   need a small offset for visual comfort. */
:target { scroll-margin-top: 32px; }
.section { scroll-margin-top: 32px; }

/* Skip link: hidden until focused via tab. Anchors keyboard users
   straight into the main content past the dust canvas + grain. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--rad-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 16px;
  outline: 1px solid var(--c-cyan);
  outline-offset: 3px;
}

body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  /* Subtle vertical gradient: bottom is slightly warmer */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(127, 207, 192, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(212, 165, 116, 0.025) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, #08080c 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Drifting dust canvas, fixed, behind everything */
#dust-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* CSS-only film grain. SVG noise → no asset, ~1KB inlined. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* All real content above particles + grain */
.site-header,
main,
.site-footer { position: relative; z-index: 2; }

a { color: var(--ink); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--c-cyan); }

::selection { background: rgba(127, 207, 192, 0.3); color: var(--ink); }

/* ── BRAND MARK ─────────────────────────────────────────────
   pale·dust: the middle dot is a tiny glowing star. Sized
   relative to the parent text so it scales with the brand
   wherever it appears (header, hero, footer). */
.brand-mark,
.bm-text { font-family: var(--f-display); font-weight: 300; }
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  user-select: none;
}
.bm-star {
  display: inline-block;
  width: 0.36em; height: 0.36em;
  margin: 0 0.4em;
  background: var(--c-cyan);
  border-radius: 50%;
  vertical-align: 0.16em;
  box-shadow:
    0 0 6px rgba(127, 207, 192, 0.85),
    0 0 14px rgba(127, 207, 192, 0.45),
    0 0 28px rgba(127, 207, 192, 0.18);
  animation: starBreath 4.2s ease-in-out infinite;
}
.bm-star.small { width: 0.28em; height: 0.28em; }
@keyframes starBreath {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(127, 207, 192, 0.85),
      0 0 14px rgba(127, 207, 192, 0.45),
      0 0 28px rgba(127, 207, 192, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 8px rgba(127, 207, 192, 1),
      0 0 22px rgba(127, 207, 192, 0.6),
      0 0 42px rgba(127, 207, 192, 0.28);
    transform: scale(1.08);
  }
}

/* ── HEADER ─────────────────────────────────────────────────
   Sticky-ish, very low-key. No background blur, would compete
   with the particle effect. */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--pad-page);
  z-index: 10;
}
.site-nav {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--ink-mute);
  position: relative;
  padding: 4px 0;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--c-cyan);
  transition: right 0.3s var(--ease-out);
}
.site-nav a:hover::after { right: 0; }

/* ── HERO ───────────────────────────────────────────────────
   Full viewport. Brand mark big-and-quiet. */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad-page);
  position: relative;
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.hero-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(28px, 6vh, 56px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--ink-quiet);
}
.hero-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(56px, 14vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: clamp(24px, 4vh, 40px);
  display: inline-flex;
  align-items: baseline;
}
.ht-line { display: inline-block; }
.ht-star {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  margin: 0 0.18em;
  background: var(--c-cyan);
  border-radius: 50%;
  vertical-align: 0.18em;
  box-shadow:
    0 0 10px rgba(127, 207, 192, 0.85),
    0 0 28px rgba(127, 207, 192, 0.5),
    0 0 60px rgba(127, 207, 192, 0.22);
  animation: starBreath 4.2s ease-in-out infinite;
  position: relative;
  top: -0.15em;
}
.hero-tag {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 18px;
  max-width: 32ch;
}
.hero-sub {
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--ink-mute);
  max-width: 52ch;
  margin-bottom: clamp(32px, 5vh, 48px);
  line-height: 1.7;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Scroll hint at bottom of hero */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  pointer-events: none;
}
.hsh-line {
  width: 1px; height: 32px;
  background: linear-gradient(180deg, var(--ink-quiet), transparent);
  animation: scrollHint 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.6); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 0.85; }
}

/* ── 404 PAGE ───────────────────────────────────────────────
   Reuses the hero look with a giant "404" wordmark instead of
   the brand. Fades up the same way. Sits between header + footer. */
.four-oh-four {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  padding: 120px var(--pad-page) 80px;
  position: relative;
  z-index: 2;
}
.foo-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.foo-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(20px, 4vh, 40px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.foo-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--ink-quiet);
}
.foo-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(96px, 22vw, 240px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ink);
  margin-bottom: clamp(20px, 4vh, 32px);
}
.foo-tag {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--ink);
  margin-bottom: 14px;
}
.foo-sub {
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--ink-mute);
  max-width: 48ch;
  margin-bottom: clamp(28px, 4vh, 40px);
  line-height: 1.7;
}
.foo-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ── BUTTONS ────────────────────────────────────────────────
   Minimal, hairline-bordered. No fills (except primary). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--rad-sm);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  color: var(--bg);
  box-shadow: 0 0 24px rgba(127, 207, 192, 0.35);
}
.btn-ghost {
  border-color: var(--line);
  color: var(--ink-2);
}
.btn-ghost:hover {
  border-color: var(--c-cyan);
  color: var(--c-cyan);
}
.btn-link {
  padding: 12px 0;
  border-color: transparent;
  color: var(--ink-mute);
}
.btn-link:hover { color: var(--c-cyan); }

/* Keyboard focus rings: only show on tab navigation, not on click.
   Subtle cyan outline matches the brand without screaming. */
.btn:focus-visible,
.site-nav a:focus-visible,
.signal-links a:focus-visible,
.footer-link:focus-visible,
.brand-mark:focus-visible {
  outline: 1px solid var(--c-cyan);
  outline-offset: 3px;
}

/* ── SECTIONS ───────────────────────────────────────────────
   Generous vertical breathing room. Hairline separator at top
   of each section so the page reads as a stack of registers. */
.section {
  padding: clamp(80px, 14vh, 160px) var(--pad-page);
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.section-header {
  margin-bottom: clamp(48px, 8vh, 80px);
}
.section-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.section-heading {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.section-intro {
  margin-top: 22px;
  max-width: 56ch;
  color: var(--ink-2);
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.7;
}

/* ── GAMES ──────────────────────────────────────────────────
   Each game is a horizontal asymmetric layout: meta+body on
   the left, generative CSS art on the right. Stacks on mobile. */
.game {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(32px, 6vw, 56px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
  position: relative;
}
.game:first-of-type { border-top: none; padding-top: 0; }
.game-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.game-meta .game-num { margin-left: auto; }
.game-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-cyan);
}
.game-status.muted { color: var(--ink-mute); }
.status-dot {
  width: 6px; height: 6px;
  background: var(--c-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(127, 207, 192, 0.7);
  animation: starBreath 3s ease-in-out infinite;
}
.status-dot.dot-soon {
  background: var(--ink-quiet);
  box-shadow: none;
  animation: none;
}
/* In-development pulse: warm amber, slower than the cyan "live" dot */
.status-dot.dot-indev {
  background: var(--c-amber);
  box-shadow: 0 0 8px rgba(212, 165, 116, 0.7);
  animation: starBreath 4.6s ease-in-out infinite;
}
.game-status.game-status-indev { color: var(--c-amber); }
/* Platform pill: emphasizes "runs in your browser" framing across cards */
.game-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink-2);
  font-size: 9.5px;
  letter-spacing: 0.18em;
}
.game-platform.muted { color: var(--ink-mute); opacity: 0.7; }
.gp-dot {
  width: 5px; height: 5px;
  background: var(--c-amber);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(212, 165, 116, 0.5);
}
.game-platform.muted .gp-dot {
  background: var(--ink-quiet);
  box-shadow: none;
}
/* Download variant: violet dot to differentiate from the amber "browser" pill.
   Border slightly tinted so the pill itself reads as "different platform". */
.game-platform-download {
  border-color: rgba(155, 127, 184, 0.35);
  color: var(--ink-2);
}
.game-platform-download .gp-dot {
  background: var(--c-violet);
  box-shadow: 0 0 6px rgba(155, 127, 184, 0.5);
}
.game-num {
  font-size: 12px;
  color: var(--ink-quiet);
}
.game-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
.game-title.muted { color: var(--ink-mute); }
.game-tagline {
  font-family: var(--f-display);
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--c-cyan);
  margin-bottom: 18px;
  font-weight: 400;
}
.game-tagline.muted { color: var(--ink-mute); }
.game-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}
.game-tags li {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.game-tags.muted li { opacity: 0.5; }
.game-blurb {
  color: var(--ink-2);
  margin-bottom: 28px;
  max-width: 48ch;
}
.game-blurb.muted { color: var(--ink-mute); }
.game-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Generative art panel: orbital deck visualization + Deckrunner HUD overlay */
.game-art {
  align-self: stretch;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--rad-md);
  background:
    radial-gradient(ellipse at center, rgba(127, 207, 192, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  position: relative;
  overflow: hidden;
}
.game-art.muted { opacity: 0.6; }
/* When the art panel is itself a link (featured live game), it acts as
   a giant click target and reveals a small "launch" hint on hover. */
.game-art-link {
  display: block;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.game-art-link:hover {
  border-color: var(--c-cyan);
  box-shadow: 0 0 28px rgba(127, 207, 192, 0.18) inset;
}
.art-launch-hint {
  position: absolute;
  left: 50%;
  top: calc(50% + 28px);
  transform: translate(-50%, 6px);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cyan);
  padding: 6px 14px;
  border: 1px solid rgba(127, 207, 192, 0.4);
  border-radius: 2px;
  background: rgba(10, 10, 14, 0.7);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}
.game-art-link:hover .art-launch-hint,
.game-art-link:focus-visible .art-launch-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* On hover, slightly dim the HUD so the launch prompt reads as primary */
.game-art-link:hover .dr-hud,
.game-art-link:focus-visible .dr-hud { opacity: 0.55; transition: opacity 0.3s var(--ease); }
.dr-hud { transition: opacity 0.3s var(--ease); }
.game-art-link:focus-visible {
  outline: 1px solid var(--c-cyan);
  outline-offset: 4px;
}
.art-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-orbit {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  border-top-color: var(--c-cyan);
  animation: orbit 12s linear infinite;
}
.art-orbit-2 {
  width: 80%;
  animation-duration: 24s;
  animation-direction: reverse;
  border-top-color: var(--c-amber);
  opacity: 0.5;
}
.art-core {
  width: 14%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-cyan) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  animation: starBreath 5s ease-in-out infinite;
}
.art-deck {
  position: absolute;
  width: 28%; height: 6px;
  background: linear-gradient(90deg, transparent, var(--c-cyan), transparent);
  opacity: 0.45;
  border-radius: 50%;
}
.art-deck-1 { top: 30%; left: 12%; transform: rotate(-12deg); animation: deckDrift 8s ease-in-out infinite; }
.art-deck-2 { top: 52%; right: 10%; transform: rotate(8deg); animation: deckDrift 11s ease-in-out infinite reverse; }
.art-deck-3 { bottom: 24%; left: 30%; transform: rotate(-4deg); animation: deckDrift 13s ease-in-out infinite; }
.art-flare {
  position: absolute;
  width: 1px; height: 80%;
  background: linear-gradient(180deg, transparent, rgba(127, 207, 192, 0.3), transparent);
  left: 50%;
  filter: blur(0.5px);
}
.art-soon-ring,
.art-soon-ring-2 {
  position: absolute;
  width: 50%;
  aspect-ratio: 1;
  border: 1px dashed var(--ink-quiet);
  border-radius: 50%;
  animation: orbit 30s linear infinite;
}
.art-soon-ring-2 {
  width: 70%;
  animation-direction: reverse;
  animation-duration: 50s;
  opacity: 0.5;
}
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes deckDrift {
  0%, 100% { transform: translateX(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateX(8px) rotate(var(--rot, 0deg)); }
}

/* ── GAME PREVIEW IMAGES ────────────────────────────────────
   Real screenshots fill the panel via object-fit: cover. Slight
   desaturation idle pulls them toward the muted pale-dust palette,
   then snaps back to full saturation on hover for a quiet "wake up"
   beat. Vignette + scanline overlays give the in-game / CRT feel
   without competing with the photo. */
.game-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.88) brightness(0.92) contrast(1.04);
  transition: filter 0.4s var(--ease), transform 0.6s var(--ease);
}
.game-art-link:hover .game-art-img,
.game-art-link:focus-visible .game-art-img {
  filter: saturate(1.05) brightness(1.05) contrast(1.05);
  transform: scale(1.03);
}

/* Subtle CRT scanline overlay: keeps the screenshot feeling like
   "the game" without obscuring it. Fades on hover so the image
   reads cleanly when the user is engaging. */
.art-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 3px,
    rgba(0, 0, 0, 0) 4px);
  mix-blend-mode: multiply;
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.game-art-link:hover .art-scan,
.game-art-link:focus-visible .art-scan { opacity: 0.18; }

/* Corner vignette: blends the image into the dark panel edges. */
.art-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

/* ── ABOUT ──────────────────────────────────────────────────
   Two-column: prose + sidebar card with stats. */
.about-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.about-prose p { margin-bottom: 18px; }
.about-prose p:last-child { margin-bottom: 0; }
.about-lead {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink);
  margin-bottom: 24px !important;
  line-height: 1.5;
}
.about-prose em {
  color: var(--c-cyan);
  font-style: italic;
}
.about-prose a {
  color: var(--c-cyan);
  border-bottom: 1px solid rgba(127, 207, 192, 0.3);
  padding-bottom: 1px;
}
.about-prose a:hover { border-bottom-color: var(--c-cyan); }

.about-card {
  border: 1px solid var(--line);
  background: rgba(20, 20, 28, 0.4);
  padding: 24px 24px 18px;
  border-radius: var(--rad-md);
  font-family: var(--f-mono);
  font-size: 12px;
}
.ac-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.05em;
}
.ac-row:last-child { border-bottom: none; }
.ac-key {
  color: var(--ink-mute);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.18em;
}
.ac-val {
  color: var(--ink);
}

/* ── SIGNAL ─────────────────────────────────────────────────
   Contact links as a neat list with hover migration. */
.signal-lead {
  max-width: 50ch;
  margin-bottom: 36px;
  color: var(--ink-2);
}
.signal-links {
  list-style: none;
  border-top: 1px solid var(--line);
}
.signal-links li {
  border-bottom: 1px solid var(--line);
}
.signal-links a {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 13px;
  transition: all 0.25s var(--ease);
}
.signal-links a:hover {
  color: var(--c-cyan);
  padding-left: 14px;
}
.sl-key {
  color: var(--ink-mute);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.2em;
}
.sl-val {
  color: var(--ink);
  font-size: 14px;
}
.signal-links a:hover .sl-val { color: var(--c-cyan); }
.sl-arrow {
  color: var(--ink-mute);
  font-size: 14px;
  transition: transform 0.25s var(--ease);
}
.signal-links a:hover .sl-arrow {
  color: var(--c-cyan);
  transform: translate(2px, -2px);
}

/* ── FOOTER ─────────────────────────────────────────────────
   Three-column lockup: brand + tagline | game lineup | signal mini-links.
   Stacks on mobile. Hairline rule above the copyright line. */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px var(--pad-page) 28px;
  margin-top: 80px;
  position: relative;
  z-index: 2;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-brand .footer-brand { margin-bottom: 4px; }
.footer-brand {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.02em;
}
.footer-tag {
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--ink-mute);
  max-width: 30ch;
  margin: 0;
  line-height: 1.5;
}
.footer-key {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.footer-link {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
  width: fit-content;
}
.footer-link:hover {
  color: var(--c-cyan);
  transform: translateX(2px);
}
.footer-link span { color: var(--ink-quiet); transition: color 0.2s var(--ease); }
.footer-link:hover span { color: var(--c-cyan); }

.footer-rule {
  max-width: var(--max-w);
  margin: 36px auto 18px;
  height: 1px;
  background: var(--line);
}
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  display: flex;
  gap: 8px;
  align-items: center;
}
.dot-sep { color: var(--ink-quiet); }

/* ── REVEAL ANIMATIONS ──────────────────────────────────────
   Sections fade up as they enter viewport. JS toggles class.
   Reduced-motion bypasses entirely. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ── RESPONSIVE ─────────────────────────────────────────────
   Single breakpoint at 760px. Stacks the two-column layouts. */
@media (max-width: 760px) {
  .site-header { padding: 18px var(--pad-page); }
  .site-nav { gap: 14px; font-size: 10px; }
  .game { grid-template-columns: 1fr; }
  .game-art { min-height: 220px; order: -1; margin-bottom: 24px; }
  .about-grid { grid-template-columns: 1fr; }
  .signal-links a {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .sl-val { font-size: 13px; }
  /* Footer: stack the three columns vertically on phones */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-bottom { flex-wrap: wrap; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────
   Honor user preference. Particles also gate on prefers-reduced
   in JS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}