/* Layout: a full-bleed painted stage. The caption sits lower-left like a gallery label,
   teaching tools run along the top, and the time ribbon runs along the bottom.
   One deliberate dark, cinematic look: it is made to be projected. */
:root {
  --night: #0b1120;
  --night-2: #141c30;
  --parchment: #f6f1e6;
  --dim: #c8c0ab;
  --gold: #ffb81c;
  --gold-soft: #dbbf6b;
  --line: rgba(246, 241, 230, 0.22);

  --era-journey: #ffb81c;
  --era-divided: #93c742;
  --era-found: #49cce6;
  --era-war: #fc4e6d;
  --era-signs: #f6f1e6;
  --era-final: #a16faf;

  --display: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: max(16px, 3.6vw);
  --ribbon-h: 4.4rem;

  color-scheme: dark;
  font-size: clamp(15px, 0.55vw + 0.6vh + 4px, 26px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night);
  color: var(--parchment);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }

.eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
kbd {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  min-width: 1.5em;
  padding: 0.05em 0.35em;
  border: 1px solid var(--line);
  color: var(--dim);
  text-align: center;
}

/* ---------- stage ---------- */

.app { position: fixed; inset: 0; }
.stage { position: absolute; inset: 0; }
#art { display: block; width: 100%; height: 100%; }
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5, 8, 16, 0.55), rgba(5, 8, 16, 0) 16%),
    radial-gradient(ellipse 72% 80% at 0% 100%, rgba(5, 8, 16, 0.9) 0%, rgba(5, 8, 16, 0.7) 40%, rgba(5, 8, 16, 0) 74%),
    linear-gradient(to top, rgba(5, 8, 16, 0.78), rgba(5, 8, 16, 0) 24%);
  transition: opacity 0.6s var(--ease);
}
/* Daylight and light-filled scenes get a deeper shade behind the words. */
.scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(5, 8, 16, 0.76) 0%, rgba(5, 8, 16, 0.66) 42%, rgba(5, 8, 16, 0) 62%);
  -webkit-mask-image: linear-gradient(to top, #000 52%, transparent 82%);
  mask-image: linear-gradient(to top, #000 52%, transparent 82%);
  opacity: 0; transition: opacity 0.9s var(--ease);
}
.app.bright .scrim::after { opacity: 1; }
.app.text-hidden .scrim { opacity: 0.35; }

/* ---------- top bar ---------- */

.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px) + 1.1rem) var(--gutter) 1rem;
  transition: opacity 0.4s var(--ease);
}
.brand {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand span { color: var(--gold-soft); font-style: italic; }
.era-label {
  margin: 0 auto 0 1.2rem; min-width: 0;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.era-label b { color: var(--era); font-weight: 600; }
.tools { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.tools button, .map .close {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: rgba(11, 17, 32, 0.35);
  border: 1px solid var(--line);
  padding: 0.45em 0.75em;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tools button:hover, .map .close:hover { background: rgba(246, 241, 230, 0.12); border-color: rgba(246, 241, 230, 0.45); }
.tools button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 184, 28, 0.14); }
.tools button[aria-pressed="true"] kbd { border-color: var(--gold); color: var(--gold); }

/* ---------- caption ---------- */

.caption {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--ribbon-h) + env(safe-area-inset-bottom, 0px) + 3.2vh);
  width: min(44vw, 38rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  transition: opacity 0.4s var(--ease);
}
.caption .eyebrow a { text-decoration: none; border-bottom: 1px solid rgba(219, 191, 107, 0.45); }
.caption .eyebrow a:hover { color: var(--parchment); border-color: var(--parchment); }
.caption .era-start { color: var(--era); }
.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 3.3rem;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.summary {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.5;
  max-width: 34em;
  text-wrap: pretty;
}
.quote {
  margin: 0.2rem 0 0;
  padding: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.35;
  color: #fbeccb;
}
.quote p { margin: 0; text-wrap: balance; }
.quote cite {
  display: block; margin-top: 0.3rem;
  font-family: var(--sans); font-style: normal; font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft);
}
.quote cite a { text-decoration: none; }
.quote cite a:hover { color: var(--parchment); }

