/* ============================================================================
   Trilemma Grappling — Beginners campaign
   DS reconstructed from the Campaign Style Spec (no original styles.css supplied).
   Lineage: Pride FC / K-1 broadcast graphics. Cut, not rounded. −8° lean.
   ========================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* Grounds & neutrals */
  --ground: #100E0C;
  --ink: #14110F;
  --paper: #FBF6EB;
  --paper-warm: #F5ECDC;
  --paper-cool: #ECE7DB;
  --bone: #F2EBE0;

  /* Brand accents — one job each, never reassigned */
  --orange: #FA8638;   /* PRIMARY action · "the hit" · divider · ticker — Nap */
  --purple: #995FA3;   /* secondary · "Learn" — Tap */
  --teal:   #226869;   /* grounding · "go" — Snap */
  --green:  #226869;

  /* text-on-dark opacity ladder */
  --d-body: rgba(242,235,224,0.92);
  --d-label: rgba(242,235,224,0.62);
  --d-faint: rgba(242,235,224,0.38);
  --d-hair: rgba(242,235,224,0.14);
  /* text-on-paper */
  --p-body: rgba(20,17,15,0.92);
  --p-label: rgba(20,17,15,0.60);
  --p-faint: rgba(20,17,15,0.40);
  --p-hair: rgba(20,17,15,0.14);

  /* spacing — 8px base */
  --tri-1: 8px;  --tri-2: 16px; --tri-3: 24px; --tri-4: 32px;
  --tri-5: 40px; --tri-6: 56px; --tri-7: 64px; --tri-8: 80px; --tri-9: 96px;

  --motion: 140ms cubic-bezier(0.2,0,0,1);
  --maxw: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--ground);
  color: var(--d-body);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 18px; line-height: 1.5;
  overflow-x: hidden;
}

/* ---- speed-lines texture, both grounds ---- */
.ground-dark {
  background:
    repeating-linear-gradient(-14deg, rgba(242,235,224,0.018) 0 1px, transparent 1px 7px),
    var(--ground);
  color: var(--d-body);
}
.ground-paper {
  background:
    repeating-linear-gradient(-14deg, rgba(20,17,15,0.022) 0 1px, transparent 1px 7px),
    var(--paper);
  color: var(--p-body);
}
.ground-paper-warm { background-color: var(--paper-warm); }
.ground-paper-cool { background-color: var(--paper-cool); }

/* ---- the −8° lean ---- */
.lean { display: inline-block; transform: skew(-8deg); }
.lean > * { display: inline-block; transform: skew(8deg); }

/* ============================================================================
   Typography voices
   ========================================================================== */
.shout, .stack .word, h1, h2.shout {
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.aside {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 19px);
  line-height: 1.22;
  max-width: 460px;
}
.mono, .eyebrow, .receipt, .corner, .footer, .trust, .ticker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-style: normal;
}

/* accent text colours (load-bearing words) */
.t-orange { color: var(--orange); }
.t-purple { color: var(--purple); }
.t-teal, .t-green { color: var(--teal); }
.t-bone { color: var(--bone); }
.t-ink { color: var(--ink); }

/* ============================================================================
   Layout shell + section chrome
   ========================================================================== */
section { position: relative; padding: var(--tri-9) clamp(20px, 6vw, 64px); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* broadcast corners */
.corner {
  position: absolute; top: clamp(14px, 3vw, 28px);
  font-size: 10px; letter-spacing: 0.17em; font-weight: 700;
}
.corner.left { left: clamp(20px, 6vw, 64px); }
.corner.right { right: clamp(20px, 6vw, 64px); }
.ground-dark .corner { color: rgba(242,235,224,0.50); }
.ground-paper .corner { color: rgba(20,17,15,0.55); }

/* eyebrow — fight metadata */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: var(--tri-3); display: inline-block;
}
.ground-dark .eyebrow { color: var(--d-label); }
.ground-paper .eyebrow { color: var(--p-label); }

/* TriBullet △ — only sanctioned glyph */
.tri { font-style: normal; display: inline-block; }
.tri::before { content: "△"; }

/* 2px accent divider */
.rule { height: 2px; background: var(--orange); border: 0; margin: var(--tri-4) 0; width: 100%; }
.rule.purple { background: var(--purple); }
.rule.teal { background: var(--teal); }
.rule.short { max-width: 120px; }

