/* rulers.ofancientegypt.org — PAINTED REGISTER.
 *
 * The page is a painted temple wall. Figures stand in sunk-relief panels of
 * plastered limestone, ranged in registers; each royal name is enclosed in a
 * cartouche. Stone is cut, not rounded: square panel edges, recessed relief
 * (inset shadow, never a floating drop shadow), hairline gold rules, wide quiet
 * margins. The only curve is the rope-ring of a cartouche.
 *
 * Ten period pigments (Nile silt → red ochre → limestone gold → faience green →
 * Egyptian blue → bronze → schist green → Tyrian purple) come from the Egyptian
 * painter's mineral palette. Each element carrying [data-period] resolves its
 * pigment into --pig; pigment appears in lintels, register rules, cartouche
 * rings and tags — never as a card border-stripe.
 *
 * Plain CSS, no build. OKLCH throughout; neutrals tinted to one warm plaster hue.
 */

:root {
  color-scheme: light;

  /* limestone plaster — neutrals tinted toward one warm stone hue (~80) */
  --plaster:   oklch(0.912 0.018 80);
  --plaster-2: oklch(0.876 0.022 78);   /* recessed panel ground */
  --paper:     oklch(0.952 0.014 82);   /* cartouche / surfaces */
  --ink:       oklch(0.275 0.020 55);   /* warm carbon, never pure black */
  --ink-soft:  oklch(0.430 0.022 52);
  --ink-faint: oklch(0.560 0.020 58);
  --line:      oklch(0.838 0.022 74);
  --line-2:    oklch(0.778 0.026 70);

  --gilt:      oklch(0.730 0.110 85);   /* gold leaf */
  --gilt-deep: oklch(0.580 0.100 78);
  --gilt-soft: oklch(0.852 0.060 86);

  /* the Egyptian painter's mineral palette — one pigment per period */
  --p-protodynastic:      oklch(0.400 0.045 60);   /* Nile silt / dark earth */
  --p-early-dynastic:     oklch(0.500 0.130 33);   /* red ochre */
  --p-old-kingdom:        oklch(0.605 0.105 72);   /* limestone gold-ochre */
  --p-first-intermediate: oklch(0.520 0.040 150);  /* faded grey-green */
  --p-middle-kingdom:     oklch(0.555 0.100 168);  /* malachite / faience */
  --p-second-intermediate:oklch(0.485 0.090 44);   /* Hyksos red-brown */
  --p-new-kingdom:        oklch(0.500 0.130 250);  /* Egyptian blue / lapis */
  --p-third-intermediate: oklch(0.520 0.080 64);   /* bronze / copper */
  --p-late:               oklch(0.460 0.075 156);  /* schist green */
  --p-hellenistic:        oklch(0.470 0.120 330);  /* Tyrian purple */

  --accent: var(--p-new-kingdom);       /* Egyptian blue is the house accent */
  --pig:    var(--accent);

  --serif:  "Spectral", Georgia, "Times New Roman", serif;
  --caps:   "Cormorant SC", "Cormorant Garamond", var(--serif);
  --caps-t: "Cormorant Garamond", var(--serif);

  /* 4pt spacing, semantic */
  --sp-2xs: 4px;  --sp-xs: 8px;  --sp-sm: 12px; --sp-md: 16px;
  --sp-lg: 24px;  --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px; --sp-4xl: 96px;

  --topbar-h: 64px;
  --ribbon-h: 34px;
  --margin-w: 300px;
  --maxread: 68ch;

  /* carved light: a faint highlight on the lower edge reads as relief */
  --incise:  0 1px 0 oklch(0.99 0.01 84 / 0.55);
  --recess:  inset 0 3px 8px oklch(0.30 0.02 56 / 0.22), inset 0 -1px 0 oklch(0.99 0.01 84 / 0.55);
  --hairline: oklch(0.80 0.05 82 / 0.7);
}

