/* ============================================================
   Universal Orlando ticket prices (/parks/universal-orlando/ticket-prices), card 881.
   Signature: the box office window. A black felt letterboard with white push-in letters posts
   every official "from" price, a receipt printer under it rings up a party's total with tax, and a
   ticket roll of the next eight weeks inks each date by crowd level. The board and the receipt
   carry their own colors, so they hold contrast in light and dark. No motion on type. Prose links
   use :where(a) so the gold CTA rule never wins.
   ============================================================ */

.utp {
  --c-gold: var(--gold, oklch(84% 0.13 86));
  --c-ink: var(--ink, oklch(93% 0.03 84));
  --c-ink-soft: var(--ink-soft, oklch(84% 0.025 84));
  --c-muted: var(--muted, oklch(72% 0.02 270));
  --c-hair: var(--hair, oklch(100% 0 0 / 0.12));
  --c-panel: var(--paper-2, oklch(26% 0.04 280));
  --felt: oklch(19% 0.012 260);
  --felt-groove: oklch(14% 0.01 260);
  --letter: oklch(97% 0.005 90);
  --letter-soft: oklch(80% 0.01 90);
  --marquee: oklch(80% 0.15 75);
  --paper: oklch(97% 0.012 90);
  --print: oklch(24% 0.02 260);
  --print-soft: oklch(45% 0.02 260);
  --stamp: oklch(50% 0.17 25);
  --q: oklch(72% 0.13 160);
  --m: oklch(82% 0.12 95);
  --b: oklch(72% 0.15 55);
  --p: oklch(62% 0.19 25);
  --cond: 'Saira Condensed', var(--label, system-ui), sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-md, 16px) var(--space-3xl, 72px);
  color: var(--c-ink);
}
.utp :where(a) { color: var(--c-gold); text-decoration: none; border-bottom: 1px solid oklch(84% 0.13 86 / 0.35); }
.utp :where(a:hover) { border-bottom-color: var(--c-gold); }
.utp :where(a, button, summary, select, input):focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 4px; }
.utp p { line-height: 1.6; }
.utp .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.utp h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 var(--space-sm, 12px); text-wrap: balance; }
.utp h3 { font-family: var(--display); font-weight: 700; font-size: 1.12rem; margin: 0 0 6px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.utp-hero { padding: var(--space-xl, 32px) 0 var(--space-lg, 24px); max-width: 760px; }
.utp-kicker { font-family: var(--cond); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); margin: 0; }
.utp-title { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-sm, 12px) 0 var(--space-md, 16px); text-wrap: balance; }
.utp-answer { font-size: clamp(1.08rem, 2.4vw, 1.25rem); line-height: 1.55; color: var(--c-ink-soft); margin: 0 0 var(--space-sm, 12px); max-width: 64ch; }
.utp-answer strong { color: var(--c-ink); font-weight: 650; }
.utp-byline { font-size: 14px; color: var(--c-muted); margin: 0 0 var(--space-md, 16px); }
.utp-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.utp-jump :where(a) { font-family: var(--cond); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; padding: 6px 12px; border: 1px solid var(--c-hair); border-radius: 999px; color: var(--c-ink-soft); }
.utp-jump :where(a:hover) { border-color: var(--c-gold); color: var(--c-gold); }

