/* ===========================================================================
   Paris story — scrollytelling layer on top of style.css tokens.
   Sticky full-bleed map "stage"; narration steps scroll over it and drive it.
   =========================================================================== */

/* Muted base map so the colored territories and the arrow carry the drama. */
:root { --tile-filter: saturate(0.16) brightness(1.07) contrast(0.9); }
:root[data-theme="dark"] { --tile-filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.82) saturate(0.18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tile-filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.82) saturate(0.18); }
}

:root {
  --gaul:  oklch(0.62 0.13 150);   /* Celtic green */
  --rome:  oklch(0.58 0.17 28);    /* Roman red */
  --settled: oklch(0.52 0.10 250); /* Roman Gaul → France, indigo */
  --z-stage: 0;
  --z-arrow: 1;
  --z-steps: 2;
  --z-chrome: 30;
}

body.story-page { overflow-x: hidden; }

/* ---------- floating header ---------- */
.story-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem clamp(0.9rem, 3vw, 1.6rem);
  background: linear-gradient(to bottom, color-mix(in oklch, var(--bg) 78%, transparent), transparent);
  pointer-events: none;
}
.story-header .wordmark, .story-header .header-actions { pointer-events: auto; }
.story-header .mark { font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); }
.story-header .mark .emphasis { color: var(--primary); font-style: italic; }
.story-header .header-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.story-nav { display: inline-flex; gap: 0.1rem; align-items: center; background: color-mix(in oklch, var(--surface) 80%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem; }
.story-nav a { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500; color: var(--muted); text-decoration: none; padding: 0.3rem 0.7rem; border-radius: 999px; transition: all 180ms var(--ease); }
.story-nav a:hover { color: var(--ink); }
.story-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--ink); }

/* ---------- scrolly scaffold ---------- */
.scrolly { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; z-index: var(--z-stage); overflow: hidden; background: var(--surface-2); }
#map { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--surface-2); }
.leaflet-container { background: var(--surface-2); }
.leaflet-control-attribution { background: color-mix(in oklch, var(--surface) 85%, transparent) !important; color: var(--muted) !important; font-size: 0.66rem; }
.leaflet-control-attribution a { color: var(--primary) !important; }

/* territory polygons: JS toggles is-* classes; CSS carries the colour + transition
   (CSS wins over Leaflet's presentation attributes, so oklch tokens apply cleanly) */
.terr { transition: fill 700ms var(--ease), fill-opacity 700ms var(--ease), stroke 700ms var(--ease), stroke-opacity 700ms var(--ease); fill-opacity: 0; stroke-opacity: 0; }
.terr.is-hidden   { fill-opacity: 0; stroke-opacity: 0; }
.terr.is-green    { fill: var(--gaul);    stroke: var(--gaul);    fill-opacity: 0.32; stroke-opacity: 0.65; }
.terr.is-bright   { fill: var(--gaul);    stroke: var(--gaul);    fill-opacity: 0.56; stroke-opacity: 0.95; }
.terr.is-red      { fill: var(--rome);    stroke: var(--rome);    fill-opacity: 0.40; stroke-opacity: 0.72; }
.terr.is-rome-core{ fill: var(--rome);    stroke: var(--rome);    fill-opacity: 0.34; stroke-opacity: 0.55; }
.terr.is-settled  { fill: var(--settled); stroke: var(--settled); fill-opacity: 0.30; stroke-opacity: 0.60; }
.terr.is-island   { fill: var(--accent);  stroke: var(--accent);  fill-opacity: 0.16; stroke-opacity: 1; }

