/* Christmas on Strings, the v26 page (M09 research/mockups/M09-christmas-hero, D-24..D-50): the mockup's style block, verbatim, over the program template's own styles: v12 hero, v22 first snow + calendar, v23 base (short hero, long-ways dialog), v24, v25, v26. */

body{padding-bottom:0} .hero .definition{font-family:var(--font-text);font-weight:400}
.hero .subline,.hero .facts,.hero-actions .btn{font-family:var(--font-text)}
.hero .subline{max-width:48rem;font-size:17px;line-height:1.45}
.hero .definition{font-size:21px;line-height:1.45;max-width:37rem;margin-top:16px}
.hero .facts{margin-top:14px}.hero-actions{margin-top:20px}.hero-actions .btn-buy{min-width:210px;padding:12px 26px;min-height:48px}
.hero .escape a{font-family:var(--font-text);min-height:44px}.hero-scrim{background:linear-gradient(90deg,rgba(4,4,5,.86),rgba(4,4,5,.62) 56%,rgba(4,4,5,.12)),linear-gradient(0deg,rgba(4,4,5,.6),transparent)}
.research-note{margin:0;background:#e8e3d8;color:#37352f;font:14px/1.4 var(--font-text);padding:10px 20px;text-align:center}
#tickets{scroll-margin-top:20px}.tickets .plate{box-shadow:none;border-radius:16px}.tickets h2{font-family:var(--font-display)}
.ticket-intro{font-family:var(--font-text);font-size:17px;line-height:1.5;margin-top:8px;color:#41413e}
.dates{border:0;padding:0}.dates legend{float:none;padding:0}.chip.datechip{display:inline-flex;flex-direction:column;min-height:64px;cursor:pointer;justify-content:center}
.dateradio{position:absolute;opacity:0;width:1px;height:1px}.datechip .sub{font-size:14px}
html:has(.dateradio:checked) #tickets label.datechip{color:var(--ink)}
.times-preview{margin-top:24px}.times-preview .chips{margin-top:8px}.timechip{display:inline-flex;gap:8px;align-items:center;min-height:48px;cursor:pointer}.timechip input{accent-color:#a85a04}
.preview-note{font:16px/1.5 var(--font-text);color:#41413e;margin-top:24px;max-width:48rem}
.mini-footer{font:15px/1.5 var(--font-text);padding:20px;color:#41413e;text-align:center}
@media(max-width:749px){.hero h1.title{font-size:44px;line-height:1.08}.hero .definition{font-size:19px;line-height:1.42}.hero .subline{font-size:16px}.hero-inner{padding:76px 20px 28px}.hero .facts{font-size:16px}.hero-actions .btn-buy{width:auto;min-width:190px}.tickets .plate{padding:20px}.chip.datechip{padding:10px 12px}.research-note{font-size:13px}.hero .escape{top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

html:has(.dateradio:focus-visible) #tickets label.datechip{outline:none}
.hero h1.title{text-wrap:balance}
.hero-actions .btn,.hero .escape a{font-family:var(--font-display)}
.hero .hero-more{display:inline-block;padding:12px 2px;margin:-12px -2px}
.hero .price{font-family:var(--font-text);font-size:22px;line-height:1.3}
.hero .price .qual{display:inline;margin:0 0 0 .35rem;font-family:var(--font-text);font-size:16px}
@media not all and (max-height:520px) and (orientation:landscape){
.hero .definition{margin-top:12px}.hero .facts{margin-top:12px;gap:.35rem 1.25rem}.hero .price{margin-top:10px}.hero-actions{margin-top:18px}.hero-inner{padding-bottom:28px}
@media(min-width:750px){.hero-inner{padding-top:76px}}
@media(max-width:1023px){.hero-scrim{background:linear-gradient(180deg,rgba(4,4,5,.38) 0%,rgba(4,4,5,.74) 34%,rgba(4,4,5,.9) 100%)}}
@media(max-width:749px){.hero .price{font-size:20px}.hero-inner{padding:72px 20px 24px}}
}
@media not all and (max-height:520px) and (orientation:landscape){header.hero{min-height:min(62svh,calc(100svh - 59px - 12rem))}@media(max-width:1023px){header.hero{min-height:min(62svh,calc(100svh - 59px - 8rem))}}@media(max-width:749px){header.hero{min-height:min(500px,calc(100svh - 59px - 8rem))}}}.hero h1.title{font-size:clamp(2.75rem,3vw + 1.75rem,4.1rem);line-height:1.04}@media(max-width:749px){.hero h1.title{font-size:42px}}
.hero-actions .btn-buy{min-width:min(20rem,100%);padding-inline:3rem}
.hero .price .qual{font-size:var(--t-body)}
@media(max-width:749px){.hero .subline,.hero .facts{font-size:var(--t-body)}}
@media not all and (max-height:520px) and (orientation:landscape){.hero .subline{margin-top:8px}.hero .definition{margin-top:18px}.hero .facts{margin-top:16px}.hero .price{margin-top:6px}.hero-actions{margin-top:22px}}
.hero .definition,.hero .subline{text-wrap:pretty}
.hero .hero-more{display:inline;padding:4px 0;margin:0}.hero .hero-more:hover{color:#fff;text-decoration-thickness:2px}
.hero-actions .btn:focus-visible{border-radius:9999px}
.arw{width:.9em;height:.9em;vertical-align:-.1em;flex:none}
.tickets .plate{border-radius:24px}
.hero .price{font-family:var(--font-display);font-size:28px;line-height:1.2}.hero .price .qual{font-family:var(--font-display)}@media(max-width:749px){.hero .price{font-size:24px}}

body::before{background:radial-gradient(44rem 30rem at 88% 6%,rgba(196,226,255,.30) 0%,rgba(196,226,255,0) 70%),radial-gradient(40rem 34rem at 4% 94%,rgba(222,232,255,.30) 0%,rgba(222,232,255,0) 70%)}
#tickets::before{background:radial-gradient(50% 60% at 20% 30%,rgba(196,226,255,.30) 0%,rgba(196,226,255,0) 70%)}
#tickets .plate{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(150,180,210,.25),0 30px 70px -30px rgba(120,150,190,.35)}
header.hero::after{height:30px;bottom:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath fill='%23f6f4ef' d='M0 44V24c90-16 170-18 250-8s150 15 240 3 170-20 262-9 160 15 250 5 130-14 198-7V44z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;box-shadow:none}
/* snowfall: two tiled layers moved by transform only (compositor, no repaint); each layer is one tile taller than the hero so the loop is seamless.
   On its own layer (.hero-snow, the div after the scrim — festive.snow()), not on the scrim: the event manager fades the scrim (--scrim, 2026-11-09) and the snow must not fade with it */
.hero-snow{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-snow::before,.hero-snow::after{content:"";position:absolute;left:0;right:0;bottom:0;pointer-events:none;will-change:transform}
.hero-snow::before{top:-190px;opacity:.5;background-image:radial-gradient(1.6px 1.6px at 22px 30px,rgba(255,255,255,0.9) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 96px 118px,rgba(255,255,255,0.8) 50%,transparent 51%),radial-gradient(2.1px 2.1px at 150px 64px,rgba(255,255,255,0.75) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 58px 160px,rgba(255,255,255,0.85) 50%,transparent 51%),radial-gradient(1.8px 1.8px at 128px 176px,rgba(255,255,255,0.7) 50%,transparent 51%),radial-gradient(1.1px 1.1px at 176px 12px,rgba(255,255,255,0.8) 50%,transparent 51%);background-size:190px 190px;animation:snowfall-a 30s linear infinite}
.hero-snow::after{top:-260px;opacity:.35;background-image:radial-gradient(1.6px 1.6px at 22px 30px,rgba(255,255,255,0.9) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 96px 118px,rgba(255,255,255,0.8) 50%,transparent 51%),radial-gradient(2.1px 2.1px at 150px 64px,rgba(255,255,255,0.75) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 58px 160px,rgba(255,255,255,0.85) 50%,transparent 51%),radial-gradient(1.8px 1.8px at 128px 176px,rgba(255,255,255,0.7) 50%,transparent 51%),radial-gradient(1.1px 1.1px at 176px 12px,rgba(255,255,255,0.8) 50%,transparent 51%);background-size:260px 260px;background-position:40px 20px;animation:snowfall-b 44s linear infinite}
@keyframes snowfall-a{to{transform:translate3d(0,190px,0)}} @keyframes snowfall-b{to{transform:translate3d(0,260px,0)}}
@media (prefers-reduced-motion:reduce){.hero-snow::before,.hero-snow::after{animation:none}}
@media not all and (max-height:520px) and (orientation:landscape){.hero-inner{padding-bottom:44px}}

#tickets fieldset.cal .cal-title{margin:12px 0 0;font:400 var(--t-body)/1.3 var(--font-display);color:var(--ink)}
#tickets fieldset.cal .cal-head,#tickets fieldset.cal .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:470px}
#tickets fieldset.cal .cal-head{margin-top:10px;font:400 12px/1 var(--font-display);color:var(--muted);text-align:center;letter-spacing:.08em}
#tickets fieldset.cal .cal-grid{margin-top:8px}
#tickets .cal-blank,#tickets .cal-cell{min-height:50px;display:flex;align-items:center;justify-content:center;position:relative}
#tickets .cal-blank{font:400 15px/1 var(--font-display);color:rgba(23,23,26,.32)}
#tickets .cal-cell label.datechip{position:absolute;inset:0;min-height:0;padding:0;border-radius:10px;justify-content:center;align-items:center;gap:0;font:400 17px/1 var(--font-display);color:var(--ink);background:#fff;border:1px solid rgba(23,23,26,.24)}
#tickets .cal-cell label.datechip:hover{border-color:rgba(23,23,26,.5)}
html:has(#tickets) #tickets .dateradio:checked + label.datechip{border-color:#ff9b12;background:rgba(255,155,18,.12);color:#a85a04}
html:has(#tickets) #tickets .cal-cell label.datechip.off{background:rgba(23,23,26,.05);border-color:rgba(23,23,26,.07);color:rgba(23,23,26,.34);cursor:not-allowed}
#tickets .cal-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#tickets .cal-sel{display:none;margin:12px 0 0;font:400 var(--t-body)/1.4 var(--font-display);color:var(--ink)}
#tickets .cal-sel .sub{color:var(--muted)}
#tickets .cal-demo{margin:8px 0 0;font:400 var(--t-meta)/1.4 var(--font-display);color:var(--faint)}
@media(max-width:749px){#tickets .plate{padding-inline:14px}#tickets fieldset.cal .cal-head,#tickets fieldset.cal .cal-grid{gap:3px}#tickets .cal-blank,#tickets .cal-cell{min-height:46px}}

/* hero: v6's short poster with v12's type (D-36). Desktop 420px, phones content-set. */
@media not all and (max-height:520px) and (orientation:landscape){header.hero{min-height:min(420px,calc(100svh - 59px - 12rem))}@media(max-width:749px){header.hero{min-height:0}}}
.hero-actions{margin-top:20px}
/* the dialog, about 15% smaller than v12 (D-38): the four type roles one step down */
@media(min-width:1024px){#tickets{--t-body:.9375rem;--t-lead:1rem;--t-label:.875rem;--t-meta:.8125rem}#tickets .plate{padding:1.4rem 1.5rem 1.5rem}}
#tickets h2.rule{margin-bottom:.4rem}
#tickets .dp h3.progtitle,#tickets .tiers-note{display:none}
@media(min-width:1024px){#tickets .chip{padding:.45rem .8rem}#tickets .timechip{min-height:42px}#tickets .cal-blank,#tickets .cal-cell{min-height:42px}#tickets .cal-cell label.datechip{font-size:15px;border-radius:8px}}
#tickets fieldset.cal .cal-title{margin-top:6px}
#tickets .cal-sel{margin-top:10px}
#tickets .cal-out{color:rgba(23,23,26,.2)}
@media(min-width:1024px){#tickets .tier{padding:.75rem .9rem}#tickets .tier h3{font-size:1rem}#tickets .tier-d{font-size:var(--t-meta)}#tickets .btn.buy{min-height:46px;padding:.7rem 1.4rem;font-size:var(--t-body)}#tickets .hold-note{font-size:var(--t-meta)}}
/* kids: closed until opened; a row that holds child tickets stays on screen */
#tickets .pprow.kid{display:none}
#tickets form.sel:has(.kids-cb:checked) .pprow.kid,#tickets .pprow.kid.on{display:flex}
#tickets .kids-toggle{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font:400 var(--t-label)/1.3 var(--font-display);color:var(--ink);min-height:36px}
#tickets .kids-toggle input{accent-color:#a85a04;width:16px;height:16px;margin:0}
#tickets .sess .tiers{margin-top:6px}
#tickets .kids-toggle{justify-self:start}
/* long-ways from 1024px: calendar | showtimes | tickets */
@media(min-width:1024px){
  #tickets .plate{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);column-gap:32px;align-items:start}
  #tickets .plate>h2.rule{grid-column:1/-1}
  #tickets fieldset.cal{grid-column:1}
  #tickets .dpanels{grid-column:2}
  #tickets form.sel{display:grid;grid-template-columns:minmax(150px,170px) minmax(0,1fr);column-gap:28px;align-items:start}
  #tickets form.sel>.times{grid-column:1;grid-row:1/span 8}
  #tickets form.sel>*:not(.times){grid-column:2}
  #tickets .times .times-row{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:8px}
  #tickets .times .timechip{width:100%;flex-direction:row;justify-content:space-between}
  #tickets .lbl-tiers{margin-top:0}
  #tickets.wrap{max-width:min(1180px,100%)}
  #tickets form.sel>.times,#tickets form.sel>.times>.lbl,#tickets form.sel>.lbl-tiers{margin-top:0}
  #tickets fieldset.cal>legend,#tickets form.sel>.times>.lbl,#tickets form.sel>.lbl-tiers{min-height:22px;margin-bottom:8px}
  #tickets .tiers{grid-template-columns:1fr;gap:10px}
  #tickets .tier .row{gap:12px}
}
/* phones: the same order, top to bottom; showtimes stacked */
@media(max-width:1023px){
  #tickets .times .times-row{flex-direction:column;overflow:visible}
  #tickets .times .timechip{width:100%;flex-direction:row;justify-content:space-between}
}

/* three equal steps: one heading style, one baseline */
#tickets fieldset.cal>legend.lbl,#tickets form.sel .times>.lbl,#tickets form.sel>.lbl-tiers{display:block;float:none;width:auto;margin:0 0 12px;padding:0;min-height:0;
  font:400 var(--t-body)/1.3 var(--font-display);color:var(--ink);letter-spacing:0;text-transform:none}
#tickets .dp,#tickets form.sel,#tickets fieldset.cal,#tickets form.sel>.times{margin-top:0}
/* the chosen date names the showtimes (the line under the calendar is gone) */
#tickets .cal-sel{display:none!important}
#tickets .cal-date{margin:-4px 0 14px;font:400 var(--t-label)/1.3 var(--font-display);color:var(--muted)}
#tickets .cal-date b{font-weight:400;color:inherit}
/* the venue lines and the limit, under the tiers and above the button; the hold note stays under it */
#tickets .tiers-note{display:block;margin:16px 0 0;font-size:var(--t-meta);line-height:1.45;color:var(--muted);max-width:34rem}
#tickets .limit-note{margin-top:4px}
/* kids: their own tier boxes under the adult ones, behind /wallet's reveal */
#tickets .pprow.kid{display:flex}
#tickets details.kids-reveal{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:14px 0 0}
#tickets details.kids-reveal summary{list-style:none;cursor:pointer;min-height:48px;padding:.6rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font:400 var(--t-body)/1.3 var(--font-display);color:var(--ink)}
#tickets details.kids-reveal summary::-webkit-details-marker{display:none}
#tickets details.kids-reveal summary::after{content:"+";flex:none;width:28px;height:28px;border:1px solid rgba(23,23,26,.35);border-radius:50%;color:var(--ink);font-size:19px;line-height:26px;text-align:center}
#tickets details.kids-reveal summary:hover::after{background:rgba(23,23,26,.05)}
#tickets details.kids-reveal[open] summary::after{content:"–"}
#tickets details.kids-reveal[open]{border-color:transparent;background:rgba(23,23,26,.035);border-radius:14px;padding:0 14px 14px}
#tickets details.kids-reveal .kids-tiers{display:grid;gap:12px;margin:0;padding:2px 0 0}
#tickets .cal-legend{display:flex;align-items:center;gap:.5rem;margin:14px 0 0;font:400 var(--t-meta)/1.3 var(--font-display);color:var(--muted)}
#tickets .cal-legend .sw{width:14px;height:14px;border-radius:4px;background:rgba(23,23,26,.05);border:1px solid rgba(23,23,26,.07)}
#tickets .limit-note{margin-top:4px!important}
/* side by side from 1024px: the template's own 64rem box; both dividers run the dialog's full height */
@media(min-width:1024px){
  #tickets.wrap{max-width:var(--wrap)}
  #tickets .plate{grid-template-columns:300px minmax(0,1fr);column-gap:0}
  #tickets fieldset.cal{padding-right:32px}
  #tickets .dpanels{align-self:stretch;border-left:1px solid var(--line);padding-left:32px}
  #tickets form.sel{grid-template-columns:168px minmax(0,1fr);column-gap:64px;
    background:linear-gradient(var(--line),var(--line)) 200px 0/1px 100% no-repeat}
  #tickets form.sel>.times{border:0;padding:0;margin-right:0}
  #tickets .tiers,#tickets .kids-tiers{grid-template-columns:1fr}
  #tickets .tiers-note{max-width:none}
  #tickets .cal-blank,#tickets .cal-cell{min-height:44px}
  #tickets .timechip{min-height:44px}
  #tickets .hold-note{text-align:center}
  /* one date (D-28: no picker): the dialog is two columns, showtimes | tickets */
  #tickets .plate:not(:has(fieldset.cal)){grid-template-columns:minmax(0,1fr)}
  #tickets .plate:not(:has(fieldset.cal)) .dpanels{grid-column:1;border-left:0;padding-left:0}
  #tickets .plate:not(:has(fieldset.cal)) form.sel{grid-template-columns:200px minmax(0,1fr);column-gap:64px;background-position:232px 0}
}
/* under 1024px the three steps run top to bottom with room between them: each step opens after a hairline */
@media(max-width:1023px){
  #tickets .plate{padding:1.5rem 1.25rem 1.75rem}
  #tickets h2.rule{margin-bottom:.9rem}
  #tickets fieldset.cal .cal-head,#tickets fieldset.cal .cal-grid{gap:6px;max-width:none}
  #tickets .cal-blank,#tickets .cal-cell{min-height:46px}
  #tickets .cal-cell label.datechip{font-size:16px}
  #tickets form.sel>.times,#tickets form.sel>.lbl-tiers{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
  #tickets .times .times-row{gap:10px}
  #tickets .times .timechip{min-height:50px}
  #tickets .sess .tiers{gap:12px;margin-top:0}
  #tickets .tier{padding:1rem 1.1rem}
  #tickets .tiers-note{margin-top:20px}
  #tickets details.kids-reveal{margin-top:16px}
  #tickets .btn.buy{margin-top:20px;min-height:52px;width:100%}
}
/* tablets: time chips wrap at a readable width instead of stretching edge to edge */
@media(min-width:640px) and (max-width:1023px){#tickets .times .times-row{flex-direction:row;flex-wrap:wrap;gap:10px}#tickets .times .timechip{width:auto;min-width:200px;flex:0 0 auto}}
@media(min-width:640px) and (max-width:1023px){#tickets .plate{padding:2rem}}
/* narrow phones: 44px day cells need the plate's side padding and the grid gap trimmed */
@media(max-width:420px){#tickets .plate{padding-inline:12px}#tickets fieldset.cal .cal-head,#tickets fieldset.cal .cal-grid{gap:3px}}

/* D-45: the quantity boxes light up when the button is pressed with nothing chosen */
#tickets .qty.nudge{animation:qty-nudge 1.4s ease-out 2;border-color:var(--gold)}
@keyframes qty-nudge{0%{box-shadow:0 0 0 0 rgba(255,155,18,.55)}70%{box-shadow:0 0 0 9px rgba(255,155,18,0)}100%{box-shadow:0 0 0 0 rgba(255,155,18,0)}}
@media (prefers-reduced-motion:reduce){#tickets .qty.nudge{animation:none;box-shadow:0 0 0 3px rgba(255,155,18,.45)}}
/* D-46: the pick, under 1024px only */
#tickets .pick-line,#tickets .pick-stub,#tickets .pick-in{display:none}
@media(max-width:1023px){
  #tickets .pick-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;margin:20px 0 -8px;font:400 var(--t-body)/1.4 var(--font-display);color:var(--ink)}
  #tickets .pick-line .pk{font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:.25rem}
  #tickets .pick-line b{font-weight:400} #tickets .pick-line .dot,#tickets .pick-line .pick-tz{color:var(--muted)}
  #tickets .pick-line .pv{white-space:nowrap} #tickets .pick-line .dot{margin:0 .35rem}
  #tickets .btn.buy:has(.pick-in){display:inline-flex;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding-top:.7rem;padding-bottom:.7rem;min-height:64px}
  #tickets .pick-in{display:inline-flex;gap:.35rem;font:400 var(--t-meta)/1.3 var(--font-display);color:inherit;opacity:.78;letter-spacing:.02em}
  #tickets .pick-stub{display:grid;grid-template-columns:1fr 1fr;margin:20px 0 -6px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  #tickets .pick-stub div+div{border-left:1px solid var(--line);padding-left:16px}
  #tickets .pick-stub dt{font:400 var(--t-meta)/1.2 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
  #tickets .pick-stub dd{margin:0;font:400 var(--t-lead)/1.25 var(--font-display);color:var(--ink)}
  #tickets .pick-stub .pick-tz{font-size:var(--t-meta);color:var(--muted)}
}

@media(max-width:1023px){
  #tickets .lbl-tiers{scroll-margin-top:16px}
  #tickets .btn.buy:has(.pick-in){min-height:68px;gap:1px;padding-top:.6rem;padding-bottom:.6rem}
  #tickets .btn.buy:has(.pick-in) .lbl{font-size:var(--t-lead)}
  #tickets .pick-in{font-size:12px;opacity:.72}
}
.sr-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}