/* ── Box office letterboard ───────────────────────────────────────────── */
.lb-window { margin: var(--space-md, 16px) 0 var(--space-xl, 32px); }
.lb-marquee {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 16px;
  background: var(--marquee); color: oklch(22% 0.03 60);
  padding: 10px 124px 10px 18px; border-radius: 10px 10px 0 0;
  box-shadow: inset 0 -3px 0 oklch(0% 0 0 / 0.18);
}
.lb-marquee h2 { font-family: var(--cond); font-size: 1.35rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; margin: 0; color: inherit; }
.lb-marquee span { font-family: var(--cond); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }
.lb-board {
  position: relative;
  background-color: var(--felt);
  background-image: repeating-linear-gradient(to bottom, transparent 0 11px, var(--felt-groove) 11px 13px);
  border: 10px solid oklch(34% 0.05 55);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 40px 18px 18px;
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.35);
  color: var(--letter);
}
.lb-table { width: 100%; border-collapse: collapse; font-family: var(--cond); text-transform: uppercase; }
.lb-row > * { padding: 12px 0; border-bottom: 1px dashed oklch(100% 0 0 / 0.14); vertical-align: top; }
.lb-row:last-child > * { border-bottom: 0; }
.lb-row th { text-align: left; font-weight: 400; padding-right: 12px; }
.lb-name { display: block; font-size: clamp(1.05rem, 3.4vw, 1.4rem); font-weight: 700; letter-spacing: 0.08em; line-height: 1.15; }
.lb-detail { display: block; font-family: var(--body, system-ui), sans-serif; text-transform: none; font-size: 14px; letter-spacing: 0; color: var(--letter-soft); margin-top: 3px; line-height: 1.4; }
.lb-act { text-align: right; vertical-align: middle !important; padding-left: 14px !important; white-space: nowrap; width: 1%; }
.lb-addon-hint { font-size: 12px; letter-spacing: 0.08em; color: var(--letter-soft); }
.lb-note { display: inline-block; font-size: 12px; letter-spacing: 0.06em; color: oklch(22% 0.03 60); background: var(--marquee); border-radius: 3px; padding: 2px 6px; margin-top: 6px; }
.lb-row--closed .lb-name { color: var(--letter-soft); }
.lb-closed { display: inline-block; font-size: 0.6em; letter-spacing: 0.16em; padding: 6px 10px; border: 2px solid var(--letter-soft); color: var(--letter-soft); border-radius: 4px; }
.lb-price { text-align: right; font-size: clamp(1.4rem, 5vw, 2.1rem); font-weight: 800; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-tax { text-align: right; white-space: nowrap; font-size: 17px; font-weight: 700; letter-spacing: 0.04em; color: var(--letter); padding-left: 14px; font-variant-numeric: tabular-nums; width: 1%; }
.lb-tax small { display: block; font-size: 11px; font-weight: 400; color: var(--letter-soft); letter-spacing: 0.08em; }
.lb-ring { display: inline-block; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marquee); background: none; border: 1px solid oklch(80% 0.15 75 / 0.5); border-radius: 999px; padding: 5px 12px; min-height: 30px; cursor: pointer; }
.lb-ring[hidden] { display: none; }
.lb-ring:hover { background: var(--marquee); color: oklch(22% 0.03 60); }
.lb-row[aria-current] > th { box-shadow: inset 4px 0 0 var(--marquee); padding-left: 12px; }
.lb-row[aria-current] .lb-ring { background: var(--marquee); color: oklch(22% 0.03 60); border-color: var(--marquee); }
.lb-row--addon .lb-name { color: var(--marquee); }
.lb-stamp {
  position: absolute; right: 12px; top: -38px;
  transform: rotate(-7deg);
  display: grid; place-items: center; text-align: center;
  width: 76px; height: 76px; border-radius: 50%;
  border: 3px double var(--stamp); color: var(--stamp);
  background: oklch(97% 0.012 90 / 0.92);
  font-family: var(--cond); text-transform: uppercase; line-height: 1.05; margin: 0;
}
.lb-stamp span { font-size: 10px; letter-spacing: 0.2em; }
.lb-stamp b { font-size: 12px; letter-spacing: 0.02em; }
.lb-foot { font-size: 14px; color: var(--c-muted); margin: 12px 2px 0; }

