/* =========================================================================
   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 */
  --accent-text:#e0b84e;            /* gold for small text — 10.5:1 on dark, WCAG AA */
  --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 — used for fills/borders */
  --accent-text:#ff4d4d;            /* brighter red for small TEXT only — 6:1 on dark, WCAG AA (base red is 4.25, fails) */
  --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-text); }
.brand-code { font-family:"Archivo", sans-serif; font-weight:900; font-size:1.4rem; letter-spacing:-.04em; }
.brand-code .reg { color:var(--accent-text); 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); }

/* ---- sub-nav bar (replaces dropdown menus) ---- */
.sub-nav {
  position:sticky; top:64px; z-index:799;
  display:flex; align-items:center;
  height:36px; padding:0 var(--pad);
  background:color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sub-nav::-webkit-scrollbar { display:none; }
.sub-nav-group { display:none; gap:clamp(.8rem,2.5vw,2rem); align-items:center; }
[data-mode="music"] .sub-nav-music,
[data-mode="photo"] .sub-nav-photo,
[data-mode="code"]  .sub-nav-code  { display:flex; }
.sub-nav-group a {
  font-family:var(--font-body); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted); text-decoration:none;
  white-space:nowrap; padding:.25rem 0;
  transition:color .18s cubic-bezier(.16,1,.3,1);
}
.sub-nav-group a:hover { color:var(--fg); }
/* photo mode sub-nav on light bg */
[data-mode="photo"] .sub-nav {
  background:oklch(96% 0.02 75 / 0.96);
}

