/* Protected original hero and its inherited styles. Changes require approval. */

:root{
  /* Doss-aligned black-first palette */
  --ink:#000;            /* page background */
  --ink-2:#0A0A0B;       /* slightly raised */
  --ink-3:#111114;       /* card surface */
  --paper:#F5F5F2;       /* warm off-white text */
  --muted: rgba(245,245,242,0.62);
  --muted-2: rgba(245,245,242,0.42);
  --rule: rgba(245,245,242,0.10);
  --rule-soft: rgba(245,245,242,0.06);
  --grid: rgba(245,245,242,0.045);
  --blue:#1A37FF;        /* Doss signature blue — single accent */
  --blue-glow: rgba(26,55,255,0.35);
  --accent: var(--paper);
  --nav-bg: rgba(0, 0, 0, 0.55);
}

/* ============================================================
   CHAMELEON PAGE THEMES (transitioned dynamically)
   ============================================================ */
html.theme-research, body.theme-research {
  --ink: #FAF9F6;          /* page background: warm off-white paper */
  --ink-2: #F1EFEA;        /* slightly raised */
  --ink-3: #E7E4DC;        /* card surface */
  --paper: #121214;        /* dark charcoal text */
  --muted: rgba(18,18,20,0.65);
  --muted-2: rgba(18,18,20,0.42);
  --rule: rgba(18,18,20,0.12);
  --rule-soft: rgba(18,18,20,0.07);
  --grid: rgba(18,18,20,0.045);
  --blue: #1A37FF;         /* Doss signature blue remains */
  --blue-glow: rgba(26,55,255,0.15);
  --nav-bg: rgba(250, 249, 246, 0.75);
}
html.theme-quant, body.theme-quant {
  --ink: #FAF9F6;          /* warm off-white paper background */
  --ink-2: #F1EFEA;
  --ink-3: #E7E4DC;
  --paper: #121214;        /* dark charcoal text */
  --muted: rgba(18,18,20,0.65);
  --muted-2: rgba(18,18,20,0.42);
  --rule: rgba(18,18,20,0.12);
  --rule-soft: rgba(18,18,20,0.07);
  --grid: rgba(0,102,204,0.045);
  --blue: #0066CC;         /* deep technical ocean blue / cyan accent */
  --blue-glow: rgba(0,102,204,0.15);
  --nav-bg: rgba(250, 249, 246, 0.75);
}
html.theme-ai4law, body.theme-ai4law {
  --ink: #000000;
  --ink-2: #0B0B0C;
  --ink-3: #141416;
  --paper: #FFFFFF;
  --muted: rgba(255,255,255,0.65);
  --muted-2: rgba(255,255,255,0.42);
  --rule: rgba(255,255,255,0.15);
  --rule-soft: rgba(255,255,255,0.08);
  --grid: rgba(255,255,255,0.05);
  --blue: #FFFFFF;         /* high-contrast monochrome accent */
  --blue-glow: rgba(255,255,255,0.20);
  --nav-bg: rgba(0, 0, 0, 0.55);
}

