/* ============================================================================
   Every Magic Kingdom Restaurant, Ranked — page-scoped styles (mkd- prefix).
   Golden-hour supper on the midnight theme. Six lands, six accent hues, one
   color journey from the front gate to Tomorrowland.
   ========================================================================== */

.mkd {
  /* the V1 layout exposes --sb-gold/--red/--ink/--display but not the fuller
     token set this page uses; alias the missing ones locally so no var() ever
     resolves to transparent/inherit silently */
  --gold: var(--sb-gold, oklch(84% 0.130 86));
  --gold-deep: oklch(75% 0.130 84);
  --paper: oklch(24% 0.045 276);
  --paper-2: oklch(29% 0.050 277);
  --ink-soft: oklch(83% 0.030 84);
  --label: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* land accents, tuned for the dark paper */
  --mkd-ms:  oklch(82% 0.115 78);    /* Main Street brass */
  --mkd-adv: oklch(74% 0.125 150);   /* Adventureland jungle */
  --mkd-fro: oklch(74% 0.125 48);    /* Frontierland clay */
  --mkd-lib: oklch(77% 0.085 245);   /* Liberty Square slate */
  --mkd-fan: oklch(77% 0.115 325);   /* Fantasyland royal rose */
  --mkd-tom: oklch(78% 0.115 200);   /* Tomorrowland teal */

  --mkd-line: color-mix(in oklab, var(--ink) 14%, transparent);
  --mkd-card: color-mix(in oklab, var(--ink) 5%, transparent);
  --mkd-card-up: color-mix(in oklab, var(--ink) 9%, transparent);
  --mkd-max-w: 1080px;
  --mkd-pad: clamp(1rem, 4vw, 2rem);
  --mkd-serif: "Spectral", Georgia, serif;
  --mkd-appbar: 61px; /* the site .sb-bar sticky header this page must clear */
  overflow-x: clip;
}

.mkd section { padding: clamp(3rem, 7vw, 5.5rem) var(--mkd-pad); }
.mkd .mkd-section-head { max-width: var(--mkd-max-w); margin: 0 auto 1.75rem; }
.mkd h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.015em; }
.mkd h2, .mkd h3 { text-wrap: balance; }
.mkd h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.mkd-section-dek { max-width: 58ch; margin-top: .5rem; opacity: .86; text-wrap: pretty; }

/* land accent plumbing: any element with land-* exposes --mkd-accent */
.mkd .land-ms  { --mkd-accent: var(--mkd-ms); }
.mkd .land-adv { --mkd-accent: var(--mkd-adv); }
.mkd .land-fro { --mkd-accent: var(--mkd-fro); }
.mkd .land-lib { --mkd-accent: var(--mkd-lib); }
.mkd .land-fan { --mkd-accent: var(--mkd-fan); }
.mkd .land-tom { --mkd-accent: var(--mkd-tom); }

/* ------------------------------------------------------------------ hero */
.mkd-hero {
  position: relative; min-height: 94svh;
  display: grid; place-items: center; text-align: center;
  padding: 5rem var(--mkd-pad) 5.5rem; overflow: hidden; isolation: isolate;
}
.mkd-hero-canvas, .mkd-hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
}
.mkd-hero-fallback {
  background:
    radial-gradient(90% 62% at 50% 108%, oklch(64% 0.145 65 / .50), transparent 62%),
    radial-gradient(130% 85% at 82% -8%, oklch(30% 0.075 300 / .55), transparent 60%),
    radial-gradient(120% 80% at 14% 6%, oklch(27% 0.06 265 / .6), transparent 58%),
    linear-gradient(180deg, oklch(20% 0.045 275) 0%, oklch(25% 0.055 292) 58%, oklch(38% 0.10 44) 130%);
}
.mkd-hero-canvas { opacity: 0; transition: opacity 1.4s ease; }
.mkd-hero-canvas.is-live { opacity: 1; }

