/* Museum-night redesign: lapis, fired clay, oxidized copper and river light. */
:root {
  --bg: #07100f;
  --bg2: #0c1715;
  --ink: #eee7d8;
  --muted: #b9b3a5;
  --faint: #7f8981;
  --clay: #b95f3d;
  --clay2: #dc8a59;
  --lapis: #164d62;
  --glaze: #1d93a8;
  --reed: #8a9c73;
  --ox: #a83d31;
  --gold: #d8bb72;
  --line: rgba(216, 187, 114, .2);
  --panel: rgba(14, 24, 22, .82);
  --panel2: rgba(21, 35, 31, .72);
  --shadow: 0 30px 80px rgba(0, 0, 0, .38);
  --max: 1280px;
  --sans: Avenir, "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", sans-serif;
  --serif: Iowan Old Style, Baskerville, "Noto Serif SC", "Songti SC", Georgia, serif;
  --utility: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[data-theme="light"] {
  --bg: #d7dbd0;
  --bg2: #c4ccc1;
  --ink: #18201d;
  --muted: #39443f;
  --faint: #667069;
  --clay: #934b35;
  --clay2: #743823;
  --lapis: #1e5a6d;
  --glaze: #17677a;
  --reed: #516348;
  --ox: #832e27;
  --gold: #71561d;
  --line: rgba(43, 58, 51, .22);
  --panel: rgba(237, 240, 231, .88);
  --panel2: rgba(215, 223, 212, .82);
  --shadow: 0 24px 60px rgba(42, 45, 37, .2);
}

html { scroll-padding-top: 78px; }

body {
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 7.8%, rgba(29, 147, 168, .08) 8%, transparent 8.2% 91.8%, rgba(185, 95, 61, .07) 92%, transparent 92.2%),
    radial-gradient(ellipse at 12% 8%, rgba(22, 77, 98, .34), transparent 31%),
    radial-gradient(ellipse at 88% 55%, rgba(185, 95, 61, .13), transparent 27%),
    var(--bg);
  font-family: var(--sans);
  line-height: 1.72;
}

body::after { opacity: .035; }

[data-theme="light"] body {
  background:
    linear-gradient(90deg, transparent 0 7.7%, rgba(24, 112, 126, .2) 8%, transparent 8.35% 91.6%, rgba(147, 75, 53, .16) 92%, transparent 92.35%),
    repeating-linear-gradient(168deg, transparent 0 86px, rgba(31, 90, 92, .065) 87px 89px, transparent 90px 174px),
    radial-gradient(ellipse at 14% 10%, rgba(30, 90, 109, .22), transparent 34%),
    radial-gradient(ellipse at 82% 46%, rgba(147, 75, 53, .17), transparent 32%),
    radial-gradient(ellipse at 42% 82%, rgba(81, 99, 72, .14), transparent 30%),
    var(--bg);
}

[data-theme="light"] body::after {
  opacity: .045;
  mix-blend-mode: multiply;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  left: clamp(24px, 5vw, 72px);
  top: 0;
  bottom: 0;
  width: clamp(28px, 4vw, 58px);
  pointer-events: none;
  opacity: .34;
  background:
    repeating-linear-gradient(172deg, transparent 0 34px, rgba(54, 188, 205, .42) 35px 37px, transparent 38px 66px),
    linear-gradient(90deg, transparent, rgba(29, 147, 168, .22), transparent);
  filter: blur(.2px) drop-shadow(0 0 16px rgba(29, 147, 168, .26));
  animation: museumRiver 13s linear infinite;
}

[data-theme="light"] body::before {
  opacity: .72;
  background:
    repeating-linear-gradient(172deg, transparent 0 32px, rgba(19, 113, 129, .46) 33px 36px, transparent 37px 64px),
    linear-gradient(90deg, transparent, rgba(23, 103, 122, .24), transparent);
  filter: blur(.15px) drop-shadow(0 0 8px rgba(23, 103, 122, .18));
}

@keyframes museumRiver { to { background-position: 0 132px, 0 0; } }

.ambient { opacity: .35; mix-blend-mode: screen; }
.stars { opacity: .24; }
#bgCanvas { opacity: .38; }
.meteor, .glyph-field { display: none; }
.cunei-veil {
  opacity: .26;
  font-size: 1.35rem;
  letter-spacing: 0;
  word-spacing: .75em;
}
.river-glow { opacity: .46; }

[data-theme="light"] .ambient {
  opacity: .38;
  mix-blend-mode: multiply;
}

[data-theme="light"] .stars {
  opacity: .16;
  mix-blend-mode: multiply;
  filter: sepia(.45) saturate(.75);
}

[data-theme="light"] #bgCanvas {
  opacity: .2;
  mix-blend-mode: multiply;
}

[data-theme="light"] .cunei-veil {
  color: rgba(48, 70, 63, .2);
  text-shadow: none;
  filter: none;
}

[data-theme="light"] .river-glow {
  opacity: .34;
  filter: drop-shadow(0 0 10px rgba(23, 103, 122, .18));
}

.progress {
  height: 2px;
  background: linear-gradient(90deg, var(--glaze), var(--gold), var(--clay));
  box-shadow: 0 0 16px rgba(29, 147, 168, .6);
}

