/* ============================================================================
   home.css — the homepage (/), on top of v1.css tokens.
   Twilight at the gates: the castle photo's own sky runs the width of the page,
   the headline hangs in it, and the planning console stands on the horizon.
   The crowd check is a paper ticket, the live board is a split-flap departure
   board, and every section below gets its own art direction.
   Everything is namespaced hm-. v1.js, home-plan.js and home-search.js drive
   the data attributes; the class names they write are noted where they occur.
   ========================================================================== */

/* The site's crowd scale (the crowd calendars use the same steps). */
:root {
  --hp-s1: oklch(71% 0.090 216);   --hp-s2: oklch(73% 0.082 206);   --hp-s3: oklch(75.5% 0.066 192);
  --hp-s4: oklch(81% 0.070 98);    --hp-s5: oklch(80% 0.098 89);    --hp-s6: oklch(79% 0.138 79);
  --hp-s7: oklch(76.5% 0.160 64);  --hp-s8: oklch(73.5% 0.182 46);  --hp-s9: oklch(70.5% 0.198 29);
  --hp-s10: oklch(68% 0.215 14);
  --hm-ease: cubic-bezier(.22, 1, .36, 1);
  --hm-expo: cubic-bezier(.16, 1, .3, 1);
  --hm-panel: oklch(24.5% 0.048 279);
  --hm-panel-2: oklch(28% 0.05 279);
  --hm-board: oklch(14.5% 0.022 280);
  --hm-cell: oklch(19.5% 0.024 280);
  --hm-sky-h: clamp(600px, 74vh, 680px);
  --hm-rise: 210px;   /* how far the console climbs into the sky band */
}

/* ── Sky band ─────────────────────────────────────────────────────────────── */
.hm-sky { position: relative; isolation: isolate; height: var(--hm-sky-h); overflow: hidden; }
.hm-sky-art {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  /* the photo's left-edge sky, sampled top to horizon, then the dark ground */
  background: linear-gradient(180deg,
    #233980 0%, #39509a 11.6%, #475fa8 23.3%, #5b6fb3 34.9%, #707fb3 46.5%, #8387b1 52.3%,
    #9a93b1 58.1%, #ba9fad 62.8%, #e1aca0 67.4%, #f3b497 69.8%, #f8bc88 72.1%, #eab98f 73.6%,
    #7a5a63 75.2%, #2e2233 77.4%, #140f1c 81%, oklch(19% 0.042 279) 100%);
}
/* night weighs on the top and left, the ground fades into the page below */
.hm-sky-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 62% at 16% 34%, oklch(18% 0.06 275 / 0.62), transparent 72%),
    linear-gradient(180deg, oklch(20% 0.045 280) 0%, oklch(20% 0.045 280 / 0.55) 9%, oklch(20% 0.05 278 / 0.18) 30%, transparent 55%),
    linear-gradient(180deg, transparent 80%, oklch(19% 0.042 279) 100%);
}
.hm-castle {
  position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  transform: translate3d(0, var(--hm-par, 0px), 0);
  will-change: transform;
}
/* the glow along the horizon, warming as the page loads */
.hm-sky-glow {
  position: absolute; left: 0; right: 0; top: 60%; height: 22%; pointer-events: none; z-index: 1;
  background: radial-gradient(60% 55% at 38% 62%, oklch(88% 0.1 60 / 0.55), oklch(80% 0.13 40 / 0.18) 50%, transparent 75%);
  mix-blend-mode: screen;
}
.hm-stars { position: absolute; left: 0; right: 0; top: 0; height: 52%; pointer-events: none; transform: translate3d(0, calc(var(--hm-par, 0px) * 0.4), 0); }
.hm-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: oklch(97% 0.02 90);
  opacity: 0.55; box-shadow: 0 0 4px oklch(97% 0.02 90 / 0.8);
}
.hm-stars i:nth-child(3n) { width: 1.5px; height: 1.5px; opacity: 0.4; }
.hm-stars i:nth-child(5n) { width: 2.5px; height: 2.5px; }
@media (prefers-reduced-motion: no-preference) {
  .hm-sky-glow { animation: hm-dawn 3.2s var(--hm-ease) both, hm-breathe 9s ease-in-out 3.2s infinite; }
  .hm-stars i { animation: hm-twinkle 3.6s ease-in-out infinite; animation-delay: calc(var(--s) * -0.37s); }
  .hm-title-l { animation: hm-rise .9s var(--hm-expo) both; }
  .hm-title-l:nth-child(2) { animation-delay: .09s; }
  .hm-lede { animation: hm-rise .9s var(--hm-expo) .16s both; }
  .hm-live { animation: hm-rise .9s var(--hm-expo) both; }
}
@keyframes hm-dawn { from { opacity: 0; transform: translateY(14%); } }
@keyframes hm-breathe { 50% { opacity: 0.78; } }
@keyframes hm-twinkle { 50% { opacity: 0.12; } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(18px); } }

.hm-sky-copy { padding-top: clamp(36px, 7vh, 70px); max-width: var(--maxw); }
.hm-live {
  display: inline-flex; align-items: center; gap: 10px; max-width: 42rem;
  margin: 0 0 22px; padding: 8px 14px 8px 12px; border-radius: 14px;
  background: oklch(16% 0.04 278 / 0.72); color: var(--ink); font-size: 14.5px; line-height: 1.4;
  box-shadow: inset 0 0 0 1px oklch(84% 0.13 86 / 0.28);
}
.hm-live[hidden] { display: none; }
.hm-live b { font-weight: 700; }
.hm-live > span:not(.live-dot) { min-width: 0; }
.hm-live .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; box-shadow: 0 0 0 0 oklch(84% 0.13 86 / 0.6); }
.hm-live[data-state="closed"] .live-dot { background: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) { .hm-live[data-state="open"] .live-dot { animation: hm-ping 2.2s var(--hm-ease) infinite; } }
@keyframes hm-ping { 70% { box-shadow: 0 0 0 8px oklch(84% 0.13 86 / 0); } 100% { box-shadow: 0 0 0 0 oklch(84% 0.13 86 / 0); } }
.hm-live .hl-wait { font-family: var(--display); font-weight: 800; color: var(--brand); }
.hm-live .hl-jump { font-weight: 700; color: var(--brand); white-space: nowrap; }
/* phones hear the longest line; wide screens add the calmest park, the board already shows the longest */
.hm-live .hl-calm, .hm-live .hl-open { display: none; }
@media (min-width: 1100px) {
  .hm-live:has(.hl-calm) .hl-long { display: none; }
  .hm-live .hl-calm { display: inline; }
}

