:root {
      --bg:        #f2efe6;
      --sidebar:   #1e1c1a;
      --accent:    #6b4226;
      --gold:      #b08d57;
      --text:      #1a1a1a;
      --muted:     #5c554a;
      --border:    #d6cdb8;
      --tab-hover: #2a2724;
      --tab-active:#6b4226;
      --sidebar-w: 260px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { height: 100%; overflow: hidden; }

    body {
      font-family: 'EB Garamond', Georgia, serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      height: 100vh;
      font-size: 18px;
      line-height: 1.85;
      letter-spacing: 0.01em;
      -webkit-font-smoothing: antialiased;
    }

    a { color: var(--accent); }
    a:hover { color: var(--gold); }

    #sidebar {
      width: var(--sidebar-w);
      height: 100vh;
      background: var(--sidebar);
      position: fixed;
      top: 0; left: 0;
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(176, 141, 87, 0.3);
      box-shadow: 4px 0 15px rgba(0,0,0,0.12);
      z-index: 100;
      overflow: hidden;
    }

    #sidebar-header {
      padding: 24px 20px 18px;
      border-bottom: 1px solid #33302c;
    }

    #sidebar-header .sidebar-title {
      font-family: 'Cinzel', serif;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 0.06em;
      line-height: 1.4;
    }

    #sidebar-header p {
      font-family: 'EB Garamond', serif;
      font-style: italic;
      font-size: 0.78rem;
      color: #c8bfae;
      margin-top: 5px;
    }

    #nav { flex: 1; overflow-y: auto; padding: 10px 0; }
    #nav::-webkit-scrollbar { width: 4px; }
    #nav::-webkit-scrollbar-thumb { background: #33302c; border-radius: 2px; }

    .nav-item, a.nav-item {
      display: block;
      width: 100%;
      padding: 10px 18px;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      font-family: 'Cinzel', serif;
      font-size: 0.66rem;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: #c8bfae;
      transition: background 0.2s, color 0.2s, padding-left 0.2s, border-left-color 0.2s;
      border-left: 3px solid transparent;
      line-height: 1.4;
    }

    .nav-item:hover, a.nav-item:hover {
      background: var(--tab-hover);
      color: var(--gold);
      padding-left: 24px;
      border-left-color: var(--gold);
    }
    .nav-item.active, a.nav-item.active {
      background: rgba(107, 66, 38, 0.24);
      color: var(--gold);
      border-left-color: var(--gold);
      font-weight: 700;
    }

    .nav-number { display: none; }

    /* ── LANGUAGE SWITCHER ───────────────────── */
    .lang-switcher {
      display: flex;
      gap: 6px;
      padding: 12px 18px 14px;
      border-top: 1px solid rgba(255,255,255,0.08);
      margin-top: 4px;
      flex-wrap: wrap;
    }
    .lang-active {
      font-family: 'Cinzel', serif;
      font-size: 0.68rem;
      letter-spacing: 0.07em;
      color: var(--gold);
      background: rgba(107,66,38,0.24);
      padding: 4px 10px;
      border-radius: 3px;
      border: 1px solid rgba(176,141,87,0.3);
    }
    .lang-option {
      font-family: 'Cinzel', serif;
      font-size: 0.68rem;
      letter-spacing: 0.07em;
      color: rgba(255,255,255,0.45);
      padding: 4px 10px;
      border-radius: 3px;
      border: 1px solid rgba(255,255,255,0.1);
      text-decoration: none;
      transition: color 0.15s, border-color 0.15s;
    }
    .lang-option:hover {
      color: var(--gold);
      border-color: rgba(176,141,87,0.4);
    }

    #main {
      margin-left: var(--sidebar-w);
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    #content-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 48px 72px 40px;
      max-width: 1100px;
    }

    #content-scroll::-webkit-scrollbar { width: 6px; }
    #content-scroll::-webkit-scrollbar-track { background: transparent; }
    #content-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .affiliate-disclosure {
      display: inline-block;
      margin-bottom: 10px;
      padding: 6px 12px;
      background: color-mix(in srgb, var(--border) 35%, transparent);
      border-radius: 4px;
      font-size: 0.75rem;
      color: var(--muted);
    }

    /* ── ADSENSE BOTTOM BAR ─────────────────── */
    #ad-bar {
      display: none;
      height: 100px;
      background: #edeae0;
      border-top: 2px solid var(--border);
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 0 32px;
      flex-shrink: 0;
    }

    #ad-bar.visible { display: flex; }

    .ad-label {
      font-family: 'Cinzel', serif;
      font-size: 0.58rem;
      letter-spacing: 0.12em;
      color: var(--muted);
      text-transform: uppercase;
      white-space: nowrap;
    }

    .ad-slot {
      flex: 1;
      max-width: 728px;
      height: 90px;
      background: #ddd8cc;
      border: 1px dashed var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      color: var(--muted);
      text-transform: uppercase;
    }
    /* Replace .ad-slot contents with real AdSense ins tag when live */

    .section { display: none; }
    .section.active { display: block; }

    .section-header {
      padding-bottom: 16px;
      margin-bottom: 16px;
    }

    .section-label { display: none; }

    .section-title {
      font-family: 'Cinzel', serif;
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.25;
    }

    .section-title::after {
      content: "";
      display: block;
      width: 60px;
      height: 2px;
      background: var(--gold);
      margin-top: 10px;
    }

    .section-subtitle {
      font-family: 'EB Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      color: var(--muted);
      margin-top: 8px;
    }

    .section-body p { margin-bottom: 1.3em; }
    .section-body p:last-child { margin-bottom: 0; }
    /* Plain lists in body text (the global reset strips their indent) */
    .section-body ul:not([class]), .pdf-book ul:not([class]) { padding-left: 1.25rem; margin-bottom: 1.3em; }
    .section-body ul:not([class]) li, .pdf-book ul:not([class]) li { margin-bottom: 0.4rem; font-size: 0.95rem; line-height: 1.6; }

    /* Drop cap removed – no ::first-letter rule */

    /* ── SUB-HEADINGS (original visual identity restored) ── */
