/* =============================================================================
   DIVISION 5: CLASSIFIED: universe site theme
   Served on division5.exodusnds.com. Load AFTER assets/exodus/universe-site.css.

   Part 1 sets the tokens every shared component reads. Part 2 themes those
   components and the chapter pages. Part 3 is the landing page, carried over
   from the universe's promo page; its classes are already prefixed d5c-.
   The printed book's palette is in shared/css/division-5.css.
   ============================================================================= */

/* ── Part 1: tokens ───────────────────────────────────────────────────────── */
:root {
  --us-bg:            #0A0A0B;
  --us-surface:       #EDE8DC;
  --us-surface-alt:   #D8D0BC;
  --us-text:          #141416;
  --us-text-muted:    #4A463C;
  --us-on-dark:       #EDE8DC;
  --us-on-dark-muted: rgba(204, 196, 176, 0.62);
  --us-accent:        #D4AE50;
  --us-accent-2:      #7A1818;
  --us-border:        #2C2C30;
  --us-font-display:  Georgia, 'Times New Roman', serif;
  --us-font-label:    'Courier New', Courier, monospace;
  --us-font-body:     'Crimson Pro', Georgia, serif;
  --us-radius:        2px;

  /* The three eras. Blocks tagged .shadow-war, .long-dark or .nightscreen in
     the manuscript wear their era's colour, as they do in the printed book. */
  --d5-shadow: #B8902A;
  --d5-long:   #8B1E1E;
  --d5-night:  #2A5A8C;
}

/* ── Part 2: shared components and chapter pages ──────────────────────────── */
/* Classified-file furniture: mono labels, hairline rules, stamped headings. */
.us-nav-brand { font-family: var(--us-font-label); font-size: 1.05rem; letter-spacing: 0.3em; text-transform: uppercase; }
.us-nav-brand span { color: var(--us-on-dark); }
.us-page-title,
.us-band-title { font-weight: 400; letter-spacing: 0.02em; }
.us-page-kicker { letter-spacing: 0.4em; }
.us-band-title::before {
  content: 'FILE';
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--us-font-label);
  font-size: 0.65rem;
  letter-spacing: 0.42em;
  color: var(--us-accent-2);
}
.us-band-dark .us-band-title::before { color: var(--us-accent); }
.us-explore-card,
.us-kit-item,
.us-pager-link,
.us-toc-box { border-width: 1px; }
.us-explore-card:hover, .us-explore-card:focus-visible,
.us-kit-item:hover, .us-kit-item:focus-visible,
.us-pager-link:hover, .us-pager-link:focus-visible { box-shadow: 4px 4px 0 var(--us-accent-2); }

.us-prose h2 { font-weight: 400; border-bottom: 1px solid var(--us-border); padding-bottom: 0.3rem; }
.us-prose h3 { font-weight: 400; border-bottom-width: 1px; }
.us-prose h5 { font-family: var(--us-font-label); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--us-accent-2); }
.us-prose th { font-family: var(--us-font-label); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; background: #141416; color: #D4AE50; }

.us-prose .shadow-war  { border-left-color: var(--d5-shadow); }
.us-prose .long-dark   { border-left-color: var(--d5-long); }
.us-prose .nightscreen { border-left-color: var(--d5-night); }
.us-prose .note.shadow-war,  .us-prose .example.shadow-war  { background: rgba(184, 144, 42, 0.10); }
.us-prose .note.long-dark,   .us-prose .example.long-dark   { background: rgba(139, 30, 30, 0.08); }
.us-prose .note.nightscreen, .us-prose .example.nightscreen { background: rgba(42, 90, 140, 0.09); }
.us-prose .shadow-war h5  { color: #7A5C14; }
.us-prose .long-dark h5   { color: var(--d5-long); }
.us-prose .nightscreen h5 { color: var(--d5-night); }

/* ── Part 3: landing page ─────────────────────────────────────────────────── */
/* ── D5C SCOPE ── all classes prefixed d5c- to avoid CMS collisions */
.d5c-page {
  --d5c-void:       #0A0A0B;
  --d5c-smoke:      #141416;
  --d5c-ash:        #1E1E22;
  --d5c-charcoal:   #2C2C30;
  --d5c-paper:      #EDE8DC;
  --d5c-paper2:     #D8D0BC;
  --d5c-amber:      #B8902A;
  --d5c-amber-lt:   #D4AE50;
  --d5c-amber-dk:   #7A5C14;
  --d5c-olive:      #5A5830;
  --d5c-olive-lt:   #7A7840;
  --d5c-sepia:      #8A6840;
  --d5c-crimson:    #7A1818;
  --d5c-crimson-lt: #A02828;
  --d5c-crimson-dk: #4A0C0C;
  --d5c-cobalt:     #1A3A5C;
  --d5c-cobalt-lt:  #2A5A8C;
  --d5c-steel:      #4A7A9C;
  --d5c-neon:       #5AADCC;
  --d5c-text:       #CCC4B0;
  --d5c-text-dim:   rgba(204,196,176,0.55);
  --d5c-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --d5c-serif: Georgia, 'Times New Roman', serif;
  --d5c-mono: 'Courier New', Courier, monospace;
  font-family: var(--d5c-sans);
  background: var(--d5c-void);
  color: var(--d5c-text);
  overflow-x: hidden;
}
.d5c-page *, .d5c-page *::before, .d5c-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

.d5c-inner { max-width: 960px; margin: 0 auto; padding: 0 28px; }

/* ── EYEBROW / LABEL ── */
.d5c-eyebrow {
  font-family: var(--d5c-mono);
  font-size: 0.65rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d5c-amber);
  display: block;
  margin-bottom: 10px;
}

/* ── SECTION DIVIDER LINE ── */
.d5c-rule {
  border: none;
  border-top: 1px solid rgba(184,144,42,0.2);
  margin: 0;
}

/* ─────────────────────────────────────
   HERO
───────────────────────────────────── */
.d5c-hero {
  background: var(--d5c-void);
  padding: 88px 28px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Hard-edged angular light shaft - graphic novel silhouette effect */
.d5c-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 100%;
  background: linear-gradient(180deg,
    rgba(184,144,42,0.06) 0%,
    rgba(184,144,42,0.02) 60%,
    transparent 100%);
  clip-path: polygon(35% 0, 65% 0, 80% 100%, 20% 100%);
  pointer-events: none;
}

/* Thin amber top bar - like a film frame edge */
.d5c-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--d5c-amber);
}

