/* ============================================================
   EPCOT Festival of the Holidays 2026
   Page uses _Layout (site.css Nightfall tokens: --paper, --paper-2, --ink, --ink-soft,
   --muted, --hair, --gold, --display, --text, --space-*). Scoped under .foh; page links use
   `.foh :where(a)` so classed controls (the CTA) keep their own ink.
   Signature element: a row of 34 candles, one per festival night. Candle height is the
   crowd forecast, the lit flame is the night you picked. Motion stays on the flames, never
   behind type.
   ============================================================ */

.foh {
  --foh-flame: oklch(86% 0.14 80);
  --foh-flame-hot: oklch(97% 0.05 90);
  --foh-ember: oklch(70% 0.17 55);
  --foh-wax: oklch(93% 0.025 85);
  --foh-wax-2: oklch(84% 0.06 78);
  --foh-ever: oklch(74% 0.09 160);
  --foh-berry: oklch(70% 0.16 15);
  --foh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-md) 0 var(--space-3xl);
}
.foh :where(a) { color: var(--gold); text-decoration: none; border-bottom: 1px solid oklch(84% 0.13 86 / 0.35); }
.foh :where(a:hover) { border-bottom-color: var(--gold); }
.foh :where(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---- hero -------------------------------------------------------------- */
.foh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(8px, 3vw, 40px) 0 clamp(32px, 5vw, 64px);
}
.foh-kicker { font-family: var(--text); font-size: 14px; font-weight: 600; color: var(--foh-flame); margin: 0; }
.foh h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.025em;
  color: var(--ink); margin: var(--space-md) 0 0; text-wrap: balance;
}
.foh-answer {
  font-family: var(--text); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65;
  color: var(--ink-soft); max-width: 60ch; margin: var(--space-lg) 0 0;
}
.foh-answer b { color: var(--ink); font-weight: 700; }

.foh-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) 0;
  margin: var(--space-xl) 0 0; padding: 0;
}
.foh-facts > div { padding: 0 var(--space-lg); border-left: 1px solid var(--hair); }
.foh-facts > div:first-child { padding-left: 0; border-left: 0; }
.foh-facts dt { font-family: var(--text); font-size: 13px; color: var(--muted); }
.foh-facts dd { margin: 2px 0 0; font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--ink); }

.foh .foh-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--space-xl); padding: 14px 24px;
  border: 0; border-radius: 999px;
  background: var(--foh-flame); color: var(--paper);
  font-family: var(--text); font-size: 16px; font-weight: 700;
  transition: transform 0.25s var(--foh-ease), background-color 0.2s;
}
.foh .foh-cta:hover { background: var(--foh-flame-hot); transform: translateY(-2px); border: 0; }
.foh .foh-cta span { transition: transform 0.3s var(--foh-ease); }
.foh .foh-cta:hover span { transform: translateY(3px); }

.foh-hero-fig { margin: 0; justify-self: center; width: min(100%, 440px); }
.foh-arch {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 14px 14px / 46% 46% 14px 14px;
  overflow: hidden;
  outline: 1px solid oklch(86% 0.14 80 / 0.4);
  outline-offset: 10px;
  box-shadow: 0 4px 8px oklch(10% 0.03 278 / 0.5);
}
.foh-arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: foh-settle 1.8s var(--foh-ease) both; }
.foh-hero-fig figcaption { margin-top: 22px; text-align: center; font-family: var(--text); font-size: 12.5px; color: var(--muted); }
@keyframes foh-settle { from { transform: scale(1.07); } to { transform: none; } }

/* ---- candle row -------------------------------------------------------- */
.foh-candles {
  position: relative;
  padding: clamp(36px, 5vw, 64px) clamp(16px, 3vw, 40px) clamp(28px, 4vw, 48px);
  border-radius: 18px;
  background:
    radial-gradient(120% 60% at 50% 100%, oklch(45% 0.09 60 / 0.35), transparent 60%),
    oklch(20% 0.04 276);
  border: 1px solid var(--hair);
  scroll-margin-top: 80px;
}
.foh-sec-head { max-width: 720px; margin: 0 auto var(--space-xl); text-align: center; }
.foh-sec-head h2 {
  font-family: var(--display); font-size: clamp(28px, 3.6vw, 42px); line-height: 1.06;
  letter-spacing: -0.015em; color: var(--ink); margin: 0; text-wrap: balance;
}
.foh-sec-head p { font-family: var(--text); font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); margin: var(--space-sm) auto 0; max-width: 58ch; }