@media (max-width: 560px) {
  .lb-board { padding: 34px 12px 14px; border-width: 7px; }
  .lb-row { display: grid; grid-template-columns: auto auto 1fr; align-items: end; }
  .lb-row th { grid-column: 1 / -1; padding-bottom: 4px; border-bottom: 0; }
  .lb-row[aria-current] > th { box-shadow: none; padding-left: 0; }
  .lb-row[aria-current] { box-shadow: inset 4px 0 0 var(--marquee); padding-left: 10px; }
  .lb-price { text-align: left; padding-top: 0; }
  .lb-tax { text-align: left; padding-top: 0; padding-left: 14px; width: auto; align-self: end; }
  .lb-act { text-align: right; padding: 0 0 12px 8px !important; width: auto; align-self: end; }
  .lb-price, .lb-tax { padding-bottom: 12px; }
  .lb-stamp { width: 68px; height: 68px; top: -34px; right: 6px; }
  .lb-stamp b { font-size: 11px; }
  .lb-marquee { padding-right: 84px; }
}

/* ── Receipt printer ──────────────────────────────────────────────────── */
.rc { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: var(--space-lg, 24px); align-items: start; margin: 0 0 var(--space-2xl, 48px); }
.rc-controls > p { color: var(--c-ink-soft); margin: 0 0 var(--space-md, 16px); max-width: 52ch; }
.rc-field { display: block; margin-bottom: 14px; }
.rc-field > span { display: block; font-family: var(--cond); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 6px; }
.rc-field select { width: 100%; max-width: 420px; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--c-hair); background: var(--c-panel); color: var(--c-ink); }
.rc-stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-hair); border-radius: 999px; background: var(--c-panel); }
.rc-stepper button { width: 44px; height: 44px; border: 0; background: none; color: var(--c-ink); font-size: 22px; cursor: pointer; border-radius: 999px; }
.rc-stepper button:hover:not(:disabled) { color: var(--c-gold); }
.rc-stepper button:disabled { opacity: 0.35; cursor: default; }
.rc-buy { display: block; text-align: center; margin-top: 12px; font-family: var(--cond); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; color: var(--print); border: 2px solid var(--print); border-radius: 6px; padding: 10px; text-decoration: none; }
.rc-buy:hover { background: var(--print); color: var(--paper); border-color: var(--print); }
.rc-stepper output { min-width: 2.5ch; text-align: center; font-family: var(--cond); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--c-ink-soft); cursor: pointer; min-height: 44px; max-width: 420px; }
.rc-check input { flex: none; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--c-gold); border-radius: 5px; background: var(--c-panel); display: grid; place-items: center; cursor: inherit; }
.rc-check input::after { content: ""; width: 10px; height: 6px; border: solid oklch(22% 0.03 60); border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.rc-check input:checked { background: var(--c-gold); }
.rc-check input:checked::after { opacity: 1; }
.rc-check:has(input:disabled) { opacity: 0.5; cursor: default; }
.rc-xnote { font-size: 14px; color: var(--c-muted); margin: 0 0 0 30px !important; max-width: 390px; }
.rc-xnote[hidden] { display: none; }
.rc-back { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--print-soft); border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }

.rc-paper {
  position: relative;
  background: var(--paper); color: var(--print);
  font-family: var(--mono); font-size: 14px;
  padding: 22px 20px 26px;
  box-shadow: 0 14px 30px oklch(0% 0 0 / 0.3);
  --tooth: 10px;
  -webkit-mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) / 2 + 1px) no-repeat;
          mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) / 2 + 1px) no-repeat;
}
.rc-head { text-align: center; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 14px; line-height: 1.4; }
.rc-head small { font-weight: 400; letter-spacing: 0.06em; color: var(--print-soft); }
.rc-lines, .rc-sum { margin: 0; padding: 10px 0; border-top: 1px dashed var(--print-soft); }
.rc-lines div, .rc-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.rc-lines dt, .rc-sum dt { margin: 0; }
.rc-lines dd, .rc-sum dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-total { font-weight: 800; font-size: 17px; border-top: 1px solid var(--print); margin-top: 6px; padding-top: 8px !important; }
.rc-per { text-align: right; margin: 4px 0 10px; color: var(--print-soft); }
.rc-fine { text-align: center; font-size: 12px; color: var(--print-soft); margin: 0; border-top: 1px dashed var(--print-soft); padding-top: 10px; }