.mkd-hero-inner { max-width: 64rem; display: grid; gap: 1.2rem; justify-items: center; }
.mkd-kicker {
  letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; font-weight: 650;
  color: var(--gold); opacity: .95;
}
.mkd-h1 {
  display: grid; gap: .04em; justify-items: center;
  font-size: clamp(2.5rem, 8vw, 5.4rem); line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 4px 34px oklch(10% 0.03 280 / .85);
}
.mkd-h1 em {
  font-family: var(--mkd-serif); font-style: italic; font-weight: 500;
  color: var(--gold);
  padding-right: .06em; /* italic overhang so the l doesn't kiss the edge */
}
.mkd-dek { max-width: 56ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem); opacity: .92; text-wrap: pretty; }

.mkd-hero-ctas { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: .3rem; }
.mkd-cta {
  display: inline-block; padding: .72em 1.25em; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  font-weight: 650; font-size: .95rem; text-decoration: none; color: var(--ink);
  background: color-mix(in oklab, var(--paper-2) 60%, transparent);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, scale .12s ease;
}
.mkd-cta:hover { transform: translateY(-1px); border-color: var(--gold); }
.mkd-cta:active { scale: .96; }
.mkd-cta-primary {
  background: linear-gradient(120deg, var(--gold-deep), var(--gold));
  color: oklch(22% 0.05 80); border-color: transparent;
}
.mkd-cta-primary:hover { filter: brightness(1.06); }
.mkd-updated { font-size: .8rem; opacity: .62; letter-spacing: .02em; }

