/* ==========================================================================
   Studio Pixelon — "Simple" theme
   Loaded on every page EXCEPT worlds.html, after brand.css. Re-themes the
   shared nav/footer/buttons/panels (which use brand.css's CSS variables) by
   redefining those variables, then patches the handful of pages that used
   hardcoded dark rgba() fills instead of variables. worlds.html never links
   this file, so it always renders with the original dark tokens untouched.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg-deep:#F4F1E7;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#FBF9F1;
  --bg-panel-3:#F0ECDD;
  --ink:#15150F;
  --ink-dim:rgba(21,21,15,0.62);
  --ink-dim2:rgba(21,21,15,0.4);
  --cyan:#2F7D8C;
  --blue:#2F7D8C;
  --blue-deep:#22606C;
  --blue-dark:#1A4A54;
  --orange:#C97A2B;
  --orange2:#DA9143;
  --gold:#3F7D3B;
  --gold2:#336633;
  --gold3:#2A542A;
  --mint:#59A94E;
  --mint2:#3F7D3B;
  --line:rgba(21,21,15,0.13);
  --line2:rgba(21,21,15,0.09);
  --logo-badge:#3F7D3B;
  --logo-badge-dark:#2A542A;

  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --radius:14px;

  --card-bg:#FFFFFF;
  --card-border:rgba(21,21,15,0.1);
}

/* ============ GLOBAL DARK MOOD ============
   Applied via body.dark-mode, toggled in place by mode-toggle.js on every
   page (no navigation). Because panels/cards/buttons/nav/footer all read
   these custom properties already, redefining them here re-themes the
   whole page for free — only the handful of hardcoded light fills below
   need their own explicit override. */
body.dark-mode{
  --bg-deep:#0B0B08;
  --bg-panel:#15150F;
  --bg-panel-2:#1A1A13;
  --bg-panel-3:#201F17;
  --ink:#F4F1E7;
  --ink-dim:rgba(244,241,231,0.6);
  --ink-dim2:rgba(244,241,231,0.38);
  --line:rgba(244,241,231,0.14);
  --line2:rgba(244,241,231,0.09);
  --card-bg:#15150F;
  --card-border:rgba(244,241,231,0.12);
}
body{ transition:background-color .35s ease, color .35s ease; }
body.dark-mode ::selection{ background:var(--gold); color:#0B0B08; }
body.dark-mode .modal-overlay{ background:rgba(0,0,0,.65) !important; }
body.dark-mode .field input, body.dark-mode .field textarea, body.dark-mode .field select{
  background:#15150F !important; border-color:var(--line) !important; color:var(--ink) !important;
}

body{ -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-weight:700; letter-spacing:-0.01em; text-transform:none; }

/* kill the retro pixel-grid backdrop + neon selection */
body::before{ display:none; }
::selection{ background:var(--gold); color:#fff; }

/* ============ DYNAMIC TYPE SCALE ============
   Font size / line-height / letter-spacing scale smoothly with viewport
   width via clamp() instead of jumping at fixed breakpoints. */
body{ font-size:clamp(15px, 0.6vw + 13.5px, 17px); line-height:clamp(1.55, 0.3vw + 1.4, 1.75); }
p{ line-height:clamp(1.6, 0.35vw + 1.4, 1.85); letter-spacing:.005em; }
h1{ line-height:clamp(1.12, 0.3vw + 1, 1.3); letter-spacing:clamp(-.025em, -.01vw, -.01em); }
h2,h3,h4{ line-height:clamp(1.2, 0.3vw + 1.05, 1.4); }
.eyebrow{ letter-spacing:clamp(.12em, .02vw + .1em, .17em); }
.lede{ line-height:clamp(1.55, 0.3vw + 1.4, 1.75); }

/* buttons: pill-shaped instead of hard-cornered */
.btn{
  border-radius:100px !important;
  text-transform:none !important;
  font-family:var(--mono) !important;
  font-size:.78rem !important;
  letter-spacing:.02em !important;
}
.btn.primary:hover, .btn.gold:hover{ transform:translateY(-2px); }

/* panels: soft card instead of glassy dark blur */
.panel, .after .panel{
  background:var(--card-bg) !important;
  border:1px solid var(--card-border) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 30px 60px -35px rgba(21,21,15,.18);
}

/* nav — solid, opaque backdrop so scrolled content never shows through
   behind the header, plus bold/high-contrast link text on both themes.
   Targets both #site-nav (light-default pages) and #worlds-nav (the
   Explore-family mini header) so the same rules cover both. */
.nav-fade{ display:none !important; }
#site-nav .topnav, #worlds-nav .topnav{
  background:rgba(244,241,231,.98) !important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line); box-shadow:0 10px 30px -22px rgba(21,21,15,.35);
  transition:background-color .35s ease;
}
body.dark-mode #site-nav .topnav, body.dark-mode #worlds-nav .topnav{
  background:rgba(11,11,8,.97) !important; box-shadow:0 10px 30px -20px rgba(0,0,0,.6);
}
.nav-drop{ box-shadow:0 20px 40px -20px rgba(21,21,15,.25); background:var(--card-bg) !important; }
.nav-links{ font-weight:600; color:var(--ink); }
.nav-links a{ color:var(--ink); opacity:.82; }
.nav-links > li > a:hover, .nav-links > li.open > a{ opacity:1; color:var(--gold); }
.nav-icon-label{ font-weight:600; }
.brand-mark{ font-weight:700; }