.foh-row-wrap { overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.foh-row {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(34, minmax(20px, 1fr)); column-gap: 5px;
  height: 230px; min-width: 760px; max-width: 1040px;
  align-items: end;
}
.foh-night { height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.foh-night.is-run:not(:first-child) { padding-left: 3px; }
.foh-candle {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 100%; height: var(--h, 70%);
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
}
.foh-candle:focus-visible { outline: 2px solid var(--foh-flame); outline-offset: 3px; border-radius: 6px; }

.foh-flame {
  width: 11px; height: 18px; margin-bottom: 4px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, var(--foh-flame-hot) 0 22%, var(--foh-flame) 45%, oklch(70% 0.17 55 / 0.6) 70%, transparent 74%);
  opacity: 0.55; transform-origin: 50% 100%;
  transition: opacity 0.3s, transform 0.4s var(--foh-ease), box-shadow 0.4s;
  animation: foh-flicker 2.6s ease-in-out infinite alternate;
}
.foh-night:nth-child(3n) .foh-flame { animation-duration: 3.1s; animation-delay: -1.2s; }
.foh-night:nth-child(4n+1) .foh-flame { animation-duration: 2.2s; animation-delay: -0.6s; }
.foh-wax {
  flex: 1 1 auto; width: 62%; min-height: 20px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(90deg, oklch(80% 0.03 85), var(--foh-wax) 45%, oklch(84% 0.03 85));
  transition: filter 0.3s, background 0.3s;
}
.foh-night.is-alt .foh-wax { background: linear-gradient(90deg, oklch(72% 0.06 76), var(--foh-wax-2) 45%, oklch(76% 0.06 76)); }
.foh-day { margin-top: 8px; font-family: var(--text); font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.foh-candle:hover .foh-flame { opacity: 0.9; }
.foh-night.is-on .foh-flame {
  opacity: 1; transform: scale(1.45);
  box-shadow: 0 -2px 18px 6px oklch(80% 0.15 70 / 0.45);
}
.foh-night.is-on .foh-wax { filter: brightness(1.06); }
.foh-night.is-on .foh-day { color: var(--foh-flame); }

.foh-months {
  display: grid; grid-template-columns: 4fr 30fr; column-gap: 5px;
  min-width: 760px; max-width: 1040px; margin: 6px auto 0;
  font-family: var(--text); font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.foh-months span { border-top: 1px solid var(--hair); padding-top: 6px; }
.foh-months span + span { margin-left: 3px; }

.foh-swipe { display: none; text-align: center; font-family: var(--text); font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 820px) { .foh-swipe { display: block; } }

@keyframes foh-flicker {
  0%   { transform: scaleY(1) rotate(-1.5deg); }
  50%  { transform: scaleY(1.08) rotate(1deg); }
  100% { transform: scaleY(0.96) rotate(-0.5deg); }
}
.foh-night.is-on .foh-flame { animation-name: foh-flicker-on; }
@keyframes foh-flicker-on {
  0%   { transform: scale(1.45) rotate(-1.5deg); }
  50%  { transform: scale(1.52, 1.58) rotate(1deg); }
  100% { transform: scale(1.4, 1.42) rotate(-0.5deg); }
}

/* the night you picked */
.foh-detail { max-width: 760px; margin: var(--space-xl) auto 0; text-align: center; }
.foh-detail-date { font-family: var(--text); font-size: 16px; font-weight: 600; color: var(--ink-soft); margin: 0; }
.foh-detail-name {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  margin: 6px 0 0;
  font-family: var(--display); font-size: clamp(34px, 5vw, 58px); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.02em; color: var(--foh-flame); text-wrap: balance;
}
.foh-detail.is-swap .foh-detail-name > span:first-child { animation: foh-rise 0.5s var(--foh-ease); }
.foh-detail-line { font-family: var(--text); font-size: 16px; color: var(--ink-soft); margin: 10px 0 0; }
.foh-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--space-md) 0 0; padding: 0; }
.foh-chips li {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--hair); background: oklch(24% 0.045 276);
  font-family: var(--text); font-size: 14px; color: var(--ink);
}
.foh-chips span { color: var(--muted); }
.foh-chips i { font-style: normal; font-size: 12px; color: var(--muted); }
.foh-chips [hidden] { display: none; }
@keyframes foh-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.foh-new {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--foh-berry); color: oklch(18% 0.03 15);
  font-family: var(--text); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; vertical-align: middle;
}
.foh-new[hidden] { display: none; }
.foh-detail-name .foh-new { font-size: 13px; }

