/* Safety - The Musical: the show page /safety-the-musical/show/<slug> (landing-1020, DESIGN-LANDING.md). Loaded only on it, after
   buy.css (its colours, fonts and cards): the media band, the state line, the after-sections, the sticky bar and the trailer
   dialog. Mobile first; CSS gradients only; no backdrop blur and no parallax (in-app browsers); never 100vh.
   barqty-1021 (v2): the stepper on every bar that sells; the ticket type line (the type and Change) over the row.
   codes-1024 (v3): the discount code: "Have a code?", the field and Apply, the applied code, the prices struck and re-priced.
   sell-1028 (v4; owner 2026-10-28: the show pages must sell better): the hook under the venue, the facts as one quiet line, the
   trailer's length, "The show" before the card (its photos 4:5, given by js/land.js after the load event; a second outlined "Watch the
   trailer"), a lower media band on a desktop (the price line above the sticky bar at 1280 x 800).
   fit-1029 (v6; owner 2026-10-29: "the show pages doesn't look good on desktop / larger screens. and the video on top in some
   smaller screens doesn't fit the screen correctly"): the film always whole (16:9, never cropped to a band); from 600 px wide the
   top bar above it; from 1024 px wide two columns in a 1280 px frame (the film and the show left, the city, the price and the card
   right) and the sticky bar in one row. */