.sub-heading,
h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 30px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

    /* Cinzel has no Greek: set Greek inside small-caps headings in the body
       face, without the uppercase transform. */
    .sub-heading [lang="grc"], .pdf-book-heading [lang="grc"] {
      font-family: 'EB Garamond', Georgia, serif;
      text-transform: none;
      letter-spacing: normal;
    }

    /* Plain h3 (if ever used) – academic style, but .sub-heading takes precedence */
    h3 {
      font-family: 'EB Garamond', Georgia, serif;
      font-size: 1.08rem;
      font-weight: 600;
      color: var(--text);
      margin: 1.8em 0 0.6em;
      border-bottom: none;
    }

    h4 {
      font-family: 'EB Garamond', Georgia, serif;
      font-size: 0.98rem;
      font-weight: 600;
      font-style: italic;
      color: var(--muted);
      margin: 1.2em 0 0.4em;
      border-bottom: none;
    }

    /* ── INTRODUCTION PAGE ───────────────────── */
    .intro-hero-line {
      font-family: 'Cinzel', serif;
      font-size: 1.5rem;
      font-weight: 400;
      letter-spacing: 0.08em;
      color: var(--text);
      text-align: center;
      padding: 28px 20px 24px;
      margin-bottom: 24px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      font-style: italic;
    }
    .intro-banner {
      width: 100%;
      height: 220px;
      overflow: hidden;
      border-radius: 4px;
      margin-bottom: 28px;
      background-color: #3a2f22;
    }

    .intro-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      display: block;
    }

    .intro-pull-quote {
      font-family: 'EB Garamond', serif;
      font-size: 1.15rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      line-height: 1.7;
      color: var(--text);
      border-left: 3px solid var(--gold);
      padding: 18px 24px;
      margin: 8px 0 32px;
      background: rgba(176, 141, 87, 0.08);
      border-radius: 0 4px 4px 0;
      font-style: italic;
    }

    .intro-pull-attribution {
      font-family: 'Cinzel', serif;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-style: normal;
      margin-top: 10px;
    }

    .intro-section-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 14px;
      margin: 28px 0 32px;
    }

    .intro-section-card {
      background: #ece6d6;
      border: 1px solid var(--border);
      border-top: 3px solid var(--accent);
      border-radius: 0 0 4px 4px;
      padding: 16px 18px;
      transition: border-top-color 0.2s, box-shadow 0.2s;
      cursor: pointer;
      text-align: left;
      width: 100%;
      font-family: inherit;
    }

    .intro-section-card:hover {
      border-top-color: var(--gold);
      box-shadow: 0 4px 14px rgba(0,0,0,0.1);
      transform: translateY(-2px);
    }

    .intro-card-label {
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 8px;
    }

    .intro-card-desc {
      font-size: 0.88rem;
      color: var(--muted);
      line-height: 1.55;
    }

    .intro-mvp-box {
      background: var(--sidebar);
      border-left: 4px solid var(--gold);
      border-radius: 0 4px 4px 0;
      padding: 22px 26px;
      margin: 32px 0 0;
    }

    .intro-mvp-label {
      font-family: 'Cinzel', serif;
      font-size: 0.72rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 10px;
    }

    .intro-mvp-box p {
      font-size: 0.95rem;
      color: #ded4c0;
      line-height: 1.7;
      margin-bottom: 0 !important;
    }

    .intro-mvp-box strong { color: #e8d9b0; font-style: normal; }

    .intro-shortcut-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 28px 0;
    }

    .intro-shortcut-card {
      background: var(--sidebar);
      border-radius: 4px;
      padding: 20px 22px;
      border-top: 3px solid var(--gold);
    }

    .intro-shortcut-label {
      font-family: 'Cinzel', serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .intro-shortcut-desc {
      font-size: 0.9rem;
      color: #c8bfae;
      line-height: 1.6;
    }

    .intro-shortcut-desc strong { color: #ded4c0; }

    .book-affiliate {
      display: inline-block;
      margin-top: 10px;
      font-family: 'Cinzel', serif;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid rgba(107,66,38,0.3);
      transition: color 0.2s, border-bottom-color 0.2s;
      clear: both;
    }

    .book-affiliate:hover {
      color: var(--gold);
      border-bottom-color: var(--gold);
    }

    .book-entry {
      margin: 22px 0;
      padding: 16px 20px;
      background: #ece6d6;
      border-left: 4px solid var(--accent);
      border-radius: 0 4px 4px 0;
      display: grid;
      grid-template-columns: 88px 1fr;
      column-gap: 18px;
      align-items: start;
    }

    .book-entry:not(:has(img)) {
      grid-template-columns: 1fr;
    }

    .book-title {
      font-family: 'Cinzel', serif;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 3px;
    }

    .book-author {
      font-style: italic;
      font-size: 0.88rem;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .book-note { font-size: 0.95rem; color: var(--text); line-height: 1.6; }

    .resource-list { list-style: none; margin: 16px 0; }
    .resource-list li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
    .resource-list li:last-child { border-bottom: none; }
    .resource-list a { color: var(--accent); text-decoration: none; }
    .resource-list a:hover { text-decoration: underline; }

    .reading-order { counter-reset: reading; list-style: none; margin: 20px 0; }
    .reading-order li {
      counter-increment: reading;
      display: flex;
      align-items: baseline;
      gap: 14px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.97rem;
    }
    .reading-order li::before {
      content: counter(reading);
      font-family: 'Cinzel', serif;
      font-size: 0.78rem;
      color: var(--gold);
      background: var(--sidebar);
      min-width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .email-box {
      background: var(--sidebar);
      color: #ded4c0;
      padding: 26px 28px;
      border-radius: 4px;
      margin: 28px 0;
    }
    .email-box h3 {
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      color: var(--gold);
      margin-bottom: 10px;
    }
    .email-box p { font-size: 0.88rem; margin-bottom: 16px; color: #c8bfae; }
    .email-box .email-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .email-box input[type="email"] {
      flex: 1; min-width: 200px;
      padding: 10px 14px;
      border: 1px solid #4a4038;
      background: #232019;
      color: #ded4c0;
      font-family: 'EB Garamond', serif;
      font-size: 0.95rem;
      border-radius: 3px;
      outline: none;
    }
    .email-box button {
      padding: 10px 22px;
      background: var(--accent);
      color: #fff;
      border: none;
      font-family: 'Cinzel', serif;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      cursor: pointer;
      border-radius: 3px;
    }
    .email-box button:hover { background: var(--gold); }

    /* ── CAST OF CHARACTERS TABLE ────────────── */
    .cast-table {
      width: 100%;
      border-collapse: collapse;
      margin: 28px 0 8px;
      font-size: 0.93rem;
    }
    .cast-table thead tr {
      background: var(--sidebar);
    }
    .cast-table thead th {
      font-family: 'Cinzel', serif;
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      color: var(--gold);
      text-transform: uppercase;
      padding: 10px 14px;
      text-align: left;
    }
    .cast-table tbody tr {
      border-bottom: 1px solid var(--border);
    }
    .cast-table tbody tr:nth-child(even) {
      background: #ece6d6;
    }
    .cast-table tbody td {
      padding: 9px 14px;
      vertical-align: top;
      line-height: 1.5;
    }
    .cast-table .cast-name {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
    }
    .cast-table .cast-side-greek { color: #2a5298; font-size: 0.78rem; font-style: italic; }
    .cast-table .cast-side-trojan { color: #8b3a1a; font-size: 0.78rem; font-style: italic; }
    .cast-table .cast-side-god { color: #5a4a9a; font-size: 0.78rem; font-style: italic; }
    .cast-caption {
      font-size: 0.82rem;
      font-style: italic;
      color: var(--muted);
      margin-top: 8px;
      margin-bottom: 0;
    }

    /* ── PRO-TIP CALLOUT ─────────────────────── */
    .pro-tip {
      margin: 24px 0;
      padding: 16px 20px 16px 20px;
      background: #ede7f0;
      border-left: 4px solid var(--accent);
      border-radius: 0 4px 4px 0;
      position: relative;
    }
    .pro-tip-label {
      font-family: 'Cinzel', serif;
      font-size: 0.65rem;
      letter-spacing: 0.14em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .pro-tip p {
      font-size: 0.95rem;
      margin-bottom: 0 !important;
      line-height: 1.6;
    }
    .pro-tip p::first-letter { all: unset; }

    .nav-rule {
      display: block;
      border: none;
      border-top: 1px solid #33302c;
      margin: 10px 18px;
      height: 0;
      padding: 0;
    }

    .nav-divider {
      font-family: 'Cinzel', serif;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      padding: 14px 18px 6px;
      border-top: 1px solid #33302c;
      margin-top: 6px;
    }

    /* ── REFERENCE TABLES ───────────────────── */
    .ref-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      font-size: 0.92rem;
    }
    .ref-table thead tr { background: var(--sidebar); }
    .ref-table thead th {
      font-family: 'Cinzel', serif;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      color: var(--gold);
      text-transform: uppercase;
      padding: 10px 14px;
      text-align: left;
    }
    .ref-table tbody tr { border-bottom: 1px solid var(--border); }
    .ref-table tbody tr:nth-child(even) { background: #ece6d6; }
    .ref-table tbody td {
      padding: 9px 14px;
      vertical-align: top;
      line-height: 1.55;
    }
    .ref-key {
      font-family: 'Cinzel', serif;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
    }
    .ref-greek { color: #2a5298; font-size: 0.8rem; font-style: italic; font-weight: 600; }
    .ref-trojan { color: #8b3a1a; font-size: 0.8rem; font-style: italic; font-weight: 600; }
    .ref-god { color: #5a4a9a; font-size: 0.8rem; font-style: italic; font-weight: 600; }
    .ref-neutral { color: #4a6a4a; font-size: 0.8rem; font-style: italic; font-weight: 600; }
    .ref-book-num {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--accent);
      white-space: nowrap;
    }
    .ref-term {
      font-family: 'Cinzel', serif;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--accent);
    }
    .ref-greek-word {
      font-style: italic;
      color: var(--muted);
      font-size: 0.85rem;
    }

    /* ── REFERENCE ENTRY LIST ─────────────────── */
    /* For name/term + long prose content (People, Glossary, Synopsis):
       a table forces the short name cell to stretch to match the prose
       cell's height, leaving it mostly empty. A flowing entry — name and
       citation on one line, prose underneath, no fixed row height — has
       no such gap. */
    .ref-entry-list {
      margin: 18px 0 28px;
    }
    .ref-entry {
      padding: 10px 0;
    }
    .ref-entry-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.75rem 1.25rem;
      flex-wrap: wrap;
      margin-bottom: 3px;
    }
    .ref-entry-name {
      font-family: 'Cinzel', serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text);
    }
    .ref-entry-name a { color: inherit; text-decoration: none; }
    .ref-entry-name a:hover { color: var(--accent); }
    .ref-entry-cites {
      font-family: 'Cinzel', serif;
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--accent);
      white-space: nowrap;
    }
    .ref-entry-cites a { color: inherit; text-decoration: none; }
    .ref-entry-cites a:hover { color: var(--gold); }
    .ref-entry-meta {
      font-size: 0.78rem;
      font-style: italic;
      color: var(--muted);
      margin-bottom: 3px;
    }
    .ref-entry-body {
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--text);
      margin: 0;
    }

    /* ── BOOK COVER IMAGES ───────────────────── */
    .book-cover {
      grid-column: 1;
      grid-row: 1 / span 10;
      align-self: center;
      width: 88px;
      margin: 0;
      border-radius: 3px;
      box-shadow: 3px 3px 10px rgba(0,0,0,0.18);
      display: block;
      cursor: pointer;
    }
    .book-cover img {
      width: 100%;
      display: block;
      border-radius: 3px;
    }

    .book-cover-placeholder {
      float: right;
      width: 88px;
      height: 118px;
      margin: 0 0 12px 18px;
      border-radius: 3px;
      background: #ddd8cc;
      border: 1px dashed var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: 0.55rem;
      letter-spacing: 0.08em;
      color: var(--muted);
      text-align: center;
      text-transform: uppercase;
      line-height: 1.4;
      padding: 6px;
    }

    /* ── THEME ICONS ─────────────────────── */
    .theme-icon {
      float: right;
      width: 88px;
      height: 88px;
      margin: 0 0 0 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cinzel', serif;
      font-size: 1.8rem;
      font-weight: 400;
      color: var(--gold);
      background: rgba(176, 141, 87, 0.08);
      border: 1px solid rgba(176, 141, 87, 0.3);
      border-radius: 4px;
      letter-spacing: 0.05em;
    }

    /* ── MOBILE TOP BAR ─────────────────────── */
    #mobile-topbar {
      display: none;
    }

    #sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 99;
    }

    #sidebar-overlay.active {
      display: block;
    }

    #hamburger {
      display: none;
    }

    a.nav-item {
      text-decoration: none;
    }

    /* ── MOBILE BREAKPOINT ──────────────────── */
    @media (max-width: 768px) {

      html, body {
        height: auto;
        overflow: auto;
      }

      /* Top bar */
      #mobile-topbar {
        display: flex;
        align-items: center;
        gap: 14px;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 52px;
        background: var(--sidebar);
        border-bottom: 1px solid rgba(176,141,87,0.3);
        padding: 0 16px;
        z-index: 98;
      }

      #mobile-menu-btn {
        background: none;
        border: none;
        color: var(--gold);
        font-size: 1.4rem;
        cursor: pointer;
        padding: 4px;
        line-height: 1;
      }

      #mobile-title {
        font-family: 'Cinzel', serif;
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        color: var(--gold);
        text-transform: uppercase;
        line-height: 1.3;
      }

      /* Sidebar becomes slide-in overlay */
      #sidebar {
        position: fixed;
        top: 0; left: 0;
        width: 280px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
        overflow-y: auto;
      }

      #sidebar.open {
        transform: translateX(0);
      }

      #hamburger {
        display: block;
        background: none;
        border: none;
        color: var(--gold);
        font-size: 1rem;
        cursor: pointer;
        margin-left: auto;
        padding: 4px;
        line-height: 1;
      }

      /* Main content full width */
      #main {
        margin-left: 0;
        height: auto;
        overflow: visible;
        padding-top: 52px;
      }

      #content-scroll {
        height: auto;
        overflow: visible;
        padding: 24px 16px 60px;
      }

      /* Section cards single column */
      .intro-section-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      /* Banner shorter */
      .intro-banner {
        height: 140px;
      }

      /* Book entries stack vertically */
      .book-entry {
        display: block;
      }

      .book-cover {
        display: block;
        margin: 0 0 12px 0;
        width: 80px;
      }

      .theme-icon {
        float: none;
        margin: 0 0 12px 0;
      }

      /* Tables scroll horizontally */
      .ref-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      /* Section title smaller */
      .section-title {
        font-size: 1.4rem;
      }

      /* Body font slightly smaller */
      body {
        font-size: 17px;
      }

      /* Pull quote smaller */
      .intro-pull-quote {
        font-size: 1rem;
      }

      /* Shortcut grid single column */
      .intro-shortcut-grid {
        grid-template-columns: 1fr;
      }
    }




    /* ── PRINT STYLES ───────────────────────── */
    @media print {

      /* Hide UI chrome */
      #sidebar { display: none !important; }
      #mobile-topbar { display: none !important; }
      #sidebar-overlay { display: none !important; }

      /* Reset layout for print */
      html, body {
        height: auto !important;
        overflow: visible !important;
        font-size: 11pt !important;
        background: white !important;
      }

      #main {
        margin-left: 0 !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
      }

      #content-scroll {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        max-width: 100% !important;
        display: block !important;
      }

      /* Show all sections */
      .section {
        display: block !important;
        page-break-before: always !important;
      }

      /* First section no break before */
      #section-0 {
        page-break-before: avoid !important;
      }

      /* Section headers never orphaned */
      .section-header {
        page-break-after: avoid !important;
      }

      /* Keep book entries together */
      .book-entry {
        page-break-inside: avoid !important;
        margin: 12px 0 !important;
      }

      /* Keep table rows together */
      tr {
        page-break-inside: avoid !important;
      }

      /* Keep reference entries together */
      .ref-entry {
        page-break-inside: avoid !important;
      }

      /* Keep headings with content below */
      h2, h3, h4, .sub-heading {
        page-break-after: avoid !important;
      }

      /* Intro cards in 3 columns */
      .intro-section-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        page-break-inside: avoid !important;
      }

      /* Scale down covers for print */
      .book-cover {
        width: 55px !important;
      }

      /* Reference tables */
      .ref-table {
        font-size: 9pt !important;
        display: table !important;
      }

      /* Hide interactive elements */
      .book-affiliate { display: none !important; }
      .intro-section-card { cursor: default !important; }

      /* Clean up links */
      a { color: inherit !important; text-decoration: none !important; }

      /* Banner image full width */
      .intro-banner {
        height: 180px !important;
        page-break-after: avoid !important;
      }

      /* Pull quote stays together */
      .intro-pull-quote {
        page-break-inside: avoid !important;
      }

      /* Sub-headings stay with content */
      .sub-heading {
        page-break-after: avoid !important;
        margin-top: 20px !important;
      }

      /* Table headers repeat on new pages */
      thead { display: table-header-group !important; }
    }