/* dish ticker along the hero's bottom edge */
.mkd-ticker {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 0;
  border-top: 1px solid color-mix(in oklab, var(--gold) 22%, transparent);
  background: color-mix(in oklab, var(--paper) 55%, transparent);
  backdrop-filter: blur(6px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mkd-ticker-track {
  display: inline-flex; gap: 2.6rem; white-space: nowrap;
  font-family: var(--label); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--gold) 78%, var(--ink));
}
.mkd-ticker-track.is-doubled {
  will-change: transform;
  animation: mkd-marquee 46s linear infinite;
  animation-play-state: paused; /* one marquee per viewport: runs once the wire ticker scrolls away */
}
.mkd-ticker-track.is-doubled.is-running { animation-play-state: running; }
.mkd-ticker:hover .mkd-ticker-track.is-doubled { animation-play-state: paused; }
.mkd-ticker-track span::after { content: "\2726"; margin-left: 2.6rem; opacity: .5; font-size: .7em; }
@keyframes mkd-marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- 10s answer */
.mkd-answer { border-top: 1px solid var(--mkd-line); }
.mkd-answer-lead {
  /* 68ch measure, left edge on the 1080px rail: the left margin IS the rail offset
     (percentages resolve against the section, same box the rail centers in) */
  max-width: 68ch;
  margin: 0 auto 2rem max(0px, calc((100% - var(--mkd-max-w)) / 2));
  font-size: clamp(1.08rem, 1.9vw, 1.3rem); line-height: 1.55; text-wrap: pretty;
}
.mkd-stats {
  max-width: var(--mkd-max-w); margin: 0 auto 2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--mkd-line); border: 1px solid var(--mkd-line); border-radius: 14px; overflow: hidden;
}
.mkd-stat { background: var(--mkd-card); padding: 1.1rem 1.2rem; display: grid; gap: .2rem; }
.mkd-stat-num {
  font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 750;
  color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.mkd-stat-label { font-size: .86rem; opacity: .8; line-height: 1.35; }

.mkd-bests {
  max-width: var(--mkd-max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem;
}
.mkd-best {
  display: grid; gap: .15rem; padding: .85rem 1rem; border-radius: 12px;
  border: 1px solid var(--mkd-line); background: var(--mkd-card);
  text-decoration: none; color: var(--ink);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mkd-best:hover { transform: translateY(-2px); background: var(--mkd-card-up); border-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.mkd-best-k { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 650; }
.mkd-best-v { font-weight: 700; }

/* ------------------------------------------------------------ top ten */
.mkd-topten { border-top: 1px solid var(--mkd-line); }
.mkd-rank-list {
  max-width: var(--mkd-max-w); margin: 0 auto; padding: 0; list-style: none;
  display: grid; gap: .9rem;
}
.mkd-rank {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding: 1.35rem 1.4rem 1.3rem;
  border: 1px solid color-mix(in oklab, var(--mkd-accent, var(--gold)) 32%, var(--mkd-line));
  border-radius: 16px;
  background: color-mix(in oklab, var(--mkd-accent, var(--gold)) 6%, var(--mkd-card));
  transition: background .2s ease;
}
.mkd-rank:hover { background: color-mix(in oklab, var(--mkd-accent, var(--gold)) 10%, var(--mkd-card)); }
.mkd-rank-num {
  font-family: var(--display); font-weight: 800; line-height: .8;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--mkd-accent, var(--gold)) 85%, transparent);
  min-width: 2ch; text-align: center; align-self: start; padding-top: .12em;
  font-variant-numeric: tabular-nums;
}
.mkd-rank:first-child .mkd-rank-num {
  color: var(--mkd-accent, var(--gold)); -webkit-text-stroke: 0;
  text-shadow: 0 0 30px color-mix(in oklab, var(--mkd-accent, var(--gold)) 45%, transparent);
}
.mkd-rank-body { display: grid; gap: .45rem; }
.mkd-rank-name { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0; }
.mkd-rank-name a { color: var(--ink); text-decoration: none; }
.mkd-rank-name a:hover { color: var(--gold); }
.mkd-rank-meta, .mkd-card-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.mkd-rank-line { margin: 0; opacity: .9; line-height: 1.55; max-width: 72ch; text-wrap: pretty; }
.mkd-rank-order, .mkd-card-order { margin: .1rem 0 0; font-size: .95rem; }
.mkd-rank-order span, .mkd-card-order span {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--mkd-accent, var(--gold)); margin-right: .5em;
}
.mkd-topten-note {
  max-width: 70ch;
  margin: 1.6rem auto 0 max(0px, calc((100% - var(--mkd-max-w)) / 2));
  font-size: .95rem; opacity: .85;
}

/* chips */
.mkd-chip {
  display: inline-block; padding: .22em .65em; border-radius: 999px;
  font-family: var(--label); font-size: .74rem; font-weight: 650; letter-spacing: .04em;
  border: 1px solid var(--mkd-line); color: var(--ink-soft);
  background: color-mix(in oklab, var(--paper-2) 55%, transparent);
}
.mkd-chip-land { border-color: color-mix(in oklab, var(--mkd-accent, var(--gold)) 55%, transparent); color: var(--mkd-accent, var(--gold)); }
.mkd-chip-price { color: var(--gold); border-color: color-mix(in oklab, var(--gold) 40%, transparent); letter-spacing: .12em; }
.mkd-chip-char { color: var(--mkd-fan); border-color: color-mix(in oklab, var(--mkd-fan) 55%, transparent); }
.mkd-chip-book { opacity: .9; }

/* ---------------------------------------------------------- directory */
.mkd-directory { border-top: 1px solid var(--mkd-line); }
.mkd-controls {
  max-width: var(--mkd-max-w); margin: 0 auto 1.6rem;
  display: grid; gap: .7rem;
  position: sticky; top: var(--mkd-appbar); z-index: 5;
  padding: .9rem 0 .8rem;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mkd-line);
}
.mkd-live-count {
  font-size: .82rem; opacity: .8; font-family: var(--label); letter-spacing: .03em;
  font-variant-numeric: tabular-nums; /* the count changes; digits must not dance */
}
.mkd-filter-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.mkd-pill {
  position: relative;
  padding: .5em 1em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mkd-line); background-color: var(--mkd-card); color: var(--ink);
  font-family: var(--label); font-weight: 650; font-size: .86rem;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, scale .12s ease;
}
.mkd-pill::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; }
.mkd-pill:hover { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.mkd-pill:active { scale: .96; }
.mkd-pill.is-on {
  /* solid, transitionable, and unmissable: the selected filter is the brightest thing in the row */
  background-color: var(--gold);
  color: oklch(20% 0.05 80);
  border-color: var(--gold);
  font-weight: 700;
}
.mkd-land-rail { display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.mkd-land-rail::-webkit-scrollbar { display: none; }
.mkd-land-link {
  position: relative;
  flex: 0 0 auto; padding: .35em .85em; border-radius: 999px; text-decoration: none;
  font-family: var(--label); font-size: .8rem; font-weight: 650; color: var(--mkd-accent);
  border: 1px solid color-mix(in oklab, var(--mkd-accent) 45%, transparent);
  transition: background .16s ease, opacity .16s ease, scale .12s ease;
}
.mkd-land-link::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; }
.mkd-land-link:not(.is-dead):active { scale: .96; }
.mkd-land-link:hover, .mkd-land-link.is-here { background: color-mix(in oklab, var(--mkd-accent) 18%, transparent); }
.mkd-land-link.is-dead { opacity: .35; cursor: default; }
.mkd-land-link.is-dead:hover { background: transparent; }

.mkd-rail-row { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.mkd-rail-row .mkd-land-rail { flex: 1 1 auto; min-width: 0; }
.mkd-live-count { flex: 0 0 auto; white-space: nowrap; }

@media (pointer: coarse) {
  .mkd-pill { min-height: 44px; padding: .55em 1.1em; }
  .mkd-land-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* keep the pinned stack short on phones: both control rows scroll sideways */
  .mkd-filter-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent);
  }
  .mkd-filter-row::-webkit-scrollbar { display: none; }
  .mkd-pill { flex: 0 0 auto; }
}

