:root {
  --bg: #050505;
  --ink: #efe6d2;
  --ink-soft: rgba(239, 230, 210, 0.62);
  --ink-faint: rgba(239, 230, 210, 0.34);
  --hair: rgba(243, 210, 122, 0.22);
  --gold: #e7c271;
  --gold-grad: linear-gradient(135deg, #f3d27a, #c9962e 40%, #fff0c2 60%, #9c6b12);
  --turq: #2bd9fe;
  --fuch: #e5197e;
  --header-h: 64px;
  --tl-h: 96px;
  --panel-w: 400px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------- header ---------- */
.tr-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: linear-gradient(to bottom, rgba(5,5,5,0.92), rgba(5,5,5,0));
  pointer-events: none;
}
.tr-header > * { pointer-events: auto; text-shadow: 0 0 10px var(--bg), 0 0 4px var(--bg); }
.tr-header__left { display: flex; align-items: baseline; gap: 28px; }

.tr-logo {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.34em;
  text-decoration: none;
  color: var(--ink);
}
.tr-back {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-faint);
  transition: color .3s;
}
.tr-back:hover, .tr-logo:hover { color: var(--gold); }

.tr-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
}
.tr-lang button { letter-spacing: inherit; color: var(--ink-faint); transition: color .3s; padding: 6px 0; }
.tr-lang button:hover { color: var(--ink); }
.tr-lang button[aria-pressed="true"] { color: var(--gold); }

/* ---------- main / stage ---------- */
.tr-main {
  position: fixed;
  inset: 0 0 var(--tl-h) 0;
}

.tr-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tr-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#dots { opacity: 0; transition: opacity 1.4s var(--ease); }
#dots.is-ready { opacity: 1; }
#trace { pointer-events: none; }

