/* ═══════════════════════════════════════════════════════════════
   The Footnote† — GIANNIS TRADE TIMELINE · STYLE
   A dark, explorable data page. Horizontal time axis, one ranked
   orbit of map-pins per episode, click-through detail panel.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --void-core:  #201e19;
  --void-edge:  #0a0907;
  --grid-line:  rgba(120,112,92,0.12);
  --grid-month: rgba(150,140,112,0.20);
  --axis-line:  rgba(212,167,62,0.45);

  --pin-dark:   #1c1912;
  --pin-dark-2: #2a2416;
  --gold:       #E8B53C;
  --mustard:    #D4A73E;
  --gold-deep:  #9a7426;
  --gold-glow:  rgba(232,181,60,0.5);
  --pin-ink:    #16140f;
  --out-red:    #c5694a;

  --card-bg:    #16140f;
  --card-bg-2:  #1e1b14;
  --card-ink:   #F2EADD;
  --card-muted: #9a907c;
  --card-rule:  #3a3328;
  --card-rule-2:#4a4334;
}

html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(150% 120% at 50% -10%, var(--void-core) 0%, #15130e 44%, var(--void-edge) 100%);
  color: var(--card-ink);
  font-family: var(--fn-mono);
  overflow: hidden;
}

.page { display: flex; flex-direction: column; height: 100vh; }

/* ───────── masthead ───────────────────────────────────────── */
.masthead {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px;
  padding: 30px 44px 22px;
  border-bottom: 1px solid var(--card-rule);
  z-index: 6;
}
.mh-left { max-width: 760px; }
.mh-kicker {
  font-family: var(--fn-mono); font-size: 12px; letter-spacing: 4px;
  color: var(--gold); text-transform: uppercase;
}
.mh-title {
  font-family: var(--fn-serif-display); font-weight: 700;
  font-size: 52px; line-height: 0.98; letter-spacing: -1.6px;
  margin: 8px 0 0; color: var(--card-ink);
}
.mh-dek {
  font-family: var(--fn-serif-text); font-style: italic;
  font-size: 16px; line-height: 1.4; color: var(--card-muted);
  margin: 10px 0 0; max-width: 680px;
}
/* legend */
.mh-legend { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.lg-row { display: flex; align-items: center; gap: 12px; }
.lg-pins { display: flex; align-items: flex-end; gap: 10px; }
.lg-pin {
  position: relative; border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
  border: 1.5px solid var(--gold-deep);
  background: radial-gradient(120% 120% at 34% 26%, var(--pin-dark-2), var(--pin-dark));
}
.lg-pin.big { width: 26px; height: 26px; border-color: var(--gold);
  background: radial-gradient(120% 120% at 34% 26%, #f4cf6e, var(--mustard) 62%, var(--gold-deep));
  box-shadow: 0 0 16px 1px var(--gold-glow); }
.lg-pin.mid { width: 19px; height: 19px; }
.lg-pin.sm  { width: 13px; height: 13px; }
.lg-text {
  font-family: var(--fn-mono); font-size: 10.5px; letter-spacing: 1px;
  color: var(--card-muted); text-transform: uppercase; line-height: 1.4;
}
.lg-text b { color: var(--gold); font-weight: 500; }

/* ───────── wordmark (top-right, shared with the 3D view) ───── */
.wm {
  position: fixed; right: 26px; top: 13px; z-index: 31;
  display: flex; align-items: baseline; gap: 5px; pointer-events: none;
}
.wm-word {
  font-family: var(--fn-serif-display); font-weight: 600;
  font-size: 21px; letter-spacing: -0.5px; color: var(--card-ink);
}
.wm-mark { width: 11px; height: 15px; color: var(--gold); transform: translateY(-5px); }
@media (max-width: 760px) { .wm { display: none; } }

/* ───────── timeline stage ─────────────────────────────────── */
.stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
}
.stage.dragging { cursor: grabbing; }
.stage::-webkit-scrollbar { height: 10px; }
.stage::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.stage::-webkit-scrollbar-thumb { background: var(--card-rule-2); border-radius: 6px; }

.canvas { position: relative; height: 100%; /* width set inline */ }

/* faint vertical month grid + phase bands live here, behind pins */
.bg-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.month-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--grid-line);
}
.month-label {
  position: absolute; top: 8px;
  font-family: var(--fn-mono); font-size: 11px; letter-spacing: 2px;
  color: rgba(150,140,112,0.5); text-transform: uppercase;
  transform: translateX(8px);
}
.phase-band {
  position: absolute; top: 0; bottom: 64px;
  border-left: 1px dashed rgba(212,167,62,0.16);
}
.phase-label {
  position: absolute; top: 26px;
  font-family: var(--fn-mono); font-size: 11px; letter-spacing: 2.5px;
  color: rgba(212,167,62,0.42); text-transform: uppercase;
  white-space: nowrap; transform: translateX(16px);
}

/* the baseline axis */
.axis {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--axis-line); z-index: 1;
  /* top set inline = axisY */
}