@media (max-width: 760px) { .rc { grid-template-columns: 1fr; } }

/* ── Sections ─────────────────────────────────────────────────────────── */
.utp-section { margin: 0 0 var(--space-2xl, 48px); }
.utp-section > p { max-width: 70ch; color: var(--c-ink-soft); }
/* Three paper admission tickets, each with a perforated stub edge on the left. */
.utp-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: var(--space-md, 16px) 0 var(--space-lg, 24px); }
.utp-kind {
  position: relative;
  background: var(--paper); color: var(--print);
  border-radius: 6px;
  padding: 14px 16px 16px 30px;
  box-shadow: 0 8px 20px oklch(0% 0 0 / 0.25);
}
.utp-kind::before { content: ""; position: absolute; left: 16px; top: 10px; bottom: 10px; border-left: 2px dotted oklch(45% 0.02 260 / 0.45); }
.utp-kind-top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp); margin: 0 0 6px !important; }
.utp-kind-top span { color: var(--print); letter-spacing: 0.04em; }
.utp-kind h3 { color: var(--print); }
.utp-kind p { margin: 0; color: var(--print-soft); font-size: 15.5px; }
@media (max-width: 760px) { .utp-kinds { grid-template-columns: 1fr; } }

/* ── Ticket roll ──────────────────────────────────────────────────────── */
.roll-strip { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.roll-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: var(--space-sm, 12px) 0 4px; font-family: var(--cond); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); text-align: center; }
.roll-pad { visibility: hidden; }
.roll-key { align-items: center; }
.roll-key-sw { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 3px; background: color-mix(in oklch, var(--band) 78%, var(--paper)); border-top: 3px solid var(--band); color: oklch(22% 0.03 60); font-family: var(--cond); font-weight: 700; font-size: 12px; }
.roll-key-end { font-size: 13px; color: var(--c-muted); }
.roll-stub {
  position: relative; text-align: center;
  background: color-mix(in oklch, var(--band, oklch(80% 0 0)) 58%, var(--paper)); color: var(--print);
  border-top: 6px solid var(--band, oklch(80% 0 0));
  border-radius: 3px;
  padding: 5px 2px 6px;
  font-family: var(--cond); line-height: 1.1;
}
.roll-stub::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 15px; border-bottom: 1px dashed oklch(45% 0.02 260 / 0.35); }
.roll-stub--quiet { --band: var(--q); }
.roll-stub--moderate { --band: var(--m); }
.roll-stub--busy { --band: var(--b); }
.roll-stub--packed { --band: var(--p); }
/* A within-band ramp so 7, 8, 9 and 10 read apart at a glance. */
.roll-s1, .roll-s2 { --band: oklch(80% 0.11 160); }
.roll-s3 { --band: oklch(72% 0.13 160); }
.roll-s4 { --band: oklch(88% 0.10 100); }
.roll-s5 { --band: oklch(84% 0.12 95); }
.roll-s6 { --band: oklch(93% 0.08 100); }
.roll-s7 { --band: oklch(84% 0.12 80); }
.roll-s8 { --band: oklch(74% 0.15 58); }
.roll-s9 { --band: oklch(64% 0.18 38); }
.roll-s10 { --band: oklch(54% 0.19 25); }
.roll-stub.roll-s6, .roll-stub.roll-s7, .roll-stub.roll-s8, .roll-stub.roll-s9, .roll-stub.roll-s10 { background: color-mix(in oklch, var(--band) 78%, var(--paper)); }
.roll-s10 .roll-date { color: oklch(22% 0.05 25); }
.roll-stub.is-light { outline: 3px solid oklch(60% 0.14 160); outline-offset: 1px; z-index: 1; }
.roll-key-sw.is-absent { opacity: 0.35; }
.roll-key-light { flex-basis: 100%; font-size: 13px; color: var(--c-muted); }
.roll-key-light::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 2px; outline: 2px solid oklch(60% 0.14 160); margin-right: 8px; vertical-align: -1px; }
.roll-strip, .roll-dows, .roll-key { max-width: 720px; }
.roll-s9 .roll-score, .roll-s10 .roll-score, .roll-s10 .roll-date { color: oklch(20% 0.05 25); }
.roll-key-note { color: var(--c-muted); font-style: italic; }
.roll-stub--month { box-shadow: -3px 0 0 var(--c-gold); }
.roll-date { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--print-soft); }
.roll-score { display: block; font-size: 19px; font-weight: 800; margin-top: 2px; }
.roll-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--c-muted); margin: 0 0 var(--space-md, 16px); }
.roll-key .k::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--kc); }
.k--quiet { --kc: var(--q); } .k--moderate { --kc: var(--m); } .k--busy { --kc: var(--b); } .k--packed { --kc: var(--p); }
.roll-picks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg, 24px); }
.roll-picks ul { margin: 0; padding-left: 18px; color: var(--c-ink-soft); }
.roll-picks li { margin: 3px 0; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .roll-strip { gap: 3px; }
  .roll-date { font-size: 12px; }
  .roll-key { gap: 6px 3px; }
  .roll-key-end { font-size: 12px; margin: 0 3px; }
  .roll-key-sw { width: 18px; height: 20px; font-size: 10px; }
  .roll-picks { grid-template-columns: 1fr; }
}