/* ============================================================================
   Headline stack pattern (huge Anton + serif-italic asides)
   ========================================================================== */
.stack { display: flex; flex-direction: column; gap: 0.18em; margin: 0 0 var(--tri-4); }
.stack .word {
  font-size: clamp(40px, 9.5vw, 132px);
  display: block;
}
.stack .aside { margin: 0.15em 0 0.35em; }
.ground-dark .stack .word { color: var(--bone); }
.ground-paper .stack .word { color: var(--ink); }
.ground-dark .aside { color: var(--d-body); }
.ground-paper .aside { color: var(--p-body); }
/* asides keyed to section accent on paper */
.accent-purple .aside { color: var(--purple); }
.accent-teal .aside { color: var(--teal); }
.accent-orange .aside { color: var(--orange); }

h2.shout { font-size: clamp(30px, 5.5vw, 64px); line-height: 0.9; margin-bottom: var(--tri-4); }
.ground-dark h2.shout { color: var(--bone); }
.ground-paper h2.shout { color: var(--ink); }

.lede { font-size: clamp(18px, 2.2vw, 24px); max-width: 60ch; margin-bottom: var(--tri-4); }
.body-col { max-width: 64ch; }
.body-col p { margin-bottom: var(--tri-3); }
.body-col strong { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }

/* lists */
.checks { list-style: none; display: grid; gap: var(--tri-2); margin: var(--tri-3) 0; max-width: 64ch; }
.checks li { display: flex; gap: 0.7em; align-items: baseline; }
.checks li::before { content: "△"; color: var(--accent, var(--orange)); flex: none; font-size: 0.8em; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
@media (max-width: 760px) { .cols2 { grid-template-columns: 1fr; } }
.col h3 { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; font-weight: 700; margin-bottom: var(--tri-2); }
.col.yes h3 { color: var(--teal); }
.col.no h3 { color: var(--orange); }

/* ============================================================================
   Ticker marquee (broadcast lower-third)
   ========================================================================== */
.ticker-bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--orange); color: var(--ground);
  border-bottom: 2px solid var(--ground);
  overflow: hidden; white-space: nowrap;
}
.ticker {
  display: inline-block; padding: 7px 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  animation: marquee 28s linear infinite;
}
.ticker span { padding: 0 1.4em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* live dot */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ground); margin-right: 0.5em; vertical-align: middle; animation: blink 1.3s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ============================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  letter-spacing: 0.005em; font-size: clamp(18px, 2.4vw, 26px);
  padding: 0.7em 1.25em; border: 2px solid transparent; cursor: pointer;
  border-radius: 0; text-decoration: none; line-height: 1;
  transition: background var(--motion), color var(--motion), transform var(--motion), box-shadow var(--motion);
}
.btn-primary {
  background: var(--orange); color: var(--ground);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--orange) 55%, #000);
}
.btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 10px 10px 0 color-mix(in srgb, var(--orange) 55%, #000); }
.btn-primary:active { transform: translate(4px,4px); box-shadow: 2px 2px 0 color-mix(in srgb, var(--orange) 55%, #000); }
.btn-ghost {
  background: transparent; color: inherit;
}
.ground-dark .btn-ghost { border-color: var(--d-hair); color: var(--bone); }
.ground-paper .btn-ghost { border-color: var(--p-hair); color: var(--ink); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn .arrow::before { content: "▸"; }
.trust { display: block; margin-top: var(--tri-2); font-size: 11px; letter-spacing: 0.14em; }
.ground-dark .trust { color: var(--d-label); }
.ground-paper .trust { color: var(--p-label); }

/* ============================================================================
   Enrol block — the money shot (dark ground)
   ========================================================================== */
.enrol {
  border: 2px solid var(--d-hair);
  box-shadow: 12px 12px 0 var(--orange);
  background:
    repeating-linear-gradient(-14deg, rgba(242,235,224,0.018) 0 1px, transparent 1px 7px),
    var(--ground);
  padding: clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 820px) { .enrol { grid-template-columns: 1fr; } }
.enrol .wordmark { font-family: 'Anton', sans-serif; font-size: 26px; letter-spacing: 0.02em; color: var(--bone); margin-bottom: var(--tri-3); }
.enrol .wordmark .tri { color: var(--orange); }
.enrol h2.shout { font-size: clamp(44px, 8vw, 96px); }
.receipt { list-style: none; margin: var(--tri-3) 0; display: grid; gap: 0.5em; font-size: 12px; letter-spacing: 0.12em; }
.receipt li { color: var(--d-body); }
.receipt li.lead { font-weight: 700; color: var(--bone); }
.receipt .tri { color: var(--orange); margin-right: 0.5em; }

/* scan row */
.scan { display: flex; gap: var(--tri-3); align-items: center; margin-top: var(--tri-4); }
.qr-card { background: #fff; padding: 12px; box-shadow: 5px 5px 0 var(--orange); width: 132px; height: 132px; flex: none; }
.qr-card svg, .qr-card img { width: 100%; height: 100%; display: block; }
.scan-cta .arrow { font-family: 'Anton', sans-serif; }
.scan-cta b { font-family: 'Anton', sans-serif; font-size: 22px; color: var(--bone); text-transform: uppercase; display: block; line-height: 0.95; }
.scan-cta small { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; color: var(--d-faint); text-transform: uppercase; }

/* ============================================================================
   Enrol form
   ========================================================================== */
.form-card { display: grid; gap: var(--tri-2); }
.field { display: grid; gap: 6px; }
.field label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-label); }
.field input, .field textarea {
  font-family: 'JetBrains Mono', monospace; font-size: 15px;
  background: rgba(242,235,224,0.04); color: var(--bone);
  border: 1px solid var(--d-hair); border-radius: 0;
  padding: 12px 14px; width: 100%;
  transition: border-color var(--motion);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.field textarea { resize: vertical; min-height: 60px; }
.field.row2 { grid-template-columns: 1fr 1fr; gap: var(--tri-2); }
.field.row2 > div { display: grid; gap: 6px; }
@media (max-width: 520px) { .field.row2 { grid-template-columns: 1fr; } }

/* early-start toggle */
.early {
  border: 1px solid var(--d-hair); padding: var(--tri-2);
  display: flex; gap: var(--tri-2); align-items: flex-start;
}
.early .q { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 15px; color: var(--d-body); flex: 1; }
.early .q b { font-family: 'JetBrains Mono', monospace; font-style: normal; text-transform: uppercase; font-size: 11px; letter-spacing: 0.12em; color: var(--orange); display: block; margin-bottom: 4px; }
.seg { display: inline-flex; border: 1px solid var(--d-hair); flex: none; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; padding: 8px 14px; cursor: pointer; color: var(--d-label); text-transform: uppercase; }
.seg input:checked + label { background: var(--orange); color: var(--ground); }

.form-note { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--d-faint); text-transform: uppercase; line-height: 1.6; }
.form-err { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--orange); display: none; }
.form-err.show { display: block; }

/* spots counter */
.spots { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-label); }
.spots b { color: var(--orange); }

/* ============================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: var(--tri-3); max-width: 80ch; }
.faq details { border-top: 1px solid var(--p-hair); padding-top: var(--tri-3); }
.ground-dark .faq details { border-color: var(--d-hair); }
.faq summary { cursor: pointer; list-style: none; font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 26px); letter-spacing: 0.005em; line-height: 1; display: flex; gap: 0.5em; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "▸"; color: var(--orange); transition: transform var(--motion); font-size: 0.7em; }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq .a { margin-top: var(--tri-2); max-width: 64ch; }

/* coaches photo placeholder */
.photo-ph {
  border: 1px solid var(--p-hair); aspect-ratio: 16/9; display: flex;
  align-items: center; justify-content: center; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  color: var(--p-faint); text-transform: uppercase; margin-top: var(--tri-4); padding: var(--tri-4);
}
.ground-dark .photo-ph { border-color: var(--d-hair); color: var(--d-faint); }

/* details grid */
.details-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--tri-3) var(--tri-6); max-width: 70ch; margin-top: var(--tri-4); }
@media (max-width: 560px){ .details-grid { grid-template-columns: 1fr; } }
.details-grid dt { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent, var(--orange)); margin-bottom: 4px; }
.details-grid dd { font-size: 19px; }