/* ── TRAILER EMBED ───────────────────────── */
.trailer-embed {
  width: 100%;
  margin: 0 0 28px 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .trailer-embed iframe {
    height: 220px;
  }
}

/* ── TRAILER THUMBNAIL ───────────────────── */
.trailer-link {
  display: block;
  margin: 0 0 28px 0;
  text-decoration: none;
}

.trailer-thumbnail {
  position: relative;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  cursor: pointer;
}

.trailer-thumbnail img {
  width: 100%;
  display: block;
}

.trailer-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: rgba(107, 66, 38, 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: white;
  transition: background 0.2s, transform 0.2s;
}

.trailer-link:hover .trailer-play {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.1);
}

a.intro-section-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ── BOOK GUIDE SECTIONS (translators, themes, characters, scholarly debate) ─── */
.about-translators,
.book-themes,
.book-characters {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.about-translators h2,
.book-themes h2,
.book-characters h2,
.scholarly-debate h2,
.other-sources h2,
.decision-guide h2,
.faq-section > h2,
.faq-item h3,
h2.translation-summary {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  color: var(--text);
  text-transform: none;
  border-bottom: none;
  padding-bottom: 0;
}

.about-translators p,
.book-themes p,
.book-characters p,
.other-sources p,
.other-sources li,
.scholarly-debate p,
.scholarly-debate li,
.decision-guide li {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
  color: var(--text);
  margin-top: 0;
}

/* ── SCHOLARLY DEBATE + OTHER SOURCES SECTIONS ─── */
.scholarly-debate,
.other-sources {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

h2.translation-summary {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

h2.translation-summary + p,
.faq-item p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.faq-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}




.other-sources ul,
.scholarly-debate ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.scholarly-refs {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.scholarly-refs h3 {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.scholarly-refs p {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

/* ── FURTHER READING / INTERNAL LINK BLOCKS ─── */
.further-reading {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  background: rgba(176, 141, 87, 0.08);
}

.further-reading h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.further-reading p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.35rem;
}

.further-reading a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.further-reading a:hover {
  color: var(--gold);
}

/* ── Translation guide components ─────────────────────────────── */

.quick-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}
.quick-pick {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--color-surface, #f8f5ec);
  border: 1px solid var(--color-border, #d6cdb8);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}
.qp-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  font-weight: 600;
}
.qp-value {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}
.decision-guide {
  background: var(--color-surface, #f8f5ec);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}
.decision-guide h2 {
  margin-top: 0;
}
.decision-guide ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
.decision-guide li {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}
.comparison-table {
  margin: 0 0 2rem;
  overflow-x: auto;
}
.comparison-table h2 {
  margin-bottom: 0.75rem;
  font-weight: 400;
}
.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.comparison-table th,
.comparison-table td {
  border: 1px solid var(--color-border, #d6cdb8);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.comparison-table th {
  background: var(--color-surface, #f8f5ec);
  font-weight: 600;
}
.comparison-table tr:hover td {
  background: var(--color-surface, #f8f5ec);
}
.comparison-table tr.table-highlight td {
  background: #fbf3de;
  font-weight: 500;
}
.book-specs {
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
.book-specs li {
  margin-bottom: 0.25rem;
}
.faq-section {
  margin: 2.5rem 0;
}
.faq-item {
  margin-bottom: 0.75rem;
}
.faq-item h3 {
  margin: 0 0 0.25rem;
  padding-left: 1.1rem;
  position: relative;
}
.faq-item h3::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.faq-item p {
  margin: 0 0 0 1.1rem;
}
.eeat-note {
  font-size: 0.825rem;
  color: var(--muted);
  border-top: 1px solid var(--color-border, #d6cdb8);
  padding-top: 1rem;
  margin-top: 2rem;
}
.audiobook-section {
  background: #e5e6da;
  border-left: 3px solid var(--gold);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: 1.25rem;
  align-items: center;
}
.audiobook-cover {
  width: 80px;
  border-radius: 3px;
  display: block;
}
.audiobook-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.audiobook-label {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-weight: 700;
}
.audiobook-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.audiobook-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 600px) {
  .comparison-table table { font-size: 0.8rem; }
  .comparison-table th,
  .comparison-table td { padding: 0.4rem 0.5rem; }
  .quick-picks { grid-template-columns: 1fr 1fr; }
}

/* ── READ THE TEXT ───────────────────────── */
.text-book-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.text-book-card {
  display: block;
  padding: 1rem 1.25rem;
  background: #ece6d6;
  border-left: 4px solid var(--accent);
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  color: inherit;
  transition: border-left-color 0.2s;
}
.text-book-card:hover { border-left-color: var(--gold); }
.text-book-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.text-book-card .book-roman {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9rem;
}
.text-book-card .book-meta {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.text-book-card .book-blurb {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

.text-passage {
  margin: 0 0 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}
.text-passage:has(.notes-toggle) {
  padding-bottom: 0.25rem;
}
.text-passage:last-child { border-bottom: none; }
.citation-num {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-right: 0.5rem;
}
a.permalink {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  margin-right: 0.5rem;
}
a.permalink:hover { color: var(--gold); }
.text-passage p { font-size: 1.08rem; line-height: 1.85; margin: 0; }

.footnote-marker a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75em;
}
.footnote-marker a:hover { color: var(--gold); }
/* Two notes on one word ("Carnuntum.³⁰ ³¹") would otherwise run together as "3031". */
.footnote-marker + .footnote-marker::before { content: ","; }

.text-footnotes {
  margin: 0.85rem 0 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}
.text-footnotes li {
  margin-bottom: 0.4rem;
  padding-left: 0;
  text-indent: 0;
}
.text-footnotes .fn-num {
  color: var(--accent);
  font-weight: 400;
  margin-right: 0.3rem;
}
.text-footnotes li:target,
.text-passage p:target {
  background: rgba(176, 141, 87, 0.14);
}
.notes-toggle {
  display: block;
  margin-top: 0.5rem;
  margin-left: auto;
  margin-bottom: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.notes-toggle:hover { color: var(--gold); }
.notes-toggle .toggle-arrow {
  display: inline-block;
  margin-left: 0.3rem;
  transition: transform 0.2s ease;
}
.notes-toggle[aria-expanded="true"] .toggle-arrow {
  transform: rotate(90deg);
}
.notes-accordion {
  overflow: hidden;
  margin-top: 0.85rem;
}

.text-footnotes .fn-note {
  margin: 0.5rem 0 0;
  text-indent: 0;
  color: #2c5f8a;
  font-size: 0.95rem;
  line-height: 1.6;
}

.section-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.section-nav a { color: var(--accent); text-decoration: none; }
.section-nav a:hover { color: var(--gold); }
.section-nav .spacer { flex: 1; }

@media (max-width: 600px) {
  .section-nav { font-size: 0.65rem; gap: 0.5rem; }
  .section-nav .spacer { flex-basis: 100%; height: 0; }
}

/* ── FULL-TEXT / PDF SOURCE PAGE ─────────── */
/* The reference pages' "see also" boxes link to web pages, which mean
   nothing in print — hide them in the PDF, keep them on the site. */
.full-text-page .further-reading { display: none; }
/* Section numbers hang in a margin column, set larger than footnote
   numbers; Haines's footnotes align with the passage text. */
.full-text-page .text-passage > p {
  padding-left: 3.2rem;
  text-indent: -3.2rem;
}
.full-text-page .text-passage > p .citation-num {
  display: inline-block;
  width: 3.2rem;
  text-indent: 0;
  font-size: 0.88rem;
  margin-right: 0;
}
.full-text-page .text-footnotes { margin-left: 3.2rem; }
/* Haines's later paragraphs within a section start with a first-line
   indent, as in the 1916 printing (web and PDF). */
.text-passage p.passage-cont,
.full-text-page .text-passage > p.passage-cont { text-indent: 1.5em; }
/* Purpose-built for /full-text/ — not reusing the legacy .section print
   rules above, which assume odyssey's old single-page-app tab layout. */
.pdf-title-page {
  text-align: center;
  padding: 70px 20px 50px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 40px;
}
.pdf-title-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.pdf-title-main {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.pdf-title-author {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 8px;
}
.pdf-title-sub {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 24px;
}
.pdf-title-imprint {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.8;
}

.pdf-book {
  margin-bottom: 50px;
}
.pdf-book-heading {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  margin: 0 0 30px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gold);
}

.pdf-part-divider {
  text-align: center;
  padding: 50px 20px 30px;
  margin-bottom: 20px;
}
.pdf-part-divider .pdf-book-heading {
  border-bottom: none;
  margin-bottom: 8px;
  padding-bottom: 0;
}
.pdf-part-note {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
}

@media print {
  /* Title page: the existing text, framed by a burgundy double rule that
     fills the printable area of the first page (11in less the 0.85in top
     and bottom margins, with a little slack). */
  .full-text-page .pdf-title-page {
    /* No page-break-after: the next section already starts a new page,
       and both breaks together left a blank page 2. */
    box-sizing: border-box;
    height: 8.55in; /* 9.3in printable, less the layout's ~0.55in top padding */
    margin: 0;
    padding: 0 0.5in;
    border: 3px solid #7b1e2b;
    outline: 1px solid #7b1e2b;
    outline-offset: -9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .full-text-page .pdf-book {
    page-break-before: always;
  }
  .full-text-page .pdf-book:first-of-type {
    page-break-before: avoid;
  }
  .full-text-page .pdf-part-divider {
    page-break-before: always;
  }
  /* Group headings (e.g. on Names in the Text) flow on with the page
     rather than forcing a new one, which left pages half empty; they are
     kept with the entries that follow. */
  .full-text-page .ref-group-heading {
    page-break-after: avoid;
  }
  /* Let long passages and footnote lists flow across pages; keep each
     footnote (with its commentary) whole, and avoid single stranded lines.
     (Tying the list to its passage split passages to follow their notes.) */
  .full-text-page .text-passage p { orphans: 3; widows: 3; }
  .full-text-page .text-footnotes li { break-inside: avoid; }
}

/* ── ORIGINAL BACK MATTER (Speeches, Sayings, Note on Christians, ── */
/* ── the two Indexes, Glossary of Greek Terms) ────────────────── */
.bm-para {
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 1.1em;
}
.bm-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.1em;
}
.bm-list li {
  padding-left: 1.75rem;
  text-indent: -1.75rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
}
.bm-numeral {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  font-style: normal;
  letter-spacing: 0.02em;
}
.bm-signature {
  display: block;
  text-align: right;
  font-style: italic;
  margin-top: 0.5em;
}
.wst-lang-grc {
  font-style: italic;
  color: var(--text);
}