/* =========================================================================
   JJ RHYMES — jjrhymes.com
   TWO WORLDS, one toggle:
     MUSIC (default) = black + vintage gold, high-contrast serif, speakeasy jazz,
                       grayscale photography with gradient fade-boxes. Cinematic.
     CODE            = industrial-brutalist / tactical-telemetry, red accent,
                       mono type, 1-bit Atkinson-dithered photography.
   One radius scale (0). One accent per mode. Theme swaps on [data-mode].
   ========================================================================= */

:root { --pad: clamp(1.25rem, 4vw, 4rem); --maxw: 1560px; }

/* ---- mode-scoped palette + fonts ---- */
[data-mode="music"] {
  --bg:#0d0d10; --panel:#141119; --fg:#f2f0ec; --muted:#9a948a;
  --accent:#e0b84e;                 /* muted vintage gold */
  --ink:#141105;                    /* text on gold */
  --line:rgba(255,255,255,.10);
  --font-disp:"Playfair Display", Georgia, serif;
  --font-body:"Poppins", system-ui, sans-serif;
}
[data-mode="code"] {
  --bg:#0a0a0a; --panel:#101012; --fg:#eaeaea; --muted:#8b8b8f;
  --accent:#e61919;                 /* aviation/hazard red */
  --ink:#ffffff;
  --line:rgba(255,255,255,.14);
  --font-disp:"Archivo", system-ui, sans-serif;
  --font-body:"Space Mono", ui-monospace, monospace;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition: background .45s ease, color .45s ease;
}
img { display:block; max-width:100%; }

/* ---- world + brand visibility ---- */
[data-mode="music"] .world-code, [data-mode="code"] .world-music { display:none; }
[data-mode="music"] .code-only { display:none !important; }
[data-mode="music"] .brand-code, [data-mode="code"] .brand-music { display:none; }

/* =========================================================================
   HEADER (shared, adaptive)
   ========================================================================= */
.site-head {
  position:sticky; top:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 var(--pad);
  background:color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.brand { text-decoration:none; color:var(--fg); }
.brand-music { font-family:var(--font-disp); font-weight:900; font-size:1.45rem; letter-spacing:.01em; }
.brand-music::first-letter { color:var(--accent); }
.brand-code { font-family:"Archivo", sans-serif; font-weight:900; font-size:1.4rem; letter-spacing:-.04em; }
.brand-code .reg { color:var(--accent); font-size:.7em; vertical-align:super; }

.head-nav { display:flex; gap:clamp(1rem,3vw,2.4rem); }
.head-nav a {
  font-family:var(--font-body); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.16em; color:var(--muted); text-decoration:none; transition:color .18s ease;
}
.head-nav a:hover { color:var(--fg); }

.mode-switch { display:flex; align-items:center; gap:.55rem; }
.mode-btn {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-family:var(--font-body); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; padding:.35rem .1rem;
  position:relative; transition:color .18s ease;
}
.mode-btn[aria-pressed="true"] { color:var(--fg); }
.mode-btn[aria-pressed="true"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent);
}
.mode-sep { color:var(--line); }

/* MUSIC hover dropdown — dark glass, gold accents (stays speakeasy in both modes) */
.mode-item { position:relative; }
.mode-menu { position:absolute; top:calc(100% + 12px); right:0; min-width:198px;
  background:rgba(16,14,20,.72); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(224,184,78,.28); box-shadow:0 18px 44px rgba(0,0,0,.5);
  padding:6px; opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:950; }
.mode-menu::before { content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }  /* hover bridge */
/* mobile / touch: tap-to-open via .open class (JS), since there is no hover */
.mode-item.open .mode-menu { opacity:1; transform:none; pointer-events:auto; }
/* desktop: hover opens ONE menu; a click adds .suppress so the menu collapses even while hovered.
   (no :focus-within opener — it let a clicked/focused menu stay open while hovering the other = overlap) */
@media (hover:hover) {
  .mode-item:hover .mode-menu { opacity:1; transform:none; pointer-events:auto; }
  .mode-item.suppress:hover .mode-menu { opacity:0; transform:translateY(-8px); pointer-events:none; }
}
.mode-menu a { display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:.62rem .8rem; text-decoration:none; color:#f2f0ec; font-family:"Poppins",sans-serif;
  font-size:.84rem; letter-spacing:.01em; text-transform:none; transition:background .15s ease, color .15s ease; }