/* =========================================================================
   ██ 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-text); 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-text); 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-text); }
.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-text); }
.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-text); }
.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-text); }
.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-text); 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-text); color:var(--accent-text); }
.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-text); color:var(--accent-text); }
.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-text); color:var(--accent-text); }
.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-text); 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-text); }
.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); text-decoration:none; }
.book-note a:hover { text-decoration:underline; }

/* ---- booking form ---- */
.cal-form { max-width:520px; margin:1.6rem auto 0; padding:1.4rem 1.6rem; background:var(--card,#151518); border:1px solid var(--line,#2a2a2e); }
.bf-heading { font-size:.88rem; color:var(--fg,#ece7dd); margin:0 0 1rem; }
.bf-heading strong { color:var(--accent-text,#e8c84a); }
.bf-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.75rem; }
.bf-label { display:flex; flex-direction:column; gap:4px; font-size:.7rem; color:var(--muted,#8a8680); letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-mono,"SF Mono",ui-monospace,monospace); }
.bf-label input, .bf-label textarea, .bf-label select { font-family:var(--font-body,system-ui,sans-serif); font-size:.92rem; padding:9px 12px; border:1px solid var(--line,#2a2a2e); background:var(--bg,#0d0d10); color:var(--fg,#ece7dd); outline:none; transition:border-color .15s; width:100%; box-sizing:border-box; }
.bf-label input:focus, .bf-label textarea:focus, .bf-label select:focus { border-color:var(--accent-text,#e8c84a); }
.bf-label textarea { resize:vertical; min-height:60px; }
.bf-label select { cursor:pointer; }
.bf-send { width:100%; margin-top:.6rem; cursor:pointer; }
.bf-send:disabled { opacity:.55; cursor:wait; }
.bf-done { text-align:center; color:var(--accent-text,#e8c84a); font-size:1.05rem; padding:1.5rem 0; }
@media (max-width:560px) { .bf-row { grid-template-columns:1fr; } }
@media (max-width:420px) {
  .cal-form { padding:1rem 1rem; margin-left:.5rem; margin-right:.5rem; }
  .cal { margin-left:.5rem; margin-right:.5rem; }
  .cal-head { padding:.8rem 1rem; }
  .cal-grid { padding:.5rem .8rem 1rem; }
  .cal-foot { padding:.8rem 1rem; flex-direction:column; align-items:stretch; text-align:center; }
  .cal-foot .cal-req { width:100%; }
}

/* 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-text); }
.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-text); 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-text); 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-text); 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-text); 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-text); }
.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-text); }

.block { padding:clamp(3rem,8vw,7rem) var(--pad); border-bottom:1px solid var(--line); }
.block-index { font-size:.66rem; color:var(--accent-text); 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-text); }
.block-book .genre-list { margin-bottom:2rem; }

/* ---- product cards (code world) ---- */
.proj-cards { display:grid; grid-template-columns:1.15fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-bottom:none; }
.proj-card { background:var(--bg); padding:clamp(1.6rem,3.5vw,2.4rem) var(--pad);
  display:flex; flex-direction:column; cursor:pointer;
  transition:background .22s cubic-bezier(.16,1,.3,1); }
.proj-card:hover { background:var(--panel); }
.proj-card--featured { grid-column:1 / -1; }
.proj-card-n { font-size:.6rem; color:var(--accent-text); letter-spacing:.22em; margin-bottom:.5rem; }
.proj-card-name { font-family:"Archivo",sans-serif; font-weight:900; font-size:clamp(1.6rem,3.5vw,2.8rem);
  letter-spacing:-.02em; text-transform:uppercase; line-height:1.05; margin-bottom:.7rem; }
.proj-card-desc { font-family:"Space Mono",monospace; font-size:.82rem; line-height:1.6;
  color:#b6b6ba; max-width:52ch; flex:1; }
.proj-card-stack { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1rem; }
.proj-card-stack span { font-size:.54rem; letter-spacing:.12em; color:var(--muted);
  border:1px solid var(--line); padding:.18rem .5rem; }
.proj-card-foot { display:flex; align-items:center; gap:1.2rem; margin-top:1.2rem;
  padding-top:.8rem; border-top:1px solid var(--line); }
.proj-card-yr { font-size:.6rem; color:var(--muted); letter-spacing:.14em; }
.proj-card-terms { font-size:.56rem; letter-spacing:.12em; color:var(--muted);
  text-decoration:none; border-bottom:1px solid var(--line);
  transition:color .18s cubic-bezier(.16,1,.3,1); }
.proj-card-terms:hover { color:var(--fg); }
.proj-card-cta { margin-left:auto; font-size:.62rem; letter-spacing:.14em;
  color:var(--fg); text-decoration:none;
  transition:color .18s cubic-bezier(.16,1,.3,1); }
.proj-card:hover .proj-card-cta { color:var(--accent-text); }

/* 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); 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-text); }
.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-text); letter-spacing:.18em; margin-bottom:1.2rem; }
.brain-caps { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.brain-caps > div { padding:1.2rem 0; border-bottom:1px solid var(--line); }
.brain-caps dt { font-family:"Archivo",sans-serif; font-weight:900; text-transform:uppercase; font-size:.88rem; letter-spacing:.02em; }
.brain-caps dd { font-family:"Space Mono",monospace; font-size:.78rem; line-height:1.6; color:#b6b6ba; margin-top:.35rem; max-width:68ch; }
.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 { 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-text);
  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-text); 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-text); 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; }
/* per-mode about visibility */
.about-mode { display:none; }
[data-mode="music"] .about-mode--music { display:block; }
[data-mode="photo"] .about-mode--photo { display:block; }
[data-mode="code"]  .about-mode--code  { display:block; }

.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-text); 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-cards { grid-template-columns:1fr; }
  .proj-card--featured { grid-column:auto; }
  .contact-grid { grid-template-columns:1fr; }
  /* brain-caps is already single-column */
  .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-text); 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-text);
  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); 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-text); 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-text); 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-text); 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-text); }
.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-text); }
.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-text); }
.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-text); gap:.25rem; }
.cm-coffee:hover { background:rgba(230,25,25,.14); color:#fff; border-color:var(--accent-text); }
/* 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); 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-text); 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-text); 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-text); }

.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-text); 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-text); 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); 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, .fx-grain { animation:none !important; display:none; }
  body,* { transition:none !important; animation:none !important; }
}

/* ---- accessibility (WCAG 2.1 AA): always-on visible keyboard focus, skip-link + SR utilities ---- */
:focus-visible { outline:2px solid #8ea2ff; outline-offset:2px; border-radius:3px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid #8ea2ff; outline-offset:3px; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:8px; z-index:9999; background:#111318; color:#fff; padding:10px 16px; border-radius:8px; font:600 14px/1 system-ui,sans-serif; text-decoration:none; transform:translateY(-160%); transition:transform .15s; }
.skip-link:focus { transform:none; outline:2px solid #8ea2ff; }

/* =========================================================================
   DEMO IFRAME — interactive app previews in hero media panels
   ========================================================================= */
.demo-hero-media { background:#0b0c10; }
.demo-iframe { position:absolute; inset:0; width:100%; height:100%; border:0;
  background:#0b0c10; z-index:1; }

/* =========================================================================
   LYSIA — hero waveform + stem visualization (fallback / unused)
   ========================================================================= */
.lysia-hero-media {
  background:radial-gradient(circle at 50% 45%, rgba(230,25,25,.07), transparent 62%), #0c0c0e;
}
.lysia-hero-viz { position:absolute; inset:0; display:flex; align-items:stretch; justify-content:center;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,3.5rem); }
.lysia-stem-bars { display:flex; align-items:flex-end; gap:clamp(.5rem,1.2vw,1rem); width:100%; }
.lysia-bar { flex:1; position:relative; border:1px solid var(--line); background:rgba(230,25,25,.03);
  transition:background .3s ease; min-width:0; }
.lysia-bar::before { content:""; position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(230,25,25,.22), rgba(230,25,25,.03));
  transition:height 1.6s ease; }
.lysia-bar[data-stem="drums"]::before  { height:72%; }
.lysia-bar[data-stem="bass"]::before   { height:58%; }
.lysia-bar[data-stem="vocals"]::before { height:88%; }
.lysia-bar[data-stem="guitar"]::before { height:64%; }
.lysia-bar[data-stem="piano"]::before  { height:48%; }
.lysia-bar[data-stem="other"]::before  { height:35%; }
.lysia-bar-label { position:absolute; bottom:clamp(.5rem,1.2vw,.9rem); left:50%;
  transform:translateX(-50%) rotate(180deg); writing-mode:vertical-lr;
  font-size:clamp(.44rem,.65vw,.56rem); letter-spacing:.14em; color:var(--muted);
  white-space:nowrap; pointer-events:none; }
.lysia-bar:hover { background:rgba(230,25,25,.08); }
.lysia-bar:hover .lysia-bar-label { color:var(--accent-text); }
/* stem-level hint label at top-left of the media panel */
.lysia-hero-media .lysia-hint { position:absolute; top:14px; left:16px; z-index:2;
  font-size:.58rem; color:var(--muted); letter-spacing:.16em; pointer-events:none; }

/* =========================================================================
   SKENIA — hero node-chain visualization
   ========================================================================= */
.skenia-hero-media {
  background:radial-gradient(circle at 50% 45%, rgba(230,25,25,.07), transparent 62%), #0c0c0e;
}
.skenia-hero-viz { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.6rem; padding:2rem; }
.skenia-node-preview { display:flex; align-items:center; gap:0; }
.skenia-node { display:flex; align-items:center; gap:.55rem; padding:.75rem 1.2rem;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  transition:background .2s ease, border-color .2s ease; }
.skenia-node:hover { background:rgba(230,25,25,.06); border-color:rgba(230,25,25,.4); }
.skenia-node-name { font-size:clamp(.54rem,.8vw,.68rem); letter-spacing:.12em; color:var(--fg); }
.skenia-node-port { width:9px; height:9px; border-radius:50%; border:1.5px solid var(--muted);
  background:transparent; flex-shrink:0; }
.skenia-node-port.port-midi { border-radius:1px; transform:rotate(45deg); border-color:rgba(230,25,25,.6); }
.skenia-wire { width:clamp(1.2rem,3vw,2.4rem); height:0; border-top:1px solid var(--line); flex-shrink:0; }
.skenia-wire.midi { border-top-style:dashed; border-color:rgba(230,25,25,.45); }
.skenia-scene-pill { font-size:.58rem; letter-spacing:.16em; color:var(--muted);
  border:1px solid var(--line); padding:.4rem 1rem; }
.skenia-hero-media .skenia-hint { position:absolute; top:14px; left:16px; z-index:2;
  font-size:.58rem; color:var(--muted); letter-spacing:.16em; pointer-events:none; }

/* =========================================================================
   MNESTIA FEATURES — index page with sticky sidebar TOC
   ========================================================================= */

/* Two-column layout: sidebar + content */
.feat-index-page {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 100vh;
  padding-top: 60px; /* account for fixed header */
}

/* ---- Sidebar ---- */
.feat-sidebar {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: 2rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.feat-sidebar::-webkit-scrollbar { width: 4px; }
.feat-sidebar::-webkit-scrollbar-track { background: transparent; }
.feat-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.feat-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 0;
  border-left: 1px solid var(--line);
  margin-left: 1.4rem;
}

.feat-sidebar-title {
  font-size: .6rem;
  letter-spacing: .22em;
  color: var(--accent-text);
  padding: 0 0 .8rem 14px;
  margin: 0;
  border-left: 2px solid transparent;
  margin-left: -1px;
}

.feat-sidebar-link {
  display: block;
  padding: 6px 12px 6px 14px;
  font-family: "Space Mono", monospace;
  font-size: .7rem;
  font-weight: 500;
  color: #888;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .15s, border-color .15s;
  line-height: 1.45;
}
.feat-sidebar-link:hover {
  color: var(--fg);
}
.feat-sidebar-link.active {
  color: var(--accent-text);
  border-left-color: var(--accent-text);
  font-weight: 600;
}

/* ---- Content area ---- */
.feat-content {
  min-width: 0;
  max-width: 780px;
  padding: 2.5rem clamp(1.6rem, 4vw, 3.5rem) 4rem;
}

.feat-content-header {
  margin-bottom: 3rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.feat-content-title {
  font-family: "Archivo", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
.feat-content-sub {
  font-size: .72rem;
  color: #888;
  letter-spacing: .1em;
  margin: .5rem 0 0;
}

/* ---- Sections ---- */
.feat-section {
  scroll-margin-top: 80px;
  margin-bottom: 2.8rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--line);
}
.feat-section:last-of-type {
  border-bottom: none;
}

.feat-section-title {
  font-family: "Archivo", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .4rem;
}

.feat-section-desc {
  font-family: "Space Mono", monospace;
  font-size: .78rem;
  line-height: 1.55;
  color: #999;
  margin: 0 0 1.2rem;
  max-width: 56ch;
}

.feat-sub-title {
  font-family: "Archivo", sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 2rem 0 .6rem;
}

/* ---- Feature list ---- */
.feat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feat-list li {
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-family: "Space Mono", monospace;
  font-size: .8rem;
  line-height: 1.55;
  color: #c0c0c4;
}
.feat-list li:last-child {
  border-bottom: none;
}
.feat-list li strong {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  color: var(--fg);
  font-size: .82rem;
}
.feat-list li code {
  font-family: "Space Mono", monospace;
  font-size: .78em;
  color: var(--accent-text);
}

/* Compact variant (build modules list) */
.feat-list-compact li {
  padding: .4rem 0;
  font-size: .78rem;
}

/* ---- Footer CTA ---- */
.feat-footer-cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* ---- Mobile: collapse sidebar to top ---- */
@media (max-width: 900px) {
  .feat-index-page {
    grid-template-columns: 1fr;
  }
  .feat-sidebar {
    position: static;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 1.2rem clamp(1rem, 3vw, 2rem);
  }
  .feat-sidebar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 8px;
    border-left: none;
    margin-left: 0;
  }
  .feat-sidebar-title {
    width: 100%;
    padding-left: 0;
    border-left: none;
    margin-bottom: .3rem;
  }
  .feat-sidebar-link {
    border-left: none;
    margin-left: 0;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: .62rem;
  }
  .feat-sidebar-link.active {
    border-color: var(--accent-text);
  }
  .feat-content {
    padding: 1.6rem clamp(1rem, 3vw, 2rem) 3rem;
  }
  .feat-footer-cta {
    flex-wrap: wrap;
  }
}

@media (max-width:860px) {
  .lysia-hero-viz { padding:2rem 1.2rem; }
  .skenia-node-preview { flex-wrap:wrap; justify-content:center; gap:.4rem; }
  .skenia-wire { display:none; }
  .skenia-node { padding:.5rem .7rem; }
}

/* =========================================================================
   SKENIA — interactive showcase product page
   Two products: App (software subscription) + Hardware (physical + SkeniaOS)
   Section-tinted backgrounds, interactive JS demos, 3D viewer, scroll-reveal
   ========================================================================= */

/* ---- Hero (split: text left, canvas right) ---- */
.sk-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 80vh;
  padding: clamp(5rem,12vw,9rem) var(--pad) clamp(4rem,8vw,6rem);
  border-bottom: 1px solid var(--line);
  gap: 2rem;
}
.sk-hero-content { max-width: 560px; }
.sk-eyebrow {
  font-size: .6rem; color: var(--accent-text);
  letter-spacing: .22em; margin-bottom: 1.4rem;
}
.sk-headline {
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: .94; letter-spacing: -.04em;
  text-transform: uppercase; color: var(--fg);
}
.sk-sub {
  font-family: "Space Mono", monospace;
  font-size: clamp(.86rem, 1vw, .98rem);
  line-height: 1.65; color: var(--muted);
  max-width: 50ch; margin-top: 1.6rem;
}
.sk-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.sk-hero-visual {
  width: 100%; height: clamp(200px, 30vw, 360px);
  border-radius: 6px; overflow: hidden;
}
.sk-hero-visual canvas { display: block; width: 100%; height: 100%; }

/* ---- Duo product cards ---- */
.sk-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line);
}
.sk-duo-card {
  background: var(--bg); text-decoration: none; color: var(--fg);
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 3vw, 2.8rem);
  display: flex; flex-direction: column;
  transition: background .3s cubic-bezier(0.16,1,0.3,1);
}
.sk-duo-card:hover { background: rgba(255,255,255,0.03); }
.sk-duo-badge {
  font-size: .55rem; letter-spacing: .2em;
  color: var(--muted); margin-bottom: 1.2rem;
}
.sk-duo-icon-wrap {
  width: 56px; height: 56px;
  color: rgba(255,255,255,.3); margin-bottom: 1.4rem;
  transition: color .3s cubic-bezier(0.16,1,0.3,1);
}
.sk-duo-card:hover .sk-duo-icon-wrap { color: rgba(255,255,255,.55); }
.sk-duo-icon-wrap svg { width: 100%; height: 100%; }
.sk-duo-card h3 {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 1.2rem; letter-spacing: -.01em;
  margin-bottom: .6rem;
}
.sk-duo-card p {
  font-family: "Space Mono", monospace;
  font-size: .78rem; line-height: 1.6;
  color: var(--muted); max-width: 40ch; flex: 1;
}
.sk-duo-price {
  font-size: .72rem; letter-spacing: .12em;
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.sk-duo--app .sk-duo-price { color: #3b82f6; }
.sk-duo--hw .sk-duo-price { color: #f59e0b; }
.sk-duo--app:hover .sk-duo-icon-wrap { color: rgba(59,130,246,.6); }
.sk-duo--hw:hover .sk-duo-icon-wrap { color: rgba(245,158,11,.6); }

/* ---- Product sections ---- */
.sk-product {
  border-bottom: 1px solid var(--line);
}
.sk-product-header {
  padding: clamp(4rem, 10vw, 7rem) var(--pad) clamp(2rem, 5vw, 3rem);
}
.sk-product-badge {
  font-size: .58rem; letter-spacing: .2em;
  margin-bottom: 1rem;
}
.sk-product--app .sk-product-badge { color: #3b82f6; }
.sk-product--hw .sk-product-badge { color: #f59e0b; }
.sk-product-title {
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: .92; letter-spacing: -.04em;
  text-transform: uppercase; color: var(--fg);
}
.sk-product-lede {
  font-family: "Space Mono", monospace;
  font-size: clamp(.84rem, 1vw, .94rem);
  line-height: 1.65; color: #b6b6ba;
  max-width: 60ch; margin-top: 1.2rem;
}

/* ---- Showcase blocks (visual + text, alternating) ---- */
.sk-showcase {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  border-top: 1px solid var(--line);
}
.sk-showcase--reverse { grid-template-columns: 1fr 1.2fr; }
.sk-showcase--reverse .sk-showcase-text { order: -1; }
.sk-showcase-visual {
  width: 100%;
  height: clamp(260px, 32vw, 400px);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; overflow: hidden;
  position: relative;
}
.sk-showcase-visual--contained {
  height: clamp(220px, 28vw, 340px);
  display: flex; flex-direction: column;
  padding: clamp(1rem, 2vw, 1.6rem);
}
.sk-showcase-visual--knobs {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 2vw, 1.6rem);
}
.sk-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.sk-canvas:active { cursor: grabbing; }
.sk-showcase-text h3 {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  text-transform: uppercase; letter-spacing: -.02em;
  color: var(--fg); margin-bottom: .6rem;
}
.sk-showcase-text p {
  font-family: "Space Mono", monospace;
  font-size: .82rem; line-height: 1.6;
  color: #b6b6ba; max-width: 48ch;
}
.sk-showcase-hint {
  display: inline-block; margin-top: 1rem;
  font-size: .58rem; letter-spacing: .18em;
  color: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.08);
  padding: .3rem .7rem; border-radius: 3px;
}

/* ---- Scene switcher demo ---- */
.sk-scene-display {
  flex: 1; background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px; padding: 1rem;
  display: flex; flex-direction: column;
}
.sk-scene-label {
  font-size: .62rem; letter-spacing: .18em;
  color: var(--muted); margin-bottom: .8rem;
}
.sk-scene-bars {
  flex: 1; display: flex; align-items: flex-end;
  gap: 6px; padding-bottom: .4rem;
}
.sk-scene-bar {
  flex: 1; border-radius: 2px 2px 0 0;
  transition: height .4s cubic-bezier(0.16,1,0.3,1),
              background-color .4s cubic-bezier(0.16,1,0.3,1);
  min-height: 4px;
}
.sk-scene-status {
  font-size: .58rem; letter-spacing: .14em;
  color: #10b981; margin-top: .6rem;
}
.sk-scene-btns {
  display: flex; gap: .5rem; margin-top: .8rem;
}
.sk-scene-btn {
  flex: 1; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted); cursor: pointer;
  font-size: .6rem; letter-spacing: .14em;
  padding: .5rem; border-radius: 3px;
  transition: all .2s cubic-bezier(0.16,1,0.3,1);
}
.sk-scene-btn:hover { background: rgba(255,255,255,.07); color: var(--fg); }
.sk-scene-btn.active {
  background: color-mix(in srgb, var(--sc) 15%, transparent);
  border-color: var(--sc); color: var(--fg);
}

/* ---- MIDI learn knobs ---- */
.sk-knob {
  display: flex; flex-direction: column;
  align-items: center; gap: .3rem;
  cursor: ns-resize; user-select: none;
  touch-action: none;
}
.sk-knob-ring { width: clamp(56px, 8vw, 72px); height: auto; }
.sk-knob-val {
  font-size: .72rem; letter-spacing: .06em;
  color: var(--fg);
}
.sk-knob-label {
  font-size: .5rem; letter-spacing: .16em;
  color: var(--muted);
}
.sk-knob-cc {
  font-size: .46rem; letter-spacing: .14em;
  color: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.06);
  padding: .15rem .4rem; border-radius: 2px;
  margin-top: .15rem;
}
.sk-knob.active .sk-knob-ring { filter: brightness(1.3); }

/* ---- Feature grid (compact cards) ---- */
.sk-feat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sk-feat-card {
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.sk-feat-icon {
  width: 32px; height: 32px;
  color: rgba(255,255,255,.25);
  margin-bottom: 1rem;
}
.sk-feat-icon svg { width: 100%; height: 100%; }
.sk-feat-card:hover .sk-feat-icon { color: rgba(59,130,246,.5); }
.sk-feat-card h3 {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: .82rem; text-transform: uppercase;
  letter-spacing: .02em; color: var(--fg);
  margin-bottom: .4rem;
}
.sk-feat-card p {
  font-family: "Space Mono", monospace;
  font-size: .72rem; line-height: 1.55;
  color: var(--muted);
}

/* ---- App pricing block ---- */
.sk-app-pricing {
  padding: clamp(3rem, 7vw, 5rem) var(--pad);
  border-top: 1px solid var(--line);
}
.sk-app-pricing-inner {
  background: rgba(59,130,246,.04);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 6px;
  padding: clamp(2rem, 4vw, 3rem);
  max-width: 560px;
}
.sk-price {
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--fg); line-height: 1;
  margin-bottom: 1rem;
}
.sk-price span {
  font-size: .4em; color: var(--muted);
  font-weight: 500;
}
.sk-app-pricing-inner p {
  font-family: "Space Mono", monospace;
  font-size: .78rem; line-height: 1.6;
  color: #b6b6ba; max-width: 48ch;
}
.sk-app-pricing-inner .btn { margin-top: 1.2rem; }
.sk-pricing-alt {
  font-size: .68rem; color: var(--muted);
  margin-top: 1rem !important;
}
.sk-pricing-alt a { color: var(--accent-text); }

/* ---- OS block (inside hardware product) ---- */
.sk-os-block {
  padding: clamp(3rem, 7vw, 5rem) var(--pad);
  border-top: 1px solid var(--line);
  background: rgba(16,185,129,.02);
}
.sk-os-block-title {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase; letter-spacing: -.02em;
  color: var(--fg); margin-bottom: .8rem;
}
.sk-os-block-lede {
  font-family: "Space Mono", monospace;
  font-size: clamp(.82rem, 1vw, .92rem);
  line-height: 1.65; color: #b6b6ba;
  max-width: 60ch; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* OS boot terminal */
.sk-os-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.sk-os-terminal-wrap { display: flex; flex-direction: column; }
.sk-terminal-chrome {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.sk-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.sk-terminal-title {
  font-size: .58rem; letter-spacing: .12em;
  color: var(--muted); margin-left: .6rem;
}
.sk-os-terminal {
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 0 0 6px 6px;
  padding: 1rem;
  font-family: "Space Mono", monospace;
  font-size: .72rem; line-height: 1.7;
  min-height: 220px; max-height: 280px;
  overflow-y: auto; cursor: pointer;
}
.sk-term-line { white-space: pre-wrap; }
.sk-cursor {
  animation: sk-blink .8s step-end infinite;
  color: #10b981;
}
@keyframes sk-blink { 50% { opacity: 0; } }

/* OS feature list */
.sk-os-features {
  display: flex; flex-direction: column; gap: 0;
}
.sk-os-feat {
  padding: clamp(.8rem, 2vw, 1.2rem) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sk-os-feat:first-child { border-top: 1px solid rgba(255,255,255,.06); }
.sk-os-feat-label {
  font-size: .5rem; letter-spacing: .2em;
  color: #10b981; margin-bottom: .25rem;
}
.sk-os-feat-val {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: .88rem; color: var(--fg);
  margin-bottom: .25rem;
}
.sk-os-feat p {
  font-family: "Space Mono", monospace;
  font-size: .7rem; line-height: 1.5;
  color: var(--muted);
}

/* ---- 3D hardware viewer ---- */
.sk-3d-wrap {
  margin: 0 var(--pad);
  position: relative;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; overflow: hidden;
}
.sk-3d-canvas-wrap {
  width: 100%; height: clamp(360px, 50vw, 560px);
}
.sk-3d-canvas-wrap canvas { display: block; }
.sk-3d-toggle {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12);
  color: var(--muted); cursor: pointer;
  font-size: .58rem; letter-spacing: .14em;
  padding: .45rem .9rem; border-radius: 3px;
  transition: all .2s cubic-bezier(0.16,1,0.3,1);
  z-index: 5;
}
.sk-3d-toggle:hover { background: rgba(0,0,0,.8); color: var(--fg); }
.sk-3d-toggle.active {
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.3);
  color: #3b82f6;
}
.sk-3d-info {
  position: absolute; bottom: 1rem; left: 1rem;
  background: rgba(0,0,0,.8); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: .8rem 1rem;
  max-width: 360px; z-index: 5;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s cubic-bezier(0.16,1,0.3,1),
              transform .3s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.sk-3d-info.visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.sk-3d-info-name {
  font-size: .62rem; letter-spacing: .16em;
  color: #3b82f6; margin-bottom: .3rem;
}
.sk-3d-info-desc {
  font-family: "Space Mono", monospace;
  font-size: .72rem; line-height: 1.5;
  color: #b6b6ba;
}
.sk-3d-hint {
  position: absolute; bottom: 1rem; right: 1rem;
  z-index: 4;
}

/* ---- Hardware spec cards ---- */
.sk-hw-specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sk-hw-spec {
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.sk-hw-spec-num {
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #f59e0b; line-height: 1;
  margin-bottom: .6rem;
}
.sk-hw-spec h3 {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: .82rem; text-transform: uppercase;
  color: var(--fg); margin-bottom: .4rem;
}
.sk-hw-spec p {
  font-family: "Space Mono", monospace;
  font-size: .7rem; line-height: 1.55;
  color: var(--muted);
}

/* ---- Hardware built block ---- */
.sk-hw-built {
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad);
  border-top: 1px solid var(--line);
  text-align: center; max-width: 600px;
  margin: 0 auto;
}
.sk-hw-built p {
  font-family: "Space Mono", monospace;
  font-size: .82rem; line-height: 1.6;
  color: #b6b6ba; margin-bottom: 1.4rem;
}

/* ---- Sections (stack, more) ---- */
.sk-section {
  padding: clamp(3.5rem, 9vw, 6rem) var(--pad);
  border-bottom: 1px solid var(--line);
}
.sk-section-title {
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: .92; letter-spacing: -.04em;
  text-transform: uppercase; color: var(--fg);
}
.sk-section-lede {
  font-family: "Space Mono", monospace;
  font-size: clamp(.84rem, 1vw, .94rem);
  line-height: 1.65; color: #b6b6ba;
  max-width: 60ch; margin-top: 1.2rem;
}
.sk-stack-list {
  list-style: none; display: flex;
  flex-wrap: wrap; gap: .6rem;
  margin-top: 1.6rem;
}
.sk-stack-list li {
  font-size: .68rem; letter-spacing: .14em;
  padding: .35rem .8rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px; color: var(--muted);
}

/* ---- Section tints ---- */
.sk-product--app { background: rgba(59,130,246,.015); }
.sk-product--hw { background: rgba(245,158,11,.015); }
.sk-section--stack { background: rgba(255,255,255,.01); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .sk-hero { grid-template-columns: 1fr; min-height: auto; }
  .sk-hero-visual { height: 200px; }
  .sk-showcase, .sk-showcase--reverse { grid-template-columns: 1fr; }
  .sk-showcase--reverse .sk-showcase-text { order: 0; }
  .sk-os-split { grid-template-columns: 1fr; }
  .sk-hw-specs { grid-template-columns: repeat(2, 1fr); }
  .sk-feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sk-duo { grid-template-columns: 1fr; }
  .sk-headline { font-size: clamp(2rem, 9vw, 3rem); }
  .sk-hw-specs { grid-template-columns: 1fr; }
  .sk-feat-grid { grid-template-columns: 1fr; }
  .sk-showcase-visual { height: 240px; }
  .sk-showcase-visual--knobs { flex-wrap: wrap; }
}
/* =========================================================================
   ██ PHOTOGRAPHY WORLD ██
   Three zones:
     1. Digital — warm cream/amber, inviting, Sony A7IV territory
     2. Film & Darkroom — dark safelight reds on near-black, analog chemical feel
     3. Gear — warm sand with floating camera cards, pop/depth style
   ========================================================================= */

/* ---- Photography palette ---- */
[data-mode="photo"] {
  --bg: oklch(96% 0.02 75);           /* warm cream */
  --panel: oklch(93% 0.025 72);       /* slightly deeper cream */
  --fg: oklch(18% 0.02 55);           /* warm near-black text */
  --muted: oklch(52% 0.04 60);        /* warm gray */
  --accent: oklch(62% 0.16 55);       /* warm amber */
  --accent-text: oklch(48% 0.14 45);  /* deeper amber for text contrast */
  --ink: oklch(98% 0.01 80);          /* light text on accent fills */
  --line: oklch(82% 0.03 70 / 0.5);   /* warm hairline */
  --font-disp: "Playfair Display", Georgia, serif;
  --font-body: "Poppins", system-ui, sans-serif;
}

/* ---- world visibility: hide photo world when not active ---- */
[data-mode="music"] .world-photo,
[data-mode="code"]  .world-photo { display: none; }
[data-mode="photo"] .world-music,
[data-mode="photo"] .world-code  { display: none; }
[data-mode="photo"] .code-only   { display: none !important; }

/* ---- brand in photo mode ---- */
[data-mode="photo"] .brand-code  { display: none; }
[data-mode="photo"] .brand-music { display: block; }
[data-mode="photo"] .brand-music::first-letter { color: var(--accent-text); }

/* ---- header adapts to light bg ---- */
[data-mode="photo"] .site-head {
  background: oklch(96% 0.02 75 / 0.93);
  border-bottom-color: var(--line);
}
[data-mode="photo"] .mode-btn[aria-pressed="true"]::after {
  background: var(--accent);
}

/* ---- photo-mode buttons ---- */
.pbtn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 500;
  font-size: .88rem; letter-spacing: .02em; text-decoration: none;
  padding: .85rem 1.6rem; border: 1px solid var(--accent); border-radius: 0;
  transition: transform .12s cubic-bezier(.16,1,.3,1),
              background .2s cubic-bezier(.16,1,.3,1),
              color .2s cubic-bezier(.16,1,.3,1);
}
.pbtn-solid { background: var(--accent); color: var(--ink); }
.pbtn-solid:hover { background: oklch(67% 0.17 55); }
.pbtn-ghost { background: transparent; color: var(--accent-text); }
.pbtn-ghost:hover { background: var(--accent); color: var(--ink); }
.pbtn:active { transform: translateY(1px); }

/* ---- dropdown styling for photo mode ---- */
.mode-menu-photo { border-color: oklch(62% 0.16 55 / 0.4); }
.mode-menu-photo a:hover { background: oklch(62% 0.16 55 / 0.14); color: oklch(62% 0.16 55); }

/* =========================================================================
   ZONE 1 — DIGITAL (warm, inviting, Sony A7IV)
   ========================================================================= */

.ph-hero {
  position: relative;
  min-height: calc(100dvh - 64px);
  display: flex; align-items: center;
  background: oklch(96% 0.02 75);
  overflow: hidden;
}
.ph-hero-copy {
  position: relative; z-index: 2;
  max-width: 620px; padding: 0 var(--pad);
}
.ph-eyebrow {
  font-family: "Poppins", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .3em;
  font-size: .72rem; color: var(--accent-text);
  margin-bottom: 1.4rem;
}
.ph-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  line-height: .88; letter-spacing: -.01em;
  color: var(--fg);
}
.ph-title em {
  font-style: italic; font-weight: 700;
  color: var(--accent-text);
}
.ph-lede {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7; max-width: 46ch;
  color: oklch(38% 0.03 55);
  margin-top: 1.6rem;
}
.ph-hero-cta {
  display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem;
}
.ph-hero-sig {
  position: absolute; z-index: 2; bottom: 1.5rem; right: var(--pad);
  font-family: "Poppins", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .32em;
  font-size: .6rem; color: var(--muted);
}
/* decorative frame on hero */
.ph-hero-frame {
  position: absolute; inset: 20px;
  border: 1px solid oklch(62% 0.16 55 / 0.18);
  pointer-events: none; z-index: 1;
}

/* ---- digital gallery — asymmetric 2-col ---- */
.ph-digital {
  padding: clamp(4rem, 9vw, 8rem) var(--pad);
  background: oklch(96% 0.02 75);
  border-top: 1px solid var(--line);
}
.ph-kicker {
  font-family: "Poppins", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .26em;
  font-size: .7rem; color: var(--accent-text);
}
.ph-sec-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1; margin-top: 1rem;
  color: var(--fg);
}
.ph-sec-body {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300; font-size: 1rem; line-height: 1.75;
  color: oklch(38% 0.03 55);
  max-width: 54ch; margin-top: 1.4rem;
}
.ph-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-auto-rows: minmax(240px, auto);
  gap: clamp(.6rem, 1.5vw, 1.2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.ph-gallery-item {
  position: relative; overflow: hidden;
  background: oklch(88% 0.03 70);
  border: 1px solid oklch(82% 0.03 70 / 0.5);
  display: flex; align-items: center; justify-content: center;
  min-height: 240px;
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.ph-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px oklch(40% 0.05 60 / 0.12);
}
/* organic spanning — tall left, wide bottom */
.ph-gi--tall { grid-row: span 2; }
.ph-gi--wide { grid-column: 1 / -1; min-height: 280px; }
.ph-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ph-placeholder {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .82rem; color: oklch(58% 0.04 60);
  text-align: center; padding: 1.5rem;
  letter-spacing: .04em;
}
.ph-placeholder::before {
  content: "";
  display: block;
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  border: 2px solid oklch(72% 0.06 60);
  border-radius: 50%;
  background: oklch(72% 0.06 60 / 0.08);
}

/* ---- camera specs bar (digital) ---- */
.ph-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: oklch(94% 0.025 73);
}
.ph-spec {
  padding: clamp(1.4rem, 3.5vw, 2.4rem) var(--pad);
  border-left: 1px solid var(--line);
}
.ph-spec:first-child { border-left: none; }
.ph-spec-num {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1; color: var(--fg);
}
.ph-spec-num em { font-style: normal; color: var(--accent-text); }
.ph-spec-lab {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .62rem; color: var(--muted); margin-top: .5rem;
}

