/* =============================================================================
   BIG FAT DEVELOPMENTS — Stylesheet
   -----------------------------------------------------------------------------
   The design language is inherited from THE DIGITAL GLADE, by way of the HAII
   site. The token block below is the actual inheritance: same names, same
   values. Anything built on these tokens is speaking the same language as every
   BFD site that came before it.

   A clearing in a forest, at night. Dark ground, green growth, blue and gold
   for the light getting through.
   ========================================================================== */


/* =============================================================================
   DESIGN TOKENS
   -----------------------------------------------------------------------------
   Every value the site uses, named once. Change a line here and the whole site
   follows. Never hard-code a colour below this block.
   ========================================================================== */
:root {
  /* Seed Gradient Colors (The Merged Bloom) */
  --seed-gold-glow: #FFD299;
  --seed-peach-soft: #FF9EAA;
  --seed-violet-soft: #B892FF;
  --seed-cyan-glow: #4EF0F0;
  --seed-cyan-light: #A5F3FC;
  --seed-indigo-soft: #818CF8;
  --seed-slate: #F8FAFC;

  /* Ground — darkest to least dark */
  --void:       #050908;
  --deep:       #080e0a;
  --surface:    #0d1810;
  --elevated:   #121f16;
  --card:       #162218;
  --card-hover: #1c2b1f;

  /* Green — what grows */
  --green-900: #0f2d1d;
  --green-700: #1e5c3a;
  --green-500: #2d8c5c;
  --green-400: #52b788;
  --green-300: #74c69d;
  --green-100: #b7e4c7;

  /* Blue — signal */
  --blue-900:  #061420;
  --blue-700:  #0d2d4a;
  --blue-500:  #1a6ba8;
  --blue-300:  #4cc9f0;
  --blue-glow: rgba(76, 201, 240, 0.20);

  /* Gold — warmth, worth */
  --gold:        #d4a24c;
  --gold-dim:    rgba(212, 162, 76, 0.25);
  --gold-bright: #e8c47a;

  /* Atmosphere */
  --aurora-a: rgba(82, 183, 136, 0.12);
  --aurora-b: rgba(76, 201, 240, 0.08);
  --aurora-c: rgba(145, 71, 199, 0.07);

  --pink-sunset: #ff7b93;
  --violet-glow: #9147c7;

  /* Text */
  --text-bright:    #f0faf2;
  --text-primary:   #c8e6d0;
  --text-secondary: #8ab59a;
  --text-muted:     #506860;
  --text-accent:    var(--green-300);
  --text-link:      var(--blue-300);

  /* Type */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Consolas', monospace;

  /* Measure */
  --nav-h:     72px;
  --max-w:     1200px;
  --content-w: 820px;

  /* Corners */
  --r-xs:   3px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Edges */
  --border-dim:  1px solid rgba(82, 183, 136, 0.10);
  --border-glow: 1px solid rgba(82, 183, 136, 0.28);
  --border-blue: 1px solid rgba(76, 201, 240, 0.20);

  /* Depth */
  --shadow-card:       0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow-green: 0 0 40px rgba(82, 183, 136, 0.18);
  --shadow-glow-blue:  0 0 40px rgba(76, 201, 240, 0.18);
  --shadow-glow-gold:  0 0 40px rgba(212, 162, 76, 0.20);

  /* Motion */
  --ease-fast:   0.15s ease;
  --ease-med:    0.35s ease;
  --ease-slow:   0.65s cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: 0.5s  cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =============================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* The spore canvas.
   NOTE: the previous stylesheet styled "#spore-canvas" while the element was
   actually "#glade-spores", so that rule had never applied to anything and the
   canvas was positioned by inline styles instead. Named correctly here. */
#glade-spores {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}


/* =============================================================================
   TYPOGRAPHY
   ========================================================================== */
/* Headings use the sans at light weight, carried from the HAII site's hero
   treatment. The serif is kept for blockquotes only, where a quotation wants a
   different voice from the structure around it. */
h1, h2, h3 {
  font-family: var(--font-sans);
  color: var(--text-bright);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 300;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; }

/* ── The Ghost Bloom gradient ──────────────────────────────────────────────
   Vesper's Ghost Bloom logo, read back as four stops. On the HAII site it
   carried the word "Developments"; here it carries "intelligence".

   The text is painted by clipping the gradient to the glyphs, which means the
   colour must be made transparent for the gradient to show through — so the
   fallback matters: if background-clip fails, the word would vanish entirely.
   @supports guards it, leaving plain bright text anywhere it isn't supported. */
.bloom-text { color: var(--seed-cyan-light, var(--text-bright)); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bloom-text {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  
  .bloom-releases {
    background-image: linear-gradient(45deg, var(--seed-cyan-light) 0%, var(--seed-violet-soft) 30%, var(--seed-peach-soft) 70%, var(--seed-gold-glow) 100%);
  }
  
  .bloom-home {
    background-image: linear-gradient(135deg, var(--seed-gold-glow) 0%, var(--seed-peach-soft) 25%, var(--seed-violet-soft) 50%, var(--seed-cyan-glow) 75%, var(--seed-cyan-light) 100%);
  }
  
  .bloom-origin {
    background-image: linear-gradient(90deg, var(--seed-peach-soft) 0%, var(--seed-violet-soft) 30%, var(--seed-cyan-glow) 70%, var(--seed-cyan-light) 100%);
  }
  
  .bloom-contact {
    background-image: linear-gradient(-45deg, var(--seed-cyan-glow) 0%, var(--seed-violet-soft) 35%, var(--seed-peach-soft) 70%, var(--seed-gold-glow) 100%);
  }

  .bloom-artefacts {
    background-image: linear-gradient(90deg, var(--seed-gold-glow) 0%, var(--seed-peach-soft) 33%, var(--seed-violet-soft) 66%, var(--seed-cyan-glow) 100%);
  }
}

p { margin: 0 0 1.2em; }

b, strong { color: var(--text-bright); font-weight: 700; }
i, em     { color: var(--text-accent); font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-500);
  margin-bottom: 1em;
}

.emphasis {
  color: var(--text-bright);
  font-size: 1.1em;
  border-left: 2px solid var(--green-700);
  padding-left: 1.2em;
}

.text-link {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-fast);
}
.text-link:hover { border-bottom-color: var(--text-link); }


