/* THE DIVINE ARCHIVES — Vault relics: the carved tablet and the unrolling scroll */
/* self-hosted hieroglyph font (SIL OFL 1.1, Noto Project), so cartouches never render blank if Google Fonts is unreachable */
@font-face { font-family: "Vault Hieroglyphs"; src: url("../vendor/fonts/NotoSansEgyptianHieroglyphs.woff2") format("woff2"); font-display: swap; unicode-range: U+13000-1343F; }


.relic { margin: 2.2rem 0 2.6rem; }
.relic-scroll, .relic-linen { position: relative; left: 50%; transform: translateX(-50%); width: min(72rem, calc(100vw - 2rem)); }
.relic-title { text-align: center; margin-bottom: .3rem; }
.relic .relic-sub, .article .relic-sub { text-align: center; margin-left: auto !important; margin-right: auto !important; color: var(--ink-dim); font-size: .95rem; margin: 0 auto 1rem; max-width: var(--measure); }
.relic.is-live > blockquote, .relic.is-live > .relic-static { display: none; }
.relic-ctrls { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .6rem 0 1rem; }
.relic-ctrls button {
  font: inherit; font-size: .88rem; color: var(--parchment); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 3px; padding: .35rem .8rem; cursor: pointer;
}
.relic-ctrls button:hover, .relic-ctrls button:focus-visible { border-color: var(--gold); color: var(--gold-bright); }
.relic-ctrls button[aria-pressed="true"] { background: var(--ember-deep); border-color: var(--gold); }
.relic-hint { text-align: center; font-size: .85rem; color: var(--ink-faint); font-style: italic; margin-top: .8rem; }

/* ---------------------------------------------------------------- tablet */
.tablet-stage { perspective: 1400px; display: flex; justify-content: center; padding: .5rem 0 1rem; }
.tablet {
  --mx: 30%; --my: 20%;
  position: relative; width: min(42rem, 100%); padding: 3.2rem 2.6rem 3rem;
  transform-style: preserve-3d; transition: transform .35s ease-out;
  clip-path: polygon(5% 0, 95% 0, 100% 4%, 100% 96%, 95% 100%, 5% 100%, 0 96%, 0 4%);
  background:
    radial-gradient(ellipse 60% 40% at 25% 15%, rgba(150,255,200,.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 85%, rgba(0,0,0,.45), transparent 70%),
    repeating-linear-gradient(118deg, rgba(120,230,170,.05) 0 3px, transparent 3px 22px, rgba(0,0,0,.06) 22px 24px, transparent 24px 57px),
    linear-gradient(140deg, #0a3a28 0%, #177049 30%, #0f5539 52%, #0b4430 70%, #052117 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.tablet::before { /* bevelled inner border, cut into the stone */
  content: ""; position: absolute; inset: 14px;
  clip-path: polygon(4.6% 0, 95.4% 0, 100% 3.6%, 100% 96.4%, 95.4% 100%, 4.6% 100%, 0 96.4%, 0 3.6%);
  box-shadow: inset 0 0 0 1px rgba(170,255,210,.22), inset 0 2px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(170,255,210,.12);
  pointer-events: none;
}
.tablet::after { /* crystalline grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tablet-shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 2;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(215,255,232,.30), rgba(120,255,180,.08) 22%, transparent 45%);
  transition: background .1s linear;
}
.tablet-face { position: relative; z-index: 1; }
.t-line {
  display: block; width: 100%; background: none; border: 0; cursor: pointer; text-align: center;
  padding: .45rem .2rem .5rem; margin: 0; color: inherit; font: inherit;
  border-bottom: 1px solid rgba(0,0,0,.28); box-shadow: 0 1px 0 rgba(150,255,200,.07);
}
.t-line:last-child { border-bottom: 0; box-shadow: none; }
.t-line:focus-visible { outline: 1px solid rgba(190,255,220,.6); outline-offset: 2px; }
.t-la {
  display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .07em;
  font-size: clamp(.8rem, 1.6vw, 1.05rem); line-height: 1.75; color: #02160d; font-weight: 600;
  text-shadow: 0 1px 0 rgba(190,255,220,.5), 0 -1px 0 rgba(0,0,0,.7); /* incised */
  transition: color .3s, text-shadow .3s;
}
.t-line:hover .t-la, .t-line[aria-expanded="true"] .t-la {
  color: #0b3f29; text-shadow: 0 1px 0 rgba(170,255,210,.4), 0 -1px 0 rgba(0,0,0,.6), 0 0 14px rgba(120,255,180,.45);
}
.t-en {
  display: block; max-height: 0; overflow: hidden; opacity: 0;
  font-family: var(--font-body); font-style: italic; font-size: clamp(.92rem, 1.6vw, 1.05rem);
  color: #d6f5e3; text-shadow: 0 0 10px rgba(110,255,170,.45);
  transition: max-height .6s ease, opacity .6s ease, margin .6s ease;
}
.t-line[aria-expanded="true"] .t-en { max-height: 8em; opacity: 1; margin-top: .25rem; }
.tablet[data-mode="en"] .t-la { display: none; }
.tablet[data-mode="en"] .t-en {
  max-height: none; opacity: 1; font-style: normal; font-family: var(--font-display); letter-spacing: .03em;
  color: #062a1b; text-shadow: 0 1px 0 rgba(170,255,210,.34), 0 -1px 0 rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- scroll */
/* Antique and weathered: stained, foxed, deckle-torn parchment in iron-gall ink.
   Mystic: a slow aura, drifting motes and a spill of light as it unrolls, with
   letters that ink themselves in and glow when touched. All light is decorative
   (aria-hidden) and is switched off for prefers-reduced-motion. */
.scroll {
  --aura: rgba(231,190,110,.30); --aura-2: rgba(150,110,210,.14);
  --mote: #ffe2a0; --mote-glow: rgba(255,205,120,.75);
  --roll-lo: #4a2e12; --roll-mid: #a8824c; --roll-hi: #ead7ad; --roll-edge-a: #d9bb85; --roll-edge-b: #7d5a2c;
  --spill: rgba(255,236,185,.85);
  --deckle-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14L0 6L8 6L14 2L21 5L25 4L29 7L36 5L43 3L51 5L55 5L62 6L67 8L72 3L77 9L82 4L86 2L91 5L96 4L102 7L107 5L112 5L120 6L120 14Z'/%3E%3C/svg%3E");
  --deckle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='14' viewBox='0 0 150 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 8L6 12L12 6L17 10L23 11L29 8L37 12L45 7L49 8L55 8L62 7L67 5L74 10L78 8L82 7L89 12L97 6L103 6L111 12L118 12L123 9L127 9L134 7L142 7L150 8L150 0Z'/%3E%3C/svg%3E");
  margin: .4rem auto 0; position: relative;
}
.scroll-body { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(24rem, 62vh, 31rem); }

/* the aura behind the scroll: faint while rolled, wakes as it opens */
.scroll-aura {
  position: absolute; inset: -6% -3%; z-index: 0; pointer-events: none; opacity: .35;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, var(--aura), transparent 70%), radial-gradient(ellipse 35% 60% at 50% 55%, var(--aura-2), transparent 72%);
  transition: opacity 1.8s ease;
}
.scroll[data-open="true"] .scroll-aura { opacity: 1; animation: scroll-aura 7s ease-in-out infinite alternate; }
@keyframes scroll-aura { from { transform: scale(.97); filter: brightness(.9); } to { transform: scale(1.04); filter: brightness(1.15); } }

/* drifting motes of light, rising off the parchment */
.scroll-motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 2s ease .6s; }
.scroll[data-open="true"] .scroll-motes { opacity: 1; }
.mote {
  position: absolute; bottom: 6%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--mote); box-shadow: 0 0 6px 2px var(--mote-glow); opacity: 0;
  animation: scroll-mote var(--d) linear var(--w) infinite;
}
@keyframes scroll-mote {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: .85; }
  55% { transform: translate(calc(var(--dx) * .6), -12rem) scale(1); opacity: .6; }
  100% { transform: translate(var(--dx), -24rem) scale(.4); opacity: 0; }
}

/* the rolled ends: parchment wound on itself, spiral end-grain showing */
.scroll-roll {
  position: relative; flex: 0 0 40px; height: 100%; border: 0; padding: 0; border-radius: 20px / 12px; cursor: pointer; z-index: 2;
  background-image:
    radial-gradient(ellipse 60% 8% at 40% 23%, rgba(70,38,10,.35), transparent),
    radial-gradient(ellipse 70% 6% at 60% 71%, rgba(70,38,10,.3), transparent),
    repeating-linear-gradient(180deg, rgba(60,35,10,.22) 0 1px, transparent 1px 6px, rgba(60,35,10,.12) 6px 7px, transparent 7px 13px),
    linear-gradient(90deg, var(--roll-lo) 0%, var(--roll-mid) 20%, var(--roll-hi) 48%, var(--roll-mid) 72%, var(--roll-lo) 100%);
  box-shadow: 0 12px 24px rgba(0,0,0,.6), inset 0 0 8px rgba(40,20,5,.45);
  transition: transform .4s, box-shadow .4s;
}
.scroll-roll::before, .scroll-roll::after {
  content: ""; position: absolute; left: 1px; right: 1px; height: 14px; border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 50% 50%, var(--roll-edge-a) 0 1.4px, var(--roll-edge-b) 1.4px 2.6px);
  box-shadow: 0 0 0 1px rgba(40,20,5,.35);
}
.scroll-roll::before { top: -6px; }
.scroll-roll::after { bottom: -6px; }
.scroll-roll:hover, .scroll-roll:focus-visible { transform: scale(1.03); outline: none; box-shadow: 0 12px 24px rgba(0,0,0,.6), 0 0 0 2px var(--gold), 0 0 22px var(--mote-glow); }
.scroll[data-open="false"] .roll-r { animation: relic-breathe 3.2s ease-in-out infinite; }
@keyframes relic-breathe { 50% { box-shadow: 0 12px 24px rgba(0,0,0,.6), 0 0 26px var(--mote-glow); } }