/* =========================================================================
   ZONE 2 — FILM & DARKROOM
   Redesigned: true black, safelight glow, vignette corners, film strip
   ========================================================================= */

.ph-darkroom {
  --dr-bg: oklch(5% 0.005 25);          /* true black */
  --dr-fg: oklch(88% 0.02 45);
  --dr-muted: oklch(48% 0.04 35);
  --dr-accent: oklch(55% 0.2 28);       /* safelight red-amber */
  --dr-accent-soft: oklch(42% 0.16 25); /* dimmer for borders */
  --dr-accent-glow: oklch(45% 0.22 22 / 0.12);
  --dr-line: oklch(16% 0.02 25 / 0.7);

  background: var(--dr-bg);
  color: var(--dr-fg);
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad) clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  border-top: none;
}
/* no crossfade — darkroom and gear are both dark */

/* ---- vignette corner blocks (black squares fading inward) ---- */
.dr-vig {
  position: absolute; width: 38%; height: 38%;
  pointer-events: none; z-index: 1;
}
.dr-vig--tl { top: 0; left: 0;
  background: radial-gradient(ellipse at 0% 0%, oklch(3% 0 0 / 0.9) 0%, transparent 70%);
}
.dr-vig--tr { top: 0; right: 0;
  background: radial-gradient(ellipse at 100% 0%, oklch(3% 0 0 / 0.9) 0%, transparent 70%);
}
.dr-vig--bl { bottom: 0; left: 0;
  background: radial-gradient(ellipse at 0% 100%, oklch(3% 0 0 / 0.85) 0%, transparent 70%);
}
.dr-vig--br { bottom: 0; right: 0;
  background: radial-gradient(ellipse at 100% 100%, oklch(3% 0 0 / 0.85) 0%, transparent 70%);
}