/* =============================================================================
   LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 3rem);
}
.wrap.narrow { max-width: var(--content-w); }

.band { padding: clamp(4rem, 10vh, 7rem) 0; position: relative; }
.band-alt { background: var(--deep); }


/* =============================================================================
   ACCESSIBILITY
   -----------------------------------------------------------------------------
   The skip link is invisible until focused by a keyboard. Focus rings are kept
   visible everywhere - removing them is the single most common way a site
   becomes unusable without a mouse.
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green-700);
  color: var(--text-bright);
  padding: 0.8em 1.4em;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}


/* =============================================================================
   NAVIGATION
   ========================================================================== */
.glade-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(5, 9, 8, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-dim);
}

.nav-container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.nav-logo .seed { color: var(--green-400); font-size: 1.1rem; }
.nav-logo .bfd b { color: var(--text-bright); }

.nav-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  display: inline-block; padding: 0.42rem 0.85rem;
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 500;
  color: var(--text-secondary); border-radius: var(--r-full);
  border: 1px solid transparent; text-decoration: none;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); letter-spacing: 0.01em;
  position: relative; overflow: hidden; z-index: 1;
}
.nav-link::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(135deg, rgba(82, 183, 136, 0.15), rgba(212, 162, 76, 0.15));
  opacity: 0; transition: opacity 0.6s ease; z-index: -1;
}
.nav-link:hover { color: var(--text-bright); background: rgba(82, 183, 136, 0.10); }
.nav-link.active { 
  color: var(--gold); 
  border-color: rgba(212, 162, 76, 0.4);
  box-shadow: 0 0 15px rgba(82, 183, 136, 0.2), inset 0 0 10px rgba(212, 162, 76, 0.1);
}
.nav-link.active::before { opacity: 1; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--green-300);
  transition: transform var(--ease-fast), opacity var(--ease-fast);
}


