/* ============================================================
   Pholoh Creators — Preview (editorial-brutalist, cream + black)
   Inspired by: synapserstudio.com, cyrillic.digital
   ============================================================ */

:root {
  --bg: #F4F1EA;          /* warm cream */
  --bg-tint: #ECE8DD;     /* slightly darker grid lines */
  --ink: #0B0B0B;         /* near-black */
  --ink-2: #2A2A2A;
  --ink-3: #555;
  --ink-4: #8A8884;       /* muted/captions */
  --line: rgba(11,11,11,0.15);
  --line-2: rgba(11,11,11,0.06);
  --accent: #0B0B0B;
  --hover: #1a1a1a;
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* subtle grid in the background (Synapser-style) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

.muted { color: var(--ink-4); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 40px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.brand { display: flex; align-items: center; gap: 4px; justify-self: center; }
.brand-mark {
  display: inline-block;
  width: 22px; height: 22px;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  line-height: 22px;
  font-size: 14px;
  border-radius: 2px;
}
.brand-word { font-weight: 700; letter-spacing: 0.15em; }
.brand-sub { color: var(--ink-4); margin-left: 4px; font-weight: 700; }
/* Standalone CREATORS badge next to the transparent Pholoh logo (landing).
   No slash — it's its own little chip, bold, mono, outlined. */
.brand-creators {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  margin-left: 2px;
  align-self: center;
  display: inline-block;
  vertical-align: middle;
}
/* Dark-context override (slide-out menu eyebrow on the dark overlay). */
.menu-eyebrow .brand-creators {
  color: #f4f1ea;
}
/* Pull CREATORS in tight against the right edge of the transparent logo —
   the logo's PNG has a bit of empty pixel padding on its right side, so we
   negate it here to remove the visible gap. */
.brand .brand-logo + .brand-creators { margin-left: -8px; }
/* Pholoh heart-logo replaces the brand mark + wordmark in the centered slot.
   Sized large enough that the carved-out letterforms inside the silhouette
   are legible — at small sizes they blur into the black silhouette and the
   logo reads as a featureless blob. */
.brand-logo {
  height: 64px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .brand-logo { height: 48px; }
}

.topnav { display: flex; gap: 28px; justify-content: center; }
.nav-link {
  color: var(--ink-4);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link span { color: var(--ink); margin-left: 2px; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-link.active::before {
  content: '●';
  margin-right: 8px;
  color: var(--ink);
}

/* ============================================================
   HAMBURGER MENU (replaces inline nav on landing — same UX as pholoh.us)
   ============================================================ */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  justify-self: start;
}
.menu-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 14px;
}
.menu-icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.menu-toggle:hover { opacity: 0.75; }
.menu-toggle:active { transform: scale(0.94); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0a0a0a;
  color: #f4f1ea;
  overflow-y: auto;
  /* Fade-in on open. Removed via JS [hidden] when closed. */
  animation: menuFadeIn 0.18s ease;
}
@keyframes menuFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.menu-close {
  position: absolute;
  top: 16px;
  left: 24px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #f4f1ea;
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s ease;
}
.menu-close:hover { background: rgba(255,255,255,0.08); }
.menu-panel {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 32px 64px;
  gap: 6px;
}
.menu-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f4f1ea;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.menu-eyebrow .brand-sub { color: rgba(244,241,234,0.55); margin-left: 4px; font-weight: 500; }
.menu-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  /* Sized to match the eyebrow scale — same vibe as PHOLOH /CREATORS at top */
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4f1ea;
  text-decoration: none;
  transition: color .15s ease, padding-left .2s ease;
}
/* Override .nav-link span { color: var(--ink) } from the light-bg nav rule —
   the label span inside each menu-item must inherit the cream/white menu-item
   color, not the dark ink color, or it disappears against the dark overlay. */
.menu-overlay .menu-item span { color: inherit; margin: 0; }
.menu-item:hover { color: #ff5b3a; padding-left: 8px; }
.menu-overlay .menu-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  /* Muted cream — visible but quieter than the WHITE label next to it,
     same vibe as the gray "/CREATORS" sub-mark in the eyebrow. */
  color: rgba(244,241,234,0.45);
  flex-shrink: 0;
  width: 40px;
}
.menu-footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(244,241,234,0.6);
}
.menu-footer .dot.live {
  background: #25d366;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: inline-block;
}

/* Lock background scroll while the menu is open (added by JS). */
body.menu-open { overflow: hidden; }

.utility {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  color: var(--ink-3);
}
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
}
.dot.live { background: #d63a00; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 100px 40px 80px;
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
}

.hero-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 60px;
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.hero-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(72px, 12vw, 200px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  margin-bottom: 56px;
}
.hero-line { display: block; }
.hero-line em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: -0.02em;
}