/* program: the full lineup */
.foh-program { max-width: 620px; margin: clamp(36px, 5vw, 56px) auto 0; }
.foh-program h3 { font-family: var(--display); font-size: 22px; color: var(--ink); text-align: center; margin: 0 0 var(--space-md); }
.foh-lineup { width: 100%; border-collapse: collapse; }
.foh-lineup thead th { font-family: var(--text); font-size: 13px; font-weight: 600; color: var(--muted); text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--hair); }
.foh-lineup tbody th, .foh-lineup tbody td { padding: 11px 0; border-bottom: 1px solid oklch(37% 0.05 278 / 0.6); vertical-align: baseline; }
.foh-lineup tbody th { font-family: var(--text); font-size: 15px; font-weight: 600; color: var(--ink-soft); text-align: left; width: 42%; font-variant-numeric: tabular-nums; }
.foh-lineup tbody td { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); }
.foh-lineup .foh-new { margin-left: 8px; font-size: 11px; }
.foh-lineup tr.is-tba td { font-family: var(--text); font-size: 15px; font-weight: 500; font-style: italic; color: var(--muted); }
.foh-note { font-family: var(--text); font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: var(--space-md) 0 0; text-align: center; }

/* ---- body -------------------------------------------------------------- */
.foh-body { max-width: 760px; margin: 0 auto; }
.foh-sec { margin: clamp(48px, 6vw, 72px) 0 0; }
.foh-sec h2 {
  font-family: var(--display); font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--space-md); text-wrap: balance;
}
.foh-sec h3 { font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--ink); margin: 0 0 8px; }
.foh-sec p { font-family: var(--text); font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 var(--space-md); text-wrap: pretty; }