/* a date column: tick on the axis + stem up + label */
.date-tick {
  position: absolute; width: 1px; background: rgba(212,167,62,0.5);
  z-index: 1; /* left, top(=cluster cy), height set inline */
}
.date-foot {
  position: absolute; transform: translateX(-50%);
  text-align: center; z-index: 2; /* left = cx, top = axisY+ */
}
.date-foot .d-dot {
  width: 9px; height: 9px; margin: 0 auto 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 12px 2px var(--gold-glow);
}
.date-foot .d-date {
  font-family: var(--fn-mono); font-size: 13px; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase; white-space: nowrap;
}
.date-foot .d-ep {
  font-family: var(--fn-serif-text); font-style: italic; font-size: 14px;
  color: var(--card-ink); margin-top: 5px; white-space: nowrap;
}
.date-foot .d-note {
  font-family: var(--fn-mono); font-size: 9.5px; letter-spacing: 1.4px;
  color: var(--card-muted); text-transform: uppercase; margin-top: 5px; white-space: nowrap;
}
.date-foot .d-count {
  font-family: var(--fn-mono); font-size: 9.5px; letter-spacing: 1.4px;
  color: var(--gold-deep); text-transform: uppercase; margin-top: 3px;
}

/* cluster caption floating above the orbit */
.cluster-cap {
  position: absolute; transform: translate(-50%, -100%);
  text-align: center; z-index: 3; pointer-events: none; /* left=cx, top set inline */
}

/* ───────── spokes (hero → satellite) ──────────────────────── */
.spoke {
  position: absolute; height: 1px; transform-origin: left center;
  background: repeating-linear-gradient(to right,
    rgba(212,167,62,0.30) 0 6px, transparent 6px 13px);
  z-index: 2; pointer-events: none;
}

/* ───────── the map pin ────────────────────────────────────── */
/* .pin positioned by its TIP (left/top = planted point). */
.pin { position: absolute; width: 0; height: 0; z-index: 5; }
.pin-hit {
  position: absolute; left: 0; top: 0;
  width: var(--d); height: calc(var(--d) * 1.2);
  transform: translate(-50%, -100%);
  cursor: pointer;
}
.pin-head {
  position: absolute; left: 0; top: 0;
  width: var(--d); height: var(--d);
  border-radius: 50% 50% 0 50%;
  transform: translate(-50%, -120.7%) rotate(45deg);
  background: radial-gradient(120% 120% at 32% 28%, var(--pin-dark-2), var(--pin-dark));
  border: 2px solid var(--gold-deep);
  box-shadow: 0 12px 26px rgba(0,0,0,0.5);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s;
  pointer-events: none;
}
.pin-code {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  font-family: var(--fn-mono); font-weight: 500;
  font-size: calc(var(--d) * 0.27); letter-spacing: 0.5px;
  color: var(--gold); white-space: nowrap; pointer-events: none;
}
.pin-idx {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + var(--d) * 0.235)) rotate(-45deg);
  font-family: var(--fn-mono); font-size: calc(var(--d) * 0.14);
  color: var(--gold-deep); pointer-events: none;
}
.pin-ground {
  position: absolute; left: 0; top: 0;
  width: calc(var(--d) * 1.4); height: calc(var(--d) * 0.36);
  transform: translate(-50%, -38%);
  background: radial-gradient(closest-side, rgba(0,0,0,0.5), transparent 72%);
  pointer-events: none;
}