.nav {
  top: 2px;
  height: 66px;
  padding: 0 clamp(16px, 3vw, 46px);
  background: linear-gradient(180deg, rgba(7, 16, 15, .94), rgba(7, 16, 15, .72));
  border-color: transparent;
  transition: background .35s ease, border-color .35s ease, height .35s ease;
}

.nav.scrolled {
  height: 58px;
  background: rgba(7, 16, 15, .97);
  border-color: var(--line);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}

[data-theme="light"] .nav,
[data-theme="light"] .nav.scrolled { background: rgba(221, 226, 216, .94); }

[data-theme="light"] .iconbtn {
  background: rgba(241, 243, 235, .72);
  border-color: rgba(43, 58, 51, .24);
}

.brand {
  gap: 12px;
  color: var(--ink);
  font-family: var(--utility);
  font-size: .69rem;
  font-weight: 500;
  text-transform: uppercase;
}

.brand svg { width: 25px; height: 25px; color: var(--gold); }

.links { gap: 3px; max-width: calc(100% - 350px); }
.links a {
  padding: 8px 8px;
  border-radius: 2px;
  color: var(--faint);
  font-family: var(--utility);
  font-size: .72rem;
}
.links a:hover, .links a.active { color: var(--ink); background: transparent; }
.links a.active { box-shadow: inset 0 -1px var(--gold); }

.actions { gap: 8px; }
.iconbtn {
  min-width: 37px;
  height: 37px;
  border-radius: 50%;
  border-color: rgba(216, 187, 114, .28);
  background: rgba(7, 16, 15, .52);
}
.iconbtn:hover { transform: translateY(-1px); background: rgba(216, 187, 114, .12); }
.langbtn { width: auto; min-width: 45px; border-radius: 19px; }
.audio-wave { display: none; position: absolute; width: 6px; height: 6px; right: 0; top: 0; border-radius: 50%; background: #58d3c7; box-shadow: 0 0 0 4px rgba(88, 211, 199, .15); }
#soundBtn { position: relative; }
#soundBtn.on .audio-wave { display: block; animation: audioPulse 1.8s ease-out infinite; }
@keyframes audioPulse { 70%, 100% { box-shadow: 0 0 0 9px rgba(88, 211, 199, 0); } }

.hero {
  min-height: 96svh;
  padding: 108px clamp(18px, 5vw, 72px) 54px;
  place-items: end start;
}

.hero::before {
  background-position: 61% center;
  transform: scale(1.01);
  filter: saturate(.85) contrast(1.08);
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(4, 10, 9, .92) 0%, rgba(4, 10, 9, .69) 35%, rgba(4, 10, 9, .14) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(7, 16, 15, .05) 28%, rgba(7, 16, 15, .25) 100%);
}

[data-theme="light"] .hero::after {
  background:
    linear-gradient(90deg, rgba(16, 22, 19, .78), rgba(16, 22, 19, .48) 42%, rgba(16, 22, 19, .08) 76%),
    linear-gradient(0deg, var(--bg), transparent 25%);
}

.hero-effects { inset: 70px 0 0; opacity: .62; }
.hero-effects::after { opacity: .42; letter-spacing: 0; word-spacing: 1.1em; }
.hero-river { height: 30%; opacity: .72; }
.hero-moon { left: auto; right: 12%; top: 7%; }

.hero-content {
  width: min(1080px, 100%);
  margin: 0;
  padding: 0;
  text-align: left;
}

.hero-era {
  display: flex;
  gap: 28px;
  width: min(390px, 80vw);
  margin-bottom: 18px;
  color: rgba(238, 231, 216, .7);
  font-family: var(--utility);
  font-size: .64rem;
  text-transform: uppercase;
}
.hero-era span { flex: 1; border-top: 1px solid rgba(238, 231, 216, .3); padding-top: 7px; }
.hero-era span:last-child { text-align: right; }

.hero-monument {
  margin: 0;
  color: #f1eadb;
  font-family: var(--serif);
  font-size: clamp(3.7rem, 8.7vw, 8.5rem);
  line-height: .8;
  font-weight: 700;
  text-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}

.seal { display: none; }
.hero h1 {
  margin: 28px 0 8px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: clamp(1.15rem, 2.1vw, 1.8rem);
  line-height: 1.3;
  font-weight: 500;
}
.gradient-text { color: var(--gold); background: none; }
.subtitle {
  margin: 0 0 12px;
  color: var(--clay2);
  font-family: var(--utility);
  font-size: clamp(.72rem, 1.2vw, .88rem);
  text-transform: uppercase;
}
.tagline { max-width: 620px; color: rgba(238, 231, 216, .74); font-size: 1rem; }

/* The hero photograph remains nocturnal in both themes, so its copy keeps
   the museum-night contrast while the surrounding interface turns daylight. */