/* ---- ambient safelight glow ---- */
.dr-glow {
  position: absolute; pointer-events: none; border-radius: 50%;
  mix-blend-mode: soft-light;
}
.dr-glow--main {
  top: -15%; right: 5%; width: 55%; height: 55%;
  background: radial-gradient(circle, oklch(50% 0.28 22 / 0.14), transparent 65%);
}
.dr-glow--secondary {
  bottom: -10%; left: -8%; width: 45%; height: 50%;
  background: radial-gradient(circle, oklch(45% 0.22 30 / 0.08), transparent 60%);
}

/* ---- header ---- */
.dr-header {
  position: relative; z-index: 2;
  max-width: 640px;
}
.ph-darkroom .ph-kicker { color: var(--dr-accent); }
.dr-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: .95; color: var(--dr-fg);
  margin-top: 1rem;
}
.dr-lede {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300; font-size: 1rem; line-height: 1.75;
  color: var(--dr-muted);
  max-width: 50ch; margin-top: 1.4rem;
}

/* =========================================================================
   INTERACTIVE FILM STRIP — horizontal drag-scroll
   ========================================================================= */

.dr-filmstrip-wrap {
  position: relative; z-index: 2;
  margin-top: clamp(3rem, 7vw, 5rem);
}
.dr-filmstrip {
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  padding: 1.5rem 0;
}
.dr-filmstrip::-webkit-scrollbar { display: none; }
.dr-filmstrip:active { cursor: grabbing; }