/* hero: the day's top return — gold + glow */
.pin.is-hero .pin-head {
  background: radial-gradient(120% 120% at 34% 26%, #f4cf6e, var(--mustard) 62%, var(--gold-deep));
  border-color: var(--gold);
  box-shadow: 0 0 42px 4px var(--gold-glow), 0 14px 30px rgba(0,0,0,0.55);
}
.pin.is-hero .pin-code { color: var(--pin-ink); }
.pin.is-hero .pin-idx  { color: rgba(22,20,15,0.6); }
.pin.is-hero .pin-ground { background: radial-gradient(closest-side, var(--gold-glow), transparent 70%); }

/* hover + active */
.pin-hit:hover + .pin-head,
.pin.is-active .pin-head { border-color: var(--gold); }
.pin.is-active .pin-head {
  box-shadow: 0 0 0 3px rgba(232,181,60,0.25), 0 0 38px 2px var(--gold-glow), 0 16px 32px rgba(0,0,0,0.55);
}
.pin.is-active:not(.is-hero) .pin-code { color: var(--gold); }
/* dim everything when a pin is selected, except its own cluster */
.canvas.has-selection .pin:not(.in-cluster) { opacity: 0.32; }
.canvas.has-selection .spoke:not(.in-cluster) { opacity: 0.18; }
.pin { transition: opacity .2s; }

/* ───────── hover tooltip ──────────────────────────────────── */
.tip {
  position: fixed; z-index: 40; pointer-events: none;
  background: var(--card-bg); border: 1px solid var(--card-rule-2);
  padding: 10px 13px; max-width: 280px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.tip.show { opacity: 1; transform: translateY(0); }
.tip .t-team { font-family: var(--fn-mono); font-size: 10px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.tip .t-head { font-family: var(--fn-serif-display); font-weight: 600; font-size: 17px; line-height: 1.1; color: var(--card-ink); margin: 4px 0 6px; }
.tip .t-ret  { font-family: var(--fn-mono); font-size: 10px; letter-spacing: 1px; color: var(--card-muted); text-transform: uppercase; }
.tip .t-ret b { color: var(--gold); font-weight: 500; }

/* ───────── detail panel (slides in from right) ────────────── */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px;
  background: linear-gradient(180deg, var(--card-bg-2), var(--card-bg));
  border-left: 1px solid var(--card-rule-2);
  box-shadow: -30px 0 70px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.3,.7,.2,1);
  z-index: 30; display: flex; flex-direction: column;
  padding: 30px 34px 26px;
}
.panel.open { transform: translateX(0); }
.panel-close {
  position: absolute; top: 22px; right: 26px;
  width: 34px; height: 34px; border: 1px solid var(--card-rule-2);
  background: transparent; color: var(--card-muted); cursor: pointer;
  font-family: var(--fn-mono); font-size: 16px; line-height: 1;
  transition: color .14s, border-color .14s;
}
.panel-close:hover { color: var(--gold); border-color: var(--gold); }

.p-when {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--fn-mono); font-size: 12px; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase;
}
.p-when .ep { color: var(--card-muted); font-style: normal; }
.p-club {
  font-family: var(--fn-mono); font-size: 13px; letter-spacing: 1.5px;
  color: var(--card-muted); text-transform: uppercase; margin-top: 20px;
}
.p-headline {
  font-family: var(--fn-serif-display); font-weight: 600;
  font-size: 38px; line-height: 1.02; letter-spacing: -0.8px;
  color: var(--card-ink); margin: 6px 0 10px;
}
.p-teams {
  font-family: var(--fn-mono); font-size: 15px; letter-spacing: 3px;
  color: var(--gold); margin-bottom: 22px;
}
.p-ledger {
  display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; row-gap: 7px;
  align-items: start; margin-bottom: 22px;
  border-top: 1px solid var(--card-rule); padding-top: 20px;
}
.p-dir { font-family: var(--fn-mono); font-size: 14px; letter-spacing: 1px; padding-top: 2px; }
.p-dir.out { color: var(--out-red); }
.p-dir.in  { color: var(--mustard); }
.p-names { font-family: var(--fn-serif-text); font-size: 19px; line-height: 1.4; color: var(--card-ink); }
.p-names .sub { color: var(--card-muted); font-style: italic; }

.p-quote {
  border-left: 3px solid var(--gold); padding: 2px 0 2px 20px; margin: 4px 0 20px;
}
.p-quote .q {
  font-family: var(--fn-serif-display); font-style: italic; font-weight: 500;
  font-size: 24px; line-height: 1.34; color: var(--card-ink); text-wrap: pretty;
}
.p-quote .attr {
  font-family: var(--fn-mono); font-size: 12px; letter-spacing: 1.5px;
  color: var(--card-muted); text-transform: uppercase; margin-top: 12px;
}
.p-quote .attr b { color: var(--gold); font-weight: 500; }

.p-meterRow {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--card-rule); padding-top: 18px; margin-bottom: 14px;
}
.p-meterLabel { font-family: var(--fn-mono); font-size: 11px; letter-spacing: 1.6px; color: var(--card-muted); text-transform: uppercase; white-space: nowrap; }
.p-meter { position: relative; flex: 1; height: 9px; background: rgba(255,255,255,0.05); border: 1px solid var(--card-rule); }
.p-meter > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(to right, var(--mustard), var(--gold)); }
.p-meterVal { font-family: var(--fn-serif-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -1px; color: var(--gold); }
.p-hero-flag {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--fn-mono); font-size: 10.5px; letter-spacing: 1.6px;
  color: var(--pin-ink); background: var(--gold); padding: 4px 10px; text-transform: uppercase;
}
.p-verdict { font-family: var(--fn-mono); font-size: 12.5px; letter-spacing: 0.3px; line-height: 1.5; color: var(--card-muted); }
.p-verdict b { color: var(--mustard); font-weight: 500; }
.p-method {
  font-family: var(--fn-mono); font-size: 9.5px; letter-spacing: 0.4px; line-height: 1.45;
  color: #6b6354; border-top: 1px solid var(--card-rule); padding-top: 14px; margin-top: auto;
}

/* ───────── footer hint ────────────────────────────────────── */
.foot-hint {
  position: fixed; left: 44px; bottom: 16px; z-index: 8;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fn-mono); font-size: 11px; letter-spacing: 0.8px; color: #6b6354;
  pointer-events: none;
}
.foot-hint .mk { width: 13px; height: 16px; color: var(--gold); }
.foot-hint b { color: var(--mustard); font-weight: 500; }