/* wide sections break out of the 760px reading column */
.foh-body > .foh-wide { width: min(1000px, calc(100vw - 48px)); margin-left: calc(50% - min(500px, 50vw - 24px)); }
.foh-wide > h2, .foh-wide > p { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---- two tickets ------------------------------------------------------- */
.foh-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: var(--space-lg) 0; }
.foh-ticket {
  --stub: 104px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  background: var(--paper-2); color: var(--ink);
  border-radius: 12px;
  -webkit-mask:
    radial-gradient(circle 12px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 12px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle 12px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 12px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  filter: drop-shadow(0 4px 6px oklch(10% 0.03 278 / 0.45));
  transition: transform 0.4s var(--foh-ease);
}
.foh-ticket:hover { transform: translateY(-3px) rotate(-0.6deg); }
.foh-ticket-main { padding: 20px 22px 16px; }
.foh-sec .foh-ticket-kind { font-family: var(--text); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.foh-ticket h3 { font-family: var(--display); font-size: 21px; margin: 0 0 8px; color: inherit; }
.foh-sec .foh-ticket-main p:last-child { font-size: 15px; line-height: 1.55; margin: 0; color: var(--ink-soft); }
.foh-ticket-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 12px 8px;
  background: radial-gradient(circle, oklch(20% 0.04 276) 1.6px, transparent 2px) left center / 6px 11px repeat-y;
  font-family: var(--display); text-align: center;
}
.foh-ticket-stub span { font-size: 20px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--foh-flame); }
.foh-ticket-stub i, .foh-ticket-stub b { font-family: var(--text); font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.foh-ticket.is-gold { background: linear-gradient(135deg, oklch(88% 0.12 86), oklch(78% 0.14 68)); color: oklch(22% 0.04 60); }
.foh-ticket.is-gold .foh-ticket-kind, .foh-ticket.is-gold .foh-ticket-stub i, .foh-ticket.is-gold .foh-ticket-stub b { color: oklch(34% 0.06 60); }
.foh-sec .foh-ticket.is-gold .foh-ticket-main p:last-child { color: oklch(28% 0.05 60); }
.foh-ticket.is-gold .foh-ticket-stub { background-image: radial-gradient(circle, oklch(20% 0.04 276) 1.6px, transparent 2px); }
.foh-ticket.is-gold .foh-ticket-stub strong { font-size: 44px; font-weight: 800; line-height: 0.9; color: oklch(24% 0.05 50); }

/* ---- the lagoon ring --------------------------------------------------- */
.foh-lagoon { position: relative; width: min(640px, 100%); aspect-ratio: 1; margin: var(--space-xl) auto var(--space-lg); }
.foh-ring { position: absolute; inset: 7%; border-radius: 50%; border: 2px dotted oklch(86% 0.14 80 / 0.45); }
.foh-ring::after {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, oklch(36% 0.07 245), oklch(25% 0.06 255) 62%, oklch(22% 0.05 262));
  box-shadow: inset 0 0 40px oklch(12% 0.04 260 / 0.7);
}
.foh-stop-btn, .foh-stop-pin {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px;
}
.foh-stop-btn { padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.foh-stop-btn.is-left, .foh-stop-pin.is-left { flex-direction: row-reverse; }
.foh-stop-btn.is-top, .foh-stop-pin.is-top { flex-direction: column-reverse; }
.foh-stop-btn.is-bottom, .foh-stop-pin.is-bottom { flex-direction: column; }
.foh-lantern {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--foh-flame);
  font-family: var(--text); font-size: 14px; font-weight: 800; color: var(--foh-flame);
  transition: transform 0.35s var(--foh-ease), background-color 0.25s, box-shadow 0.35s;
}
.foh-stop-l { font-family: var(--text); font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.foh-stop-btn:hover .foh-lantern { transform: scale(1.1); }
.foh-stop-btn:focus-visible { outline: none; }
.foh-stop-btn:focus-visible .foh-lantern { outline: 2px solid var(--ink); outline-offset: 3px; }
.foh-stop-btn.is-on .foh-lantern { background: var(--foh-flame); color: var(--paper); transform: scale(1.18); box-shadow: 0 0 22px 6px oklch(80% 0.15 70 / 0.45); }
.foh-stop-btn.is-on .foh-stop-l { color: var(--foh-flame); }
.foh-pin { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.foh-stop-pin .foh-stop-l { color: var(--muted); font-weight: 600; }
.foh-stop-pin.is-theater .foh-pin { width: 14px; height: 14px; background: var(--foh-flame); box-shadow: 0 0 14px 4px oklch(80% 0.15 70 / 0.5); }
.foh-stop-pin.is-theater .foh-stop-l { color: var(--foh-flame); font-weight: 700; }
.foh-lagoon-story {
  position: absolute; inset: 27%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.foh-sec .foh-lagoon-where { font-family: var(--text); font-size: 13px; font-weight: 700; color: var(--foh-ever); margin: 0; }
.foh-sec .foh-lagoon-tale { font-family: var(--display); font-size: clamp(20px, 3vw, 30px); font-weight: 800; line-height: 1.08; color: var(--foh-flame); margin: 6px 0 8px; text-wrap: balance; }
.foh-sec .foh-lagoon-note { font-family: var(--text); font-size: clamp(13px, 1.5vw, 15px); line-height: 1.45; color: var(--ink); margin: 0; text-wrap: balance; }
.foh-lagoon.is-swap .foh-lagoon-story > * { animation: foh-rise 0.45s var(--foh-ease) both; }
.foh-lagoon.is-swap .foh-lagoon-story > :nth-child(2) { animation-delay: 0.05s; }
.foh-lagoon.is-swap .foh-lagoon-story > :nth-child(3) { animation-delay: 0.1s; }
.foh-lagoon-entry { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); font-family: var(--text); font-size: 12px; font-weight: 700; color: var(--muted); }
.foh-lagoon-entry::before { content: "↑ "; }

.foh-route { list-style: none; margin: 0 auto var(--space-lg); padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; counter-reset: stop; }
.foh-route li { counter-increment: stop; padding: 8px 0 8px 30px; position: relative; border-top: 1px solid var(--hair); font-family: var(--text); font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.foh-route li::before { content: counter(stop); position: absolute; left: 0; top: 9px; font-weight: 800; color: var(--foh-flame); }
.foh-route .foh-stop { font-weight: 700; color: var(--foh-ever); }
.foh-route b { color: var(--ink); }
.foh-route .foh-tale { display: none; }

/* ---- the festival passport --------------------------------------------- */
.foh-passport {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  margin: var(--space-lg) 0; border-radius: 16px; overflow: hidden;
  border: 1px solid oklch(86% 0.14 80 / 0.35);
  background: oklch(25% 0.05 266);
}
.foh-passport-page { position: relative; padding: 26px clamp(18px, 3vw, 32px) 24px; }
.foh-passport-page:first-child { background: linear-gradient(90deg, transparent 80%, oklch(14% 0.03 270 / 0.45)); }
.foh-passport-page:last-child { background: linear-gradient(90deg, oklch(14% 0.03 270 / 0.45), transparent 20%); }
.foh-sec .foh-passport-kind { font-family: var(--text); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--foh-flame); margin: 0 0 6px; }
.foh-stroll h3 { font-size: 24px; }
.foh-sec .foh-stroll p { font-size: 15.5px; }
.foh-stamps { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--space-md) 0 10px; }
.foh-stamp {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  border: 2px dashed oklch(86% 0.14 80 / 0.6); background: transparent; cursor: pointer;
  font-family: var(--text); font-size: 15px; font-weight: 800; color: var(--muted);
  transition: border-color 0.2s, transform 0.2s var(--foh-ease);
}
.foh-stamp:hover { border-color: var(--foh-flame); transform: rotate(-6deg); }
.foh-stamp:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.foh-stamp[aria-pressed="true"] { border-style: solid; border-color: var(--foh-berry); background: oklch(70% 0.16 15 / 0.16); color: transparent; }
.foh-stamp[aria-pressed="true"]::after {
  content: "✦"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 26px; color: var(--foh-berry); transform: rotate(-12deg);
  animation: foh-stamp-in 0.4s var(--foh-ease);
}
@keyframes foh-stamp-in { from { transform: scale(1.9) rotate(4deg); opacity: 0; } to { transform: rotate(-12deg); opacity: 1; } }
.foh-sec .foh-stroll-status { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); margin: 0; }
.foh-stroll.is-full { box-shadow: inset 0 0 0 2px oklch(70% 0.16 15 / 0.6); }
.foh-stroll.is-full .foh-stroll-status { color: var(--foh-berry); }

