/* Rolling Thunder Security Codex - CIA Triad subsection stylesheet
   Matches the cryptography track design system.
   Northgate gold palette on deep ink, Playfair Display italic display type,
   Atkinson Hyperlegible body for WCAG 2.1 AA legibility,
   Courier New monospace for technical accents. */

:root {
  --bg-deep:    #0a0908;
  --bg-elev:    #14110d;
  --bg-elev-2:  #1d1812;
  --rule:       #2a241c;
  --gold:       #CFB991;
  --gold-warm:  #8E6F3E;
  --gold-glow:  rgba(56, 189, 248, 0.10);
  --cream:      #f4ede0;
  --cream-dim:  #b8ad97;
  --cream-mute: #6b6354;
  --danger:     #c97a6b;
  --max-w:      980px;
  --pad:        clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--cream);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--bg-deep); }

a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
a:hover, a:focus-visible { color: var(--cream); border-bottom-color: var(--cream); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--bg-deep);
  padding: 0.75rem 1.25rem; font-weight: 700; z-index: 9999;
}
.skip-link:focus { left: 0; }

/* ====== HERO ====== */
.hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(56, 189, 248, 0.035) 3px, rgba(56, 189, 248, 0.035) 4px),
    radial-gradient(ellipse at top, var(--bg-elev) 0%, var(--bg-deep) 70%);
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: 0.5;
}
.hero-inner { max-width: var(--max-w); margin: 0 auto; position: relative; }

.crumbs {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--cream-mute);
  margin-bottom: 2rem;
  text-transform: uppercase;
}
.crumbs a { color: var(--cream-dim); }
.crumbs a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.crumbs .sep { margin: 0 0.6rem; color: var(--rule); }

.eyebrow {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.hero-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.05;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.hero-title em {
  font-style: normal;
  color: var(--gold);
}

.hero-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--cream-dim);
  max-width: 70ch;
  line-height: 1.6;
}

/* ====== MAIN CONTENT ====== */
main { max-width: var(--max-w); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--pad) 2rem; }

.numbered { margin: clamp(2rem, 4vw, 3.5rem) 0; }

.sect-head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.sect-head::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 4rem; height: 2px;
  background: var(--gold);
}
.sect-num {
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 700;
}
.sect-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  color: var(--cream);
  line-height: 1.2;
}

.numbered p { margin: 0.95rem 0; }
.numbered p strong { color: var(--cream); font-weight: 700; }
.numbered p em { color: var(--gold); font-style: italic; }

.lead {
  font-size: 1.1rem;
  color: var(--cream);
  border-left: 2px solid var(--gold);
  padding-left: 1.1rem;
  margin: 1rem 0 1.5rem;
}

.numbered ul, .numbered ol {
  margin: 1rem 0 1.2rem 1.2rem;
  padding-left: 0.5rem;
}
.numbered li { margin: 0.5rem 0; padding-left: 0.4rem; }
.numbered li::marker { color: var(--gold); }

code, .mono {
  font-family: "Courier New", monospace;
  background: var(--bg-elev);
  color: var(--gold);
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  border: 1px solid var(--rule);
  font-size: 0.92em;
}

.callout {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}
.callout .label {
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.callout p { margin: 0.4rem 0; }
.callout p:first-of-type { margin-top: 0; }
.callout p:last-of-type { margin-bottom: 0; }

.warn { border-left-color: var(--danger); }
.warn .label { color: var(--danger); }

/* Figures */
figure {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  padding: 1.75rem 1.5rem 1.25rem;
  margin: 1.75rem 0;
  border-radius: 4px;
}
figure svg { display: block; margin: 0 auto; width: 100%; height: auto; max-width: 100%; }
figcaption {
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  color: var(--cream-mute);
  margin-top: 0.85rem;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Tables */
.tbl-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--rule); border-radius: 4px; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  background: var(--bg-elev);
}
thead { background: var(--bg-elev-2); }
th, td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-elev-2); }
td strong { color: var(--cream); }

/* Page-list (used on the CIA hub) */
.page-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.page-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.page-row:hover, .page-row:focus-visible {
  border-color: var(--gold);
  background: var(--bg-elev-2);
  transform: translateX(2px);
}
.page-row.planned { opacity: 0.55; cursor: default; pointer-events: none; }
.page-num {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  flex-shrink: 0;
  min-width: 4.5rem;
}
.page-info { flex: 1; }
.page-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.18rem;
  color: var(--cream);
  margin-bottom: 0.25rem;
}
.page-desc { font-size: 0.92rem; color: var(--cream-dim); line-height: 1.5; }
.page-status {
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  flex-shrink: 0;
}
.page-status.live { color: var(--gold); border-color: var(--gold); }
.page-status.planned { color: var(--cream-mute); }
.page-arrow {
  color: var(--gold);
  font-family: "Courier New", monospace;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.page-row.planned .page-arrow { display: none; }

/* Footer page navigation */
.pgnav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.pgnav a {
  flex: 1;
  padding: 1.2rem 1.4rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 180ms ease, background 180ms ease;
}
.pgnav a:hover { border-color: var(--gold); background: var(--bg-elev-2); }
.pgnav-label {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-mute);
}
.pgnav-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--cream);
}
.pgnav .next { text-align: right; }

/* Site footer */
footer.site {
  border-top: 1px solid var(--rule);
  padding: 2rem var(--pad);
  color: var(--cream-mute);
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Sub-section header on the hub */
.sub-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.sub-stat-label {
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-mute);
  display: block;
}
.sub-stat-value {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.45rem;
  color: var(--gold);
  margin-top: 0.2rem;
}

@media (max-width: 640px) {
  .sect-head { flex-direction: column; gap: 0.25rem; align-items: flex-start; }
  .pgnav { flex-direction: column; }
  .pgnav .next { text-align: left; }
  .page-row { flex-wrap: wrap; }
  .page-num { min-width: auto; }
  .page-status { order: 3; }
}