.mode-menu a span { font-family:"Space Mono",monospace; text-transform:uppercase; font-size:.55rem; letter-spacing:.16em; color:#9a948a; }
.mode-menu a:hover { background:rgba(224,184,78,.14); color:#e0b84e; }
.mode-menu a.soon { color:#6f6a62; cursor:default; }
.mode-menu a.soon:hover { background:transparent; color:#6f6a62; }
.mode-menu a.soon span { color:rgba(224,184,78,.45); }
.mode-menu-code { border-color:rgba(230,25,25,.34); }
.mode-menu-code a:hover { background:rgba(230,25,25,.14); color:#ff5a5a; }

/* =========================================================================
   ██ MUSIC WORLD ██  — black + gold speakeasy
   ========================================================================= */

/* ---- HERO (full-bleed, photo-right, gold fade box) ---- */
.m-hero { position:relative; min-height:calc(100dvh - 64px); overflow:hidden; display:flex; align-items:center; }
.m-hero-photo { position:absolute; inset:0; }
.m-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:74% center;
  filter:grayscale(1) contrast(1.06) brightness(.9); }
.m-hero-scrim { position:absolute; inset:0; background:
  linear-gradient(90deg, var(--bg) 0%, rgba(13,13,16,.94) 26%, rgba(13,13,16,.35) 58%, transparent 92%),
  linear-gradient(0deg, var(--bg) 0%, transparent 32%); }
.m-hero-frame { position:absolute; inset:20px; border:1px solid rgba(224,184,78,.26); pointer-events:none; }
.gtick { position:absolute; color:var(--accent); font-family:var(--font-body); font-size:.85rem; line-height:0; }
.gtick.tl{top:-6px;left:-5px;} .gtick.tr{top:-6px;right:-5px;}
.gtick.bl{bottom:-6px;left:-5px;} .gtick.br{bottom:-6px;right:-5px;}

.m-hero-copy { position:relative; z-index:2; max-width:660px; padding:0 var(--pad); }
.m-eyebrow { font-family:var(--font-body); text-transform:uppercase; letter-spacing:.3em;
  font-size:.72rem; color:var(--accent); margin-bottom:1.4rem; }
.m-title { font-family:var(--font-disp); font-weight:900; font-size:clamp(3.6rem,13vw,10.5rem);
  line-height:.86; letter-spacing:-.01em; color:var(--fg); }
.m-title em { font-style:italic; font-weight:700; color:var(--accent); }
.m-lede { font-family:var(--font-body); font-weight:300; font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.7; max-width:44ch; color:#d5d0c6; margin-top:1.6rem; }
.m-cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.m-hero-sig { position:absolute; z-index:2; bottom:1.5rem; right:var(--pad);
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.32em;
  font-size:.6rem; color:var(--muted); }

/* ---- gold buttons ---- */
.mbtn { display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:500; font-size:.9rem; letter-spacing:.02em;
  text-decoration:none; padding:.9rem 1.7rem; border:1px solid var(--accent); border-radius:0;
  transition:transform .12s ease, background .2s ease, color .2s ease; }
.mbtn-solid { background:var(--accent); color:var(--ink); }
.mbtn-solid:hover { background:#efce6a; }
.mbtn-ghost { background:transparent; color:var(--accent); }
.mbtn-ghost:hover { background:var(--accent); color:var(--ink); }
.mbtn:active { transform:translateY(1px); }

/* ---- hairline stat row ---- */
.m-stats { display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.m-stat { padding:clamp(1.6rem,4vw,2.8rem) var(--pad); border-left:1px solid var(--line); }
.m-stat:first-child { border-left:none; }
.m-num { display:block; font-family:var(--font-disp); font-weight:700; font-size:clamp(2.3rem,6vw,4rem); line-height:1; }
.m-num em { font-style:normal; color:var(--accent); }
.m-lab { display:block; font-family:var(--font-body); text-transform:uppercase; letter-spacing:.16em;
  font-size:.64rem; color:var(--muted); margin-top:.6rem; }

/* ---- live split ---- */
.m-live { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.m-live-copy { padding:clamp(3rem,7vw,6rem) var(--pad); align-self:center; }
.m-kicker { font-family:var(--font-body); text-transform:uppercase; letter-spacing:.26em;
  font-size:.7rem; color:var(--accent); }
.m-kicker.center { text-align:center; }
.m-h { font-family:var(--font-disp); font-weight:900; font-size:clamp(2.2rem,5.2vw,4rem); line-height:1; margin-top:1rem; }
.m-h.center { text-align:center; }
.m-body { font-family:var(--font-body); font-weight:300; font-size:1rem; line-height:1.75;
  color:#cbc6bc; max-width:52ch; margin-top:1.4rem; }
.m-body.center { text-align:center; margin-left:auto; margin-right:auto; }
/* credentials list (Background) */
.m-cred { margin-top:1.8rem; border-top:1px solid var(--line); }
.m-cred > div { display:grid; grid-template-columns:104px 1fr; gap:1.2rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.m-cred dt { font-family:var(--font-body); text-transform:uppercase; letter-spacing:.16em; font-size:.64rem; color:var(--accent); padding-top:.2rem; }
.m-cred dd { font-family:var(--font-body); font-weight:300; font-size:.98rem; line-height:1.6; color:#cbc6bc; }

.m-tags { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.9rem; }
.m-tags li { font-family:var(--font-body); font-size:.78rem; color:var(--fg);
  border:1px solid var(--line); padding:.42rem .9rem; transition:.18s ease; }
.m-tags li:hover { border-color:var(--accent); color:var(--accent); }
.m-live-photo { position:relative; min-height:58vh; overflow:hidden; }
.m-live-photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.88); }
.m-live-scrim { position:absolute; inset:0; background:
  linear-gradient(90deg, var(--bg) 0%, transparent 34%),
  linear-gradient(0deg, var(--bg) 0%, transparent 30%); }

/* ---- booking ---- */
.m-book { padding:clamp(4rem,9vw,8rem) var(--pad); text-align:center; border-bottom:1px solid var(--line); }
.m-book .mbtn { margin-top:2.2rem; }

/* booking calendar — gold/black speakeasy */
.cal { max-width:520px; margin:2.8rem auto 0; border:1px solid var(--line); background:#0f0d12; text-align:left; }
.cal-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
.cal-title { font-family:var(--font-disp); font-weight:700; font-size:1.3rem; color:var(--fg); }
.cal-nav { background:none; border:1px solid var(--line); color:var(--fg); width:34px; height:34px; font-size:1.05rem; line-height:1; cursor:pointer; border-radius:0; transition:.15s ease; }
.cal-nav:hover { border-color:var(--accent); color:var(--accent); }
.cal-nav.off { opacity:.22; cursor:default; }
.cal-dow { display:grid; grid-template-columns:repeat(7,1fr); padding:.7rem 1.2rem 0; }
.cal-dow span { text-align:center; font-size:.56rem; color:var(--muted); letter-spacing:.1em; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:.6rem 1.2rem 1.2rem; }
.cal-cell { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:transparent;
  border:1px solid transparent; color:var(--fg); font-family:var(--font-body); font-size:.82rem; cursor:pointer;
  border-radius:0; transition:.13s ease; }
.cal-cell.empty { pointer-events:none; }
.cal-cell:not(.past):not(.empty):hover { border-color:var(--accent); color:var(--accent); }
.cal-cell.past { color:#4a463f; cursor:default; }
.cal-cell.today { border-color:rgba(224,184,78,.4); }
.cal-cell.sel { background:var(--accent); color:var(--ink); border-color:var(--accent); font-weight:600; }
.cal-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem 1.2rem; border-top:1px solid var(--line); }
.cal-sel { font-size:.64rem; color:var(--muted); letter-spacing:.08em; text-transform:none; }
.cal-req { pointer-events:none; opacity:.4; }
.cal-req.ready { pointer-events:auto; opacity:1; }
.cal-cell.booked { color:#5a5650; text-decoration:line-through; cursor:default; }

/* booking.php page chrome */
.book-home { font-family:"Poppins",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--muted); text-decoration:none; transition:color .18s ease; }
.book-home:hover { color:var(--accent); }
.book-page { min-height:calc(100dvh - 64px); display:flex; flex-direction:column; justify-content:center; }
.book-note { margin-top:1.8rem; font-size:.66rem; color:var(--muted); letter-spacing:.06em; text-transform:none; }
.book-note.center { text-align:center; }
.book-note a { color:var(--accent); text-decoration:none; }
.book-note a:hover { text-decoration:underline; }

/* bio.html — editorial bio page */
.bio-wrap { display:grid; grid-template-columns:0.82fr 1.18fr; min-height:calc(100dvh - 64px); }
.bio-media { position:relative; overflow:hidden; background:#0a0a0a; }
.bio-media img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.82); }
.bio-media::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 55%, var(--bg) 100%), linear-gradient(0deg, rgba(13,13,16,.45), transparent 38%); }
.bio-text { padding:clamp(2.5rem,6vw,6rem) var(--pad); align-self:center; }
.bio-title { font-family:var(--font-disp); font-weight:900; font-size:clamp(2.8rem,7vw,5.5rem); line-height:.95; letter-spacing:-.01em; margin:1rem 0 0; }
.bio-title em { font-style:italic; font-weight:700; color:var(--accent); }
.bio-prose { margin-top:2rem; max-width:60ch; }
.bio-prose p { font-family:var(--font-body); font-weight:300; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.8; color:#cbc6bc; margin-bottom:1.3rem; }
.bio-prose p:first-child { font-family:var(--font-disp); font-weight:500; font-style:italic; font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.4; color:#ece7dd; }
.bio-note { margin-top:1.6rem; font-size:.6rem; color:var(--muted); letter-spacing:.14em; }
@media (max-width:860px){
  .bio-wrap { grid-template-columns:1fr; }
  .bio-media { min-height:46vh; order:-1; }
  .bio-media::after { background:linear-gradient(0deg, var(--bg) 5%, transparent 55%); }
}

/* hero tagline separator + repertoire page */
.lede-sep { color:var(--accent); margin:0 .45rem; font-weight:400; }
.rep-page { padding:clamp(3rem,7vw,6rem) var(--pad); max-width:var(--maxw); margin:0 auto; min-height:calc(100dvh - 64px); }
.rep-intro { max-width:60ch; margin-top:1.6rem; }
.rep-list { margin-top:3rem; border-top:1px solid var(--line); padding-top:2.4rem; }
.rep-genre { margin-bottom:3rem; }
.rep-genre-h { font-family:var(--font-disp); font-weight:700; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--fg); border-bottom:1px solid var(--line); padding-bottom:.6rem; margin-bottom:1rem; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.rep-count { font-family:"Space Mono",monospace; font-size:.62rem; color:var(--accent); letter-spacing:.14em; }
.rep-songs { list-style:none; columns:2; column-gap:2.6rem; }
.rep-songs li { break-inside:avoid; padding:.32rem 0; border-bottom:1px solid rgba(255,255,255,.05); display:flex; justify-content:space-between; gap:1rem; }
.rep-title { font-family:var(--font-body); font-size:.92rem; color:#e6e1d7; }
.rep-artist { font-family:var(--font-body); font-size:.78rem; color:var(--muted); text-align:right; flex-shrink:0; }
@media (max-width:700px){ .rep-songs { columns:1; } }

/* =========================================================================
   ██ CODE WORLD ██  — industrial brutalist / tactical telemetry
   ========================================================================= */
.mono { font-family:"Space Mono", monospace; text-transform:uppercase; letter-spacing:.08em; }
.world-code h1,.world-code h2,.world-code h3 { font-family:"Archivo", sans-serif; font-weight:900;
  text-transform:uppercase; letter-spacing:-.03em; line-height:.9; }

/* decorative FX */
.fx-scan { position:fixed; inset:0; pointer-events:none; z-index:900;
  opacity:.28; background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.2) 3px, rgba(0,0,0,.2) 4px); }
/* grain overlay removed: feTurbulence full-screen composite stalled rendering/capture. */
.fx-grain { display:none; }

.hero { position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:1px; background:var(--line);
  min-height:calc(100dvh - 64px); border-bottom:1px solid var(--line); }
.hero-media,.hero-copy { background:var(--bg); }
.hero-media { position:relative; overflow:hidden; }
.dither-canvas { display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated;
  position:absolute; inset:0; filter:contrast(1.05); }
.hero-media-frame { position:absolute; inset:14px; border:1px solid rgba(255,255,255,.28); pointer-events:none; }
.tick { position:absolute; color:var(--accent); font-family:"Space Mono",monospace; font-size:.9rem; }
.tick.tl{top:-8px;left:-6px;} .tick.tr{top:-8px;right:-6px;}
.tick.bl{bottom:-8px;left:-6px;} .tick.br{bottom:-8px;right:-6px;}
.hero-cap { position:absolute; bottom:22px; left:22px; font-size:.62rem; color:var(--fg);
  background:#050505; padding:.25rem .5rem; letter-spacing:.14em; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:var(--pad); gap:1.1rem; }
.hero-kicker { font-size:.68rem; color:var(--accent); letter-spacing:.18em; }
.hero-title { font-size:clamp(3.2rem,11vw,9rem); letter-spacing:-.05em; }
.hero-role { font-size:.8rem; color:var(--muted); letter-spacing:.1em; }
.hero-role .on { color:var(--fg); }
.hero-lede { font-family:"Space Mono",monospace; font-size:1rem; line-height:1.6; max-width:42ch; color:#cfcfd2; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem; }
.hero-telemetry { position:absolute; bottom:0; left:0; right:0; display:flex; gap:.6rem; justify-content:center;
  font-size:.58rem; color:var(--muted); letter-spacing:.2em; padding:.5rem; border-top:1px solid var(--line); background:var(--bg); }

.btn { display:inline-flex; align-items:center; justify-content:center; font-family:"Space Mono",monospace;
  font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  padding:.85rem 1.4rem; border:1px solid var(--fg); border-radius:0;
  transition:transform .12s ease, background .18s ease, color .18s ease; }
.btn-solid { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-solid:hover { background:#ff2a2a; }
.btn-ghost { background:transparent; color:var(--fg); }
.btn-ghost:hover { background:var(--fg); color:#0a0a0a; }
.btn:active { transform:translateY(1px); }

.statband { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.stat { background:var(--bg); padding:clamp(1.2rem,3vw,2.2rem) var(--pad); }
.stat dt { font-size:.62rem; color:var(--muted); letter-spacing:.16em; margin-bottom:.5rem; }
.stat dd { font-family:"Archivo",sans-serif; font-weight:900; font-size:clamp(1.8rem,5vw,3.4rem); line-height:1; }
.stat .plus { color:var(--accent); }

.block { padding:clamp(3rem,8vw,7rem) var(--pad); border-bottom:1px solid var(--line); }
.block-index { font-size:.66rem; color:var(--accent); letter-spacing:.2em; margin-bottom:1.4rem; }
.block-h { font-size:clamp(2.4rem,7vw,5rem); }
.genre-list { list-style:none; display:flex; flex-wrap:wrap; }
.genre-list li { font-size:.8rem; letter-spacing:.1em; color:var(--fg); padding:.4rem .9rem;
  border:1px solid var(--line); margin-right:-1px; margin-bottom:-1px; }
.genre-list li:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.block-book .genre-list { margin-bottom:2rem; }

.proj-index { border-bottom:1px solid var(--line); }
.proj-head,.proj-row { display:grid; grid-template-columns:64px 1.3fr 80px 1.4fr 90px; align-items:baseline; gap:1rem; padding:1rem var(--pad); }
.proj-head { font-size:.6rem; color:var(--muted); letter-spacing:.16em; border-bottom:1px solid var(--line); }
.proj-row { border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg); transition:background .18s ease; }
.proj-row:last-child { border-bottom:none; }
.proj-row:hover { background:var(--panel); }
.proj-n { color:var(--accent); font-size:.8rem; }
.proj-name { font-family:"Archivo",sans-serif; font-weight:900; font-size:clamp(1.4rem,3vw,2.4rem); letter-spacing:-.02em; text-transform:uppercase; }
.proj-yr,.proj-stack { font-size:.68rem; color:var(--muted); letter-spacing:.1em; }
.proj-go { font-size:.68rem; color:var(--fg); letter-spacing:.1em; justify-self:end; }
.proj-row:hover .proj-go { color:var(--accent); }
.proj-desc { grid-column:2 / -1; font-family:"Space Mono",monospace; font-size:.9rem; line-height:1.6; color:#b6b6ba; margin-top:.6rem; max-width:62ch; }

/* hero dot overlay — dots lift/push near the cursor; the dithered photo underneath never warps */
.hero-fx { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; image-rendering:pixelated; }

/* Claude Brain: interactive graph + rundown */
.brain { padding:clamp(3rem,7vw,6rem) var(--pad); border-bottom:1px solid var(--line); }
.brain-intro { max-width:900px; }
.brain-obsidian { display:inline-block; margin-top:1.1rem; font-size:.66rem; letter-spacing:.14em;
  color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(230,25,25,.55); padding-bottom:.2rem; transition:.18s ease; }
.brain-obsidian:hover { color:#fff; border-color:#fff; }
.brain-lede { font-family:"Space Mono",monospace; font-size:1rem; line-height:1.6; color:#c7c7ca; max-width:58ch; margin-top:1.2rem; }
.brain-build { margin-top:2.8rem; }
.build-list { list-style:none; display:flex; flex-wrap:wrap; }
.build-list li { font-size:.78rem; letter-spacing:.05em; color:var(--fg); padding:.45rem .95rem;
  border:1px solid var(--line); margin-right:-1px; margin-bottom:-1px; transition:.16s ease; }
.build-list li:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.brain-build-note { margin-top:1rem; font-size:.62rem; color:var(--muted); letter-spacing:.14em; }
.brain-graph { position:relative; margin-top:2.5rem; border:1px solid var(--line);
  background:radial-gradient(circle at 50% 45%, rgba(230,25,25,.06), transparent 62%), #0c0c0e; height:min(62vh,560px); }
#brainGraph { display:block; width:100%; height:100%; touch-action:pan-y; cursor:default; }  /* let the page scroll past on touch */
.brain-hint { position:absolute; top:12px; left:14px; font-size:.58rem; color:var(--muted); letter-spacing:.16em; pointer-events:none; }
.brain-run { margin-top:2.6rem; }
.brain-run-head { font-size:.66rem; color:var(--accent); letter-spacing:.18em; margin-bottom:1.2rem; }
.brain-caps { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.brain-caps > div { background:var(--bg); padding:1.4rem 1.6rem; }
.brain-caps dt { font-family:"Archivo",sans-serif; font-weight:900; text-transform:uppercase; font-size:1rem; letter-spacing:-.01em; }
.brain-caps dd { font-family:"Space Mono",monospace; font-size:.84rem; line-height:1.55; color:#b6b6ba; margin-top:.5rem; }
.brain-credit { margin-top:2rem; font-size:.64rem; color:var(--muted); letter-spacing:.1em; max-width:72ch; line-height:1.8; }

/* brain.php showcase page */
.bp-graph-media { background:radial-gradient(circle at 50% 45%, rgba(230,25,25,.07), transparent 62%), #0c0c0e; }
.bp-graph-media .brain-hint { position:absolute; top:14px; left:16px; z-index:2; }
.brain-page .brain-caps { border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:2rem; }
.brain-page .brain-credit { margin-bottom:2rem; }
.bp-build { margin-top:1.4rem; }
.brain-explore { margin-top:2.4rem; }

/* build-example cards (Mnestia "what you can build") */
.build-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:2.2rem; }
.build-card { background:var(--bg); padding:1.5rem 1.4rem 1.35rem; display:flex; flex-direction:column;
  transition:background .16s ease; }
.build-card:hover { background:#101014; }
.bc-top { display:flex; justify-content:space-between; align-items:center; min-height:1rem; margin-bottom:.6rem; }
.bc-idx { font-size:.6rem; color:var(--muted); letter-spacing:.2em; }
.bc-badge { font-size:.52rem; text-transform:uppercase; letter-spacing:.13em; color:var(--accent);
  border:1px solid rgba(230,25,25,.5); padding:.16rem .42rem; white-space:nowrap; }
.bc-name { font-family:"Archivo",sans-serif; font-weight:900; text-transform:uppercase; font-size:1.02rem;
  line-height:1.06; letter-spacing:-.01em; margin:0 0 .55rem; }
.bc-desc { font-family:"Space Mono",monospace; font-size:.75rem; line-height:1.5; color:#b6b6ba; flex:1; }
.bc-mods { margin-top:1rem; font-size:.58rem; letter-spacing:.06em; color:var(--accent); word-break:break-word; }

/* =========================================================================
   SHARED — ABOUT / CONTACT / FOOTER (themed via --accent + --font-*)
   ========================================================================= */
.about,.contact { padding:clamp(3.5rem,8vw,7rem) var(--pad); border-bottom:1px solid var(--line); }
.about-index { font-family:var(--font-body); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--accent); margin-bottom:1.4rem; }
.about-h { font-family:var(--font-disp); font-weight:900; font-size:clamp(2.4rem,6vw,4.5rem); line-height:1; }
.about-body { font-family:var(--font-body); font-weight:300; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.75; color:#c3beb4; max-width:64ch; margin-top:1.6rem; }
.about-cta { display:inline-flex; margin-top:2.2rem; }
[data-mode="code"] .about-cta { display:none; }
[data-mode="code"] .about-body { font-weight:400; text-transform:none; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.5rem; }
.contact-card { background:var(--bg); padding:clamp(1.6rem,4vw,2.6rem) var(--pad); display:flex; flex-direction:column; gap:.7rem; text-decoration:none; color:var(--fg); transition:background .18s ease; }
.contact-card:hover { background:var(--panel); }
.cc-k { font-family:var(--font-body); text-transform:uppercase; font-size:.64rem; color:var(--accent); letter-spacing:.18em; }
.cc-v { font-family:var(--font-disp); font-weight:600; font-size:1.2rem; }
.cc-go { font-family:var(--font-body); text-transform:uppercase; font-size:.66rem; color:var(--muted); letter-spacing:.12em; margin-top:.4rem; }
.contact-card:hover .cc-go { color:var(--fg); }

.site-foot { display:flex; flex-wrap:wrap; gap:1rem 2rem; padding:2rem var(--pad); font-family:var(--font-body);
  text-transform:uppercase; font-size:.62rem; color:var(--muted); letter-spacing:.14em; }
.site-foot .foot-reg { margin-left:auto; }
.site-foot .foot-legal { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); transition:color .18s ease; }
.site-foot .foot-legal:hover { color:var(--fg); }

/* =========================================================================
   SCROLL REVEAL / RESPONSIVE / REDUCED MOTION
   ========================================================================= */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity:1; transform:none; }

@media (max-width:860px) {
  .m-hero-photo img { object-position:68% center; }
  .m-hero-scrim { background:linear-gradient(0deg, var(--bg) 8%, rgba(13,13,16,.55) 45%, rgba(13,13,16,.2) 100%); }
  .m-stats { grid-template-columns:repeat(2,1fr); }
  .m-stat:nth-child(-n+2) { border-top:none; }
  .m-stat:nth-child(odd) { border-left:none; }
  .m-live { grid-template-columns:1fr; }
  .m-live-photo { min-height:50vh; order:-1; }
  .m-cred > div { grid-template-columns:1fr; gap:.3rem; }
  .hero { grid-template-columns:1fr; }
  .hero-media { min-height:52vh; }
  .statband { grid-template-columns:repeat(2,1fr); }
  .proj-head { display:none; }
  .proj-row { grid-template-columns:44px 1fr 74px; row-gap:.4rem; }
  .proj-stack { display:none; }
  .proj-desc { grid-column:1 / -1; }
  .contact-grid { grid-template-columns:1fr; }
  .brain-caps { grid-template-columns:1fr; }
  .build-grid { grid-template-columns:repeat(2,1fr); }
  .brain-graph { height:min(70vh,460px); }
  .head-nav { display:none; }
}
@media (max-width:460px) { .statband { grid-template-columns:1fr; } }   /* keep m-stats 2x2 on phones */
@media (max-width:540px) { .build-grid { grid-template-columns:1fr; } }

/* =========================================================================
   MNESTIA — DOWNLOAD CTA + VERSIONS PAGE + SUPPORT POPUP (code world)
   ========================================================================= */
/* ---- quick start (mnestia.php GET IT) ---- */
.qs { margin:2.2rem 0 2.6rem; max-width:880px; }
.qs-k { font-size:.66rem; color:var(--accent); letter-spacing:.18em; margin-bottom:.9rem; }
.qs-cmd { display:flex; align-items:stretch; border:1px solid var(--line); background:#0c0c0e; }
.qs-cmd code { flex:1; font-family:"Space Mono",monospace; font-size:.72rem; line-height:1.55;
  color:#c7c7ca; padding:.9rem 1rem; overflow-x:auto; white-space:pre; }
.qs-copy { font-family:"Space Mono",monospace; font-size:.62rem; letter-spacing:.14em; color:var(--accent);
  background:none; border:none; border-left:1px solid var(--line); padding:0 1.15rem; cursor:pointer;
  white-space:nowrap; transition:.16s ease; }
.qs-copy:hover { background:var(--accent); color:#fff; }
.qs-steps { margin:1.15rem 0 0 1.15rem; font-size:.74rem; line-height:1.6; color:#b6b6ba; display:grid; gap:.4rem; }
.qs-steps b { color:var(--fg); }
.qs-alt { margin-top:1.15rem; font-size:.6rem; color:var(--muted); letter-spacing:.14em; }
.qs-alt b { color:#b6b6ba; }

.dl-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem; }
.dl-btn { gap:.15rem; }
.dl-meta { margin-top:.9rem; font-size:.6rem; color:var(--muted); letter-spacing:.16em; }
.dl-verlink { color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(230,25,25,.45); }
.dl-verlink:hover { color:#fff; border-color:#fff; }

/* ---- versions page (OptiFine-style list) ---- */
.ver-page { min-height:calc(100dvh - 64px); }
.ver-head { padding:clamp(2.6rem,7vw,5rem) var(--pad) clamp(1.6rem,4vw,2.6rem); border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 12% 0%, rgba(230,25,25,.06), transparent 55%), var(--bg); }
.ver-index { font-size:.66rem; color:var(--accent); letter-spacing:.2em; margin-bottom:1.1rem; }
.ver-title { font-family:"Archivo",sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,6rem); line-height:.9; letter-spacing:-.04em; }
.ver-lede { margin-top:1.2rem; max-width:60ch; font-size:.9rem; line-height:1.6; color:#b6b6ba; }
.ver-lede code { color:var(--accent); font-size:.85em; }

.ver-list { padding:0 var(--pad) clamp(3rem,7vw,6rem); }
.ver-row { display:grid; grid-template-columns:150px 120px 84px 1fr 170px; align-items:center; gap:1.2rem;
  padding:1.15rem .4rem; border-bottom:1px solid var(--line); }
.ver-row--head { color:var(--muted); font-size:.6rem; letter-spacing:.16em; border-bottom:1px solid var(--line); }
.ver-row--head span { text-transform:uppercase; }
.vr-v { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.vr-tag { font-family:"Archivo",sans-serif; font-weight:900; font-size:1.15rem; letter-spacing:-.01em; color:var(--fg); }
.vr-cur { font-size:.5rem; letter-spacing:.14em; color:var(--accent); border:1px solid rgba(230,25,25,.5); padding:.14rem .4rem; }
.vr-date,.vr-size { font-size:.72rem; color:var(--muted); letter-spacing:.08em; }
.vr-notes { font-size:.8rem; line-height:1.5; color:#b6b6ba; }
.vr-get { justify-self:end; }
.ver-dl { font-weight:700; font-size:.68rem; letter-spacing:.1em; color:var(--fg);
  background:transparent; border:1px solid var(--line); border-radius:0; padding:.7rem 1.15rem; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease; }
.ver-dl:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.ver-foot { margin-top:1.4rem; font-size:.58rem; color:var(--muted); letter-spacing:.12em; }

/* ---- support popup (restyled: refined, not a red slab) ---- */
.coffee-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:1.2rem; opacity:0; transition:opacity .22s ease; }
.coffee-modal.is-open { opacity:1; }
.coffee-modal[hidden] { display:none; }
.cm-scrim { position:absolute; inset:0; background:rgba(0,0,0,.74); backdrop-filter:blur(6px); }
.cm-card { position:relative; width:min(430px,100%); background:var(--panel);
  background-image:radial-gradient(circle at 50% -10%, rgba(230,25,25,.08), transparent 62%);
  border:1px solid var(--line); border-radius:0; padding:2.1rem 1.8rem 1.7rem;
  box-shadow:0 28px 70px -26px rgba(0,0,0,.85);
  transform:translateY(10px) scale(.99); transition:transform .22s cubic-bezier(.16,1,.3,1); }
.coffee-modal.is-open .cm-card { transform:none; }
.cm-x { position:absolute; top:.85rem; right:.85rem; background:none; border:none; cursor:pointer;
  font-family:"Space Mono",monospace; font-size:.6rem; letter-spacing:.12em; color:var(--muted); padding:.2rem; }
.cm-x:hover { color:var(--fg); }
.cm-kicker { font-size:.58rem; color:var(--muted); letter-spacing:.18em; margin-bottom:1rem; }
.cm-kicker #cmVer { color:var(--accent); }
.cm-title { font-family:"Archivo",sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.5rem,4.5vw,1.9rem); line-height:.98; letter-spacing:-.02em; }
.cm-title em { font-style:italic; color:var(--accent); }
.cm-body { margin-top:.95rem; font-size:.8rem; line-height:1.65; color:#bcbcc0; }
.cm-cta { display:flex; flex-direction:column; gap:.65rem; margin-top:1.6rem; }
.cm-btn { display:inline-flex; align-items:center; justify-content:center; width:100%;
  font-family:"Space Mono",monospace; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  text-decoration:none; padding:.9rem 1.2rem; border-radius:0; cursor:pointer;
  border:1px solid transparent; transition:background .16s ease, color .16s ease, border-color .16s ease, transform .1s ease; }
.cm-btn:active { transform:translateY(1px); }
/* coffee = tasteful accent outline (secondary), not a filled block */
.cm-coffee { background:rgba(230,25,25,.06); border-color:rgba(230,25,25,.5); color:var(--accent); gap:.25rem; }
.cm-coffee:hover { background:rgba(230,25,25,.14); color:#fff; border-color:var(--accent); }
/* get = the actual download (primary): calm neutral solid, no red */
.cm-get { background:var(--fg); color:#0a0a0a; border-color:var(--fg); }
.cm-get:hover { background:#fff; }

.cm-legal { margin-top:1rem; font-size:.55rem; line-height:1.7; color:var(--muted); letter-spacing:.08em; }
.cm-legal a { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); }
.cm-legal a:hover { color:var(--fg); }
.ver-foot a { color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(230,25,25,.45); }
.ver-foot a:hover { color:#fff; border-color:#fff; }

/* =========================================================================
   LEGAL — terms + privacy (mode-neutral: themes via --accent / --font-*)
   ========================================================================= */
.legal-page { min-height:calc(100dvh - 64px); }
.lg-head { padding:clamp(2.6rem,7vw,5rem) var(--pad) clamp(1.6rem,4vw,2.4rem); border-bottom:1px solid var(--line); }
.lg-index { font-family:var(--font-body); text-transform:uppercase; font-size:.66rem; color:var(--accent); letter-spacing:.2em; margin-bottom:1.1rem; }
.lg-title { font-family:var(--font-disp); font-weight:900; font-size:clamp(2.6rem,9vw,6rem); line-height:.92; letter-spacing:-.03em; }
[data-mode="code"] .lg-title { text-transform:uppercase; }
.lg-stamp { margin-top:1.2rem; font-family:var(--font-body); text-transform:uppercase; font-size:.62rem; letter-spacing:.16em; color:var(--muted); }
.lg-sum { margin:1.6rem 0 0; max-width:72ch; border:1px solid var(--line); border-left:2px solid var(--accent); padding:1.2rem 1.4rem; }
.lg-sum-k { font-family:var(--font-body); text-transform:uppercase; font-size:.6rem; letter-spacing:.18em; color:var(--accent); margin-bottom:.6rem; }
.lg-sum p { font-family:var(--font-body); font-size:.86rem; line-height:1.7; color:var(--fg); }

.lg-toc { padding:1.4rem var(--pad); border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; }
.lg-toc a { font-family:var(--font-body); text-transform:uppercase; font-size:.62rem; letter-spacing:.14em;
  color:var(--muted); text-decoration:none; transition:color .15s ease; }
.lg-toc a:hover { color:var(--accent); }

.lg-part { padding:clamp(2.2rem,5vw,3.4rem) var(--pad) .6rem; }
.lg-part h2 { font-family:var(--font-disp); font-weight:900; font-size:clamp(1.7rem,4.5vw,2.6rem); letter-spacing:-.02em; line-height:1; }
[data-mode="code"] .lg-part h2 { text-transform:uppercase; }
.lg-part .lg-part-k { font-family:var(--font-body); text-transform:uppercase; font-size:.62rem; letter-spacing:.2em; color:var(--accent); margin-bottom:.9rem; }

.lg-sec { padding:clamp(1.6rem,3.5vw,2.4rem) var(--pad); border-bottom:1px solid var(--line); scroll-margin-top:84px; }
.lg-sec:last-of-type { border-bottom:none; }
.lg-sec h3 { font-family:var(--font-disp); font-weight:900; font-size:1.15rem; letter-spacing:-.01em; margin-bottom:.9rem; }
[data-mode="code"] .lg-sec h3 { text-transform:uppercase; }
.lg-sec h3 .n { color:var(--accent); font-family:var(--font-body); font-size:.8em; margin-right:.6rem; letter-spacing:.06em; }
.lg-sec p, .lg-sec li { font-family:var(--font-body); font-size:.86rem; line-height:1.75; color:#c3c3c7; max-width:72ch; }
[data-mode="music"] .lg-sec p, [data-mode="music"] .lg-sec li { color:#c3beb4; }
.lg-sec p + p { margin-top:.8rem; }
.lg-sec ul { margin:.8rem 0 0 1.1rem; }
.lg-sec li + li { margin-top:.45rem; }
.lg-sec strong { color:var(--fg); }
.lg-sec a { color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.lg-sec a:hover { color:var(--fg); border-color:var(--fg); }

@media (max-width:760px) {
  .ver-row--head { display:none; }
  .ver-row { grid-template-columns:1fr auto; row-gap:.5rem; padding:1.1rem .2rem; }
  .vr-v { grid-column:1; } .vr-get { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .vr-date,.vr-size { grid-column:1; display:inline; margin-right:1rem; }
  .vr-notes { grid-column:1 / -1; }
}
@media (max-width:540px) {
  .dl-row { flex-direction:column; align-items:stretch; }
  .dl-row .btn { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .fx-scan { display:none; }
  body,* { transition:none !important; }
}