/* ============================================================================
   Footer
   ========================================================================== */
.footer { padding: var(--tri-6) clamp(20px,6vw,64px); border-top: 2px solid var(--orange); }
.footer .line { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-label); }
.footer .tri { color: var(--orange); }

/* dual CTA row */
.cta-row { display: flex; gap: var(--tri-3); flex-wrap: wrap; align-items: center; margin-top: var(--tri-3); }

/* ============================================================================
   The infinite tail — it never ends. Gets worse the deeper you go.
   ========================================================================== */
.inf-divider { text-align: center; padding: var(--tri-8) clamp(20px,6vw,64px) var(--tri-6); }
.inf-divider .k { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; color: var(--d-label); }
.inf-divider h3 { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: clamp(28px,6vw,64px); line-height: 0.9; color: var(--bone); margin: var(--tri-2) 0; }
.inf-divider .arr { color: var(--orange); font-size: 1.4em; display: block; margin-top: var(--tri-2); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.inf-section { min-height: 86vh; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.inf-section.in { opacity: 1; transform: translateY(0); }
.inf-section .stack { margin-bottom: var(--tri-4); }
.inf-section .stack .word { font-size: clamp(30px, 7vw, 84px); }

/* decay glitch — the deeper you scroll, the more it falls apart */
.inf-section[data-decay="mid"] .stack .word:last-child { animation: pulse-accent 1.4s ease-in-out infinite; }
.inf-section[data-decay="high"] .stack .word { animation: jitter .18s steps(2) infinite; }
.inf-section[data-decay="terminal"] .stack .word { animation: jitter .09s steps(2) infinite; text-shadow: .035em 0 var(--accent, var(--orange)), -.035em 0 currentColor; }
@keyframes pulse-accent { 0%,100% { opacity: 1; } 50% { opacity: .72; } }
.inf-signup { align-self: flex-start; }
.inf-sub { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; margin-top: var(--tri-2); }
.ground-dark .inf-sub { color: var(--d-faint); }
.ground-paper .inf-sub { color: var(--p-faint); }
/* the button falls apart too, deep down */
.inf-section[data-decay="high"] .inf-signup { animation: jitter .16s steps(2) infinite; }
.inf-section[data-decay="terminal"] .inf-signup { animation: jitter .09s steps(2) infinite; }

/* sticky enrol bar — appears in the endless zone, always one tap from signing up */
#enrol-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--orange); color: var(--ground);
  display: none; align-items: center; justify-content: space-between; gap: var(--tri-2);
  padding: 10px clamp(16px,5vw,40px); border-top: 2px solid var(--ground);
  transform: translateY(100%); transition: transform .3s cubic-bezier(0.2,0,0,1);
}
#enrol-bar.show { display: flex; transform: translateY(0); }
#enrol-bar .lab { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; }
#enrol-bar a { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: clamp(15px,2.4vw,20px); background: var(--ground); color: var(--orange); text-decoration: none; padding: .5em 1.1em; white-space: nowrap; }
#enrol-bar a:hover { filter: brightness(1.2); }

.inf-loading { text-align: center; padding: var(--tri-6); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--d-faint); text-transform: uppercase; }
.inf-loading::after { content: "▌"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* katakana logo motif — トリレンマ, sprinkled as a vertical broadcast mark */
.kana { font-family: 'Anton', sans-serif; letter-spacing: 0.08em; opacity: 0.9; }
.kana-mark { position: absolute; top: 50%; transform: translateY(-50%) skew(-8deg); right: clamp(8px,2vw,20px);
  writing-mode: vertical-rl; font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: clamp(14px, 2vw, 22px); letter-spacing: 0.3em; color: var(--accent, var(--orange)); opacity: 0.5; pointer-events: none; }

/* ============================================================================
   Motion off
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .ticker { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================================
   Logo wordmark (enrol section)
   ============================================================================ */
.wordmark-logo {
  display: block;
  height: 52px;
  width: auto;
  margin-bottom: var(--tri-3);
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ============================================================================
   Coaches — S6
   ============================================================================ */
.coaches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tri-4);
  margin-bottom: var(--tri-7);
}
@media (max-width: 540px) {
  .coaches-grid { grid-template-columns: 1fr; gap: var(--tri-3); }
}