/* ---------- the frame: one column; on a phone the top bar sits over the media's top edge ---------- */
.is-land .b-top, .is-land .b-main, .is-land .b-foot, .is-land .b-mytix { max-width: 720px; }
.is-land .b-main { padding-top: 0; }
.is-land .b-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; margin: 0 auto; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 28px; background: linear-gradient(180deg, rgba(6, 11, 23, 0.82) 0%, rgba(6, 11, 23, 0.45) 55%, rgba(6, 11, 23, 0) 100%); }
.is-land .b-brand, .is-land .b-back { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.is-land .b-back { color: var(--cream); }
.is-land .b-show .b-kicker { display: none; }
.is-land .b-show { padding-top: 14px; }   /* sell-1028: 16 -> 14 (with the lede and pill row below: room for the hook in the first screen) */
.is-land .b-city { font-size: clamp(30px, 8.2vw, 44px); text-wrap: balance; }
.is-land .cimg.b-cimg { width: 46px; height: 46px; }
.is-land .b-date { margin-top: 6px; }
/* sell-1028 A1: what the show is (the serif, cream), then the main page's line in the body face on its own line */
.l-hook { margin: 8px 0 0; color: var(--cream); font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.l-hook2 { display: block; margin-top: 2px; color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 400; line-height: 1.4; }
/* sell-1028 A1: the facts as one quiet line ("Doors 6:30 PM · Show 7:00 PM · All ages"); the seat words on their own line */
.is-land .b-facts { display: block; margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.is-land .b-facts li { display: inline; padding: 0; border: 0; border-radius: 0; color: inherit; font-size: inherit; }
.is-land .b-facts li + li::before { content: "\00a0\00b7\0020"; }
.is-land .b-facts li.b-fact-seat { display: block; }
.is-land .b-facts li.b-fact-seat::before { content: none; }
/* the card's own Continue stays in its place here: the sticky bar is the page's floating button */
.is-land .b-go { position: static; box-shadow: none; }
/* "Not your city? See all dates" closes the page: the card's own small link would say it twice */
.is-land .b-all { display: none; }

/* ---------- the media band (16:9; the poster is the first image) ----------
   fit-1029 (v6; owner 2026-10-29: "the video on top in some smaller screens doesn't fit the screen correctly"): the film is always
   whole, never cut to a strip (it was at most 34 % of the screen's height, 28 % on a short phone: a phone in an app's browser lost the
   heads; on a tablet the band shrank to the left). On a phone it spans the screen's width; from 600 px wide see below. */
.l-media { position: relative; z-index: 1; display: block; width: calc(100% + 32px); margin: 0 -16px; aspect-ratio: 16 / 9; overflow: hidden; background: #0b1426 radial-gradient(80% 90% at 50% 40%, #2a2350 0%, #0b1426 70%); cursor: pointer; }
@supports not (aspect-ratio: 1 / 1) { .l-media::before { content: ""; display: block; padding-top: 56.25%; } }
.l-poster, .l-loop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* the loop sits 1 px inside the poster: never a larger paint than the poster, so the poster stays the page's largest paint (LCP) */
.l-loop { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.l-media.is-live .l-loop { opacity: 1; }
.l-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(6, 11, 23, 0) 0%, rgba(6, 11, 23, 0.72) 100%); pointer-events: none; }
.l-watch { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid rgba(242, 201, 135, 0.55); background: rgba(6, 11, 23, 0.62); color: var(--cream); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.9); }
.l-watch svg { width: 18px; height: 18px; color: var(--amber-hi); flex: none; }
/* sell-1028 A3: the built-in trailer's length */
.l-len { margin-left: -2px; padding: 1px 7px; border-radius: 999px; background: rgba(243, 233, 210, 0.14); color: var(--cream); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.l-pause { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(243, 233, 210, 0.35); background: rgba(6, 11, 23, 0.55); color: var(--cream); cursor: pointer; }
.l-pause svg { width: 18px; height: 18px; }

/* ---------- the state line ---------- */
.l-lede { margin: 10px 0 0; }   /* sell-1028: 12 -> 10 */
.l-lede p { margin: 0; }
.l-pillrow { margin-bottom: 6px !important; }   /* sell-1028: 8 -> 6 */
.l-lede .pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--cream); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; background: rgba(6, 11, 23, 0.35); }
.l-lede .pill.is-ok { border-color: rgba(159, 211, 168, 0.45); color: var(--ok); }
.l-lede .pill.is-hot { border-color: rgba(242, 201, 135, 0.6); color: var(--amber-hi); }
.l-lede .pill.is-next { color: var(--muted); }
.l-lede .pill.is-soon { border-color: rgba(242, 201, 135, 0.45); color: var(--amber-hi); }
.l-lede .pill.is-off { color: var(--muted-2); }
.l-sold { display: inline-block; margin: 4px 0 4px 2px; padding: 8px 13px 7px 15px; border: 2px solid var(--amber-hi); border-radius: 7px; background: rgba(242, 201, 135, 0.1); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px rgba(242, 201, 135, 0.55); color: var(--amber-hi); font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transform: rotate(-3deg); }
.l-sold.is-final { border-color: rgba(170, 178, 197, 0.45); background: transparent; box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px rgba(170, 178, 197, 0.28); color: var(--muted); }
.l-price, .l-when { color: var(--ink); font-size: 15px; line-height: 1.45; }
.l-price strong { color: var(--amber-hi); font-family: var(--serif); font-size: 19px; font-weight: 600; }
.l-when { color: var(--amber-hi); font-weight: 600; }
.l-perk { margin-top: 6px !important; color: var(--cream); font-size: 14px; }
.l-off { margin-top: 2px !important; color: var(--muted-2); font-size: 12.5px; }

/* ---------- after the card: the show, questions, all dates ---------- */
/* order-1029 (v11; owner 2026-10-29: "a lot of the content that was under the purchase box in mobile on the shows page now appear on
   top like the images for example"): in one column (a phone, a tablet, a show with the seat picker) the state's card follows the
   state line again, and the show (its words, the photos, the closing line) comes after the card, then the questions and all dates.
   The server keeps the show before the card (sell-1028 A2): a desktop's left column needs it there, as a float never starts above
   its place in the page; the two columns (min-width: 1024px, below) are not a flex box, so this order does not apply there. Main's
   children have no bottom margins, so no gap changes size; a browser without :has() keeps the server's order. */
.is-land .b-main:has(> .l-show) { display: flex; flex-direction: column; }
.is-land .b-main:has(> .l-show) > :is(.l-show, .l-faq, .l-all) { order: 1; }
.l-sec { margin: 44px 0 0; }
.l-kick { margin: 0 0 8px; color: var(--amber); font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.l-h2 { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(30px, 8vw, 40px); font-weight: 500; line-height: 1.05; color: var(--cream); text-wrap: balance; }
/* the main page's emphasis in colour only: an italic face would add 65 KB of fonts to the first load */
.l-h2 em, .l-show em { font-style: normal; }
.l-h2 em { color: var(--amber-hi); }
.l-show > p em { color: var(--cream); font-weight: 600; }
.l-show > p:not(.l-kick):not(.l-close) { margin: 0 0 8px; color: var(--ink); max-width: 56ch; }
.l-show .l-h2 { margin-bottom: 10px; }
/* photos-1029 (v9; owner 2026-10-29: "the bottom where it shows two photos in shows pages should show like how it shows on the main
   page those two photos"): the main page's pair (css/site.css .show-photos: the same box, mask, glow, shadows and motion): the masked
   figure at the back fading into the dark like a figure under a spotlight, the red coat in front as a print laid over it. js/land.js
   sets --sp (-1..1, where the box sits in the window) and, under a mouse, --tx/--ty (-1..1); the back photo drifts slower than the
   page and the front one faster. (Was: two 4:5 cards side by side.) */
.l-photos { --sp: 0; --tx: 0; --ty: 0; --amp: 0.6; position: relative; width: 100%; max-width: 520px; margin: 20px auto 0; aspect-ratio: 5 / 6; perspective: 1400px; isolation: isolate; }
.l-photos::before { content: ""; position: absolute; inset: 4% 0 14% 20%; z-index: -1; background: radial-gradient(closest-side, rgba(224, 164, 88, 0.17), rgba(224, 164, 88, 0.05) 55%, transparent); filter: blur(26px); pointer-events: none; }
.l-ph { position: absolute; margin: 0; aspect-ratio: 2 / 3; }
.l-par { position: relative; width: 100%; height: 100%; will-change: transform; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.l-par img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* the photo js/land.js gives after the load event fills the frame; until then nothing shows (not its alt text); without scripts the
   <noscript> copy is the photo */
.l-par img[data-src] { visibility: hidden; }
.l-ph-back { top: 0; right: 0; width: 80%; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 47% 50% at 50% 42%, #000 56%, rgba(0, 0, 0, 0.45) 80%, transparent 100%); mask-image: radial-gradient(ellipse 47% 50% at 50% 42%, #000 56%, rgba(0, 0, 0, 0.45) 80%, transparent 100%); }
.l-ph-back .l-par { transform: translate3d(calc(var(--tx) * -7px), calc((var(--sp) * -30px + var(--ty) * -5px) * var(--amp)), 0) scale(1.13); }
.l-ph-front { left: 0; bottom: 0; width: 50%; z-index: 1; }
.l-ph-front .l-par { border-radius: 6px; overflow: hidden; background: #0b1426; box-shadow: 0 0 0 1px rgba(242, 201, 135, 0.22), 0 46px 90px -36px rgba(0, 0, 0, 0.95), 0 18px 40px -24px rgba(0, 0, 0, 0.8); transform: translate3d(calc(var(--tx) * 12px), calc((var(--sp) * 44px + var(--ty) * 8px) * var(--amp)), 0) rotateY(calc(var(--tx) * 5deg)) rotateX(calc(var(--ty) * -4deg)); }
/* room under the pair for the front print's drift (at most 44 px x --amp) plus 16 px, so the closing line never touches it */
.l-photos { margin-bottom: 44px; }
.l-close { margin: 16px 0 0; color: var(--cream); font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.3; text-align: center; }
.l-faq details { border-top: 1px solid var(--line-2); }
.l-faq details:last-of-type { border-bottom: 1px solid var(--line-2); }
.l-faq summary { position: relative; padding: 15px 34px 15px 0; color: var(--cream); font-size: 16.5px; font-weight: 600; cursor: pointer; list-style: none; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--amber-hi); font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1; }
.l-faq details[open] summary::after { content: "\2212"; }
.l-faq details p { margin: 0 0 14px; color: var(--ink); font-size: 15px; }
.l-all { margin-top: 40px; padding: 22px 20px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(42, 35, 80, 0.55), rgba(15, 26, 49, 0.9)); text-align: center; }
.l-all .l-h2 { margin-bottom: 4px; font-size: 28px; }
.l-all p { margin: 0; }
/* "See all dates" is the second action here: outlined, so the page has one gold button */
.l-all .b-btn, .l-pick .b-btn { background: transparent; border: 1px solid rgba(242, 201, 135, 0.55); color: var(--amber-hi); }

/* ---------- the date chooser ---------- */
.l-pick { margin-top: 72px; }
.l-pick .b-city { font-size: clamp(28px, 7.6vw, 40px); text-wrap: balance; }
.l-pick > p { margin-top: 8px !important; color: var(--ink); }
.l-pick-list { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 10px; }
.l-pick-a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(242, 201, 135, 0.4); background: rgba(242, 201, 135, 0.07); text-decoration: none; }
.l-pick-d { color: var(--cream); font-weight: 700; font-size: 17px; }
.l-pick-v { color: var(--muted); font-size: 14px; }
.l-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* not found / the chooser: room under the top bar, which floats over the page's top */
.is-land:not(.l-bar) .b-main > .b-card:first-child { margin-top: 72px; }

/* ---------- the sticky bar ---------- */
.lb { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(242, 201, 135, 0.28); background: #060b17; box-shadow: 0 -14px 34px -14px rgba(0, 0, 0, 0.85); transition: transform 0.22s ease, visibility 0s linear 0s; }
.lb-in { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 16px; }
.lb.is-off { transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; }
.lb-row { display: flex; align-items: stretch; gap: 10px; }
.lb-step { display: none; align-items: center; gap: 2px; flex: none; }
.lb.is-js .lb-step { display: flex; }
.lb-pm { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: auto 0; padding: 0; border-radius: 50%; border: 1px solid rgba(243, 233, 210, 0.3); background: #0b1630; color: var(--cream); cursor: pointer; }
.lb-pm svg { width: 18px; height: 18px; }
.lb-pm[disabled] { opacity: 0.35; cursor: default; }
/* barqty-1021: with no ticket type or several chosen in the card the stepper looks off, and a tap says why (js/land.js) */
.lb-pm[aria-disabled="true"] { opacity: 0.35; }
.lb-q { min-width: 26px; text-align: center; color: var(--cream); font-family: var(--serif); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-go { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px; padding: 7px 14px; border: 0; border-radius: 30px; background: linear-gradient(180deg, #f6d79f 0%, var(--amber) 55%, #c98a3f 100%); color: #1b1206; font: inherit; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(224, 164, 88, 0.7); }
/* barqty-1021: 30 px corners (was 999 px): the same pill at its usual height; with large text a taller button keeps its words inside its shape */
.lb-go[disabled] { opacity: 0.7; cursor: wait; }
.lb-t { font-size: 16.5px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.15; }
.lb-s { font-size: 13px; font-weight: 700; line-height: 1.2; opacity: 0.86; font-variant-numeric: tabular-nums; }
.lb-one .lb-go { min-height: 52px; }
.lb-type { margin: 0 0 6px; color: var(--cream); font-size: 13px; font-weight: 600; }
.lb-type .opt-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
/* barqty-1021: ticket types: the line over the row names the type the stepper moves ("Ticket type: General seating"), and the
   whole line is one tap to the card's "Ticket type" (Change, right); "Ticket type:" is left out when the name would not fit */
.lb-type2 { margin: -4px 0 2px; }
.lb-pick { display: flex; align-items: center; gap: 6px; min-height: 34px; color: var(--cream); font-size: 13px; font-weight: 600; line-height: 1.25; text-decoration: none; }
.lb-tk { flex: none; color: var(--muted); }
.lb.is-tight .lb-tk { display: none; }
.lb-tname { flex: 0 1 auto; min-width: 0; color: var(--cream); font-size: 14px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tname .opt-ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }
.lb-tch { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 4px 0 4px 10px; color: var(--amber-hi); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lb-tch svg { width: 15px; height: 15px; flex: none; }
.lb-note { margin: 0 0 6px; color: var(--amber-hi); font-size: 13px; font-weight: 600; line-height: 1.35; }
.lb-assent { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.lb-assent a { color: var(--amber-hi); }
@media (max-width: 899.98px) {
  body.l-bar { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  /* barqty-1021: a bar with a type line over its row is taller from the first paint (js/land.js then keeps its measured height) */
  body.l-bar:has(#lb .lb-type) { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}
@media (max-width: 599.98px) {
  /* "Your tickets are ready" (a returning buyer, js/buy.js shows it): under the top bar, which floats over the page's top, and
     above its fading edge, so it can be read and tapped (review 2026-10-20: it sat under the bar's brand and All dates);
     fit-1029: the top bar floats on a phone only (899 -> 599) */
  .is-land .b-mytix { padding-top: calc(max(12px, env(safe-area-inset-top)) + 46px); padding-bottom: 12px; }
  .is-land .b-mytix a { position: relative; z-index: 5; }
}
@media (max-width: 379.98px) {
  .lb-row { gap: 8px; }
  .lb-go { padding: 7px 10px; }
  .lb-t { font-size: 15px; }
}
@media (max-width: 359.98px) {
  .lb-t { font-size: 14px; }
  .lb-s { font-size: 12px; }
  .lb-pm { width: 40px; height: 40px; }
  .lb-q { min-width: 22px; }
}

/* ---------- the trailer dialog: the whole screen, the film in its own shape ---------- */
.l-dlg { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--cream); overflow: hidden; }
.l-dlg:not([open]) { display: none; }
.l-dlg::backdrop { background: #000; }
.l-dlg-in { position: relative; width: 100%; height: 100%; }
.l-tv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.l-x { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(243, 233, 210, 0.4); background: rgba(6, 11, 23, 0.7); color: var(--cream); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.l-x svg { width: 18px; height: 18px; }

/* ---------- codes-1024: the discount code (js/land.js adds it only where a code works for the show) ---------- */
.b-dc { margin: 14px 0 0; }
.b-dc-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 0 -2px; padding: 6px 2px; border: 0; background: none; color: var(--amber-hi); font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; }
.b-dc-q { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(242, 201, 135, 0.55); text-underline-offset: 4px; }
.b-dc-open::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.18s ease; }
.b-dc.is-open .b-dc-open::after { transform: translateY(2px) rotate(-135deg); }
.b-dc-ico { width: 18px; height: 18px; flex: none; }
.b-dc-box { margin: 2px 0 0; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(6, 11, 23, 0.5); animation: b-dc-in 0.2s ease; }
@keyframes b-dc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.b-dc-l { display: block; margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
/* review 2026-10-24: the field keeps room for a code (Apply goes under it, full width, when the row is narrow: a small phone with
   large text, Safari page zoom); on one line the field takes the room */
.b-dc-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* 17 px: iOS zooms into a field under 16 px */
.b-dc-in { flex: 999 1 7.5em; min-width: 0; width: auto; min-height: 50px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(243, 233, 210, 0.22); background: #081124; color: var(--cream); font: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.b-dc-in::placeholder { color: var(--muted-2); font-weight: 500; letter-spacing: 0.01em; text-transform: none; opacity: 1; }
.b-dc-in:focus { outline: none; border-color: var(--amber-hi); box-shadow: 0 0 0 3px rgba(242, 201, 135, 0.2); }
.b-dc-in[aria-invalid="true"] { border-color: rgba(240, 163, 163, 0.8); }
.b-dc-go { flex: 1 0 auto; min-height: 50px; padding: 0 20px; border-radius: 12px; border: 1px solid rgba(242, 201, 135, 0.6); background: rgba(242, 201, 135, 0.1); color: var(--amber-hi); font: inherit; font-size: 16px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; }
.b-dc-go[disabled], .b-dc-go[aria-disabled="true"] { opacity: 0.6; cursor: wait; }
/* a remembered code being checked: "Checking SAFETY15..." in place of "Have a code?" */
.b-dc-open.is-wait { color: var(--muted); cursor: wait; }
.b-dc-open.is-wait .b-dc-q { text-decoration: none; }
.b-dc-open.is-wait::after { display: none; }
.b-dc-msg { margin: 8px 0 0 !important; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.4; }
.b-dc-msg:empty { display: none; }
.b-dc-msg.is-bad { color: var(--bad); }
/* the applied code: a ticket-stub chip, the code, its percent, Remove */
.b-dc-on { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; padding: 6px 6px 6px 14px; border-radius: 14px; border: 1px dashed rgba(242, 201, 135, 0.65); background: linear-gradient(135deg, rgba(242, 201, 135, 0.15) 0%, rgba(242, 201, 135, 0.04) 100%); animation: b-dc-in 0.25s ease; }
.b-dc-on:focus { outline: none; }
.b-dc-on:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; }
.b-dc-pill { display: flex; flex: 1 1 8em; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; margin: 0 !important; color: var(--cream); line-height: 1.3; }
.b-dc-pill .b-dc-ico { color: var(--amber-hi); margin-right: -2px; }
/* the tag and the code stay together (a long code breaks inside its own text, never leaving the tag alone on a line) */
.b-dc-nm { display: inline-flex; flex: 0 1 auto; align-items: flex-start; gap: 8px; min-width: 0; }
.b-dc-nm .b-dc-ico { margin-top: 1px; }
.b-dc-name { flex: 0 1 auto; min-width: 0; font-size: 16px; font-weight: 800; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.b-dc-pct { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(242, 201, 135, 0.16); box-shadow: inset 0 0 0 1px rgba(242, 201, 135, 0.35); color: var(--amber-hi); font-size: 14px; font-weight: 800; white-space: nowrap; }
.b-dc-rm { flex: none; margin-left: auto; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.b-dc-info { margin: 6px 0 0 !important; color: var(--muted-2); font-size: 13px; }
/* a code that came off at Continue (used up, ended): its words */
.b-dc-info.is-bad { color: var(--bad); font-size: 14px; font-weight: 600; line-height: 1.4; }
.b-save { margin: 0 !important; text-align: right; color: var(--ok); font-size: 14px; font-weight: 700; }
/* a price with a code: the price of before struck, smaller and grey; the new price where it was */
.b-was-i { color: var(--muted); font-weight: 500; text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(170, 178, 197, 0.9); }
.b-now-i { color: var(--amber-hi); }
.b-amt .b-was-i { font-size: 0.5em; margin-right: 2px; }
.b-total .b-was-i { font-size: 0.5em; margin-right: 4px; }
/* buy.css colours and sizes every span of the total row (".b-total span", the TOTAL word): the new total keeps the price's own look */
.b-total .b-now-i { color: var(--amber-hi); font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; }
/* a long total with its price of before: the two stay together, under TOTAL when the row is too narrow (large text, a small phone) */
.b-total.is-coded { flex-wrap: wrap; column-gap: 12px; }
.b-total.is-coded strong { margin-left: auto; white-space: nowrap; text-align: right; }
.l-price .b-was-i { font-size: 0.82em; }
.pill .b-was-i { font-weight: 600; text-decoration-thickness: 1.5px; }
.b-tier .b-now-i, .pill .b-now-i { font-weight: 700; }
/* the sticky bar's code line ("Have a code?", or the applied code): the one tap to the card's code */
.lb-dc { margin: 0 0 4px; line-height: 1.2; }
.lb-dc-a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; color: var(--amber-hi); font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(242, 201, 135, 0.5); text-underline-offset: 3px; }
.lb-dc-a.is-on { color: var(--cream); text-decoration: none; }
.lb-dc-a.is-on .lb-dc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.06em; }
.lb-dc-a.is-on .lb-dc-pct { flex: none; white-space: nowrap; color: var(--amber-hi); }
.lb-dc-ico { width: 15px; height: 15px; flex: none; color: var(--amber-hi); }
@media (max-width: 359.98px) {
  .b-dc-row { gap: 6px; }
  .b-dc-go { padding: 0 14px; }
  .b-dc-on { padding-left: 10px; }
}

/* ---------- 600 px wide or more (a tablet, a phone on its side, a narrow window): the top bar above the media, the media with round
   corners; fit-1029: the whole film (16:9), centred, at most 62 % of the screen's height (its width follows), never cropped ---------- */
@media (min-width: 600px) {
  .is-land .b-top { position: static; padding-top: 18px; padding-bottom: 12px; background: none; }
  .is-land .b-brand, .is-land .b-back { text-shadow: none; }
  .is-land .b-back { color: var(--amber-hi); }
  .l-media { width: 100%; width: min(100%, calc(62vh * 16 / 9)); width: min(100%, calc(62svh * 16 / 9)); margin: 0 auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(242, 201, 135, 0.16), 0 30px 60px -36px rgba(0, 0, 0, 0.95); }
  .l-watch { right: 16px; bottom: 16px; font-size: 15px; }
  .l-pause { left: 16px; bottom: 16px; }
  .is-land .b-show { padding-top: 18px; }   /* sell-1028: 22 -> 18 */
  .is-land:not(.l-bar) .b-main > .b-card:first-child { margin-top: 24px; }
  .l-pick { margin-top: 24px; }
}
/* fit-1029: a phone on its side (520 px tall or less): a lower top bar, and the film between it and the sticky bar (with its buttons) */
@media (min-width: 600px) and (max-height: 520px) {
  .is-land .b-top { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .l-media { width: min(100%, max(320px, calc((100vh - 190px) * 16 / 9))); width: min(100%, max(320px, calc((100svh - 190px) * 16 / 9))); }
}
@media (min-width: 900px) {
  .l-sec { margin-top: 64px; }
  .l-photos { --amp: 1; max-width: 540px; margin-bottom: 60px; }   /* photos-1029: the main page's desktop motion (44 px drift + 16 px) */
  .lb:not(.is-js) { display: none; }   /* without scripts a desktop keeps the card's own Continue only; with them js/land.js shows the bar while the card's control is off screen */
  .lb-in { padding: 0 24px; }
  .lb-go { flex: 0 1 380px; margin-left: auto; }
  .lb-one .lb-go { flex: 0 1 380px; }
}

/* ---------- a desktop, 1024 px wide or more (fit-1029; owner 2026-10-29: "the show pages doesn't look good on desktop / larger
   screens"): two columns in a 1280 px frame. Left: the film, the state line (the perk) under it, the show, all dates. Right, beside
   the film: the city, the date, the venue, then the state's card (its Continue in the first screen from 1680 x 1050), then the
   questions. Floats, so each column keeps its own order and height while main's children stay one list (a phone reads them top to
   bottom; js/land.js measures nothing of the layout). Only on a show's page (the media band) without the seat picker (the server's
   #b-seats section: its map keeps the one column from the first paint); a browser without :has() keeps the one centred column.
   review-1029 (wf_d291085e-234, four lenses, each finding re-measured live by a skeptic): the questions moved under the card (the
   right column was empty for 550-1090 px below the card, and the footer was centred off the 'Not your city?' box above it); with
   no negative margin left, a card made long by large text can no longer run over the footer. ---------- */
@media (min-width: 1024px) {
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-top,
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main,
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-foot { max-width: 1280px; padding-left: 32px; padding-right: 32px; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main { --lr: clamp(340px, 30vw, 420px); --lg: clamp(36px, 4.4vw, 64px); display: flow-root; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > :is(.l-media, .l-lede, .l-show, .l-all) { float: left; clear: left; width: calc(100% - var(--lr) - var(--lg)); }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > .l-media { margin: 0; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > .l-lede { margin-top: 20px; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > .l-show { margin-top: 40px; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > :is(.b-show, .b-flash, .b-card) { margin-left: calc(100% - var(--lr)); }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > .b-show { padding-top: 0; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > .b-card { margin-top: 24px; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > .b-card + .b-card { margin-top: 16px; }
  /* the questions: a float on the right, so it starts right under the card (where the flow is) and leaves the left column alone */
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > .l-faq { float: right; clear: right; width: var(--lr); margin-top: 40px; }
  /* review-1029: the card's words in its narrower column: Continue on one line from 1024 px (it wrapped to an 80 px pill up to about
     1170 px), a city name that keeps its state with it ('Sacramento, CA'), the price the card says once (the state line's price
     sentence and its 'Next price' pill step aside while the card's own price line is there; a pill the card never repeats stays) */
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-main > .b-card .b-go { padding-left: 12px; padding-right: 12px; letter-spacing: 0; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-city { font-size: clamp(32px, calc(3.6vw - 7px), 44px); }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)):has(#b-buy .b-tier) .b-main > .l-lede > :is(.l-price, .l-pillrow:has(> .pill.is-next)) { display: none; }
  /* review-1029: the returning buyer's line ("You have N tickets ...") in the same frame, starting at the brand's edge */
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-mytix { max-width: 1280px; padding-left: 32px; padding-right: 32px; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .b-mytix a { width: fit-content; max-width: 100%; }
  /* the bar: one row in the same frame (the ticket type left; the stepper and Continue right) */
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .lb-in { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; max-width: 1280px; padding: 0 32px; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) :is(.lb-note, .lb-assent) { flex: 1 0 100%; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) :is(.lb-type, .lb-type2, .lb-dc) { flex: 0 1 auto; min-width: 0; margin: 0; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) .lb-row { flex: 0 0 auto; margin-left: auto; }
  body.is-land:has(> #main > #l-media):not(:has(#b-seats)) :is(.lb-go, .lb-one .lb-go) { flex: 0 0 auto; width: 340px; margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb.is-off, .l-loop { transition: none; }
  .b-dc-box, .b-dc-on { animation: none; }
  .b-dc-open::after { transition: none; }
  /* photos-1029: the main page's still pair */
  .l-par, .l-ph-back .l-par, .l-ph-front .l-par { transition: none; }
  .l-ph-back .l-par { transform: scale(1.06); }
  .l-ph-front .l-par { transform: none; }
}
@media (hover: hover) {
  .l-pick-a:hover { border-color: var(--amber-hi); background: rgba(242, 201, 135, 0.12); }
  .lb-pm:hover:not([disabled]):not([aria-disabled="true"]) { border-color: var(--amber-hi); }
  .lb-pick:hover .lb-tch { color: var(--cream); }
  .l-watch:hover { color: var(--cream); border-color: var(--amber-hi); }
  .lb-go:hover { color: #1b1206; filter: brightness(1.05); }
  .b-dc-open:hover, .lb-dc-a:hover { color: var(--cream); }
  .b-dc-go:hover:not([disabled]):not([aria-disabled="true"]) { border-color: var(--amber-hi); background: rgba(242, 201, 135, 0.18); }
  .b-dc-rm:hover { color: var(--cream); }
}

/* sell-1028 review (phone lens, 2026-10-28): on short phones (<= 700 px tall) the shorter media band keeps the price line above the
   sticky bar; on the shows with the "Seats assigned at the box office" line the hook's second sentence steps aside there (the
   plan's first fallback). The width keeps the 16:9 band to the screen's edge. A long city name wraps at 200% text. */
@media (max-width: 899px) and (max-height: 700px) {
  .is-land .b-show:has(.b-fact-seat) .l-hook2 { display: none; }
}
/* fit-1029: the whole film on a short phone too (the 28 % band above is gone); the show's lines sit closer instead, so the price
   line still ends above the sticky bar */
@media (max-width: 599.98px) and (max-height: 700px) {
  .is-land .b-show { padding-top: 10px; }
  .is-land .cimg.b-cimg { width: 40px; height: 40px; }
  .is-land .b-date { margin-top: 2px; }
  .l-hook { margin-top: 4px; }
  .is-land .b-facts { margin-top: 2px; }
  .l-lede { margin-top: 8px; }
  .l-lede .pill { padding-top: 3px; padding-bottom: 3px; }
}
.is-land .b-city { overflow-wrap: anywhere; }

/* review-1029 (wf_d291085e-234; every rule below re-measured live by a skeptic before it came here):
   - phones 630 px tall or less (an iPhone SE in Safari with its bars, an app's browser on a small phone): with the whole film the
     price line went under the sticky bar; the hook's second line steps aside and the state line sits closer (360 x 640 keeps both) */
@media (max-width: 599.98px) and (max-height: 630px) {
  .l-hook2 { display: none; }
  .l-lede { margin-top: 4px; }
  .l-pillrow { margin-bottom: 2px !important; }
}
/* - a folded phone (under 300 px wide): the brand stays on one line and Watch no longer runs into the pause button */
@media (max-width: 299.98px) {
  .is-land .b-brand { font-size: 15px; gap: 6px; }
  .l-len { display: none; }
}
/* - the returning buyer's line keeps 14 px off the film when the top bar sits above it (600 px wide or more) */
@media (min-width: 600px) {
  .is-land .b-mytix { padding-bottom: 14px; }
}
/* - no single word left alone on a card title's or the venue's last line ("... go on / sale", "... Theatre / Company") */
.is-land .b-card h2, .is-land .b-venue { text-wrap: balance; }