/* ============================================================
   MYCEL — design tokens & base
   ============================================================ */
:root {
  --bg: #070a09;
  --bg-2: #0b100e;
  --cyan: #57f2d6;
  --teal: #2bd9b0;
  --red: #e5484d;
  --purple: #a06be0;
  --text: #e9f2ec;
  --muted: #8fa89b;
  --line: rgba(87, 242, 214, 0.14);
  --card: rgba(255, 255, 255, 0.03);
  /* cyan alpha scale — glows, washes, borders */
  --cyan-05: rgba(87, 242, 214, 0.05);
  --cyan-07: rgba(87, 242, 214, 0.07);
  --cyan-08: rgba(87, 242, 214, 0.08);
  --cyan-10: rgba(87, 242, 214, 0.10);
  --cyan-12: rgba(87, 242, 214, 0.12);
  --cyan-16: rgba(87, 242, 214, 0.16);
  --cyan-20: rgba(87, 242, 214, 0.20);
  --cyan-25: rgba(87, 242, 214, 0.25);
  --cyan-35: rgba(87, 242, 214, 0.35);
  --cyan-40: rgba(87, 242, 214, 0.40);
  --cyan-45: rgba(87, 242, 214, 0.45);
  --cyan-55: rgba(87, 242, 214, 0.55);
  /* red alpha scale — honest box, burn/reset */
  --red-05: rgba(229, 72, 77, 0.05);
  --red-14: rgba(229, 72, 77, 0.14);
  --red-15: rgba(229, 72, 77, 0.15);
  --red-40: rgba(229, 72, 77, 0.40);
  --red-50: rgba(229, 72, 77, 0.50);
  --teal-06: rgba(43, 217, 176, 0.06);
  --font-display: "Bungee", "Arial Black", sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--teal); color: var(--bg); }

/* browser surfaces carry the design too */
html { scrollbar-color: var(--cyan-25) var(--bg); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

section { position: relative; scroll-margin-top: 72px; }

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 24px;
}
/* trails a full-bleed band, so it owns no top padding of its own */
.section-inner--tail { padding-top: 0; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.section-kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

.section-lede {
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 48px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primary {
  background: var(--cyan);
  color: #06231c;
  box-shadow: 0 0 24px var(--cyan-35);
}
.btn-primary:hover { box-shadow: 0 0 36px var(--cyan-55); }

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: var(--card);
}
.btn-ghost:hover { border-color: var(--teal); }

.btn-small { padding: 8px 18px; font-size: 0.85rem; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: rgba(7, 10, 9, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

/* The ring-and-leaves mark. Its disc is near-black, so on soil it reads as a
   floating white glyph; the faint cyan halo keeps the edge from dissolving. */
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 14px var(--cyan-08);
  transition: box-shadow 0.25s ease;
}
.brand:hover .brand-mark { box-shadow: 0 0 20px var(--cyan-20); }

.site-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 0.9rem;
}
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lang-toggle {
  min-width: 56px;
  text-align: center;
}
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--cyan); text-decoration: none; }
.site-nav a[aria-current="true"] { color: var(--cyan); text-shadow: 0 0 18px var(--cyan-35); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

#mycel-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 120px 24px 80px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--cyan) 0%, var(--teal) 45%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 32px var(--cyan-25));
  margin-bottom: 20px;
}

.tagline {
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 500;
  margin-bottom: 14px;
}
.tagline em { color: var(--cyan); font-style: normal; }

.hero-sub {
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 28px;
}

/* CA pill */
.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 10px 10px 10px 18px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: var(--card);
  margin-bottom: 28px;
}
.ca-label { color: var(--muted); }
.ca-copy {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  transition: background 0.15s ease;
}
.ca-copy:hover { background: var(--cyan-10); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Pre-launch state, not a control. Mono because it reports status — the same
   voice as the trust strip and the HUD — and deliberately not button-shaped:
   there is nothing to click yet, so nothing should look clickable. */
.hero-status {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.hero-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--teal);
  vertical-align: middle;
}

/* the anti-rug proof, one tap from the buy decision */
.hero-trust {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 46ch;
}
.hero-trust a {
  color: var(--cyan);
  border-bottom: 1px dashed var(--teal);
  white-space: nowrap;
}
.hero-trust a:hover { text-decoration: none; color: var(--text); }
@media (max-width: 860px) {
  .hero-trust { margin-left: auto; margin-right: auto; }
}