.hero-lead {
  max-width: 600px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 80px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.hero-stats .stat {
  border-right: 1px solid var(--line);
  padding: 0 28px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.hero-stats .stat:last-child { border-right: 0; }
.hero-stats .stat:first-child { padding-left: 0; }
.stat-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.stat-lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  text-transform: uppercase;
}

.scroll-prompt {
  position: absolute;
  bottom: 30px;
  right: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
}

/* ============================================================
   THE WALL  (Hall of Fame grid)
   ============================================================ */
.wall {
  padding: 100px 40px 120px;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 24px;
}

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.2s;
}
.card:hover {
  border-color: var(--ink-2);
  transform: translateY(-3px);
}

.card-xl { grid-column: span 6; grid-row: span 2; min-height: 600px; }
.card-md { grid-column: span 3; grid-row: span 1; min-height: 380px; }
.card-money { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.card-money .card-meta,
.card-money .card-handle,
.card-money .muted { color: rgba(244, 241, 234, 0.6); }
.card-money .card-divider { background: rgba(244, 241, 234, 0.2); }

.card-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.card-money .card-meta { border-color: rgba(244, 241, 234, 0.2); }

.card-photo {
  flex: 1 1 auto;
  background-size: cover;
  background-position: center;
  background-color: #d0c8b3;
  filter: grayscale(15%) contrast(1.02);
  min-height: 240px;
}
.card-xl .card-photo { min-height: 380px; }

.card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-xl .card-body { padding: 28px 28px 30px; }

.card-name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 38px);
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.card-xl .card-name {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.88;
}

.card-handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.card-plat {
  background: var(--ink);
  color: var(--bg);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
}
.card-money .card-plat { background: var(--bg); color: var(--ink); }

.card-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.card-footnote {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 12px;
}
.card-footnote .muted {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.card-footnote .big {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 36px);
  letter-spacing: -0.02em;
}

/* MONEY CARD — earnings as the hero */
.card-money .card-money-num {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4vw, 64px);
  letter-spacing: -0.03em;
  line-height: 0.92;
  margin-top: 4px;
}
.card-money-cents {
  font-size: 0.55em;
  color: rgba(244,241,234,0.55);
  font-weight: 500;
}
.card-money-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(244,241,234,0.6);
  margin-bottom: 10px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  border-top: 1px solid var(--line);
  padding: 28px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.foot-mid { text-align: center; }
.foot-right { text-align: right; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .wall { grid-template-columns: repeat(6, 1fr); }
  .card-xl { grid-column: span 6; }
  .card-md { grid-column: span 3; }
}
@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr auto 1fr; row-gap: 14px; padding: 16px 20px; }
  .topbar .brand { justify-self: center; grid-column: 2; }
  .topnav { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 16px; }
  .utility { display: none; }
  .hero { padding: 60px 20px 60px; }
  .wall { padding: 60px 20px 80px; grid-template-columns: 1fr 1fr; }
  .card-xl, .card-md { grid-column: span 2; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat:nth-child(2) { border-right: 0; }
  .hero-stats .stat:nth-child(3), .hero-stats .stat:nth-child(4) {
    border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px;
  }
}

/* ============================================================
   TAB PANEL VISIBILITY
   ============================================================ */
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in 0.4s cubic-bezier(.2,.8,.2,1); }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.hidden { display: none !important; }

/* ============================================================
   AUTH ERROR SCREEN
   ============================================================ */