.dr-filmstrip-track {
  display: flex; gap: 0;
  width: max-content;
  /* film strip perforations — top and bottom sprocket holes */
  padding: 18px 0;
  background:
    repeating-linear-gradient(90deg,
      oklch(14% 0.02 25) 0 8px, transparent 8px 26px)
    top / 100% 12px no-repeat,
    repeating-linear-gradient(90deg,
      oklch(14% 0.02 25) 0 8px, transparent 8px 26px)
    bottom / 100% 12px no-repeat,
    oklch(10% 0.015 20);
  border-top: 2px solid oklch(18% 0.02 25);
  border-bottom: 2px solid oklch(18% 0.02 25);
  position: relative;
}

.dr-frame {
  flex: 0 0 auto;
  width: clamp(200px, 28vw, 320px);
  padding: 22px 3px;
}
.dr-frame-inner {
  width: 100%; height: clamp(260px, 36vw, 400px);
  background: oklch(8% 0.01 25);
  border: 1px solid oklch(18% 0.03 25);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: border-color .3s cubic-bezier(.16,1,.3,1),
              box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.dr-frame-inner:hover {
  border-color: var(--dr-accent-soft);
  box-shadow: 0 0 24px var(--dr-accent-glow),
              inset 0 0 12px oklch(45% 0.18 25 / 0.04);
}
.dr-frame-inner img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) brightness(0.88) saturate(0.92);
  transition: filter .4s cubic-bezier(.16,1,.3,1),
              transform .5s cubic-bezier(.16,1,.3,1);
}
.dr-frame-inner:hover img {
  filter: contrast(1.1) brightness(0.95) saturate(1);
  transform: scale(1.03);
}
.dr-frame-ph {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .72rem; color: oklch(32% 0.04 30);
  text-align: center; letter-spacing: .04em;
}
.dr-frame-ph::before {
  content: "";
  display: block; width: 36px; height: 36px;
  margin: 0 auto .8rem;
  border: 1.5px solid oklch(28% 0.06 25);
  border-radius: 50%;
  background: oklch(28% 0.06 25 / 0.08);
}

