/* ============================================================================
   Every EPCOT Restaurant, Ranked — page-scoped styles (epd- prefix).
   World Showcase after dark: one lagoon, eleven pavilions, eleven accents.

   TOKENS: _LayoutV1 loads v1.css, which exposes the bg, surface, ink, line,
   brand, radius, shadow, display and ui families. It does NOT expose a space
   scale (spacing here is literal rem and clamp, same as mk-dining.css) and it
   does not expose the site.css names paper, gold or muted. Anything missing is
   aliased locally below so no var() ever silently resolves to nothing.

   Do not write an asterisk immediately followed by a slash anywhere in these
   comments. That sequence closes the comment early, and the parser then eats
   the whole following rule. It cost a rebuild once already.
   ========================================================================== */

.epd {
  /* v1 aliases, each with a hard fallback so nothing can collapse */
  --paper:     var(--bg,        oklch(21% 0.046 280));
  --card:      var(--surface,   oklch(27% 0.050 279));
  --card-2:    var(--surface-2, oklch(30.5% 0.052 279));
  --card-3:    var(--surface-3, oklch(35% 0.053 279));
  --ink-soft:  var(--ink-2,     oklch(82% 0.030 84));
  --muted:     var(--ink-3,     oklch(70% 0.032 84));
  --hair:      var(--line,      oklch(40% 0.050 280));
  --rule:      var(--line-2,    oklch(50% 0.046 281));
  --gold:      var(--brand,     oklch(84% 0.130 86));
  --gold-deep: var(--brand-press, oklch(75% 0.130 84));
  --gold-tint: var(--brand-tint, oklch(84% 0.130 86 / 0.14));
  --on-gold:   var(--brand-ink, oklch(24% 0.045 78));
  --label:     var(--ui, "Hanken Grotesk", system-ui, sans-serif);
  --text:      var(--ui, "Hanken Grotesk", system-ui, sans-serif);

  --epd-pad: clamp(1rem, 4vw, 2rem);
  --epd-max: 1120px;
  --epd-water: oklch(41% 0.085 236);

  /* per-pavilion accents, tuned to read on the indigo night */
  --pav-cel: oklch(84% 0.045 250);
  --pav-nat: oklch(80% 0.135 148);
  --pav-dis: oklch(78% 0.140 300);
  --pav-mex: oklch(80% 0.135 55);
  --pav-nor: oklch(84% 0.085 220);
  --pav-chn: oklch(75% 0.165 22);
  --pav-ger: oklch(86% 0.130 92);
  --pav-ita: oklch(80% 0.120 130);
  --pav-usa: oklch(76% 0.130 30);
  --pav-jpn: oklch(82% 0.110 355);
  --pav-mor: oklch(80% 0.105 195);
  --pav-fra: oklch(83% 0.090 320);
  --pav-gbr: oklch(78% 0.105 165);
  --pav-can: oklch(78% 0.150 42);
  --pav-prom: oklch(80% 0.070 86);

  --pav: var(--gold);

  color: var(--ink);
  font-family: var(--text);
  overflow-x: clip;
}

.epd .pav-cel { --pav: var(--pav-cel); }
.epd .pav-nat { --pav: var(--pav-nat); }
.epd .pav-dis { --pav: var(--pav-dis); }
.epd .pav-mex { --pav: var(--pav-mex); }
.epd .pav-nor { --pav: var(--pav-nor); }
.epd .pav-chn { --pav: var(--pav-chn); }
.epd .pav-ger { --pav: var(--pav-ger); }
.epd .pav-ita { --pav: var(--pav-ita); }
.epd .pav-usa { --pav: var(--pav-usa); }
.epd .pav-jpn { --pav: var(--pav-jpn); }
.epd .pav-mor { --pav: var(--pav-mor); }
.epd .pav-fra { --pav: var(--pav-fra); }
.epd .pav-gbr { --pav: var(--pav-gbr); }
.epd .pav-can { --pav: var(--pav-can); }
.epd .pav-prom { --pav: var(--pav-prom); }

/* section rhythm, matching the house scale */
.epd > section,
.epd > header { padding: clamp(2.75rem, 6vw, 5rem) var(--epd-pad); }
.epd > section { scroll-margin-top: 4.5rem; }