.mkd-land { max-width: var(--mkd-max-w); margin: 0 auto; padding-top: 1.4rem; scroll-margin-top: 13rem; }
.mkd-land-h {
  display: flex; align-items: center; gap: .6rem;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin-bottom: 1rem;
  color: var(--mkd-accent);
}
.mkd-land-count {
  font-family: var(--label); font-size: .78rem; font-weight: 650; letter-spacing: .06em;
  color: var(--ink-soft); align-self: center; padding-top: .3em;
}
.mkd-land.is-collapsing { pointer-events: none; overflow: hidden; }
.mkd-land-dot {
  width: .62em; height: .62em; border-radius: 50%; background: var(--mkd-accent);
  box-shadow: 0 0 14px color-mix(in oklab, var(--mkd-accent) 65%, transparent);
}
.mkd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.mkd-card {
  position: relative; display: grid; gap: .5rem; align-content: start;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid color-mix(in oklab, var(--mkd-accent) 30%, var(--mkd-line));
  border-radius: 14px; background: var(--mkd-card);
  transition: transform .18s ease, background .18s ease;
  scroll-margin-top: 14rem;
}
.mkd-card:hover { transform: translateY(-2px); background: var(--mkd-card-up); }
/* the ten ranked venues sit a shade prouder than their neighbors */
.mkd-card:has(.mkd-card-rank) {
  border-color: color-mix(in oklab, var(--mkd-accent) 48%, var(--mkd-line));
  background: color-mix(in oklab, var(--mkd-accent) 5%, var(--mkd-card));
}
.mkd-card.is-dormant { border-style: dashed; background: transparent; }
.mkd-card.is-dormant .mkd-card-name { color: var(--ink-soft); }
.mkd-card.is-dormant .mkd-card-line, .mkd-card.is-dormant .mkd-card-order { opacity: .78; }
.mkd-chip-dormant { color: color-mix(in oklab, var(--red) 60%, var(--ink)); border-color: color-mix(in oklab, var(--red) 50%, transparent); }
.mkd-card.is-hidden { display: none; }
.mkd-card-rank {
  position: absolute; top: .8rem; right: .9rem;
  font-family: var(--display); font-weight: 800; font-size: .8rem; letter-spacing: .06em;
  color: var(--mkd-accent);
}
.mkd-card-name { font-size: 1.06rem; margin: 0; padding-right: 3.2rem; }
.mkd-card-line { margin: 0; font-size: .92rem; line-height: 1.5; opacity: .88; text-wrap: pretty; }
.mkd-directory-note {
  max-width: 70ch;
  margin: 1.8rem auto 0 max(0px, calc((100% - var(--mkd-max-w)) / 2));
  font-size: .95rem; opacity: .85;
}
.mkd-price-legend {
  max-width: var(--mkd-max-w); margin: .6rem auto 0; font-size: .84rem; opacity: .82;
  font-family: var(--label); letter-spacing: .02em;
}
.mkd-price-legend b { color: var(--gold); font-weight: 700; letter-spacing: .1em; }
.mkd-empty {
  max-width: var(--mkd-max-w); margin: 1rem auto; padding: 1.2rem;
  border: 1px dashed var(--mkd-line); border-radius: 12px; text-align: center; opacity: .8;
}
.mkd-empty.is-hidden { display: none; }