[data-theme="light"] .hero .gradient-text { color: #d8bb72; }
[data-theme="light"] .hero .subtitle { color: #e0a06f; }
[data-theme="light"] .hero .tagline { color: rgba(245, 240, 225, .86); }
[data-theme="light"] .hero .stat { background: transparent; }
[data-theme="light"] .hero .stat b { color: #f1eadb; }
[data-theme="light"] .hero .stat span { color: rgba(238, 231, 216, .66); }
[data-theme="light"] .hero-index a {
  color: rgba(238, 231, 216, .78);
  border-color: rgba(216, 187, 114, .28);
  background: rgba(7, 16, 15, .54);
}
[data-theme="light"] .hero-index svg { color: #d8bb72; }

.hero-stats { gap: 0; margin: 27px 0 22px; }
.stat {
  min-width: 140px;
  padding: 10px 22px 10px 0;
  margin-right: 22px;
  border: 0;
  border-right: 1px solid rgba(216, 187, 114, .28);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}
.stat b { color: var(--ink); font-size: 1.2rem; }
.stat span { color: rgba(238, 231, 216, .55); font-size: .68rem; }

.hero-index { grid-template-columns: repeat(8, minmax(72px, 1fr)); gap: 0; max-width: 820px; }
.hero-index a {
  min-height: 58px;
  padding: 9px 11px;
  gap: 7px;
  border-width: 1px 0 1px 1px;
  border-radius: 0;
  background: rgba(7, 16, 15, .45);
  backdrop-filter: blur(8px);
}
.hero-index a:last-child { border-right-width: 1px; }
.hero-index a:hover { transform: none; background: rgba(216, 187, 114, .11); }
.hero-index svg { width: 16px; height: 16px; }
.hero-index span { font-family: var(--utility); font-size: .64rem; }
.scroll { left: auto; right: clamp(18px, 5vw, 72px); bottom: 42px; transform: none; font-family: var(--utility); }

main { position: relative; z-index: 3; overflow: hidden; }
.sec {
  max-width: var(--max);
  padding: clamp(80px, 7.4vw, 108px) clamp(20px, 4vw, 56px);
}

#quick {
  padding-top: 76px;
  padding-bottom: 96px;
}

#sources { padding-bottom: 62px; }

#quick::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(7, 16, 15, .94), rgba(7, 16, 15, .64) 56%, rgba(7, 16, 15, .82)),
    linear-gradient(0deg, var(--bg), transparent 34%, rgba(7, 16, 15, .82)),
    url("assets/cities-monuments-artifacts/cities-rivers/river-trade.jpg") center 56% / cover no-repeat;
  filter: saturate(.7) contrast(1.04);
}

[data-theme="light"] #quick::after {
  background:
    linear-gradient(90deg, rgba(220, 225, 215, .94), rgba(220, 225, 215, .68) 56%, rgba(215, 219, 208, .88)),
    linear-gradient(0deg, var(--bg), transparent 34%, rgba(215, 219, 208, .78)),
    url("assets/cities-monuments-artifacts/cities-rivers/river-trade.jpg") center 56% / cover no-repeat;
  filter: saturate(.62) contrast(.92) brightness(1.06);
}

#quick .sec-head { margin-bottom: 34px; }

.sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

#pantheon::after, #writing::after, #map::after, #history::after, #faq::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(110deg, rgba(16, 30, 27, .88), rgba(7, 16, 15, .45));
}

#pantheon::after {
  background:
    linear-gradient(112deg, rgba(12, 31, 35, .94), rgba(7, 16, 15, .56)),
    radial-gradient(circle at 76% 18%, rgba(22, 77, 98, .22), transparent 32%);
}

#writing::after {
  background:
    linear-gradient(110deg, rgba(31, 25, 20, .72), rgba(7, 16, 15, .58)),
    repeating-linear-gradient(168deg, transparent 0 72px, rgba(185, 95, 61, .045) 73px 75px, transparent 76px 144px);
}

#map::after {
  background: linear-gradient(118deg, rgba(12, 35, 39, .92), rgba(11, 27, 31, .52));
}

#history::after {
  background:
    radial-gradient(ellipse at 68% 24%, rgba(185, 95, 61, .11), transparent 35%),
    linear-gradient(112deg, rgba(25, 29, 24, .92), rgba(7, 16, 15, .55));
}

#faq::after {
  background: linear-gradient(112deg, rgba(22, 34, 28, .88), rgba(7, 16, 15, .5));
}

[data-theme="light"] #pantheon::after,
[data-theme="light"] #writing::after,
[data-theme="light"] #map::after,
[data-theme="light"] #history::after,
[data-theme="light"] #faq::after {
  background:
    linear-gradient(110deg, rgba(195, 210, 202, .9), rgba(226, 224, 211, .7)),
    repeating-linear-gradient(165deg, transparent 0 74px, rgba(30, 90, 109, .055) 75px 77px, transparent 78px 146px);
}

[data-theme="light"] #pantheon::after {
  background: linear-gradient(112deg, rgba(188, 208, 203, .94), rgba(225, 231, 219, .74));
}

[data-theme="light"] #writing::after {
  background:
    linear-gradient(112deg, rgba(218, 211, 195, .92), rgba(226, 232, 220, .72)),
    repeating-linear-gradient(168deg, transparent 0 72px, rgba(147, 75, 53, .07) 73px 75px, transparent 76px 144px);
}