.hm-title {
  font-family: var(--display); font-weight: 800; color: var(--ink);
  font-size: clamp(42px, 5.6vw, 80px); line-height: 0.98; letter-spacing: -0.03em;
  text-wrap: balance; margin: 0;
  text-shadow: 0 2px 30px oklch(15% 0.06 275 / 0.45);
}
.hm-title-l { display: block; }
.hm-title em { font-style: normal; color: var(--brand); }
.hm-lede {
  margin: 20px 0 0; max-width: 34rem; font-size: clamp(16.5px, 1.45vw, 19px); line-height: 1.55;
  color: var(--ink); font-weight: 500; text-shadow: 0 1px 12px oklch(15% 0.06 275 / 0.6); text-wrap: pretty;
}

/* ── Console: ticket + board on the horizon ───────────────────────────────── */
.hm-console { position: relative; z-index: 2; margin-top: calc(-1 * var(--hm-rise)); }
.hm-console-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.hm-photo-credit { margin-top: 14px; text-align: right; font-size: 11.5px; color: var(--ink-3); opacity: 0.8; }

/* The crowd check: a paper ticket with notches on the perforation */
.hm-ticket-wrap { filter: drop-shadow(0 26px 34px oklch(6% 0.03 280 / 0.55)) drop-shadow(0 2px 3px oklch(6% 0.03 280 / 0.35)); }
.hm-ticket {
  --paper: oklch(95.5% 0.026 86);
  --paper-2: oklch(92% 0.03 84);
  --pink: oklch(24% 0.045 276);
  --pmute: oklch(44% 0.04 276);
  --notch: 52px;
  position: relative; margin: 0; padding: 16px 24px 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, oklch(90% 0.06 80 / 0.55), transparent 55%),
    var(--paper);
  color: var(--pink); border-radius: 16px;
  -webkit-mask: radial-gradient(circle 11px at left var(--notch), #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at right var(--notch), #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at left var(--notch), #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at right var(--notch), #0000 97%, #000) right / 51% 100% no-repeat;
}
.hm-ticket-k {
  display: flex; justify-content: space-between; align-items: center; height: calc(var(--notch) - 14px);
  margin: 0 0 16px; border-bottom: 2px dashed oklch(70% 0.04 80 / 0.7);
  font-family: var(--ui); font-weight: 800; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pmute);
}
.hm-ticket-k span:last-child { color: oklch(55% 0.14 60); }
.hm-q { margin: 0 0 14px; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.35; letter-spacing: -0.02em; color: var(--pink); }
.hm-pick { position: relative; display: inline-block; margin: 0 2px; vertical-align: baseline; }
.hm-sizer { display: inline-block; visibility: hidden; white-space: pre; padding: 0 28px 1px 2px; font: inherit; }
.hm-pick::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 7px; border-radius: 2px; background: oklch(80% 0.14 80); pointer-events: none; transform: scaleY(0.57); transform-origin: bottom; transition: transform .2s var(--hm-ease); }
.hm-pick:hover::after { transform: none; }
.hm-park-select {
  position: absolute; inset: -8px 0; width: 100%; min-height: 44px; margin: 0; padding: 0 28px 0 2px;
  appearance: none; -webkit-appearance: none; font: inherit; letter-spacing: inherit; color: oklch(38% 0.14 285); background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234b3aa0' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 13px 9px; color-scheme: light;
}
.hm-park-select:focus-visible { outline: 2.5px solid oklch(45% 0.15 285); outline-offset: 3px; }
.hm-park-select option, .hm-park-select optgroup { color: oklch(22% 0.04 276); background: #fff; font-family: var(--ui); font-weight: 600; font-size: 16px; }
.hm-ticket-row { display: flex; gap: 8px; }
.hm-date {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--pink); background: #fff; border: 1.5px solid oklch(78% 0.03 84); color-scheme: light;
}
.hm-date:focus-visible { outline: 2.5px solid oklch(45% 0.15 285); outline-offset: 2px; }
.hm-ticket .hplan-go {   /* class written by home-plan.js */
  flex: 0 0 auto; height: 52px; padding: 0 22px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800; color: var(--ink); background: oklch(26% 0.07 281);
  transition: background .2s var(--hm-ease), transform .15s var(--hm-ease);
}
.hm-ticket .hplan-go:hover { background: oklch(32% 0.09 283); }
.hm-ticket .hplan-go:active { transform: scale(0.97); }
.hm-ticket .hplan-go:focus-visible { outline: 2.5px solid oklch(45% 0.15 285); outline-offset: 2px; }