.dr-filmstrip-hint {
  font-family: "Poppins", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .2em;
  font-size: .58rem; color: oklch(32% 0.04 30);
  margin-top: .8rem; text-align: center;
}

/* ---- compact detail line below film strip ---- */
.dr-detail {
  position: relative; z-index: 2;
  font-family: "Poppins", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .62rem; color: oklch(36% 0.04 30);
  margin-top: 1.2rem;
}

/* =========================================================================
   ZONE 3 — GEAR SHOWCASE — hero camera slides
   Full-width stacked splits, alternating image side, big bold text
   ========================================================================= */

.ph-gear {
  padding: clamp(4rem, 9vw, 8rem) var(--pad);
  background: oklch(10% 0.005 25);
  border-top: 1px solid oklch(20% 0.01 30);
  color: oklch(88% 0.02 70);
}

/* ---- hero slide: full-width split — image | text ---- */
.ph-cam-slides {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex; flex-direction: column;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.ph-slide {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: clamp(420px, 65vh, 640px);
  background: oklch(96% 0.02 75);
}
/* reversed slide: image on right */
.ph-slide--rev { direction: rtl; }
.ph-slide--rev > * { direction: ltr; }

.ph-slide-img {
  display: flex; align-items: center; justify-content: center;
  background: oklch(92% 0.025 70);
  padding: clamp(2rem, 5vw, 4rem);
  position: relative; overflow: hidden;
}
.ph-slide-img img {
  max-width: 82%; max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px oklch(30% 0.04 60 / 0.22));
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.ph-slide:hover .ph-slide-img img {
  transform: translateY(-6px) scale(1.02);
}
/* floating shadow under camera for depth */
.ph-slide-img::after {
  content: "";
  position: absolute; bottom: 12%; left: 18%; right: 18%;
  height: 28px;
  background: oklch(40% 0.04 60 / 0.1);
  filter: blur(18px);
  border-radius: 50%;
  pointer-events: none;
}

.ph-slide-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 5vw, 4rem);
}
.ph-slide-name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: .9; letter-spacing: -.02em;
  color: var(--fg);
  margin-bottom: 1rem;
}

