@font-face { font-family: 'EB Garamond'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/eb-garamond-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/eb-garamond-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/eb-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'UnifrakturMaguntia'; font-weight: 400; font-display: block; src: url(../fonts/unifrakturmaguntia-latin-400-normal.woff2) format('woff2'); }

:root {
  --azurite: #1f4560; --azurite-deep: #163447; --cream: #f2e8d3; --gold: #c9a24e;
  --rubric: #b0452f; --ink: #2a2118; --muted: #8a7a62; --rail: 0px;
  --sans: Inter, system-ui, sans-serif; --serif: 'EB Garamond', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--azurite); color: var(--cream); font-family: var(--serif); -webkit-text-size-adjust: 100%; }
.page-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- layout: plate as hero, card beside it, optional index ---------- */
.app {
  display: grid; height: 100dvh;
  grid-template-columns: var(--rail) minmax(0, 1fr) minmax(320px, 36%);
  grid-template-rows: auto minmax(0, 1fr);
  transition: grid-template-columns 0.3s ease;
  overflow-x: clip; /* the card slides off to the right when nothing is selected */
}
.app[data-index-open="true"] { --rail: 210px; }
.top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 16px 24px; }
.spacer { flex: 1; }
.wordmark { font-family: var(--serif); font-variant: small-caps; letter-spacing: 0.18em; font-size: 20px; color: var(--gold); white-space: nowrap; }
.icon-btn {
  min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.22); color: var(--cream); font: 500 14px var(--sans);
}
.icon-btn:hover { background: rgba(0, 0, 0, 0.32); }
.icon-btn[aria-pressed="true"] { background: var(--cream); color: var(--azurite-deep); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.rail { grid-column: 1; grid-row: 2; overflow: hidden auto; padding: 4px 0 24px 16px; }
.app[data-index-open="false"] .rail { visibility: hidden; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail .group { font: 600 10px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8aa1a9; margin: 14px 0 3px 10px; }
.rail button {
  width: 100%; display: flex; gap: 10px; align-items: baseline; padding: 5px 10px; border: 0; border-radius: 6px;
  background: none; cursor: pointer; text-align: left; font-size: 17px; color: #d9dfe0; white-space: nowrap;
}
.rail button .n { font: 500 11px var(--sans); color: #8fa5ad; width: 16px; text-align: right; flex: none; }
.rail button:hover { background: rgba(242, 232, 211, 0.07); }
.rail button[aria-current="true"] { background: rgba(242, 232, 211, 0.13); color: var(--cream); }
.rail button[aria-current="true"] .n { color: var(--gold); }
.app .rail li.child button { padding-left: 28px; font-size: 13.5px; } /* the Moon, under Earth */
.scrim { display: none; }

.stage { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; padding: 0 12px 12px; }
.plate-wrap { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
/* Three stacked SVG layers (see src/plate.js). Each gets its own compositor layer, so
   changing the selection overlay never re-rasterizes the painted plate's filters, and
   the zoom is a GPU transform: scaled up 720/640 normally, so the plate fills the box,
   and at 1 when zoomed out to show the two heavens beyond the stars. */
.plate-stack { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
.plate-zoom { position: absolute; inset: 0; transform: scale(1.125); transition: transform 0.6s ease-in-out; will-change: transform; }
.plate-stack[data-zoomed="true"] .plate-zoom { transform: none; }
.plate-zoom svg { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
#plate, #plate-beyond { pointer-events: none; }
#plate-sel { cursor: pointer; }
#plate-beyond { opacity: 0; transition: opacity 0.6s ease-in-out; }
.plate-stack[data-zoomed="true"] #plate-beyond { opacity: 1; }
.stepper { display: flex; justify-content: center; align-items: center; gap: 14px; padding-top: 8px; font: 500 13px var(--sans); color: #cfd8dc; }

/* ---------- the reading card ---------- */
.card {
  grid-column: 3; grid-row: 2; align-self: start; margin: 4% 24px 24px 0; max-height: calc(100% - 4% - 24px); overflow: auto;
  background: var(--cream); color: var(--ink); border-radius: 14px; padding: 22px 26px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.card { transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s; }
.app[data-selected="false"] .card { transform: translateX(calc(100% + 48px)); opacity: 0; visibility: hidden; pointer-events: none; }
.card .kicker { font: 600 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubric); }
.card h1 { margin: 2px 0 0; font-weight: 500; font-size: 40px; line-height: 1.05; }
.card .alt { font-style: italic; color: #7a6a55; font-size: 18px; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 4px; font-size: 17px; }
.card dt { font: 600 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 5px; }
.card dd { margin: 0; }
.card p { font-size: 18px; line-height: 1.45; margin: 12px 0 0; }
.card .card-foot { margin-top: 16px; font: 500 12px var(--sans); }
.card .card-foot a { color: var(--rubric); }

/* ---------- phones: plate on top, card below, index as a drawer ---------- */
@media (max-width: 760px) {
  .app { display: block; height: auto; }
  .top { position: sticky; top: 0; z-index: 3; padding: 10px 14px; background: rgba(22, 52, 71, 0.92); backdrop-filter: blur(6px); }
  .top { gap: 8px; }
  .wordmark { font-size: 16px; letter-spacing: 0.1em; }
  .stage { padding: 8px 10px 0; }
  .plate-wrap { display: block; container-type: normal; }
  .plate-stack { width: 100%; }
  .card { margin: 14px 12px 28px; max-height: none; }
  .app[data-selected="false"] .card { display: none; }
  .rail {
    position: fixed; z-index: 5; top: 0; bottom: 0; left: 0; width: 260px; padding: 18px 8px 24px 12px;
    background: var(--azurite-deep); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    transform: translateX(-100%); transition: transform 0.25s ease; visibility: visible !important;
  }
  .app[data-drawer-open="true"] .rail { transform: none; }
  .app[data-drawer-open="true"] .scrim { display: block; position: fixed; inset: 0; z-index: 4; background: rgba(0, 0, 0, 0.45); }
}
/* ---------- the Medieval | Modern switch ---------- */
.seg { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); font: 500 13px var(--sans); }
.seg button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: #cfd8dc; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--cream); }
.seg button[aria-checked="true"] { background: var(--cream); color: var(--azurite-deep); cursor: default; }

/* ---------- the modern view: dark space, Inter, a dark-glass card ---------- */
.modern-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.map { position: relative; flex: 1; min-height: 0; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.map-top { position: absolute; top: 4px; left: 4px; right: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.map-note {
  position: absolute; top: 46px; left: 4px; display: flex; gap: 8px; align-items: flex-start; max-width: 340px; padding: 10px 12px; border-radius: 12px;
  background: rgba(20, 26, 42, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08); font: 12.5px/1.45 var(--sans); color: #aeb7c9;
}
.map-note p { margin: 0; }
.map-note b { display: block; margin-bottom: 2px; font-weight: 600; color: #e7ebf3; }
.map-note button { flex: none; padding: 0 2px; border: 0; background: none; color: #7f8aa3; cursor: pointer; font-size: 13px; }
.map-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 8px; font: 500 13px var(--sans); }
.map-bar .time, .map-bar .zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.map-bar .when { min-width: 13ch; font-variant-numeric: tabular-nums; color: #aeb7c9; white-space: nowrap; }
#zoomText { min-width: 34px; text-align: center; font: 500 12px var(--sans); font-variant-numeric: tabular-nums; color: #cfd5e2; }
/* #modern before main.js runs (index.html's head script): no flash of the plate. */
html[data-view="modern"] #medieval { display: none; }

html[data-view="modern"] body { background: #05070c; color: #e7ebf3; }
html[data-view="modern"] .page-bg { display: none; }
.app[data-view="modern"] .wordmark { color: #d8c08a; }
.app[data-view="modern"] .icon-btn, .app[data-view="modern"] .seg { background: rgba(255, 255, 255, 0.08); color: #e7ebf3; }
.app[data-view="modern"] .icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.app[data-view="modern"] .icon-btn[aria-pressed="true"], .app[data-view="modern"] .seg button[aria-checked="true"] { background: #e7ebf3; color: #0b1020; }
.app[data-view="modern"] .seg button { color: #aeb7c9; }
.app[data-view="modern"] .seg button[aria-checked="true"] { color: #0b1020; }
.app[data-view="modern"] :focus-visible { outline-color: #9db8ff; }
.app[data-view="modern"] .stepper { color: #aeb7c9; }
.app[data-view="modern"] .rail { font-family: var(--sans); }
.app[data-view="modern"] .rail .group { color: #7f8aa3; }
.app[data-view="modern"] .rail button { font: 400 15px var(--sans); color: #cfd5e2; }
.app[data-view="modern"] .rail button .n { color: #7f8aa3; }
.app[data-view="modern"] .rail button:hover { background: rgba(255, 255, 255, 0.07); }
.app[data-view="modern"] .rail button[aria-current="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; }
.app[data-view="modern"] .rail button[aria-current="true"] .n { color: #e0805a; }
.app[data-view="modern"] .card {
  background: rgba(20, 26, 42, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08); color: #cfd5e2; font-family: var(--sans);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.app[data-view="modern"] .card .kicker { color: #e0805a; }
.app[data-view="modern"] .card h1 { font: 600 38px/1.1 var(--sans); letter-spacing: -0.01em; color: #e7ebf3; }
.app[data-view="modern"] .card .alt { font: 400 14px var(--sans); color: #8f9ab0; margin-top: 2px; }
.app[data-view="modern"] .card dl { font-size: 14px; }
.app[data-view="modern"] .card dt { color: #7f8aa3; padding-top: 2px; }
.app[data-view="modern"] .card p { font-size: 14.5px; line-height: 1.55; color: #cfd5e2; }
.app[data-view="modern"] .card .card-foot a { color: #e0805a; }
.app[data-view="modern"] .card .globe { position: relative; width: 200px; height: 200px; margin: 0 auto 12px; }
.app[data-view="modern"] .card .globe canvas { display: block; width: 200px; height: 200px; }
.app[data-view="modern"] .card .globe-credit { position: absolute; right: -6px; bottom: 0; }
.app[data-view="modern"] .card .gauge { margin: 14px 0 4px; font: 500 11px var(--sans); color: #7f8aa3; }
.gauge-bar { position: relative; height: 8px; margin: 0 5px; border-radius: 4px; background: linear-gradient(90deg, #2e3a58, #7aa2ff); }
.gauge-mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #e7ebf3; box-shadow: 0 0 0 2px #0b1020; }
.gauge-ends { display: flex; justify-content: space-between; margin-top: 5px; letter-spacing: 0.08em; text-transform: uppercase; }
.app[data-view="modern"] .card .gauge-note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: #cfd5e2; }
.app[data-view="modern"] .ref { background: rgba(255, 255, 255, 0.1); color: #e0805a; }
.app[data-view="modern"] .ref:hover { background: rgba(255, 255, 255, 0.18); }
@media (max-width: 760px) {
  .seg { font-size: 12px; }
  .seg button { padding: 5px 10px; }
  .app[data-view="modern"] .top { background: rgba(5, 7, 12, 0.92); }
  .app[data-view="modern"] .rail { background: #0b1020; }
  .map { aspect-ratio: 1; flex: none; }
  .map-note { position: static; max-width: none; margin-top: 8px; padding: 8px 10px; font-size: 11.5px; } /* below the map, not over it */
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- citations ---------- */
.ref {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px;
  border: 0; border-radius: 9px; background: #e2d2b2; color: var(--rubric); font: 600 10px var(--sans); vertical-align: 2px; cursor: pointer;
}
.ref:hover { background: #d8c49c; }
.cite-pop {
  position: absolute; z-index: 10; padding: 12px 14px; border-radius: 10px; background: #fffaf0; color: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font: 15px/1.4 var(--serif);
}
.cite-pop .num { font: 600 11px var(--sans); color: var(--rubric); }
.cite-pop .edition, .sources .edition { display: block; margin-top: 4px; font: 12px/1.4 var(--sans); color: var(--muted); }
.cite-pop a, .sources a { color: var(--rubric); }

/* ---------- sources page ---------- */
.sources-page { min-height: 100%; }
.sources-page .top { position: static; background: none; }
.sources-page a.wordmark { text-decoration: none; }
.sources { max-width: 720px; margin: 0 auto 48px; padding: 24px 28px 32px; background: var(--cream); color: var(--ink); border-radius: 14px; }
.sources h1 { margin: 0; font-weight: 500; font-size: 36px; }
.sources .lede { font-size: 18px; line-height: 1.45; }
.sources ol { padding-left: 28px; font-size: 17px; line-height: 1.45; }
.sources li { margin: 0 0 14px; }
.sources .where { display: block; font: 12px var(--sans); color: var(--muted); }
@media (max-width: 760px) { .sources { margin: 0 10px 28px; padding: 18px 18px 24px; } }