/* ---------- arrow ---------- */
.arrow-layer { position: absolute; inset: 0; z-index: var(--z-arrow); pointer-events: none; overflow: visible; }
.arrow-path {
  fill: none; stroke: var(--arrow, var(--rome)); stroke-width: 3.5; stroke-linecap: round;
  filter: drop-shadow(0 1px 3px oklch(0.2 0.03 258 / 0.35));
  stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
  opacity: 0;
}
.arrow-layer.show .arrow-path { opacity: 1; animation: arrow-draw 1100ms var(--ease) forwards; }
@keyframes arrow-draw { to { stroke-dashoffset: 0; } }
.arrow-head { fill: var(--arrow, var(--rome)); opacity: 0; transition: opacity 300ms var(--ease) 800ms; }
.arrow-layer.show .arrow-head { opacity: 1; }
.arrow-origin { fill: var(--arrow, var(--rome)); opacity: 0; transition: opacity 400ms var(--ease); }
.arrow-layer.show .arrow-origin { opacity: 0.9; }

/* ---------- stage overlays: era label + name strip ---------- */
.era-label {
  position: absolute; left: clamp(0.9rem, 3vw, 1.6rem); bottom: clamp(1rem, 4vh, 2.2rem);
  z-index: 3; max-width: min(60vw, 420px);
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(0.95rem, 0.8rem + 0.9vw, 1.3rem);
  letter-spacing: -0.01em; color: var(--ink);
  background: color-mix(in oklch, var(--bg) 70%, transparent);
  padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);
  opacity: 0; transform: translateY(-4px); transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  backdrop-filter: blur(5px);
}
.era-label.show { opacity: 1; transform: none; }

/* Year readout: counts through time as you scroll. Top left, under the header. */
.year-clock {
  position: absolute; left: clamp(0.9rem, 3vw, 1.6rem); top: clamp(3.6rem, 9vh, 4.6rem);
  z-index: 3; max-width: min(70vw, 460px);
  font-family: var(--font-serif); font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); line-height: 1.05;
  letter-spacing: -0.015em; color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: color-mix(in oklch, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px);
  padding: 0.2rem 0.7rem 0.3rem; border-radius: var(--radius);
  border: 1px solid var(--line);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  pointer-events: none;
}
.year-clock.show { opacity: 1; transform: none; }

.name-strip {
  position: absolute; left: 50%; bottom: clamp(1rem, 4vh, 2.2rem); transform: translateX(-50%);
  z-index: 3; display: flex; align-items: center; gap: 0.5rem;
  background: color-mix(in oklch, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.35rem 0.85rem; box-shadow: var(--shadow-1);
  opacity: 0; transition: opacity 400ms var(--ease);
  max-width: calc(100vw - 2rem);
}
.name-strip.show { opacity: 1; }
.name-strip .nm {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.05rem);
  color: var(--faint); transition: color 400ms var(--ease), opacity 400ms var(--ease);
}
.name-strip .nm { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.name-strip .nm-g { font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 0.66rem; letter-spacing: 0.01em; color: var(--muted); }
.name-strip .nm.active { color: var(--primary); font-weight: 600; }
.name-strip .nm.done { color: var(--muted); }
.name-strip .nm.struck { text-decoration: line-through; color: var(--faint); }
.name-strip .sep { color: var(--faint); font-size: 0.8rem; }

/* ---------- narration steps ---------- */
.steps { position: relative; z-index: var(--z-steps); margin-top: -100vh; margin-top: -100lvh; pointer-events: none; }
.step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 6rem clamp(1rem, 6vw, 6rem); }
.step.center { justify-content: center; text-align: center; }

.card {
  pointer-events: auto; max-width: 460px; width: 100%;
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-2);
  opacity: 0.35; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.step.active .card { opacity: 1; transform: none; }
.card h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 0.6rem; text-wrap: balance; }
.card p { font-family: var(--font-serif); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.5; color: var(--ink); margin: 0; text-wrap: pretty; }
.card.wide { max-width: 560px; }

/* a word in the narration with its translation beside it: Din [fort] */
.card .w { font-style: italic; font-weight: 600; color: var(--primary); white-space: nowrap; }
.card .w .g {
  font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 0.7em; letter-spacing: 0.01em;
  margin-left: 0.35em; padding: 0.08em 0.5em; border-radius: 999px; vertical-align: 0.1em;
  color: var(--primary); background: var(--primary-soft);
}