.epd-shead { max-width: var(--epd-max); margin: 0 auto 2rem; }
.epd-shead h2 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.06;
  margin: 0 0 0.5rem; text-wrap: balance;
}
.epd-sdek {
  max-width: 60ch; margin: 0;
  color: var(--ink-soft);
  font-size: 1.02rem; line-height: 1.62; text-wrap: pretty;
}
.epd-legend {
  margin: 0.85rem 0 0; color: var(--muted);
  font-family: var(--label); font-size: 0.82rem;
}
.epd-legend b { color: var(--gold); }

/* prose links only; :where() keeps specificity at 0 so component ink wins */
.epd :where(p, li, summary) :where(a) {
  color: var(--gold);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.epd :where(p, li, summary) :where(a):hover { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────── hero */
.epd-hero {
  text-align: center;
  padding-bottom: 0 !important;
}
.epd-hero-copy { max-width: 46rem; margin: 0 auto; }

.epd-kicker {
  font-family: var(--label);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.epd-h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  line-height: 1.0; letter-spacing: -0.03em;
  margin: 0 0 1.1rem; text-wrap: balance;
}
.epd-h1 em { font-style: normal; color: var(--gold); }

.epd-dek {
  font-size: clamp(1.03rem, 1.6vw, 1.2rem);
  line-height: 1.6; color: var(--ink-soft);
  margin: 0 auto 1.75rem; max-width: 54ch; text-wrap: pretty;
}

.epd-hero-ctas {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center; margin-bottom: 0.9rem;
}

.epd-cta {
  display: inline-block;
  padding: 0.72rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill, 999px);
  font-family: var(--label); font-weight: 700; font-size: 0.94rem;
  color: var(--ink); text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 120ms ease;
}
.epd-cta:hover { border-color: var(--gold); background: var(--gold-tint); }
.epd-cta:active { transform: translateY(1px); }

/* the gold fill needs dark ink; stated at class+element specificity so no
   prose-link rule can ever repaint it gold-on-gold */
.epd a.epd-cta-primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.epd a.epd-cta-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--on-gold); }

.epd-updated {
  font-family: var(--label); font-size: 0.78rem;
  letter-spacing: 0.04em; color: var(--muted); margin: 0;
}

/* ──────────────────────────────────────────────────────── the lagoon map */
.epd-mapwrap {
  max-width: var(--epd-max); margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-align: left;
  background:
    radial-gradient(140% 100% at 50% -10%, oklch(32% 0.062 274 / 0.95), transparent 68%),
    var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg, 18px);
  box-shadow: var(--shadow, 0 14px 36px oklch(8% 0.03 280 / 0.55));
}

.epd-map-h {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 0.3rem;
}
.epd-map-sub { color: var(--muted); font-size: 0.93rem; margin: 0 0 1.15rem; }

.epd-map-filters, .epd-filter-row {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem;
}

.epd-pill {
  appearance: none;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill, 999px);
  background: transparent; color: var(--ink-soft);
  font-family: var(--label); font-size: 0.84rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.epd-pill:hover { border-color: var(--rule); color: var(--ink); background: var(--card-2); }
.epd-pill.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

.epd-pill:focus-visible, .epd-cta:focus-visible,
.epd-node:focus-visible, .epd-mapdetail-close:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

.epd-map-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(255px, 0.85fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}

.epd-map { width: 100%; height: auto; display: block; font-family: var(--label); }

.epd-lagoon-rim {
  fill: none;
  stroke: oklch(62% 0.085 232 / 0.55);
  stroke-width: 1.5;
}

.epd-promenade {
  fill: none;
  stroke: oklch(56% 0.042 280);
  stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round;
  opacity: 0.8;
}