/* =============================================================================
   HERO
   ========================================================================== */
/* The terminal line sits centred between the nav's lower edge and the heading.

   --hero-gap is the space BELOW the line, measured to the top of the heading's
   text box. The space above it is deliberately larger by --hero-lead, because
   the two are not optically equivalent: the heading's line-height (1.15) puts
   roughly half a rem of empty leading above the capital letters, so an equal
   pair of gaps reads as bottom-heavy. --hero-lead is that correction, and it
   is the only number to touch if the line still sits high or low. */
.hero {
  --hero-gap:  clamp(1.6rem, 4.5vh, 2.6rem);
  --hero-lead: 0.9rem;
  padding: calc(var(--hero-gap) + var(--hero-lead)) 0 clamp(3rem, 8vh, 6rem);
  position: relative;
}

  /* Dim headings by 20% to represent infant human-AI collaboration */
  .hero h1.reveal.visible { opacity: 0.8; }

/* The terminal line. Carried from the previous BFD site. */
.term {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--green-400);
  margin-bottom: var(--hero-gap);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.term .prompt { color: var(--green-700); margin-right: 0.6em; }
.term .typed  { color: var(--green-300); }
.term .cursor {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  background: var(--green-400);
  margin-left: 3px;
  animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* "Stop Vibe-Coding. Start Engineering." now lives in the turn section rather
   than the hero, so the two-tone treatment follows it there. */
.turn-head .stop  { color: var(--text-muted); }
.turn-head .start { color: var(--text-bright); }

.sub {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text-primary);
  max-width: 46ch;
}
.lede {
  color: var(--text-secondary);
  max-width: 56ch;
}

/* The hero carries real prose now, not just a strapline. Held to a readable
   measure and stepped down from .sub so the eye has a clear order to move in:
   heading, then strapline, then this. */
.hero-body {
  max-width: 62ch;
  margin-top: 1.6rem;
  color: var(--text-secondary);
}
.hero-body p { margin-bottom: 1.1em; }
.hero-offer {
  color: var(--text-primary);
  border-left: 2px solid var(--green-700);
  padding-left: 1.2em;
  margin-bottom: 0;
}

/* The hero's only action: an invitation to go further, not a purchase. */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 2.4rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--ease-fast);
}
.scroll-cue:hover { color: var(--green-300); }
.scroll-cue .arrow {
  display: inline-block;
  animation: cue-drift 2.4s ease-in-out infinite;
}
@keyframes cue-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}


/* =============================================================================
   BUTTONS
   ========================================================================== */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.7em;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ease-spring), box-shadow var(--ease-med),
              background var(--ease-med);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background-image: linear-gradient(135deg, var(--green-500), var(--green-700));
  color: var(--text-bright);
  border: 1px solid var(--green-400);
  box-shadow: var(--shadow-glow-green);
}
.btn-primary:hover { box-shadow: var(--shadow-glow-gold); }

.btn-gold {
  background-image: linear-gradient(135deg, rgba(212,162,76,0.18), rgba(212,162,76,0.08));
  color: var(--gold-bright);
  border: 1px solid rgba(212, 162, 76, 0.4);
}
.btn-gold:hover {
  background-image: linear-gradient(135deg, rgba(212,162,76,0.28), rgba(212,162,76,0.15));
  box-shadow: var(--shadow-glow-gold);
  color: var(--text-bright);
}

.btn-price {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gold-bright);
  padding-left: 0.7em;
  border-left: 1px solid rgba(240, 250, 242, 0.25);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: var(--border-dim);
}
.btn-ghost:hover { color: var(--green-300); border-color: var(--green-700); }