/* footer stays on the dark ink tone for contrast, like the reference file's news-band */
.site-footer{
  background:#15150F !important;
  border-top:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  color:#C9C6B8;
}
.site-footer .footer-col h5, .site-footer .brand-mark{ color:#fff; }
.site-footer .footer-col a{ color:#B7B4A6; }
.site-footer .footer-col a:hover{ color:var(--mint); }
.footer-brand p{ color:#B7B4A6; }
.footer-bottom{ color:#8C8A7C; border-top-color:rgba(255,255,255,.1); }
.subscribe-form input{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.social-row a{ border-color:rgba(255,255,255,.14); color:#B7B4A6; }
.social-row a:hover{ border-color:var(--mint); color:var(--mint); }

/* generic dark rgba(15,42,71 / 10,22,40 / 13,14,22 / 6,6,8 ...) card fills used
   inline across page <style> blocks — these share the same class names on
   every page they appear, so target the classes directly. */
.feature-card, .drop-card, .world-card, .stat-box, .news-card,
.side-card, .value-c, .diff-c, .team-c, .why-item, .make-card{
  background:var(--card-bg) !important;
  border:1px solid var(--card-border) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:0 22px 40px -28px rgba(21,21,15,.16);
}
.feature-card:hover, .drop-card:hover, .world-card:hover{
  background:var(--card-bg) !important;
  transform:translateY(-6px);
  box-shadow:0 30px 50px -26px rgba(21,21,15,.22);
}
.stats-wrap, .diff-grid, .values-grid, .team-grid{ background:var(--line2) !important; }

.close-btn, .nav-arrow, .lb-close, .lb-arrow{
  background:rgba(255,255,255,.85) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  backdrop-filter:blur(6px);
}
.close-btn:hover{ background:rgba(217,90,58,.15) !important; }
.nav-arrow:hover, .lb-arrow:hover{ background:rgba(63,125,59,.15) !important; }

/* index.html hero overlay panels + progress rail */
.side-card{ color:var(--ink); }
.side-card-label{ color:var(--ink-dim) !important; }
.now-showing-item{ color:var(--ink) !important; border-bottom-color:var(--line) !important; }
.progress-rail{ background:var(--line) !important; }
.marquee{ background:rgba(63,125,59,.04) !important; border-color:var(--line) !important; }
.marquee-item{ color:var(--ink-dim) !important; }

/* mobile hero background */
.mobile-hero{
  background:
    radial-gradient(circle at 50% 0%, rgba(63,125,59,.08), transparent 60%),
    var(--bg-deep) !important;
}

/* pixel cursor: soften to match the light palette (still hidden on touch) */
#px-cursor{ background:var(--gold) !important; }
#px-cursor.hover{ background:rgba(63,125,59,.12) !important; border-color:var(--gold) !important; }
#px-cursor.down{ background:var(--orange) !important; border-color:var(--orange) !important; }

/* modal + forms */
.modal-overlay{ background:rgba(21,21,15,.5) !important; }
.modal-box{ background:#fff !important; border-color:var(--line) !important; }
.modal-tabs{ border-color:var(--line) !important; }
.field input, .field textarea, .field select{
  background:#fff !important; border-color:var(--line) !important; color:var(--ink) !important;
}

/* lightboxes / overlays that used near-black gradients */
.pf-overlay, [style*="rgba(6,6,8"]{ }

@media (prefers-color-scheme: light){ }

/* ============ index.html — SIMPLE HERO (replaces the WebGL scroll-jacked hero) ============ */
.simple-hero{ padding:170px clamp(20px,5vw,60px) 60px; max-width:1220px; margin:0 auto; }
.simple-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.simple-hero-text h1{ font-size:clamp(28px,4.2vw,44px); line-height:1.15; margin:16px 0 10px; color:var(--ink); }
.simple-hero-text .hero-tagline{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--gold); text-transform:uppercase; margin:0 0 16px; }
.simple-hero-text p{ font-size:1rem; line-height:1.7; color:var(--ink-dim); max-width:480px; margin:0 0 26px; }
.simple-hero-text .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.simple-hero-art{ position:relative; }
.simple-hero-art img{
  width:100%; border-radius:22px; display:block;
  box-shadow:0 40px 70px -30px rgba(21,21,15,.35);
}
.simple-hero-tag{
  position:absolute; left:18px; bottom:18px; z-index:2;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  padding:10px 16px; border-radius:100px; font-size:12px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.simple-hero-tag .dot{ width:8px; height:8px; border-radius:50%; }
@media (max-width:860px){
  .simple-hero{ padding-top:140px; }
  .simple-hero-grid{ grid-template-columns:1fr; }
}

.brand-toggle-wrap{ display:flex; align-items:center; min-width:0; }

/* ============ NAV SWITCH — Home / Worlds, sits next to the logo. Pure
   navigation (nav-switch.js), separate from the Light/Dark mood toggle
   below. Shared across every page: light-default pages via this file, the
   Explore family via worlds-header.css loading this same block through
   simple-theme.css. ============ */
.nav-switch{
  position:relative; display:flex; align-items:center; gap:2px; z-index:60;
  background:rgba(128,124,108,.14); border:1px solid var(--line);
  padding:4px; border-radius:100px; margin-left:16px;
  box-shadow:0 8px 20px -14px rgba(21,21,15,.3);
}
body.dark-mode .nav-switch{ background:rgba(255,255,255,.08); border-color:rgba(244,241,231,.16); }
.ns-btn{
  position:relative; z-index:2; padding:7px 15px; border-radius:100px; cursor:pointer; border:none; background:transparent;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s ease;
}
.ns-btn[aria-pressed="true"]{ color:#fff; }
.ns-slider{
  position:absolute; top:4px; left:4px; height:calc(100% - 8px); width:64px; border-radius:100px; z-index:1;
  background:linear-gradient(120deg, var(--cyan), var(--blue));
  transition:transform .38s cubic-bezier(.5,-0.2,.3,1.25), width .38s ease;
  box-shadow:0 6px 16px -4px rgba(21,21,15,.4);
}
/* fallback: only used if the nav hasn't mounted yet when the switcher inits */
.nav-switch.ns-floating{ position:fixed; top:18px; right:24px; z-index:200; margin-left:0; }
@media (max-width:640px){
  .nav-switch{ padding:3px; margin-left:10px; }
  .nav-switch.ns-floating{ top:12px; right:12px; }
  .ns-btn{ padding:6px 11px; font-size:9px; }
}
@media (max-width:420px){
  /* stay visible (not hidden) — it's the only way to reach worlds.html on
     mobile, since the nav-drawer menu doesn't list it separately. Shrink
     instead: brand.css already hides the gallery/login icon buttons below
     400px, freeing up room next to the logo. */
  .nav-switch{ margin-left:8px; padding:2px; }
  .ns-btn{ padding:5px 9px; font-size:8.5px; }
}

/* ============ LIGHT / DARK MOOD TOGGLE — segmented pill, fixed to the
   bottom of every page. In-place theme switch (mode-toggle.js), no
   navigation. ============ */
.mode-toggle{
  position:fixed; bottom:24px; right:24px; z-index:200;
  display:flex; align-items:center; gap:2px;
  background:rgba(244,241,231,.9); border:1px solid var(--line);
  padding:4px; border-radius:100px;
  box-shadow:0 14px 34px -14px rgba(21,21,15,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
body.dark-mode .mode-toggle{ background:rgba(19,19,16,.92); border-color:rgba(244,241,231,.16); }
.mt-btn{
  position:relative; z-index:2; display:flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:100px; cursor:pointer; border:none; background:transparent;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s ease;
}
.mt-btn .mt-ic{ font-size:13px; line-height:1; }
.mt-btn[aria-pressed="true"]{ color:#fff; }
.mt-slider{
  position:absolute; top:4px; left:4px; height:calc(100% - 8px); width:64px; border-radius:100px; z-index:1;
  background:linear-gradient(120deg, var(--gold), var(--mint));
  transition:transform .38s cubic-bezier(.5,-0.2,.3,1.25), width .38s ease;
  box-shadow:0 6px 16px -4px rgba(21,21,15,.4);
}
@media (max-width:640px){
  .mode-toggle{ bottom:16px; right:16px; padding:3px; }
  .mt-btn{ padding:7px 12px; font-size:9.5px; gap:4px; }
}
@media (max-width:420px){
  .mt-txt{ display:none; }
  .mt-btn{ padding:8px 12px; }
}

/* ============ VOXEL TRANSITION OVERLAY (shared by both switches) ========= */
.voxel-overlay{
  position:fixed; inset:0; z-index:500; display:grid; pointer-events:none;
}
.voxel-overlay .cell{
  background:var(--ink); opacity:0; transform:scale(0);
  transition:opacity .28s ease, transform .28s ease;
}