.foh-sec .foh-visa-area { font-family: var(--text); font-size: 13px; font-weight: 800; color: var(--foh-ever); margin: 14px 0 8px; }
.foh-sec .foh-visa-area:first-child { margin-top: 0; }
.foh-visas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.foh-visas li {
  --ink-c: var(--foh-flame);
  display: flex; flex-direction: column; padding: 7px 11px;
  border: 1.5px solid var(--ink-c); border-radius: 8px;
  box-shadow: inset 0 0 0 2px oklch(25% 0.05 266), inset 0 0 0 3px var(--ink-c);
  transform: rotate(-1.2deg);
  transition: transform 0.3s var(--foh-ease);
}
.foh-visas li:nth-child(2n) { --ink-c: var(--foh-ever); transform: rotate(1deg); }
.foh-visas li:nth-child(3n) { --ink-c: var(--foh-berry); transform: rotate(-0.4deg); }
.foh-visas li:hover { transform: rotate(0) scale(1.03); }
.foh-visas b { font-family: var(--text); font-size: 13.5px; line-height: 1.25; color: var(--ink); }
.foh-visas span { font-family: var(--text); font-size: 11.5px; font-weight: 700; color: var(--ink-c); }

/* ---- the gift-tag garland ---------------------------------------------- */
.foh-garland {
  list-style: none; position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 18px;
  margin: var(--space-lg) 0; padding: 44px 0 0;
}
.foh-garland::before {
  content: ""; position: absolute; left: 2%; right: 2%; top: 0; height: 46px;
  border-bottom: 2px dotted oklch(86% 0.14 80 / 0.55);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.foh-garland li {
  position: relative; width: 176px; padding: 30px 16px 18px;
  background: oklch(93% 0.025 85); color: oklch(24% 0.03 270);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%, 0 22px);
  -webkit-mask: radial-gradient(circle 5px at 50% 13px, #0000 98%, #000);
          mask: radial-gradient(circle 5px at 50% 13px, #0000 98%, #000);
  transform-origin: 50% -30px; transform: rotate(-3deg);
  filter: drop-shadow(0 4px 4px oklch(10% 0.03 278 / 0.45));
  transition: transform 0.6s var(--foh-ease);
}
.foh-garland li:nth-child(2n) { transform: rotate(2.5deg); background: oklch(86% 0.12 84); }
.foh-garland li:nth-child(3n) { background: oklch(88% 0.06 160); }
.foh-garland li:hover { transform: rotate(0deg); }
.foh-garland b { display: block; font-family: var(--display); font-size: 17px; line-height: 1.15; margin-bottom: 6px; }
.foh-garland span { display: block; font-family: var(--text); font-size: 13.5px; line-height: 1.45; color: oklch(32% 0.03 270); }

/* ---- the day ribbon ---------------------------------------------------- */
.foh-ribbon { margin: var(--space-xl) 0 var(--space-lg); padding: 30px 0 0; }
.foh-ribbon-track { position: relative; height: 58px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--hair); }
.foh-seg { position: absolute; top: 10px; bottom: 10px; border-radius: 7px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.foh-seg i { font-style: normal; font-family: var(--text); font-size: 13px; font-weight: 800; white-space: nowrap; }
.foh-seg.is-early { background: var(--foh-ever); }
.foh-seg.is-early i, .foh-seg.is-eeh i { font-size: 0; }
.foh-seg.is-day { background: linear-gradient(90deg, oklch(84% 0.13 86), oklch(80% 0.15 66)); color: oklch(22% 0.04 60); }
.foh-seg.is-eeh { background: var(--foh-berry); opacity: 0.85; }
.foh-ghost { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed var(--muted); }
.foh-ghost i { position: absolute; top: 100%; left: 0; transform: translateX(-50%); margin-top: 6px; font-style: normal; font-family: var(--text); font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; text-decoration: line-through; }
.foh-show { position: absolute; top: 0; }
.foh-show::before {
  content: ""; position: absolute; left: -5px; top: -16px; width: 10px; height: 15px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, var(--foh-flame-hot) 0 22%, var(--foh-flame) 45%, transparent 74%);
}
.foh-show::after { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 58px; background: oklch(22% 0.04 60 / 0.55); }
.foh-show i { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); margin-bottom: 18px; font-style: normal; font-family: var(--text); font-size: 12px; font-weight: 800; color: var(--foh-flame); }
.foh-ribbon-axis { position: relative; height: 34px; margin-top: 4px; }
.foh-ribbon-axis span { position: absolute; top: 18px; transform: translateX(-50%); font-family: var(--text); font-size: 12px; color: var(--muted); white-space: nowrap; }
.foh-ribbon-axis span:first-child { transform: none; }
.foh-ribbon-axis span:last-child { transform: translateX(-100%); }
.foh-ribbon figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--text); font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.foh-ribbon figcaption span { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-left: 6px; }
.foh-ribbon figcaption span:first-child { margin-left: 0; }
.foh-ribbon .k-early { background: var(--foh-ever); }
.foh-ribbon .k-day { background: var(--gold); }
.foh-ribbon .k-eeh { background: var(--foh-berry); }
.foh-ribbon .k-show { width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--foh-flame); }