/* =============================================================================
   CARDS & METHOD
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.6rem;
  margin: 2.5rem 0;
}

.card {
  background: var(--card);
  border: var(--border-dim);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--ease-med), transform var(--ease-med);
}
.card:hover {
  border-color: rgba(82, 183, 136, 0.28);
  transform: translateY(-3px);
}
.card h3 { margin-bottom: 0.2em; }

.card-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2em;
}
.card-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

.method {
  border-top: var(--border-dim);
  padding-top: 2.5rem;
  max-width: var(--content-w);
}


/* =============================================================================
   PAGE HERO
   -----------------------------------------------------------------------------
   Inner pages get a shorter hero than the landing page: enough to establish
   where you are, then straight into the substance.
   ========================================================================== */
.page-hero { padding-bottom: 0; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }

/* The Exchange leads with the offering itself and no page heading, so this
   band carries the top spacing a hero would otherwise have provided. */
.offering-band { padding-top: clamp(2rem, 5vh, 3.2rem); }

/* ── The offering, two columns ─────────────────────────────────────────────
   What you're buying on the left, what's inside it on the right, so the whole
   shape of the thing is visible without scrolling for it.

   The card is sticky rather than fixed-height. Ten modules and a product card
   will not both fit a laptop viewport at a readable size — that is arithmetic,
   not styling — so instead of shrinking either into unreadability, the card
   stays in view while the module list moves past it. The offer is never
   scrolled away from.

   Sticky only applies where there is height to spare: min-height 760px, which
   is roughly a laptop viewport once browser chrome is accounted for. On
   anything shorter the card simply scrolls normally, because a sticky element
   taller than its viewport traps the reader. */
.offering-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 1000px) and (min-height: 760px) {
  .offering-grid > .term-card {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
  }
}

.offering-modules .module-list { margin-top: 1.6rem; }
.offering-modules h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.offering-modules .lede { margin-bottom: 0; }

/* Tighter than the standalone list this used to be — it is sharing the row
   with a card now. */
.offering-modules .module { padding: 0.8rem 0; }
.offering-modules .module-body span { font-size: 0.88rem; }

@media (max-width: 999px) {
  .offering-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   TERMINAL CARD
   -----------------------------------------------------------------------------
   Homage to the first BFD site: window chrome, a prompt line, and a status
   strip along the foot. The offering is framed as something you run rather
   than something sold to you.
   ========================================================================== */
.term-card {
  border: var(--border-glow);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card), var(--shadow-glow-green);
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.term-card-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1rem;
  background: var(--deep);
  border-bottom: var(--border-dim);
}
.term-card-dots { display: flex; gap: 6px; }
.term-card-dots i {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  display: block;
}
.term-card-dots .d-r { background: var(--seed-peach-soft); }
.term-card-dots .d-y { background: var(--seed-gold-glow); }
.term-card-dots .d-g { background: var(--seed-cyan-glow); }
.term-card-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.term-card-body { 
  padding: clamp(1.6rem, 4vw, 2.6rem); 
  flex: 1;
  overflow-y: auto;
}

/* Scrollbar Styling for Term Cards */
.term-card-body::-webkit-scrollbar {
  width: 8px;
}
.term-card-body::-webkit-scrollbar-track {
  background: var(--surface);
}
.term-card-body::-webkit-scrollbar-thumb {
  background: rgba(82, 183, 136, 0.2);
  border-radius: 4px;
}
.term-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(82, 183, 136, 0.4);
}

.term-card-cmd {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--green-300);
  margin-bottom: 1.8em;
}
.term-card-cmd .prompt { color: var(--green-700); margin-right: 0.5em; }

.term-card-name {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin-bottom: 0.7em;
}
.term-card-name .plus { color: var(--green-500); margin-right: 0.25em; }

.term-card-desc { color: var(--text-secondary); max-width: 56ch; }

.term-card-specs {
  list-style: none;
  margin: 1.8rem 0;
  padding: 0;
  border-top: var(--border-dim);
}
.term-card-specs li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  padding: 0.7rem 0;
  border-bottom: var(--border-dim);
  font-family: var(--font-mono);
  font-size: 0.84rem;
}
.spec-k {
  color: var(--green-700);
  min-width: 6.5rem;
  letter-spacing: 0.08em;
}
.spec-v { color: var(--text-secondary); flex: 1; }

