/* ============================================================
   Survive The Deep End - Custom Theme Stylesheet
   Design: Deep mineral navy, slate, cyan accents, amber wayfinding
   Aesthetic: Technical field manual / dive log
   ============================================================ */

/* --- Fonts: self-hosted --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter Regular'), local('Inter-Regular');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Inter SemiBold'), local('Inter-SemiBold');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Inter Bold'), local('Inter-Bold');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('JetBrains Mono Regular'), local('JetBrainsMono-Regular');
}

/* --- Design Tokens --- */
:root {
  /* Navy/Slate base */
  --color-navy-deep: #0b1120;
  --color-navy: #111827;
  --color-navy-light: #1a2332;
  --color-slate-900: #1e293b;
  --color-slate-800: #1f2937;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50: #f8fafc;

  /* Accent: soft cyan */
  --color-cyan: #22d3ee;
  --color-cyan-muted: #67e8f9;
  --color-cyan-dim: #164e63;
  --color-cyan-subtle: rgba(34, 211, 238, 0.08);

  /* Wayfinding: restrained amber */
  --color-amber: #d4a053;
  --color-amber-bright: #f59e0b;
  --color-amber-dim: #92400e;

  /* Semantic */
  --color-bg: var(--color-navy);
  --color-bg-elevated: var(--color-navy-light);
  --color-bg-card: var(--color-slate-900);
  --color-surface: var(--color-slate-800);
  --color-border: var(--color-slate-700);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-text: var(--color-slate-200);
  --color-text-secondary: var(--color-slate-400);
  --color-text-muted: var(--color-slate-500);
  --color-heading: var(--color-slate-50);
  --color-link: var(--color-cyan);
  --color-link-hover: var(--color-cyan-muted);
  --color-accent: var(--color-amber);
  --color-focus: var(--color-cyan);

  /* Grid texture overlay */
  --grid-texture: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 39px,
    rgba(255, 255, 255, 0.02) 39px,
    rgba(255, 255, 255, 0.02) 40px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 39px,
    rgba(255, 255, 255, 0.02) 39px,
    rgba(255, 255, 255, 0.02) 40px
  );

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.8125rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 820px;
  --header-height: 64px;
  --sidebar-width: 280px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: var(--grid-texture);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Focus States --- */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

a:focus-visible {
  border-radius: var(--radius-sm);
}

/* --- Container --- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  line-height: 1.3;
  font-weight: 700;
}

h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--font-size-2xl); margin-top: var(--space-12); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
h3 { font-size: var(--font-size-xl); margin-top: var(--space-8); margin-bottom: var(--space-3); }
h4 { font-size: var(--font-size-lg); margin-top: var(--space-6); margin-bottom: var(--space-2); }

p { margin-bottom: var(--space-4); }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

ul, ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

li { margin-bottom: var(--space-2); }

strong { color: var(--color-heading); font-weight: 600; }

blockquote {
  border-left: 3px solid var(--color-amber);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  background: var(--color-cyan-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-slate-300);
}

blockquote p:last-child { margin-bottom: 0; }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

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

/* --- Code Blocks --- */
code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: var(--color-slate-900);
  color: var(--color-cyan-muted);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

pre {
  background: var(--color-navy-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  overflow-x: auto;
  position: relative;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-slate-200);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* Code copy button */
pre .copy-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-slate-700);
  color: var(--color-slate-300);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast);
}

pre .copy-btn:hover {
  background: var(--color-slate-600);
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--font-size-sm);
}

th, td {
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

th {
  background: var(--color-slate-900);
  color: var(--color-heading);
  font-weight: 600;
}

tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 17, 32, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
  height: var(--header-height);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--color-cyan-dim), var(--color-navy-light));
  border: 1px solid var(--color-cyan);
  border-radius: var(--radius-sm);
  color: var(--color-cyan);
  font-weight: 700;
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
}

.logo-text {
  color: var(--color-heading);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: -0.01em;
}

.main-nav .nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav .nav-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.main-nav .nav-list a:hover,
.main-nav .nav-list a.active {
  color: var(--color-heading);
  background: rgba(255, 255, 255, 0.05);
}

.main-nav .nav-list a.active {
  color: var(--color-cyan);
}

.nav-search-link svg {
  opacity: 0.7;
}

/* Mobile hamburger */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-secondary);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* ============================================================
   HERO SECTIONS
   ============================================================ */
.home-hero,
.page-hero {
  position: relative;
  width: 100%;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-navy-deep);
}

.home-hero {
  min-height: 420px;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-12) 0 var(--space-10);
  background: linear-gradient(to top, var(--color-navy-deep) 0%, transparent 100%);
}

.hero-overlay .container,
.hero-overlay {
  /* when no .container inside */
}

.hero-overlay h1 {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-3);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-6);
}

.hero-overlay .container h1 {
  padding: 0;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
}

.chapter-label {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--color-amber);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* Page header (no image) */
.page-header-simple {
  padding: var(--space-16) 0 var(--space-10);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-navy-deep);
  background-image: var(--grid-texture);
}

.page-header-simple h1 {
  font-size: var(--font-size-3xl);
}