.d5c-hero-stamp {
  display: inline-block;
  font-family: var(--d5c-mono);
  font-size: 0.62rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--d5c-amber);
  border: 1px solid rgba(184,144,42,0.4);
  padding: 4px 16px;
  margin-bottom: 36px;
  position: relative;
}

.d5c-hero-title {
  font-family: var(--d5c-sans);
  font-weight: 800;
  font-size: clamp(3.2rem, 10vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--d5c-paper);
  margin-bottom: 6px;
  position: relative;
}
.d5c-hero-title em {
  color: var(--d5c-amber);
  font-style: normal;
}

.d5c-hero-classified {
  display: block;
  font-family: var(--d5c-mono);
  font-size: clamp(0.7rem, 2vw, 1rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--d5c-crimson-lt);
  margin-bottom: 44px;
  position: relative;
}

.d5c-hero-tagline {
  font-family: var(--d5c-serif);
  font-size: clamp(1.05rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: var(--d5c-text);
  max-width: 640px;
  margin: 0 auto 20px;
  line-height: 1.65;
  position: relative;
}

.d5c-hero-sub {
  font-family: var(--d5c-sans);
  font-size: 0.88rem;
  color: var(--d5c-text-dim);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.7;
  position: relative;
}
.d5c-hero-sub strong { color: var(--d5c-amber); font-weight: 600; }

.d5c-hero-cta {
  display: inline-block;
  font-family: var(--d5c-sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: var(--d5c-amber);
  color: var(--d5c-void);
  text-decoration: none;
  padding: 14px 40px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: opacity 0.15s;
  position: relative;
}
.d5c-hero-cta:hover { opacity: 0.88; }

/* ─────────────────────────────────────
   DOSSIER BAND - classification strip
───────────────────────────────────── */
.d5c-dossier-band {
  background: var(--d5c-crimson-dk);
  border-top: 2px solid var(--d5c-crimson-lt);
  border-bottom: 2px solid var(--d5c-crimson-lt);
  padding: 14px 28px;
  text-align: center;
}
.d5c-dossier-band p {
  font-family: var(--d5c-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(237,232,220,0.6);
}
.d5c-dossier-band strong {
  color: var(--d5c-paper);
  letter-spacing: 0.5em;
}

/* ─────────────────────────────────────
   PITCH SECTION
───────────────────────────────────── */
.d5c-pitch {
  background: var(--d5c-ash);
  padding: 72px 28px;
  border-bottom: 1px solid rgba(184,144,42,0.15);
}
.d5c-pitch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 680px) { .d5c-pitch-grid { grid-template-columns: 1fr; gap: 32px; } }

.d5c-section-head {
  font-family: var(--d5c-sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.1;
  color: var(--d5c-paper);
  margin-bottom: 20px;
}
.d5c-section-head em { color: var(--d5c-amber); font-style: normal; }

.d5c-body {
  font-size: 0.97rem;
  line-height: 1.78;
  color: var(--d5c-text);
}
.d5c-body + .d5c-body { margin-top: 16px; }
.d5c-body strong { color: var(--d5c-paper); font-weight: 600; }
.d5c-body em { color: var(--d5c-amber); font-style: normal; }

/* Inset descriptive quote block - like a field report */
.d5c-field-note {
  border-left: 3px solid var(--d5c-amber);
  padding: 18px 24px;
  background: rgba(184,144,42,0.05);
  margin-top: 28px;
}
.d5c-field-note p {
  font-family: var(--d5c-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--d5c-paper);
  line-height: 1.7;
}
.d5c-field-note cite {
  display: block;
  margin-top: 10px;
  font-family: var(--d5c-mono);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  color: var(--d5c-amber);
  font-style: normal;
}

/* ─────────────────────────────────────
   THREE ERAS - era-specific color bands
───────────────────────────────────── */
.d5c-eras {
  background: var(--d5c-smoke);
  padding: 80px 28px;
}
.d5c-eras-intro {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.d5c-era-stack {
  display: grid;
  gap: 3px;
}

.d5c-era-card {
  padding: 40px 40px 36px;
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* Shadow War - warm sepia/olive/amber */
.d5c-era-card.shadow-war {
  background: #16140E;
  border-left: 4px solid #B8902A;
}
.d5c-era-card.shadow-war::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(90,88,48,0.08));
  pointer-events: none;
}
.d5c-era-card.shadow-war .d5c-era-accent { color: #B8902A; }
.d5c-era-card.shadow-war .d5c-era-marker { background: #B8902A; }

/* Long Dark - deep crimson, heavy shadows */
.d5c-era-card.long-dark {
  background: #120E0E;
  border-left: 4px solid #A02828;
}
.d5c-era-card.long-dark::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(122,24,24,0.08));
  pointer-events: none;
}
.d5c-era-card.long-dark .d5c-era-accent { color: #A02828; }
.d5c-era-card.long-dark .d5c-era-marker { background: #A02828; }

/* Nightscreen - cool cobalt/grays with neon accent */
.d5c-era-card.nightscreen {
  background: #0C1018;
  border-left: 4px solid #5AADCC;
}
.d5c-era-card.nightscreen::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(26,58,92,0.1));
  pointer-events: none;
}
.d5c-era-card.nightscreen .d5c-era-accent { color: #5AADCC; }
.d5c-era-card.nightscreen .d5c-era-marker { background: #5AADCC; }

.d5c-era-marker {
  display: inline-block;
  font-family: var(--d5c-mono);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--d5c-void);
  padding: 3px 12px;
  margin-bottom: 14px;
}
.d5c-era-title {
  font-family: var(--d5c-sans);
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--d5c-paper);
  margin-bottom: 6px;
}
.d5c-era-years {
  font-family: var(--d5c-mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  margin-bottom: 18px;
}
.d5c-era-body {
  font-size: 0.96rem;
  line-height: 1.72;
  color: var(--d5c-text);
  max-width: 680px;
}
.d5c-era-body strong { color: var(--d5c-paper); font-weight: 600; }

.d5c-era-missions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.d5c-era-mission {
  font-family: var(--d5c-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid rgba(204,196,176,0.2);
  color: var(--d5c-text-dim);
}

/* ─────────────────────────────────────
   WHAT YOU DO - operatives section
───────────────────────────────────── */
.d5c-operatives {
  background: var(--d5c-ash);
  padding: 80px 28px;
}
.d5c-operatives-intro {
  max-width: 700px;
  margin: 0 auto 52px;
  text-align: center;
}
.d5c-arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
}
.d5c-arch-card {
  background: var(--d5c-charcoal);
  padding: 28px 26px 26px;
  position: relative;
  border-top: 2px solid transparent;
  transition: border-color 0.2s;
}
.d5c-arch-card:hover { border-top-color: var(--d5c-amber); }
.d5c-arch-code {
  font-family: var(--d5c-mono);
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--d5c-amber);
  margin-bottom: 8px;
}
.d5c-arch-name {
  font-family: var(--d5c-sans);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--d5c-paper);
  margin-bottom: 4px;
}
.d5c-arch-tagline {
  font-family: var(--d5c-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--d5c-amber);
  margin-bottom: 12px;
  display: block;
}
.d5c-arch-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--d5c-text);
}
.d5c-arch-body strong { color: var(--d5c-paper); font-weight: 600; }