.epd-plaza circle { fill: var(--ink); }
.epd-plaza text { fill: var(--ink); font-size: 23px; font-weight: 700; letter-spacing: 0.01em; }
.epd-plaza .epd-plaza-sub {
  fill: var(--muted); font-size: 17px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* pavilion nodes */
.epd-node { cursor: pointer; }
.epd-node-hit { fill: transparent; }

.epd-node-dot {
  fill: var(--paper); stroke: var(--pav); stroke-width: 3;
  transition: r 180ms ease, fill 180ms ease, stroke-width 180ms ease;
}
.epd-node-count {
  fill: var(--pav); font-size: 19px; font-weight: 800;
  pointer-events: none; transition: fill 180ms ease;
}
.epd-node-label {
  fill: var(--ink); font-family: var(--display);
  font-size: 27px; font-weight: 700; letter-spacing: -0.01em;
  pointer-events: none;
}
.epd-node-meta {
  fill: var(--muted); font-size: 19px; font-weight: 600;
  letter-spacing: 0.02em; pointer-events: none;
}

.epd-node:hover .epd-node-dot, .epd-node:focus-visible .epd-node-dot { r: 19; stroke-width: 4; }
.epd-node.is-active .epd-node-dot { fill: var(--pav); r: 20; }
.epd-node.is-active .epd-node-count { fill: var(--paper); }
.epd-node.is-active .epd-node-label { fill: var(--pav); }
.epd-node.is-dim { opacity: 0.24; }
.epd-node.is-dim .epd-node-dot { stroke-dasharray: 3 3; }

/* centre readout */
.epd-readout text { pointer-events: none; }
.epd-readout-k {
  fill: var(--muted); font-size: 17px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.epd-readout-n {
  fill: var(--ink); font-family: var(--display);
  font-size: 40px; font-weight: 800; letter-spacing: -0.02em;
}
.epd-readout-s { fill: var(--ink-soft); font-size: 19px; }
.epd-readout-h {
  fill: var(--gold); font-size: 16px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* the side panel: always has content, never a dead column */
.epd-mapdetail {
  background: var(--card-2);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--pav, var(--gold));
  border-radius: var(--r, 13px);
  padding: 1.15rem 1.25rem;
  position: sticky; top: 5rem;
}
.epd-mapdetail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.35rem;
}
.epd-mapdetail-head h3 {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  margin: 0; color: var(--pav, var(--gold));
}
.epd-mapdetail-close {
  appearance: none; background: none; border: 0; color: var(--muted);
  font-family: var(--label); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; padding: 0.25rem;
}
.epd-mapdetail-close:hover { color: var(--ink); }
.epd-mapdetail-close[hidden] { display: none; }

.epd-mapdetail-blurb {
  color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.9rem;
}
.epd-mapdetail-list { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.epd-mapdetail-list li {
  padding: 0.5rem 0; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 0.6rem;
  font-size: 0.89rem;
}
.epd-mapdetail-list li:first-child { border-top: 0; }
.epd-md-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.epd-md-name:hover { color: var(--gold); text-decoration: underline; }
.epd-md-meta {
  color: var(--muted); font-family: var(--label);
  font-size: 0.78rem; white-space: nowrap; align-self: center;
}
.epd-mapdetail-jump {
  font-family: var(--label); font-size: 0.83rem; font-weight: 700;
  color: var(--gold); text-decoration: none;
}
.epd-mapdetail-jump:hover { text-decoration: underline; }
.epd-mapdetail-jump[hidden] { display: none; }

.epd-map-note { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.9rem; }

/* ─────────────────────────────────────────────────────── 10 second answer */
.epd-answer-lead {
  max-width: 66ch; margin: 0 auto 2rem;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.6;
  color: var(--ink-soft); text-wrap: pretty;
}
.epd-answer-lead strong { color: var(--ink); }

.epd-answer > *, .epd-topten > *, .epd-directory > *,
.epd-picker > *, .epd-playbook > *, .epd-gone > *,
.epd-fw > *, .epd-faq > *, .epd-close > * {
  max-width: var(--epd-max); margin-inline: auto;
}

.epd-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem; margin-bottom: 1.5rem;
}
.epd-stat {
  padding: 1.05rem 1.15rem;
  background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r, 13px);
}
.epd-stat-n {
  display: block; font-family: var(--display);
  font-size: 2.15rem; font-weight: 800; color: var(--gold);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.epd-stat-l { display: block; margin-top: 0.4rem; color: var(--muted); font-size: 0.84rem; line-height: 1.4; }

/* six picks, so a fixed 3 lays out as a clean 2x3 instead of an orphan row */
.epd-bests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 780px) { .epd-bests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .epd-bests { grid-template-columns: 1fr; } }
.epd-best {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.8rem 0.95rem;
  background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-sm, 9px); text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease, background-color 150ms ease;
}
.epd-best:hover { border-color: var(--gold); background: var(--card-2); transform: translateY(-2px); }
.epd-best-k {
  font-family: var(--label); font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.epd-best-v { color: var(--ink); font-weight: 700; font-size: 1rem; }

/* ──────────────────────────────────────────────────────────────── top ten */
.epd-ranks { list-style: none; margin: 0 auto; padding: 0; }
.epd-rank {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--hair);
}
.epd-rank:first-child { border-top: 0; padding-top: 0; }
.epd-rank-n {
  font-family: var(--display); font-size: 3rem; font-weight: 800;
  line-height: 0.85; color: var(--pav); font-variant-numeric: tabular-nums;
}
.epd-rank-name {
  font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.012em; margin: 0 0 0.5rem;
}
.epd-rank-name a { color: var(--ink); text-decoration: none; }
.epd-rank-name a:hover { color: var(--pav); }