/* the crowd meter: ten steps of the ramp, lit up to the answer */
.hm-meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 18px 0 0; }
.hm-meter i {
  --on: clamp(0, var(--score, 0) - var(--n) + 1, 1);
  height: 10px; border-radius: 3px; background: var(--c);
  opacity: calc(0.16 + var(--on) * 0.84);
  transform: scaleY(calc(0.7 + var(--on) * 0.3));
  transition: opacity .35s var(--hm-ease), transform .35s var(--hm-ease);
  transition-delay: calc(var(--n) * 30ms);
}
.hm-answer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 0;
  font-size: 16px; line-height: 1.4; color: var(--pmute); min-height: 36px;
  transition: opacity .2s;
}
.hm-answer:empty { min-height: 0; margin: 0; }
.hm-answer.is-stale { opacity: 0.45; }
.hm-answer b { color: var(--pink); font-weight: 800; }
.hm-answer a { color: oklch(40% 0.15 285); font-weight: 700; text-underline-offset: 3px; }
.hm-ticket .hplan-score {   /* class written by home-plan.js */
  display: inline-grid; place-items: center; min-width: 58px; height: 36px; padding: 0 10px; border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums;
  color: oklch(21% 0.045 276); background: var(--hp-lv, var(--hp-s5));
  box-shadow: inset 0 0 0 2px oklch(21% 0.045 276 / 0.14);
}
.hm-tip { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid oklch(84% 0.03 84); font-size: 14.5px; color: var(--pmute); line-height: 1.45; }
.hm-tip[hidden] { display: none; }
.hm-tip a, .hm-tip button {   /* home-plan.js swaps the link for a button */
  font: inherit; font-weight: 800; color: oklch(40% 0.15 285); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: oklch(80% 0.14 80);
}

.hm-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.hm-tool {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none;
  background: oklch(20% 0.045 279 / 0.85); box-shadow: inset 0 0 0 1px var(--line);
  transition: background .2s, box-shadow .2s, transform .25s var(--hm-ease);
}
.hm-tool:hover { text-decoration: none; background: var(--hm-panel-2); box-shadow: inset 0 0 0 1px oklch(84% 0.13 86 / 0.45); transform: translateY(-2px); }
.hm-tool-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--brand); background: var(--brand-tint); }
.hm-tool-ic svg { width: 20px; height: 20px; }
.hm-tool-tx { display: grid; line-height: 1.25; min-width: 0; }
.hm-tool-tx b { font-size: 15px; font-weight: 800; }
.hm-tool-tx > span { font-size: 13px; color: var(--ink-2); }
.hm-tool [data-tool-park] { color: var(--ink); font-weight: 600; }

/* a key to both widgets: the crowd ramp and the board's lamp colours */
.hm-legend { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: oklch(18% 0.04 279 / 0.7); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.06); }
.hm-legend-h { font-size: 13px; font-weight: 800; color: var(--ink-2); margin-bottom: 10px; }
.hm-legend-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.hm-legend-scale i { height: 8px; border-radius: 2px; }
.hm-legend-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.hm-legend-heat { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid oklch(100% 0 0 / 0.07); display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--ink-2); }
.hm-legend-heat li { display: inline-flex; align-items: center; gap: 7px; }
.hm-legend-heat i { width: 9px; height: 9px; border-radius: 50%; }
.hm-legend-heat .is-low { background: var(--heat-low); box-shadow: 0 0 8px var(--heat-low); }
.hm-legend-heat .is-med { background: var(--heat-med); box-shadow: 0 0 8px var(--heat-med); }
.hm-legend-heat .is-high { background: var(--heat-high); box-shadow: 0 0 8px var(--heat-high); }
/* wide screens: the ticket rides along while the taller board scrolls past */
@media (min-width: 860px) { .hm-plan { position: sticky; top: 84px; } }

/* ── The live board: a split-flap departure board ─────────────────────────── */
.hm-board {
  border-radius: 20px; padding: clamp(14px, 1.8vw, 20px);
  background: linear-gradient(180deg, oklch(17% 0.025 280), var(--hm-board));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.07), 0 30px 60px -22px oklch(5% 0.03 280 / 0.8);
  scroll-margin-top: 80px;
}
.hm-board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 4px 14px; }
.hm-board-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; }
.hm-board-cap { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); line-height: 1.35; }
.hm-stamp {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-2);
  padding: 6px 10px; border-radius: 999px; background: oklch(100% 0 0 / 0.05);
}
.hm-ld { width: 7px; height: 7px; border-radius: 50%; background: var(--heat-low); box-shadow: 0 0 8px var(--heat-low); }
.hm-stamp.is-closed .hm-ld { background: var(--ink-3); box-shadow: none; }