/* ---- the crowd calendar ------------------------------------------------ */
.foh-cal { display: grid; gap: 6px; margin: var(--space-lg) 0 10px; }
.foh-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.foh-cal-dow span { font-family: var(--text); font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.foh-cal-day {
  position: relative; min-height: 60px; padding: 7px 8px; border-radius: 10px;
  background: color-mix(in oklch, var(--foh-ever), var(--foh-berry) var(--t, 50%));
  color: oklch(20% 0.03 270);
  display: flex; flex-direction: column; justify-content: space-between;
}
.foh-cal-day b { font-family: var(--text); font-size: 12px; font-weight: 700; }
.foh-cal-day i { align-self: flex-end; font-style: normal; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; }
.foh-cal-day.is-out { background: transparent; border: 1px dashed var(--hair); color: var(--muted); opacity: 0.55; }
.foh-cal-day.is-calm, .foh-cal-day.is-busy { box-shadow: inset 0 0 0 2px oklch(97% 0.02 90 / 0.9); }
.foh-cal-day.is-calm::after { content: "✦"; position: absolute; top: 5px; right: 8px; font-size: 12px; }
.foh-sec .foh-cal-key { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0 0 var(--space-lg); }
.foh-cal-grad { width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--foh-ever), var(--foh-berry)); }
.foh-cal-key .is-calm-k { display: none; }