.page-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  margin-top: var(--space-2);
}

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content,
.home-content,
.book-hub-content,
.chapter-hub-content,
.guide-content,
.topic-content,
.article-content,
.glossary-content,
.hub-content,
.search-page {
  padding: var(--space-12) var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
}

.content-body {
  max-width: var(--container-narrow);
}

.content-body.long-form {
  max-width: var(--container-narrow);
}

/* ============================================================
   CHAPTER LAYOUT (sidebar + content)
   ============================================================ */
.chapter-layout {
  display: flex;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-10);
}

.chapter-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--space-8));
  overflow-y: auto;
}

.chapter-rail h3 {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  margin-top: 0;
}

.rail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--color-border-subtle);
}

.rail-list li {
  margin: 0;
}

.rail-list li a {
  display: block;
  padding: var(--space-2) var(--space-4);
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.rail-list li a:hover {
  color: var(--color-heading);
  border-left-color: var(--color-slate-500);
  background: rgba(255, 255, 255, 0.02);
}

.rail-list li.active a {
  color: var(--color-cyan);
  border-left-color: var(--color-cyan);
  font-weight: 600;
}

.chapter-content {
  flex: 1;
  min-width: 0;
  max-width: var(--container-narrow);
}

/* Summary & context boxes */
.summary-box,
.modern-context-box {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-border);
}

.summary-box {
  background: var(--color-cyan-subtle);
  border-color: var(--color-cyan-dim);
}

.summary-box h2 {
  font-size: var(--font-size-base);
  color: var(--color-cyan);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-3);
}

.modern-context-box {
  background: rgba(212, 160, 83, 0.06);
  border-color: var(--color-amber-dim);
}

.modern-context-box h2 {
  font-size: var(--font-size-base);
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-3);
}

/* Chapter pagination */
.chapter-pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.chapter-pagination a,
.chapter-pagination .disabled {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.chapter-pagination a {
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.chapter-pagination a:hover {
  background: var(--color-surface);
  text-decoration: none;
}

.next-chapter {
  text-align: right;
}

.pag-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.pag-title {
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  font-weight: 600;
}

/* ============================================================
   CHAPTER CARDS
   ============================================================ */
.chapter-grid .cards,
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.chapter-card {
  display: block;
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.chapter-card:hover {
  border-color: var(--color-cyan-dim);
  transform: translateY(-2px);
  text-decoration: none;
}

.chapter-card .chapter-number {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-amber);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.chapter-card h3 {
  font-size: var(--font-size-lg);
  color: var(--color-heading);
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.chapter-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Chapter reading list (hub) */
.chapter-reading-list {
  list-style: none;
  padding: 0;
  counter-reset: chapter-counter;
}

.chapter-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  text-decoration: none;
  transition: border-color var(--transition-base), background var(--transition-fast);
}

.chapter-list-item:hover {
  border-color: var(--color-cyan-dim);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
}

.chapter-list-info .chapter-number {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-amber);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.chapter-list-info h3 {
  font-size: var(--font-size-base);
  color: var(--color-heading);
  margin: 0 0 var(--space-1) 0;
}

.chapter-list-info p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.chapter-arrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  margin-left: var(--space-4);
}

/* ============================================================
   SEARCH
   ============================================================ */
.search-input-wrap {
  position: relative;
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.search-input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-heading);
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  outline: none;
  transition: border-color var(--transition-fast);
}

.search-input:focus {
  border-color: var(--color-cyan);
}

.search-input::placeholder {
  color: var(--color-text-muted);
}

.search-kbd {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-slate-700);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  pointer-events: none;
}

.search-results {
  max-width: 640px;
}

.search-hint {
  color: var(--color-text-muted);
}