.epd-rank-meta, .epd-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.6rem; }

.epd-chip {
  font-family: var(--label); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.24rem 0.55rem; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--hair); color: var(--muted); white-space: nowrap;
}
.epd-chip-pav { border-color: var(--pav); color: var(--pav); }
.epd-chip-price { color: var(--gold); border-color: oklch(84% 0.130 86 / 0.42); letter-spacing: 0.02em; }
.epd-chip-char { color: var(--pav-jpn); border-color: oklch(82% 0.110 355 / 0.45); }
.epd-chip-out  { color: var(--pav-nor); border-color: oklch(84% 0.085 220 / 0.45); }
.epd-chip-book { text-transform: none; letter-spacing: 0.02em; }

.epd-rank-line, .epd-card-line { color: var(--ink-soft); line-height: 1.6; margin: 0 0 0.6rem; }

/* On wide screens the ranked row splits: the verdict reads left at a sane
   measure, the "order this" pulls right, so the full container is used on
   purpose instead of trailing off into dead space. */
@media (min-width: 900px) {
  .epd-rank-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    column-gap: 2.5rem; align-items: start;
  }
  .epd-rank-name, .epd-rank-meta { grid-column: 1 / -1; }
  .epd-rank-line { grid-column: 1; margin-bottom: 0; max-width: 58ch; }
  .epd-rank-order {
    grid-column: 2; align-self: start;
    padding-left: 1.1rem; border-left: 1px solid var(--hair);
  }
}

.epd-rank-order, .epd-card-order { margin: 0; font-size: 0.91rem; color: var(--ink); }
.epd-rank-order span, .epd-card-order span {
  display: block; margin-bottom: 0.1rem;
  font-family: var(--label); font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}

.epd-topten-note {
  margin: 1.6rem auto 0; padding: 1rem 1.25rem;
  border-left: 3px solid var(--gold); background: var(--card);
  border-radius: 0 var(--r-sm, 9px) var(--r-sm, 9px) 0;
  color: var(--ink-soft); line-height: 1.6; max-width: 68ch;
}

/* ───────────────────────────────────────────────────────────────── picker */
.epd-picker[hidden] { display: none; }
.epd-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem; padding: 1.4rem;
  background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-lg, 18px);
}
.epd-pick-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.epd-pick-q legend {
  padding: 0 0 0.6rem; font-family: var(--label);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.epd-pick-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.epd-pick-out { margin-top: 1.25rem; }
.epd-pick-lead {
  font-family: var(--label); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 0.7rem;
}
.epd-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: pick; }
.epd-pick-item {
  counter-increment: pick; position: relative;
  padding: 0.95rem 1.05rem 0.95rem 3.1rem;
  background: var(--card-2); border: 1px solid var(--hair);
  border-radius: var(--r, 13px);
}
.epd-pick-item::before {
  content: counter(pick);
  position: absolute; left: 1rem; top: 0.85rem;
  font-family: var(--display); font-size: 1.45rem; font-weight: 800;
  color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.epd-pick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-bottom: 0.25rem; }