[data-theme="light"] #map::after {
  background: linear-gradient(118deg, rgba(187, 210, 208, .94), rgba(221, 228, 216, .76));
}

[data-theme="light"] #history::after {
  background:
    radial-gradient(ellipse at 68% 24%, rgba(147, 75, 53, .12), transparent 35%),
    linear-gradient(112deg, rgba(202, 213, 201, .94), rgba(229, 229, 214, .76));
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(190px, .52fr) 1.48fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: end;
  margin-bottom: 38px;
  text-align: left;
}
.kicker {
  color: var(--clay2);
  font-family: var(--utility);
  font-size: .68rem;
  text-transform: uppercase;
}
.sec h2 {
  max-width: 860px;
  color: var(--ink);
  font-size: clamp(2.8rem, 4.25vw, 3.55rem);
  line-height: 1.08;
  font-weight: 500;
}
.sec-head p {
  grid-column: 2;
  max-width: 690px;
  margin: -8px 0 0;
  color: var(--muted);
}

.lede {
  max-width: none;
  margin: 0 0 34px clamp(0px, 20vw, 250px);
  padding: 0 0 0 26px;
  border: 0;
  border-left: 2px solid var(--glaze);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}
.lede strong { color: var(--gold); }

.quick-grid { grid-template-columns: repeat(5, 1fr); gap: 0; }
.quick {
  min-height: 196px;
  padding: 26px 24px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.quick:last-child { border-right: 1px solid var(--line); }
.quick:hover { transform: none; background: rgba(216, 187, 114, .055); box-shadow: none; }
.quick .num {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 24px;
  border: 0;
  border-radius: 0;
  color: var(--clay2);
  font-family: var(--utility);
  text-align: left;
}
.quick h3 { color: var(--ink); font-size: 1.15rem; }
.quick p { color: var(--faint); font-size: .82rem; }

.tools { justify-content: flex-start; margin-left: clamp(0px, 20vw, 250px); }
.chip {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--faint);
  padding: 8px 13px;
}
.chip:hover, .chip.active { color: var(--ink); border-color: var(--clay2); background: transparent; }
.search { justify-content: flex-end; margin-top: -48px; margin-bottom: 30px; }
.search input {
  width: min(300px, 100%);
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  padding: 10px 0;
}

.cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.flip {
  height: 500px;
}
.face {
  border: 1px solid rgba(216, 187, 114, .13);
  border-radius: 2px;
  background: #111b19;
  box-shadow: none;
}
.front::before { background: linear-gradient(180deg, transparent 36%, rgba(4, 8, 8, .93) 100%); }
.god-art { filter: saturate(.72) contrast(1.1); }
.flip:hover .god-art { filter: saturate(.98) contrast(1.08); }
.god-front-copy { padding: 24px; }
.sigil { width: 36px; height: 36px; border-radius: 50%; }
.front h3, .back h3 { color: #f1eadb; font-size: 1.42rem; font-weight: 500; }
.latin { color: var(--clay2); font-family: var(--utility); font-size: .68rem; font-style: normal; text-transform: uppercase; }
.badge { border: 0; border-radius: 0; padding: 0; color: #8dd7d6; background: transparent; }
.mini { color: rgba(238, 231, 216, .62); }
.back {
  padding: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(circle at 85% 10%, rgba(216, 187, 114, .16), transparent 24%),
    linear-gradient(145deg, #16231f, #0d1715);
}
.back::after { content: "TAP TO RETURN"; position: absolute; right: 22px; bottom: 18px; color: var(--faint); font-family: var(--utility); font-size: .55rem; }
.back p { color: var(--muted); font-size: .95rem; }
.attrs div { color: var(--muted); border-color: var(--line); }
.attrs b { color: var(--clay2); font-family: var(--utility); font-size: .62rem; text-transform: uppercase; }
.flip:hover .flip-inner, .flip:focus-within .flip-inner { transform: none; }
.flip.open .flip-inner { transform: rotateY(180deg); }

.info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.info {
  min-height: 240px;
  padding: 28px;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}
.info:hover { transform: none; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(216, 187, 114, .36); }
.info .icon { width: 34px; height: 34px; color: var(--clay2); }
.info .icon svg { width: 34px; height: 34px; }
.info h3 { color: var(--ink); font-size: 1.25rem; font-weight: 500; }
.info p { color: var(--muted); }
.fact { color: var(--faint); border-color: var(--line); }

#numberGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#numberGrid .info {
  min-height: 250px;
  padding: 32px 34px;
  background:
    radial-gradient(circle at 92% 8%, rgba(216, 187, 114, .07), transparent 28%),
    var(--bg);
}

#numberGrid .info:nth-child(2),
#numberGrid .info:nth-child(3) {
  background:
    linear-gradient(135deg, rgba(22, 77, 98, .12), transparent 56%),
    var(--bg);
}

#numberGrid .icon { margin-bottom: 24px; }
#numberGrid .latin { margin-top: 6px; }
#numberGrid .fact { margin-top: auto; }

#cityGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 390px;
  gap: 12px;
  background: transparent;
}
.museum-card {
  grid-column: span 1;
  min-height: 0;
  padding: 0;
  position: relative;
  background: #0a0f0e;
  overflow: hidden;
}
.museum-card:nth-child(1),
.museum-card:nth-child(2),
.museum-card:nth-child(5),
.museum-card:nth-child(6) { grid-column: span 2; }
.museum-card .artifact-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.03) brightness(1.06);
  transition: transform .7s ease, filter .7s ease;
}

