/* ==========================================================================
   Dark Academia: The Gothic Canon — Classical Literary & Fine Art Stylesheet
   Designed for High Accessibility (WCAG 2.1 AA/AAA), Responsiveness, and Print
   ========================================================================== */
/* Self-Hosted Classical Literary Fonts (Zero-CDN Latency & UK GDPR Compliant) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Classical Bookbinding & Gallery Base Colors (Warm Espresso & Walnut) */
  --bg-primary: #0e0c0a;
  --bg-secondary: #15120f;
  --card-bg: #1a1613;
  --card-bg-alt: #221d18;
  --card-border: #3a3026;
  
  /* Vellum & Ivory Typography (WCAG AA/AAA compliant) */
  --text-main: #f4efe6;
  --text-muted: #d8cfc0;
  --text-subtle: #a69b8a;
  --parchment: #f5ebd6;
  
  /* Theme Accents (Dracula / Venetian Oxblood) */
  --crimson: #7f1d1d;
  --crimson-glow: rgba(127, 29, 29, 0.28);
  --crimson-bright: #e28787;
  --crimson-border: #5c1919;
  
  /* Theme Accents (Frankenstein / Antique Verdigris) */
  --teal: #285950;
  --teal-glow: rgba(40, 89, 80, 0.28);
  --teal-bright: #8abdb2;
  --teal-border: #1f453e;
  
  /* Classical Brass & Ink Accents */
  --amber: #c5a059;
  --amber-soft: rgba(197, 160, 89, 0.14);
  --amber-glow: rgba(197, 160, 89, 0.24);
  --blue: #5c7a99;
  --purple: #7c6885;
  --green: #3d7a5a;
  --green-soft: rgba(61, 122, 90, 0.18);
  --green-text: #a7d7be;
  --red: #992b2b;
  --red-soft: rgba(153, 43, 43, 0.2);
  --red-text: #ebb5b5;
  
  /* Accessibility Focus Rings */
  --focus-ring: #c5a059;
  --focus-ring-offset: 3px;
}

/* Base Reset & Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}

body {
  background: var(--bg-primary);
  color: var(--text-main);
  line-height: 1.7;
  padding: 2rem 1rem;
  min-height: 100vh;
}

.container {
  max-width: 980px;
  margin: 0 auto;
}

/* Keyboard Accessibility Focus Visible */
*:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

/* Nav Breadcrumbs */
.nav-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.nav-breadcrumb a {
  color: #d4b475;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.nav-breadcrumb a:hover {
  color: #f4efe6;
  text-decoration: underline;
}

/* Header Banner */
header.unit-header {
  border-radius: 8px;
  padding: 2.25rem 2rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(197, 160, 89, 0.35);
  outline: 1px solid rgba(197, 160, 89, 0.14);
  outline-offset: -6px;
}