.hm-rows { display: grid; gap: 4px; }
.hm-resort {
  display: block; padding: 12px 6px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.hm-resort:first-child { padding-top: 0; }
.hm-park {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 9px 12px 9px 14px; margin: 0; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink); background: var(--hm-cell);
  transition: background .2s, box-shadow .2s;
}
.hm-park:hover { background: oklch(23% 0.03 280); }
.hm-park[aria-checked="true"] { background: oklch(25% 0.045 282); box-shadow: inset 0 0 0 1.5px oklch(84% 0.13 86 / 0.75); }
.hm-park:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }
.hm-park [hidden] { display: none !important; }
.hm-lamp { width: 10px; height: 10px; border-radius: 50%; background: oklch(38% 0.02 280); box-shadow: inset 0 1px 1px oklch(0% 0 0 / 0.5); }
.hm-park.open .hm-lamp { background: var(--heat-med); box-shadow: 0 0 10px var(--heat-med); }
.hm-park.open:has(.heat-low:not([hidden])) .hm-lamp { background: var(--heat-low); box-shadow: 0 0 10px var(--heat-low); }
.hm-park.open:has(.heat-high:not([hidden])) .hm-lamp { background: var(--heat-high); box-shadow: 0 0 10px var(--heat-high); }
.hm-park-id { display: grid; min-width: 0; line-height: 1.25; }
.hm-park-name { font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-park[aria-checked="true"] .hm-park-name { color: var(--brand); }
.hm-park-status { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hm-wait { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; justify-items: end; }
.hm-flap { grid-row: 1 / 3; display: inline-flex; gap: 3px; font-weight: 400; }
.hm-flap i {
  position: relative; width: 25px; height: 36px; display: grid; place-items: center; overflow: hidden;
  font-style: normal; font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1; color: oklch(96% 0.02 86);
  border-radius: 4px; background: linear-gradient(180deg, oklch(27% 0.012 280) 0 50%, oklch(23% 0.012 280) 50%);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08), 0 2px 0 oklch(0% 0 0 / 0.55);
}
.hm-flap i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: oklch(8% 0.01 280); }
.hm-flap i.is-flip { animation: hm-flip 110ms ease-in-out; }
@keyframes hm-flip { 50% { transform: scaleY(0.12); filter: brightness(1.7); } }
.hm-min { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); align-self: end; justify-self: start; }
.hm-busy { font-style: normal; font-size: 11.5px; font-weight: 800; white-space: nowrap; align-self: start; justify-self: start; color: var(--ink-3); }
.hm-wait.heat-low .hm-busy { color: var(--heat-low); }
.hm-wait.heat-med .hm-busy { color: var(--heat-med); }
.hm-wait.heat-high .hm-busy { color: var(--heat-high); }
.hm-next { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.hm-grade { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.hm-score {
  display: inline-grid; place-items: center; min-width: 46px; height: 30px; padding: 0 7px; border-radius: 7px;
  font-family: var(--display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
  color: oklch(21% 0.045 276); background: var(--hp-lv, var(--hp-s5));
}
.hm-level { text-transform: lowercase; }

/* the chosen park's longest lines */
.hm-detail { margin-top: 14px; padding: 16px 14px 4px; border-top: 1px dashed oklch(45% 0.04 280); }
.hm-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-detail-title { font-family: var(--ui); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.hm-detail-title b { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--ink); }
.hm-share {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); background: oklch(100% 0 0 / 0.06); border: 0;
  transition: background .2s;
}
.hm-share svg { width: 15px; height: 15px; }
.hm-share:hover { background: oklch(100% 0 0 / 0.12); }
.hm-share[hidden] { display: none; }
.hm-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.hm-line {   /* rows written by v1.js */
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid oklch(100% 0 0 / 0.06);
}
.hm-line:last-child { border-bottom: 0; }
.hm-line-rk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--ink-2); background: oklch(100% 0 0 / 0.07); }
.hm-line:first-child .hm-line-rk { color: var(--brand-ink); background: var(--brand); }
.hm-line-rd { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-line-wt { font-family: var(--display); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hm-line-wt span { font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.hm-line-empty { padding: 8px 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.hm-detail-go { display: inline-block; margin: 8px 0 10px; font-weight: 800; font-size: 14.5px; color: var(--brand); }
.hm-detail-go span[aria-hidden] { display: inline-block; transition: transform .25s var(--hm-ease); }
.hm-detail-go:hover span[aria-hidden] { transform: translateX(4px); }

@media (prefers-reduced-motion: no-preference) {
  .hm-ticket-wrap { animation: hm-rise 1s var(--hm-expo) .2s both; }
  .hm-tools { animation: hm-rise 1s var(--hm-expo) .3s both; }
  .hm-board { animation: hm-rise 1s var(--hm-expo) .12s both; }
  .hm-park { animation: hm-row .6s var(--hm-expo) both; animation-delay: calc(.3s + var(--row) * 45ms); }
}
@keyframes hm-row { from { opacity: 0; transform: translateX(-10px); } }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.hm-sec { padding-top: clamp(64px, 9vw, 116px); }
.hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); }
.hm-head h2 { font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
.hm-head p { margin-top: 10px; max-width: 46ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.hm-head--stack { display: block; }
.hm-more { flex: none; font-weight: 800; font-size: 15px; color: var(--brand); white-space: nowrap; }
.hm-more span { display: inline-block; transition: transform .25s var(--hm-ease); }
.hm-more:hover span { transform: translateX(4px); }
.hm-chip {
  display: inline-block; align-self: flex-start; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--brand-ink); background: var(--brand);
}
.hm-go { display: inline-block; margin-top: auto; padding-top: 14px; font-weight: 800; font-size: 15px; color: var(--brand); }
.hm-go span { display: inline-block; transition: transform .25s var(--hm-ease); }
a:hover .hm-go span { transform: translateX(4px); }
.hm-sec a:is(.hm-gfeat, .hm-gcard, .hm-desk-lead, .hm-desk-item, .hm-comic, .hm-arcade):hover { text-decoration: none; }

/* Guides: a magazine spread */
.hm-gwall { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(14px, 1.8vw, 22px); }
.hm-gfeat {
  grid-row: span 2; position: relative; display: flex; min-height: 520px; border-radius: 18px; overflow: hidden; color: var(--ink); isolation: isolate;
  background: var(--hm-panel);
}
.hm-gfeat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--hm-ease); }
.hm-gfeat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, oklch(14% 0.04 279 / 0.72) 58%, oklch(13% 0.04 279 / 0.96) 100%); }
.hm-gfeat:hover img { transform: scale(1.04); }
.hm-gfeat-body { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.6vw, 32px); }
.hm-gfeat h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
.hm-gfeat-ex { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.hm-byline { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.hm-gcard { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; color: var(--ink); background: var(--hm-panel); transition: transform .35s var(--hm-ease), background .25s; }
.hm-gcard:hover { transform: translateY(-4px); background: var(--hm-panel-2); }
.hm-gcard-art { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hm-panel-2); }
.hm-gcard-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--hm-ease); }
.hm-gcard:hover .hm-gcard-art img { transform: scale(1.05); }
.hm-gcard-word {
  --gh: 86; display: grid; align-items: end; padding: 14px 16px;
  background: radial-gradient(120% 120% at 100% 0%, oklch(62% 0.16 var(--gh) / 0.55), transparent 60%), linear-gradient(135deg, oklch(30% 0.07 var(--gh)), oklch(20% 0.05 280));
}
.hm-gcard:nth-child(3) .hm-gcard-word { --gh: 330; }
.hm-gcard:nth-child(4) .hm-gcard-word { --gh: 200; }
.hm-gcard:nth-child(5) .hm-gcard-word { --gh: 150; }
.hm-gcard-word span { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1; letter-spacing: -0.03em; color: oklch(96% 0.02 86); text-wrap: balance; }
.hm-gcard-body { display: grid; gap: 6px; padding: 14px 16px 18px; }
.hm-gcard-cat { font-size: 12.5px; font-weight: 800; color: var(--brand); }
.hm-gcard h3 { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }

/* What's being built: one line per project, five stops from announcement to construction */
.hm-built { border-radius: 18px; background: var(--hm-panel); padding: 8px clamp(14px, 2vw, 24px) 10px; }
.hm-built-scale, .hm-built-list a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) minmax(110px, 0.55fr); align-items: center; gap: 20px; }
.hm-built-scale { padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.hm-built-stages { display: grid; grid-template-columns: repeat(5, 1fr); }
.hm-built-stages span { font-size: 12px; font-weight: 800; color: var(--ink-3); text-align: center; line-height: 1.2; padding: 0 2px; }
.hm-built-list { list-style: none; margin: 0; padding: 0; }
.hm-built-list li + li { border-top: 1px solid oklch(100% 0 0 / 0.06); }
.hm-built-list a { padding: 16px 0; color: var(--ink); border-radius: 8px; transition: background .2s; }
.hm-built-list a:hover { text-decoration: none; background: oklch(100% 0 0 / 0.03); }
.hm-built-name h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.hm-built-meta { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-3); }
.hm-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; align-items: center; height: 22px; }
.hm-track::before, .hm-track::after { content: ""; position: absolute; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; left: 10%; }
.hm-track::before { right: 10%; background: oklch(38% 0.04 280); }
.hm-track::after { width: calc((var(--step) - 1) * 20%); background: linear-gradient(90deg, oklch(70% 0.12 80), var(--brand)); }
.hm-track i { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: oklch(24% 0.04 280); box-shadow: inset 0 0 0 2px oklch(45% 0.04 280); }
.hm-track i.is-past { background: var(--brand); box-shadow: none; }
.hm-track i.is-now { width: 18px; height: 18px; background: var(--brand); box-shadow: 0 0 0 4px oklch(84% 0.13 86 / 0.2), 0 0 16px oklch(84% 0.13 86 / 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .hm-track i.is-now { animation: hm-now 2.4s ease-in-out infinite; }
}
@keyframes hm-now { 50% { box-shadow: 0 0 0 8px oklch(84% 0.13 86 / 0.06), 0 0 22px oklch(84% 0.13 86 / 0.8); } }
.hm-built-status { font-size: 14px; font-weight: 700; color: var(--ink-2); text-align: right; }

/* Reliability: a ranked chart */
.hm-rel { border-radius: 18px; background: var(--hm-panel); padding: 10px clamp(14px, 2vw, 24px) 12px; }
.hm-rel-axis, .hm-rel-list a { display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 2fr); align-items: center; gap: 16px; }
.hm-rel-axis { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.hm-rel-axis > span:first-child { grid-column: 1 / 3; }
.hm-rel-ticks { position: relative; height: 16px; }
.hm-rel-ticks i { position: absolute; left: var(--at); transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hm-rel-ticks i:first-child { transform: none; }
.hm-rel-ticks i:last-child { transform: translateX(-100%); }
.hm-rel-list { list-style: none; margin: 0; padding: 0; }
.hm-rel-list li + li { border-top: 1px solid oklch(100% 0 0 / 0.06); }
.hm-rel-list a { padding: 14px 0; color: var(--ink); border-radius: 8px; transition: background .2s; }
.hm-rel-list a:hover { text-decoration: none; background: oklch(100% 0 0 / 0.03); }
.hm-rel-rank { font-family: var(--display); font-size: 30px; font-weight: 800; color: var(--ink-3); text-align: center; line-height: 1; }
.hm-rel-list li:first-child .hm-rel-rank { color: var(--heat-high); }
.hm-rel-ride { display: grid; line-height: 1.3; min-width: 0; }
.hm-rel-ride b { font-family: var(--display); font-size: 17px; font-weight: 700; }
.hm-rel-ride span { font-size: 13.5px; color: var(--ink-3); }
.hm-rel-bar { position: relative; height: 30px; border-radius: 8px; background: linear-gradient(90deg, transparent calc(100% - 1px), oklch(100% 0 0 / 0.08) 0) 0 0 / calc(100% / var(--n, 4)) 100%; }
.hm-rel-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); min-width: 60px; border-radius: 8px;
  background: linear-gradient(90deg, oklch(55% 0.16 12), var(--heat-high));
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-style: normal;
}
.hm-rel-bar b { font-family: var(--display); font-size: 15px; font-weight: 800; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .hm-rel-bar i { animation: hm-bar 1.1s var(--hm-expo) both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
}
@keyframes hm-bar { from { clip-path: inset(0 96% 0 0 round 8px); } to { clip-path: inset(0 0 0 0 round 8px); } }

/* From our desk: the paper's own page */
.hm-desk-mast {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px;
  padding-bottom: 14px; margin-bottom: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line-2); box-shadow: 0 4px 0 -1px var(--hm-panel), 0 5px 0 -1px var(--line);
}
.hm-desk-mast h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; }
.hm-desk-date { grid-column: 1; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.hm-desk-mast .hm-more { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.hm-desk { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.hm-desk-lead { display: grid; gap: 18px; color: var(--ink); }
.hm-desk-lead.has-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.hm-desk-art { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--hm-panel); }
.hm-desk-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--hm-ease); }
.hm-desk-lead:hover .hm-desk-art img { transform: scale(1.04); }
.hm-desk-body { display: flex; flex-direction: column; gap: 12px; }
.hm-desk-lead h3 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.hm-desk-lead:hover h3 { color: var(--brand); }
.hm-desk-ex { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hm-desk-meta { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.hm-desk-more { display: grid; align-content: start; border-left: 1px solid var(--line); padding-left: clamp(18px, 2.6vw, 34px); }
.hm-desk-item { display: grid; gap: 6px; padding: 16px 0; color: var(--ink); border-bottom: 1px solid var(--line); }
.hm-desk-item:first-child { padding-top: 0; }
.hm-desk-item:last-child { border-bottom: 0; }
.hm-desk-item h3 { font-size: 18.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; transition: color .2s; }
.hm-desk-item:hover h3 { color: var(--brand); }

/* For the wait in line: the comic, and the Arcade's front door */
.hm-breaks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.hm-comic { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-radius: 18px; overflow: hidden; color: var(--ink); background: var(--hm-panel); transition: transform .35s var(--hm-ease); }
.hm-comic:hover { transform: translateY(-4px); }
.hm-comic-art { display: block; background: oklch(95% 0.03 86); }
.hm-comic-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hm-comic-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2.2vw, 26px); }
.hm-comic h3 { font-size: clamp(22px, 2vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.hm-comic-ex { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.hm-arcade {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 2.2vw, 26px);
  border-radius: 18px; color: var(--ink); overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 70% at 50% 0%, oklch(80% 0.14 78 / 0.18), transparent 70%), linear-gradient(oklch(17% 0.035 285), oklch(13% 0.03 285));
  transition: transform .35s var(--hm-ease);
}
.hm-arcade:hover { transform: translateY(-4px); }
.hm-arcade-sign { position: relative; align-self: center; padding: 12px 26px; border-radius: 12px; background: oklch(12% 0.02 280); }
.hm-arcade-sign::before, .hm-arcade-sign::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 6px;
  background: radial-gradient(circle at 3px 3px, oklch(92% 0.1 85) 2px, transparent 2.6px) 0 0 / 13px 6px repeat-x;
  filter: drop-shadow(0 0 3px oklch(84% 0.13 86));
}
.hm-arcade-sign::before { top: 3px; }
.hm-arcade-sign::after { bottom: 3px; }
.hm-arcade-sign span { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.08em; text-transform: uppercase; color: oklch(95% 0.06 88); text-shadow: 0 0 10px oklch(84% 0.13 86 / 0.9), 0 0 28px oklch(80% 0.15 70 / 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .hm-arcade-sign::before, .hm-arcade-sign::after { animation: hm-chase 1.2s steps(2) infinite; }
}
@keyframes hm-chase { 50% { background-position: 6.5px 0; } }
.hm-arcade-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hm-arcade-scr {
  position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: oklch(9% 0.02 280);
  box-shadow: 0 0 0 4px oklch(10% 0.02 280), 0 0 0 5px oklch(34% 0.045 280);
}
.hm-arcade-scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(oklch(0% 0 0 / 0.16) 50%, transparent 50%) 0 0 / 100% 3px, radial-gradient(120% 110% at 50% 50%, transparent 55%, oklch(0% 0 0 / 0.5)); }
.hm-arcade-scr img { width: 100%; height: 100%; object-fit: cover; }
.hm-arcade-rd { display: flex; align-items: center; justify-content: center; gap: 3px; background: radial-gradient(90% 90% at 50% 40%, oklch(28% 0.06 150 / 0.6), oklch(11% 0.025 280) 75%); }
.hm-arcade-rd i { width: 17%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 3px; font-style: normal; font-family: var(--display); font-weight: 800; font-size: clamp(10px, 1.1vw, 14px); color: #fff; background: oklch(64% 0.16 150); }
.hm-arcade-body { display: flex; flex-direction: column; gap: 8px; }
.hm-arcade-body h3 { font-size: clamp(22px, 2vw, 27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.hm-arcade-body > span:not(.hm-go) { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* Quick answers */
.hm-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; align-items: start; }
.hm-faq details { border-radius: 14px; background: var(--hm-panel); transition: background .2s; }
.hm-faq details[open] { background: var(--hm-panel-2); }
.hm-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; font-family: var(--display); font-weight: 700; font-size: 17.5px; line-height: 1.3; letter-spacing: -0.01em;
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ui); font-size: 20px; font-weight: 600; color: var(--brand); background: var(--brand-tint);
  transition: transform .3s var(--hm-ease);
}
.hm-faq details[open] summary::after { transform: rotate(45deg); }
.hm-faq summary:hover { color: var(--brand); }
.hm-faq details p { padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Every park, every tool: a table of parks against tools. Each tool column owns a hue
   and an icon, so the grid reads by colour at a glance; hovering a cell lights its row,
   its column and its heading. */
.hm-search { max-width: 640px; margin: 0 0 22px; }
.hm-matrix {
  --mx-first: minmax(190px, 1.5fr);
  border-radius: 20px; padding: 4px clamp(10px, 1.6vw, 20px) 14px;
  background: linear-gradient(180deg, var(--hm-panel), oklch(22% 0.045 279));
}
.hm-mx-head, .hm-mx-row { display: grid; grid-template-columns: var(--mx-first) minmax(0, 6fr); align-items: center; }
.hm-mx-head { grid-template-columns: var(--mx-first) repeat(6, minmax(0, 1fr)); padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
.hm-mx-head span {
  --mx: var(--ink-3);
  display: grid; justify-items: center; gap: 8px; padding: 0 6px; text-align: center;
  font-size: 12.5px; font-weight: 800; line-height: 1.25; color: var(--ink-2); transition: color .2s;
}
.hm-mx-head span:first-child { justify-items: start; align-self: end; padding-left: 10px; color: var(--ink-3); }
.hm-mx-head svg { width: 22px; height: 22px; color: var(--mx); transition: transform .3s var(--hm-ease); }
/* the six tool hues, shared by heading and cells */
.hm-mx-head span:nth-child(2), .hm-mx-links li:nth-child(1) { --mx: oklch(80% 0.15 152); }
.hm-mx-head span:nth-child(3), .hm-mx-links li:nth-child(2) { --mx: oklch(84% 0.13 86); }
.hm-mx-head span:nth-child(4), .hm-mx-links li:nth-child(3) { --mx: oklch(78% 0.11 225); }
.hm-mx-head span:nth-child(5), .hm-mx-links li:nth-child(4) { --mx: oklch(80% 0.13 55); }
.hm-mx-head span:nth-child(6), .hm-mx-links li:nth-child(5) { --mx: oklch(76% 0.15 10); }
.hm-mx-head span:nth-child(7), .hm-mx-links li:nth-child(6) { --mx: oklch(76% 0.13 300); }

.hm-mx-resort {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 10px 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand);
}
.hm-mx-resort::after { content: ""; flex: 1; height: 1px; background: oklch(84% 0.13 86 / 0.18); }
.hm-mx-row { position: relative; min-height: 60px; border-radius: 12px; transition: background .15s; }
.hm-mx-row + .hm-mx-row::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: oklch(100% 0 0 / 0.06); pointer-events: none; }
.hm-mx-row:hover { background: oklch(100% 0 0 / 0.04); }
.hm-mx-row:hover::before, .hm-mx-row:hover + .hm-mx-row::before { opacity: 0; }
.hm-mx-park { margin: 0; padding: 10px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
/* phones: home-plan.js folds each park behind a button inside its heading */
.hm-mx-park .dir-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
}
.hm-mx-park .dir-toggle::after {
  content: ""; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--hm-ease);
}
.hm-mx-park .dir-toggle[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
.hm-mx-row.is-folded .hm-mx-links { display: none; }

.hm-mx-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hm-mx-links li { display: grid; place-items: center; padding: 8px 4px; }
.hm-mx-links a {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  color: var(--mx); background: color-mix(in oklch, var(--mx) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mx) 22%, transparent);
  transition: background .18s, color .18s, box-shadow .18s, transform .25s var(--hm-ease);
}
.hm-mx-links a svg { width: 21px; height: 21px; }
.hm-mx-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hm-mx-links a:hover, .hm-mx-links a:focus-visible {
  text-decoration: none; color: oklch(20% 0.04 280); background: var(--mx); box-shadow: 0 6px 18px -6px var(--mx);
  transform: translateY(-2px);
}
.hm-mx-links a:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.hm-mx-links li.is-none::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: oklch(100% 0 0 / 0.12); }
/* crosshair: the hovered cell's column heading lifts and its column tints */
.hm-matrix:has(.hm-mx-links li:nth-child(1) a:hover) .hm-mx-head span:nth-child(2),
.hm-matrix:has(.hm-mx-links li:nth-child(2) a:hover) .hm-mx-head span:nth-child(3),
.hm-matrix:has(.hm-mx-links li:nth-child(3) a:hover) .hm-mx-head span:nth-child(4),
.hm-matrix:has(.hm-mx-links li:nth-child(4) a:hover) .hm-mx-head span:nth-child(5),
.hm-matrix:has(.hm-mx-links li:nth-child(5) a:hover) .hm-mx-head span:nth-child(6),
.hm-matrix:has(.hm-mx-links li:nth-child(6) a:hover) .hm-mx-head span:nth-child(7) { color: var(--mx); }
.hm-matrix:has(.hm-mx-links li:nth-child(1) a:hover) .hm-mx-head span:nth-child(2) svg,
.hm-matrix:has(.hm-mx-links li:nth-child(2) a:hover) .hm-mx-head span:nth-child(3) svg,
.hm-matrix:has(.hm-mx-links li:nth-child(3) a:hover) .hm-mx-head span:nth-child(4) svg,
.hm-matrix:has(.hm-mx-links li:nth-child(4) a:hover) .hm-mx-head span:nth-child(5) svg,
.hm-matrix:has(.hm-mx-links li:nth-child(5) a:hover) .hm-mx-head span:nth-child(6) svg,
.hm-matrix:has(.hm-mx-links li:nth-child(6) a:hover) .hm-mx-head span:nth-child(7) svg { transform: translateY(-3px) scale(1.12); }
.hm-matrix:has(.hm-mx-links li:nth-child(1) a:hover) .hm-mx-links li:nth-child(1) a:not(:hover),
.hm-matrix:has(.hm-mx-links li:nth-child(2) a:hover) .hm-mx-links li:nth-child(2) a:not(:hover),
.hm-matrix:has(.hm-mx-links li:nth-child(3) a:hover) .hm-mx-links li:nth-child(3) a:not(:hover),
.hm-matrix:has(.hm-mx-links li:nth-child(4) a:hover) .hm-mx-links li:nth-child(4) a:not(:hover),
.hm-matrix:has(.hm-mx-links li:nth-child(5) a:hover) .hm-mx-links li:nth-child(5) a:not(:hover),
.hm-matrix:has(.hm-mx-links li:nth-child(6) a:hover) .hm-mx-links li:nth-child(6) a:not(:hover) {
  background: color-mix(in oklch, var(--mx) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--mx) 45%, transparent);
}
.hm-mx-row:has(a:hover) .hm-mx-park { color: var(--brand); }
.hm-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.hm-popular h3 { font-family: var(--ui); font-size: 14px; font-weight: 800; letter-spacing: 0; color: var(--ink-2); margin-right: 4px; }
.hm-popular ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-popular a { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); background: oklch(100% 0 0 / 0.05); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, color .2s; }
.hm-popular a:hover { text-decoration: none; color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

/* The tip jar waits until the visitor is past the console, so it never sits over the
   crowd check on a phone (home-plan.js sets is-away). Without script it stays put. */
@media (scripting: enabled) {
  .churro-jar { transition: opacity .2s ease, visibility .2s; opacity: 0; visibility: hidden; }
  .churro-jar.is-away { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { .churro-jar { transition: none; } }

/* The layout's newsletter band keeps its content; here it gets the page's panel. */
main#main > .sec:last-child { padding-top: clamp(64px, 9vw, 116px); }

/* ── Laptop ───────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  :root { --hm-rise: 150px; }
  .hm-console-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .hm-gwall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-gfeat { grid-row: auto; grid-column: 1 / -1; min-height: 420px; }
  .hm-desk-lead.has-art { grid-template-columns: 1fr; }
  .hm-breaks { grid-template-columns: 1fr; }
  .hm-matrix { --mx-first: minmax(160px, 1.3fr); }
  .hm-mx-head span { font-size: 11.5px; }
}

/* ── Tablet: the console stacks, the castle keeps the right edge ──────────── */
@media (max-width: 859px) {
  :root { --hm-sky-h: 560px; --hm-rise: 110px; }
  .hm-console-grid { grid-template-columns: 1fr; }
  .hm-plan { max-width: 560px; }
  .hm-legend { display: none; }
  .hm-desk { grid-template-columns: 1fr; }
  .hm-desk-more { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
  .hm-built-scale { display: none; }
  .hm-built-list a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "track track"; gap: 10px 16px; }
  .hm-built-name { grid-area: name; }
  .hm-track { grid-area: track; }
  .hm-built-status { grid-area: status; align-self: start; }
  .hm-rel-axis { display: none; }
  .hm-rel-list a { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
  .hm-rel-rank { grid-row: 1 / 3; font-size: 24px; }
  .hm-rel-bar { grid-column: 2; height: 24px; margin-top: 6px; }
  .hm-faq { grid-template-columns: 1fr; }
  .hm-mx-head { display: none; }
  .hm-mx-row { grid-template-columns: 1fr; min-height: 0; padding: 2px 0; }
  .hm-mx-row:not(.is-folded) { padding-bottom: 14px; }
  .hm-mx-row:hover { background: none; }
  .hm-mx-park { padding: 4px 6px; }
  .hm-mx-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 4px; }
  .hm-mx-links li { padding: 0; place-items: stretch; }
  .hm-mx-links li.is-none { display: none; }
  .hm-mx-links a {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; height: 44px; padding: 0 10px; border-radius: 12px;
    font-size: 13.5px; font-weight: 700;
  }
  .hm-mx-links a svg { width: 18px; height: 18px; flex: none; }
  .hm-mx-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: var(--ink); }
  .hm-mx-links a:hover .hm-mx-t { color: inherit; }
}

/* ── Phone: the castle fills the band, the words stand on the dark ground ─── */
@media (max-width: 640px) {
  :root { --hm-sky-h: min(640px, 150vw); --hm-rise: 24px; }
  .hm-castle { left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 0; -webkit-mask-image: none; mask-image: none; }
  .hm-sky-art::after {
    background:
      linear-gradient(180deg, oklch(20% 0.045 280 / 0.7) 0%, transparent 16%),
      linear-gradient(180deg, transparent 34%, oklch(14% 0.035 279 / 0.8) 58%, oklch(19% 0.042 279) 100%);
  }
  .hm-sky-glow { display: none; }
  .hm-sky-copy { position: absolute; left: 0; right: 0; bottom: 34px; padding-top: 0; }
  .hm-live { font-size: 13.5px; margin-bottom: 14px; }
  .hm-title { font-size: clamp(38px, 11vw, 50px); max-width: 10ch; }
  .hm-lede { font-size: 16px; margin-top: 12px; }
  .hm-ticket { padding: 14px 18px 18px; --notch: 48px; }
  .hm-q { font-size: 23px; }
  .hm-ticket-row { flex-wrap: wrap; }
  .hm-date { flex-basis: 100%; }
  .hm-ticket .hplan-go { flex: 1 1 100%; }
  .hm-tools { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hm-tool { padding: 10px; gap: 10px; }
  .hm-tool-ic { width: 32px; height: 32px; }
  .hm-tool-tx b { font-size: 14px; }
  .hm-board { border-radius: 18px; padding: 12px; }
  .hm-park { min-height: 54px; gap: 10px; padding: 8px 10px 8px 12px; }
  .hm-park-name { font-size: 15.5px; }
  .hm-park-status { font-size: 12.5px; }
  .hm-flap i { width: 21px; height: 31px; font-size: 20px; }
  .hm-next { flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; }
  .hm-score { min-width: 40px; height: 26px; font-size: 13.5px; }
  .hm-head h2 { font-size: 30px; }
  .hm-gwall { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hm-gfeat { min-height: 440px; }
  .hm-gcard-body { padding: 12px 12px 14px; }
  .hm-gcard h3 { font-size: 15px; }
  .hm-gcard-word span { font-size: 19px; }
  .hm-comic { grid-template-columns: 1fr; }
  .hm-comic-art { aspect-ratio: 16 / 10; }
  .hm-desk-mast { grid-template-columns: 1fr; }
  .hm-desk-mast .hm-more { grid-column: 1; grid-row: auto; justify-self: start; }
  .hm-built-list a { padding: 14px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-castle, .hm-stars { transform: none !important; }
  .hm-gfeat img, .hm-gcard-art img, .hm-desk-art img, .hm-gcard, .hm-comic, .hm-arcade, .hm-tool { transition: none; }
  .hm-gfeat:hover img, .hm-gcard:hover, .hm-comic:hover, .hm-arcade:hover, .hm-tool:hover { transform: none; }
}