.foh-sec .foh-links { display: flex; flex-wrap: wrap; gap: 10px; }
.foh .foh-links a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair); background: var(--paper-2); font-family: var(--text); font-size: 15px; font-weight: 600; }
.foh .foh-links a:hover { border-color: var(--gold); }

.foh-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg); }
.foh-days > div { padding: 18px 20px 10px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--hair); }
.foh-days ul { list-style: none; margin: 0; padding: 0; }
.foh-days li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--hair); font-family: var(--text); font-size: 15.5px; color: var(--ink); }
.foh-days li b { font-variant-numeric: tabular-nums; }
.foh-days > div:first-child h3, .foh-days > div:first-child b { color: var(--foh-ever); }
.foh-days > div:last-child h3, .foh-days > div:last-child b { color: var(--foh-berry); }

.foh-faq dl { margin: 0; }
.foh-faq dl > div { padding: 18px 0; border-top: 1px solid var(--hair); }
.foh-faq dl > div:last-child { border-bottom: 1px solid var(--hair); }
.foh-faq dt { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.foh-faq dd { font-family: var(--text); font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 68ch; }

.foh .hg-cross { margin-top: clamp(48px, 6vw, 72px); }
.foh .park-foot { font-family: var(--text); font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: var(--space-xl); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .foh-hero { grid-template-columns: 1fr; }
  .foh-hero-fig { width: min(80%, 380px); }
}
@media (max-width: 760px) {
  .foh-tickets, .foh-passport { grid-template-columns: 1fr; }
  .foh-passport-page:first-child, .foh-passport-page:last-child { background: none; }
  .foh-passport-page:first-child { border-bottom: 1px dashed oklch(86% 0.14 80 / 0.35); }
  .foh-route { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .foh-stop-l { font-size: 11px; }
  .foh-stop-btn.is-left .foh-stop-l, .foh-stop-btn.is-right .foh-stop-l,
  .foh-stop-pin.is-left .foh-stop-l, .foh-stop-pin.is-right .foh-stop-l { display: none; }
  .foh-lantern { width: 30px; height: 30px; font-size: 12.5px; }
  .foh-lagoon-story { inset: 24%; }
  .foh-lagoon-note { display: none; }
  .foh-route .foh-tale { display: block; margin-top: 2px; }
  .foh-garland::before { display: none; }
  .foh-garland li { width: calc(50% - 10px); }
  .foh-cal-day { min-height: 48px; padding: 5px 6px; }
  .foh-cal-day i { font-size: 16px; }
  .foh-ticket { --stub: 84px; }
}
@media (max-width: 640px) {
  .foh-facts > div { padding: 0 var(--space-md); }
  .foh-days { grid-template-columns: 1fr; }
  .foh-row { height: 190px; column-gap: 4px; }
  .foh-lineup tbody td { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .foh *, .foh *::before, .foh *::after { animation: none !important; transition: none !important; }
}