/* ----------------------------------------------------------- playbook */
.mkd-playbook { border-top: 1px solid var(--mkd-line); }
.mkd-plays {
  max-width: var(--mkd-max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .9rem;
}
.mkd-play {
  position: relative; padding: 1.3rem 1.3rem 1.25rem; border-radius: 16px;
  border: 1px solid var(--mkd-line); background: var(--mkd-card);
  display: grid; gap: .5rem; align-content: start;
}
.mkd-play-num {
  font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.3px var(--gold);
}
.mkd-play h3 { margin: 0; }
.mkd-play p { margin: 0; font-size: .95rem; line-height: 1.6; opacity: .9; }

/* --------------------------------------------------------- whats gone */
.mkd-gone { border-top: 1px solid var(--mkd-line); }
.mkd-gone-cards {
  max-width: var(--mkd-max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem;
}
.mkd-gone-card {
  padding: 1.2rem 1.25rem; border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--red) 30%, var(--mkd-line));
  background: color-mix(in oklab, var(--red) 5%, var(--mkd-card));
}
.mkd-gone-card h3 { margin-bottom: .45rem; }
.mkd-gone-card p { margin: 0; font-size: .95rem; line-height: 1.6; opacity: .9; }

/* -------------------------------------------------------------- faq */
.mkd-faq { border-top: 1px solid var(--mkd-line); }
.mkd-faq-item {
  max-width: var(--mkd-max-w); margin: 0 auto .55rem;
  border: 1px solid var(--mkd-line); border-radius: 12px; background: var(--mkd-card);
  overflow: hidden;
}
.mkd-faq-item summary {
  cursor: pointer; padding: .95rem 1.15rem; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.mkd-faq-item summary::-webkit-details-marker { display: none; }
.mkd-faq-item summary::after {
  content: "+"; font-family: var(--display); font-size: 1.3rem; color: var(--gold);
  transition: transform .2s ease; flex: 0 0 auto;
}
.mkd-faq-item[open] summary::after { transform: rotate(45deg); }
.mkd-faq-item p { padding: 0 1.15rem 1.05rem; margin: 0; line-height: 1.6; opacity: .9; max-width: 75ch; }

/* ------------------------------------------------------------- close */
.mkd-close { text-align: center; border-top: 1px solid var(--mkd-line); }
.mkd-close-line {
  max-width: 46rem; margin: 0 auto 1.4rem;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.55; text-wrap: balance;
}

/* ------------------------------------------------------ a11y + motion */
.mkd :focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

@media (max-width: 640px) {
  .mkd-rank { grid-template-columns: 1fr; gap: .5rem; padding: 1.15rem 1.1rem; }
  .mkd-rank-num { text-align: left; min-width: 0; font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mkd-ticker-track.is-doubled { animation: none; }
  .mkd-hero-canvas { display: none; }
  .mkd-cta, .mkd-best, .mkd-card, .mkd-land-link, .mkd-pill { transition: none; }
  .mkd-faq-item summary::after { transition: none; }
  .mkd-pill:active, .mkd-cta:active, .mkd-land-link:not(.is-dead):active { scale: none; }
}