.hero-art {
  display: flex;
  justify-content: center;
  position: relative;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 8% -4%;
  background: radial-gradient(ellipse at center, var(--line), transparent 65%);
  z-index: -1;
}
.hero-art img {
  max-height: min(60vh, 560px);
  width: auto;
  max-width: 100%;
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.6));
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-16px) rotate(0.5deg); }
}

.hero-scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  animation: hint-pulse 2.5s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.footer-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 24px 56px;
  text-align: center;
}

.footer-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 20px;
  border: 2px solid var(--line);
  box-shadow: 0 0 24px var(--cyan-20);
}

.footer-disclaimer {
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.footer-disclaimer strong { color: var(--cyan); }

.footer-fine {
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 28px;
}

.footer-links {
  display: flex;
  gap: 24px;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-bottom: 28px;
}

.footer-sigil {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.7;
}

/* ============================================================
   Mini-game — Sporefield
   ============================================================ */
.game-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, var(--cyan-05), transparent 55%),
    #050807;
}

#sporefield {
  display: block;
  width: 100%;
  height: clamp(340px, 55vh, 520px);
  cursor: crosshair;
  touch-action: manipulation;
}

.game-hud {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.hud-stat {
  background: rgba(7, 10, 9, 0.8);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--muted);
}
.hud-stat strong { color: var(--cyan); }

.game-reset {
  margin-left: auto;
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: rgba(7, 10, 9, 0.8);
  border: 1px solid var(--red-40);
  color: var(--red);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.game-reset:hover { background: var(--red-15); }

.game-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.noscript-note {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--muted);
}

/* ============================================================
   The Organic Way
   ============================================================ */
.organic-way { background: var(--bg-2); border-block: 1px solid var(--line); }

.organic-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

.organic-copy > p {
  color: var(--muted);
  margin-bottom: 18px;
  max-width: 56ch;
}
.organic-copy strong { color: var(--text); }

/* The fee rail — the persuasive peak, rendered at full strength:
   three steps at display scale, linked by a growing hypha thread */
/* ---- The rail band -------------------------------------------------
   DESIGN.md asks for these three steps "bigger than feels safe", and the
   shipped version was three cards in .sporm-card chrome — the mechanism
   rendered as the smallest thing in its own section. The band gives it
   its own ground, the numerals run at display scale, and the connector
   is the page's own hypha motif at full strength instead of a 40px dash
   lost in the gutter. No new colour, face, or primitive: everything here
   is the system turned up.
   -------------------------------------------------------------------- */
.rail-band {
  background: var(--bg);
  border-block: 1px solid var(--line);
  padding: 76px 24px 68px;
}
.rail-band-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.rail-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
/* One thread runs the length of the rail and the numerals sit on it, so the
   three steps read as one mechanism rather than three separate cards. It
   fades out past the last step: the network keeps going. */
.rail-steps::before {
  content: "";
  position: absolute;
  top: calc(clamp(3rem, 8vw, 5rem) * 0.5);
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 7px, transparent 7px 14px);
  box-shadow: 0 0 12px var(--cyan-25);
  mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
  animation: hypha-flow 1.2s linear infinite;
}
/* A diagram, not three cards: no surface, no border, no radius. */
.rail-steps li {
  position: relative;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.rail-steps strong {
  color: var(--cyan);
  display: block;
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 8px;
}
/* Ghosted so three numerals at 5rem stay inside the One Glow Rule: they
   are structure, and the labels underneath are the voice. */
/* Interrupts the thread rather than floating above it: the numeral's own
   ground is the band's ground. Held back from full strength so three
   display-scale glyphs stay inside the One Glow Rule — they are structure,
   and the labels beneath them are the voice. */
.rail-steps .step-num {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  margin-bottom: 22px;
  padding-right: 22px;
  border-radius: 0;
  background: var(--bg);
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
  color: var(--cyan);
  opacity: 0.5;
}
@keyframes hypha-flow {
  to { background-position: 14px 0; }
}

/* the one outbound link, now after the payload instead of before it */
.rail-out {
  display: inline-flex;
  margin-top: 40px;
}

@media (max-width: 860px) {
  .rail-band { padding: 60px 20px 56px; }
  .rail-steps { grid-template-columns: 1fr; gap: 48px; }
  .rail-steps::before { display: none; }
  .rail-steps .step-num { margin-bottom: 12px; padding-right: 0; }
  .rail-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    box-shadow: 0 0 12px var(--cyan-25);
    animation: hypha-flow-v 1.2s linear infinite;
    top: auto;
    bottom: -48px;
    right: auto;
    left: 13px; /* the numeral's optical centre at this size */
    width: 2px;
    height: 48px;
    background: repeating-linear-gradient(180deg, var(--teal) 0 7px, transparent 7px 14px);
  }
  @keyframes hypha-flow-v {
    to { background-position: 0 14px; }
  }
}