.epd-pick-name { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.epd-pick-name:hover { color: var(--gold); text-decoration: underline; }
.epd-pick-pav {
  font-family: var(--label); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.epd-pick-price { margin-left: auto; font-family: var(--label); font-weight: 700; color: var(--gold); }
.epd-pick-order { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.epd-pick-none {
  margin: 0; padding: 1rem; border: 1px dashed var(--hair);
  border-radius: var(--r, 13px); color: var(--muted);
}

/* ────────────────────────────────────────────────────────────── directory */
.epd-controls {
  position: sticky; top: 0; z-index: 5;
  padding: 0.9rem 0 0.6rem;
  background: linear-gradient(var(--paper) 76%, transparent);
  margin-bottom: 0.5rem;
}
.epd-rail-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.epd-rail { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.epd-rail-link {
  font-family: var(--label); font-size: 0.76rem; font-weight: 700;
  padding: 0.22rem 0.5rem; border-radius: var(--r-xs, 6px);
  color: var(--pav); text-decoration: none; border: 1px solid transparent;
}
.epd-rail-link:hover { border-color: var(--pav); background: var(--card); }
.epd-livecount { font-family: var(--label); font-size: 0.78rem; color: var(--muted); margin: 0; }

.epd-area { padding-top: 2.25rem; scroll-margin-top: 6rem; }
.epd-area[hidden] { display: none; }
.epd-area-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  border-bottom: 1px solid var(--hair); padding-bottom: 0.5rem; margin-bottom: 0.5rem;
}
.epd-area-h {
  font-family: var(--display); font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 700; margin: 0; display: flex; align-items: center; gap: 0.55rem;
}
.epd-area-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--pav); flex: none; }
.epd-area-count { font-family: var(--label); font-size: 0.76rem; color: var(--muted); margin-left: auto; white-space: nowrap; }
.epd-area-blurb { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 1rem; max-width: 62ch; }

.epd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 0.85rem; }

.epd-card {
  position: relative; padding: 1.05rem 1.1rem;
  background: var(--card); border: 1px solid var(--hair);
  border-top: 2px solid var(--pav);
  border-radius: var(--r, 13px);
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease;
  scroll-margin-top: 7rem;
}
.epd-card:hover { transform: translateY(-2px); background: var(--card-2); }
.epd-card[hidden] { display: none; }
.epd-card.is-closing { border-style: dashed; }

.epd-card-rank {
  position: absolute; top: -1px; right: 1.1rem;
  font-family: var(--label); font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--gold); color: var(--on-gold);
  padding: 0.18rem 0.5rem; border-radius: 0 0 var(--r-xs, 6px) var(--r-xs, 6px);
}
.epd-card-name {
  font-family: var(--display); font-size: 1.06rem; font-weight: 700;
  letter-spacing: -0.008em; margin: 0 0 0.55rem; padding-right: 3.4rem; text-wrap: balance;
}
.epd-card-note {
  margin: 0 0 0.55rem; font-family: var(--label);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em;
  /* lifted off --red, which lands at 4.29:1 on the card and misses AA here */
  color: oklch(78% 0.150 25);
}
.epd-card-line { font-size: 0.92rem; }

.epd-empty {
  padding: 2.5rem; text-align: center; color: var(--muted);
  border: 1px dashed var(--hair); border-radius: var(--r, 13px); margin-top: 1.5rem;
}
.epd-empty.is-hidden { display: none; }

/* ─────────────────────────────────────────────────────────────── playbook */
.epd-plays { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.1rem; }
.epd-play {
  padding: 1.4rem; background: var(--card);
  border: 1px solid var(--hair); border-radius: var(--r-lg, 18px);
}
.epd-play-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  margin-bottom: 0.75rem;
}
.epd-play h3 { font-family: var(--display); font-size: 1.12rem; font-weight: 700; margin: 0 0 0.5rem; text-wrap: balance; }
.epd-play p { color: var(--ink-soft); line-height: 1.6; margin: 0; font-size: 0.94rem; }