/* Theme variations for header */
header.dracula-theme {
  background: linear-gradient(135deg, #2b1111 0%, #171310 65%, #1f1714 100%);
  border-color: rgba(197, 160, 89, 0.38);
}
header.frankenstein-theme {
  background: linear-gradient(135deg, #132421 0%, #171310 65%, #16201e 100%);
  border-color: rgba(197, 160, 89, 0.38);
}

.header-badges {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.badge {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.badge-canon-dracula { background: var(--crimson); color: white; border: 1px solid var(--crimson-bright); }
.badge-canon-frankenstein { background: var(--teal); color: white; border: 1px solid var(--teal-bright); }
.badge-cefr { background: #1e1b4b; color: #c7d2fe; border: 1px solid #6366f1; }
.badge-time { background: #1e293b; color: #fde68a; border: 1px solid #d97706; }
.badge-adapted { background: #27272a; color: #f43f5e; border: 1px solid #e11d48; }
.badge-verbatim { background: #14532d; color: #86efac; border: 1px solid #22c55e; }

header.unit-header h1 {
  font-size: 2.15rem;
  line-height: 1.2;
  margin-bottom: 0.45rem;
  color: #ffffff;
  letter-spacing: -0.01em;
}
header.unit-header p {
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 620px;
}

/* Masterclass Score Box */
.score-box {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--card-border);
  padding: 1.1rem 1.6rem;
  border-radius: 14px;
  text-align: center;
  min-width: 170px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.score-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-weight: 700;
}
.score-display {
  font-size: 2.3rem;
  font-weight: 800;
  color: #f87171;
  line-height: 1.1;
  margin-top: 0.2rem;
  transition: color 0.3s;
}
.score-box.frankenstein .score-display {
  color: #2dd4bf;
}

/* Cards & Sections */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 0.95rem;
  margin-bottom: 1.35rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.card-header h2 {
  font-size: 1.35rem;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pill {
  background: var(--card-bg-alt);
  border: 1px solid var(--card-border);
  color: #93c5fd;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Section 1: Literary Reading Frame */
.reading-frame {
  background: #06080e;
  border-left: 4px solid var(--crimson);
  border-radius: 10px;
  padding: 1.65rem;
  margin-bottom: 1.5rem;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #f1f5f9;
  position: relative;
}
.reading-frame.frankenstein-frame {
  border-left-color: var(--teal-bright);
}
.reading-frame cite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid #1e293b;
  font-size: 0.82rem;
  font-family: -apple-system, sans-serif;
  color: var(--amber);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.attribution-label {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.attr-adapted {
  background: rgba(244, 63, 94, 0.15);
  color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.4);
}
.attr-verbatim {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.highlight-clause {
  background: rgba(220, 38, 38, 0.22);
  border-bottom: 2px solid var(--crimson-bright);
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  color: #fecaca;
  cursor: help;
}
.highlight-clause.teal {
  background: rgba(13, 148, 136, 0.25);
  border-bottom-color: var(--teal-bright);
  color: #99f6e4;
}

/* Museum vs Arsenal Lexicon Table */
.lexicon-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
  margin-top: 1.5rem;
}
@media (max-width: 720px) {
  .lexicon-filter-grid { grid-template-columns: 1fr; }
}
.lex-box {
  background: var(--card-bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.35rem;
}
.lex-box.museum { border-top: 4px solid #64748b; }
.lex-box.arsenal { border-top: 4px solid var(--amber); }
.lex-title {
  font-size: 0.96rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lex-desc { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 0.95rem; }
.lex-item {
  background: #090d16;
  border: 1px solid #1e293b;
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  margin-bottom: 0.65rem;
  font-size: 0.9rem;
}
.lex-item strong { color: #f8fafc; font-size: 0.92rem; }
.lex-item span { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.45; }
.lex-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-top: 0.35rem;
}
.tag-museum { background: #334155; color: #cbd5e1; }
.tag-arsenal { background: rgba(245, 158, 11, 0.2); color: #fde68a; border: 1px solid rgba(245, 158, 11, 0.3); }

/* Interactive Sort Task */
.sort-instruction { font-size: 0.94rem; color: var(--text-muted); margin: 1.35rem 0 0.85rem 0; }
.sort-container { display: flex; flex-direction: column; gap: 0.85rem; }
.sort-row {
  background: var(--card-bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.sort-word { font-weight: 700; color: #f8fafc; min-width: 220px; font-size: 0.96rem; }
.sort-word small { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.83rem; margin-top: 0.2rem; }
.sort-actions { display: flex; gap: 0.5rem; }
.btn-sort {
  padding: 0.55rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: #0f172a;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 40px;
  transition: all 0.2s;
}
.btn-sort:hover:not(:disabled) { border-color: var(--amber); }
.btn-sort.correct { background: var(--green-soft); border-color: var(--green); color: var(--green-text); }
.btn-sort.wrong { background: var(--red-soft); border-color: var(--red); color: var(--red-text); }
.sort-explanation {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  display: none;
  line-height: 1.45;
}

/* Section 2: Grammar Pillars Grid */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.35rem;
  margin-bottom: 1.75rem;
}
.pillar-card {
  background: var(--card-bg-alt);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--crimson);
  border-radius: 12px;
  padding: 1.35rem;
}
.pillar-card.teal-top { border-top-color: var(--teal-bright); }
.pillar-card:nth-child(2) { border-top-color: var(--amber); }
.pillar-card:nth-child(3) { border-top-color: var(--blue); }
.pillar-card:nth-child(4) { border-top-color: var(--purple); }
.pillar-card h3 { font-size: 1.05rem; margin-bottom: 0.55rem; color: #ffffff; }
.pillar-card p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.85rem; line-height: 1.5; }
.pillar-example {
  background: #090a12;
  padding: 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #e2e8f0;
  border-left: 3px solid #475569;
  line-height: 1.55;
}
.pillar-example strong { color: #fca5a5; }
.pillar-card.teal-top .pillar-example strong { color: #5eead4; }

/* Diagnostic MCQs */
.mc-block {
  background: var(--card-bg-alt);
  border: 1px solid var(--card-border);
  padding: 1.45rem;
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.mc-prompt { font-weight: 600; margin-bottom: 0.95rem; font-size: 0.98rem; color: #f8fafc; }
.mc-options { display: flex; flex-direction: column; gap: 0.65rem; }
.mc-btn {
  text-align: left;
  padding: 0.85rem 1.15rem;
  background: #0a0d16;
  border: 1px solid var(--card-border);
  color: var(--text-main);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: all 0.2s;
  min-height: 44px;
}
.mc-btn:hover:not(:disabled) { border-color: #60a5fa; background: #131b2e; }
.mc-btn.correct { background: var(--green-soft); border-color: var(--green); color: var(--green-text); }
.mc-btn.wrong { background: var(--red-soft); border-color: var(--red); color: var(--red-text); }
.feedback-box {
  font-size: 0.88rem;
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  display: none;
  line-height: 1.55;
}

/* Section 3: Cambridge Key Word Transformations */
.kwt-card {
  background: var(--card-bg-alt);
  border: 1px solid var(--card-border);
  padding: 1.45rem;
  border-radius: 12px;
  margin-bottom: 1.35rem;
}
.kwt-original { font-size: 0.98rem; color: #f1f5f9; margin-bottom: 0.45rem; }
.kwt-key {
  display: inline-block;
  background: var(--crimson);
  color: white;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.3rem 0.85rem;
  border-radius: 5px;
  margin: 0.5rem 0;
  letter-spacing: 0.08em;
}
.kwt-card.frankenstein .kwt-key {
  background: var(--teal);
}
.kwt-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.kwt-input {
  flex: 1;
  min-width: 280px;
  background: #090d16;
  border: 2px solid var(--card-border);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.98rem;
  outline: none;
  min-height: 44px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.kwt-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}
.btn-main {
  background: var(--crimson);
  color: white;
  border: none;
  padding: 0.75rem 1.35rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn-main.frankenstein {
  background: var(--teal);
}
.btn-main.frankenstein:hover { background: #0f766e; }
.btn-main:hover { background: #b91c1c; }
.btn-main:disabled { opacity: 0.5; cursor: not-allowed; }

/* Section 4: Style-Shift Lab */
.shift-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
  margin-top: 1.15rem;
}
@media (max-width: 760px) {
  .shift-comparison { grid-template-columns: 1fr; }
}
.shift-pane {
  background: #0a0d16;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.35rem;
}
.shift-pane.victorian { border-left: 4px solid #a855f7; }
.shift-pane.modern { border-left: 4px solid var(--green); }
.shift-label {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.55rem;
}
.shift-text { font-size: 0.92rem; line-height: 1.7; color: var(--text-muted); }

/* Capstone Writing Task Section */
.capstone-box {
  background: #080d19;
  border: 1px solid #1e293b;
  border-left: 4px solid var(--amber);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.capstone-box h3 { color: #fde68a; margin-bottom: 0.5rem; font-size: 1.1rem; }
.capstone-prompt { font-size: 0.93rem; color: #cbd5e1; margin-bottom: 1rem; line-height: 1.6; }
.rubric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.rubric-item {
  background: #0f172a;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.85rem;
  font-size: 0.82rem;
}
.rubric-item strong { color: #38bdf8; display: block; margin-bottom: 0.3rem; }

/* Footer Action */
.footer-bar {
  background: linear-gradient(90deg, #450a0a, #0f172a);
  border: 1px solid var(--crimson-border);
  padding: 1.65rem 2rem;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  margin-top: 2.5rem;
}
.footer-bar.frankenstein {
  background: linear-gradient(90deg, #042f2e, #0f172a);
  border-color: var(--teal-border);
}

/* Print Stylesheet for Physical Handouts */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
  }
  .container { max-width: 100% !important; margin: 0 !important; }
  .nav-breadcrumb, .btn-main, .btn-sort, .mc-btn, .footer-bar, .badge-time, .score-box {
    display: none !important;
  }
  header.unit-header, .card, .reading-frame, .pillar-card, .mc-block, .kwt-card, .lex-box, .shift-pane {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #666666 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  header.unit-header h1, header.unit-header p, h2, h3, .score-display {
    color: #000000 !important;
  }
  .reading-frame { border-left: 4px solid #000000 !important; }
  .highlight-clause { background: #e5e7eb !important; color: #000000 !important; border-bottom: 1px solid #000 !important; }
  .kwt-input { border: 1px solid #000000 !important; color: #000000 !important; }
}

/* ==========================================================================
   FLAIR LAYER: atmosphere, ornament and motion (decorative only)
   Ornaments use empty alt text so screen readers skip them. Motion is off
   under prefers-reduced-motion and in print. Edit the vars below to retune.
   ========================================================================== */
:root{
  --serif:'Cormorant Garamond','EB Garamond','Palatino Linotype','Book Antiqua',Georgia,serif;
  --sans:'EB Garamond','Palatino Linotype',Georgia,serif;
  --gold:#c5a059; --gold-soft:rgba(197,160,89,.35);
  --accent:var(--crimson-bright); --accent-glow:var(--crimson-glow);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body:has(.frankenstein-theme){--accent:var(--teal-bright);--accent-glow:var(--teal-glow)}

/* Type: classical literary serif stack */
html{font-family:var(--sans);scroll-behavior:smooth;scrollbar-color:#3a3026 var(--bg-primary)}
*{font-family:inherit}
h1,h2,h3,.score-display{font-family:var(--serif)}
::selection{background:rgba(197,160,89,.35);color:#fff}

/* Warm museum & library backdrop */
body{background:
  radial-gradient(900px 520px at 50% -8%,rgba(197,160,89,.08),transparent 70%),
  radial-gradient(700px 500px at 100% 30%,rgba(127,29,29,.12),transparent 70%),
  var(--bg-primary);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:.06;mix-blend-mode:overlay}

/* Header: drifting mist + watermark glyph */
header.unit-header{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 16px 40px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06),0 0 60px -20px var(--accent-glow)}
header.unit-header>*{position:relative;z-index:1}
header.unit-header::before{content:"";position:absolute;inset:-40%;z-index:0;background:radial-gradient(40% 35% at 25% 40%,var(--accent-glow),transparent 70%),radial-gradient(35% 30% at 75% 65%,rgba(245,158,11,.12),transparent 70%);animation:mist 22s ease-in-out infinite alternate}
header.dracula-theme::after,header.frankenstein-theme::after{position:absolute;right:2.2rem;bottom:-2.4rem;z-index:0;font-size:11rem;line-height:1;color:var(--accent);opacity:.09;pointer-events:none}
header.dracula-theme::after{content:"\2720";content:"\2720" / ""}
header.frankenstein-theme::after{content:"\26A1\FE0E";content:"\26A1\FE0E" / "";animation:crackle 7s steps(1,end) infinite}
header.unit-header h1{font-weight:700;text-shadow:0 2px 24px var(--accent-glow)}
header.unit-header h1::after,.portal-hero h1::after{content:"";display:block;width:90px;height:2px;margin-top:.8rem;background:linear-gradient(90deg,var(--gold),transparent)}
.score-box{border-color:var(--gold-soft);animation:breathe 5s ease-in-out infinite}
.score-title{color:var(--gold)}
.score-display{text-shadow:0 0 22px currentColor;font-variant-numeric:tabular-nums}

/* Cards: gilt hairline, fleuron between sections, reveal on scroll */
.card,body .unit-card,body .learning-path{background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent 35%)}
.card{position:relative}
.card::before{content:"";position:absolute;top:-1px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.card:not(:last-of-type)::after{content:"\2766";content:"\2766" / "";position:absolute;left:50%;bottom:-1.7rem;transform:translateX(-50%);color:var(--gold);opacity:.5;font-size:1.15rem;line-height:1}
.card-header h2{font-weight:700}
.container>.card,.container>.footer-bar{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.container>.card:nth-of-type(2){animation-delay:.07s}
.container>.card:nth-of-type(3){animation-delay:.14s}
.container>.card:nth-of-type(4){animation-delay:.21s}
@supports (animation-timeline:view()){
  .container>.card,.container>.footer-bar{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 160px;animation-delay:0s}
}

/* Manuscript reading frame */
.reading-frame{background:radial-gradient(120% 100% at 0% 0%,rgba(245,158,11,.08),transparent 60%),#06080e;box-shadow:-12px 0 32px -16px var(--crimson-glow),inset 0 0 60px rgba(0,0,0,.5);font-size:1.12rem;line-height:1.9;overflow:hidden;text-wrap:pretty}
.reading-frame.frankenstein-frame{box-shadow:-12px 0 32px -16px var(--teal-glow),inset 0 0 60px rgba(0,0,0,.5)}
.reading-frame::before{content:"\201C";content:"\201C" / "";position:absolute;top:-.6rem;right:1.2rem;font-size:8rem;line-height:1;color:var(--gold);opacity:.1;pointer-events:none}
.reading-frame cite{color:var(--gold)}
.highlight-clause{transition:background .25s,box-shadow .25s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.highlight-clause:hover{box-shadow:0 0 0 3px rgba(248,113,113,.25),0 0 18px rgba(248,113,113,.25)}
.highlight-clause.teal:hover{box-shadow:0 0 0 3px rgba(45,212,191,.25),0 0 18px rgba(45,212,191,.25)}

/* Lexicon: dusty museum vs gleaming arsenal */
.lex-box{position:relative;overflow:hidden}
.lex-box.museum{background:linear-gradient(180deg,rgba(100,116,139,.12),transparent 60%),var(--card-bg-alt);border-style:dashed;border-top-style:solid}
.lex-box.arsenal{background:linear-gradient(180deg,rgba(245,158,11,.09),transparent 60%),var(--card-bg-alt);box-shadow:0 14px 34px -20px var(--amber-glow)}
.lex-box.museum .lex-title>span:first-child::before{content:"\26B1\FE0E\00A0";content:"\26B1\FE0E\00A0" / ""}
.lex-box.arsenal .lex-title>span:first-child::before{content:"\2694\FE0E\00A0";content:"\2694\FE0E\00A0" / ""}
.lex-item{border-left:3px solid transparent;transition:transform .2s,border-color .2s,background .2s}
.lex-item:hover{transform:translateX(4px);background:#0d1220}
.lex-box.museum .lex-item:hover{border-left-color:#64748b}
.lex-box.arsenal .lex-item:hover{border-left-color:var(--amber)}

/* Grammar pillars: roman numerals, lift on hover */
.pillars-grid{counter-reset:pil}
.pillar-card{counter-increment:pil;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.pillar-card::after{content:counter(pil,upper-roman);content:counter(pil,upper-roman) / "";position:absolute;right:.9rem;top:.35rem;font:700 3.4rem/1 var(--serif);opacity:.09;pointer-events:none}
.pillar-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(0,0,0,.9)}
.pillar-example{font-family:var(--serif);font-size:.92rem}

/* Interactive tasks: tactile feedback */
.sort-row,.mc-block,.kwt-card{transition:border-color .25s,box-shadow .25s}
.sort-row:hover,.mc-block:hover,.kwt-card:focus-within{border-color:var(--gold-soft);box-shadow:0 10px 28px -18px rgba(0,0,0,.9)}
.btn-sort:not(:disabled):nth-child(1):hover{border-color:var(--amber);box-shadow:0 0 16px -4px var(--amber-glow);color:#fde68a}
.btn-sort:not(:disabled):nth-child(2):hover{border-color:#94a3b8;box-shadow:0 0 16px -6px rgba(148,163,184,.5)}
.mc-btn:not(:disabled):hover{transform:translateX(4px)}
.btn-sort.correct,.mc-btn.correct{animation:pop .45s ease-out}
.btn-sort.wrong,.mc-btn.wrong{animation:shake .4s ease-in-out}
.feedback-box,.sort-explanation{animation:fadeup .35s ease-out}
.kwt-key{border-radius:3px;text-shadow:0 1px 0 rgba(0,0,0,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.25),0 4px 14px -4px var(--accent-glow);outline:1px dashed rgba(255,255,255,.35);outline-offset:-4px}
.kwt-input{font-family:var(--serif);font-size:1.02rem}
.btn-main{position:relative;overflow:hidden;background-image:linear-gradient(180deg,rgba(255,255,255,.16),transparent 55%);box-shadow:0 8px 20px -10px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-main::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s}
.btn-main:hover:not(:disabled)::after{transform:translateX(120%)}
.btn-main:hover:not(:disabled){transform:translateY(-1px)}

/* Style-shift lab: register contrast you can see */
.shift-comparison{position:relative}
.shift-pane.victorian{background:radial-gradient(100% 80% at 0% 0%,rgba(168,85,247,.12),transparent 70%),#0a0d16}
.shift-pane.victorian .shift-text{font-family:var(--serif);font-style:italic;font-size:1rem}
.shift-pane.modern{background:radial-gradient(100% 80% at 100% 0%,rgba(16,185,129,.1),transparent 70%),#0a0d16}
.shift-pane.modern .shift-text{letter-spacing:.01em}
@media (min-width:761px){
  .shift-comparison::after{content:"\2192";content:"\2192" / "";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;background:var(--bg-primary);border:1px solid var(--amber);color:var(--amber);font-size:1.2rem;box-shadow:0 0 18px -4px var(--amber-glow);z-index:2}
}

/* Capstone, rubric, footer */
.capstone-box{background:linear-gradient(135deg,rgba(245,158,11,.08),transparent 55%),#080d19;box-shadow:0 0 0 1px rgba(245,158,11,.12),0 18px 40px -26px var(--amber-glow)}
.capstone-box h3::before{content:"\270E\FE0E\00A0";content:"\270E\FE0E\00A0" / "";color:var(--gold)}
.rubric-item{transition:transform .2s,border-color .2s}
.rubric-item:hover{transform:translateY(-2px);border-color:var(--gold-soft)}
.footer-bar{position:relative;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.5),0 0 50px -24px var(--accent-glow)}

/* Index portal (specificity bumped to beat its inline <style>) */
body .portal-hero{box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 80px -30px var(--accent-glow)}
.portal-hero::after{content:"\2766";content:"\2766" / "";position:absolute;right:2rem;bottom:-1.5rem;font-size:12rem;line-height:1;color:var(--gold);opacity:.07;pointer-events:none}
body .unit-card{overflow:hidden}
body .unit-card.dracula-card{border-top:3px solid var(--crimson-bright)}
body .unit-card.frankenstein-card{border-top:3px solid var(--teal-bright)}
body .unit-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px 200px at 50% -20%,rgba(255,255,255,.08),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
body .unit-card:hover::before{opacity:1}
.path-steps-grid{counter-reset:step}
.path-step-card{counter-increment:step;overflow:visible}
.path-step-card::before{content:counter(step,decimal-leading-zero);content:counter(step,decimal-leading-zero) / "";position:absolute;right:.9rem;top:.3rem;font:700 2.4rem/1 var(--serif);color:var(--gold);opacity:.12;pointer-events:none}
.progress-fill{box-shadow:0 0 14px var(--accent-glow)}

@keyframes mist{from{transform:translate3d(-4%,-2%,0) scale(1)}to{transform:translate3d(5%,3%,0) scale(1.12)}}
@keyframes crackle{0%,100%{opacity:.07}6%{opacity:.2}8%{opacity:.06}9%{opacity:.16}12%{opacity:.07}58%{opacity:.07}60%{opacity:.18}62%{opacity:.07}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.97)}55%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 22px -8px var(--accent-glow)}50%{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 38px -4px var(--accent-glow)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  body::before,header.unit-header::before,header.unit-header::after,.card::before,.card::after,.reading-frame::before,.pillar-card::after,.shift-comparison::after,.portal-hero::after,.unit-card::before,.path-step-card::before{display:none!important}
  *{animation:none!important;text-shadow:none!important}
  .card,.pillar-card{background-image:none!important}
  .reading-frame,.lex-box,.capstone-box{box-shadow:none!important}
}

/* ==========================================================================
   SELF-SERVE ARCHIVE GATE, CONVERSION CARDS & CAPSTONE AUDIT STYLES
   ========================================================================== */

/* Paywall Modal */
.da-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  place-items: center;
  z-index: 9999;
  padding: 1.25rem;
  overflow-y: auto;
}
.da-modal-backdrop.active {
  display: grid;
}
.da-modal {
  background: linear-gradient(145deg, #180d1e 0%, #0c101a 50%, #0d1a24 100%);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 50px -15px var(--accent-glow);
  border-radius: 20px;
  max-width: 580px;
  width: 100%;
  padding: 2.25rem;
  position: relative;
  animation: rise 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-main);
}
.da-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
}
.da-modal-close:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fff;
  border-color: #ef4444;
}
.da-modal-seal {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: inline-block;
  filter: drop-shadow(0 0 12px var(--amber-glow));
}
.da-modal-badge {
  display: inline-block;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  margin-bottom: 0.75rem;
}
.da-modal-title {
  font-family: var(--serif);
  font-size: 1.85rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.da-modal-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.da-modal-benefits {
  background: rgba(10, 15, 26, 0.7);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.15rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.da-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: #e2e8f0;
}
.da-benefit-icon {
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.da-btn-stripe {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 50%, #7f1d1d 100%);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  width: 100%;
  border: 1px solid #ef4444;
  box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.4);
  cursor: pointer;
  transition: all 0.25s;
  box-sizing: border-box;
}
.da-btn-stripe:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(220, 38, 38, 0.6);
  border-color: #f87171;
}
.da-passkey-box {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.da-passkey-box p {
  font-size: 0.84rem;
  color: var(--text-subtle);
  margin-bottom: 0.65rem;
}
.da-passkey-row {
  display: flex;
  gap: 0.5rem;
}
.da-passkey-input {
  flex: 1;
  background: #090d16;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  color: #fff;
  font-family: monospace;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.da-passkey-input:focus {
  border-color: var(--gold);
  outline: none;
}
.da-passkey-btn {
  background: #1e293b;
  border: 1px solid var(--card-border);
  color: #e2e8f0;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.2s;
}
.da-passkey-btn:hover {
  background: #334155;
  color: #fff;
}
.da-passkey-feedback {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  min-height: 1.2rem;
}

/* Locked Unit Screen Overlay */
.da-gate-veil {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(7, 9, 14, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.da-gate-veil.unlocked {
  display: none !important;
}

/* Dynamic Completion Card on Unit 1 */
.da-completion-card {
  background: linear-gradient(135deg, #2b0b14 0%, #111827 50%, #062a26 100%);
  border: 1px solid var(--gold-soft);
  border-radius: 18px;
  padding: 2.25rem 2rem;
  margin: 2.5rem 0 2rem 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}
.da-completion-card::after {
  content: "\2720";
  position: absolute;
  right: 1.5rem;
  bottom: -1.5rem;
  font-size: 8rem;
  color: var(--gold);
  opacity: 0.06;
  pointer-events: none;
}
.da-completion-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.da-score-callout {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid #10b981;
  color: #86efac;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
}
.da-completion-title {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: #ffffff;
  margin-bottom: 0.6rem;
}
.da-completion-body {
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 760px;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.da-completion-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.da-perk-chip {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.83rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.da-completion-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.da-link-secondary {
  color: var(--teal-bright);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: color 0.2s;
}
.da-link-secondary:hover {
  text-decoration: underline;
  color: #5eead4;
}

/* Interactive Style-Shift Drill */
.shift-drill-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border);
}
.shift-q-card {
  background: var(--card-bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.shift-q-prompt {
  font-size: 0.92rem;
  color: #f8fafc;
  margin-bottom: 0.85rem;
  line-height: 1.55;
}
.shift-q-prompt em {
  color: var(--gold);
}
.shift-q-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.shift-q-btn {
  background: #0f172a;
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.shift-q-btn:hover:not(:disabled) {
  border-color: var(--amber);
  color: #fff;
}
.shift-q-btn.correct {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
  color: #86efac !important;
}
.shift-q-btn.wrong {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* Capstone Workspace & Self-Audit Checklist */
.capstone-workspace {
  margin-top: 1.5rem;
}
.capstone-textarea {
  width: 100%;
  min-height: 180px;
  background: #070a12;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  color: #ffffff;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  resize: vertical;
  box-sizing: border-box;
}
.capstone-textarea:focus {
  border-color: var(--amber);
  outline: none;
}
.capstone-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem 0;
}
.word-counter-pill {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid var(--card-border);
}
.word-counter-pill.in-range {
  background: rgba(16, 185, 129, 0.2);
  color: #86efac;
  border-color: #10b981;
}
.word-counter-pill.over-limit {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: #ef4444;
}

/* Self-Audit Checklist items */
.capstone-audit-list {
  background: #090d18;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.audit-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #cbd5e1;
}
.audit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #1e293b;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.audit-badge.passed {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

/* Model Answer Overlay Panel */
.model-answer-panel {
  background: #0b1120;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.75rem;
  margin-top: 1.5rem;
  display: none;
}
.model-answer-panel.active {
  display: block;
}
.model-crit-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.model-crit-btn {
  background: #1e293b;
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.model-crit-btn:hover {
  color: #fff;
  border-color: #94a3b8;
}
.model-crit-btn.active {
  background: var(--amber);
  color: #000;
  border-color: var(--amber);
}
.model-text-box {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.85;
  color: #e2e8f0;
  background: #060911;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.hl-annotated {
  background: rgba(245, 158, 11, 0.22);
  border-bottom: 2px solid var(--amber);
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
  cursor: pointer;
}
.hl-annotated.active {
  background: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 12px var(--amber-glow);
}
.crit-commentary-box {
  background: rgba(15, 23, 42, 0.8);
  border-left: 3px solid var(--amber);
  padding: 0.85rem 1.1rem;
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
  color: #cbd5e1;
}

/* Offline Dossier Banner / CTA */
.dossier-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  border-radius: 99px;
  text-decoration: none;
  transition: all 0.2s;
}
.dossier-pill-btn:hover {
  background: rgba(245, 158, 11, 0.28);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Paywall Lock Protection (Screen & Print-to-PDF Bypass Prevention) */
body.da-is-locked .container > *:not(.worksheet-header),
body.da-is-locked .compendium-container > *:not(.compendium-toolbar) {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

@media print {
  body.da-is-locked .container,
  body.da-is-locked .compendium-container {
    display: none !important;
  }
  body.da-is-locked::before {
    content: "Locked Module — Please unlock The Dark Academia Archive (£24) at garethenglish.com to print or export this C1/C2 study dossier.";
    display: block;
    padding: 3rem;
    font-size: 1.25rem;
    font-weight: bold;
    color: #000;
    text-align: center;
  }
}

/* ==========================================================================
   VICTORIAN EXPANSION: JEKYLL & HYDE (APOTHECARY) + BASKERVILLES (MOORLAND)
   + BESPOKE VISUAL SCENE BANNERS, SYNTAX BLUEPRINTS & ARTIFACT WIDGETS
   ========================================================================== */

:root {
  /* Jekyll & Hyde: Apothecary Sepia, Amber & Cyan Elixir */
  --jekyll-sepia: #92400e;
  --jekyll-amber: #f59e0b;
  --hyde-cyan: #06b6d4;
  --hyde-cyan-bright: #22d3ee;
  --jekyll-glow: rgba(6, 182, 212, 0.35);
  --jekyll-border: #78350f;

  /* Hound of the Baskervilles: Dartmoor Moss, Fog & Phosphor Yellow */
  --moor-green: #065f46;
  --moor-emerald: #10b981;
  --hound-phosphor: #eab308;
  --hound-bright: #fde047;
  --moor-glow: rgba(234, 179, 8, 0.32);
  --moor-border: #14532d;
}

body:has(.jekyll-theme) {
  --accent: var(--hyde-cyan-bright);
  --accent-glow: var(--jekyll-glow);
}
body:has(.baskerville-theme) {
  --accent: var(--hound-bright);
  --accent-glow: var(--moor-glow);
}

header.jekyll-theme {
  background: linear-gradient(135deg, #451a03 0%, #0f172a 55%, #083344 100%);
  border-color: #b45309;
}
header.jekyll-theme::after {
  content: "\2697\FE0E";
  content: "\2697\FE0E" / "";
  position: absolute;
  right: 2.2rem;
  bottom: -2.2rem;
  z-index: 0;
  font-size: 10.5rem;
  line-height: 1;
  color: var(--hyde-cyan-bright);
  opacity: 0.1;
  pointer-events: none;
}

header.baskerville-theme {
  background: linear-gradient(135deg, #022c22 0%, #0f172a 55%, #422006 100%);
  border-color: #15803d;
}
header.baskerville-theme::after {
  content: "\1F50D\FE0E";
  content: "\1F50D\FE0E" / "";
  position: absolute;
  right: 2.2rem;
  bottom: -2.2rem;
  z-index: 0;
  font-size: 10rem;
  line-height: 1;
  color: var(--hound-bright);
  opacity: 0.09;
  pointer-events: none;
}

.badge-canon-jekyll {
  background: linear-gradient(90deg, #92400e, #0e7490);
  color: #ffffff;
  border: 1px solid #22d3ee;
}
.badge-canon-baskerville {
  background: linear-gradient(90deg, #065f46, #713f12);
  color: #fef08a;
  border: 1px solid #eab308;
}

.score-box.jekyll .score-display { color: #22d3ee; }
.score-box.baskerville .score-display { color: #fde047; }

.reading-frame.jekyll-frame {
  border-left-color: #22d3ee;
  box-shadow: -12px 0 32px -16px rgba(6, 182, 212, 0.35), inset 0 0 60px rgba(0, 0, 0, 0.5);
}
.reading-frame.baskerville-frame {
  border-left-color: #eab308;
  box-shadow: -12px 0 32px -16px rgba(234, 179, 8, 0.32), inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.highlight-clause.cyan {
  background: rgba(6, 182, 212, 0.22);
  border-bottom-color: #22d3ee;
  color: #a5f3fc;
}
.highlight-clause.phosphor {
  background: rgba(234, 179, 8, 0.22);
  border-bottom-color: #fde047;
  color: #fef08a;
}

.kwt-card.jekyll .kwt-key { background: #0e7490; border: 1px solid #22d3ee; }
.kwt-card.baskerville .kwt-key { background: #065f46; border: 1px solid #eab308; color: #fef08a; }

.btn-main.jekyll { background: linear-gradient(135deg, #b45309, #0e7490); }
.btn-main.jekyll:hover { background: linear-gradient(135deg, #d97706, #0891b2); }

.btn-main.baskerville { background: linear-gradient(135deg, #065f46, #854d0e); color: #fef9c3; }
.btn-main.baskerville:hover { background: linear-gradient(135deg, #047857, #a16207); }

.footer-bar.jekyll {
  background: linear-gradient(90deg, #451a03, #083344);
  border-color: #22d3ee;
}
.footer-bar.baskerville {
  background: linear-gradient(90deg, #022c22, #422006);
  border-color: #eab308;
}
.footer-bar.alice {
  background: linear-gradient(90deg, #2e1065, #0f172a);
  border-color: #c084fc;
}

body:has(.alice-theme) {
  --accent: #c084fc;
  --accent-glow: rgba(192, 132, 252, 0.25);
}

header.alice-theme {
  background: linear-gradient(135deg, #2e1065 0%, #0f172a 55%, #3b0764 100%);
  border-color: #9333ea;
}
header.alice-theme::after {
  content: "\23F1\FE0E";
  content: "\23F1\FE0E" / "";
  position: absolute;
  right: 2.2rem;
  bottom: -2.2rem;
  z-index: 0;
  font-size: 10rem;
  line-height: 1;
  color: #c084fc;
  opacity: 0.1;
  pointer-events: none;
}

.badge-canon-alice {
  background: linear-gradient(90deg, #581c87, #7e22ce);
  color: #f3e8ff;
  border: 1px solid #c084fc;
}

.score-box.alice .score-display { color: #d8b4fe; }

.reading-frame.alice-frame {
  border-left-color: #c084fc;
  box-shadow: -12px 0 32px -16px rgba(192, 132, 252, 0.35), inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.highlight-clause.violet {
  background: rgba(168, 85, 247, 0.24);
  border-bottom-color: #c084fc;
  color: #f3e8ff;
}

.kwt-card.alice .kwt-key { background: #581c87; border: 1px solid #c084fc; color: #f3e8ff; }

.btn-main.alice { background: linear-gradient(135deg, #6b21a8, #4c1d95); color: #f3e8ff; }
.btn-main.alice:hover { background: linear-gradient(135deg, #7e22ce, #581c87); }

body .unit-card.alice-card { border-top: 3px solid #c084fc; }

/* Edgar Allan Poe: Raven Black & Gothic Crimson */
.footer-bar.poe {
  background: linear-gradient(90deg, #450a0a, #0f172a);
  border-color: #ef4444;
}

body:has(.poe-theme) {
  --accent: #ef4444;
  --accent-glow: rgba(239, 68, 68, 0.25);
}

header.poe-theme {
  background: linear-gradient(135deg, #450a0a 0%, #0f172a 55%, #1f0408 100%);
  border-color: #dc2626;
}
header.poe-theme::after {
  content: "\2665\FE0E";
  content: "\2665\FE0E" / "";
  position: absolute;
  right: 2.2rem;
  bottom: -2.2rem;
  z-index: 0;
  font-size: 10rem;
  line-height: 1;
  color: #ef4444;
  opacity: 0.1;
  pointer-events: none;
}

.badge-canon-poe {
  background: linear-gradient(90deg, #7f1d1d, #991b1b);
  color: #fee2e2;
  border: 1px solid #ef4444;
}

.score-box.poe .score-display { color: #fca5a5; }

.reading-frame.poe-frame {
  border-left-color: #ef4444;
  box-shadow: -12px 0 32px -16px rgba(239, 68, 68, 0.35), inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.highlight-clause.crimson {
  background: rgba(220, 38, 38, 0.24);
  border-bottom-color: #ef4444;
  color: #fee2e2;
}

.kwt-card.poe .kwt-key { background: #7f1d1d; border: 1px solid #ef4444; color: #fee2e2; }

.btn-main.poe { background: linear-gradient(135deg, #991b1b, #7f1d1d); color: #fee2e2; }
.btn-main.poe:hover { background: linear-gradient(135deg, #b91c1c, #991b1b); }

body .unit-card.poe-card { border-top: 3px solid #ef4444; }

/* ==========================================================================
   BESPOKE ATMOSPHERIC SCENE BANNERS & VISUAL SYNTAX DIAGRAMS
   ========================================================================== */
.visual-scene-banner {
  background: linear-gradient(160deg, #0b111e 0%, #070a12 100%);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
@media (max-width: 820px) {
  .visual-scene-banner { grid-template-columns: 1fr; }
}
.scene-illustration-frame {
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.05), #04060b 80%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.scene-illustration-frame svg {
  width: 100%;
  height: 155px;
  display: block;
}
.scene-caption-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.6rem;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.syntax-visual-blueprint {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(232, 193, 112, 0.25);
  border-radius: 12px;
  padding: 1.25rem;
}
.blueprint-tag {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  display: inline-block;
  margin-bottom: 0.4rem;
}
.blueprint-title {
  font-size: 1.1rem;
  color: #ffffff;
  font-family: var(--serif);
  margin-bottom: 0.65rem;
}
.syntax-flow-nodes {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.syntax-node {
  background: #060911;
  border: 1px solid #1e293b;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.84rem;
}
.syntax-node strong {
  color: #ffffff;
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.syntax-node span {
  color: #cbd5e1;
  font-family: var(--serif);
}

/* ==========================================================================
   JEKYLL & HYDE: SPLIT-PERSONA DUALITY LENS & APOTHECARY LAB
   ========================================================================== */
.duality-lens-widget {
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.2) 0%, rgba(15, 23, 42, 0.9) 50%, rgba(8, 51, 68, 0.25) 100%);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 14px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  position: relative;
}
.duality-toggle-bar {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}
.duality-mode-btn {
  padding: 0.5rem 1rem;
  border-radius: 99px;
  border: 1px solid #334155;
  background: #090d16;
  color: #cbd5e1;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.duality-mode-btn.active-jekyll {
  background: rgba(217, 119, 6, 0.22);
  border-color: #f59e0b;
  color: #fde68a;
}
.duality-mode-btn.active-hyde {
  background: rgba(6, 182, 212, 0.22);
  border-color: #22d3ee;
  color: #a5f3fc;
}
.duality-panes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 720px) {
  .duality-panes-grid { grid-template-columns: 1fr; }
}
.persona-pane {
  border-radius: 10px;
  padding: 1.2rem;
  transition: all 0.3s ease;
}
.persona-pane.jekyll-pane {
  background: rgba(69, 26, 3, 0.32);
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.persona-pane.hyde-pane {
  background: rgba(8, 51, 68, 0.35);
  border: 1px solid rgba(34, 211, 238, 0.4);
}
.persona-pane:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   HOUND OF THE BASKERVILLES: 221B BAKER STREET TELEGRAM & DEDUCTION BOARD
   ========================================================================== */
.baskerville-telegram {
  background: linear-gradient(180deg, #1c1917 0%, #0f141c 100%);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-top: 4px dashed rgba(234, 179, 8, 0.6);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-family: 'Courier New', Courier, monospace;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.65);
}
.telegram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(234, 179, 8, 0.25);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.telegram-stamp {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid #eab308;
  color: #fde047;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}
.clue-pin-card {
  background: rgba(2, 44, 34, 0.35);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 8px;
  padding: 0.9rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.clue-pin-card strong {
  color: #fde047;
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === PORTAL HUB STYLES === */
.portal-hero {
      background: linear-gradient(135deg, #2e0808 0%, #0a1120 45%, #042422 100%);
      border: 1px solid #471717;
      border-radius: 20px;
      padding: 2.75rem 2.25rem;
      margin-bottom: 2.25rem;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
      position: relative;
      overflow: hidden;
    }
    .portal-hero h1 {
      font-size: 2.5rem;
      font-weight: 900;
      line-height: 1.2;
      color: #ffffff;
      margin-bottom: 0.85rem;
      letter-spacing: -0.02em;
    }
    .portal-hero p {
      color: #cbd5e1;
      font-size: 1.08rem;
      max-width: 780px;
      line-height: 1.65;
    }
    .learning-path {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 1.85rem;
      margin-bottom: 2.25rem;
    }
    .learning-path h2 {
      font-size: 1.35rem;
      color: #ffffff;
      margin-bottom: 0.4rem;
    }
    .learning-path-desc {
      font-size: 0.94rem;
      color: var(--text-muted);
      margin-bottom: 1.35rem;
    }
    .path-steps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 1.1rem;
    }
    .path-step-card {
      background: var(--card-bg-alt);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      padding: 1.25rem;
    }
    .step-badge {
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--amber);
      margin-bottom: 0.35rem;
      display: block;
    }
    .path-step-card h3 {
      font-size: 1.02rem;
      color: #f8fafc;
      margin-bottom: 0.4rem;
    }
    .path-step-card p {
      font-size: 0.86rem;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .canon-section {
      margin-bottom: 2.5rem;
    }
    .canon-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      border-bottom: 2px solid var(--card-border);
      padding-bottom: 0.85rem;
      margin-bottom: 1.35rem;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .canon-header.dracula { border-bottom-color: var(--crimson-border); }
    .canon-header.frankenstein { border-bottom-color: var(--teal-border); }
    .canon-header.jekyll { border-bottom-color: #7c5826; }
    .canon-header.baskerville { border-bottom-color: #46573b; }
    .canon-title-group h2 {
      font-size: 1.65rem;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .canon-title-group p {
      color: var(--text-muted);
      font-size: 0.95rem;
      margin-top: 0.2rem;
    }
    .units-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
      gap: 1.35rem;
    }
    .unit-card {
      background: var(--card-bg);
      border: 1px solid rgba(197, 160, 89, 0.26);
      border-radius: 6px;
      padding: 1.6rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
      text-decoration: none;
      color: inherit;
    }
    .unit-card:hover {
      transform: translateY(-2px);
      border-color: var(--gold);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
    }
    .unit-top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.85rem;
    }
    .unit-num {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.22rem 0.65rem;
      border-radius: 3px;
      background: rgba(197, 160, 89, 0.12);
      color: #e6d3a7;
      border: 1px solid rgba(197, 160, 89, 0.32);
    }
    .unit-progress-badge {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-subtle);
      background: var(--bg-secondary);
      padding: 0.2rem 0.6rem;
      border-radius: 3px;
      border: 1px solid var(--card-border);
    }
    .unit-progress-badge.completed {
      color: var(--green-text);
      border-color: var(--green);
      background: var(--green-soft);
    }
    .unit-card h3 {
      font-size: 1.3rem;
      color: var(--text-main);
      margin-bottom: 0.5rem;
      line-height: 1.3;
    }
    .unit-excerpt {
      font-size: 0.94rem;
      color: var(--text-muted);
      margin-bottom: 1.1rem;
      line-height: 1.6;
    }
    .unit-meta-list {
      list-style: none;
      border-top: 1px solid var(--card-border);
      padding-top: 0.9rem;
      margin-bottom: 1.25rem;
      font-size: 0.88rem;
      color: var(--text-muted);
    }
    .unit-meta-list li {
      margin-bottom: 0.4rem;
      display: flex;
      gap: 0.45rem;
    }
    .unit-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0.68rem 1rem;
      border-radius: 4px;
      font-weight: 700;
      font-size: 0.9rem;
      text-align: center;
      border: 1px solid rgba(197, 160, 89, 0.38);
      transition: background 0.2s, border-color 0.2s;
    }
    .dracula .unit-cta { background: #5c1919; color: #f4efe6; }
    .dracula:hover .unit-cta { background: #7f1d1d; border-color: var(--gold); }
    .frankenstein .unit-cta { background: #1f453e; color: #f4efe6; }
    .frankenstein:hover .unit-cta { background: #285950; border-color: var(--gold); }
    .jekyll .unit-cta { background: #5c401c; color: #f4efe6; }
    .jekyll:hover .unit-cta { background: #785324; border-color: var(--gold); }
    .baskerville .unit-cta { background: #33422c; color: #f4efe6; }
    .baskerville:hover .unit-cta { background: #43573a; border-color: var(--gold); }

/* ==========================================================================
   CLASSICAL FINE ART GALLERY & ATMOSPHERIC SOUND CONTROLS
   ========================================================================== */

/* Top Persistent Scholar's Atmospheric HUD */
.da-scholar-hud {
  position: sticky;
  top: 0.5rem;
  z-index: 950;
  max-width: 980px;
  margin: 0 auto 1.35rem auto;
  background: rgba(18, 15, 12, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}

.da-hud-left,
.da-hud-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.da-hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #1d1814;
  border: 1px solid rgba(197, 160, 89, 0.32);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.36rem 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.da-hud-pill:hover {
  border-color: var(--gold);
  background: rgba(197, 160, 89, 0.16);
  color: #f5ebd6;
}

.da-hud-pill.active-sound {
  background: rgba(61, 122, 90, 0.22);
  border-color: rgba(167, 215, 190, 0.45);
  color: #d1fae5;
}

.da-hud-pill.da-voice-stop-pill {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: pulseVoiceStop 1.8s ease-in-out infinite;
}

.da-hud-pill.da-voice-stop-pill:hover {
  background: #dc2626 !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}

@keyframes pulseVoiceStop {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

.da-hud-music-group {
  display: inline-flex;
  align-items: center;
  background: #16120f;
  border: 1px solid rgba(197, 160, 89, 0.38);
  border-radius: 4px;
  overflow: hidden;
}

.da-hud-music-group button {
  border: none;
  background: transparent;
  color: #e6d3a7;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.36rem 0.72rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  transition: background 0.2s, color 0.2s;
}

.da-hud-music-group button:hover {
  background: rgba(197, 160, 89, 0.18);
  color: #ffffff;
}

.da-hud-music-group button.playing {
  background: #5c401c;
  color: #f5ebd6;
}

.da-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #c5a059;
  color: #120e0b !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.72rem 1.3rem;
  border-radius: 4px;
  border: 1px solid #e6d3a7;
  cursor: pointer;
  transition: all 0.2s ease;
}

.da-btn-gold:hover {
  background: #d4b475;
}

/* 4-Plate Fine Art & Audio Gallery Stage (Hub) */
.da-cinema-stage {
  background: #16120f;
  border: 1px solid rgba(197, 160, 89, 0.45);
  outline: 1px solid rgba(197, 160, 89, 0.16);
  outline-offset: -6px;
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 2.25rem;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

.da-cinema-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.da-cinema-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e6d3a7;
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid rgba(197, 160, 89, 0.35);
  padding: 0.28rem 0.75rem;
  border-radius: 3px;
}

.da-cinema-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

@media (max-width: 780px) {
  .da-cinema-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.da-cinema-tab {
  background: #1d1814;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 0.65rem 0.8rem;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.da-cinema-tab strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text-main);
  font-family: var(--serif);
}

.da-cinema-tab span {
  display: block;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-subtle);
  margin-top: 0.15rem;
}

.da-cinema-tab:hover {
  border-color: var(--gold-soft);
}

.da-cinema-tab.active {
  background: #282019;
  border-color: var(--gold);
}

.da-cinema-viewport {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid rgba(197, 160, 89, 0.48);
  background: #0b0907;
  aspect-ratio: 16 / 8.2;
  min-height: 300px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.75);
}

@media (max-width: 680px) {
  .da-cinema-viewport {
    aspect-ratio: 16 / 11;
    min-height: 250px;
  }
}

.da-cinema-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Museum Catalogue Attribution Plaque */
.da-museum-plaque {
  position: absolute;
  top: 0.7rem;
  left: 0.75rem;
  z-index: 3;
  background: rgba(14, 12, 10, 0.86);
  border: 1px solid rgba(197, 160, 89, 0.42);
  color: #e6d3a7;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  padding: 0.22rem 0.65rem;
  border-radius: 3px;
  max-width: calc(100% - 1.5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.da-cinema-overlay {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(12, 10, 8, 0.96) 0%, rgba(12, 10, 8, 0.8) 65%, transparent 100%);
  padding: 2.2rem 1.5rem 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.da-cinema-caption-box {
  max-width: 650px;
}

.da-cinema-book-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e6d3a7;
  margin-bottom: 0.25rem;
  display: block;
}

.da-cinema-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.16rem;
  color: var(--text-main);
  line-height: 1.45;
  margin-bottom: 0.35rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.da-cinema-grammar-note {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.da-cinema-controls {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Illustrated Canon Headers & Unit Card Art Banners on Hub */
.canon-art-banner {
  position: relative;
  min-height: 155px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(197, 160, 89, 0.42);
  background-color: #14110e;
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.2rem 1.45rem;
}

.canon-art-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  z-index: 0;
  filter: contrast(1.04) brightness(0.85);
}

.canon-art-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.canon-art-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(14, 12, 10, 0.92) 0%, rgba(14, 12, 10, 0.52) 55%, rgba(14, 12, 10, 0.85) 100%);
}

.unit-art-strip {
  height: 118px;
  margin: -1.6rem -1.6rem 1rem -1.6rem;
  background-size: cover;
  background-position: center 35%;
  position: relative;
  border-bottom: 1px solid rgba(197, 160, 89, 0.28);
}

.unit-art-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 12, 10, 0.08) 0%, rgba(26, 22, 19, 0.92) 100%);
}

.unit-art-credit {
  position: absolute;
  bottom: 0.35rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.72rem;
  color: #d8cfc0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lesson Page Scene Illustration Museum Oil Painting Plate */
.scene-illustration-frame.has-painted-vfx {
  padding: 0;
  min-height: 255px;
  background: #0d0b09;
  border-radius: 6px;
  border: 2px solid rgba(197, 160, 89, 0.42);
}

.da-scene-stage {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #0d0b09;
}

.da-scene-stage canvas.da-lesson-vfx-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.da-scene-stage svg.original-scene-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  background: #120f0d;
}

.scene-illustration-frame.show-blueprint-svg .da-scene-stage svg.original-scene-svg {
  opacity: 1;
}

.da-scene-controls-overlay {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  display: flex;
  gap: 0.4rem;
}

.da-scene-mini-btn {
  background: rgba(14, 12, 10, 0.88);
  border: 1px solid rgba(197, 160, 89, 0.45);
  color: #e6d3a7;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.24rem 0.65rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.da-scene-mini-btn:hover {
  background: rgba(197, 160, 89, 0.22);
  color: #fff;
}

.scene-illustration-frame.has-painted-vfx .scene-caption-bar {
  margin-top: 0;
  padding: 0.65rem 1rem;
  background: #16120f;
  border-top: 1px solid rgba(197, 160, 89, 0.25);
}

/* Dramatic Audio Reader Bar inside .reading-frame */
.da-audio-reader-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  background: #171310;
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: 4px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}

.da-reader-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, #d97706, #92400e);
  border: 1px solid #fde68a;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}

.da-reader-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.da-reader-btn.speaking {
  background: linear-gradient(135deg, #059669, #065f46);
  border-color: #6ee7b7;
}

.da-waveform {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}

.da-waveform span {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0.45;
  transition: height 0.15s ease;
}

.da-waveform.active span {
  opacity: 1;
  animation: daWaveBounce 0.7s ease-in-out infinite alternate;
}

.da-waveform.active span:nth-child(2) { animation-delay: 0.12s; }
.da-waveform.active span:nth-child(3) { animation-delay: 0.24s; }
.da-waveform.active span:nth-child(4) { animation-delay: 0.36s; }
.da-waveform.active span:nth-child(5) { animation-delay: 0.18s; }

@keyframes daWaveBounce {
  from { height: 4px; }
  to { height: 15px; }
}

.highlight-clause.clause-speaking-now {
  background: rgba(245, 158, 11, 0.38) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35), 0 0 18px rgba(245, 158, 11, 0.45);
}

/* Vocabulary Pronunciation Mini-Buttons */
.da-pronounce-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(232, 193, 112, 0.3);
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 0.45rem;
  vertical-align: middle;
  transition: all 0.15s;
}

.da-pronounce-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  color: #fff;
  transform: scale(1.04);
}

/* Optional Ivory / Bodleian Parchment Reading Mode */
body.da-parchment-mode {
  --bg-primary: #17120e;
  --bg-secondary: #211a14;
  --card-bg: #261e17;
  --card-bg-alt: #30261d;
  --card-border: #4a3b2c;
  --text-main: #fdf8ee;
  --text-muted: #e6dcc8;
}

@media print {
  .da-scholar-hud,
  .da-cinema-stage,
  .da-audio-reader-bar,
  .da-pronounce-btn,
  .da-scene-controls-overlay {
    display: none !important;
  }
}