.search-result-item {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.search-result-item:hover,
.search-result-item.focused {
  border-color: var(--color-cyan-dim);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
}

.search-result-item .result-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  color: var(--color-amber);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.search-result-item h3 {
  font-size: var(--font-size-base);
  color: var(--color-heading);
  margin: 0 0 var(--space-1) 0;
}

.search-result-item p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.search-no-results {
  color: var(--color-text-muted);
  padding: var(--space-8) 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-navy-deep);
  padding: var(--space-12) 0 var(--space-8);
  margin-top: var(--space-16);
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.footer-col h4 {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  margin-top: 0;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: var(--space-2);
}

.footer-col a {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.footer-col a:hover {
  color: var(--color-heading);
}

.footer-bottom {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}

.footer-bottom p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ============================================================
   RELATED READING
   ============================================================ */
.related-reading {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.related-reading h2 {
  font-size: var(--font-size-xl);
  border-bottom: none;
  margin-top: 0;
}

.related-reading ul {
  list-style: none;
  padding: 0;
}

.related-reading li {
  margin-bottom: var(--space-2);
}

.related-reading a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.related-reading a::before {
  content: '\2192';
  color: var(--color-text-muted);
}

/* ============================================================
   404 PAGE
   ============================================================ */
.error-page {
  padding: var(--space-24) 0;
  text-align: center;
}

.error-page h1 {
  font-size: 6rem;
  color: var(--color-slate-700);
  margin-bottom: var(--space-4);
}

.error-message {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.error-nav {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.error-nav a {
  font-weight: 600;
}

/* ============================================================
   FAQ SECTIONS
   ============================================================ */
.faq-section details {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.faq-section summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-heading);
  list-style: none;
}

.faq-section summary::-webkit-details-marker {
  display: none;
}

.faq-section summary::before {
  content: '+';
  display: inline-block;
  width: 1.2em;
  color: var(--color-amber);
  font-weight: 700;
}

.faq-section details[open] summary::before {
  content: '\2212';
}

.faq-section details > div,
.faq-section details > p {
  padding: 0 var(--space-5) var(--space-4);
  color: var(--color-text-secondary);
}

/* ============================================================
   HOME PAGE SECTIONS
   ============================================================ */
.home-section {
  margin-bottom: var(--space-12);
}

.home-section h2 {
  border-bottom: none;
  position: relative;
  padding-bottom: 0;
}

.home-section h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-cyan);
  margin-top: var(--space-3);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-12) 0;
}

/* Link cards for hubs */
.link-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.link-card {
  display: block;
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.link-card:hover {
  border-color: var(--color-cyan-dim);
  transform: translateY(-1px);
  text-decoration: none;
}

.link-card h3 {
  font-size: var(--font-size-base);
  color: var(--color-heading);
  margin: 0 0 var(--space-2) 0;
}

.link-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  .main-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-navy-deep);
    padding: var(--space-6);
    z-index: 99;
    overflow-y: auto;
  }

  .main-nav.open {
    display: block;
  }

  .main-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav .nav-list a {
    padding: var(--space-4) var(--space-4);
    font-size: var(--font-size-lg);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .mobile-nav-toggle {
    display: flex;
  }

  .mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .logo-text {
    display: none;
  }

  h1 { font-size: var(--font-size-2xl); }
  .hero-overlay h1 { font-size: var(--font-size-2xl); }

  .home-hero { min-height: 280px; }
  .page-hero { min-height: 240px; }

  /* Chapter layout stacks */
  .chapter-layout {
    flex-direction: column;
    padding: var(--space-4) var(--space-4);
    gap: var(--space-6);
  }

  /* Content + sidebar layout stacks */
  .content-sidebar-layout {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--space-4);
  }

  .content-sidebar-rail {
    position: static;
    max-height: none;
  }

  .chapter-sidebar {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  .rail-list {
    display: flex;
    overflow-x: auto;
    border-left: none;
    border-bottom: 2px solid var(--color-border-subtle);
    padding-bottom: var(--space-2);
    gap: var(--space-1);
  }

  .rail-list li a {
    border-left: none;
    border-bottom: 2px solid transparent;
    margin-left: 0;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
  }

  .rail-list li.active a {
    border-left-color: transparent;
    border-bottom-color: var(--color-cyan);
  }

  .chapter-pagination {
    flex-direction: column;
  }

  .next-chapter { text-align: left; }

  .footer-nav {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .link-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }

  .page-content,
  .home-content,
  .book-hub-content,
  .chapter-hub-content,
  .guide-content,
  .topic-content,
  .article-content,
  .glossary-content,
  .hub-content,
  .search-page {
    padding: var(--space-8) var(--space-4);
  }
}

/* ============================================================
   CONTENT + SIDEBAR LAYOUT (guide, article pages)
   ============================================================ */
.content-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-10);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  align-items: start;
}

.content-sidebar-main {
  min-width: 0;
}

.content-sidebar-rail {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--space-8));
  overflow-y: auto;
}

@media (max-width: 900px) {
  .content-sidebar-layout {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--space-4);
  }

  .content-sidebar-rail {
    position: static;
    max-height: none;
  }
}

/* ============================================================
   NEWSLETTER SIGNUP — nl-* classes (site-specific suffix -stde)
   ============================================================ */
.nl-sidebar-block {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.nl-honeypot {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

.nl-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin: 0 0 var(--space-2) 0;
}

.nl-heading {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.3;
}

.nl-subtext {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5) 0;
  line-height: 1.5;
}

.nl-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nl-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nl-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.nl-req {
  color: var(--color-amber);
  margin-left: 2px;
}

.nl-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  box-sizing: border-box;
}

.nl-input:focus {
  outline: none;
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 3px var(--color-cyan-subtle);
}

.nl-input::placeholder {
  color: var(--color-text-muted);
}

.nl-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--color-cyan);
  color: var(--color-navy-deep);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
  margin-top: var(--space-2);
}

.nl-submit:hover:not(:disabled) {
  background: var(--color-cyan-muted);
  transform: translateY(-1px);
}

.nl-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.nl-submit-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: var(--color-navy-deep);
  border-radius: 50%;
  animation: nl-spin 0.7s linear infinite;
}

@keyframes nl-spin {
  to { transform: rotate(360deg); }
}

/* visibility controlled via HTML hidden attribute (JS toggles element.hidden) */
.nl-success {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid var(--color-cyan-dim);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-cyan-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-top: var(--space-3);
}

.nl-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: #fca5a5;
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.nl-privacy {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-3);
  line-height: 1.4;
}