/* ───────────────────────────────────────────────── fireworks-facing tables */
.epd-fw-list {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: 0.9rem;
}
.epd-fw-item {
  position: relative; padding: 1.35rem;
  border: 1px solid var(--hair); border-radius: var(--r-lg, 18px);
  /* a low glow off the water, so the module reads as the lagoon at night */
  background:
    radial-gradient(125% 82% at 50% 120%, oklch(48% 0.088 235 / 0.5), transparent 66%),
    var(--card);
}
.epd-fw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; margin-bottom: 0.55rem; }
.epd-fw-head h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 700; margin: 0; }
.epd-fw-head h3 a { color: var(--ink); text-decoration: none; }
.epd-fw-head h3 a:hover { color: var(--pav); }
.epd-fw-line { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.58; margin: 0 0 0.6rem; }
.epd-fw-meta {
  display: flex; gap: 0.7rem; margin: 0;
  font-family: var(--label); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.05em; color: var(--muted);
}
.epd-fw-meta span:first-child { color: var(--gold); letter-spacing: 0.02em; }
.epd-fw-note {
  margin: 1.4rem auto 0; padding: 1rem 1.25rem;
  border-left: 3px solid var(--pav-nor); background: var(--card);
  border-radius: 0 var(--r-sm, 9px) var(--r-sm, 9px) 0;
  color: var(--ink-soft); line-height: 1.6; font-size: 0.94rem; max-width: 68ch;
}

/* ────────────────────────────────────────────────────────── closed / gone */
.epd-gone-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.1rem; }
.epd-gone-card {
  padding: 1.4rem; border: 1px solid var(--hair);
  border-left: 3px solid var(--red, oklch(72% 0.200 10));
  border-radius: 0 var(--r, 13px) var(--r, 13px) 0; background: var(--card);
}
.epd-gone-card:last-child { border-left-color: var(--pav-nat); }
.epd-gone-card h3 { font-family: var(--display); font-size: 1.08rem; font-weight: 700; margin: 0 0 0.5rem; }
.epd-gone-card p { color: var(--ink-soft); line-height: 1.6; margin: 0; font-size: 0.94rem; }

/* ──────────────────────────────────────────────────────────────────── faq */
.epd-faq-item { border-bottom: 1px solid var(--hair); }
.epd-faq-item summary {
  cursor: pointer; padding: 1rem 0; list-style: none;
  font-family: var(--display); font-size: 1.04rem; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.epd-faq-item summary::-webkit-details-marker { display: none; }
.epd-faq-item summary::after {
  content: "+"; color: var(--gold); font-size: 1.35rem; font-weight: 400;
  line-height: 1; flex: none; transition: transform 180ms ease;
}
.epd-faq-item[open] summary::after { transform: rotate(45deg); }
.epd-faq-item summary:hover { color: var(--gold); }
.epd-faq-item p { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.65; max-width: 72ch; }

/* ──────────────────────────────────────────────────────────────────── close */
.epd-close-line {
  font-size: clamp(1.02rem, 1.7vw, 1.15rem); line-height: 1.65;
  color: var(--ink-soft); max-width: 66ch; margin: 0 auto 1.4rem;
}

/* ───────────────────────────────────────────────────────────── responsive */
@media (max-width: 960px) {
  .epd-map-stage { grid-template-columns: 1fr; }
  .epd-mapdetail { position: static; }
  .epd-node-label { font-size: 30px; }
  .epd-node-meta { display: none; }
}

@media (max-width: 640px) {
  /* the map renders ~330px wide, so a viewBox unit is ~0.25px: scale type up */
  .epd-node-label { font-size: 44px; }
  .epd-node-count { font-size: 28px; }
  .epd-node-dot { r: 25; }
  .epd-node-hit { r: 50; }
  .epd-readout-k { font-size: 27px; }
  .epd-readout-n { font-size: 48px; }
  .epd-readout-s { font-size: 28px; }
  .epd-readout-h { font-size: 25px; }
  .epd-plaza text { font-size: 34px; }
  .epd-plaza .epd-plaza-sub { font-size: 26px; }
  .epd-rank { grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0.75rem; }
  .epd-rank-n { font-size: 2.1rem; }
  .epd-cards { grid-template-columns: 1fr; }
  .epd-controls { position: static; }
}

/* ───────────────────────────────────────────────────────── reduced motion */
@media (prefers-reduced-motion: reduce) {
  .epd *, .epd *::before, .epd *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .epd-best:hover, .epd-card:hover { transform: none; }
}