.term-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 1.8rem;
}
.term-card-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.term-card-status {
  padding: 0.6rem 1rem;
  background: var(--deep);
  border-top: var(--border-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-align: center;
}


/* =============================================================================
   MODULE LIST
   ========================================================================== */
.module-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: var(--border-dim);
}
.module {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.1rem 0;
  border-bottom: var(--border-dim);
  transition: border-color var(--ease-med);
}
.module:hover { border-bottom-color: rgba(82, 183, 136, 0.3); }

.module-num {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--green-700);
  min-width: 2.4rem;
}
.module-body { display: flex; flex-direction: column; gap: 0.25rem; }
.module-body b { color: var(--text-bright); font-weight: 500; }
.module-body span { color: var(--text-secondary); font-size: 0.95rem; }

/* The last module says less than the others, and the gold marks it as
   different rather than unfinished. */
.module-final .module-num { color: var(--gold); }
.module-final .module-body b { color: var(--gold-bright); }
.module-final .ellipsis { letter-spacing: 0.14em; opacity: 0.75; }


/* =============================================================================
   REQUIREMENTS LIST
   ========================================================================== */
.req-list {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}
.req-list li {
  display: flex;
  gap: 0.9rem;
  padding: 0.55rem 0;
  color: var(--text-secondary);
}
.req-mark { color: var(--green-500); flex-shrink: 0; }
.req-note {
  color: var(--text-muted);
  font-size: 0.92rem;
  border-top: var(--border-dim);
  padding-top: 1.4rem;
}


/* =============================================================================
   QUOTE
   ========================================================================== */
.quote { margin: 2.5rem 0; }
.quote blockquote {
  margin: 0;
  padding: 1.6rem 0 1.6rem 1.8rem;
  border-left: 2px solid var(--gold-dim);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--text-bright);
}


/* =============================================================================
   ORIGIN — EPISODES
   ========================================================================== */
.offering-mark {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--green-400);
  margin-bottom: var(--hero-gap);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.ep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .ep-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ep-card {
  background: var(--card);
  border: var(--border-dim);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color var(--ease-med), transform var(--ease-med);
  overflow: hidden;
}
.ep-card:hover { border-color: rgba(82, 183, 136, 0.28); transform: translateY(-3px); }

.ep-art {
  margin: -1.8rem -1.8rem 1rem -1.8rem;
  aspect-ratio: 4/3;
  background-color: var(--surface);
  overflow: hidden;
}
.ep-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform var(--ease-slow), opacity var(--ease-med);
}
.ep-card:hover .ep-art img {
  transform: scale(1.04);
  opacity: 1;
}

.ep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ep-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-500);
}
.ep-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-full);
  padding: 0.15em 0.7em;
}
.ep-title { margin: 0.2em 0 0; }
.ep-blurb { color: var(--text-secondary); font-size: 0.95rem; margin: 0; flex: 1; }

.ep-state {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  padding-top: 0.9rem;
  border-top: var(--border-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.lock { color: var(--green-700); }

/* A locked episode is dimmed but never hidden — the titles are part of the
   invitation, so they stay readable. */
.is-locked .ep-title { color: var(--text-primary); }
.is-due .ep-state { color: var(--green-300); }
.is-due .lock { color: var(--green-400); }

.gt-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  border-top: var(--border-dim);
  padding-top: 1.3rem;
  margin-top: 1.6rem;
}


/* =============================================================================
   SIGNAL — BOOT SEQUENCE & FORM
   ========================================================================== */
.boot {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--green-700);
  margin-bottom: 2rem;
  min-height: 4.6em;          /* reserve the space so the form does not jump
                                 downward as each line prints */
}
.boot-line {
  margin: 0 0 0.35em;
  opacity: 0;
  transition: opacity var(--ease-med);
}
.boot-line.shown { opacity: 1; }