html[data-theme="dark"] {
  color-scheme: dark;
  /* lamplit tomb — deep, torch-warm, never glowing */
  --plaster:   oklch(0.215 0.018 50);
  --plaster-2: oklch(0.178 0.016 48);
  --paper:     oklch(0.262 0.018 52);
  --ink:       oklch(0.902 0.018 84);
  --ink-soft:  oklch(0.738 0.022 80);
  --ink-faint: oklch(0.592 0.020 74);
  --line:      oklch(0.330 0.018 56);
  --line-2:    oklch(0.420 0.022 58);

  --gilt:      oklch(0.800 0.110 86);
  --gilt-deep: oklch(0.700 0.100 82);
  --gilt-soft: oklch(0.520 0.075 82);

  --p-protodynastic:      oklch(0.620 0.060 62);
  --p-early-dynastic:     oklch(0.640 0.140 38);
  --p-old-kingdom:        oklch(0.745 0.110 76);
  --p-first-intermediate: oklch(0.660 0.050 150);
  --p-middle-kingdom:     oklch(0.700 0.110 168);
  --p-second-intermediate:oklch(0.640 0.100 46);
  --p-new-kingdom:        oklch(0.665 0.140 252);
  --p-third-intermediate: oklch(0.690 0.090 66);
  --p-late:               oklch(0.625 0.090 156);
  --p-hellenistic:        oklch(0.625 0.130 332);

  --incise:  0 1px 0 oklch(0 0 0 / 0.5);
  --recess:  inset 0 3px 9px oklch(0 0 0 / 0.55), inset 0 -1px 0 oklch(0.7 0.02 70 / 0.12);
  --hairline: oklch(0.55 0.06 82 / 0.45);
}

/* one rule maps each period to its pigment; everything else reads var(--pig) */
[data-period="protodynastic"]       { --pig: var(--p-protodynastic); }
[data-period="early-dynastic"]      { --pig: var(--p-early-dynastic); }
[data-period="old-kingdom"]         { --pig: var(--p-old-kingdom); }
[data-period="first-intermediate"]  { --pig: var(--p-first-intermediate); }
[data-period="middle-kingdom"]      { --pig: var(--p-middle-kingdom); }
[data-period="second-intermediate"] { --pig: var(--p-second-intermediate); }
[data-period="new-kingdom"]         { --pig: var(--p-new-kingdom); }
[data-period="third-intermediate"]  { --pig: var(--p-third-intermediate); }
[data-period="late"]                { --pig: var(--p-late); }
[data-period="hellenistic"]         { --pig: var(--p-hellenistic); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.58;
  color: var(--ink);
  background-color: var(--plaster);
  /* plaster grain: faint warm wash + low horizontal register lines */
  background-image:
    repeating-linear-gradient(0deg, oklch(0.30 0.02 58 / 0.022) 0 1px, transparent 1px 64px),
    radial-gradient(150% 60% at 75% -10%, oklch(0.78 0.06 82 / 0.10), transparent 60%),
    radial-gradient(120% 55% at 0% 120%, oklch(0.55 0.05 52 / 0.06), transparent 55%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
a { color: inherit; }
::selection { background: var(--gilt-soft); color: var(--ink); }
.incised { text-shadow: var(--incise); }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md);
  padding-inline: clamp(var(--sp-md), 3vw, var(--sp-2xl));
  background: var(--plaster);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--hairline);
}
.brand { display: flex; align-items: center; gap: var(--sp-sm); text-decoration: none; color: var(--ink); }
.brand-mark { width: 28px; height: 36px; flex: none; }
.brand-mark .bm-cart { fill: none; stroke: var(--gilt-deep); stroke-width: 1.6; }
.brand-mark .bm-knot { stroke: var(--gilt-deep); stroke-width: 1.6; stroke-linecap: round; }
.brand-mark .bm-ankh { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-text {
  font-family: var(--caps); font-size: 18px;
  letter-spacing: 0.16em; color: var(--ink);
  text-shadow: var(--incise);
}
.brand-text b { font-weight: 400; color: var(--accent); }

.topbar-right { display: flex; align-items: center; gap: var(--sp-sm); }
.search { display: flex; align-items: center; gap: var(--sp-xs);
  background: var(--paper); border: 1px solid var(--line-2); padding: 7px 14px;
  box-shadow: var(--recess); }
.search:focus-within { border-color: var(--gilt-deep); }
.search svg { width: 15px; height: 15px; stroke: var(--ink-faint); fill: none; stroke-width: 2; }
.search input { border: 0; background: transparent; outline: none; color: var(--ink);
  font-family: var(--serif); font-size: 15px; width: clamp(110px, 20vw, 200px); }

.theme-toggle { width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--paper); cursor: pointer; color: var(--ink);
  box-shadow: var(--incise); }