/* ─────────────────────────────────────
   THE FEEL - tone section
───────────────────────────────────── */
.d5c-feel {
  background: var(--d5c-void);
  padding: 80px 28px;
  border-top: 1px solid rgba(184,144,42,0.15);
  border-bottom: 1px solid rgba(184,144,42,0.15);
}
.d5c-feel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 680px) { .d5c-feel-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Tonal dial - visual representation */
.d5c-dial {
  margin: 32px 0;
  position: relative;
}
.d5c-dial-track {
  height: 4px;
  background: rgba(184,144,42,0.15);
  position: relative;
  margin: 20px 0 8px;
}
.d5c-dial-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, var(--d5c-crimson-lt), var(--d5c-amber));
}
.d5c-dial-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: var(--d5c-amber);
  border: 2px solid var(--d5c-void);
}
.d5c-dial-labels {
  display: flex;
  justify-content: space-between;
}
.d5c-dial-label {
  font-family: var(--d5c-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--d5c-text-dim);
}

.d5c-feel-cards {
  display: grid;
  gap: 16px;
}
.d5c-feel-card {
  padding: 20px 22px;
  background: var(--d5c-ash);
  border-left: 3px solid rgba(184,144,42,0.25);
}
.d5c-feel-card-head {
  font-family: var(--d5c-sans);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--d5c-amber);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.d5c-feel-card-body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--d5c-text);
}
.d5c-feel-card-body strong { color: var(--d5c-paper); font-weight: 600; }