/* Gaelic words: a compact row of chips; the map shows where their towns are */
.el-chips { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.el-chip {
  font: inherit; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1rem;
  cursor: pointer; color: var(--primary); background: color-mix(in oklch, var(--surface) 60%, transparent);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.2rem 0.8rem;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.el-chip:hover { border-color: var(--primary); }
.el-chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.card p.el-detail { margin-top: 0.8rem; min-height: 2.9em; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.45; color: var(--muted); }
.el-detail strong { color: var(--ink); font-family: var(--font-serif); font-style: italic; font-size: 1.05em; }

/* Town pins on the map: a dot and a name tag, anchored on the town */
.place-pin { background: none; border: none; overflow: visible; animation: pin-in 500ms var(--ease) backwards; }
@keyframes pin-in { from { opacity: 0; } to { opacity: 1; } }
.place-pin .dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--bg); box-shadow: 0 1px 4px oklch(0.2 0.03 258 / 0.4);
  transition: transform 250ms var(--ease), background 250ms var(--ease);
}
.place-pin .pin-tag {
  position: absolute; left: 12px; top: -11px; white-space: nowrap;
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 500; color: var(--ink);
  background: color-mix(in oklch, var(--bg) 88%, transparent); border: 1px solid var(--line);
  padding: 0.05rem 0.45rem; border-radius: 999px; transition: opacity 250ms var(--ease), background 250ms var(--ease), color 250ms var(--ease);
}
.place-pin.left .tag { left: auto; right: 12px; }
.place-pin .pin-tag b { font-weight: 700; color: var(--primary); }
.place-pin.dim { opacity: 0.4; }
.place-pin.on { z-index: 800 !important; }
.place-pin.on .dot { transform: scale(1.5); background: var(--accent); }
.place-pin.on .tag { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.place-pin.on .tag b { color: inherit; }

/* intro + closing */
.step.intro .card, .step.closing-step .card {
  background: color-mix(in oklch, var(--bg) 84%, transparent); border: none; box-shadow: none; max-width: 620px;
}
.step.intro h1 {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02;
  font-size: clamp(2.4rem, 1.6rem + 5vw, 5rem); white-space: pre-line; text-wrap: balance; margin: 0 0 1rem;
}
.step.intro h1 .q { color: var(--primary); font-style: italic; }
.step.intro p, .step.closing-step p { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); color: var(--muted); }
.scroll-cue { margin-top: 1.6rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-family: var(--font-sans); font-size: 0.85rem; }
.scroll-cue .dot { width: 22px; height: 34px; border: 2px solid var(--faint); border-radius: 12px; position: relative; }
.scroll-cue .dot::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; border-radius: 2px; background: var(--primary); transform: translateX(-50%); animation: cue 1.6s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }

.step.closing-step h2 { font-size: clamp(1.8rem, 1.3rem + 2.5vw, 3rem); margin-bottom: 0.8rem; }
.cta {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem;
  padding: 0.7rem 1.2rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-ink); text-decoration: none;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.cta:hover { transform: translateY(-2px); background: var(--primary-hover); }

/* ---------- confidence chip ---------- */
.chip-row { margin-top: 1rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
button.conf {
  font: inherit; cursor: pointer; border: 1px solid transparent;
  font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28rem 0.7rem; border-radius: 999px;
}
button.conf .glyph { font-size: 0.85em; }
button.conf.documented { color: var(--conf-documented); background: var(--conf-documented-soft); border-color: color-mix(in oklch, var(--conf-documented) 30%, transparent); }
button.conf.debated    { color: var(--conf-debated);    background: var(--conf-debated-soft);    border-color: color-mix(in oklch, var(--conf-debated) 32%, transparent); }
button.conf.inferred   { color: var(--conf-inferred);   background: var(--conf-inferred-soft);   border-color: color-mix(in oklch, var(--conf-inferred) 35%, transparent); }
button.conf:hover { filter: brightness(0.97); }
.chip-hint { font-size: 0.75rem; color: var(--faint); }

/* ---------- progress rail ---------- */
.progress { position: fixed; right: clamp(0.6rem, 2vw, 1.2rem); top: 50%; transform: translateY(-50%); z-index: var(--z-chrome); display: flex; flex-direction: column; gap: 0.6rem; pointer-events: auto; }
.progress button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; background: var(--line-strong); cursor: pointer; transition: all 250ms var(--ease); }
.progress button[aria-current="true"] { background: var(--primary); transform: scale(1.5); }
.progress button:hover { background: var(--muted); }