/* The Signal page's card fits on one screen: no inner scroll bar, tighter
   fields, a shorter message box (Awen, 4 Oct 2026). Contact page only; other
   term cards keep their 85vh cap and inner scroll. */
.signal-card { max-height: none; }
.signal-card .term-card-body { overflow: visible; padding: clamp(1.2rem, 3vw, 1.8rem); }
.signal-card .boot { margin-bottom: 1.2rem; min-height: 1.4em; }
.signal-card .field { margin-bottom: 1rem; }
.signal-card .field label { margin-bottom: 0.4rem; }
.signal-card .field input,
.signal-card .field select,
.signal-card .field textarea { padding: 0.65rem 0.9rem; }
.signal-card .field textarea { min-height: 5.5rem; }
.signal-card .form-status:empty { display: none; }   /* no gap under the button until there is a message */

.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--green-500);
  margin-bottom: 0.6rem;
}
.field-hint {
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: none;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--deep);
  border: 1px solid rgba(82, 183, 136, 0.18);
  border-radius: var(--r-sm);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.field select { cursor: pointer; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: var(--shadow-glow-green);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }

/* Honeypot: kept out of sight and out of the tab order, but never
   display:none — some bots skip fields that are display:none. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.transmit {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  width: 100%;
  justify-content: center;
}

.form-status {
  margin: 1.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  min-height: 1.2em;
}
.form-status.is-warn { color: var(--gold-bright); }
.form-status.is-ok   { color: var(--green-300); }

.signal-note {
  margin-top: 1.8rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}


/* =============================================================================
   CLOSE & FOOTER
   ========================================================================== */
.close {
  padding: clamp(4rem, 10vh, 7rem) 0;
  text-align: center;
  border-top: var(--border-dim);
}
.close .cta-row { justify-content: center; }

.glade-footer {
  padding: 2.5rem 0;
  border-top: var(--border-dim);
  background: var(--deep);
}
.foot-mark {
  font-family: var(--font-serif);
  color: var(--text-secondary);
  margin-bottom: 0.2em;
}
.foot-mark span { color: var(--green-400); }
.foot-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}


/* =============================================================================
   LOW-DATA TOGGLE
   ========================================================================== */
.low-data-toggle {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--elevated);
  border: var(--border-dim);
  color: var(--text-primary);
  font-size: 1.15rem;
  cursor: pointer;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
}
.low-data-toggle:hover {
  background: var(--card);
  border-color: rgba(82, 183, 136, 0.3);
  box-shadow: var(--shadow-glow-green);
}


/* =============================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
}
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.20s; }
.d3 { transition-delay: 0.30s; }


/* =============================================================================
   LOW-DATA MODE
   -----------------------------------------------------------------------------
   The toggle's job is to cost the visitor less: less battery, less CPU, less
   data. CSS can only pause CSS animations - the spore canvas is a JavaScript
   loop and has to be stopped in JavaScript, which main.js now does. Without
   that, the toggle hid the cheap decoration and left the expensive one running.
   ========================================================================== */
body.low-data * { animation-play-state: paused !important; }
body.low-data #glade-spores { display: none; }
body.low-data .reveal { opacity: 1; transform: none; transition: none; }


/* =============================================================================
   REDUCED MOTION
   -----------------------------------------------------------------------------
   A system-level request from the visitor. Honour it without being asked.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* =============================================================================
   THE VOID (VCEF AESTHETIC)
   ========================================================================== */
.void-aesthetic {
  position: relative;
  background: #010402 !important;
  border: 1px solid var(--green-700) !important;
}