.ph-cam-badge {
  font-family: "Poppins", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .2em;
  font-size: .58rem; color: var(--accent-text);
  margin-bottom: .7rem;
}
.ph-cam-desc {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300; font-size: .92rem;
  line-height: 1.65; color: oklch(68% 0.03 55);
  max-width: 38ch;
}

/* camera spec tags */
.ph-cam-specs {
  list-style: none; display: flex;
  flex-wrap: wrap; gap: .4rem;
  margin-top: 1.2rem;
}
.ph-cam-specs li {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .72rem; color: var(--accent-text);
  border: 1px solid oklch(40% 0.06 55 / 0.6);
  padding: .35rem .7rem;
  transition: border-color .2s cubic-bezier(.16,1,.3,1),
              background .2s cubic-bezier(.16,1,.3,1);
}
.ph-cam-specs li:hover {
  border-color: var(--accent);
  background: oklch(62% 0.16 55 / 0.08);
}

/* ---- studio gear — horizontal row below slides ---- */
.ph-studio-row {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid oklch(20% 0.01 30);
}
.ph-studio-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: 1.2rem;
}
.ph-studio-item { text-align: center; }
.ph-studio-item-img {
  width: 100%; aspect-ratio: 4 / 3;
  background: oklch(16% 0.01 30);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .8rem;
  border: 1px solid oklch(22% 0.01 30);
}
.ph-gear-item-name {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: .82rem;
  color: var(--fg);
}
.ph-gear-item-desc {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300; font-size: .76rem;
  color: oklch(58% 0.03 55);
  margin-top: .2rem;
}

/* =========================================================================
   PHOTOGRAPHY — SHARED / ABOUT OVERRIDE / RESPONSIVE
   ========================================================================= */