/* ---------- footer stamp ---------- */
.story-footer {
  position: relative; z-index: var(--z-steps);
  padding: 1rem clamp(0.9rem, 3vw, 1.6rem); background: var(--surface); border-top: 1px solid var(--line);
  font-size: 0.75rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center;
}
.story-footer a { color: var(--primary); }
.story-footer .spacer { flex: 1 1 auto; }
.story-footer .stamp { font-style: italic; }

/* language legend sits under the fixed header, top right of the stage */
.story-page .leaflet-top.leaflet-right { top: 3.6rem; }

/* label pairs: full text on wide screens, a short one on phones */
.short { display: none; }

/* ---------- responsive: phones ---------- */
/* The stage uses the large viewport height (constant), so the map never resizes when the
   browser toolbar slides away. Steps use the small one, so cards stay clear of the toolbar. */
@media (max-width: 680px) {
  .step { padding: 0 1rem calc(4rem + env(safe-area-inset-bottom)); align-items: flex-end; }
  .step.intro { align-items: center; }
  .card { max-width: 100%; }
  .progress { display: none; }

  /* one-row header: wordmark, the three stories, map, theme */
  .story-header { padding: calc(0.45rem + env(safe-area-inset-top)) 0.7rem 0.45rem; gap: 0.4rem; flex-wrap: nowrap; }
  .story-header .mark { font-size: 1rem; }
  .story-header .header-actions { flex-wrap: nowrap; gap: 0.3rem; }
  .story-nav a { font-size: 0.8rem; padding: 0.5rem 0.55rem; }
  .story-header .btn { font-size: 0.8rem; padding: 0.5rem 0.6rem; min-height: 40px; }
  .story-header .btn-icon { width: 40px; justify-content: center; padding: 0.5rem 0; }
  .long { display: none; }
  .short { display: inline; }

  /* stage overlays stack under the header: year + legend, then era, then the name chain */
  .year-clock { top: 3.8rem; left: 0.7rem; font-size: 1.3rem; max-width: calc(100vw - 11rem); padding: 0.1rem 0.55rem 0.2rem; }
  .era-label { bottom: auto; top: 6.35rem; left: 0.7rem; max-width: calc(100vw - 1.4rem); font-size: 0.85rem; padding: 0.15rem 0.5rem; }
  .name-strip { bottom: auto; top: 8.55rem; left: 0.7rem; transform: none; padding: 0.25rem 0.7rem; }
  .story-page .leaflet-top.leaflet-right { top: 3.8rem; right: 0.35rem; }
  .terr-legend summary { min-height: 28px; }

  /* blur is costly on phones: use a more solid surface instead */
  .card, .year-clock, .era-label, .name-strip, .story-nav { backdrop-filter: none; }
  .card { background: color-mix(in oklch, var(--bg) 93%, transparent); }
  .year-clock, .era-label, .name-strip { background: color-mix(in oklch, var(--bg) 88%, transparent); }

  /* bigger thumb targets */
  button.conf { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
  .el-chip { padding: 0.4rem 0.9rem; font-size: 1.05rem; }
  .chip-row { gap: 0.4rem 0.7rem; }
  .card h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); }
  .card p { font-size: 1rem; line-height: 1.45; }
  .story-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .arrow-layer.show .arrow-path { animation: none; stroke-dashoffset: 0; }
  .leaflet-overlay-pane path { transition: none; }
  .scroll-cue .dot::after { animation: none; }
}