.caption.is-title .title { font-size: 5.2rem; line-height: 0.95; }
.caption.is-title .title em { display: block; font-size: 0.42em; color: var(--gold-soft); margin-top: 0.35em; letter-spacing: 0.01em; }
.start { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.start button {
  border: 1px solid var(--line); background: rgba(11, 17, 32, 0.4);
  padding: 0.6em 1.1em; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.start button:hover { background: rgba(246, 241, 230, 0.12); border-color: rgba(246, 241, 230, 0.5); }
.start button.primary { background: var(--gold); color: #1a1406; border-color: var(--gold); text-shadow: none; }
.start button.primary:hover { background: #ffc94d; }
.keys {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.6rem 0 0; padding: 0; list-style: none;
  font-size: 0.78rem; color: var(--dim);
}
.keys li { display: inline-flex; align-items: center; gap: 0.4em; }

/* caption scene change: lift out, rise in */
.caption.out > * { opacity: 0; transform: translateY(-6px); transition: opacity 0.24s ease, transform 0.24s ease; }
.caption.in > * { animation: rise 0.8s var(--ease) both; }
.caption.in > *:nth-child(2) { animation-delay: 0.08s; }
.caption.in > *:nth-child(3) { animation-delay: 0.2s; }
.caption.in > *:nth-child(4) { animation-delay: 0.34s; }
.caption.in > *:nth-child(5) { animation-delay: 0.46s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.app.text-hidden .caption, .app.text-hidden .discuss { opacity: 0; pointer-events: none; }
.app.text-hidden .topbar, .app.text-hidden .ribbon { opacity: 0.25; }
.app.text-hidden .topbar:hover, .app.text-hidden .ribbon:hover, .app.text-hidden .topbar:focus-within { opacity: 1; }

/* ---------- discussion ---------- */

.discuss {
  position: absolute;
  right: var(--gutter);
  top: 5.2rem;
  width: min(32vw, 28rem);
  padding: 1.4rem 1.5rem 1.6rem;
  background: rgba(11, 17, 32, 0.86);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  animation: slide-in 0.5s var(--ease) both;
}
.question {
  margin: 0.6rem 0 0;
  font-family: var(--display);
  font-size: 1.85rem;
  line-height: 1.22;
  text-wrap: balance;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- time ribbon ---------- */

.ribbon {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--ribbon-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center; gap: 1rem;
  transition: opacity 0.4s var(--ease);
}
.step {
  flex: none; width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: rgba(11, 17, 32, 0.4); border: 1px solid var(--line); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.step:hover { background: rgba(246, 241, 230, 0.12); border-color: rgba(246, 241, 230, 0.45); }
.step:disabled { opacity: 0.3; cursor: default; }
.step svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.track { flex: 1; min-width: 0; display: flex; gap: 0.9rem; align-items: flex-end; height: 100%; padding-bottom: 1.15rem; }
.era-group { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.era-group .era-name {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 2px solid var(--era); padding-bottom: 0.3rem; opacity: 0.75;
}
.era-group.active .era-name { color: var(--era); opacity: 1; }
.ticks { display: flex; gap: 2px; height: 1.1rem; align-items: flex-end; }
.tick {
  flex: 1; min-width: 4px; height: 0.5rem; padding: 0; border: 0; cursor: pointer;
  background: rgba(246, 241, 230, 0.28);
  transition: height 0.25s var(--ease), background 0.25s;
}
.tick:hover, .tick:focus-visible { height: 0.85rem; background: rgba(246, 241, 230, 0.7); }
.tick.seen { background: rgba(246, 241, 230, 0.62); }
.tick.current { height: 1.1rem; background: var(--gold); }
.tip {
  position: absolute; bottom: calc(var(--ribbon-h) - 0.4rem); margin: 0;
  transform: translateX(-50%);
  padding: 0.3em 0.6em; background: var(--parchment); color: var(--night);
  font-size: 0.75rem; font-weight: 600; white-space: nowrap; pointer-events: none;
}

/* ---------- map ---------- */

.map {
  position: fixed; inset: 0; z-index: 5;
  background: var(--night);
  overflow-y: auto;
  animation: fade 0.35s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.map-inner { max-width: 92rem; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 1.4rem) var(--gutter) 3rem; display: flex; flex-direction: column; gap: 1.6rem; }
.map-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.map-head h2 { margin: 0.3rem 0 0.4rem; font-family: var(--display); font-weight: 500; font-size: 2.4rem; line-height: 1.05; text-wrap: balance; }
.map-sub { margin: 0; max-width: 46em; color: var(--dim); font-size: 0.95rem; }
.map .close { flex: none; }
.map-chart { overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
.map-chart svg { display: block; width: 100%; min-width: 860px; height: auto; font-family: var(--sans); }
.map-axis .tick { stroke: rgba(246, 241, 230, 0.08); }
.map-axis .tick.zero { stroke: rgba(246, 241, 230, 0.3); }
.map-axis text { fill: var(--dim); font-size: 11px; letter-spacing: 0.04em; }
.map-axis .note { fill: var(--parchment); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.map-axis .note-line { stroke: rgba(246, 241, 230, 0.22); stroke-dasharray: 2 4; }
.map-axis .break { stroke: var(--dim); stroke-width: 1.5; fill: none; }
.map .link { fill: none; stroke: #c6bfad; stroke-width: 1.2; stroke-dasharray: 2 4; opacity: 0.7; }
.map-lanes .lane { fill: none; stroke-width: 5; stroke-linecap: round; opacity: 0.9; }
.map-lanes .lane.thin { stroke-width: 3; }
.map-lanes .lane-label { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; paint-order: stroke; stroke: var(--night); stroke-width: 4px; }
.map-dots .dot { cursor: pointer; outline: none; }
.map-dots .hit { fill: transparent; }
.map-dots .pip { fill: var(--parchment); stroke: var(--night); stroke-width: 2; transition: r 0.2s; }
.map-dots .dot:hover .pip, .map-dots .dot:focus-visible .pip { fill: #fff; r: 6.5; }
.map-dots .dot:focus-visible .hit { stroke: var(--gold); stroke-width: 2; }
.map-dots .dot.current .pip { fill: var(--gold); r: 7; }
.now-line { stroke: var(--gold); stroke-width: 1.5; opacity: 0.6; }
.map-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1.6rem 1.8rem; }
.index-era { min-width: 0; }
.index-era h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.35rem; line-height: 1.15; color: var(--era); }
.index-span { margin: 0.2rem 0 0.6rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.index-era ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.index-era button {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  padding: 0.38rem 0; background: none; border: 0; border-bottom: 1px solid rgba(246, 241, 230, 0.1);
  text-align: left; cursor: pointer; font-size: 0.88rem;
}
.index-era button span { min-width: 0; }
.index-era button small { flex: none; color: var(--dim); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.index-era button:hover span { color: var(--era); }
.index-era button.current span { color: var(--gold); font-weight: 600; }
.map-credit { margin: 0; font-size: 0.78rem; color: var(--dim); }

.blackout { position: fixed; inset: 0; z-index: 10; background: #000; cursor: none; }
.noscript { position: fixed; inset: auto 0 40% 0; text-align: center; font-family: var(--display); font-size: 1.5rem; }

/* ---------- phones and narrow windows: art on top, words below ---------- */

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { font-size: 16px; --ribbon-h: 4rem; }
  .app { display: flex; flex-direction: column; }
  .stage { position: relative; inset: auto; flex: none; height: min(66vw, 46svh); }
  .scrim { background: linear-gradient(to bottom, rgba(5, 8, 16, 0.6), rgba(5, 8, 16, 0) 32%); }
  .scrim::after { display: none; }
  .topbar { padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 16px 0.6rem; gap: 0.6rem; }
  .brand { font-size: 1rem; }
  .era-label { display: none; }
  .wide-only { display: none !important; }
  .tools button { padding: 0.4em 0.6em; font-size: 0.75rem; }
  .tools kbd { display: none; }
  .caption {
    position: relative; left: auto; bottom: auto; width: auto;
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 1.1rem 16px 1.5rem; gap: 0.6rem; text-shadow: none;
  }
  .title { font-size: 2.1rem; }
  .caption.is-title .title { font-size: 2.9rem; }
  .summary { font-size: 1.05rem; }
  .quote { font-size: 1.15rem; }
  .keys { display: none; }
  .discuss {
    top: auto; bottom: calc(var(--ribbon-h) + env(safe-area-inset-bottom, 0px) + 10px);
    left: 16px; right: 16px; width: auto; padding: 1rem 1.1rem 1.2rem;
    background: rgba(20, 28, 48, 0.97);
  }
  .question { font-size: 1.4rem; }
  .ribbon { position: relative; flex: none; padding: 0 16px env(safe-area-inset-bottom, 0px); gap: 0.6rem; border-top: 1px solid var(--line); }
  .track { gap: 0.4rem; padding-bottom: 0.9rem; }
  .era-group .era-name { font-size: 0; border-bottom-width: 3px; padding-bottom: 0; }
  .map-head { flex-direction: column-reverse; gap: 0.8rem; }
  .map .close { align-self: flex-end; }
  .map-head h2 { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .caption.in > *, .discuss, .map { animation: none; }
  .caption.out > * { transition: none; }
}