.coach-card { display: flex; flex-direction: column; }

.coach-photo-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
  box-shadow: 6px 6px 0 var(--purple);
  margin-bottom: var(--tri-2);
  background: var(--paper-cool);
}
.coach-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 240ms cubic-bezier(0.2,0,0,1);
}
.coach-card:hover .coach-photo-wrap img { transform: scale(1.04); }

.coach-name {
  font-family: 'Anton', sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 0.9;
  margin-bottom: 4px;
}
.coach-belt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
}

/* Rhylie special section */
.rhylie-section {
  border-top: 2px solid var(--p-hair);
  padding-top: var(--tri-6);
  margin-top: var(--tri-2);
}
.rhylie-coach-row {
  display: flex;
  gap: var(--tri-6);
  align-items: flex-end;
  margin-bottom: var(--tri-5);
}
.rhylie-portrait { flex: 0 0 200px; }
.rhylie-intro { flex: 1; padding-bottom: var(--tri-2); }
@media (max-width: 600px) {
  .rhylie-coach-row { flex-direction: column; align-items: flex-start; }
  .rhylie-portrait { flex: none; width: 100%; max-width: 240px; }
}

/* Gallery grid */
.rhylie-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
  margin-bottom: var(--tri-5);
}
.rhylie-gallery:empty { display: none; }

.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--paper-cool);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 200ms ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content: '↗';
  position: absolute; top: 6px; right: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: #fff; opacity: 0;
  transition: opacity 140ms;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.gallery-item:hover::after { opacity: 1; }

/* More photos CTA */
.rhylie-more {
  text-align: center;
  padding: var(--tri-5) var(--tri-4);
  border: 1px dashed var(--p-hair);
}

/* ============================================================================
   Lightbox
   ============================================================================ */
#lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,14,12,0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
#lightbox.open { opacity: 1; pointer-events: all; }
#lightbox img {
  max-width: min(88vw, 1000px);
  max-height: 82vh;
  object-fit: contain;
  display: block;
  box-shadow: 8px 8px 0 var(--purple);
}
.lb-close {
  position: absolute; top: var(--tri-3); right: var(--tri-4);
  font-family: 'JetBrains Mono', monospace; font-size: 16px;
  background: none; border: none; cursor: pointer;
  color: var(--d-label); padding: 8px;
  transition: color var(--motion);
}
.lb-close:hover { color: var(--orange); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(16,14,12,0.7); border: 1px solid var(--d-hair);
  color: var(--bone); padding: 14px 18px; cursor: pointer; font-size: 14px;
  transition: background var(--motion), border-color var(--motion);
}
.lb-nav:hover { background: var(--purple); border-color: var(--purple); }
.lb-prev { left: clamp(8px, 2vw, var(--tri-4)); }
.lb-next { right: clamp(8px, 2vw, var(--tri-4)); }
.lb-counter {
  position: absolute; bottom: var(--tri-3); left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
  color: var(--d-label); text-transform: uppercase; white-space: nowrap;
}

/* ============================================================================
   More Rhylie modal
   ============================================================================ */
#more-modal {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(16,14,12,0.88);
  display: flex; align-items: center; justify-content: center;
  padding: var(--tri-4);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
#more-modal.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--paper-warm); color: var(--ink);
  max-width: 480px; width: 100%;
  padding: var(--tri-5);
  box-shadow: 10px 10px 0 var(--purple);
  position: relative;
}
.modal-box h3 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(28px, 5vw, 52px);
  text-transform: uppercase; line-height: 0.88;
  color: var(--ink); margin: var(--tri-2) 0 var(--tri-3);
}
.modal-close {
  position: absolute; top: var(--tri-2); right: var(--tri-3);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  background: none; border: none; cursor: pointer; color: var(--p-label);
  transition: color var(--motion);
}
.modal-close:hover { color: var(--ink); }
.modal-options { display: grid; gap: 8px; }
.modal-option {
  display: block; width: 100%; text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--tri-2) var(--tri-3);
  border: 1px solid var(--p-hair);
  background: transparent; cursor: pointer; color: var(--ink);
  transition: background var(--motion), color var(--motion), border-color var(--motion);
  text-decoration: none;
}
.modal-option:hover { background: var(--purple); color: #fff; border-color: var(--purple); }