.theme-toggle:hover { border-color: var(--gilt-deep); color: var(--accent); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; fill: currentColor; stroke: none; }

/* ---------- Timeline frieze ---------- */
.ribbon { position: sticky; top: var(--topbar-h); z-index: 40;
  height: var(--ribbon-h); background: var(--plaster-2);
  border-bottom: 1px solid var(--line);
  padding-inline: clamp(var(--sp-md), 3vw, var(--sp-2xl));
  display: flex; align-items: center; box-shadow: inset 0 2px 4px oklch(0.3 0.02 58 / 0.08); }
.ribbon-track { position: relative; width: 100%; height: 14px; display: flex; cursor: pointer;
  border: 1px solid var(--line-2); }
.ribbon-band { height: 100%; position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--pig); overflow: hidden; transition: filter .15s; }
.ribbon-band .rb-label { font-family: var(--caps); font-size: 8px; letter-spacing: 0.14em;
  color: oklch(0.97 0.012 86); white-space: nowrap; text-transform: uppercase; opacity: 0.92; }
.ribbon-band:hover { filter: brightness(1.12); }
.ribbon-band.is-dim { filter: grayscale(0.7) brightness(1.12); opacity: 0.4; }
.ribbon-band + .ribbon-band { border-left: 1px solid oklch(0.99 0.01 84 / 0.35); }

/* ---------- Layout ---------- */
.margin { position: fixed; top: calc(var(--topbar-h) + var(--ribbon-h)); left: 0;
  width: var(--margin-w); height: calc(100vh - var(--topbar-h) - var(--ribbon-h));
  overflow-y: auto; padding: var(--sp-xl) var(--sp-lg) var(--sp-3xl);
  border-right: 1px solid var(--line); background: var(--plaster);
  display: flex; flex-direction: column; gap: var(--sp-lg); }
.stage { margin-left: var(--margin-w); padding: var(--sp-xl) clamp(var(--sp-md), 4vw, var(--sp-3xl)) var(--sp-4xl); }

.m-title { font-family: var(--caps); font-size: 15px; letter-spacing: 0.16em; margin: 0 0 var(--sp-xs);
  text-shadow: var(--incise); text-transform: uppercase; }
.m-lede { color: var(--ink-soft); font-size: 16px; margin: 0; max-width: 36ch; }
.m-lede b { color: var(--ink); font-weight: 600; }
.m-subtitle { font-family: var(--caps); font-size: 12px; letter-spacing: 0.18em; color: var(--ink-faint); margin: 0;
  text-transform: uppercase; }
.m-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-sm); }
.m-rule { border: 0; height: 1px; background: var(--line); margin: 0; box-shadow: 0 1px 0 var(--hairline); }
.link-btn { border: 0; background: none; color: var(--gilt-deep); cursor: pointer;
  font-family: var(--caps); font-size: 11px; letter-spacing: 0.14em; padding: 0; text-transform: uppercase; }
.link-btn:hover { color: var(--accent); }

/* period filters — a register, not a card list */
.period-list { display: flex; flex-direction: column; }
.period-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-2xs); cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--line); transition: color .12s; }
.period-row:last-child { border-bottom: 0; }
.period-row:hover { color: var(--pig); }
.period-row.is-off { opacity: 0.38; }
.period-tick { width: 14px; height: 14px; flex: none; position: relative; }
.period-tick::before { content: ""; position: absolute; inset: 2px; background: var(--pig); }
.period-name { font-family: var(--caps-t); font-size: 17px; letter-spacing: 0.01em; }
.period-count { color: var(--ink-faint); font-size: 13px; font-variant-numeric: tabular-nums; }

/* dynasty index — engraved table of contents, leader dots, NO side rule */
.dyn-list { display: flex; flex-direction: column; }
.dyn-link { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sp-xs);
  padding: 5px 0; font-size: 15px; color: var(--ink-soft); text-decoration: none; cursor: pointer; }