/* ─────────────────────────────────────
   ASSETS & STAKES - the moral center
───────────────────────────────────── */
.d5c-stakes {
  background: var(--d5c-crimson-dk);
  padding: 72px 28px;
  border-top: 1px solid var(--d5c-crimson);
  border-bottom: 1px solid var(--d5c-crimson);
  position: relative;
  overflow: hidden;
}
.d5c-stakes::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,40,40,0.15), transparent 70%);
  pointer-events: none;
}
.d5c-stakes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 44px;
}
@media (max-width: 720px) { .d5c-stakes-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (min-width: 480px) and (max-width: 720px) { .d5c-stakes-grid { grid-template-columns: 1fr 1fr; } }

.d5c-stake-card {
  background: rgba(10,10,11,0.5);
  border: 1px solid rgba(160,40,40,0.3);
  padding: 22px 20px 20px;
}
.d5c-stake-head {
  font-family: var(--d5c-sans);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  color: var(--d5c-paper);
  margin-bottom: 10px;
}
.d5c-stake-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(204,196,176,0.7);
}

/* ─────────────────────────────────────
   SYSTEMS / WHAT MAKES IT DIFFERENT
───────────────────────────────────── */
.d5c-systems {
  background: var(--d5c-smoke);
  padding: 80px 28px;
}
.d5c-sys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 44px;
}
@media (max-width: 600px) { .d5c-sys-grid { grid-template-columns: 1fr; } }

.d5c-sys-card {
  background: var(--d5c-ash);
  padding: 30px 28px 28px;
}
.d5c-sys-card.featured {
  grid-column: 1 / -1;
  background: var(--d5c-charcoal);
  border-bottom: 3px solid var(--d5c-amber);
}
.d5c-sys-label {
  font-family: var(--d5c-mono);
  font-size: 0.62rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--d5c-amber);
  display: block;
  margin-bottom: 10px;
}
.d5c-sys-head {
  font-family: var(--d5c-sans);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--d5c-paper);
  margin-bottom: 12px;
  line-height: 1.3;
}
.d5c-sys-body {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--d5c-text);
}
.d5c-sys-body strong { color: var(--d5c-paper); font-weight: 600; }
.d5c-sys-body em { color: var(--d5c-amber); font-style: normal; }

/* ─────────────────────────────────────
   CTA
───────────────────────────────────── */
.d5c-cta {
  background: var(--d5c-amber);
  padding: 80px 28px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.d5c-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(10,10,11,0.12) 0%,
    transparent 50%,
    rgba(10,10,11,0.08) 100%);
  pointer-events: none;
}
.d5c-cta-title {
  font-family: var(--d5c-sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1.05;
  color: var(--d5c-void);
  margin-bottom: 16px;
  position: relative;
}
.d5c-cta-sub {
  font-family: var(--d5c-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(10,10,11,0.65);
  max-width: 500px;
  margin: 0 auto 36px;
  line-height: 1.6;
  position: relative;
}
.d5c-cta-btn {
  display: inline-block;
  font-family: var(--d5c-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: var(--d5c-void);
  color: var(--d5c-amber);
  text-decoration: none;
  padding: 16px 48px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: opacity 0.15s;
  position: relative;
}
.d5c-cta-btn:hover { opacity: 0.85; }
.d5c-cta-note {
  font-family: var(--d5c-mono);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(10,10,11,0.45);
  margin-top: 20px;
  position: relative;
}

/* Landing page additions (not in the original promo). */
.d5c-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-bottom: 22px; }
.d5c-cta-actions .d5c-cta-btn { margin: 0; }
.d5c-cta-btn.d5c-cta-btn-alt { background: transparent; color: inherit; border: 1px solid currentColor; box-shadow: none; }