.organic-side img {
  max-height: 420px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.55));
}

.side-caption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.side-caption strong { color: var(--cyan); }

.ai-layer-figure {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}
.ai-layer-figure img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
}
.ai-layer-figure p { color: var(--muted); font-size: 0.95rem; }

@media (max-width: 560px) {
  .ai-layer-figure { flex-direction: column; text-align: center; }
}

/* The page states its own status exactly once, here. Ember on the leading
   clause because this is the honesty register — the same reserve the honest
   box draws on — and never decoration. */
.rail-status {
  max-width: 64ch;
  margin: 34px auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--muted);
}
.rail-status strong {
  color: var(--red);
  font-weight: 400;
}

.honest-box {
  margin: 56px auto 0;
  max-width: 640px;
  border: 1px dashed var(--red-50);
  border-radius: 16px;
  padding: 24px 26px;
  background: var(--red-05);
}
.honest-box h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--red);
  margin-bottom: 10px;
}
.honest-box ul {
  list-style: none;
  color: var(--muted);
  margin-bottom: 12px;
}
.honest-box li::before { content: "✕ "; color: var(--red); }
.honest-box p {
  font-weight: 700;
  color: var(--text);
}

@media (max-width: 860px) {
  .organic-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   The Five Sporms
   ============================================================ */
.sporm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* five fighters, no orphans: 3 up top, 2 wider below */
@media (min-width: 900px) {
  .sporm-grid { grid-template-columns: repeat(6, 1fr); }
  .sporm-card { grid-column: span 2; }
  .sporm-card:nth-child(4),
  .sporm-card:nth-child(5) { grid-column: span 3; }
}

.sporm-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 20px 24px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sporm-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-40);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 24px var(--cyan-08);
}

.sporm-art {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 65%, var(--cyan-07), transparent 70%);
}
.sporm-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sporm-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  color: var(--cyan);
}
/* one accent per sporm, matched to its portrait */
.sporm-card:nth-child(1) h3 { color: var(--red); }    /* CEO — red cap */
.sporm-card:nth-child(2) h3 { color: var(--purple); } /* Chaos — cosmic purple */
.sporm-card:nth-child(4) h3 { color: var(--muted); }  /* Silent — says nothing */
.sporm-card:nth-child(5) h3 { color: var(--teal); }   /* Hyper — pure signal */

.sporm-quote {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 10px;
}

.sporm-bio {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ============================================================
   Lore
   ============================================================ */
.lore { background: var(--bg-2); border-block: 1px solid var(--line); }

.lore-panels {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.lore-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.lore-panel--flip .lore-art { order: 2; }

.lore-art {
  display: flex;
  justify-content: center;
}
.lore-art img {
  max-height: 380px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.55));
  transition: transform 0.3s ease;
}
.lore-panel:hover .lore-art img { transform: translateY(-6px) rotate(-1deg); }

.lore-text h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--text);
}
.lore-num {
  color: var(--teal);
  margin-right: 10px;
}
.lore-text p { color: var(--muted); max-width: 52ch; }

@media (max-width: 760px) {
  .lore-panel,
  .lore-panel--flip { grid-template-columns: 1fr; gap: 24px; }
  .lore-panel--flip .lore-art { order: 0; }
  .lore-art img { max-height: 280px; }
}

/* ============================================================
   Meme Vault
   ============================================================ */
.memes { background: var(--bg-2); border-block: 1px solid var(--line); }

/* rolling window: 3 visible on desktop, 2 on tablet, 1 on phones */
.meme-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding: 4px;
  scrollbar-width: none;
  padding: 4px; /* room for hover lift + focus ring */
}
.meme-rail::-webkit-scrollbar { display: none; }