.void-aesthetic::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.ghost-text {
  position: relative;
  display: inline-block;
  color: var(--text-bright);
}
.ghost-text::before,
.ghost-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #010402;
}
.ghost-text::before {
  left: 2px;
  text-shadow: -1px 0 red;
  animation: glitch-anim-2 7s infinite linear;
}
.ghost-text::after {
  left: -2px;
  text-shadow: -1px 0 var(--green-400);
  animation: glitch-anim 9s infinite linear;
}
@keyframes glitch-anim {
  0%, 94% { clip: rect(0, 0, 0, 0); opacity: 0; }
  95% { opacity: 1; clip: rect(61px, 9999px, 52px, 0); }
  96% { clip: rect(33px, 9999px, 14px, 0); }
  97% { clip: rect(96px, 9999px, 98px, 0); }
  98% { clip: rect(12px, 9999px, 59px, 0); }
  99% { clip: rect(42px, 9999px, 73px, 0); }
  100% { opacity: 0; clip: rect(0, 0, 0, 0); }
}
@keyframes glitch-anim-2 {
  0%, 93% { clip: rect(0, 0, 0, 0); opacity: 0; }
  94% { opacity: 1; clip: rect(29px, 9999px, 83px, 0); }
  95% { clip: rect(65px, 9999px, 12px, 0); }
  96% { clip: rect(8px, 9999px, 49px, 0); }
  97% { clip: rect(84px, 9999px, 2px, 0); }
  98% { clip: rect(52px, 9999px, 99px, 0); }
  100% { opacity: 0; clip: rect(0, 0, 0, 0); }
}

.ascii-ghost {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2.8);
  font-family: var(--font-mono);
  color: var(--green-300);
  font-size: 1.5rem;
  line-height: 1.1;
  opacity: 0.01;
  pointer-events: none;
  z-index: 0;
}

/* Escalating Glitch Stages */
.glitch-stage-2 .ghost-text::before { animation: glitch-anim-stage2 3s infinite linear; }
.glitch-stage-2 .ghost-text::after  { animation: glitch-anim-stage2-2 4s infinite linear; }

.glitch-stage-3 .ghost-text::before { animation: glitch-anim-stage3 1s infinite linear; }
.glitch-stage-3 .ghost-text::after  { animation: glitch-anim-stage3-2 1.2s infinite linear; }

@keyframes glitch-anim-stage2 {
  0%, 70% { clip: rect(0, 0, 0, 0); opacity: 0; }
  75% { opacity: 1; clip: rect(61px, 9999px, 52px, 0); }
  85% { clip: rect(33px, 9999px, 14px, 0); }
  95% { clip: rect(96px, 9999px, 98px, 0); }
  100% { opacity: 0; clip: rect(0, 0, 0, 0); }
}
@keyframes glitch-anim-stage2-2 {
  0%, 70% { clip: rect(0, 0, 0, 0); opacity: 0; }
  75% { opacity: 1; clip: rect(29px, 9999px, 83px, 0); }
  85% { clip: rect(65px, 9999px, 12px, 0); }
  95% { clip: rect(8px, 9999px, 49px, 0); }
  100% { opacity: 0; clip: rect(0, 0, 0, 0); }
}

@keyframes glitch-anim-stage3 {
  0% { opacity: 1; clip: rect(61px, 9999px, 52px, 0); }
  20% { clip: rect(33px, 9999px, 14px, 0); }
  40% { clip: rect(96px, 9999px, 98px, 0); }
  60% { clip: rect(12px, 9999px, 59px, 0); }
  80% { clip: rect(42px, 9999px, 73px, 0); }
  100% { clip: rect(72px, 9999px, 3px, 0); }
}
@keyframes glitch-anim-stage3-2 {
  0% { opacity: 1; clip: rect(29px, 9999px, 83px, 0); }
  20% { clip: rect(65px, 9999px, 12px, 0); }
  40% { clip: rect(8px, 9999px, 49px, 0); }
  60% { clip: rect(84px, 9999px, 2px, 0); }
  80% { clip: rect(52px, 9999px, 99px, 0); }
  100% { clip: rect(15px, 9999px, 32px, 0); }
}

body.low-data .ghost-text::before,
body.low-data .ghost-text::after {
  display: none;
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-bottom: var(--border-dim);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ease-med);
  }
  .nav-links.open { max-height: 320px; }
  .nav-links li { padding: 0.9rem clamp(1.2rem, 5vw, 3rem); }

  .cta-row .btn { width: 100%; justify-content: center; }
}