.dyn-link .dl-name { position: relative; overflow: hidden; white-space: nowrap; }
.dyn-link .dl-name::after { content: " · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ";
  position: absolute; color: var(--line-2); letter-spacing: 2px; }
.dyn-link .dl-name span { background: var(--plaster); padding-right: 6px; position: relative; }
.dyn-link:hover { color: var(--pig); }
.dyn-link .dl-count { color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; }

.m-hint { color: var(--ink-soft); font-size: 14px; display: flex; flex-direction: column; gap: var(--sp-sm); }
.legend-row { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.legend-mark { width: 20px; height: 20px; flex: none; margin-top: 1px; display: grid; place-items: center;
  border: 1px solid var(--gilt-deep); color: var(--gilt-deep); }
.legend-mark svg { width: 13px; height: 13px; }
.m-fineprint { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
.m-fineprint a, .m-hint a { color: var(--gilt-deep); text-underline-offset: 2px; }

/* ---------- Roster ---------- */
.period-group { margin-bottom: var(--sp-2xl); scroll-margin-top: calc(var(--topbar-h) + var(--ribbon-h) + 8px); }

/* a painted lintel band heading */
.lintel { margin: var(--sp-xl) 0 var(--sp-lg); padding: 9px var(--sp-md);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap;
  background: color-mix(in oklch, var(--pig) 12%, var(--paper));
  border-block: 2px solid var(--pig); }
.lintel h2 { font-family: var(--caps); font-size: clamp(20px, 3.2vw, 32px); letter-spacing: 0.08em;
  margin: 0; color: var(--pig); text-shadow: var(--incise); text-transform: uppercase; }
.lintel .lintel-meta { font-family: var(--caps-t); color: var(--ink-faint); font-size: 14px;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.dyn-group { scroll-margin-top: calc(var(--topbar-h) + var(--ribbon-h) + 8px); }
.dyn-head { display: flex; align-items: center; gap: var(--sp-md); margin: var(--sp-xl) 0 var(--sp-md); }
.dyn-head h3 { font-family: var(--caps); font-size: 14px; letter-spacing: 0.14em; margin: 0; color: var(--ink-soft);
  white-space: nowrap; text-transform: uppercase; }
.dyn-head .dh-line { flex: 1; height: 1px; background: var(--line); box-shadow: 0 1px 0 var(--hairline); }
.dyn-head .dh-num { font-family: var(--caps-t); font-size: 12px; color: var(--ink-faint); letter-spacing: .08em; }

/* the register: a row of figures on a painted groundline */
.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
  gap: var(--sp-xl) var(--sp-md);
  padding-bottom: var(--sp-md);
  border-bottom: 2px solid color-mix(in oklch, var(--pig) 55%, transparent); }

/* a portrait in a sunk-relief plaster panel above a cartouche */
.figure { display: flex; flex-direction: column; gap: var(--sp-sm); cursor: pointer;
  background: none; border: 0; padding: 0; text-align: left; color: inherit;
  animation: rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.figure-frame { position: relative; padding: 9px; background: var(--paper); border: 1px solid var(--line-2);
  box-shadow: var(--incise); }
.figure-portrait { position: relative; aspect-ratio: 4 / 5; background: var(--plaster-2) center 16%/cover no-repeat;
  background-image: var(--bust); box-shadow: var(--recess); filter: saturate(0.9) contrast(1.02); }
.figure-portrait.no-img { display: grid; place-items: center; font-family: var(--caps);
  font-size: 46px; color: var(--line-2); background: var(--plaster-2); text-shadow: var(--incise); }
.figure:hover .figure-portrait { filter: saturate(1.02) contrast(1.04); }
.figure:hover .figure-frame { border-color: var(--gilt-deep); }
.figure:focus-visible { outline: 2px solid var(--gilt-deep); outline-offset: 3px; }

.fig-mark { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px;
  display: grid; place-items: center; background: var(--paper); border: 1px solid var(--gilt-deep);
  color: var(--gilt-deep); }
.fig-mark svg { width: 14px; height: 14px; }

/* the cartouche: a rope-ring nameplate with a knot bar */
.cartouche { position: relative; align-self: center; max-width: 100%;
  padding: 4px 14px 4px 18px; background: var(--paper);
  border: 1.5px solid var(--gilt-deep); border-radius: 999px; box-shadow: var(--incise); }
.cartouche::before { content: ""; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 2.5px; height: 54%; background: var(--gilt-deep); border-radius: 2px; }
.cart-name { display: block; font-family: var(--caps-t); font-size: 16px; line-height: 1.15;
  letter-spacing: 0.02em; color: var(--ink); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fig-dates { display: block; text-align: center; font-size: 13px; color: var(--ink-faint); font-style: italic;
  font-variant-numeric: tabular-nums; }
.fig-gloss { display: block; font-size: 13px; color: var(--ink-soft); margin-top: var(--sp-2xs);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* lead figure — the frontispiece of a period: monumental, double-wide. The
   portrait spans the left column; cartouche, dates and gloss stack on the right. */
.figure--lead { grid-column: span 2; display: grid; gap: var(--sp-xs) var(--sp-md);
  grid-template-columns: 46% 1fr; grid-template-rows: auto auto 1fr; align-items: start; }
.figure--lead .figure-frame { grid-row: 1 / span 3; grid-column: 1; }
.figure--lead .figure-portrait { aspect-ratio: 3 / 4; }
.figure--lead .cartouche { grid-column: 2; align-self: start; justify-self: start; margin-top: var(--sp-2xs); }
.figure--lead .cart-name { font-size: 21px; }
.figure--lead .fig-dates { grid-column: 2; text-align: left; font-size: 15px; }
.figure--lead .fig-gloss { grid-column: 2; -webkit-line-clamp: 5; font-size: 15px; max-width: var(--maxread); margin-top: var(--sp-2xs); }
@media (max-width: 560px) {
  .figure--lead { grid-column: span 1; grid-template-columns: 1fr; grid-template-rows: none; }
  .figure--lead .figure-frame { grid-row: auto; grid-column: 1; }
  .figure--lead .cartouche, .figure--lead .fig-dates, .figure--lead .fig-gloss { grid-column: 1; }
}

/* ---------- Handoff slab (porphyry → Rome) ---------- */
.handoff { margin: var(--sp-3xl) 0 var(--sp-sm); padding: clamp(var(--sp-lg), 4vw, var(--sp-2xl));
  color: oklch(0.95 0.02 350); position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(122deg, oklch(0.32 0.06 350 / 0.5) 0 2px, transparent 2px 7px),
    linear-gradient(140deg, oklch(0.34 0.10 352), oklch(0.22 0.07 350));
  border: 1px solid oklch(0.5 0.1 350); }
.handoff h2 { font-family: var(--caps); font-size: clamp(20px, 3vw, 30px); letter-spacing: 0.06em; margin: 0 0 var(--sp-sm);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.35); text-transform: uppercase; }
.handoff p { max-width: 60ch; color: oklch(0.90 0.03 348); margin: 0 0 var(--sp-lg); font-size: 16px; }
.handoff-cta { display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--caps); font-size: 13px; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase;
  background: oklch(0.95 0.02 350); color: oklch(0.28 0.08 350); padding: 12px 22px; transition: transform .14s; }
.handoff-cta:hover { transform: translateX(4px); }

.empty-note { color: var(--ink-faint); padding: var(--sp-3xl) 0; text-align: center; font-style: italic; }

/* ---------- Detail: a wall stele ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: oklch(0.2 0.02 56 / 0.5);
  opacity: 0; transition: opacity .22s; pointer-events: none; }
.scrim.show { opacity: 1; pointer-events: auto; }
.detail { position: fixed; top: 0; right: 0; z-index: 70; width: min(540px, 95vw); height: 100vh;
  background: var(--plaster); border-left: 1px solid var(--line-2); box-shadow: -1px 0 0 var(--hairline);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); overflow-y: auto; }
.detail.open { transform: none; }
.detail-close { position: absolute; top: var(--sp-md); right: var(--sp-md); z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center; background: var(--paper);
  border: 1px solid var(--line-2); cursor: pointer; color: var(--ink); box-shadow: var(--incise); }
.detail-close:hover { border-color: var(--gilt-deep); color: var(--pig); }
.detail-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }

.d-hero { position: relative; background: var(--plaster-2); padding: var(--sp-lg) var(--sp-lg) 0; }
.d-portrait { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 14%;
  display: block; box-shadow: var(--recess); background: var(--plaster-2); }
.d-portrait.no-img { display: grid; place-items: center; font-family: var(--caps); font-size: 92px;
  color: var(--line-2); aspect-ratio: 16/10; text-shadow: var(--incise); }

.d-titleblock { padding: var(--sp-lg) var(--sp-lg) var(--sp-md); border-bottom: 2px solid var(--pig); }
.d-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-xs); font-family: var(--caps);
  font-size: 11px; letter-spacing: 0.16em; color: var(--pig); margin-bottom: var(--sp-sm); text-transform: uppercase; }
.d-eyebrow .d-cat { color: var(--ink-faint); }
.d-name { margin: 0; }
.d-name-cart { position: relative; display: inline-block; padding: 6px 22px 6px 26px;
  font-family: var(--caps); font-size: clamp(24px, 4.6vw, 34px); line-height: 1.05; letter-spacing: 0.04em;
  color: var(--ink); text-shadow: var(--incise); text-transform: uppercase;
  border: 2px solid var(--gilt-deep); border-radius: 999px; }
.d-name-cart::before { content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 56%; background: var(--gilt-deep); border-radius: 2px; }
.d-aka { color: var(--ink-faint); font-style: italic; font-size: 15px; margin: var(--sp-sm) 0 0; }
.d-throne { color: var(--ink-soft); font-size: 14px; margin: 4px 0 0; font-family: var(--caps-t);
  letter-spacing: 0.03em; }
.d-dates { color: var(--ink-soft); font-size: 16px; margin-top: var(--sp-xs); font-variant-numeric: tabular-nums; }

.d-section { padding: var(--sp-lg); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 var(--hairline); }
.d-section-label { font-family: var(--caps); font-size: 12px; letter-spacing: 0.16em; color: var(--ink-faint);
  margin: 0 0 var(--sp-sm); text-transform: uppercase; }
.d-bio { font-size: 16.5px; line-height: 1.64; max-width: var(--maxread); }
.d-bio p { margin: 0 0 var(--sp-sm); }

.d-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-xs) var(--sp-lg); font-size: 15.5px; }
.d-facts dt { font-family: var(--caps); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); padding-top: 4px;
  text-transform: uppercase; }
.d-facts dd { margin: 0; }
.d-facts a { color: var(--gilt-deep); text-underline-offset: 2px; }

.d-titles { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.d-chip { font-family: var(--caps-t); font-size: 13px; letter-spacing: 0.02em; padding: 3px 11px;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-soft); }

.succession { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
.succ-btn { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-sm) var(--sp-md); cursor: pointer;
  text-align: left; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--serif); transition: border-color .12s, transform .1s; box-shadow: var(--incise); }
.succ-btn:hover { border-color: var(--gilt-deep); transform: translateY(-1px); }
.succ-btn[disabled] { opacity: 0.4; cursor: default; }
.succ-btn .sb-dir { font-family: var(--caps); font-size: 10px; letter-spacing: 0.10em; color: var(--ink-faint);
  text-transform: uppercase; }
.succ-btn .sb-name { font-family: var(--caps-t); font-size: 15px; }
.succ-btn.next { text-align: right; align-items: flex-end; }

.d-actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.d-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--caps-t); font-size: 14px;
  padding: 8px 15px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2);
  transition: border-color .12s; }
.d-link:hover { border-color: var(--gilt-deep); color: var(--pig); }
.d-link svg { width: 13px; height: 13px; }

.speak-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); width: 100%;
  font-family: var(--caps); font-size: 15px; letter-spacing: 0.10em; padding: 14px var(--sp-md); text-transform: uppercase;
  cursor: pointer; color: oklch(0.97 0.01 85); border: 1px solid var(--pig); background: var(--pig);
  box-shadow: var(--incise), inset 0 1px 0 oklch(0.99 0.01 85 / 0.18); transition: transform .12s, filter .12s; }
.speak-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.speak-btn svg { width: 18px; height: 18px; }
.d-source-note { font-size: 12px; color: var(--ink-faint); margin-top: var(--sp-md); }
.d-source-note a { color: var(--ink-faint); }

/* ---------- Footer ---------- */
.footer { margin-left: var(--margin-w); padding: var(--sp-lg) clamp(var(--sp-md), 4vw, var(--sp-3xl));
  border-top: 1px solid var(--line); box-shadow: 0 -1px 0 var(--hairline);
  color: var(--ink-faint); font-size: 13px; display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; }
.footer a { color: var(--gilt-deep); }
.footer .heart { color: var(--p-early-dynastic); }
.footer-sep { color: var(--line-2); }

/* ---------- Avatar: the Oracle ---------- */
.chat-host { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--sp-md); }
.chat-scrim { position: absolute; inset: 0; background: oklch(0.16 0.02 56 / 0.66); }
.chat-panel { position: relative; z-index: 1; width: min(560px, 96vw); max-height: min(88vh, 780px);
  display: flex; flex-direction: column; background: var(--plaster); border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px var(--hairline), 0 24px 80px oklch(0.16 0.02 56 / 0.5); overflow: hidden; }
.chat-close { position: absolute; top: 12px; right: 14px; z-index: 3; width: 32px; height: 32px; border: 0;
  background: transparent; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.chat-close:hover { color: var(--pig); }
.chat-head { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-lg);
  background: var(--plaster-2); border-bottom: 2px solid var(--pig); }
.chat-avatar { width: 56px; height: 56px; flex: none; background: var(--plaster) center 14%/cover; color: var(--ink-faint);
  display: grid; place-items: center; font-family: var(--caps); font-size: 24px; box-shadow: var(--recess); }
.chat-name { font-family: var(--caps); font-size: 21px; letter-spacing: 0.05em; text-shadow: var(--incise); text-transform: uppercase; }
.chat-sub { font-size: 13px; color: var(--ink-faint); font-style: italic; }
.chat-log { flex: 1; overflow-y: auto; padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); min-height: 130px; }
.chat-msg { max-width: 84%; padding: 10px 15px; font-size: 16px; line-height: 1.5; }
.chat-msg.them { align-self: flex-start; background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--incise); }
.chat-msg.you { align-self: flex-end; color: oklch(0.97 0.01 85); background: var(--pig); }
.chat-grounding { border-top: 1px solid var(--line); padding: var(--sp-sm) var(--sp-lg); font-size: 13px; color: var(--ink-soft); }
.chat-grounding summary { cursor: pointer; font-family: var(--caps); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); text-transform: uppercase; }
.chat-grounding-note { margin: var(--sp-sm) 0 var(--sp-xs); }
.chat-grounding pre { max-height: 200px; overflow: auto; background: var(--plaster-2); border: 1px solid var(--line);
  padding: var(--sp-sm); font-size: 12px; white-space: pre-wrap; color: var(--ink-soft); box-shadow: var(--recess); }
.chat-form { display: flex; gap: var(--sp-xs); padding: var(--sp-md) var(--sp-lg); border-top: 1px solid var(--line); }
.chat-form input { flex: 1; border: 1px solid var(--line-2); padding: 11px 15px; font-family: var(--serif); font-size: 15px;
  background: var(--paper); color: var(--ink); outline: none; box-shadow: var(--recess); }
.chat-form input:focus { border-color: var(--gilt-deep); }
.chat-form button { width: 46px; flex: none; border: 1px solid var(--pig); cursor: pointer;
  color: oklch(0.97 0.01 85); background: var(--pig); }
.chat-form button svg { width: 19px; height: 19px; }
.chat-foot { padding: 0 var(--sp-lg) var(--sp-md); font-size: 12px; color: var(--ink-faint); }
.chat-foot a { color: var(--gilt-deep); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  :root { --margin-w: 0px; }
  .margin { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--line);
    flex-direction: column; }
  .stage, .footer { margin-left: 0; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .figures { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-lg) var(--sp-sm); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}