.tr-loading {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: opacity .6s;
}
.tr-loading.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- intro ---------- */
.tr-intro {
  position: absolute;
  z-index: 10;
  left: 40px;
  top: calc(var(--header-h) + 28px);
  width: auto;
  pointer-events: none;
}
.tr-intro > * { pointer-events: auto; }
.tr-eyebrow {
  margin: 0 0 14px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tr-title {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.05;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  white-space: nowrap;
  padding-right: 0.02em;
}
.tr-lede {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 34ch;
  text-shadow: 0 0 12px var(--bg), 0 0 4px var(--bg);
}

.tr-views {
  display: flex;
  gap: 22px;
  margin-top: 26px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.tr-views button {
  position: relative;
  color: var(--ink-faint);
  letter-spacing: inherit;
  padding: 6px 0 8px;
  transition: color .3s;
}
.tr-views button::after {
  content: "";
  position: absolute;
  left: 0; right: 0.26em; bottom: 0;
  height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.tr-views button:hover { color: var(--ink); }
.tr-views button[aria-pressed="true"] { color: var(--ink); }
.tr-views button[aria-pressed="true"]::after { transform: scaleX(1); }

.tr-legend {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  gap: 22px;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tr-legend li { display: flex; align-items: center; gap: 9px; }
.tr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.tr-dot--life { background: var(--fuch); box-shadow: 0 0 8px var(--fuch); }
.tr-dot--work { background: var(--turq); box-shadow: 0 0 8px var(--turq); }

/* ---------- markers ---------- */
.tr-markers { position: absolute; inset: 0; pointer-events: none; }

.mk {
  --c: var(--turq);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  pointer-events: auto;
  transition: opacity .5s var(--ease);
  will-change: transform;
}
.mk[data-kind="life"] { --c: var(--fuch); }
.mk.is-hidden { opacity: 0; pointer-events: none; }
.mk.is-dim { opacity: 0.38; }

.mk__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 42%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: 0 0 10px var(--c), 0 0 2px var(--c);
  transition: transform .45s var(--ease);
}
.mk__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  border: 1px solid var(--c);
  opacity: 0;
  animation: mk-pulse 3.6s var(--ease) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes mk-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.mk__label {
  position: absolute;
  top: 50%;
  left: calc(50% + 12px);
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-shadow: 0 0 6px var(--bg), 0 0 3px var(--bg), 0 0 2px var(--bg);
  pointer-events: none;
  transition: color .3s, opacity .4s;
}
.mk[data-side="l"] .mk__label { left: auto; right: calc(50% + 12px); }
.mk[data-side="t"] .mk__label { top: auto; bottom: calc(50% + 10px); left: 50%; transform: translateX(-50%); }
.mk[data-side="b"] .mk__label { top: calc(50% + 10px); left: 50%; transform: translateX(-50%); }
.tr-markers.no-labels .mk:not(.cluster):not(.is-active):not(.is-hl) .mk__label { opacity: 0; }

.mk:hover .mk__core, .mk.is-hl .mk__core { transform: scale(1.45); }
.mk:hover .mk__label, .mk.is-hl .mk__label { color: var(--ink); }
.mk.is-active .mk__core { transform: scale(1.7); }
.mk.is-active .mk__label { color: var(--gold); }
.mk.is-active .mk__ring { animation-duration: 2.2s; }

/* clusters: a ring of gold beads */
.mk.cluster { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.mk.cluster .mk__core {
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  background: none;
  box-shadow: none;
  border: 1px solid rgba(243, 210, 122, 0.75);
  display: grid;
  place-items: center;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--gold);
}
.mk.cluster .mk__core::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dotted rgba(243, 210, 122, 0.4);
}
.mk.cluster .mk__ring { border-color: rgba(243, 210, 122, 0.6); width: 22px; height: 22px; margin: -11px 0 0 -11px; animation-name: mk-pulse-c; }
@keyframes mk-pulse-c {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}
.mk.cluster .mk__label { left: calc(50% + 20px); color: var(--gold); }

/* ---------- panel ---------- */
.tr-panel {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-w);
  max-width: 100%;
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .7s var(--ease), visibility 0s linear .7s;
  background: linear-gradient(to right, rgba(5,5,5,0.86), rgba(5,5,5,0.97) 30%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tr-panel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(243,210,122,.55) 20%, rgba(156,107,18,.35) 80%, transparent);
}
.tr-panel.is-open { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s; }
.tr-panel__inner {
  height: 100%;
  overflow-y: auto;
  padding: calc(var(--header-h) + 34px) 40px 32px 44px;
  scrollbar-width: thin;
  scrollbar-color: rgba(243,210,122,.25) transparent;
}
.tr-panel__close {
  position: absolute;
  top: calc(var(--header-h) + 8px);
  right: 40px;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 6px 0;
  transition: color .3s;
}
.tr-panel__close:hover { color: var(--ink); }
.tr-panel__region {
  margin: 0 0 10px;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tr-panel__name {
  margin: 0 0 30px;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tr-panel__events { list-style: none; margin: 0; padding: 0; }
.ev {
  position: relative;
  padding: 0 0 26px 22px;
  opacity: 0;
  transform: translateY(8px);
  animation: ev-in .7s var(--ease) forwards;
}
@keyframes ev-in { to { opacity: 1; transform: none; } }
.ev::before {
  /* dotted spine */
  content: "";
  position: absolute;
  left: 3px; top: 16px; bottom: 4px;
  width: 1px;
  background-image: radial-gradient(circle, rgba(243,210,122,.45) 0.8px, transparent 1.1px);
  background-size: 1px 6px;
  background-repeat: repeat-y;
}
.ev:last-child::before { display: none; }
.ev::after {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c, var(--turq));
  box-shadow: 0 0 8px var(--c, var(--turq));
}
.ev[data-kind="life"] { --c: var(--fuch); }
.ev.is-focus .ev__title { color: var(--gold); }
.ev__when {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.ev__title {
  margin: 0 0 4px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  transition: color .4s;
}
.ev__venue {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  font-style: italic;
}
.ev__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.tr-panel__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.tr-panel__nav button { color: var(--ink-faint); padding: 8px 0; transition: color .3s; text-align: left; letter-spacing: inherit; }
.tr-panel__nav button:last-child { text-align: right; }
.tr-panel__nav button:hover { color: var(--gold); }

/* ---------- timeline ---------- */
.tr-timeline {
  position: fixed;
  z-index: 25;
  left: 0; right: 0; bottom: 0;
  height: var(--tl-h);
  padding: 0 40px env(safe-area-inset-bottom);
  background: linear-gradient(to top, rgba(5,5,5,1) 55%, rgba(5,5,5,0));
}
.tr-timeline__hint {
  position: absolute;
  left: 40px; right: 40px;
  top: 6px;
  height: 16px;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
}
.tr-timeline__hint span {
  position: absolute;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity .25s;
}
.tr-timeline__hint b { font-weight: 500; color: var(--gold); margin-right: .6em; }
.tr-timeline__track {
  position: absolute;
  left: 40px; right: 40px;
  top: 30px;
  bottom: calc(10px + env(safe-area-inset-bottom));
}
.tl-axis {
  position: absolute;
  left: 0; right: 0;
  top: 32px;
  height: 2px;
  background-image: radial-gradient(circle, rgba(243,210,122,.42) 0.85px, transparent 1.2px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: 0 center;
}
.tl-range {
  position: absolute;
  top: 31px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c) 45%, transparent);
  pointer-events: none;
}
.tl-label {
  position: absolute;
  top: 44px;
  transform: translateX(-50%);
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  pointer-events: none;
}
.tl-label::before {
  content: "";
  position: absolute;
  left: 50%; top: -9px;
  width: 1px; height: 5px;
  background: rgba(243,210,122,.3);
}
.tl-tick {
  --c: var(--turq);
  position: absolute;
  top: 0;
  width: 14px;
  height: 36px;
  margin-left: -7px;
}
.tl-tick[data-kind="life"] { --c: var(--fuch); }
.tl-tick i {
  position: absolute;
  left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  opacity: .78;
  transition: transform .3s var(--ease), opacity .3s;
}
.tl-tick:hover i, .tl-tick.is-hl i { transform: scale(1.7); opacity: 1; }
.tl-tick.is-dim i { opacity: .28; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  :root { --header-h: 54px; --tl-h: 84px; }
  .tr-header { padding: 0 16px; background: var(--bg); }
  .tr-header__left { gap: 16px; }
  .tr-logo { font-size: 13px; letter-spacing: 0.28em; }
  .tr-back { font-size: 10px; letter-spacing: 0.16em; }
  .tr-lang { gap: 7px; font-size: 10px; letter-spacing: 0.16em; }

  .tr-main { top: var(--header-h); }
  .tr-intro {
    left: 0; right: 0; top: 0;
    width: auto;
    padding: 18px 16px 0;
    transition: opacity .5s var(--ease);
  }
  body.panel-open .tr-intro { opacity: 0; pointer-events: none; }
  body.panel-open .tr-intro > * { pointer-events: none; }
  .tr-eyebrow { margin-bottom: 10px; font-size: 10px; letter-spacing: 0.26em; }
  .tr-title { font-size: 30px; letter-spacing: 0.2em; }
  .tr-lede { font-size: 13px; line-height: 1.55; margin-top: 12px; max-width: none; }
  .tr-views { margin-top: 16px; gap: 20px; }
  .tr-legend { margin-top: 10px; }

  .tr-panel {
    position: fixed;
    top: auto;
    left: 0; right: 0; bottom: var(--tl-h);
    width: 100%;
    max-height: 52svh;
    transform: translateY(calc(100% + var(--tl-h) + 24px));
    background: rgba(5,5,5,0.97);
  }
  .tr-panel::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right, transparent, rgba(243,210,122,.55) 20%, rgba(156,107,18,.35) 80%, transparent);
  }
  .tr-panel__inner { padding: 30px 16px calc(24px + env(safe-area-inset-bottom)); max-height: 52svh; }
  .tr-panel__close { top: 0; right: 0; padding: 12px 16px 10px 20px; background: linear-gradient(to left, #050505 70%, rgba(5,5,5,0)); z-index: 2; }
  .tr-panel__name { font-size: 21px; margin-bottom: 22px; }
  .tr-panel.is-open { transform: none; visibility: visible; transition: transform .7s var(--ease), visibility 0s; }

  .tr-timeline { padding: 0 16px env(safe-area-inset-bottom); }
  .tr-timeline__hint { left: 16px; right: 16px; }
  .tr-timeline__track { left: 16px; right: 16px; top: 26px; }
  .tl-label { font-size: 9px; letter-spacing: 0.06em; }
  .tl-label.is-minor { display: none; }
  .tl-tick { width: 10px; margin-left: -5px; }
  .tl-tick i { width: 4px; height: 4px; margin-left: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk__ring { animation: none; }
  .ev { animation: none; opacity: 1; transform: none; }
  #dots, .tr-panel { transition: none; }
}