.museum-card:hover .artifact-image {
  transform: scale(1.035);
  filter: saturate(.98) contrast(1.02) brightness(1.08);
}
.museum-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 8, 8, .04) 32%, rgba(5, 8, 8, .94) 100%);
}
.ai-label {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  color: rgba(241, 234, 219, .82);
  background: rgba(5, 10, 9, .68);
  border: 1px solid rgba(216, 187, 114, .24);
  border-radius: 2px;
  font-family: var(--utility);
  font-size: .56rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.ai-label::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 8px rgba(185, 95, 61, .55);
}
.hero-ai {
  top: 88px;
  right: clamp(18px, 5vw, 72px);
}
.stele-ai {
  top: 26px;
  right: 26px;
}
.artifact-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 26px; }
.museum-card h3 { color: #f0e9d9; font-size: 1.32rem; }
.museum-card p { max-width: 620px; color: rgba(238, 231, 216, .78); }
.museum-card .fact { color: rgba(238, 231, 216, .57); }

.table-wrap { border-radius: 0; background: transparent; }
th { color: var(--clay2); background: rgba(185, 95, 61, .08); font-family: var(--utility); font-weight: 500; }
td { color: var(--muted); }
td:first-child { color: var(--ink); }

.law-feature {
  grid-template-columns: minmax(350px, .74fr) minmax(0, 1.26fr);
  gap: 0;
  margin-top: 58px;
  border: 1px solid rgba(216, 187, 114, .2);
  background: #060b0a;
  box-shadow: 0 38px 90px rgba(0, 0, 0, .36);
}
.stele {
  min-height: 760px;
  display: grid;
  place-items: center;
  padding: 26px;
  border: 0;
  border-right: 1px solid rgba(216, 187, 114, .15);
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(216, 187, 114, .13), transparent 45%),
    linear-gradient(145deg, #090d0c, #020403);
  box-shadow: none;
}
.stele-img {
  min-height: 700px;
  border-radius: 0;
  object-fit: contain;
  filter: brightness(1.16) contrast(1.08) saturate(.72);
}
.stele-caption {
  left: 28px;
  right: 28px;
  bottom: 22px;
  color: rgba(238, 231, 216, .72);
  font-family: var(--utility);
  font-size: .58rem;
}
.law-copy {
  align-self: center;
  padding: clamp(42px, 5vw, 68px);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 92% 6%, rgba(22, 77, 98, .2), transparent 28%),
    linear-gradient(135deg, rgba(18, 29, 26, .96), rgba(8, 15, 13, .98));
  box-shadow: none;
}
.law-copy .kicker { color: #dc8a59; }
.law-copy h3 {
  max-width: 760px;
  color: #f0e9da;
  font-size: clamp(2.25rem, 3.65vw, 3.6rem);
  line-height: 1.1;
  font-weight: 500;
}
.law-copy p { color: rgba(238, 231, 216, .72); }
.object-record {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0 24px;
  border-block: 1px solid rgba(216, 187, 114, .17);
}
.object-record span { padding: 13px 14px 13px 0; }
.object-record span + span { padding-left: 18px; border-left: 1px solid rgba(216, 187, 114, .14); }
.object-record small,
.object-record b { display: block; font-family: var(--utility); }
.object-record small { color: rgba(238, 231, 216, .42); font-size: .52rem; }
.object-record b { margin-top: 4px; color: #d8bb72; font-size: .76rem; font-weight: 500; }
.law-copy .song-note {
  padding: 18px 22px;
  border: 0;
  border-left: 2px solid #1d93a8;
  color: rgba(240, 234, 220, .9);
  background: rgba(29, 147, 168, .1);
}
.law-grid { gap: 1px; background: rgba(216, 187, 114, .16); }
.law-point { min-height: 148px; padding: 18px; border: 0; border-radius: 0; background: #0d1714; }
.law-point b { color: #dc8a59; }
.law-point span { color: rgba(238, 231, 216, .64); }

.numeral-demo { justify-content: flex-start; gap: 0; border: 1px solid var(--line); }
.numeral-demo .ncell { flex: 1; min-width: 120px; border-width: 0 1px 0 0; border-radius: 0; background: transparent; }
.numeral-demo .ncell:last-child { border-right: 0; }
.numeral-demo .ncell:hover { transform: none; background: rgba(216, 187, 114, .05); }

.map-wrap { grid-template-columns: minmax(420px, .9fr) 1.1fr; gap: 1px; background: var(--line); }
.map-panel { padding: 28px; border: 0; border-radius: 0; background: #b49a6e; box-shadow: none; }
.map-info { min-height: 100%; padding: clamp(30px, 5vw, 70px); border: 0; border-radius: 0; background: var(--bg); }
.map-info h3 { color: var(--ink); font-size: 2rem; }

.timeline {
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 187, 114, .36) transparent;
}
.timeline::-webkit-scrollbar { height: 3px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb { background: rgba(216, 187, 114, .36); border-radius: 0; }
.tl-item { width: 178px; }
.tl-item::before { background: var(--line); }
.tl-item b { color: var(--ink); font-weight: 500; }
.tl-item .tl-dot { border-color: var(--clay2); }

.scroll-book { max-width: 1160px; }
.book {
  min-height: 610px;
  padding: 24px;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 15% 85%, rgba(0, 0, 0, .28)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(216, 187, 114, .035) 80px 81px),
    #0a1210;
  box-shadow: 0 42px 100px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(216, 187, 114, .19);
  scrollbar-width: none;
}
.book::-webkit-scrollbar { display: none; }
.book::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(216, 187, 114, .035), transparent 18% 82%, rgba(0, 0, 0, .12));
}
.book::after { height: 70px; }
.book-track { min-height: 575px; }
.tablet-page { min-height: 575px; }
.tablet-face {
  width: min(900px, calc(100% - 32px));
  min-height: 510px;
  grid-template-columns: minmax(210px, .72fr) 1.5fr;
  gap: 30px;
  padding: 40px;
  border: 1px solid rgba(64, 34, 14, .4);
  border-radius: 34px 26px 38px 28px / 24px 32px 27px 35px;
  background:
    radial-gradient(ellipse at 18% 5%, rgba(255, 220, 151, .42), transparent 34%),
    radial-gradient(circle at 74% 18%, rgba(71, 37, 14, .12) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 76%, rgba(255, 221, 158, .1) 0 1px, transparent 2px),
    repeating-linear-gradient(9deg, rgba(78, 40, 14, .055) 0 1px, transparent 1px 37px),
    linear-gradient(138deg, #bd8650, #946039 52%, #aa7042);
  background-size: auto, 56px 62px, 74px 68px, auto, auto;
  clip-path: none;
  box-shadow:
    inset 12px 14px 28px rgba(255, 221, 157, .13),
    inset -18px -20px 34px rgba(56, 27, 8, .31),
    0 26px 46px rgba(0, 0, 0, .46);
  transform: perspective(1000px) rotateX(1deg);
}
.tablet-face::before {
  inset: 12px;
  border-color: rgba(62, 31, 11, .18);
  border-radius: 26px 20px 30px 22px / 18px 26px 21px 29px;
}
.tablet-face::after { left: 8%; right: 8%; bottom: -5%; height: 28px; opacity: .72; }
.tablet-inscription { border-color: rgba(54, 30, 12, .28); }
.cunei-row { letter-spacing: 0; word-spacing: .58em; color: rgba(52, 26, 9, .52); }
.tablet-translation {
  border: 1px solid rgba(58, 31, 12, .18);
  border-radius: 4px;
  background: rgba(71, 39, 16, .075);
  box-shadow: inset 0 1px rgba(255, 231, 178, .12);
}
.tablet-page .chap,
.tablet-meta b { letter-spacing: 0; }
.tablet-page h3 { font-size: clamp(1.65rem, 3vw, 2.6rem); }
.tablet-page p { line-height: 1.9; }
#mythBook .tablet-face {
  background:
    radial-gradient(ellipse at 18% 5%, rgba(255, 210, 139, .34), transparent 34%),
    radial-gradient(circle at 72% 22%, rgba(62, 28, 11, .14) 0 2px, transparent 3px),
    repeating-linear-gradient(11deg, rgba(71, 31, 11, .06) 0 1px, transparent 1px 39px),
    linear-gradient(138deg, #ad7545, #7c4b2b 54%, #93603a);
  background-size: auto, 62px 58px, auto, auto;
}
[data-theme="light"] .book {
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(43, 58, 51, .045) 80px 81px),
    #c2cbc0;
}
[data-theme="light"] .tablet-face {
  background:
    radial-gradient(ellipse at 18% 5%, rgba(255, 226, 164, .48), transparent 34%),
    radial-gradient(circle at 74% 18%, rgba(71, 37, 14, .1) 0 2px, transparent 3px),
    repeating-linear-gradient(9deg, rgba(78, 40, 14, .05) 0 1px, transparent 1px 37px),
    linear-gradient(138deg, #c89660, #a56d42 52%, #bb8050);
  background-size: auto, 56px 62px, auto, auto;
}
.book-nav { gap: 7px; }
.book-nav button {
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
}
.book-nav span { font-family: var(--utility); }
.book-dots button { width: 20px; height: 2px; border-radius: 0; }
.book-dots button.active { transform: none; background: var(--clay2); }
.book.is-turning .tablet-face { animation: tabletTurn .42s ease; }
@keyframes tabletTurn { 50% { transform: translateY(-5px) rotateX(1deg); filter: brightness(1.08); } }

.glossary { grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.term { min-height: 180px; padding: 24px; border: 0; border-radius: 0; background: var(--bg); }
.term h3 { color: var(--ink); font-size: 1.15rem; }
.term small { color: var(--clay2); font-family: var(--utility); }

.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  max-width: none;
  align-items: start;
}
details { margin: 0; border-width: 0 0 1px; border-radius: 0; background: transparent; }
summary { padding: 22px 52px 22px 0; color: var(--ink); font-family: var(--serif); font-size: 1.1rem; font-weight: 500; position: relative; }
summary::after { content: "+"; position: absolute; right: 5px; top: 20px; color: var(--clay2); font-family: var(--sans); font-size: 1.3rem; }
details[open] summary::after { content: "-"; }
details p { padding: 0 70px 24px 0; border: 0; color: var(--muted); }

.sources > p { max-width: 720px; margin: 0 0 22px; }
.source-grid { grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--line); }
.source-card { position: relative; grid-column: span 3; min-height: 138px; padding: 20px 42px 20px 20px; border: 0; border-radius: 0; background: rgba(7, 16, 15, .96); }
.source-card:nth-last-child(-n+3) { grid-column: span 4; }
.source-card::after { content: "↗"; position: absolute; top: 17px; right: 18px; color: var(--faint); font-size: .8rem; }
.source-card:hover { transform: none; box-shadow: inset 0 -3px var(--clay); background: rgba(14, 28, 25, .98); }
.source-card b { color: var(--ink); }

[data-theme="light"] .source-card { background: rgba(230, 234, 224, .92); }
[data-theme="light"] .source-card:hover { background: rgba(239, 241, 232, .98); }

.footer {
  padding: 36px clamp(20px, 4vw, 56px) 20px;
  background:
    linear-gradient(90deg, rgba(29, 147, 168, .1), transparent 25%),
    #050a09;
}
.footer-grid { max-width: var(--max); grid-template-columns: 1.15fr .55fr 1.1fr; gap: 44px; }
.footer-brand { margin-bottom: 6px; color: var(--ink); font-size: 1.15rem; }
.footer-brand svg { width: 24px; height: 24px; }
.footer p { max-width: 520px; color: var(--faint); font-size: .78rem; line-height: 1.55; }
.footer a { margin: 3px 0; font-size: .78rem; }
.footer-grid > div:last-child p { max-width: 620px; font-size: .72rem; }
.footer h3 { color: var(--clay2); font-family: var(--utility); font-size: .68rem; text-transform: uppercase; }
.footer-bottom { margin-top: 18px; padding-top: 11px; font-family: var(--utility); font-size: .62rem; }
.to-top { border-radius: 50%; }

[data-theme="light"] .footer {
  color: var(--muted);
  background:
    linear-gradient(90deg, rgba(23, 103, 122, .1), transparent 25%),
    #bfc8bd;
}
[data-theme="light"] .footer-brand { color: var(--ink); }
[data-theme="light"] .footer p,
[data-theme="light"] .footer a { color: var(--muted); }

.river-label {
  position: fixed;
  z-index: 2;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  color: rgba(109, 196, 200, .46);
  font-family: var(--utility);
  font-size: .55rem;
  text-transform: uppercase;
  pointer-events: none;
}

.reveal { transform: translateY(18px); transition-duration: .8s; }

@media (max-width: 1220px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flip { height: 520px; }
}

@media (max-width: 1080px) {
  .sec h2 { font-size: 3rem; }
  .hero-index { grid-template-columns: repeat(4, 1fr); max-width: 630px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flip { height: 540px; }
  #cityGrid { grid-template-columns: repeat(2, 1fr); }
  .museum-card,
  .museum-card:nth-child(1),
  .museum-card:nth-child(2),
  .museum-card:nth-child(5),
  .museum-card:nth-child(6) { grid-column: span 1; }
  .museum-card:nth-child(1), .museum-card:nth-child(6) { min-height: 520px; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .source-grid, .glossary { grid-template-columns: repeat(2, 1fr); }
  .source-card, .source-card:nth-last-child(-n+3) { grid-column: auto; }
  .source-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .nav { height: 64px; }
  .links {
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100svh - 84px);
    padding: 10px;
    overflow-y: auto;
    background: rgba(7, 16, 15, .97);
    border: 1px solid rgba(216, 187, 114, .26);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
    backdrop-filter: blur(18px) saturate(1.1);
  }
  .links.open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
  }
  [data-theme="light"] .links {
    background: rgba(229, 232, 223, .98);
    border-color: rgba(106, 87, 45, .24);
    box-shadow: 0 24px 60px rgba(38, 48, 43, .18);
  }
  .links a {
    min-width: 0;
    padding: 12px 8px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .links a.active {
    color: var(--gold);
    background: rgba(216, 187, 114, .08);
    box-shadow: inset 2px 0 var(--gold);
  }
  .hero { padding-top: 94px; }
  .hero-monument { font-size: clamp(3.8rem, 12vw, 7rem); }
  .sec-head { grid-template-columns: 1fr; gap: 12px; }
  .sec-head p { grid-column: 1; margin: 8px 0 0; }
  .lede, .tools { margin-left: 0; }
  .search { margin-top: 0; justify-content: flex-start; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .quick:nth-child(5) { grid-column: span 2; }
  .law-feature, .map-wrap { grid-template-columns: 1fr; }
  .stele, .stele-img { min-height: 650px; }
  .stele { border-right: 0; border-bottom: 1px solid rgba(216, 187, 114, .15); }
  .law-copy { padding: 42px; }
  .map-info { min-height: 300px; }
  .tablet-face { width: min(650px, calc(100% - 24px)); grid-template-columns: 1fr; padding: 32px; }
  .tablet-inscription { max-height: 175px; overflow: hidden; border-right: 0; border-bottom: 1px solid rgba(54, 30, 12, .2); }
  .book { min-height: 720px; }
  .book-track, .tablet-page { min-height: 675px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 660px) {
  body::before, .river-label { display: none; }
  .brand span { display: none; }
  .hero { min-height: 100svh; padding: 88px 16px 32px; }
  .hero::before { background-position: 66% center; }
  .hero::after { background: linear-gradient(90deg, rgba(4, 10, 9, .85), rgba(4, 10, 9, .24)), linear-gradient(0deg, var(--bg), transparent 32%); }
  .hero-era { margin-bottom: 14px; }
  .hero-monument { width: 100%; font-size: clamp(2.55rem, 10.8vw, 4.5rem); line-height: .86; white-space: nowrap; }
  .hero h1 { margin-top: 22px; }
  .tagline { width: 100%; max-width: calc(100vw - 32px); font-size: .88rem; overflow-wrap: anywhere; }
  .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .stat { min-width: 0; padding: 8px 12px 8px 0; margin: 0 12px 8px 0; }
  .hero-index { display: flex; max-width: calc(100vw - 32px); overflow-x: auto; scroll-snap-type: x mandatory; }
  .hero-index a { flex: 0 0 104px; scroll-snap-align: start; }
  .scroll { display: none; }
  .sec { padding: 68px 16px; }
  #quick { padding-top: 58px; padding-bottom: 72px; }
  #sources { padding-bottom: 44px; }
  .sec h2 { font-size: 2.45rem; }
  .quick-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .quick, .quick:nth-child(5) { flex: 0 0 80vw; min-height: 250px; grid-column: auto; scroll-snap-align: start; }
  .tools { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .chip { white-space: nowrap; }
  .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-right: 12px; }
  .flip { flex: 0 0 84vw; height: 520px; scroll-snap-align: center; }
  .info-grid, #cityGrid, .source-grid, .glossary { grid-template-columns: 1fr; }
  #numberGrid { grid-template-columns: 1fr; }
  .source-card, .source-card:nth-last-child(-n+3), .source-card:last-child { grid-column: auto; }
  #cityGrid { grid-auto-rows: auto; }
  .museum-card,
  .museum-card:nth-child(1),
  .museum-card:nth-child(2),
  .museum-card:nth-child(5),
  .museum-card:nth-child(6) { min-height: 430px; }
  .artifact-copy { padding: 22px; }
  .info { min-height: 230px; }
  .law-grid { grid-template-columns: 1fr; }
  .stele, .stele-img { min-height: 520px; }
  .stele { padding: 18px; }
  .law-copy { padding: 30px 22px; }
  .law-copy h3 { font-size: 2.1rem; }
  .object-record { grid-template-columns: 1fr; }
  .object-record span { padding: 10px 0; }
  .object-record span + span { padding-left: 0; border-left: 0; border-top: 1px solid rgba(216, 187, 114, .14); }
  .numeral-demo { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .numeral-demo .ncell { flex: 0 0 125px; }
  .book { min-height: 755px; padding: 10px; }
  .book-track, .tablet-page { min-height: 730px; }
  .tablet-page { padding: 10px 3px; }
  .tablet-face { width: calc(100% - 8px); min-height: 690px; padding: 28px 20px; gap: 16px; border-radius: 24px 18px 28px 20px / 18px 24px 20px 26px; }
  .tablet-inscription { max-height: 120px; }
  .tablet-translation { padding: 20px; }
  .tablet-page h3 { font-size: 1.7rem; }
  .tablet-page p { font-size: .9rem; line-height: 1.78; }
  .tablet-meta { grid-template-columns: 1fr; gap: 6px; }
  .book-nav { flex-wrap: nowrap; }
  .book-nav button { min-width: 38px; padding: 0; }
  details p { padding-right: 0; }
  .faq { grid-template-columns: 1fr; }
  .footer { padding-top: 34px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid > div:first-child { grid-column: auto; }
  .footer-grid > div:nth-child(2) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; }
  .footer-grid > div:nth-child(2) h3 { grid-column: 1 / -1; }
  .hero-index, .quick-grid, .tools, .cards, .numeral-demo, .timeline { scrollbar-width: none; }
  .hero-index::-webkit-scrollbar, .quick-grid::-webkit-scrollbar, .tools::-webkit-scrollbar, .cards::-webkit-scrollbar, .numeral-demo::-webkit-scrollbar, .timeline::-webkit-scrollbar { display: none; }
}

@media (hover: none) {
  .flip { min-height: 0; }
  .flip-inner { height: 100%; }
  .flip:hover .flip-inner { transform: none; }
  .flip.open .flip-inner { transform: rotateY(180deg); }
  .front, .back { position: absolute; inset: 0; border-radius: 2px; }
  .back { display: block; transform: rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}