.auth-screen {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.auth-card {
  max-width: 560px;
  text-align: left;
}
.auth-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 20px;
}
.auth-lead {
  font-size: 17px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ============================================================
   SHORTER HERO (used on Good/Bad/Rules)
   ============================================================ */
.hero-short { padding: 80px 40px 60px; }
.hero-short .hero-title { margin-bottom: 32px; }
.hero-short .hero-lead { margin-bottom: 0; }

.hero-bad .hero-title em { color: #b8311a; }

/* Section meta heading (used for roster, etc.) */
.section-meta {
  padding: 0 40px;
  max-width: 1480px;
  margin: 60px auto 28px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.roster-wrap { padding-bottom: 80px; }
.wall-compact { grid-auto-rows: minmax(180px, auto); padding-top: 0; }
.wall-compact .card-xl { grid-column: span 6; grid-row: span 1; min-height: 420px; }

/* ============================================================
   VIDEO GRID (Good / Bad tabs)
   ============================================================ */
.video-grid {
  padding: 40px 40px 120px;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vcard {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.2s;
}
.vcard:hover {
  transform: translateY(-3px);
  border-color: var(--ink-2);
}
.vcard-bad { border-color: rgba(184, 49, 26, 0.18); }

.vmedia {
  aspect-ratio: 9 / 16;
  background: #1a1a1a;
  position: relative;
  overflow: hidden;
}
.vmedia video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a1a1a;
}
.video-empty {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.vbody {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grade-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--bg-tint);
  color: var(--ink);
  border: 1px solid var(--line);
}
/* Continuous red→green ramp. Higher score = more confident green;
   lower score = more confident red. 5–6 stays neutral cream. */
.grade-great { background: #1d6e47; color: #fff; border-color: transparent; }      /* 9–10 */
.grade-good  { background: #6aa687; color: #0e3b25; border-color: transparent; }   /* 8 */
.grade-okay  { background: #c7dccf; color: #1d6e47; border-color: transparent; }   /* 7 */
.grade-mid   { background: #d4ca9c; color: #3a3a25; border-color: transparent; }   /* 5–6 */
.grade-low   { background: #e0a89a; color: #4a1a10; border-color: transparent; }   /* 3–4 */
.grade-fail  { background: #b8311a; color: #fff;    border-color: transparent; }   /* 1–2 */
/* Back-compat alias — old class name still used elsewhere shouldn't render black. */
.grade-high  { background: #1d6e47; color: #fff; border-color: transparent; }
.grade-badge.muted { color: var(--ink-4); background: transparent; }

.vbullets {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
}
.vbullets li.pos { color: #1c5b2e; }
.vbullets li.neg { color: #8b1e0a; }
.vbullets li.neu { color: #6b5a1b; }
.vcard-good .vbullets li.pos { font-weight: 500; }
.vcard-bad .vbullets li.neg { font-weight: 500; }

.vnote {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: var(--bg-tint);
  border-left: 2px solid var(--ink);
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  border-radius: 0 2px 2px 0;
}

@media (max-width: 1100px) {
  .video-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .video-grid { padding: 24px 20px 80px; grid-template-columns: 1fr; }
}

/* ============================================================
   RULES & PLAYBOOK
   ============================================================ */
.rules-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 40px 140px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.rule-block {
  border-top: 1px solid var(--line);
  padding-top: 36px;
}

.rule-meta {
  display: flex;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 500;
  margin-bottom: 28px;
  color: var(--ink-4);
}
.rule-meta span:last-child { color: var(--ink); }

.welcome-block {
  border-top: 0;
  padding-top: 0;
  margin-top: 24px;
}
.welcome-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 800px;
  color: var(--ink);
}

.rule-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-2);
  align-items: baseline;
}
.rule-row:last-child { border-bottom: 0; }
.rule-row h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rule-row p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

.rule-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rule-list li {
  font-size: 18px;
  line-height: 1.4;
  padding-left: 26px;
  position: relative;
}
.rule-list li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  top: 0;
  color: #b8311a;
}

.rubric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.rubric-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.rubric-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.rubric-card h5 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.rubric-card p {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  grid-template-columns: 1fr;
}
.contact-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  display: flex;
  gap: 12px;
}
.contact-line a { color: var(--ink); text-decoration: underline; }
.contact-line a:hover { color: var(--ink-3); }

@media (max-width: 900px) {
  .rules-wrap { padding: 20px 20px 100px; gap: 48px; }
  .rule-row { grid-template-columns: 1fr; gap: 10px; }
  .rubric-grid { grid-template-columns: 1fr; }
  .brief-grid { grid-template-columns: 1fr; }
  .notes-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BRIEF CARDS (Mission / Budget on /learn Rules)
   Numbered, editorial — same family as the rubric grid but with a
   soft tint so each card reads as its own block instead of a flat row.
   ============================================================ */
.brief-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.brief-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 24px;
  background: rgba(11, 11, 11, 0.025);
  border: 1px solid var(--line);
  border-radius: 2px;
  align-items: start;
  transition: border-color 0.2s, transform 0.25s ease;
}
.brief-card:hover {
  border-color: var(--ink-2);
  transform: translateY(-2px);
}
.brief-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.brief-body h5 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.brief-body p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   IMPORTANT NOTE CARDS (warning, /learn Rules)
   Soft red wash + left bar so they read as "read me" without being shouty.
   ============================================================ */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.note-card {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(184, 49, 26, 0.05);
  border: 1px solid rgba(184, 49, 26, 0.22);
  border-left: 3px solid #b8311a;
  border-radius: 2px;
  align-items: start;
}
.note-card .note-icon {
  font-size: 18px;
  line-height: 1;
  color: #b8311a;
  font-weight: 700;
}
.note-card p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
[data-theme="dark"] .brief-card { background: rgba(244, 241, 234, 0.04); }
[data-theme="dark"] .note-card {
  background: rgba(184, 49, 26, 0.12);
  border-color: rgba(184, 49, 26, 0.35);
}

/* ============================================================
   EMPTY / TAGGED POST EMBEDS (kept simple)
   ============================================================ */
.empty-state {
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.tagged-post {
  position: relative;
  margin-top: 12px;
}
.tagged-post .post-remove { display: none; }  /* admin-only, handled later */

/* Card photo as link */
.card-photo[href] { cursor: pointer; }
.card-photo[href]:hover { filter: grayscale(0) contrast(1.05); }

/* ============================================================
   LANDING PAGE (public, anonymized, application form embedded)
   ============================================================ */
body.landing {
  background: var(--bg);
  position: relative;
}

/* Blurred creator photo wallpaper — covers viewport, sits BEHIND content.
   Dense mosaic of small square tiles. Less blur so faces are *almost*
   recognizable — "wait, is that them?" — but never identifiable. */
.wallpaper {
  position: fixed;
  inset: -60px;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
  pointer-events: none;
  filter: blur(6px) saturate(0.9) contrast(1.05);
  opacity: 0.92;
}
.wp-tile {
  background-size: cover;
  background-position: center;
  aspect-ratio: 1;
}

/* Light scrim so the hero text is readable WITHOUT killing the wallpaper.
   Stays uniform across viewport — no aggressive fade to opaque bg. */
.wallpaper-veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at center top, rgba(244,241,234,0.35) 0%, rgba(244,241,234,0.55) 70%),
    linear-gradient(180deg, rgba(244,241,234,0.35) 0%, rgba(244,241,234,0.55) 100%);
}

.landing > *:not(.wallpaper):not(.wallpaper-veil) { position: relative; z-index: 1; }

/* Lower content sections need an opaque-enough backdrop so the wallpaper
   doesn't make text unreadable. Wallpaper still bleeds at edges. */
.landing-section {
  background: rgba(244, 241, 234, 0.94);
  backdrop-filter: blur(4px);
}
.landing-section-apply {
  background: rgba(244, 241, 234, 0.97);
}

/* Top bar override on landing */
.landing-topbar { background: transparent; border-bottom-color: var(--line); }

/* Landing hero — bigger than the /learn hero.
   Tight top padding so the headline sits right under the nav bar and the
   APPLY CTA bubbles up above the fold on both mobile and desktop. */
.landing-hero {
  padding: 16px 40px 60px;
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
}

.landing-hero-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(72px, 13vw, 220px);
  font-weight: 800;
  /* Italic Fraunces at opsz=144 has tall ascenders that overshoot the CSS
     line-box at any line-height < 1. 1.05 fully reserves glyph height. */
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
}
.landing-hero-title .hero-line {
  display: block;
  /* Prevent any ancestor overflow rule from clipping the italic ascender. */
  overflow: visible;
}
.landing-hero-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: -0.025em;
  /* inline-block + explicit padding lets the em grow its own bounding box
     so the italic glyph has guaranteed room on every side, independent of
     line-box math. background-clip: text still works inside inline-block.
     Horizontal padding matters too: italic glyphs lean right and the
     trailing ink extends past the font's advance width, so a flush-right
     italic gets clipped by body{overflow-x:hidden} or a tight container.
     0.12em right padding gives the lean room at every clamp() font-size. */
  display: inline-block;
  padding: 0.18em 0.12em 0.06em 0.04em;
  line-height: 1;
  background: linear-gradient(180deg, var(--ink), #2A2A2A 75%, #555);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-lead {
  max-width: 680px;
  font-size: 19px;
  margin-top: 0;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 28px;
}
.landing-lead strong { color: var(--ink); font-weight: 600; }

.landing-microstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: 24px;
}
.microstat {
  border-right: 1px solid var(--line);
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.microstat:last-child { border-right: 0; }
.microstat:first-child { padding-left: 0; }
.microstat-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.microstat-lab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  text-transform: uppercase;
}

.landing-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 2px;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 700;
  transition: transform 0.2s, background 0.2s;
}
.landing-cta:hover { transform: translateY(-2px); background: #1a1a1a; }
.landing-cta .muted { color: rgba(244,241,234,0.55); }
.landing-cta.solid {
  border-radius: 2px;
  padding: 22px 36px;
  font-size: 15px;
}

/* ============================================================
   LANDING SECTIONS (works, avoid, rubric, apply)
   ============================================================ */
.landing-section {
  padding: 100px 40px;
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
  border-top: 1px solid var(--line);
}
.section-head {
  margin-bottom: 56px;
  max-width: 900px;
}
.section-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 24px 0 24px;
}
.section-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
}
.section-lead {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 640px;
  line-height: 1.5;
}

.landing-section-bad .section-title em { color: #b8311a; }

/* Preview "grid" — actually a horizontal scroll carousel. All cards are
   the same size; user swipes left/right (touch) or drags/scrolls (desktop).
   CSS scroll-snap locks each card to its own viewport-step. */
.preview-grid {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  padding: 4px 24px 16px;
  /* Bleed past the section's left/right padding so cards can scroll edge-to-edge.
     Combined with the section's padding, the visual still feels boxed-in. */
  margin-left: -24px;
  margin-right: -24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.preview-grid::-webkit-scrollbar { height: 8px; }
.preview-grid::-webkit-scrollbar-track { background: transparent; }
.preview-grid::-webkit-scrollbar-thumb { background: rgba(11,11,11,0.18); border-radius: 4px; }
.preview-grid::-webkit-scrollbar-thumb:hover { background: rgba(11,11,11,0.32); }

.preview-card {
  flex: 0 0 280px;            /* Fixed card width on desktop */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  /* Unified card: video + critique share one bordered, slightly-tinted
     container so the notes feel attached to the clip rather than floating
     naked underneath it. */
  background: rgba(244, 241, 234, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 0 rgba(11,11,11,0.02), 0 6px 18px -12px rgba(11,11,11,0.18);
  transition: transform 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.preview-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11,11,11,0.28);
  box-shadow: 0 1px 0 rgba(11,11,11,0.03), 0 12px 24px -14px rgba(11,11,11,0.28);
}

.preview-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  /* Flat bottom so the media butts up flush against the critique tray. */
  border-radius: 0;
  overflow: hidden;
}
.preview-media .video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.preview-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-meta {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(244,241,234,0.85);
}

/* Critique tray — lives inside the same card as the video. Slightly darker,
   cooler tint than the card body so it reads as its own section instead of
   blending into the page. Good cards get a soft green left accent strip,
   bad cards a soft red one — quietly echoing the grade chip on the video. */
.preview-critique {
  margin: 0;
  padding: 14px 16px 16px;
  font-family: 'Inter Tight', sans-serif;
  color: var(--ink-2);
  background:
    linear-gradient(180deg, rgba(11,11,11,0.045), rgba(11,11,11,0.02));
  border-top: 1px solid rgba(11,11,11,0.10);
  position: relative;
}
.preview-card.preview-good .preview-critique {
  box-shadow: inset 3px 0 0 rgba(29, 110, 71, 0.55);
}
.preview-card.preview-bad .preview-critique {
  box-shadow: inset 3px 0 0 rgba(184, 49, 26, 0.55);
}

/* Heading row: "GRADED 7/10" on the left, "WHY IT WORKED" / "WHY IT FLOPPED"
   on the right. Gives the bullets below an obvious context. */
.crit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(11,11,11,0.08);
}
.crit-grade {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.crit-grade strong {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.crit-grade-denom {
  font-weight: 500;
  color: var(--ink-4);
  font-size: 12px;
  margin-left: 1px;
}
.crit-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.preview-card.preview-good .crit-tier { color: #1d6e47; }
.preview-card.preview-bad  .crit-tier { color: #b8311a; }

/* Bullets: each line is "chip icon + text" instead of a raw + / − character.
   The chip is a tinted circle holding a stroke-icon (check or x). Reads as
   considered design rather than "here's some green HTML text." */
.crit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.crit-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.crit-mark {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.crit-pos .crit-mark {
  background: rgba(29, 110, 71, 0.14);
  color: #1d6e47;
}
.crit-neg .crit-mark {
  background: rgba(184, 49, 26, 0.14);
  color: #b8311a;
}
/* Neutral chip: soft amber. Reads as "in the middle" — neither a win nor a
   loss. Used for facts like "Simple edits" that are just observations. */
.crit-neu .crit-mark {
  background: rgba(180, 130, 20, 0.14);
  color: #a37510;
}
/* Body text stays neutral — the color cue lives in the chip, not the words. */
.crit-pos, .crit-neg, .crit-neu { color: var(--ink-2); }
.crit-text { display: block; }

/* Reviewer note — italic aside in its own soft panel so it reads as a
   pull-quote rather than yet another bullet. */
.crit-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  font-style: italic;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(11,11,11,0.04);
  border-left: 2px solid rgba(11,11,11,0.18);
  border-radius: 0 4px 4px 0;
}
.preview-card.preview-good .crit-note { border-left-color: rgba(29,110,71,0.45); }
.preview-card.preview-bad  .crit-note { border-left-color: rgba(184,49,26,0.45); }
/* No bullets? Don't leave the note hanging with an awkward top margin. */
.preview-critique > .crit-note:first-of-type:not(.crit-list ~ .crit-note) {
  margin-top: 0;
}

/* Thin scrubber along the bottom of each video tile. Click or drag to seek.
   Sits above a soft dark gradient so it's readable over light footage. */
.video-scrub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  display: flex;
  align-items: flex-end;
  padding: 0 8px 6px;
  cursor: pointer;
  z-index: 3;
  touch-action: none;
}
.video-scrub::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: -1;
}
.video-scrub-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.28);
  border-radius: 999px;
  overflow: hidden;
  transition: height .15s ease;
}
.video-scrub:hover .video-scrub-track,
.video-scrub:active .video-scrub-track { height: 5px; }
.video-scrub-fill {
  height: 100%;
  width: 0%;
  background: #ff5b3a; /* Pholoh orange */
  border-radius: 999px;
  transition: width .08s linear;
}
.video-scrub:focus-visible { outline: none; }
.video-scrub:focus-visible .video-scrub-track {
  box-shadow: 0 0 0 2px rgba(255,91,58,0.55);
}

/* Tap-to-hear speaker icon over each example video. Default state shows the
   muted icon (speaker with slash); unmuted state shows the speaker with sound
   waves. Only one video can be unmuted at a time (enforced in landing.js).
   Bottom offset is bumped up so it clears the scrubber bar. */
.video-unmute {
  position: absolute;
  bottom: 28px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s ease, transform .12s ease, border-color .15s ease;
  z-index: 2;
}
.video-unmute:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.05);
}
.video-unmute:active { transform: scale(0.95); }
.video-unmute .vu-muted,
.video-unmute .vu-unmuted { display: none; }
.video-unmute[data-state="muted"]   .vu-muted   { display: block; }
.video-unmute[data-state="unmuted"] .vu-unmuted { display: block; }
.video-unmute[data-state="unmuted"] {
  background: rgba(255, 91, 58, 0.85); /* Pholoh orange to signal "now playing audio" */
  border-color: rgba(255, 91, 58, 0.95);
}

/* ============================================================
   LANDING RUBRIC (uses .rubric-card from existing CSS, same layout)
   ============================================================ */

/* ============================================================
   APPLICATION FORM (landing version, editorial layout)
   ============================================================ */
.landing-section-apply {
  background: var(--bg);
  padding-bottom: 140px;
}

.apply-form {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.form-block {
  border: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.form-legend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}
.form-legend span {
  background: var(--ink);
  color: var(--bg);
  padding: 2px 8px;
  border-radius: 2px;
}

.apply-form label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.apply-form input,
.apply-form select,
.apply-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: border-color 0.2s;
}
.apply-form textarea { resize: vertical; }
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.form-row {
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}
.form-row.two { grid-template-columns: 1fr 1fr; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }

.form-submit {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.landing-cta.solid {
  border: 0;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}

.status { font-size: 13px; min-height: 18px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
.status.error { color: #b8311a; }
.status.success { color: #1c5b2e; }

.apply-success {
  text-align: left;
  max-width: 720px;
}
.apply-success.hidden { display: none; }
.apply-form.hidden { display: none; }

/* "Any questions?" contact strip — sits under the apply form. Editorial,
   not loud. Eyebrow label + a clean link straight to Tymir's IG DMs. */
.apply-contact {
  margin-top: 36px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(11, 11, 11, 0.03);
  border: 1px solid var(--line);
  border-radius: 2px;
  max-width: 880px;
}
.apply-contact-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.apply-contact-link {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.apply-contact-link strong { font-weight: 700; }
.apply-contact-link:hover {
  color: #1a1a1a;
  border-bottom-color: var(--ink);
}

/* ============================================================
   LANDING RESPONSIVE
   ============================================================ */
/* Desktop: shrink the hero headline so the APPLY CTA peeks above the fold.
   At 13vw the headline ate the entire viewport on wide screens. 8vw with a
   capped max keeps it bold but leaves room for the lead + CTA. Mobile keeps
   the original clamp via the (max-width: 900px) block below. */
@media (min-width: 901px) {
  .landing-hero-title { font-size: clamp(64px, 8vw, 132px); }
}

@media (max-width: 900px) {
  .landing-hero { padding: 12px 20px 48px; }
  .landing-section { padding: 60px 20px; }
  /* Tighten lead + microstats on mobile so the APPLY CTA fits above the fold
     on standard phone viewports (~750px tall). 4 stats as a compact 2×2 grid
     (2 rows) instead of a tall stack, so the button stays visible on load. */
  .landing-lead { margin-bottom: 24px; font-size: 17px; line-height: 1.45; }
  .landing-microstats { grid-template-columns: repeat(2, 1fr); gap: 16px 0; margin: 0 0 22px; padding: 14px 0; }
  .scroll-prompt { display: none; }
  .landing-microstats .microstat { border-right: 1px solid var(--line); border-bottom: 0; padding: 0 16px; }
  .landing-microstats .microstat:nth-child(2n) { border-right: 0; padding-right: 0; }
  .landing-microstats .microstat:nth-child(2n+1) { padding-left: 0; }
  .landing-microstats .microstat-num { font-size: clamp(24px, 7vw, 34px); }
  /* Mobile carousel: one card per viewport-width screen, snap-aligned. */
  .preview-grid {
    gap: 12px;
    padding: 4px 20px 16px;
    margin-left: -20px;
    margin-right: -20px;
    scroll-padding: 0 20px;
  }
  .preview-card { flex: 0 0 78vw; max-width: 320px; }
  .form-row.two, .form-row.three { grid-template-columns: 1fr; }
}



/* ============================================================
   SUBMIT-POST TAB (/learn 005 / SUBMIT)
   ============================================================ */
.submit-wrap { max-width: 760px; margin: 0 auto; padding: 32px 24px 80px; }
.submit-preview-notice { padding: 24px; border: 1px dashed var(--line); text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.submit-form-wrap { }
.submit-form { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: rgba(11, 11, 11, 0.03); border: 1px solid var(--line); }
.submit-form .submit-label { display: flex; flex-direction: column; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.submit-form input { padding: 12px 14px; border: 1px solid var(--ink); background: var(--bg); font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); border-radius: 0; appearance: none; }
.submit-form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.submit-actions { display: flex; align-items: center; gap: 16px; }
.btn-submit-post { background: var(--ink); color: var(--bg); border: 0; padding: 14px 22px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; cursor: pointer; border-radius: 2px; }
.btn-submit-post[disabled] { opacity: 0.5; cursor: wait; }
.submit-status { font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
.submit-status.error { color: #b8311a; }
.submit-status.success { color: #1c5b2e; }

.post-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.post-row { padding: 14px 16px; background: rgba(11, 11, 11, 0.03); border: 1px solid var(--line); }
.post-row-main { display: flex; align-items: center; gap: 12px; }
.post-plat { display: inline-block; padding: 2px 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; font-weight: 700; background: var(--ink); color: var(--bg); border-radius: 2px; }
.post-plat-tiktok { background: #ff0050; }
.post-plat-youtube { background: #c4302b; }
.post-url { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); text-decoration: underline; word-break: break-all; flex: 1; }
.post-note { margin-top: 8px; font-size: 13px; color: var(--ink-2); font-style: italic; }
.post-row-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.post-delete { background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; cursor: pointer; text-transform: uppercase; }
.post-delete:hover { background: var(--ink); color: var(--bg); }
.post-delete:disabled { opacity: 0.5; cursor: wait; }

/* ============================================================
   CLIPS TAB (/learn 006 / CLIPS)
   ============================================================ */
.clips-wrap { max-width: 920px; margin: 0 auto; padding: 32px 24px 80px; }
.clips-preview-notice { padding: 24px; border: 1px dashed var(--line); text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.clips-app { }
.clips-dropzone { border: 2px dashed var(--ink); padding: 56px 24px; text-align: center; transition: background 0.15s; }
.clips-dropzone.drag { background: rgba(11, 11, 11, 0.04); }
.clips-dz-meta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.clips-dz-icon { font-size: 32px; line-height: 1; color: var(--ink); }
.clips-dz-line { font-family: 'Inter Tight', sans-serif; font-size: 18px; color: var(--ink); }
.clips-dz-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; }
.clips-dz-pick { cursor: pointer; }
.clips-dz-pick:hover .btn-submit-post { opacity: 0.8; }

.clips-queue { margin-top: 24px; padding: 20px; border: 1px solid var(--line); background: rgba(11, 11, 11, 0.02); }
.clips-queue-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 16px; }
.clip-q-row { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.clip-q-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clip-q-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip-q-size { font-size: 10px; }
.clip-q-progress { height: 6px; background: var(--line); position: relative; }
.clip-q-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width 0.25s; }
.clip-q-state { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.clip-q-remove { background: transparent; border: 1px solid var(--ink); color: var(--ink); width: 22px; height: 22px; line-height: 1; padding: 0; cursor: pointer; font-size: 14px; }
.clip-q-remove[disabled] { opacity: 0.4; cursor: wait; }
.clips-queue-actions { display: flex; gap: 12px; align-items: center; }

.clips-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.clip-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: rgba(11, 11, 11, 0.03); border: 1px solid var(--line); gap: 16px; }
.clip-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.clip-row-name { font-family: 'Inter Tight', sans-serif; font-size: 14px; color: var(--ink); font-weight: 600; word-break: break-all; }
.clip-row-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.clip-row-actions { display: flex; gap: 8px; }
.clip-row-btn { background: transparent; border: 1px solid var(--ink); color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; padding: 4px 10px; cursor: pointer; text-transform: uppercase; }
.clip-row-btn:hover { background: var(--ink); color: var(--bg); }

/* ============================================================
   THEME TOGGLE BUTTON (fixed top-right, both themes)
   ============================================================ */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 1100;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(244, 241, 234, 0.85);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.theme-toggle:hover { border-color: var(--ink-2); transform: scale(1.05); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle .tt-sun  { display: none; }
.theme-toggle .tt-moon { display: block; }
[data-theme="dark"] .theme-toggle .tt-sun  { display: block; }
[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
@media (max-width: 720px) {
  .theme-toggle { top: 12px; right: 14px; width: 36px; height: 36px; }
}

/* Landing topbar: stack the theme toggle directly above the NOW CASTING
   indicator in the right-side utility column. Toggle stops being fixed
   here — it flows inside .utility — except on mobile, where .utility is
   hidden, so we fall back to the standalone fixed position. */
.landing-topbar .utility {
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.landing-topbar .utility .theme-toggle {
  position: static;
}
.landing-topbar .utility-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 720px) {
  /* The base topbar rule hides .utility on mobile. On landing we still want
     the theme toggle reachable — re-show .utility, hide just the NOW CASTING
     status, and let the toggle sit inside the topbar flow so it scrolls
     away with the page instead of following the viewport. */
  .landing-topbar .utility { display: flex; }
  .landing-topbar .utility-status { display: none; }
  .landing-topbar .utility .theme-toggle { position: static; }
}

/* ============================================================
   DARK MODE
   Overrides the palette variables on :root via [data-theme="dark"].
   Every CSS rule that uses var(--bg), var(--ink), etc. picks the new
   colors automatically. Hardcoded rgba(244,241,234, …) spots are
   patched in the section below.
   ============================================================ */
[data-theme="dark"] {
  --bg: #0E0E0E;
  --bg-tint: #1A1A1A;
  --ink: #F4F1EA;
  --ink-2: #D8D4CA;
  --ink-3: #A8A59C;
  --ink-4: #807C73;
  --line: rgba(244, 241, 234, 0.16);
  --line-2: rgba(244, 241, 234, 0.06);
  --accent: #F4F1EA;
  --hover: #E8E4D8;
  color-scheme: dark;
}

/* Pholoh brand logo is a black PNG on transparent — invert it in dark mode
   so it reads white against the dark backdrop. */
[data-theme="dark"] .brand-logo { filter: invert(1) brightness(1.05); }

/* Toggle button surface flips on dark */
[data-theme="dark"] .theme-toggle {
  background: rgba(30, 30, 30, 0.75);
  border-color: rgba(244, 241, 234, 0.22);
}

/* Wallpaper veil — hardcoded cream gradient. Re-tint for dark. */
[data-theme="dark"] .wallpaper-veil {
  background:
    radial-gradient(ellipse 80% 60% at center top, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0.72) 70%),
    linear-gradient(180deg, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0.72) 100%);
}

/* Landing-section backdrops were rgba(244,241,234, …). Re-tint to dark. */
[data-theme="dark"] .landing-section { background: rgba(14, 14, 14, 0.92); }
[data-theme="dark"] .landing-section-apply { background: rgba(14, 14, 14, 0.96); }

/* Preview card tint */
[data-theme="dark"] .preview-card {
  background: rgba(26, 26, 26, 0.72);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 6px 18px -12px rgba(0,0,0,0.6);
}
[data-theme="dark"] .preview-card:hover {
  border-color: rgba(244, 241, 234, 0.35);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 12px 24px -14px rgba(0,0,0,0.7);
}

/* Critique tray gradient was rgba(11,11,11, …). Invert. */
[data-theme="dark"] .preview-critique {
  background: linear-gradient(180deg, rgba(244,241,234,0.06), rgba(244,241,234,0.02));
  border-top-color: rgba(244, 241, 234, 0.12);
}
[data-theme="dark"] .crit-head { border-bottom-color: rgba(244, 241, 234, 0.10); }
[data-theme="dark"] .crit-note {
  background: rgba(244, 241, 234, 0.05);
  border-left-color: rgba(244, 241, 234, 0.22);
}

/* Apply form: subtle dark surfaces */
[data-theme="dark"] .apply-contact { background: rgba(244, 241, 234, 0.04); }
[data-theme="dark"] .submit-form,
[data-theme="dark"] .post-row,
[data-theme="dark"] .clip-row { background: rgba(244, 241, 234, 0.04); }

/* Form legend chip & landing CTA — these intentionally invert (ink on bg).
   In dark mode that becomes cream-on-cream, so flip to dark-text-on-cream. */
[data-theme="dark"] .form-legend span,
[data-theme="dark"] .card-plat,
[data-theme="dark"] .post-plat,
[data-theme="dark"] .btn-submit-post,
[data-theme="dark"] .landing-cta {
  background: var(--ink);
  color: #0E0E0E;
}
[data-theme="dark"] .landing-cta { border-color: var(--ink); }
[data-theme="dark"] .landing-cta:hover { background: #E8E4D8; }
[data-theme="dark"] .landing-cta .muted { color: rgba(14,14,14,0.55); }

/* Card-money — was dark text-on-cream inverted to cream-on-dark. In dark
   theme it'd become cream-on-cream. Re-invert so it pops. */
[data-theme="dark"] .card-money { background: #F4F1EA; color: #0E0E0E; border-color: #F4F1EA; }
[data-theme="dark"] .card-money .card-meta,
[data-theme="dark"] .card-money .card-handle,
[data-theme="dark"] .card-money .muted { color: rgba(14, 14, 14, 0.6); }
[data-theme="dark"] .card-money .card-divider,
[data-theme="dark"] .card-money .card-meta { border-color: rgba(14, 14, 14, 0.2); }
[data-theme="dark"] .card-money .card-plat { background: #0E0E0E; color: #F4F1EA; }
[data-theme="dark"] .card-money-cents,
[data-theme="dark"] .card-money-meta { color: rgba(14, 14, 14, 0.6); }

/* Italic em on the hero — gradient was dark→darker. Flip light→lighter. */
[data-theme="dark"] .landing-hero-title em {
  background: linear-gradient(180deg, #F4F1EA, #D8D4CA 75%, #A8A59C);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Grade chips — most use solid colors that already work. The neutral 5/6
   cream chip blends into dark backgrounds; bump its contrast. */
[data-theme="dark"] .grade-mid { background: #b8a96a; color: #1a1a0a; }
[data-theme="dark"] .grade-okay { background: #4a8268; color: #e6f0ea; }

/* Background grid lines — line-2 on dark renders too faint. Already covered
   by --line-2 var override above. The body::before grid will follow. */