/* Fullscreen character background canvas */
#computed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* Chameleon structural transitions */
body {
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav, main, footer, .page, .card, .dept-tile, .btn, .pill, .upcoming, .cal-day, .cal-evt, .cal-chip, .sec-head, .join-block, ul.list li, .tree {
  transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              padding-left 0.3s ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html {
  background-color: var(--ink);
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html,body{
  color:var(--paper);
  font-family:"Sora",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-weight:300;
  min-height:100vh;
}
body{
  overflow-x:hidden;
  /* Dashed 80×80 architectural grid — barely visible */
  background-color: transparent !important;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: 0 0;
  transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
::selection{background:var(--blue);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* Italic accent — now in Sora italic instead of Newsreader */
em{
  font-family:"Sora",sans-serif;
  font-style:italic;
  font-weight:400;
  color:var(--paper);
}
em.blue{color:var(--blue)}

/* ============================================================
   NAV
============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;letter-spacing:0.04em;
  color:var(--paper);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid var(--rule-soft);
}
.nav .brand{
  display:flex;align-items:center;gap:10px;
  font-weight:500;cursor:pointer;letter-spacing:0.02em;
}
.nav .brand .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 12px var(--blue-glow);
}
.nav ul{display:flex;gap:4px;list-style:none}
.nav ul li{position:relative}
.nav ul a{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  opacity:0.66;transition:opacity .25s, color .25s;
}
.nav ul a:hover{opacity:1}
.nav ul a .glyph{
  display:inline-block;width:10px;text-align:center;
  color:var(--paper);opacity:0;transform:translateX(-4px);
  transition:opacity .35s, transform .35s, color .25s;
  font-weight:500;
}
.nav ul a:hover .glyph,
.nav ul a.active .glyph{opacity:1;transform:translateX(0)}
.nav ul a::after{
  content:"";position:absolute;left:14px;right:calc(100% - 14px);bottom:4px;
  height:1px;background:currentColor;transition:right .35s ease;
}
.nav ul a:hover::after,
.nav ul a.active::after{right:14px}
.nav ul a.active{opacity:1;color:var(--paper)}
.nav .meta{
  font-family:"JetBrains Mono",monospace;font-size:11px;
  opacity:0.45;letter-spacing:0.06em;
  display:flex;align-items:center;gap:10px;
}
.nav .meta .live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.4;box-shadow:0 0 0 0 var(--blue-glow)}
  50%{opacity:1;box-shadow:0 0 0 6px rgba(26,55,255,0)}
}

/* ============================================================
   PAGE FRAME
============================================================ */
main{min-height:100vh}
.page{display:none}
.page.active{display:block}

/* ============================================================
   HERO (home)
============================================================ */
.hero{
  min-height:100vh;position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:120px 32px 80px;
  overflow:hidden;
}
/* dashed connector line */
.hero-connector{
  position:absolute;top:0;bottom:0;left:50%;width:1px;
  background-image:linear-gradient(to bottom, var(--rule) 50%, transparent 50%);
  background-size:1px 8px;
  opacity:0.5;pointer-events:none;z-index:0;
}
.hero-stage{
  position:relative;z-index:2;
  width:min(900px,94vw);
  display:flex;align-items:center;justify-content:center;
}
#asciiCanvas{
  font-family:"JetBrains Mono",monospace;
  font-size: clamp(6px, 0.78vw, 11px);
  line-height: 1.0;letter-spacing: 0.02em;
  white-space:pre;text-align:center;
  color:var(--paper);opacity:0.96;user-select:none;
  text-shadow: 0 0 22px rgba(245,245,242,0.18);
  margin:0;display:block;
}
.hero-subtitle{
  position:relative;z-index:2;
  margin-top: 44px;text-align:center;max-width:760px;
  font-family:"Sora",sans-serif;font-size: clamp(17px, 1.4vw, 20px);
  font-weight:300;line-height:1.55;letter-spacing:-0.005em;
  color:var(--muted);
}
.hero-subtitle em{color:var(--paper)}
/* hero callout pills row — Doss numeric prefix tags */
.hero-pills{
  position:relative;z-index:2;
  margin-top:40px;
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
}
.pill{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--rule);border-radius:999px;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.06em;
  overflow:hidden;
  background: rgba(0,0,0,0.4);
  transition: border-color .25s, background .25s;
}
.pill:hover{border-color:rgba(245,245,242,0.28);background:rgba(255,255,255,0.04)}
.pill .num{
  background:var(--paper);color:#000;
  padding:6px 9px;font-weight:500;
}
.pill .lbl{padding:6px 14px;color:var(--muted);align-self:center}
.pill.blue .num{background:var(--blue);color:#fff}
.pill.blue:hover{border-color:var(--blue)}
.hero-cta{
  position:absolute; right:32px; bottom:28px;z-index:3;
  font-family:"JetBrains Mono",monospace; font-size:11px;
  opacity:0.5;display:flex;align-items:center;gap:10px;letter-spacing:0.05em;
}
.hero-cta .arrow{display:inline-block;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.hero-coords{
  position:absolute;left:32px;bottom:28px;z-index:3;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.08em;
  opacity:0.35;line-height:1.6;
}


.brand-logo{ height:26px; width:auto; }
.logo-white{ display:block; }
.logo-color{ display:none; }
.theme-research .logo-white,
.theme-quant   .logo-white{ display:none; }
.theme-research .logo-color,
.theme-quant   .logo-color{ display:block; }


@media (max-width:600px){ .brand-logo{height:22px;} }