/* ── Tips, plan, FAQ ──────────────────────────────────────────────────── */
/* Tips as a strip of numbered coupons with a dashed tear line. */
.utp-tips { list-style: none; padding: 0; margin: var(--space-md, 16px) 0 0; max-width: 760px; counter-reset: tip; display: grid; gap: 10px; }
.utp-tips li { counter-increment: tip; position: relative; background: var(--paper); color: var(--print-soft); border: 2px dashed oklch(45% 0.02 260 / 0.35); border-radius: 8px; padding: 12px 16px 12px 64px; line-height: 1.55; }
.utp-tips li::before { content: counter(tip, decimal-leading-zero); position: absolute; left: 0; top: 0; bottom: 0; width: 48px; display: grid; place-items: center; font-family: var(--cond); font-weight: 800; font-size: 18px; color: var(--stamp); border-right: 2px dashed oklch(45% 0.02 260 / 0.35); }
.utp-tips b { color: var(--print); }
.utp-tips :where(a) { color: oklch(42% 0.12 60); border-bottom-color: oklch(42% 0.12 60 / 0.4); font-weight: 600; }
@media (max-width: 480px) {
  .utp-tips li { padding: 12px 14px 12px 50px; }
  .utp-tips li::before { width: 38px; font-size: 15px; }
}
/* One line of plan links per park. */
.utp-plan { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.utp-plan li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 12px 0; border-top: 1px solid var(--c-hair); }
.utp-plan li:last-child { border-bottom: 1px solid var(--c-hair); }
.utp-plan b { flex: 0 0 15rem; font-family: var(--display); font-weight: 700; }
@media (max-width: 640px) { .utp-plan b { flex-basis: 100%; } }
.utp-faq details { border-top: 1px solid var(--c-hair); padding: 12px 0; max-width: 72ch; }
.utp-faq details:last-child { border-bottom: 1px solid var(--c-hair); }
.utp-faq summary { cursor: pointer; font-weight: 650; font-size: 1.05rem; min-height: 24px; }
.utp-faq details p { color: var(--c-ink-soft); margin: 8px 0 0; }

/* The board, receipt and stubs keep their own colors in both themes; page ink follows the site tokens. */
.roll-stub { box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.1); }
.roll-stub--month { box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.1), -3px 0 0 var(--c-gold); }

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