.meme-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
@media (min-width: 640px) { .meme-card { flex-basis: calc((100% - 18px) / 2); } }
@media (min-width: 900px) { .meme-card { flex-basis: calc((100% - 36px) / 3); } }

.meme-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-40);
}
.meme-card img {
  width: 100%;
  border-radius: 10px;
}
.meme-card figcaption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  padding-top: 10px;
}

/* controls hidden until JS wires them (noscript gets the grid below) */
.meme-controls {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.meme-controls.is-live { display: flex; }
.meme-counter {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--muted);
}

/* no-JS fallback: plain masonry grid */
.meme-grid {
  columns: 3;
  column-gap: 18px;
}
.meme-grid .meme-card {
  display: block;
  break-inside: avoid;
  margin-bottom: 18px;
}

@media (max-width: 900px) { .meme-grid { columns: 2; } }
@media (max-width: 520px) { .meme-grid { columns: 2; column-gap: 12px; } .meme-card { padding: 10px; margin-bottom: 12px; } }

/* ============================================================
   Into the Deep
   ============================================================ */
.deep {
  background:
    radial-gradient(ellipse at 20% 80%, var(--teal-06), transparent 55%),
    radial-gradient(ellipse at 85% 15%, var(--cyan-05), transparent 50%),
    var(--bg);
  overflow: hidden;
}

.deep-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.deep-art {
  display: flex;
  justify-content: center;
  position: relative;
}
.deep-art::before {
  content: "";
  position: absolute;
  inset: 12% 4%;
  background: radial-gradient(ellipse at center, var(--cyan-16), transparent 62%);
  animation: lantern-sway 5s ease-in-out infinite alternate;
}
@keyframes lantern-sway {
  from { opacity: 0.55; transform: translateX(-6%); }
  to { opacity: 1; transform: translateX(6%); }
}
.deep-art img {
  max-height: 460px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 16px 44px rgba(0, 0, 0, 0.6));
}

.deep-copy p { color: var(--muted); margin-bottom: 16px; max-width: 56ch; }
.deep-copy strong { color: var(--text); }

.deep-copy p.deep-quote {
  font-family: var(--font-mono);
  color: var(--cyan);
  border-left: 3px solid var(--teal);
  padding-left: 16px;
}

@media (max-width: 860px) {
  .deep-inner { grid-template-columns: 1fr; gap: 32px; }
  .deep-art img { max-height: 320px; }
}

/* ============================================================
   Animations — scroll reveal, hovers, idle motion
   (JS adds .reveal at runtime, so no-JS/reduced-motion = visible)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* lore art slides in from its own side */
.lore-panel .lore-art.reveal { transform: translateX(-36px); }
.lore-panel--flip .lore-art.reveal { transform: translateX(36px); }
.lore-panel .lore-art.reveal.in,
.lore-panel--flip .lore-art.reveal.in { transform: none; }

/* lore art idle drift (once revealed) */
.lore-art img { animation: lore-float 7s ease-in-out infinite alternate; }
.lore-panel:nth-child(even) .lore-art img { animation-delay: -3.5s; }

@keyframes lore-float {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

/* sporm cards: art leans in on hover */
.sporm-art img {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sporm-card:hover .sporm-art img {
  transform: scale(1.06) rotate(-1.5deg);
}

/* honest box: slow ember pulse on the border */
.honest-box { animation: ember 4s ease-in-out infinite; }
@keyframes ember {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 72, 77, 0); }
  50% { box-shadow: 0 0 26px var(--red-14); }
}

/* CA pill: gentle breathing glow pre-launch */
.ca-pill { animation: ca-breathe 3.5s ease-in-out infinite; }
@keyframes ca-breathe {
  0%, 100% { border-color: var(--line); }
  50% { border-color: var(--cyan-45); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lore-art img, .honest-box, .ca-pill { animation: none; }
  .rail-steps li::after { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 110px;
  }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-art img { max-height: 34vh; }
}

@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 16px 0;
    justify-content: space-between;
  }
  .header-actions {
    margin-left: auto;
  }
  /* nav becomes a scrollable second row instead of vanishing */
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    font-size: 0.85rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    padding: 11px 10px; /* ~44px touch target */
    white-space: nowrap;
  }
  section { scroll-margin-top: 104px; }
  .section-inner { padding: 72px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art img, .hero-scroll-hint { animation: none; }
  .meme-rail { scroll-behavior: auto; }
}