:root{
    --void: #0a0a10;
    --void-2: #131320;
    --void-3: #1b1b2b;
    --blob: #8fe9e3;
    --blob-dim: #4d8f8c;
    --kronos: #d1622f;
    --kronos-dim: #7a3d22;
    --stone: #211c1a;
    --ink: #edeef2;
    --muted: #8b8c9e;
    --gold: #d8b25c;
    --line: rgba(237,238,242,0.09);

    --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--void);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
    position:relative;
  }

  a{color:inherit;}

  :focus-visible{
    outline: 2px solid var(--blob);
    outline-offset: 3px;
  }

  /* ---------- scanline / noise atmosphere ---------- */
  .scanlines{
    position:fixed; inset:0; pointer-events:none; z-index:200;
    background:repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode:overlay;
  }
  .vignette{
    position:fixed; inset:0; pointer-events:none; z-index:199;
    background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.55) 100%);
  }

  .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}

  /* ---------- nav ---------- */
  header.nav{
    position:sticky; top:0; z-index:150;
    background:rgba(10,10,16,0.82);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1120px; margin:0 auto; padding:16px 28px;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
  }
.nav-right{
  display:flex;
  align-items:center;
  gap:20px;
}
  .logo{
    font-family:var(--font-display);
    font-weight:700;
    letter-spacing:0.02em;
    font-size:15px;
    text-transform:uppercase;
  }
  .logo span{color:var(--blob);}
  .status-tag{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--muted);
    display:flex; align-items:center; gap:8px;
    letter-spacing:0.04em;
  }
  .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--kronos);
    box-shadow:0 0 8px var(--kronos);
    animation: pulse 2s ease-in-out infinite;
  }

  /* ---------- reactive ticker (signature element) ---------- */
  .ticker{
    border-bottom:1px solid var(--line);
    background:var(--void-2);
    overflow:hidden;
  }
  .ticker-inner{
    max-width:1120px; margin:0 auto; padding:10px 28px;
    display:flex; align-items:center; gap:12px;
    font-family:var(--font-mono);
    font-size:12.5px;
  }
  .ticker-label{
    color:var(--muted);
    white-space:nowrap;
    font-size:10px;
    letter-spacing:0.08em;
    border-right:1px solid var(--line);
    padding-right:12px;
  }
  .ticker-line{
    flex:1;
    opacity:0;
    transform:translateY(4px);
    transition:opacity 0.5s ease, transform 0.5s ease;
  }
  .ticker-line.show{opacity:1; transform:translateY(0);}
  .ticker-line .speaker{
    font-weight:700;
    margin-right:8px;
  }
  .ticker-line.blob .speaker{color:var(--blob);}
  .ticker-line.kronos .speaker{color:var(--kronos);}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:110px 0 90px;
    text-align:center;
  }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--muted);
    letter-spacing:0.12em;
    margin-bottom:26px;
  }
  h1.headline{
    font-family:'Lato', sans-serif;
    font-weight:700;
    font-size:clamp(38px, 7vw, 84px);
    line-height:1.02;
    letter-spacing:-0.01em;
    text-transform:uppercase;
    max-width:920px;
    margin:0 auto 26px;
  }
  h1.headline .accent{color:var(--blob);}
  h1.headline .accent2{color:var(--kronos);}

  .subhead{
    max-width:560px;
    margin:0 auto 40px;
    color:var(--muted);
    font-size:clamp(15px, 1.6vw, 17px);
  }

  .cta-row{
    display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  }
  .btn{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.03em;
    padding:14px 26px;
    border-radius:3px;
    text-decoration:none;
    border:1px solid transparent;
    transition:transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
    display:inline-block;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{
    background:var(--blob);
    color:var(--void);
    font-weight:700;
  }
  .btn-primary:hover{background:#a6f0eb;}
  .btn-ghost{
    border-color:var(--line);
    color:var(--ink);
  }
  .btn-ghost:hover{border-color:var(--kronos); color:var(--kronos);}

  /* ---------- section shared ---------- */
  section{padding:100px 0;}
  .section-head{
    margin-bottom:56px;
    max-width:640px;
  }
  .section-head .eyebrow{margin-bottom:14px; text-align:left;}
  .section-head h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(26px, 3.6vw, 40px);
    line-height:1.15;
    text-transform:uppercase;
  }

  /* ---------- portraits (split panel) ---------- */
  .portraits{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .portrait-col{
    position:relative;
    min-height:420px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:40px 24px;
    overflow:hidden;
  }
  .portrait-col.blob-col{
    background: radial-gradient(circle at 50% 35%, rgba(143,233,227,0.14), var(--void) 70%);
    border-right:1px solid var(--line);
  }
  .portrait-col.kronos-col{
    background: radial-gradient(circle at 50% 65%, rgba(209,98,47,0.14), var(--void) 70%);
  }
  .portrait-col img{
    width:min(280px, 70%);
    height:auto;
  }
  .portrait-label{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.14em;
    color:var(--muted);
    margin-top:22px;
  }
  .portrait-col.blob-col .portrait-label{color:var(--blob);}
  .portrait-col.kronos-col .portrait-label{color:var(--kronos);}

  /* ---------- observers ---------- */
  .observers{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .obs-card{
    background:var(--void-2);
    border:1px solid var(--line);
    padding:38px 32px 34px;
    position:relative;
    overflow:hidden;
  }
  .obs-shape{
    width:64px; height:64px;
    margin-bottom:24px;
  }
  .blob-card .obs-shape{
    background:radial-gradient(circle at 35% 30%, var(--blob), var(--blob-dim));
    border-radius: 42% 58% 63% 37% / 41% 46% 54% 59%;
    animation: morph 7s ease-in-out infinite;
    box-shadow:0 0 30px rgba(143,233,227,0.25);
  }
  .kronos-card .obs-shape{
    background:linear-gradient(155deg, var(--kronos), var(--kronos-dim));
    clip-path: polygon(20% 0%, 80% 5%, 100% 45%, 85% 100%, 30% 95%, 0% 55%);
    box-shadow:0 0 30px rgba(209,98,47,0.25);
  }
  .obs-card h3{
    font-family:var(--font-display);
    font-size:22px;
    text-transform:uppercase;
    letter-spacing:0.02em;
    margin-bottom:6px;
  }
  .blob-card h3{color:var(--blob);}
  .kronos-card h3{color:var(--kronos);}
  .obs-meta{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--muted);
    display:flex; flex-direction:column; gap:3px;
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
  }
  .obs-card p.desc{
    color:var(--ink);
    font-size:14.5px;
    opacity:0.88;
  }

  /* ---------- lore / transmission ---------- */
  .lore{
    background:var(--void-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .lore-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
  }
  .lore-copy p{
    color:var(--muted);
    font-size:15px;
    margin-bottom:18px;
    max-width:460px;
  }
  .lore-tagline{
    font-family:var(--font-display);
    color:var(--gold);
    text-transform:uppercase;
    font-size:15px;
    letter-spacing:0.08em;
    margin-top:8px;
  }
  .terminal{
    background:var(--void);
    border:1px solid var(--line);
    border-radius:4px;
    padding:22px 24px;
    font-family:var(--font-mono);
    font-size:12.5px;
    line-height:2;
  }
  .terminal .tline{color:var(--muted);}
  .terminal .tkey{color:var(--gold); font-weight:700;}
  .terminal .redact{
    background:var(--muted);
    color:transparent;
    border-radius:2px;
    padding:0 2px;
    user-select:none;
  }

.terminal-header {
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.terminal-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.terminal-nav button {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.terminal-nav button:hover {
  opacity: 0.7;
}

.terminal-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
  /* ---------- episodes ---------- */
  .ep-list{
    border-top:1px solid var(--line);
  }
  .ep-row{
    display:grid;
    grid-template-columns:110px 1fr 1.4fr;
    gap:24px;
    align-items:baseline;
    padding:22px 0;
    border-bottom:1px solid var(--line);
  }
  .ep-code{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--blob);
    letter-spacing:0.04em;
  }
  .ep-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:17px;
    text-transform:uppercase;
  }
  .ep-desc{
    color:var(--muted);
    font-size:14px;
  }
  .ep-row.pivot .ep-code{color:var(--kronos);}
  .ep-row.pivot .ep-title{color:var(--kronos);}

  .incoming{
    padding:22px 0 0;
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--muted);
    display:flex; align-items:center; gap:10px;
  }
  .incoming .dot{background:var(--blob); box-shadow:0 0 8px var(--blob);}

.ep-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.ep-nav span {
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.6;
  text-transform: uppercase;
}

.ep-nav button {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ep-nav button:hover { opacity: 0.7; }
.ep-nav button:disabled { opacity: 0.3; cursor: not-allowed; }

.ep-title a{
  text-decoration:none;
  transition:color 0.2s ease;
}
.ep-title a:hover{
  color:var(--blob);
}

  /* ---------- follow ---------- */
  .follow{
    text-align:center;
    padding:120px 0 100px;
  }
 .follow h2{
  font-family:'Lato', sans-serif;
  font-size:clamp(28px, 4.4vw, 52px);
  text-transform:uppercase;
  margin-bottom:18px;
  line-height:1.08;
  }
  
  .follow p{
    color:var(--muted);
    max-width:460px;
    margin:0 auto 36px;
  }

  footer{
    border-top:1px solid var(--line);
    padding:30px 0;
    text-align:center;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--muted);
    letter-spacing:0.04em;
  }

  /* ---------- animations ---------- */
  @keyframes pulse{
    0%, 100%{opacity:1;}
    50%{opacity:0.3;}
  }
  @keyframes morph{
    0%, 100%{ border-radius: 42% 58% 63% 37% / 41% 46% 54% 59%; }
    50%{ border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; }
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
    html{scroll-behavior:auto;}
  }

  @media (max-width:800px){
    .observers, .lore-grid, .portraits{grid-template-columns:1fr;}
    .portrait-col.blob-col{border-right:none; border-bottom:1px solid var(--line);}
    .portrait-col{min-height:320px;}
    .ep-row{grid-template-columns:70px 1fr; row-gap:6px;}
    .ep-desc{grid-column:2 / 3;}
    section{padding:70px 0;}
    .hero{padding:80px 0 60px;}
  }

.footer-cta{
  color:var(--blob);
  text-decoration:none;
  font-size:16px;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.3; }
}