/* about + contact sections adapt to warm bg in photo mode */
[data-mode="photo"] .about,
[data-mode="photo"] .contact {
  background: oklch(96% 0.02 75);
  border-bottom-color: var(--line);
}
[data-mode="photo"] .about-body {
  color: oklch(38% 0.03 55);
}
[data-mode="photo"] .contact-card {
  background: oklch(96% 0.02 75);
}
[data-mode="photo"] .contact-card:hover {
  background: oklch(94% 0.025 72);
}
[data-mode="photo"] .site-foot {
  background: oklch(94% 0.025 72);
  border-top: 1px solid var(--line);
}
/* about CTA in photo mode */
[data-mode="photo"] .about-cta { display: inline-flex; }

/* =========================================================================
   PHOTOGRAPHY — SCROLL-TRIGGERED FADE-IN ANIMATIONS
   ========================================================================= */

/* individual element reveals with stagger */
.ph-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
.ph-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* stagger delays for children inside a section */
.ph-reveal[data-delay="1"] { transition-delay: .1s; }
.ph-reveal[data-delay="2"] { transition-delay: .2s; }
.ph-reveal[data-delay="3"] { transition-delay: .3s; }
.ph-reveal[data-delay="4"] { transition-delay: .45s; }
.ph-reveal[data-delay="5"] { transition-delay: .55s; }

/* darkroom-specific: fade up from deeper black */
.dr-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1);
}
.dr-reveal.is-in {
  opacity: 1;
  transform: none;
}
.dr-reveal[data-delay="1"] { transition-delay: .12s; }
.dr-reveal[data-delay="2"] { transition-delay: .24s; }
.dr-reveal[data-delay="3"] { transition-delay: .36s; }
.dr-reveal[data-delay="4"] { transition-delay: .48s; }

/* vignette corners fade in slowly */
.dr-vig {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1);
}
.ph-darkroom.is-in .dr-vig { opacity: 1; }

/* glow orbs fade in */
.dr-glow {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.16,1,.3,1) .3s;
}
.ph-darkroom.is-in .dr-glow { opacity: 1; }

/* ---- film strip edge fade masks ---- */
.dr-filmstrip-wrap::before,
.dr-filmstrip-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: clamp(50px, 10vw, 120px);
  z-index: 3; pointer-events: none;
}
.dr-filmstrip-wrap::before {
  left: 0;
  background: linear-gradient(to right,
    oklch(5% 0.005 25) 0%,
    oklch(5% 0.005 25 / 0.7) 30%,
    oklch(5% 0.005 25 / 0) 100%);
}
.dr-filmstrip-wrap::after {
  right: 0;
  background: linear-gradient(to left,
    oklch(5% 0.005 25) 0%,
    oklch(5% 0.005 25 / 0.7) 30%,
    oklch(5% 0.005 25 / 0) 100%);
}

/* ---- lightbox overlay ---- */
.dr-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: oklch(3% 0.005 25 / 0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s cubic-bezier(.16,1,.3,1);
  cursor: zoom-out;
}
.dr-lightbox.is-open {
  opacity: 1; pointer-events: auto;
}
.dr-lightbox-inner {
  max-width: 90vw; max-height: 85vh;
  transform: scale(0.92);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.dr-lightbox.is-open .dr-lightbox-inner {
  transform: scale(1);
}
.dr-lightbox-inner img {
  max-width: 100%; max-height: 85vh;
  object-fit: contain; display: block;
  border: 2px solid oklch(18% 0.03 25);
  box-shadow: 0 0 60px oklch(45% 0.22 22 / 0.15);
}
.dr-lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .7rem; text-transform: uppercase;
  letter-spacing: .16em; color: oklch(60% 0.04 30);
  background: none; border: 1px solid oklch(24% 0.03 25);
  padding: .5rem 1rem; cursor: pointer;
  transition: color .2s cubic-bezier(.16,1,.3,1),
              border-color .2s cubic-bezier(.16,1,.3,1);
}
.dr-lightbox-close:hover {
  color: oklch(88% 0.02 45);
  border-color: oklch(55% 0.2 28);
}
/* placeholder label inside frame — make clickable */
.dr-frame-inner {
  cursor: pointer;
}

/* gallery items stagger in */
.ph-gallery-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1),
              transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.ph-gallery-item.is-in {
  opacity: 1;
  transform: none;
}
.ph-gallery-item:nth-child(1) { transition-delay: 0s; }
.ph-gallery-item:nth-child(2) { transition-delay: .08s; }
.ph-gallery-item:nth-child(3) { transition-delay: .16s; }
.ph-gallery-item:nth-child(4) { transition-delay: .24s; }
.ph-gallery-item:nth-child(5) { transition-delay: .3s; }
.ph-gallery-item:nth-child(6) { transition-delay: .36s; }

/* film frames stagger in */
.dr-frame {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1),
              transform .5s cubic-bezier(.16,1,.3,1);
}
.dr-frame.is-in {
  opacity: 1; transform: none;
}
.dr-frame:nth-child(1) { transition-delay: 0s; }
.dr-frame:nth-child(2) { transition-delay: .06s; }
.dr-frame:nth-child(3) { transition-delay: .12s; }
.dr-frame:nth-child(4) { transition-delay: .18s; }
.dr-frame:nth-child(5) { transition-delay: .24s; }
.dr-frame:nth-child(6) { transition-delay: .3s; }
.dr-frame:nth-child(7) { transition-delay: .36s; }
.dr-frame:nth-child(8) { transition-delay: .42s; }

/* gear camera slides stagger */
.ph-slide {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
}
.ph-slide.is-in { opacity: 1; transform: none; }

/* reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .ph-reveal, .dr-reveal, .ph-gallery-item, .dr-frame,
  .ph-slide, .dr-vig, .dr-glow {
    opacity: 1 !important; transform: none !important;
    transition: none !important;
  }
}

/* ---- responsive ---- */
@media (max-width: 860px) {
  .ph-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .ph-gi--tall { grid-row: span 1; }
  .ph-gi--wide { grid-column: auto; min-height: 220px; }

  .ph-specs {
    grid-template-columns: repeat(2, 1fr);
  }
  .ph-spec:nth-child(-n+2) { border-top: none; }
  .ph-spec:nth-child(odd) { border-left: none; }

  .dr-frame { width: clamp(180px, 42vw, 280px); }
  .dr-frame-inner { height: clamp(230px, 54vw, 350px); }

  /* hero slides stack vertically */
  .ph-slide {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ph-slide--rev { direction: ltr; }
  .ph-slide-img {
    min-height: 52vw;
    padding: clamp(1.5rem, 4vw, 3rem);
  }
  .ph-slide-name {
    font-size: clamp(2.4rem, 10vw, 4rem);
  }
  .ph-studio-items {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .ph-gallery {
    grid-template-columns: 1fr;
  }
  .ph-gi--wide { min-height: 200px; }
  .ph-specs {
    grid-template-columns: 1fr;
  }
  .dr-frame { width: clamp(160px, 60vw, 260px); }
  .dr-frame-inner { height: clamp(200px, 72vw, 320px); }
  .ph-studio-items {
    grid-template-columns: 1fr;
  }
}