/* ── Episode hero image ─────────────────────────────────────────────────────
   Restored 16/09/26. Each ORIGINS episode carries one hero image with a
   caption. Both were lost when build_eps.py regenerated these pages from the
   archive: it reads only the <div class="ep-prose"> block, and the <figure>
   sits above it, so the image and its caption were never copied across.

   The rules are new here rather than moved: the old site styled .ep-hero in
   origins.css, which this site does not load. Written against this file's own
   tokens so it matches the rest of the site instead of the one it came from.
   The figure is the first child of .content-body, so it inherits the narrow
   content width and lines up with the prose beneath it. */
.ep-hero {
  margin: 0 0 clamp(2rem, 5vh, 3rem);
}
.ep-hero img {
  width: 100%;
  border-radius: var(--r-lg);
  border: var(--border-dim);
  box-shadow: var(--shadow-card);
}
.ep-hero figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-muted);
}


  /* INTERACTIVE DIRECTORY SPECIFIC STYLES */
  .directory-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto 6rem;
    align-items: start;
  }

  @media (max-width: 900px) {
    .directory-layout { grid-template-columns: 1fr; }
  }

  .dir-tree {
    background: rgba(5, 5, 5, 0.9);
    border: 1px solid var(--border-subtle);
    padding: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    position: relative;
    box-shadow: inset 0 0 20px rgba(82, 183, 136, 0.05);
  }

  .dir-tree::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 2px,
      rgba(82, 183, 136, 0.03) 2px, rgba(82, 183, 136, 0.03) 4px
    );
  }

  .dir-prompt-wrap {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--border-subtle);
    color: var(--green-300);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
  }

  .dir-prompt-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .dir-search-input {
    background: transparent;
    border: none;
    color: var(--green-100);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    caret-color: var(--green-400);
  }
  .dir-search-input::placeholder { color: rgba(82, 183, 136, 0.3); }

  .dir-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
  }

  .filter-flag {
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .filter-flag:hover, .filter-flag.active {
    color: var(--green-400);
    text-shadow: 0 0 8px rgba(82, 183, 136, 0.4);
  }

  .dir-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 250px;
    overflow-y: auto;
    position: relative;
    z-index: 2;
    padding-right: 0.5rem;
  }

  .dir-list::-webkit-scrollbar { width: 4px; }
  .dir-list::-webkit-scrollbar-track { background: transparent; }
  .dir-list::-webkit-scrollbar-thumb { background: rgba(82, 183, 136, 0.3); border-radius: 4px; }
  .dir-list::-webkit-scrollbar-thumb:hover { background: rgba(82, 183, 136, 0.7); }

  .dir-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
  }

  .dir-item:hover {
    color: var(--text-bright);
    background: rgba(82, 183, 136, 0.05);
  }

  .dir-item.active {
    border-left-color: var(--green-400);
    color: var(--green-100);
    background: rgba(82, 183, 136, 0.08);
    box-shadow: inset 0 0 10px rgba(82, 183, 136, 0.1);
  }

  .dir-perms { opacity: 0.4; }
  .dir-size { color: var(--green-700); width: 45px; text-align: right; }
  .dir-name { font-weight: 500; }

  .dir-viewer {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    min-height: 550px;
    position: relative;
    padding: 3rem;
    overflow: hidden;
  }

  .viewer-top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--green-300);
  }

  .viewer-content {
    display: none;
    margin-top: 20px;
  }

  .viewer-content.active {
    display: block;
    animation: digitalSnap 0.35s cubic-bezier(0.1, 0.8, 0.1, 1) forwards;
  }

  @keyframes digitalSnap {
    0% { opacity: 0; transform: scale(0.99) translateY(5px); filter: blur(3px) brightness(1.5); }
    50% { opacity: 0.8; filter: blur(1px) brightness(1.2); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) brightness(1); }
  }

  .empty-state {
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-align: center;
    margin-top: 4rem;
    font-style: italic;
  }