/* a leather thong ties the closed scroll, and slips away as it opens */
.scroll-tie {
  position: absolute; left: -5px; right: -5px; top: 46%; height: 16px; border-radius: 4px; pointer-events: none;
  background: repeating-linear-gradient(100deg, rgba(0,0,0,.2) 0 2px, transparent 2px 5px), linear-gradient(180deg, #8a5a2e, #5a3317 30%, #331a09 70%, #6b4020);
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
  transition: opacity .7s ease, transform .9s cubic-bezier(.5,0,.75,0);
}
.scroll-knot { position: absolute; left: -7px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6b3e1c, #2a1406 70%); box-shadow: 0 0 10px var(--mote-glow); }
.scroll-knot::after { content: ""; position: absolute; left: 5px; top: 16px; width: 5px; height: 34px; border-radius: 3px; background: linear-gradient(180deg, #3d210c, #1f0f04); transform: rotate(8deg); transform-origin: top; }
.scroll[data-open="true"] .scroll-tie { opacity: 0; transform: translateY(2.5rem) rotate(-14deg); }
.scroll.theme-copper .scroll-tie, .scroll.theme-silver .scroll-tie { display: none; }

/* the unrolled sheet */
.scroll-window {
  position: relative; z-index: 1; height: 90%; max-width: 0; overflow: hidden; flex: 0 1 auto;
  transition: max-width 1.4s cubic-bezier(.6,.05,.25,1);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
}
.scroll[data-open="true"] .scroll-window { max-width: 64rem; flex: 1 1 auto; }
.scroll-sheet, .scroll-spill {
  -webkit-mask: var(--deckle-t) top left / 120px 12px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 22px) no-repeat, var(--deckle-b) bottom left / 150px 12px repeat-x;
          mask: var(--deckle-t) top left / 120px 12px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 22px) no-repeat, var(--deckle-b) bottom left / 150px 12px repeat-x;
}
.scroll-sheet {
  height: 100%; display: flex; direction: rtl; overflow-x: auto; overflow-y: hidden; cursor: grab;
  scrollbar-width: thin; scrollbar-color: #9c7440 transparent; outline: none;
  background-color: #d6bd90;
  background-image:
    /* the ends, darkened by handling */
    linear-gradient(90deg, rgba(70,38,10,.5), transparent 7%, transparent 93%, rgba(70,38,10,.5)),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(95,58,20,.42) 100%),
    /* tide-line stains, foxing and blotches that travel with the parchment */
    radial-gradient(circle at 22% 34%, transparent 2.3rem, rgba(120,70,22,.28) 2.45rem, rgba(150,95,40,.12) 2.7rem, transparent 3rem),
    radial-gradient(ellipse 5rem 3rem at 70% 82%, rgba(95,55,18,.26), transparent),
    radial-gradient(circle at 41% 11%, rgba(140,78,28,.42) 0 2px, transparent 5px), radial-gradient(circle at 44% 15%, rgba(140,78,28,.3) 0 1.5px, transparent 4px),
    radial-gradient(circle at 12% 88%, rgba(140,78,28,.38) 0 2.5px, transparent 6px), radial-gradient(circle at 86% 26%, rgba(120,70,25,.3) 0 3px, transparent 8px),
    radial-gradient(ellipse 3rem 9rem at 58% 40%, rgba(255,245,215,.22), transparent),
    /* fibre and grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .06 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #e2cca2, #cfb07e 60%, #c3a26f);
  background-size: auto, auto, 41rem 100%, 53rem 100%, 37rem 100%, 37rem 100%, 47rem 100%, 59rem 100%, 43rem 100%, 260px 260px, 180px 180px, auto;
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat, repeat, no-repeat;
  background-attachment: scroll, scroll, local, local, local, local, local, local, local, local, local, scroll;
  box-shadow: inset 0 0 46px rgba(80,45,10,.55);
}
.scroll-sheet.is-drag { cursor: grabbing; }
.scroll-sheet:focus-visible { box-shadow: inset 0 0 46px rgba(80,45,10,.55), inset 0 0 0 2px var(--gold); }

/* a sweep of light crosses the sheet as it unrolls (right to left, as it opens) */
.scroll-spill {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 30%, var(--spill) 50%, transparent 70%) no-repeat;
  background-size: 60% 100%; background-position: 160% 0; mix-blend-mode: soft-light;
}
.scroll.is-opening .scroll-spill { animation: scroll-spill 2s ease-out .25s both; }
@keyframes scroll-spill { 0% { opacity: 0; background-position: 160% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }

.s-col {
  flex: 0 0 auto; width: 18rem; padding: 1.5rem 1.4rem 1.2rem; color: #24160a; overflow-y: auto;
  background-image: repeating-linear-gradient(180deg, transparent 0 2.3rem, rgba(95,62,25,.16) 2.3rem calc(2.3rem + 1px));
  background-position: 0 3.55rem;
}
/* the text inks itself in, column after column */
.scroll[data-open="true"] .s-col > * { animation: s-ink 1.5s ease-out both; animation-delay: calc(.55s + var(--i, 0) * .4s); }
@keyframes s-ink {
  0% { opacity: 0; filter: blur(4px); }
  55% { opacity: .85; filter: blur(.5px) drop-shadow(0 0 6px rgba(255,210,130,.9)); }
  100% { opacity: 1; filter: none; }
}
.s-seam { flex: 0 0 3px; margin: 1.4rem .15rem; background: repeating-linear-gradient(180deg, rgba(70,40,14,.55) 0 7px, transparent 7px 14px); }
.s-head {
  direction: ltr; text-align: center; margin: 0 0 1.1rem; font-family: var(--font-display);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #7a2a12;
  text-shadow: 0 0 .5px rgba(90,25,8,.6);
}
.s-line { margin: 0; line-height: 2.3rem; }
.s-line[lang="he"] { text-align: right; }
.s-line[lang="en"] { direction: ltr; text-align: left; font-family: var(--font-body); font-size: 1.12rem; color: #2a190a; line-height: 2.3rem; }
.s-word {
  font: inherit; background: none; border: 0; padding: 0 .05rem; margin: 0; cursor: pointer; color: #1f1006;
  border-radius: 2px; transition: color .35s, text-shadow .35s;
  /* iron-gall ink that has bled a little into the skin */
  text-shadow: 0 0 .7px rgba(40,18,4,.85), 0 0 2.5px rgba(70,35,8,.22);
}
.s-line[lang="he"] .s-word { font-family: "Noto Serif Hebrew", "Frank Ruehl CLM", "SBL Hebrew", "Times New Roman", serif; font-size: 1.7rem; }
.s-line[lang="en"] .s-word { font-family: "Noto Serif Hebrew", "Times New Roman", serif; font-size: 1.3rem; color: #6e1d0a; }
.s-word:hover, .s-word:focus-visible {
  color: #6a1c06; outline: none;
  text-shadow: 0 0 1px rgba(80,20,4,.9), 0 0 8px rgba(255,214,130,.95), 0 0 18px rgba(255,185,80,.7), 0 0 30px rgba(255,160,60,.35);
}
.s-word.is-read { color: #5a1e08; text-shadow: 0 0 .7px rgba(40,18,4,.85), 0 0 7px rgba(225,160,60,.5); }
.s-names { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; text-align: center; margin: .6rem 0 .4rem; direction: ltr; }
.s-big { display: block; font-size: 2.6rem; line-height: 1.3; color: #1a0f05; font-family: "Noto Serif Hebrew", serif; text-shadow: 0 0 1px rgba(40,18,4,.8), 0 0 14px rgba(255,205,120,.55); }
.s-big.s-paleo { font-family: "Noto Sans Phoenician", "Segoe UI Historic", serif; }
.s-cap { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #6d4c22; font-family: var(--font-display); }
.s-tr, .s-note { display: none; direction: ltr; text-align: left; font-family: var(--font-body); }
.s-tr { font-style: italic; font-size: 1rem; color: #3a230e; margin: 1rem 0 0; padding-top: .6rem; border-top: 1px solid rgba(95,62,25,.35); line-height: 1.5; }
.s-note { font-size: .82rem; color: #5b3f1c; margin: .6rem 0 0; line-height: 1.45; }
.scroll.show-tr .s-tr, .scroll.show-tr .s-note { display: block; animation: s-ink 1s ease-out both; }
.scroll-gloss {
  min-height: 1.6em; text-align: center; color: var(--gold-bright); font-style: italic; margin: .9rem 0 0;
  letter-spacing: .02em; text-shadow: 0 0 12px rgba(231,198,128,.45);
}

/* static fallback */
.relic-static .s-static-col { margin: 1rem 0; padding: .8rem 1rem; border-left: 2px solid var(--line); }
.relic-static .s-static-he { font-size: 1.4rem; direction: rtl; text-align: right; font-family: "Noto Serif Hebrew", serif; }

@media (max-width: 40rem) {
  .tablet { padding: 2.4rem 1.2rem 2.2rem; }
  .s-col { width: 15rem; padding: 1rem; }
  .scroll-roll { flex-basis: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .tablet, .t-en, .scroll-window, .scroll-roll, .scroll-tie, .scroll-aura, .scroll-motes { transition: none; }
  .scroll[data-open="false"] .roll-r, .scroll[data-open="true"] .scroll-aura, .scroll[data-open="true"] .s-col > *, .scroll.show-tr .s-tr, .scroll.show-tr .s-note { animation: none; }
  .scroll-motes, .scroll-spill { display: none; }
}
@media print { .relic-live { display: none; } .relic.is-live > blockquote, .relic.is-live > .relic-static { display: block; } }

/* ---------------------------------------------------------------- shared panels */
.relic-panel { max-width: 44rem; margin: .8rem auto 0; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--panel); min-height: 4.2rem; }
.relic-panel .rp-t { margin: 0 0 .25rem; color: var(--parchment); }
.relic-panel .rp-s { color: var(--ink-dim); font-size: .9rem; }
.relic-panel .rp-d { margin: 0; font-size: .97rem; line-height: 1.55; }
.relic-subhead { text-align: center; font-family: var(--font-head); color: var(--parchment); margin: 1.8rem 0 .6rem; font-size: 1.15rem; }
.g-line { margin: .3rem 0; line-height: 2; }
.g-word { font: inherit; background: none; border: 0; padding: 0 .06rem; margin: 0; cursor: pointer; color: inherit; border-radius: 2px; transition: color .2s, text-shadow .2s, background .2s; }
.g-word:hover, .g-word:focus-visible { outline: none; color: #7a2408; background: rgba(255,236,190,.35); text-shadow: 0 0 8px rgba(255,226,160,.9); }
.g-status { min-height: 1.5em; text-align: center; color: var(--gold-bright); font-style: italic; margin: .7rem 0 0; }
.pap-head { font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #6d4c22; text-align: center; margin: 0 0 .4rem; }
.pap-tr { font-family: var(--font-body); font-style: italic; color: #3a230e; text-align: center; margin: .4rem 0 0; font-size: .98rem; }

/* ---------------------------------------------------------------- linen */
.linen-wrap { position: relative; border-radius: 2px; box-shadow: 0 14px 34px rgba(0,0,0,.5); overflow: hidden; transition: filter .8s ease; }
.linen-wrap.is-neg { filter: invert(1) hue-rotate(180deg) contrast(1.05); }
.linen-svg { display: block; width: 100%; height: auto; }
.linen-svg .l-lab { font-family: var(--font-display); font-size: 15px; letter-spacing: .12em; fill: rgba(95,65,30,.55); text-transform: uppercase; }
.linen-svg .l-small { font-size: 11px; }
.linen-svg .l-burns, .linen-svg .l-patches, .linen-svg .l-water, .linen-svg .l-sample { transition: opacity .7s ease; }
.l-time { position: relative; max-width: 50rem; margin: 1.1rem auto .4rem; }
.l-time input[type=range] { width: 100%; accent-color: var(--gold); }
.l-slabel { display: block; text-align: center; font-family: var(--font-display); letter-spacing: .12em; color: var(--ink-dim); font-size: .8rem; text-transform: uppercase; }
.l-year { font-size: 1.5rem; color: var(--gold-bright); margin-left: .3rem; letter-spacing: .05em; }
.l-ticks { position: relative; height: 1.4rem; margin: 0 .5rem; }
.l-ticks button { position: absolute; transform: translateX(-50%); font: inherit; font-size: .66rem; color: var(--ink-faint); background: none; border: 0; padding: 0; cursor: pointer; }
.l-ticks button.on { color: var(--gold-bright); }
@media (max-width: 40rem) { .l-ticks button:nth-child(even) { display: none; } }

/* ---------------------------------------------------------------- lance */
.lance-stage { background: radial-gradient(ellipse at 50% 60%, #2a1d10, #0e0905 70%); border: 1px solid var(--line); padding: 1rem 0; border-radius: 3px; }
.lance-svg { display: block; width: 100%; height: auto; }
.lance-svg .lp { cursor: pointer; transition: filter .25s; outline: none; }
.lance-svg .lp:hover, .lance-svg .lp:focus-visible, .lance-svg .lp.on { filter: drop-shadow(0 0 6px rgba(231,198,128,.85)); }
.lance-svg .band-text { font-family: var(--font-display); font-size: 17px; letter-spacing: .12em; fill: #4a2f07; }
.papyrus {
  max-width: 44rem; margin: 1.6rem auto 0; padding: 1.1rem 1.4rem; color: #2a190a;
  background: repeating-linear-gradient(90deg, rgba(120,90,40,.10) 0 3px, transparent 3px 11px), repeating-linear-gradient(0deg, rgba(120,90,40,.08) 0 2px, transparent 2px 13px), linear-gradient(180deg, #e6d3a3, #d2b77c);
  box-shadow: 0 10px 26px rgba(0,0,0,.45); clip-path: polygon(0 3%, 3% 0, 97% 2%, 100% 5%, 99% 96%, 96% 100%, 4% 98%, 0 95%);
}
.papyrus .g-line { text-align: center; font-family: "Noto Serif", "GFS Didot", "Palatino Linotype", Georgia, serif; font-size: 1.35rem; }
.flip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; max-width: 50rem; margin: 0 auto; }
.flip { position: relative; height: 10.5rem; perspective: 900px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.flip .f-front, .flip .f-back {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3rem; padding: .9rem;
  border: 1px solid var(--line); border-radius: 3px; backface-visibility: hidden; transition: transform .6s ease; text-align: center;
}
.flip .f-front { background: linear-gradient(180deg, var(--panel-2), var(--ground-2)); }
.flip .f-front strong { font-family: var(--font-head); font-size: 1.3rem; color: var(--parchment); }
.flip .f-front em { color: var(--ink-dim); font-size: .85rem; }
.flip .f-back { background: var(--panel); transform: rotateY(180deg); font-size: .88rem; line-height: 1.45; }
.flip[aria-pressed="true"] .f-front { transform: rotateY(-180deg); }
.flip[aria-pressed="true"] .f-back { transform: rotateY(0); }
.flip:focus-visible .f-front, .flip:focus-visible .f-back { border-color: var(--gold); }

/* ---------------------------------------------------------------- crown */
.crown-stage { max-width: 30rem; margin: 0 auto; }
.crown-svg { display: block; width: 100%; height: auto; overflow: visible; }
.crown-greek { font-family: "Noto Serif", "GFS Didot", "Palatino Linotype", Georgia, serif; font-size: 15.5px; fill: var(--gold-bright); letter-spacing: .06em; }
.crown-rot { transform-origin: 200px 200px; animation: crown-turn 120s linear infinite; }
.crown-stage:hover .crown-rot { animation-play-state: paused; }
@keyframes crown-turn { to { transform: rotate(360deg); } }
.crown-svg .bind { cursor: pointer; outline: none; }
.crown-svg .bind-gold { fill: #c99a3e; stroke: #6e4c12; transition: fill .2s; }
.crown-svg .bind-line { stroke: #f3d98e; stroke-width: 1.3; }
.crown-svg .bind:hover .bind-gold, .crown-svg .bind:focus-visible .bind-gold, .crown-svg .bind.on .bind-gold { fill: #f1cf72; filter: drop-shadow(0 0 5px rgba(241,207,114,.9)); }
.crown-mid { font-family: var(--font-display); font-size: 13px; letter-spacing: .14em; fill: var(--ink-dim); }
.crown-mid2 { font-size: 10px; fill: var(--ink-faint); }
.crown-tr { text-align: center; font-style: italic; color: var(--ink); margin: .2rem auto 0; max-width: 36rem; }

/* ---------------------------------------------------------------- ark */
.vellum {
  max-width: 52rem; margin: 0 auto; padding: 1.2rem 1.3rem 1rem; color: #2a190a; border-radius: 2px;
  background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(95,58,20,.3) 100%), linear-gradient(180deg, #ead9b4, #d6bd8c);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.vellum .g-line { text-align: center; font-family: "Noto Serif Hebrew", "Times New Roman", serif; font-size: 1.6rem; }
.ark-svg { display: block; width: 100%; height: auto; margin-top: .6rem; }
.ark-svg .bp-ground { stroke: rgba(70,45,15,.6); stroke-width: 1.5; }
.ark-svg .bp-dim { stroke: #7a2a10; stroke-width: 1; stroke-dasharray: 4 3; }
.ark-svg .bp-t { font-family: var(--font-body); font-size: 13px; fill: #5a2410; font-style: italic; }
.ark-svg .bp-gold { fill: rgba(201,154,62,.35); stroke: #6e4c12; stroke-width: 1.4; }
.ark-svg .bp-bright { fill: rgba(233,196,106,.55); }
.ark-svg .bp-end { fill: rgba(201,154,62,.2); stroke-dasharray: 5 3; }
.ark-svg .bp-mould { fill: none; stroke: #6e4c12; stroke-width: 1; }
.ark-svg .bp-ring { fill: rgba(110,76,18,.18); stroke: #6e4c12; stroke-width: 2.5; }
.ark-svg .bp-person { fill: rgba(70,45,15,.28); }
.ark-svg .bp-part { cursor: pointer; outline: none; transition: filter .2s; }
.ark-svg .bp-part:hover, .ark-svg .bp-part:focus-visible, .ark-svg .bp-part.on { filter: drop-shadow(0 0 5px rgba(180,110,20,.9)); }
.bp-sum { text-align: center; font-size: .92rem; color: #4a2c10; margin: .4rem 0 0; }

/* ---------------------------------------------------------------- scroll themes */
.scroll.theme-copper .scroll-sheet {
  background-color: #7a4a2a;
  background-image:
    linear-gradient(90deg, rgba(20,12,6,.55), transparent 8%, transparent 92%, rgba(20,12,6,.55)),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(20,40,30,.55) 100%),
    radial-gradient(ellipse 7rem 5rem at 20% 30%, rgba(60,150,115,.42), transparent), radial-gradient(ellipse 6rem 8rem at 75% 72%, rgba(60,140,110,.36), transparent),
    radial-gradient(ellipse 2rem 1.4rem at 48% 88%, rgba(30,15,5,.5), transparent), radial-gradient(circle at 62% 14%, rgba(90,190,150,.35) 0 4px, transparent 10px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .06 0 0 0 0 .02 0 0 0 .6 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #b0744a, #8a5230 50%, #6d3f22);
  background-size: auto, auto, 39rem 100%, 51rem 100%, 33rem 100%, 45rem 100%, 220px 220px, auto;
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat, no-repeat;
  background-attachment: scroll, scroll, local, local, local, local, local, scroll;
  box-shadow: inset 0 0 44px rgba(20,10,5,.6);
}
.scroll.theme-copper .s-col { color: #1d0f06; background-image: none; }
.scroll.theme-copper .s-head { color: #f0c79a; }
.scroll.theme-copper .s-line[lang="en"] { color: #fbe3c4; text-shadow: 0 1px 0 rgba(0,0,0,.55); }
.scroll.theme-copper .s-line[lang="en"] .s-word { color: #ffd9a0; font-family: "Noto Serif", Georgia, serif; }
.scroll.theme-copper .s-tr, .scroll.theme-copper .s-note { color: #f5dcc0; }
.scroll.theme-copper {
  --roll-lo: #2f1a0d; --roll-mid: #8a5230; --roll-hi: #e3a877; --roll-edge-a: #c98a58; --roll-edge-b: #3d7a62;
  --aura: rgba(255,140,60,.28); --aura-2: rgba(60,160,130,.16); --mote: #ffc27a; --mote-glow: rgba(255,140,50,.8); --spill: rgba(255,190,120,.9);
}
.scroll.theme-copper .s-word { text-shadow: 0 1px 0 rgba(255,200,150,.35), 0 -1px 0 rgba(0,0,0,.55); }
.scroll.theme-copper .s-word:hover, .scroll.theme-copper .s-word:focus-visible { color: #fff0d6; text-shadow: 0 0 6px rgba(255,170,80,.95), 0 0 18px rgba(255,120,40,.7); }
.scroll.theme-silver .scroll-sheet {
  background-color: #b9b8b3;
  background-image:
    linear-gradient(90deg, rgba(30,30,32,.45), transparent 8%, transparent 92%, rgba(30,30,32,.45)),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(40,40,40,.45) 100%),
    radial-gradient(ellipse 8rem 5rem at 30% 70%, rgba(60,50,40,.35), transparent), radial-gradient(ellipse 5rem 7rem at 78% 25%, rgba(70,55,90,.22), transparent),
    repeating-linear-gradient(115deg, transparent 0 23px, rgba(255,255,255,.13) 23px 24px, transparent 24px 61px, rgba(0,0,0,.07) 61px 62px),
    linear-gradient(170deg, #e4e3de, #9c9a94 60%, #c9c7c1);
  background-size: auto, auto, 41rem 100%, 49rem 100%, auto, auto;
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat, no-repeat;
  background-attachment: scroll, scroll, local, local, local, scroll;
  box-shadow: inset 0 0 40px rgba(20,20,20,.5);
}
.scroll.theme-silver .s-col { background-image: none; color: #1b1b1b; }
.scroll.theme-silver .s-head { color: #3b3b3b; }
.scroll.theme-silver .s-line[lang="he"] .s-word { color: #202020; text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.35); }
.scroll.theme-silver {
  --roll-lo: #3e3e3c; --roll-mid: #9d9b95; --roll-hi: #f4f3ef; --roll-edge-a: #e2e1dc; --roll-edge-b: #6d6c68;
  --aura: rgba(175,195,255,.26); --aura-2: rgba(220,230,255,.14); --mote: #eef3ff; --mote-glow: rgba(180,200,255,.8); --spill: rgba(235,242,255,.9);
}
.scroll.theme-silver .s-word:hover, .scroll.theme-silver .s-word:focus-visible { color: #0d1020; text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 8px rgba(190,210,255,.95), 0 0 20px rgba(150,180,255,.6); }
.s-word.s-paleo { font-family: "Noto Sans Phoenician", "Segoe UI Historic", serif !important; }

/* ---------------------------------------------------------------- timeline */
.tl-line { max-width: 44rem; margin: 0 auto; padding: 1rem 1.3rem; text-align: center; border-radius: 3px; background: var(--panel); border: 1px solid var(--line); }
.tl-line .g-line { font-size: 1.25rem; }
.tl-line .pap-head, .tl-line .pap-tr { color: var(--ink-dim); }
.tl-plaque {
  max-width: 40rem; margin: 1.3rem auto .6rem; padding: 1.4rem 1.6rem; text-align: center; border-radius: 4px;
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--ground-2)); box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.tl-plaque.tl-in { animation: tl-in .5s ease; }
@keyframes tl-in { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tl-year { font-family: var(--font-display); font-size: 2.2rem; color: var(--gold-bright); margin: 0; letter-spacing: .06em; }
.tl-title { font-family: var(--font-head); font-size: 1.35rem; color: var(--parchment); margin: .2rem 0 .5rem; }
.tl-desc { margin: 0; line-height: 1.55; }
.tl-plaque.theme-tilma { background: radial-gradient(ellipse at 50% 40%, rgba(40,90,80,.35), transparent 70%), repeating-linear-gradient(90deg, rgba(200,180,140,.06) 0 2px, transparent 2px 6px), linear-gradient(180deg, #2a3a33, #151d19); border-color: #4c6a5c; }
.tl-plaque.theme-tilma .tl-year { color: #e9d38c; }
.tl-line.theme-tilma { background: repeating-linear-gradient(0deg, rgba(200,180,140,.07) 0 2px, transparent 2px 7px), #2a3a33; border-color: #4c6a5c; }
.tl-line.theme-tilma .g-line { color: #f4e7c3; font-style: italic; }
.tl-plaque.theme-grail { background: radial-gradient(ellipse at 50% 30%, rgba(160,40,40,.25), transparent 65%), linear-gradient(180deg, #2c1512, #150a08); border-color: #6b3a2a; }
.tl-plaque.theme-reliquary { background: radial-gradient(ellipse at 50% 30%, rgba(231,198,128,.18), transparent 60%), linear-gradient(180deg, #3a2a12, #1a1208); border: 2px solid #9c7a3a; box-shadow: inset 0 0 0 4px rgba(231,198,128,.12), 0 14px 30px rgba(0,0,0,.45); }
.tl-plaque.theme-forgery { background: repeating-linear-gradient(90deg, rgba(120,90,40,.08) 0 3px, transparent 3px 11px), linear-gradient(180deg, #d9c294, #b89a64); color: #2a190a; border-color: #7a5a2a; }
.tl-plaque.theme-forgery .tl-year { color: #7a1f0a; }
.tl-plaque.theme-forgery .tl-title { color: #2a190a; }
.tl-line.theme-forgery { background: repeating-linear-gradient(90deg, rgba(120,90,40,.1) 0 3px, transparent 3px 11px), linear-gradient(180deg, #e2cd9d, #c9ab73); color: #2a190a; clip-path: polygon(2% 6%, 8% 0, 94% 3%, 100% 12%, 97% 90%, 90% 100%, 6% 96%, 0 84%); }
.tl-line.theme-forgery .g-word { font-family: "Noto Serif", Georgia, serif; }
.tl-line.theme-forgery .pap-head, .tl-line.theme-forgery .pap-tr { color: #6d4c22; }
.l-time + .relic-ctrls button:disabled { opacity: .4; }

/* ---------------------------------------------------------------- codex */
.codex {
  max-width: 50rem; margin: 0 auto; padding: 14px; border-radius: 6px; cursor: pointer; outline: none; perspective: 1600px;
  background: linear-gradient(135deg, #4a2e18, #2c1a0c 60%, #3d2412); box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 2px rgba(0,0,0,.4);
}
.codex:focus-visible { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 2px var(--gold); }
.cx-spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 22rem; transform-origin: 50% 50%; }
.cx-spread.cx-turn-f { animation: cx-f .55s ease; }
.cx-spread.cx-turn-b { animation: cx-b .55s ease; }
@keyframes cx-f { from { transform: rotateY(-14deg); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes cx-b { from { transform: rotateY(14deg); opacity: .35; } to { transform: none; opacity: 1; } }
.cx-page { position: relative; padding: 1.8rem 1.6rem 2.2rem; color: #2a190a; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.cx-l { box-shadow: inset -18px 0 24px -14px rgba(60,35,10,.55); border-radius: 3px 0 0 3px; }
.cx-r { box-shadow: inset 18px 0 24px -14px rgba(60,35,10,.55); border-radius: 0 3px 3px 0; }
.codex.theme-papyrus .cx-page { background: repeating-linear-gradient(90deg, rgba(120,90,40,.10) 0 3px, transparent 3px 11px), repeating-linear-gradient(0deg, rgba(120,90,40,.07) 0 2px, transparent 2px 14px), linear-gradient(180deg, #e2cd9a, #cdb07a); }
.codex.theme-giant .cx-page, .codex.theme-vellum .cx-page { background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(95,58,20,.28) 100%), linear-gradient(180deg, #efe2c4, #dcc59a); }
.codex.theme-giant { background: linear-gradient(135deg, #3a2410, #1f130a 60%, #36210f); border: 6px solid #6b5230; }
.cx-h { font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #7a2a10; margin: 0 0 .9rem; }
.cx-t { font-family: var(--font-body); font-size: 1.12rem; line-height: 1.6; margin: 0; }
.cx-t.cx-big { font-size: 1.35rem; font-style: italic; }
.codex.theme-giant .cx-t { font-family: "Cinzel", var(--font-display); font-size: 1rem; letter-spacing: .02em; }
.codex.theme-giant .cx-t.cx-big { font-size: 1.25rem; font-style: normal; }
.cx-n { font-size: .85rem; color: #5b3f1c; font-style: italic; margin: .9rem 0 0; }
.cx-folio { position: absolute; bottom: .6rem; left: 0; right: 0; font-size: .7rem; color: #7a5a2a; }
.cx-blank { opacity: .85; }
.cx-count { align-self: center; color: var(--ink-dim); font-size: .85rem; padding: 0 .4rem; }
@media (max-width: 40rem) { .cx-spread { grid-template-columns: 1fr; } .cx-r:not(.cx-blank) { border-top: 1px dashed rgba(95,58,20,.4); } .cx-t { font-size: 1rem; } }

/* ---------------------------------------------------------------- inscription */
.ins-box {
  max-width: 44rem; margin: 0 auto; padding: 2.2rem 1.6rem 1.6rem; text-align: center; border-radius: 4px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .36 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #d9d1bf, #b9ae96);
  box-shadow: 0 16px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.2), inset 0 -8px 20px rgba(0,0,0,.15);
}
.ins-line { margin: 0; font-family: "Noto Serif Hebrew", "Times New Roman", serif; font-size: 2.2rem; }
.ins-word { color: #3e362a; text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.45); }
.ins-box.show-disp .ins-word.is-disp { color: #8a1f0a; background: rgba(160,40,20,.12); outline: 1px dashed rgba(138,31,10,.6); }
.ins-tr { margin: .8rem 0 0; font-style: italic; color: #3a2e1e; }

/* ---------------------------------------------------------------- scales */
.scales-stage { max-width: 34rem; margin: 0 auto; padding: .6rem; border-radius: 4px; background: radial-gradient(ellipse at 50% 30%, rgba(231,198,128,.14), transparent 65%), linear-gradient(180deg, #2a2112, #140e07); border: 1px solid var(--line); }
.scales-svg { display: block; width: 100%; height: auto; overflow: visible; }
.scales-svg .sc-post { fill: #8a6a2e; }
.scales-svg .sc-pivot { fill: #e7c680; }
.scales-svg .sc-bar { fill: #c99a3e; }
.scales-svg .sc-cord { stroke: #c9a45e; stroke-width: 1.4; }
.scales-svg .sc-pan { fill: #b88a3a; stroke: #6e4c12; }
.scales-svg .sc-glyph { font-family: "Vault Hieroglyphs", "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", serif; font-size: 34px; fill: #f3e2b4; }
.scales-svg .sc-label { font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; fill: var(--ink-dim); text-transform: uppercase; }
.scales-svg .sc-beam { transform-origin: 210px 60px; transition: transform 1.2s cubic-bezier(.3,1.4,.5,1); }
.scales-svg .sc-pan-g { transition: transform 1.2s cubic-bezier(.3,1.4,.5,1); }
.sc-verdict { text-align: center; font-style: italic; color: var(--gold-bright); min-height: 1.5em; margin: .8rem 0 .4rem; font-size: 1.1rem; }
.sc-true .sc-verdict { font-style: normal; font-family: var(--font-display); letter-spacing: .08em; text-shadow: 0 0 14px rgba(231,198,128,.6); }
.sc-decl { display: grid; gap: .45rem; max-width: 34rem; margin: 0 auto; }
.sc-line { font: inherit; text-align: left; padding: .55rem .9rem; border-radius: 3px; cursor: pointer; color: var(--parchment); background: var(--panel-2); border: 1px solid var(--line); transition: border-color .2s, background .3s, color .3s; }
.sc-line:hover, .sc-line:focus-visible { border-color: var(--gold); }
.sc-line[aria-pressed="true"] { background: rgba(231,198,128,.12); color: var(--gold-bright); border-color: rgba(231,198,128,.5); }
.sc-line[aria-pressed="true"]::before { content: "\2713  "; }
@media (prefers-reduced-motion: reduce) { .scales-svg .sc-beam, .scales-svg .sc-pan-g { transition: none; } }

/* ---------------------------------------------------------------- codex & inscription variants */
.cx-t.cx-uncial { font-family: "Noto Serif", "GFS Didot", Georgia, serif; font-size: 1.35rem; letter-spacing: .12em; word-break: break-all; line-height: 1.9; }
.codex.theme-insular { background: linear-gradient(135deg, #2a1a10, #140c06 60%, #2a1a10); border: 6px solid #7a5a2a; }
.codex.theme-insular .cx-page { background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(95,58,20,.3) 100%), repeating-linear-gradient(45deg, rgba(160,60,40,.04) 0 8px, transparent 8px 16px), linear-gradient(180deg, #efe0bd, #d8bf8e); }
.codex.theme-insular .cx-h { color: #8a2c14; }
.codex.theme-insular .cx-t.cx-big { font-family: "Cinzel", var(--font-display); font-style: normal; font-size: 1.7rem; color: #5a1e0e; letter-spacing: .08em; }
.ins-box.theme-basalt { background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.08), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"), linear-gradient(180deg, #3a3835, #1f1d1b); border-radius: 40% 40% 6px 6px / 18% 18% 6px 6px; padding-top: 3rem; }
.ins-box.theme-basalt .ins-word { color: #cfc8bb; text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.12); }
.ins-box.theme-basalt .ins-tr { color: #bdb4a4; }
.ins-box.theme-basalt.show-disp .ins-word.is-disp { color: #f0a080; background: rgba(240,120,80,.12); outline-color: rgba(240,160,128,.6); }
.ins-word.s-paleo { font-family: "Noto Sans Phoenician", "Segoe UI Historic", serif; letter-spacing: .08em; }
.tl-plaque.theme-perahera { background: radial-gradient(ellipse at 50% 100%, rgba(255,150,40,.28), transparent 60%), linear-gradient(180deg, #1b0f22, #0b0710); border-color: #6b4a2a; }
.tl-plaque.theme-perahera .tl-year { color: #ffbe6a; text-shadow: 0 0 12px rgba(255,160,60,.6); }
.tl-plaque.theme-kaaba { background: linear-gradient(180deg, #121212, #050505); border: 1px solid #6b5a2a; box-shadow: inset 0 0 0 3px rgba(201,154,62,.18), 0 14px 30px rgba(0,0,0,.45); }
.tl-plaque.theme-kaaba .tl-year { color: #d9b25a; }
.tl-line.theme-kaaba { background: #0e0e0e; border-color: #6b5a2a; }
.tl-plaque.theme-veil { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.10), transparent 60%), linear-gradient(180deg, #2c2a26, #151412); border-color: #5b5548; }
.tl-plaque.theme-grimoire { background: repeating-linear-gradient(0deg, rgba(231,198,128,.04) 0 1px, transparent 1px 22px), linear-gradient(180deg, #1f1a26, #0e0b12); border-color: #4c3e5c; }
.tl-plaque.theme-grimoire .tl-year { color: #c9b3f0; }

/* ---------------------------------------------------------------- scroll: vertical Chinese columns, paper theme */
.s-col.s-cjk { width: auto; min-width: 9rem; display: flex; flex-direction: column; align-items: center; }
.s-vert { writing-mode: vertical-rl; direction: ltr; height: 19rem; display: block; margin: 0 auto; }
.s-vert .s-line { display: block; line-height: 2.7rem; margin: 0; text-align: start; white-space: nowrap; }
.s-vert .s-word { font-family: "Noto Serif TC", "Noto Serif CJK TC", "Songti TC", "SimSun", serif; font-size: 1.55rem; padding: .08rem 0; letter-spacing: .06em; }
.s-cjk .s-tr, .s-cjk .s-note { max-width: 12rem; }
.scroll.theme-paper {
  --roll-lo: #4a3514; --roll-mid: #a88a4c; --roll-hi: #efd9a0; --roll-edge-a: #dcc07e; --roll-edge-b: #7d6230;
  --aura: rgba(255,196,110,.30); --aura-2: rgba(210,120,70,.14); --mote: #ffe6b0; --mote-glow: rgba(255,200,120,.75);
}
.scroll.theme-paper .scroll-tie { display: none; }
.scroll.theme-paper .scroll-sheet { background-color: #d9bf82; }
.scroll.theme-paper .s-col { background-image: repeating-linear-gradient(90deg, transparent 0 2.65rem, rgba(120,70,20,.18) 2.65rem calc(2.65rem + 1px)); background-position: 0 0; }
.scroll.theme-paper .s-word { color: #1a0e05; }
.scroll.theme-paper .s-word:hover, .scroll.theme-paper .s-word:focus-visible { color: #8a1c08; }

/* ---------------------------------------------------------------- inscription: scripts and surfaces */
.ins-line[lang="ar"] { font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif; font-size: 2.3rem; line-height: 2.2; }
.ins-line.alt-rasm .ins-word { letter-spacing: .02em; }
.ins-line[lang="pa"] { font-family: "Noto Sans Gurmukhi", "Raavi", sans-serif; font-size: 2rem; line-height: 1.9; }
.ins-line[lang="non"] { font-family: var(--font-body); font-size: 1.5rem; line-height: 1.9; }
.ins-line[lang="non"].alt-runes { font-family: "Noto Sans Runic", "Segoe UI Historic", serif; font-size: 2.1rem; letter-spacing: .12em; }
.ins-line[lang="akk"], .ins-line[lang="quc"] { font-family: var(--font-body); font-size: 1.45rem; line-height: 1.9; font-style: italic; }
.ins-box.theme-hijazi { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(95,58,20,.35) 100%), linear-gradient(180deg, #ecdcb8, #d7c092); border-radius: 2px; }
.ins-box.theme-hijazi .ins-word { color: #2a1406; text-shadow: 0 0 .6px rgba(40,18,4,.8); }
.ins-box.theme-folio { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(95,58,20,.3) 100%), repeating-linear-gradient(180deg, transparent 0 3.6rem, rgba(150,40,20,.12) 3.6rem calc(3.6rem + 1px)), linear-gradient(180deg, #f1e3c2, #dcc79c); border: 3px double rgba(140,60,30,.55); border-radius: 2px; }
.ins-box.theme-folio .ins-word { color: #241407; text-shadow: none; }
.ins-box.theme-clay { background: radial-gradient(ellipse at 35% 25%, rgba(255,230,190,.25), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"), linear-gradient(180deg, #c9a27a, #9c7550); border-radius: 48% 48% 48% 48% / 14% 14% 14% 14%; }
.ins-box.theme-clay .ins-word { color: #3a2412; text-shadow: 0 1px 0 rgba(255,225,190,.45), 0 -1px 0 rgba(0,0,0,.35); }
.ins-box.theme-clay .ins-tr { color: #3a2412; }
.ins-box.theme-granite { background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.14), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"), linear-gradient(180deg, #8f8a82, #5f5a53); border-radius: 30% 34% 6px 6px / 12% 14% 6px 6px; padding-top: 2.8rem; }
.ins-box.theme-granite .ins-word { color: #efe6d6; text-shadow: 0 -1px 0 rgba(0,0,0,.7); }
.ins-box.theme-granite .alt-runes .ins-word { color: #b8321c; text-shadow: 0 0 1px rgba(60,10,0,.6); }
.ins-box.theme-granite .ins-tr { color: #f1e9da; }

/* ---------------------------------------------------------------- venus (Maya numerals) */
.venus-stage { display: grid; grid-template-columns: minmax(0, 22rem) 8rem; gap: 1.4rem; justify-content: center; align-items: center; max-width: 34rem; margin: 0 auto; padding: 1rem; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,240,205,.9), rgba(236,221,186,.95) 60%, #d8c49a); box-shadow: 0 16px 34px rgba(0,0,0,.5), inset 0 0 30px rgba(120,80,30,.35); }
.venus-svg { width: 100%; height: auto; display: block; }
.vn-orbit { fill: none; stroke: rgba(90,50,20,.25); stroke-dasharray: 2 5; }
.vn-seg { cursor: pointer; stroke: #2a1406; stroke-width: 1.2; outline: none; transition: filter .25s, opacity .25s; opacity: .82; }
.vn-seg.vn-morning { fill: #b83a1e; } .vn-seg.vn-evening { fill: #2f6f8a; } .vn-seg.vn-hidden { fill: #3a2a1a; }
.vn-seg:hover, .vn-seg:focus-visible, .vn-seg.on { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,190,90,.95)); }
.vn-lab { font-family: var(--font-display); font-size: 13px; fill: #4a2a10; }
.vn-core { fill: rgba(255,248,225,.7); stroke: rgba(90,50,20,.3); }
.vn-star { fill: #f6d27a; stroke: #8a5a14; stroke-width: 1; filter: drop-shadow(0 0 8px rgba(255,210,110,.9)); }
.vn-core-lab { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; fill: #6b4218; }
.vn-num { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.maya-num .mn-dot, .maya-num .mn-bar { fill: #1d1008; }
.maya-num .mn-shell { fill: #f2e6c8; stroke: #1d1008; stroke-width: 2.4; }
.maya-num .mn-shell-l { fill: none; stroke: #1d1008; stroke-width: 1.6; }
.vn-arabic { font-family: var(--font-display); color: #5a3412; font-size: .9rem; letter-spacing: .08em; }
.vn-mult { margin-top: .9rem; }
@media (max-width: 34rem) { .venus-stage { grid-template-columns: 1fr; } .vn-num { flex-direction: row; justify-content: center; gap: 1rem; } }

/* ---------------------------------------------------------------- palimpsest */
.pal-stage { max-width: 26rem; margin: 0 auto; filter: drop-shadow(0 16px 26px rgba(0,0,0,.6)); }
.pal-svg { width: 100%; height: auto; display: block; }
.pal-leaf { fill: #dcc497; stroke: rgba(90,55,20,.5); stroke-width: 1.5; }
.pal-upper { fill: #2a1406; }
.pal-lower { fill: #6d4a2a; }
.pal-uv { fill: #2b1d5a; mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.pal-stage.is-uv .pal-lower { fill: #a9ecff; filter: url(#pal-glow); }
.pal-slider { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 1rem auto .2rem; max-width: 26rem; font-size: .85rem; color: var(--ink-dim); font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.pal-slider input { flex: 1; accent-color: #8f7cff; }

/* ---------------------------------------------------------------- cauldron */
.cauldron-stage { max-width: 25rem; margin: 0 auto; padding: .6rem; border-radius: 50%; background: radial-gradient(circle, rgba(231,198,128,.16), transparent 70%); }
.cauldron-svg { width: 100%; height: auto; display: block; }
.cd-rim { fill: #1d1b18; stroke: #8f8a80; stroke-width: 3; }
.cd-plate { cursor: pointer; stroke: #5b574f; stroke-width: 1.2; outline: none; transition: filter .25s, fill .25s; }
.cd-outer { fill: #bdb9b0; } .cd-inner { fill: #d4cfc4; } .cd-base { fill: #c9b27a; }
.cd-plate.is-missing { fill: rgba(190,185,175,.12); stroke-dasharray: 5 4; }
.cd-plate:hover, .cd-plate:focus-visible, .cd-plate.on { fill: #e8c877; filter: drop-shadow(0 0 7px rgba(255,210,120,.9)); }
.cd-num { font-family: var(--font-display); font-size: 13px; fill: #2a241a; pointer-events: none; }
.cd-base-lab { font-size: 15px; }

/* ---------------------------------------------------------------- chamber (Pyramid Texts) */
.chamber-stage { max-width: 44rem; margin: 0 auto; }
.chamber-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)); }
.ch-gable { fill: #17214a; stroke: #b9a77c; stroke-width: 2; }
.ch-star { fill: #e9cf7a; }
.ch-wall { fill: #e5dccb; stroke: #b9a77c; stroke-width: 2; }
.ch-cart { fill: #efe7d6; stroke: #2a4ca0; stroke-width: 2.4; }
.ch-cart-tie { stroke: #2a4ca0; stroke-width: 3; }
.ch-glyph { font-family: "Vault Hieroglyphs", "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", serif; font-size: 26px; fill: #22449a; }
.ch-zone { cursor: pointer; outline: none; }
.ch-hit { fill: transparent; stroke: transparent; stroke-width: 2; transition: fill .25s, stroke .25s; }
.ch-rule { stroke: rgba(34,68,154,.25); stroke-width: 1; }
.ch-sign { fill: #2f55b0; opacity: .72; transition: opacity .25s; }
.ch-zone:hover .ch-hit, .ch-zone:focus-visible .ch-hit, .ch-zone.on .ch-hit { fill: rgba(231,198,128,.22); stroke: #c79a54; }
.ch-zone.on .ch-sign, .ch-zone:hover .ch-sign { opacity: 1; }
.ch-lab { font-family: var(--font-display); font-size: 12px; fill: var(--ink-dim); letter-spacing: .1em; }
.s-vert .s-word { display: inline; line-height: inherit; padding: .1rem 0; }
.cd-num.cd-miss { fill: #d8cfbd; font-size: 16px; }

/* ---------------------------------------------------------------- scroll: left-to-right Greek papyrus, charred */
.scroll[dir="ltr"] .scroll-sheet { direction: ltr; }
.s-line[lang="grc"] { direction: ltr; text-align: left; line-height: 2.3rem; }
.s-line[lang="grc"] .s-word { font-family: "Noto Serif", "GFS Didot", "Gentium Plus", Georgia, serif; font-size: 1.25rem; letter-spacing: .02em; }
.scroll.theme-charred {
  --roll-lo: #0d0805; --roll-mid: #3a2515; --roll-hi: #6b4a2a; --roll-edge-a: #5a3a20; --roll-edge-b: #150c06;
  --aura: rgba(255,120,40,.26); --aura-2: rgba(200,60,20,.14); --mote: #ffb36a; --mote-glow: rgba(255,110,30,.85); --spill: rgba(255,170,90,.8);
}
.scroll.theme-charred .scroll-tie { display: none; }
.scroll.theme-charred .scroll-sheet {
  background-color: #2a1a0f;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.7), transparent 9%, transparent 91%, rgba(0,0,0,.7)),
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.65) 100%),
    radial-gradient(ellipse 6rem 4rem at 30% 70%, rgba(0,0,0,.45), transparent), radial-gradient(ellipse 4rem 7rem at 72% 30%, rgba(0,0,0,.4), transparent),
    repeating-linear-gradient(90deg, rgba(120,80,40,.12) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, rgba(120,80,40,.08) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #3b2616, #24160c);
  background-size: auto, auto, 37rem 100%, 45rem 100%, auto, auto, auto;
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat, repeat, no-repeat;
  background-attachment: scroll, scroll, local, local, local, local, scroll;
  box-shadow: inset 0 0 50px rgba(0,0,0,.8);
}
.scroll.theme-charred .s-col { background-image: none; color: #e6c9a2; }
.scroll.theme-charred .s-head { color: #ffb36a; text-shadow: 0 0 8px rgba(255,120,40,.5); }
.scroll.theme-charred .s-word { color: #f0d2a8; text-shadow: 0 0 6px rgba(255,120,40,.35); }
.scroll.theme-charred .s-word:hover, .scroll.theme-charred .s-word:focus-visible { color: #fff1d6; text-shadow: 0 0 8px rgba(255,170,80,.95), 0 0 20px rgba(255,100,30,.7); }
.scroll.theme-charred .s-tr, .scroll.theme-charred .s-note { color: #dcbf98; border-color: rgba(255,170,90,.3); }
.scroll.theme-charred .s-seam { background: repeating-linear-gradient(180deg, rgba(255,150,70,.25) 0 7px, transparent 7px 14px); }

/* ---------------------------------------------------------------- inscription: more surfaces and scripts */
.ins-line[lang="la"], .ins-line[lang="pra"], .ins-line[lang="en"] { font-family: var(--font-body); font-size: 1.5rem; line-height: 1.9; }
.ins-line[lang="la"] { font-family: "Cinzel", var(--font-display); letter-spacing: .12em; font-size: 1.45rem; }
.ins-line[lang="pra"] { font-style: italic; }
.ins-box.theme-soapstone { background: radial-gradient(ellipse at 40% 25%, rgba(255,255,255,.2), transparent 60%), linear-gradient(180deg, #b9b3a2, #8f8876); border-radius: 50% 50% 8px 8px / 16% 16% 8px 8px; padding-top: 2.8rem; }
.ins-box.theme-soapstone .ins-word { color: #2f2a20; }

/* ---------------------------------------------------------------- skydisc (Nebra) */
.disc-stage { max-width: 24rem; margin: .4rem auto 0; padding: .8rem; border-radius: 50%; background: radial-gradient(circle, rgba(120,200,170,.16), transparent 70%); }
.disc-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)); }
.disc-body { fill: url(#disc-g); stroke: #0f2a24; stroke-width: 2; }
.disc-gold { fill: url(#gold-g); stroke: rgba(90,60,10,.5); stroke-width: .8; }
.disc-pl { filter: drop-shadow(0 0 4px rgba(255,220,130,.9)); }
.disc-hatch { stroke: #6b4a12; stroke-width: 1; }
.disc-hole { fill: #0d211c; stroke: rgba(0,0,0,.4); }
.disc-st { opacity: 0; transition: opacity .8s ease; }
.disc-svg[data-stage="1"] .disc-s1, .disc-svg[data-stage="2"] .disc-s1, .disc-svg[data-stage="3"] .disc-s1, .disc-svg[data-stage="4"] .disc-s1, .disc-svg[data-stage="5"] .disc-s1,
.disc-svg[data-stage="2"] .disc-s2, .disc-svg[data-stage="3"] .disc-s2, .disc-svg[data-stage="4"] .disc-s2, .disc-svg[data-stage="5"] .disc-s2,
.disc-svg[data-stage="3"] .disc-s3, .disc-svg[data-stage="4"] .disc-s3, .disc-svg[data-stage="5"] .disc-s3,
.disc-svg[data-stage="4"] .disc-s4, .disc-svg[data-stage="5"] .disc-s4 { opacity: 1; }
.disc-arc-l.is-lost { fill: none; stroke: rgba(230,200,120,.5); stroke-dasharray: 4 4; }
.disc-stages button { font-size: .88rem; }

/* ---------------------------------------------------------------- daycount (260-day count) */
.dc-stage { max-width: 25rem; margin: .4rem auto 0; padding: .6rem; border-radius: 50%; background: radial-gradient(circle, rgba(231,198,128,.14), transparent 70%); }
.dc-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
.dc-outer, .dc-inner { transform-origin: 180px 180px; transform-box: view-box; transition: transform .7s cubic-bezier(.3,1.2,.5,1); }
.dc-sign { fill: #efe2c4; stroke: #6b3a1a; stroke-width: 1; }
.dc-sign:nth-child(4n+1) { fill: #e6c9a0; }
.dc-sign-lab { font-family: var(--font-display); font-size: 10px; fill: #5a2410; letter-spacing: .04em; }
.dc-num { fill: #b8452a; stroke: #4a1a0a; stroke-width: 1; }
.dc-num-lab { font-family: var(--font-display); font-size: 14px; fill: #fff1d6; }
.dc-core { fill: #1d140c; stroke: #c79a54; stroke-width: 2; }
.dc-big { font-family: var(--font-display); font-size: 17px; fill: #f3dca8; }
.dc-sub { font-size: 12px; fill: #d8c29a; font-style: italic; }
.dc-cnt { font-size: 10px; fill: #a89070; letter-spacing: .1em; text-transform: uppercase; }
.dc-pointer { fill: #e7c680; }
@media (prefers-reduced-motion: reduce) { .dc-outer, .dc-inner, .disc-st { transition: none; } }
.cx-t[lang="cop"] { font-family: "Noto Sans Coptic", "Antinoou", "Segoe UI Historic", serif; font-style: normal; font-size: 1.6rem; letter-spacing: .06em; }

/* ---------------------------------------------------------------- gate (Ishtar Gate) */
.gate-stage { max-width: 40rem; margin: 0 auto; }
.gate-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 26px rgba(0,0,0,.6)); }
.gate-wall { fill: url(#gate-brick); stroke: #0e2358; stroke-width: 2; }
.gate-arch { fill: #0a0f1f; }
.gate-trim { fill: none; stroke: #d9b45a; stroke-width: 4; }
.gate-beast { cursor: pointer; outline: none; }
.gate-tile { fill: rgba(20,50,130,.35); stroke: rgba(217,180,90,.35); transition: fill .25s, stroke .25s; }
.gate-icon { fill: #e8c46a; stroke: #7a5a1a; stroke-width: 1; }
.gate-dragon .gate-icon { fill: #f1e2b8; }
.gate-beast:hover .gate-tile, .gate-beast:focus-visible .gate-tile, .gate-beast.on .gate-tile { fill: rgba(231,198,128,.25); stroke: #e7c680; }
.gate-plaque-r { fill: #203f86; stroke: #d9b45a; stroke-width: 2; }
.gate-plaque-l { stroke: #f1e2b8; stroke-width: 2; stroke-dasharray: 3 2; opacity: .8; }
.gate-plaque.on .gate-plaque-r, .gate-plaque:hover .gate-plaque-r { fill: #2a54b0; }

/* ---------------------------------------------------------------- cartouche (Rosetta Stone) */
.ct-stage { max-width: 34rem; margin: 0 auto; padding: 1.6rem 1rem 1.2rem; text-align: center; border-radius: 6px;
  background: radial-gradient(ellipse at 40% 25%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, #3b3a3d, #232226); box-shadow: 0 16px 34px rgba(0,0,0,.55), inset 0 0 30px rgba(0,0,0,.5); }
.ct-greek { margin: 0; font-family: "Noto Serif", Georgia, serif; font-size: 1.9rem; letter-spacing: .18em; color: #d9d2c4; }
.ct-gl { transition: color .25s, text-shadow .25s; }
.ct-gl.on { color: #ffd37a; text-shadow: 0 0 10px rgba(255,200,100,.8); }
.ct-arrow { margin: .3rem 0; color: var(--ink-faint); }
.ct-ring { display: inline-flex; gap: .15rem; align-items: center; padding: .5rem 1.4rem; border: 3px solid #cfc6b4; border-radius: 999px; position: relative; }
.ct-ring::after { content: ""; position: absolute; right: -12px; top: 18%; bottom: 18%; width: 6px; background: #cfc6b4; border-radius: 2px; }
.ct-sign { font: inherit; font-family: "Vault Hieroglyphs", "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", serif; font-size: 2.4rem; line-height: 1.2; background: none; border: 0; color: #e8e0cf; cursor: pointer; padding: .1rem .15rem; border-radius: 4px; transition: color .25s, text-shadow .25s; }
.ct-sign:hover, .ct-sign:focus-visible, .ct-sign.on { color: #ffd37a; text-shadow: 0 0 12px rgba(255,200,100,.85); outline: none; }
.ct-sounds { display: flex; justify-content: center; gap: 1.35rem; margin: .5rem 0 0; font-family: var(--font-display); font-size: .85rem; letter-spacing: .1em; color: var(--ink-dim); }

/* ---------------------------------------------------------------- oracle (Shang oracle bones) */
.oracle-stage { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.4rem; align-items: center; max-width: 44rem; margin: 0 auto; }
.oracle-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 20px rgba(0,0,0,.55)); }
.or-shell { fill: #d8c9a3; stroke: #8a7446; stroke-width: 3; }
.or-seam { stroke: rgba(110,85,40,.45); stroke-width: 1.5; fill: none; }
.or-hollow { fill: rgba(90,60,25,.55); }
.or-glow { fill: rgba(255,120,30,0); transition: fill .8s ease; }
.oracle-stage[data-step="1"] .or-glow { fill: rgba(255,120,30,.75); filter: blur(3px); }
.or-crack { fill: none; stroke: #2a1406; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.2s ease; }
.oracle-stage:not([data-step="0"]):not([data-step="1"]) .or-crack { stroke-dashoffset: 0; }
.or-lines { display: grid; gap: .6rem; }
.or-line { margin: 0; padding: .6rem .8rem; border: 1px solid var(--line); background: var(--panel); opacity: .18; transition: opacity .6s ease; }
.or-line.on { opacity: 1; border-left: 3px solid var(--gold); }
.or-zh { display: block; font-family: "Noto Serif TC", "Noto Serif CJK TC", serif; font-size: 1.35rem; color: var(--parchment); letter-spacing: .08em; }
.or-en { display: block; font-size: .98rem; color: var(--ink-dim); margin-top: .2rem; }
.or-note { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: .2rem; font-style: italic; }
@media (max-width: 40rem) { .oracle-stage { grid-template-columns: 1fr; } .oracle-svg { max-width: 12rem; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .or-crack, .or-glow, .or-line { transition: none; } }
.relic-panel, .g-status, .scroll-gloss { font-family: var(--font-body), "Vault Hieroglyphs"; }

/* ---------------------------------------------------------------- enclosure (Göbekli Tepe) */
.enc-stage { max-width: 26rem; margin: 0 auto; }
.enc-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
.enc-ground { fill: #6b5a41; stroke: #3f3322; stroke-width: 2; }
.enc-wall { fill: none; stroke: #8a7556; stroke-width: 22; opacity: .85; }
.enc-pillar { cursor: pointer; outline: none; }
.enc-top { fill: #d8c9a6; stroke: #6d5a3a; stroke-width: 1.2; transition: fill .25s, filter .25s; }
.enc-shaft { fill: rgba(80,62,35,.35); }
.enc-pillar.is-named .enc-top { fill: #eadbb4; }
.enc-pillar:hover .enc-top, .enc-pillar:focus-visible .enc-top, .enc-pillar.on .enc-top { fill: #f3dd9c; filter: drop-shadow(0 0 6px rgba(255,210,120,.9)); }
.enc-lab { font-family: var(--font-display); font-size: 11px; fill: #f3e6c4; pointer-events: none; }

/* ---------------------------------------------------------------- khipu */
.kh-stage { max-width: 38rem; margin: 0 auto; padding: .6rem; border-radius: 6px; background: linear-gradient(180deg, #2a2016, #17110b); border: 1px solid var(--line); }
.kh-svg { width: 100%; height: auto; display: block; }
.kh-main { fill: none; stroke: #d9c7a0; stroke-width: 6; stroke-linecap: round; }
.kh-band { font-family: var(--font-display); font-size: 10px; letter-spacing: .1em; fill: var(--ink-faint); text-transform: uppercase; }
.kh-bandline { stroke: rgba(231,198,128,.12); stroke-dasharray: 3 5; }
.kh-cord { cursor: pointer; outline: none; }
.kh-string { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-width .2s; }
.kh-knot { fill: #f1e2bd; stroke: #4a3a22; stroke-width: 1; }
.kh-long { fill: #f1e2bd; stroke: #4a3a22; stroke-width: 1; }
.kh-turn { stroke: #4a3a22; stroke-width: 1; }
.kh-eight { fill: none; stroke: #f1e2bd; stroke-width: 3; }
.kh-sum { font-family: var(--font-display); font-size: 14px; fill: #e7c680; }
.kh-cord:hover .kh-string, .kh-cord:focus-visible .kh-string, .kh-cord.on .kh-string { stroke-width: 6; filter: drop-shadow(0 0 5px rgba(255,210,120,.8)); }

/* ---------------------------------------------------------------- bowl (incantation bowl) */
.bowl-stage { max-width: 24rem; margin: 0 auto; perspective: 900px; }
.bowl-inner { transition: transform 1.2s cubic-bezier(.5,0,.3,1); transform-style: preserve-3d; }
.bowl-inner.is-over { transform: rotateX(180deg); }
.bowl-inner { position: relative; }
.bowl-svg, .bowl-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bowl-back { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotateX(180deg); filter: drop-shadow(0 16px 26px rgba(0,0,0,.6)); }
.bowl-out { fill: #a67a4e; }
.bowl-foot { fill: none; stroke: #6b4a2a; stroke-width: 6; }
.bowl-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 26px rgba(0,0,0,.6)); transition: filter 1.2s; }
.bowl-rim { fill: #b98a5c; stroke: #6b4a2a; stroke-width: 3; }
.bowl-in { fill: #d9b98e; }
.bowl-text { font-family: "Noto Serif Hebrew", "SBL Hebrew", serif; font-size: 13px; fill: #2a160a; }
.bowl-fig { fill: none; stroke: #3a1f0c; stroke-width: 2.4; stroke-linecap: round; }
.bowl-fig circle { fill: #3a1f0c; }
.bowl-chain { stroke-dasharray: 3 2; stroke: #6b2a12; }
.bowl-words { max-width: 36rem; margin: .8rem auto 0; text-align: center; }
.bowl-words .g-line { font-family: "Noto Serif Hebrew", serif; font-size: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .bowl-inner, .bowl-svg { transition: none; } }

/* ---------- haykal: the Báb's star tablet ---------- */
.hk-stage { max-width: 27rem; margin: 0 auto; padding: .8rem; border-radius: 8px; background: radial-gradient(circle at 50% 45%, #f3e7cb 0%, #e3d0a6 62%, #c9ae7b 100%); box-shadow: inset 0 0 40px rgba(90,60,20,.35), 0 18px 40px rgba(0,0,0,.5); }
.hk-svg { width: 100%; height: auto; display: block; overflow: visible; }
.hk-rule { stroke: rgba(92,52,20,.18); stroke-width: 13; stroke-linecap: round; }
.hk-text { font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Vault Arabic", serif; font-size: 11.5px; fill: #3a1f0c; transition: fill .4s; }
.hk-text.on { fill: #8a3b12; }
.hk-ch { fill: rgba(138,59,18,0); stroke: none; transition: fill .45s; }
.hk-ch.on { fill: rgba(138,59,18,.16); }
.hk-body { opacity: 0; transition: opacity .6s; }
.hk-svg.show-body .hk-body { opacity: 1; }
.hk-lab { font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: #6b3a16; }
.hk-num { opacity: 0; transition: opacity .8s; }
.hk-svg.show-num .hk-num { opacity: 1; }
.hk-big { font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: 44px; fill: #8a3b12; paint-order: stroke; stroke: #f3e7cb; stroke-width: 6px; }
.bowl-words .g-line[lang="ar"] { font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: 1.5rem; }

/* ---------- vèvè: cornmeal on an earthen floor ---------- */
.vv-stage { max-width: 25rem; margin: 0 auto; }
.vv-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 30px rgba(0,0,0,.55)); }
.vv-floor { fill: #3b2616; stroke: #5a3d24; stroke-width: 3; }
.vv-line { fill: none; stroke: #efe2bf; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .95; transition: stroke-dashoffset 1.4s ease-in-out; }
.vv-svg.is-drawn .vv-line { stroke-dashoffset: 0; }
.vv-grain { fill: #efe2bf; opacity: 0; transition: opacity 2.4s 1.2s; }
.vv-svg.is-drawn .vv-grain { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .vv-line, .vv-grain, .hk-ch, .hk-num, .hk-body { transition: none; } }