@import url("../tokens/fonts.css");

/* ==========================================================================
   Curtain — the magic of the theatre. Red velvet, gilded prosceniums,
   playbills, footlights and the seating plan.
   Colours, spacing, radii and shadows come from tokens.css; motion lives here.
   Rules: only transform/opacity move; entrance animations fill BACKWARDS;
   colour and edge changes only on one element's own state. No blur, no
   backdrop-filter, no animated gradients, no looping shadows.
   ========================================================================== */

:root {
  /* the house curves (mirror tokens.json → easing) */
  --cu-house: cubic-bezier(.22, .8, .24, 1);
  --cu-curtain: cubic-bezier(.7, 0, .2, 1);
  --cu-fold: cubic-bezier(.3, 1.5, .5, 1);
  --cu-press: cubic-bezier(.4, 0, .6, 1);
  --cu-exit: cubic-bezier(.5, 0, .75, 0);
  /* durations (mirror tokens.json → duration) */
  --cu-t-press: 110ms;
  --cu-t-hover: 200ms;
  --cu-t-fold: 280ms;
  --cu-t-slide: 380ms;
  --cu-t-turn: 700ms;
  --cu-t-curtain: 1500ms;
  /* derived, theme-aware washes (static) */
  --cu-hair: rgba(141, 111, 95, .38);
  --cu-hair-gilt: rgba(214, 174, 92, .42);
  --cu-spot-core: rgba(255, 228, 170, .26);
  --cu-spot-mid: rgba(255, 228, 170, .12);
  --cu-glow: rgba(242, 207, 127, .5);
  --cu-scrim: rgba(8, 3, 4, .78);
  --cu-wash: rgba(214, 174, 92, .10);
  --cu-sheen: rgba(255, 255, 255, .13);
  --cu-paper-line: rgba(214, 174, 92, .22);
  color-scheme: dark;
}
[data-theme="light"] {
  color-scheme: light;
  --cu-hair: rgba(147, 118, 94, .4);
  --cu-hair-gilt: rgba(156, 117, 36, .45);
  --cu-spot-core: rgba(214, 150, 40, .34);
  --cu-spot-mid: rgba(214, 150, 40, .15);
  --cu-glow: rgba(214, 150, 40, .45);
  --cu-scrim: rgba(40, 18, 10, .55);
  --cu-wash: rgba(255, 255, 255, .0);
  --cu-sheen: rgba(255, 255, 255, .16);
  --cu-paper-line: rgba(156, 117, 36, .25);
}

/* ---------- the house: page ground, a seat-plan pattern, one warm wash ---------- */
html {
  overflow-x: clip;
  background-color: var(--house);
  background-image: radial-gradient(1100px 520px at 50% -160px, var(--cu-wash), transparent 70%);
  background-repeat: no-repeat;
}
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--house-pattern);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='26'%3E%3Cpath d='M5 9.5V6a2.6 2.6 0 0 1 2.6-2.6h2.8A2.6 2.6 0 0 1 13 6v3.5zM4.4 10.4h9.2v1.5H4.4zM21 22.5V19a2.6 2.6 0 0 1 2.6-2.6h2.8A2.6 2.6 0 0 1 29 19v3.5zM20.4 23.4h9.2v1.5h-9.2z'/%3E%3C/svg%3E") 0 0 / 32px 26px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='26'%3E%3Cpath d='M5 9.5V6a2.6 2.6 0 0 1 2.6-2.6h2.8A2.6 2.6 0 0 1 13 6v3.5zM4.4 10.4h9.2v1.5H4.4zM21 22.5V19a2.6 2.6 0 0 1 2.6-2.6h2.8A2.6 2.6 0 0 1 29 19v3.5zM20.4 23.4h9.2v1.5h-9.2z'/%3E%3C/svg%3E") 0 0 / 32px 26px repeat;
}
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html.cu-locked { overflow: hidden; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
.cu-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type ---------- */
.cu-marquee { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(48px, 7.4vw, 80px); line-height: 1; letter-spacing: -.01em; font-variation-settings: "opsz" 96; }
.cu-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4.6vw, 48px); line-height: 1.12; letter-spacing: -.005em; font-variation-settings: "opsz" 72; }
.cu-heading { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 34px; font-variation-settings: "opsz" 36; }
.cu-aside { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 20px; line-height: 28px; font-variation-settings: "opsz" 24; }
.cu-numeral { font-family: var(--font-display); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 48; }
.cu-body { font-size: 16px; line-height: 26px; }
.cu-small { font-size: 14px; line-height: 20px; }
.cu-label, .cu-overline { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.cu-overline { color: var(--gilt-ink); }
.cu-soft { color: var(--ink-soft); }
.cu-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cu-link:hover { text-decoration-thickness: 2px; }

/* the ornament rule: hairline — lozenge — hairline */
.cu-rule { display: flex; align-items: center; gap: 10px; color: var(--gilt); }
.cu-rule::before, .cu-rule::after { content: ""; flex: 1; height: 1px; background: var(--cu-hair-gilt); }
.cu-rule__gem { width: 7px; height: 7px; flex: none; border: 1px solid currentColor; transform: rotate(45deg); }

/* preview stage used by component cards */
.cu-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-8); }
.cu-col { display: flex; flex-direction: column; gap: var(--space-4); }

/* icons: 24 grid, 1.6 round stroke */
.cu-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cu-icon--fill { fill: currentColor; stroke: none; }

/* entrances: rise from below, fill backwards, the first eight blocks only */
@keyframes cu-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes cu-fade { from { opacity: 0; } }
.cu-enter { animation: cu-rise 620ms var(--cu-house) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}


/* ================================================================ Button */
.cu-btn {
  --lip: var(--shadow-lip);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-md);
  font: 600 14px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 280ms var(--cu-fold), box-shadow 280ms var(--cu-fold), background-color var(--cu-t-hover) ease, color var(--cu-t-hover) ease, border-color var(--cu-t-hover) ease;
}
.cu-btn::after { content: ""; position: absolute; inset: -2px -4px -7px -2px; z-index: -1; }
/* the footlight: a static warm pool under the button that fades up on hover */
.cu-btn::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: calc(100% + 2px); height: 16px; z-index: -1;
  background: radial-gradient(closest-side, var(--cu-glow), transparent);
  opacity: 0; transition: opacity var(--cu-t-hover) ease; pointer-events: none;
}
.cu-btn__face { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.cu-btn__face .cu-icon { width: 18px; height: 18px; margin: 0 -2px; }
.cu-btn__label { white-space: nowrap; }
.cu-btn--sm { min-height: 36px; padding: 0 14px; font-size: 12.5px; }
.cu-btn--lg { min-height: 54px; padding: 0 28px; font-size: 15px; }
.cu-btn--block { display: flex; width: 100%; }

/* primary: padded red velvet with gilt piping, sitting on its lip */
.cu-btn--primary {
  color: var(--on-velvet);
  background-color: var(--velvet);
  background-image: radial-gradient(120% 100% at 50% 0%, var(--cu-sheen), transparent 62%);
  box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), inset 0 -3px 0 rgba(0, 0, 0, .18), var(--lip);
  margin-bottom: 4px;
}
.cu-btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gilt), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 5px 0 var(--velvet-deep); }
.cu-btn--primary:hover::before { opacity: 1; }
.cu-btn--primary:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), inset 0 2px 4px rgba(0, 0, 0, .3), var(--shadow-lip-press); transition-duration: var(--cu-t-press); transition-timing-function: var(--cu-press); }
[data-theme="dark"] .cu-btn--primary:hover, :root:not([data-theme]) .cu-btn--primary:hover { box-shadow: inset 0 0 0 1px var(--gilt), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 5px 0 #4a0812; }

/* secondary: a gilt-framed programme button on the stage */
.cu-btn--secondary {
  color: var(--ink);
  background: var(--stage);
  box-shadow: inset 0 0 0 1px var(--edge), 0 3px 0 var(--cu-hair);
  margin-bottom: 3px;
}
.cu-btn--secondary:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gilt), 0 4px 0 var(--cu-hair-gilt); }
.cu-btn--secondary:hover::before { opacity: .7; }
.cu-btn--secondary:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--gilt), 0 1px 0 var(--cu-hair-gilt); transition-duration: var(--cu-t-press); transition-timing-function: var(--cu-press); }

.cu-btn--ghost { color: var(--ink); background: transparent; }
.cu-btn--ghost .cu-btn__label { background: linear-gradient(var(--gilt), var(--gilt)) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.cu-btn--ghost:hover { color: var(--gilt-ink); }
.cu-btn--ghost:active { transform: translateY(2px); transition-duration: var(--cu-t-press); }

.cu-btn--danger { color: var(--alert); background: var(--stage); box-shadow: inset 0 0 0 1px var(--alert), 0 3px 0 var(--cu-hair); margin-bottom: 3px; }
.cu-btn--danger:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--alert), 0 4px 0 var(--cu-hair); }
.cu-btn--danger:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--alert), 0 1px 0 var(--cu-hair); transition-duration: var(--cu-t-press); }

.cu-btn:disabled, .cu-btn[aria-disabled="true"] { cursor: not-allowed; transform: none; color: var(--ink-soft); background: var(--stage-sunk); background-image: none; box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-btn:disabled::before, .cu-btn[aria-disabled="true"]::before { opacity: 0; }

/* loading: the label dims and three footlights take turns */
.cu-btn__dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; pointer-events: none; }
.cu-btn__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .3; }
.cu-btn.is-loading { cursor: progress; }
.cu-btn.is-loading .cu-btn__face { opacity: 0; }
.cu-btn.is-loading .cu-btn__dots { opacity: 1; }
.cu-btn.is-loading .cu-btn__dots i { animation: cu-lamp 900ms ease-in-out infinite; }
.cu-btn.is-loading .cu-btn__dots i:nth-child(2) { animation-delay: 150ms; }
.cu-btn.is-loading .cu-btn__dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes cu-lamp { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ================================================================ IconButton */
.cu-ibtn {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-full);
  color: var(--ink); background: transparent; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 280ms var(--cu-fold), box-shadow 280ms var(--cu-fold), background-color var(--cu-t-hover) ease, color var(--cu-t-hover) ease;
}
.cu-ibtn::after { content: ""; position: absolute; inset: -2px -4px -6px -2px; z-index: -1; }
.cu-ibtn--sm { width: 36px; height: 36px; }
.cu-ibtn--sm .cu-icon { width: 18px; height: 18px; }
.cu-ibtn--lg { width: 54px; height: 54px; }
.cu-ibtn--lg .cu-icon { width: 24px; height: 24px; }
.cu-ibtn__face { display: grid; place-items: center; }
.cu-ibtn--outline { background: var(--stage); box-shadow: inset 0 0 0 1px var(--edge), 0 3px 0 var(--cu-hair); margin-bottom: 3px; }
.cu-ibtn--outline:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gilt), 0 4px 0 var(--cu-hair-gilt); }
.cu-ibtn--outline:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--gilt), 0 1px 0 var(--cu-hair-gilt); transition-duration: var(--cu-t-press); }
.cu-ibtn--velvet { color: var(--on-velvet); background-color: var(--velvet); background-image: radial-gradient(120% 100% at 50% 0%, var(--cu-sheen), transparent 62%); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-lip); margin-bottom: 4px; }
.cu-ibtn--velvet:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gilt), 0 5px 0 var(--velvet-deep); }
.cu-ibtn--velvet:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-lip-press); transition-duration: var(--cu-t-press); }
.cu-ibtn--ghost:hover { background: var(--stage); }
.cu-ibtn--ghost:active { transform: translateY(2px); transition-duration: var(--cu-t-press); }
.cu-ibtn[aria-pressed="true"] { color: var(--on-velvet); background-color: var(--velvet); box-shadow: inset 0 0 0 1px var(--gilt), var(--shadow-lip-press); transform: translateY(2px); }
.cu-ibtn[aria-pressed="true"] .cu-icon { fill: currentColor; }
.cu-ibtn:disabled { cursor: not-allowed; color: var(--ink-soft); opacity: .5; transform: none; }
.cu-ibtn__count {
  position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; font: 700 11px/1 var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--house); background: var(--gilt); box-shadow: 0 0 0 2px var(--house);
}
.cu-ibtn__count.is-bump { animation: cu-bump 360ms var(--cu-fold); }
@keyframes cu-bump { from { transform: scale(.4); } }

/* ================================================================ Toggle */
.cu-toggle { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cu-toggle__input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.cu-toggle__track {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--radius-full);
  background: var(--stage-sunk); box-shadow: var(--shadow-inset), inset 0 0 0 1px var(--edge);
  transition: background-color var(--cu-t-hover) ease, box-shadow var(--cu-t-hover) ease;
}
.cu-toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform var(--cu-t-slide) var(--cu-fold), background-color var(--cu-t-hover) ease;
}
.cu-toggle__knob::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.cu-toggle__input:checked + .cu-toggle__track { background: var(--velvet); box-shadow: var(--shadow-inset), inset 0 0 0 1px var(--velvet-deep); }
.cu-toggle__input:checked + .cu-toggle__track .cu-toggle__knob { transform: translateX(18px); background: var(--gilt); }
.cu-toggle__input:active + .cu-toggle__track .cu-toggle__knob { transition-duration: var(--cu-t-press); }
.cu-toggle__input:focus-visible + .cu-toggle__track { outline: 2px solid var(--focus); outline-offset: 3px; }
.cu-toggle__text { display: flex; flex-direction: column; padding-top: 1px; }
.cu-toggle__label, .cu-check__label { font-weight: 500; font-size: 15px; line-height: 24px; }
.cu-toggle__desc, .cu-check__desc { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.cu-toggle.is-disabled, .cu-check.is-disabled, .cu-radio.is-disabled { opacity: .5; cursor: not-allowed; }

/* ================================================================ Checkbox + Radio */
.cu-check, .cu-radio { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cu-check__input, .cu-radio__input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 1px 0 0; cursor: pointer; }
.cu-check__box {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: var(--radius-sm);
  display: grid; place-items: center; background: var(--stage); box-shadow: inset 0 0 0 1.5px var(--edge);
  transition: background-color var(--cu-t-hover) ease, box-shadow var(--cu-t-hover) ease;
}
.cu-check__tick { width: 16px; height: 16px; color: var(--on-velvet); stroke-width: 2.4; transform: scale(.3); opacity: 0; transition: transform var(--cu-t-fold) var(--cu-fold), opacity 120ms ease; }
.cu-check__dash { position: absolute; width: 10px; height: 2px; background: var(--on-velvet); transform: scaleX(0); transition: transform var(--cu-t-fold) var(--cu-fold); }
.cu-check:hover .cu-check__box { box-shadow: inset 0 0 0 1.5px var(--gilt); }
.cu-check__input:checked + .cu-check__box, .cu-check__input:indeterminate + .cu-check__box { background: var(--velvet); box-shadow: inset 0 0 0 1.5px var(--velvet-deep); }
.cu-check__input:checked + .cu-check__box .cu-check__tick { transform: none; opacity: 1; }
.cu-check__input:indeterminate + .cu-check__box .cu-check__tick { opacity: 0; }
.cu-check__input:indeterminate + .cu-check__box .cu-check__dash { transform: none; }
.cu-check__input:focus-visible + .cu-check__box, .cu-radio__input:focus-visible + .cu-radio__ring { outline: 2px solid var(--focus); outline-offset: 3px; }
.cu-check__text { display: flex; flex-direction: column; }
.cu-radio__ring {
  position: relative; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; background: var(--stage); box-shadow: inset 0 0 0 1.5px var(--edge);
  transition: box-shadow var(--cu-t-hover) ease;
}
.cu-radio__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--velvet); transform: scale(0); transition: transform var(--cu-t-fold) var(--cu-fold); }
.cu-radio:hover .cu-radio__ring { box-shadow: inset 0 0 0 1.5px var(--gilt); }
.cu-radio__input:checked + .cu-radio__ring { box-shadow: inset 0 0 0 2px var(--velvet); }
.cu-radio__input:checked + .cu-radio__ring .cu-radio__dot { transform: none; }
[data-theme="dark"] .cu-radio__input:checked + .cu-radio__ring, :root:not([data-theme]) .cu-radio__input:checked + .cu-radio__ring { box-shadow: inset 0 0 0 2px var(--gilt); }
[data-theme="dark"] .cu-radio__dot, :root:not([data-theme]) .cu-radio__dot { background: var(--gilt); }
.cu-radios { margin: 0; padding: 0; border: 0; min-width: 0; }
.cu-radios__list { display: flex; flex-direction: column; gap: 12px; }
.cu-radios--inline .cu-radios__list { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }

/* ================================================================ TextField */
.cu-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cu-field__label { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding: 0; margin: 0 0 6px; }
.cu-field > .cu-field__label { margin: 0; }
.cu-field__req { color: var(--alert); }
.cu-field__box {
  position: relative; display: flex; align-items: center; min-height: 46px;
  background: var(--stage); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--edge), var(--shadow-inset);
  transition: box-shadow var(--cu-t-hover) ease;
  overflow: hidden;
}
.cu-field__box:hover { box-shadow: inset 0 0 0 1px var(--gilt), var(--shadow-inset); }
.cu-field__input {
  flex: 1; min-width: 0; width: 100%; padding: 11px 14px; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: 400 16px/24px var(--font-body); resize: vertical;
}
.cu-field__input::placeholder { color: var(--ink-soft); opacity: .8; }
.cu-field.has-icon .cu-field__input { padding-left: 4px; }
.cu-field__icon { margin-left: 14px; color: var(--ink-soft); }
.cu-field__suffix { padding-right: 14px; color: var(--ink-soft); font-size: 14px; }
.cu-field__light { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gilt); transform: scaleX(0); transition: transform var(--cu-t-slide) var(--cu-house); pointer-events: none; }
.cu-field__box:focus-within { box-shadow: inset 0 0 0 1px var(--gilt), var(--shadow-inset); outline: 2px solid var(--focus); outline-offset: 3px; }
.cu-field__box:focus-within .cu-field__light { transform: scaleX(1); }
.cu-field__hint { min-height: 20px; font-size: 13.5px; line-height: 20px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.cu-field__hint .cu-icon { width: 16px; height: 16px; }
.cu-field.is-error .cu-field__box { box-shadow: inset 0 0 0 1.5px var(--alert), var(--shadow-inset); }
.cu-field.is-error .cu-field__light { background: var(--alert); }
.cu-field.is-error .cu-field__hint { color: var(--alert); }
.cu-field__input:disabled { cursor: not-allowed; color: var(--ink-soft); }

/* ================================================================ Select */
.cu-select { display: flex; flex-direction: column; min-width: 0; }
.cu-select__wrap { position: relative; }
.cu-select__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px;
  border: 0; border-radius: var(--radius-sm); background: var(--stage); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge), var(--shadow-inset); font: 400 16px/24px var(--font-body); text-align: left; cursor: pointer;
  transition: box-shadow var(--cu-t-hover) ease;
}
.cu-select__btn:hover, .cu-select__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--gilt), var(--shadow-inset); }
.cu-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-select__value.is-placeholder { color: var(--ink-soft); }
.cu-select__icon { color: var(--ink-soft); }
.cu-select__chev { color: var(--gilt-ink); transition: transform var(--cu-t-slide) var(--cu-house); }
.cu-select__btn[aria-expanded="true"] .cu-select__chev { transform: rotate(180deg); }
.cu-select__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow: auto;
  margin: 0; padding: 6px; list-style: none; border-radius: var(--radius-md);
  background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-house);
  outline: none; transform-origin: top center;
  animation: cu-menu 260ms var(--cu-house) backwards;
}
.cu-select.is-up .cu-select__list { top: auto; bottom: calc(100% + 6px); animation-name: cu-menu-up; }
@keyframes cu-menu { from { opacity: 0; transform: translateY(-6px); } }
@keyframes cu-menu-up { from { opacity: 0; transform: translateY(6px); } }
.cu-select__list:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cu-select__opt { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.cu-select__opt.is-active { background: var(--stage-sunk); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt); }
.cu-select__opt.is-disabled { opacity: .45; cursor: not-allowed; }
.cu-select__optlabel { flex: 1; display: flex; flex-direction: column; line-height: 20px; }
.cu-select__hint { font-size: 13px; color: var(--ink-soft); }
.cu-select__tick { color: var(--gilt-ink); opacity: 0; }
.cu-select__opt[aria-selected="true"] .cu-select__tick { opacity: 1; }
.cu-select__opt[aria-selected="true"] { font-weight: 600; }

/* ================================================================ Slider */
.cu-slider { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cu-slider__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cu-slider__top .cu-field__label { margin: 0; }
.cu-slider__out { font-size: 24px; line-height: 28px; color: var(--gilt-ink); min-width: 4ch; text-align: right; }
.cu-slider__rail { position: relative; height: 32px; display: flex; align-items: center; }
.cu-slider__input { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.cu-slider__input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--velvet) 0 calc(var(--p) * 100%), var(--stage-sunk) calc(var(--p) * 100%)); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-slider__input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--stage-sunk); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-slider__input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--velvet); }
.cu-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--gilt); border: 3px solid var(--stage); box-shadow: 0 0 0 1px var(--gilt), 0 2px 4px rgba(0, 0, 0, .35); transition: transform var(--cu-t-fold) var(--cu-fold); }
.cu-slider__input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gilt); border: 3px solid var(--stage); box-shadow: 0 0 0 1px var(--gilt); }
.cu-slider__input:hover::-webkit-slider-thumb { transform: scale(1.12); }
.cu-slider__input:active::-webkit-slider-thumb { transform: scale(.92); }
.cu-slider__input:focus-visible { outline: none; }
.cu-slider__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.cu-slider__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.cu-slider__ticks { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ================================================================ Tabs */
.cu-tabs { min-width: 0; }
.cu-tabs__rail { position: relative; border-bottom: 1px solid var(--cu-hair); overflow-x: auto; scrollbar-width: none; }
.cu-tabs__rail::-webkit-scrollbar { display: none; }
.cu-tabs__list { display: flex; gap: 4px; }
.cu-tabs__tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px;
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
  font: 600 14px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  transition: color var(--cu-t-hover) ease;
}
.cu-tabs__tab:hover { color: var(--ink); }
.cu-tabs__tab[aria-selected="true"] { color: var(--ink); }
.cu-tabs__tab:focus-visible { outline-offset: -3px; }
.cu-tabs__count { min-width: 22px; padding: 2px 6px; border-radius: 10px; font-size: 11.5px; letter-spacing: 0; background: var(--stage-sunk); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cu-tabs__tab[aria-selected="true"] .cu-tabs__count { background: var(--velvet); color: var(--on-velvet); }
.cu-tabs__bar { position: absolute; left: 0; bottom: -1px; width: 1px; height: 3px; background: var(--velvet); transform-origin: 0 0; transition: transform var(--cu-t-slide) var(--cu-house); }
[data-theme="dark"] .cu-tabs__bar, :root:not([data-theme]) .cu-tabs__bar { background: var(--gilt); }
.cu-tabs__panel { padding-top: var(--space-6); }
.cu-tabs__panel:focus-visible { outline-offset: 4px; }
.cu-tabs__panel.is-in { animation: cu-fade 320ms ease backwards; }

/* ================================================================ SegmentedControl */
.cu-seg { display: inline-flex; flex-direction: column; min-width: 0; max-width: 100%; }
.cu-seg--block { display: flex; }
.cu-seg__tray {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px;
  border-radius: var(--radius-md); background: var(--stage-sunk); box-shadow: var(--shadow-inset), inset 0 0 0 1px var(--cu-hair);
}
.cu-seg__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n));
  border-radius: 6px; background: var(--stage); box-shadow: inset 0 0 0 1px var(--gilt), 0 2px 0 var(--cu-hair-gilt);
  transition: transform var(--cu-t-slide) var(--cu-house);
}
.cu-seg__opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 14px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  font: 600 13px/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--cu-t-hover) ease;
}
.cu-seg__opt .cu-icon { width: 17px; height: 17px; }
.cu-seg__opt:hover { color: var(--ink); }
.cu-seg__opt[aria-checked="true"] { color: var(--ink); }
.cu-seg__opt:active { transform: translateY(1px); }
.cu-seg__opt:focus-visible { outline-offset: -2px; border-radius: 6px; }
.cu-seg--sm .cu-seg__opt { min-height: 32px; padding: 0 10px; font-size: 12px; }

/* ================================================================ Card */
.cu-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--radius-md); background: var(--stage); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--cu-hair), var(--shadow-card);
  text-decoration: none;
}
.cu-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: var(--space-6) var(--space-6) 0; }
.cu-card__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cu-card__title { margin: 0; font: 600 24px/30px var(--font-display); font-variation-settings: "opsz" 30; }
.cu-card__body { padding: var(--space-4) var(--space-6) var(--space-6); flex: 1; }
.cu-card__head + .cu-card__body { padding-top: var(--space-4); }
.cu-card__body > p { margin: 0 0 12px; }
.cu-card__body > p:last-child { margin-bottom: 0; }
.cu-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--cu-hair); }
.cu-card--programme { box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-card); }
.cu-card__frame { position: absolute; inset: 8px; border: 1px solid var(--cu-hair-gilt); border-radius: 4px; pointer-events: none; z-index: -1; }
.cu-card--programme .cu-card__head { justify-content: center; text-align: center; padding-top: var(--space-8); }
.cu-card--programme .cu-card__titles { align-items: center; }
.cu-card--programme .cu-card__title { font-style: italic; font-weight: 500; font-size: 28px; line-height: 34px; }
.cu-card--velvet { color: var(--on-velvet); background-color: var(--velvet-deep); background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 22px, rgba(255, 255, 255, .03) 22px 30px, transparent 30px 44px); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-card); }
.cu-card--velvet .cu-overline { color: var(--gilt); }
[data-theme="light"] .cu-card--velvet .cu-overline { color: #e8c983; }
.cu-card--velvet .cu-card__foot { border-color: rgba(255, 243, 223, .2); }
.cu-card--arch { border-radius: var(--radius-arch) var(--radius-arch) var(--radius-md) var(--radius-md); }
.cu-card--arch .cu-card__head { padding-top: 56px; justify-content: center; text-align: center; }
.cu-card--interactive { cursor: pointer; transition: transform var(--cu-t-slide) var(--cu-house), box-shadow var(--cu-t-slide) var(--cu-house); }
.cu-card--interactive::after { content: ""; position: absolute; inset: 0 -4px -8px 0; z-index: -2; }
.cu-card--interactive:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-lift); }
.cu-card--interactive:active { transform: translateY(-1px); transition-duration: var(--cu-t-press); }

/* ================================================================ Badge */
.cu-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-full);
  font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--stage-sunk); box-shadow: inset 0 0 0 1px var(--cu-hair);
}
.cu-badge .cu-icon { width: 16px; height: 16px; margin-left: -2px; }
.cu-badge--sm { height: 24px; padding: 0 9px; font-size: 11px; gap: 5px; }
.cu-badge--sm .cu-icon { width: 14px; height: 14px; }
.cu-badge--velvet { color: var(--on-velvet); background: var(--velvet); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt); }
.cu-badge--gilt { color: var(--house); background: var(--gilt); box-shadow: none; }
[data-theme="light"] .cu-badge--gilt { color: #fffaf1; background: #7a560f; }
.cu-badge--ok { color: var(--ok); background: transparent; box-shadow: inset 0 0 0 1px var(--ok); }
.cu-badge--alert { color: var(--alert); background: transparent; box-shadow: inset 0 0 0 1px var(--alert); }
.cu-badge--outline { color: var(--gilt-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--gilt); }
.cu-badge--access { color: var(--ink); background: var(--stage); box-shadow: inset 0 0 0 1px var(--edge); letter-spacing: .06em; }
.cu-badge--access .cu-icon { color: var(--gilt-ink); }
.cu-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cu-badge__x { display: grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.cu-badge__x:hover { background: rgba(0, 0, 0, .15); }
.cu-badge__x .cu-icon { width: 14px; height: 14px; margin: 0; }
/* ticket-shaped: notched ends */
.cu-badge--ticket { border-radius: 2px; padding: 0 14px;
  -webkit-mask: radial-gradient(circle 5px at 0 50%, transparent 4.5px, #000 5px) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 4.5px, #000 5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 5px at 0 50%, transparent 4.5px, #000 5px) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, transparent 4.5px, #000 5px) right / 51% 100% no-repeat; }

/* ================================================================ Avatar: oval portrait frames */
.cu-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; overflow: visible;
  width: 40px; height: 48px; border-radius: 50%;
  color: var(--on-velvet); background: var(--velvet);
  box-shadow: 0 0 0 2px var(--stage), 0 0 0 3px var(--gilt);
}
.cu-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cu-avatar__ini { font: italic 500 17px/1 var(--font-display); letter-spacing: .02em; font-variation-settings: "opsz" 24; }
.cu-avatar--sm { width: 30px; height: 36px; }
.cu-avatar--sm .cu-avatar__ini { font-size: 13px; }
.cu-avatar--lg { width: 72px; height: 88px; }
.cu-avatar--lg .cu-avatar__ini { font-size: 28px; }
.cu-avatar--xl { width: 104px; height: 128px; }
.cu-avatar--xl .cu-avatar__ini { font-size: 40px; }
.cu-avatar--circle { border-radius: 50%; height: auto; aspect-ratio: 1; }
.cu-avatar--velvet { color: var(--on-velvet); background: var(--velvet); }
.cu-avatar--gilt { color: #2a1a06; background: var(--gilt); }
[data-theme="light"] .cu-avatar--gilt { color: #fffaf1; background: #7a560f; }
.cu-avatar--band-b { color: #08221f; background: var(--band-b); }
[data-theme="light"] .cu-avatar--band-b { color: #fffaf1; background: #1f665e; }
.cu-avatar--band-c { color: #0d0f2a; background: var(--band-c); }
[data-theme="light"] .cu-avatar--band-c { color: #fffaf1; background: #4a4fa8; }
.cu-avatar--stage { color: var(--ink); background: var(--stage-sunk); }
.cu-avatar__badge { position: absolute; right: -6px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gilt); color: var(--house); box-shadow: 0 0 0 2px var(--stage); }
.cu-avatar__badge .cu-icon { width: 13px; height: 13px; stroke-width: 2.2; }


/* ================================================================ Progress */
.cu-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cu-progress__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cu-progress__label { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.cu-progress__val { font-size: 20px; line-height: 24px; color: var(--gilt-ink); min-width: 4ch; text-align: right; }
.cu-progress__track { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--stage-sunk); box-shadow: var(--shadow-inset), inset 0 0 0 1px var(--cu-hair); overflow: hidden; }
.cu-progress--sm .cu-progress__track { height: 5px; }
.cu-progress__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--velvet); transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--cu-house); }
[data-theme="dark"] .cu-progress__fill, :root:not([data-theme]) .cu-progress__fill { background: var(--gilt); }
.cu-progress--ok .cu-progress__fill { background: var(--ok); }
.cu-progress.is-indeterminate .cu-progress__fill { width: 35%; transform: translateX(-100%); animation: cu-sweep 1.6s var(--cu-house) infinite; }
@keyframes cu-sweep { to { transform: translateX(300%); } }

/* Steps: acts joined by a gold thread */
.cu-steps { position: relative; --p: 0; }
.cu-steps__list { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cu-steps__thread { position: absolute; top: 17px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; background: var(--cu-hair); }
.cu-steps__fill { position: absolute; inset: 0; background: var(--gilt); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform 600ms var(--cu-house); }
.cu-steps__item { display: flex; justify-content: center; min-width: 0; }
.cu-steps__btn { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink-soft); font: inherit; cursor: default; }
button.cu-steps__btn:not(:disabled) { cursor: pointer; }
button.cu-steps__btn:not(:disabled):hover .cu-steps__label { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt); text-underline-offset: 3px; }
.cu-steps__mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--house); box-shadow: inset 0 0 0 1.5px var(--edge); }
.cu-steps__num { font: 600 15px/1 var(--font-display); font-variation-settings: "opsz" 18; }
.cu-steps__tick { position: absolute; width: 18px; height: 18px; stroke-width: 2.2; opacity: 0; transform: scale(.4); transition: transform var(--cu-t-fold) var(--cu-fold), opacity 150ms ease; }
.cu-steps__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-steps__item.is-done .cu-steps__mark { background: var(--gilt); box-shadow: none; color: var(--house); }
[data-theme="light"] .cu-steps__item.is-done .cu-steps__mark { color: #fffaf1; }
.cu-steps__item.is-done .cu-steps__num { opacity: 0; }
.cu-steps__item.is-done .cu-steps__tick { opacity: 1; transform: none; }
.cu-steps__item.is-current .cu-steps__mark { background: var(--velvet); color: var(--on-velvet); box-shadow: 0 0 0 4px var(--house), 0 0 0 5px var(--gilt); }
.cu-steps__item.is-current .cu-steps__label { color: var(--ink); }
@media (max-width: 560px) { .cu-steps__label { font-size: 10px; letter-spacing: .06em; } .cu-steps__item:not(.is-current) .cu-steps__label { opacity: .85; } }

/* ================================================================ Accordion */
.cu-acc { border-top: 1px solid var(--cu-hair); }
.cu-acc__item { border-bottom: 1px solid var(--cu-hair); }
.cu-acc__h { margin: 0; }
.cu-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 14px 4px;
  border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font: 500 20px/28px var(--font-display); font-variation-settings: "opsz" 24;
}
.cu-acc__btn:hover .cu-acc__q { text-decoration: underline; text-decoration-color: var(--gilt); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cu-acc__plus { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--edge); transition: transform var(--cu-t-slide) var(--cu-house), background-color var(--cu-t-hover) ease, box-shadow var(--cu-t-hover) ease; }
.cu-acc__plus::before, .cu-acc__plus::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.5px; background: var(--gilt-ink); }
.cu-acc__plus::after { transform: rotate(90deg); }
.cu-acc__btn[aria-expanded="true"] .cu-acc__plus { transform: rotate(45deg); background: var(--velvet); box-shadow: none; }
.cu-acc__btn[aria-expanded="true"] .cu-acc__plus::before, .cu-acc__btn[aria-expanded="true"] .cu-acc__plus::after { background: var(--on-velvet); }
.cu-acc__panel { padding: 0 44px 18px 4px; color: var(--ink-soft); }
.cu-acc__panel:not([hidden]) .cu-acc__inner { animation: cu-drop 340ms var(--cu-house) backwards; }
@keyframes cu-drop { from { opacity: 0; transform: translateY(-6px); } }
.cu-acc__inner p { margin: 0 0 10px; }
.cu-acc__inner p:last-child { margin: 0; }

/* ================================================================ Tooltip: an usher's card */
.cu-tipwrap { display: inline-flex; }
.cu-tip {
  position: fixed; z-index: 1000; left: 0; top: 0; max-width: min(280px, calc(100vw - 16px)); padding: 9px 13px;
  border-radius: var(--radius-sm); background: var(--ink); color: var(--house);
  font: 500 13.5px/19px var(--font-body); box-shadow: var(--shadow-house); pointer-events: none;
  opacity: 0; transition: opacity 160ms ease, transform 220ms var(--cu-house);
}
.cu-tip[data-place="top"] { transform: translateY(4px); }
.cu-tip[data-place="bottom"] { transform: translateY(-4px); }
.cu-tip[data-place="left"] { transform: translateX(4px); }
.cu-tip[data-place="right"] { transform: translateX(-4px); }
.cu-tip.is-on { opacity: 1; transform: none; }
.cu-tip__title { display: block; font: italic 600 15px/20px var(--font-display); margin-bottom: 2px; }
.cu-tip__arrow { position: absolute; width: 10px; height: 10px; background: var(--ink); transform: translate(-50%, 0) rotate(45deg); }
.cu-tip[data-place="top"] .cu-tip__arrow { bottom: -4px; }
.cu-tip[data-place="bottom"] .cu-tip__arrow { top: -4px; }
.cu-tip[data-place="left"] .cu-tip__arrow { right: -4px; transform: translate(0, -50%) rotate(45deg); }
.cu-tip[data-place="right"] .cu-tip__arrow { left: -4px; transform: translate(0, -50%) rotate(45deg); }

/* ================================================================ Toast: ticket slips */
.cu-toasts { position: fixed; z-index: 900; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.cu-toasts__more { align-self: flex-end; padding: 4px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-toast {
  --px: 54px;
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 10px 12px 0;
  border-radius: var(--radius-sm); background: var(--stage); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-house);
  animation: cu-slip 420ms var(--cu-house) backwards;
  -webkit-mask: radial-gradient(circle 7px at var(--px) 0, transparent 6.5px, #000 7px) top / 100% 51% no-repeat, radial-gradient(circle 7px at var(--px) 100%, transparent 6.5px, #000 7px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 7px at var(--px) 0, transparent 6.5px, #000 7px) top / 100% 51% no-repeat, radial-gradient(circle 7px at var(--px) 100%, transparent 6.5px, #000 7px) bottom / 100% 51% no-repeat;
}
@keyframes cu-slip { from { opacity: 0; transform: translateY(18px); } }
.cu-toast.is-leaving { opacity: 0; transform: translateY(10px); transition: opacity 240ms var(--cu-exit), transform 240ms var(--cu-exit); }
.cu-toast__stub { align-self: stretch; display: grid; place-items: center; width: var(--px); flex: none; border-right: 1.5px dashed var(--cu-hair-gilt); color: var(--gilt-ink); }
.cu-toast--ok .cu-toast__stub { color: var(--ok); }
.cu-toast--alert .cu-toast__stub { color: var(--alert); }
.cu-toast__stub .cu-icon { width: 22px; height: 22px; }
.cu-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cu-toast__title { font: italic 600 17px/22px var(--font-display); font-variation-settings: "opsz" 20; }
.cu-toast__msg { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.cu-toast__action { flex: none; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--gilt-ink); font: 600 12.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cu-toast__action:hover { background: var(--stage-sunk); }
.cu-toast__x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.cu-toast__x:hover { color: var(--ink); background: var(--stage-sunk); }
.cu-toast__x .cu-icon { width: 16px; height: 16px; }
@media (max-width: 560px) { .cu-toasts { right: 16px; left: 16px; bottom: 16px; width: auto; } }

/* ================================================================ Modal / Sheet */
.cu-modal-root { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 24px 16px; }
.cu-modal-root.is-inline { position: relative; inset: auto; z-index: auto; padding: 0; display: block; }
.cu-modal__scrim { position: absolute; inset: 0; background: var(--cu-scrim); }
.cu-modal-root.is-inline .cu-modal__scrim { display: none; }
.cu-modal {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 48px); overflow: auto; isolation: isolate;
  border-radius: var(--radius-md); background: var(--stage); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-house); outline: none;
}
.cu-modal--lg { width: min(720px, 100%); }
.cu-modal--sm { width: min(400px, 100%); }
.cu-modal__pelmet {
  display: block; height: 14px; background: var(--velvet-deep); border-radius: var(--radius-md) var(--radius-md) 0 0;
  -webkit-mask: linear-gradient(#000, #000) top / 100% 8px no-repeat, radial-gradient(circle 6px at 8px 0, #000 5.6px, transparent 6px) 0 6px / 16px 8px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% 8px no-repeat, radial-gradient(circle 6px at 8px 0, #000 5.6px, transparent 6px) 0 6px / 16px 8px repeat-x;
}
.cu-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: var(--space-6) var(--space-6) 0; }
.cu-modal__title { margin: 2px 0 0; font: 600 28px/34px var(--font-display); font-variation-settings: "opsz" 36; }
.cu-modal__x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -4px -8px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.cu-modal__x:hover { color: var(--ink); background: var(--stage-sunk); }
.cu-modal__body { padding: var(--space-4) var(--space-6) var(--space-6); color: var(--ink-soft); }
.cu-modal__body > p { margin: 0 0 12px; }
.cu-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--cu-hair); }
.cu-modal-root.is-entering .cu-modal__scrim { animation: cu-fade 280ms ease backwards; }
.cu-modal-root.is-entering .cu-modal { animation: cu-lift 420ms var(--cu-house) backwards; }
@keyframes cu-lift { from { opacity: 0; transform: translateY(28px); } }
.cu-modal-root.is-leaving .cu-modal__scrim { opacity: 0; transition: opacity 240ms ease; }
.cu-modal-root.is-leaving .cu-modal { opacity: 0; transform: translateY(16px); transition: opacity 220ms var(--cu-exit), transform 240ms var(--cu-exit); }
/* the sheet: from the floor, full width, on phones every modal becomes one */
.cu-modal-root.is-sheet { place-items: end center; padding: 0; }
.cu-modal-root.is-sheet .cu-modal { width: min(640px, 100%); max-height: 88vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cu-modal-root.is-sheet.is-entering .cu-modal { animation: cu-floor 460ms var(--cu-house) backwards; }
@keyframes cu-floor { from { transform: translateY(100%); } }
.cu-modal-root.is-sheet.is-leaving .cu-modal { transform: translateY(100%); opacity: 1; transition: transform 300ms var(--cu-exit); }
@media (max-width: 560px) {
  .cu-modal-root:not(.is-inline) { place-items: end center; padding: 0; }
  .cu-modal-root:not(.is-inline) .cu-modal { width: 100%; max-height: 90vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .cu-modal-root.is-entering:not(.is-inline) .cu-modal { animation: cu-floor 460ms var(--cu-house) backwards; }
  .cu-modal-root.is-leaving:not(.is-inline) .cu-modal { transform: translateY(100%); opacity: 1; }
  .cu-modal__foot .cu-btn { flex: 1; }
}

/* ================================================================ Spotlight */
.cu-spotlit { position: relative; isolation: isolate; overflow: clip; overflow-clip-margin: 32px; }
.cu-spotlit > :not(.cu-spot) { position: relative; z-index: 1; }
.cu-spot {
  position: absolute; left: 0; top: 0; z-index: 0; width: 100px; height: 100px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--cu-spot-core), var(--cu-spot-mid) 62%, transparent 100%);
  opacity: 0; transform-origin: 50% 50%;
  transition: transform var(--cu-t-slide) var(--cu-house), opacity 300ms ease;
}
.cu-spot::after { content: ""; position: absolute; inset: 3%; border-radius: 50%; box-shadow: 0 0 0 .3px var(--cu-hair-gilt); opacity: .5; }
.cu-spot.is-on { opacity: 1; }
.cu-spot.is-jump { transition: none; }

/* ================================================================ CurtainReveal + pelmet */
.cu-reveal { position: relative; overflow: hidden; isolation: isolate; }
.cu-reveal__stage { position: relative; z-index: 0; }
.cu-reveal__drapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cu-drape {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background-color: var(--velvet);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 22%, transparent 78%, rgba(0, 0, 0, .3)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .05) 14px, rgba(255, 255, 255, .07) 24px, rgba(0, 0, 0, .1) 34px, rgba(0, 0, 0, .34) 44px);
  transform: translateX(-102%);
  animation: cu-part-l var(--cu-t-curtain) var(--cu-curtain) backwards;
  animation-delay: var(--cu-delay, 250ms);
}
.cu-drape--l { left: 0; box-shadow: inset -2px 0 0 var(--cu-hair-gilt); }
.cu-drape--r { right: 0; transform: translateX(102%); animation-name: cu-part-r; box-shadow: inset 2px 0 0 var(--cu-hair-gilt); }
@keyframes cu-part-l { from { transform: translateX(0); } }
@keyframes cu-part-r { from { transform: translateX(0); } }
.cu-pelmet {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 34px; pointer-events: none;
  background-color: var(--velvet-deep);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .25) 0, transparent 10px, rgba(255, 255, 255, .05) 18px, transparent 26px, rgba(0, 0, 0, .25) 40px);
  -webkit-mask: linear-gradient(#000, #000) top / 100% 22px no-repeat, radial-gradient(circle 12px at 20px 0, #000 11.5px, transparent 12px) 0 22px / 40px 12px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% 22px no-repeat, radial-gradient(circle 12px at 20px 0, #000 11.5px, transparent 12px) 0 22px / 40px 12px repeat-x;
}
.cu-pelmet__braid { position: absolute; left: 0; right: 0; top: 17px; height: 2px; background: var(--gilt); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .cu-reveal__drapes { display: none; } }


/* ================================================================ Mark */
.cu-mark { display: block; width: 40px; height: 40px; flex: none; overflow: visible; }
.cu-mark__arch { fill: none; stroke: var(--gilt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cu-mark__drape { fill: var(--velvet); }
.cu-mark__fold { fill: none; stroke: var(--velvet-deep); stroke-width: 2; stroke-linecap: round; }
.cu-mark__spot { fill: var(--gilt); }

/* ================================================================ SiteHeader */
.cu-hdr { position: relative; z-index: 50; background: var(--house); box-shadow: 0 1px 0 var(--cu-hair-gilt); }
.cu-hdr--sticky { position: sticky; top: 0; }
.cu-hdr__in { display: flex; align-items: center; gap: 24px; max-width: 1240px; height: 76px; margin: 0 auto; padding: 0 24px; }
.cu-hdr__brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
.cu-hdr__mark { width: 42px; height: 42px; }
.cu-hdr__names { display: flex; flex-direction: column; min-width: 0; }
.cu-hdr__name { font: 600 21px/24px var(--font-display); font-variation-settings: "opsz" 28; white-space: nowrap; }
.cu-hdr__tag { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gilt-ink); white-space: nowrap; }
.cu-hdr__nav { margin-left: auto; }
.cu-hdr__nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cu-hdr__link {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 12px;
  color: var(--ink); text-decoration: none; font: 600 13.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.cu-hdr__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1.5px; background: var(--gilt); transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--cu-t-slide) var(--cu-house); }
.cu-hdr__link:hover::after, .cu-hdr__link[aria-current="page"]::after { transform: scaleX(1); }
.cu-hdr__link[aria-current="page"] { color: var(--gilt-ink); }
.cu-hdr__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.cu-hdr__phone { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; margin-right: 4px; white-space: nowrap; }
.cu-hdr__phone:hover { color: var(--ink); }
.cu-hdr__phone .cu-icon { width: 17px; height: 17px; color: var(--gilt-ink); }
.cu-hdr__cta { margin-bottom: 4px; }
.cu-hdr__burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.cu-hdr__burger:hover { background: var(--stage); }
.cu-hdr__burger-lines { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cu-hdr__burger-lines i { display: block; width: 20px; height: 1.6px; background: currentColor; border-radius: 1px; }
.cu-hdr__burger-lines i:last-child { width: 13px; margin-left: -7px; }
@media (max-width: 1180px) { .cu-hdr__phone { display: none; } }
@media (max-width: 960px) {
  .cu-hdr__nav { display: none; }
  .cu-hdr__burger { display: grid; place-items: center; }
  .cu-hdr__actions { margin-left: auto; gap: 4px; }
}
@media (max-width: 520px) {
  .cu-hdr__in { height: 64px; padding: 0 12px 0 16px; gap: 10px; }
  .cu-hdr__cta { display: none; }
  .cu-hdr__mark { width: 34px; height: 34px; }
  .cu-hdr__name { font-size: 18px; line-height: 22px; }
  .cu-hdr__tag { display: none; }
}

/* the fly-drop menu: a velvet backcloth lowered from above */
.cu-fly { position: fixed; inset: 0; z-index: 700; }
.cu-fly__scrim { position: absolute; inset: 0; background: var(--cu-scrim); }
.cu-fly__cloth {
  position: relative; display: flex; flex-direction: column; gap: 18px; max-height: 100vh; overflow: auto;
  padding: 18px 20px 42px; color: var(--on-velvet);
  background-color: var(--velvet-deep);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0, transparent 12px, rgba(255, 255, 255, .05) 22px, transparent 32px, rgba(0, 0, 0, .22) 46px);
  box-shadow: var(--shadow-house);
}
.cu-fly.is-entering .cu-fly__cloth { animation: cu-flyin 560ms var(--cu-curtain) backwards; }
.cu-fly.is-entering .cu-fly__scrim { animation: cu-fade 300ms ease backwards; }
.cu-fly.is-entering .cu-fly__links li { animation: cu-rise 420ms var(--cu-house) backwards; animation-delay: calc(240ms + var(--i) * 50ms); }
@keyframes cu-flyin { from { transform: translateY(-100%); } }
.cu-fly.is-leaving .cu-fly__cloth { transform: translateY(-100%); transition: transform 400ms var(--cu-curtain); }
.cu-fly.is-leaving .cu-fly__scrim { opacity: 0; transition: opacity 300ms ease; }
.cu-fly__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.cu-fly__top .cu-overline { color: #ecd08f; }
.cu-fly__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 243, 223, .1); color: var(--on-velvet); cursor: pointer; }
.cu-fly__close:hover { background: rgba(255, 243, 223, .18); }
.cu-fly__links { margin: 0; padding: 0; list-style: none; }
.cu-fly__links li { border-bottom: 1px solid rgba(236, 208, 143, .25); }
.cu-fly__link { display: flex; align-items: center; justify-content: space-between; min-height: 58px; color: var(--on-velvet); text-decoration: none; font: italic 500 28px/34px var(--font-display); font-variation-settings: "opsz" 36; }
.cu-fly__link .cu-icon { color: #ecd08f; transition: transform var(--cu-t-slide) var(--cu-house); }
.cu-fly__link:hover .cu-icon { transform: translateX(4px); }
.cu-fly__link[aria-current="page"] { color: #ecd08f; }
.cu-fly__link:focus-visible, .cu-fly__close:focus-visible, .cu-fly__note a:focus-visible { outline-color: #ecd08f; }
.cu-fly__note { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--on-velvet); }
.cu-fly__note .cu-link { color: var(--on-velvet); }
.cu-fly__note .cu-icon { color: #ecd08f; }
.cu-fly__hem {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--gilt);
  -webkit-mask: linear-gradient(#000, #000) top / 100% 3px no-repeat, repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px) 0 4px / 100% 8px no-repeat;
  mask: linear-gradient(#000, #000) top / 100% 3px no-repeat, repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px) 0 4px / 100% 8px no-repeat;
}

/* ================================================================ SiteFooter */
.cu-ftr { background: var(--stage-sunk); color: var(--ink); box-shadow: inset 0 1px 0 var(--cu-hair-gilt); }
.cu-ftr__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.1fr); gap: 40px; max-width: 1240px; margin: 0 auto; padding: 56px 24px 40px; }
.cu-ftr__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cu-ftr__mark { width: 40px; height: 40px; }
.cu-ftr__name { font: 600 22px/26px var(--font-display); }
.cu-ftr__addr { display: flex; flex-direction: column; font-style: normal; color: var(--ink-soft); font-size: 15px; line-height: 23px; margin-bottom: 12px; }
.cu-ftr__hours { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 14.5px; line-height: 21px; color: var(--ink-soft); }
.cu-ftr__hours .cu-icon { width: 17px; height: 17px; margin-top: 2px; color: var(--gilt-ink); }
.cu-ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cu-ftr__h { margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-ink); }
.cu-ftr__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cu-ftr__link { display: inline-block; padding: 3px 0; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 22px; }
.cu-ftr__link:hover { text-decoration: underline; text-decoration-color: var(--gilt); text-underline-offset: 3px; }
.cu-ftr__form { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cu-ftr__form .cu-field { width: 100%; }
.cu-ftr__rule { max-width: 1192px; margin: 0 auto; padding: 0 24px; }
.cu-ftr__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1240px; margin: 0 auto; padding: 18px 24px 28px; font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.cu-ftr__social { display: flex; gap: 4px; }
.cu-ftr__soc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft); }
.cu-ftr__soc:hover { color: var(--ink); background: var(--stage); }
@media (max-width: 900px) { .cu-ftr__in { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; } }
@media (max-width: 520px) { .cu-ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cu-ftr__in { padding: 36px 16px 28px; } .cu-ftr__base { padding: 16px 16px 24px; } .cu-ftr__rule { padding: 0 16px; } }


/* ================================================================ Poster */
.cu-poster { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--pbg); color: var(--pfg); }
.cu-poster__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cu-poster__kicker { position: absolute; left: 0; right: 0; top: 0; padding: 11px 10px 9px; background: var(--pbg); box-shadow: 0 1px 0 color-mix(in srgb, var(--pfg) 35%, transparent); text-align: center; font: 600 10.5px/14px var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--pfg); }
.cu-poster__title { position: absolute; left: 14px; right: 14px; bottom: 16px; text-align: center; font: italic 500 30px/32px var(--font-display); color: var(--pfg); font-variation-settings: "opsz" 48; }

/* ================================================================ ShowCard */
.cu-show {
  position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; min-width: 0;
  border-radius: var(--radius-md); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair), var(--shadow-card);
  transition: transform var(--cu-t-slide) var(--cu-house), box-shadow var(--cu-t-slide) var(--cu-house);
}
.cu-show::after { content: ""; position: absolute; inset: 0 -4px -8px 0; z-index: -1; }
.cu-show:hover, .cu-show:focus-within { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-lift); }
.cu-show__poster { position: relative; margin: 8px 8px 0; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--cu-hair-gilt); }
.cu-show__poster .cu-poster { aspect-ratio: 16 / 13; }
@media (max-width: 640px) { .cu-show__poster .cu-poster { aspect-ratio: 16 / 10; } }
.cu-show__status { position: absolute; left: 10px; bottom: 10px; }
.cu-show__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 0; flex: 1; }
.cu-show__title { margin: 0; font: italic 500 26px/30px var(--font-display); font-variation-settings: "opsz" 36; }
.cu-show__link { color: inherit; text-decoration: none; }
.cu-show__link::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-md); }
.cu-show__link:focus-visible { outline: none; }
.cu-show__link:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 3px; }
.cu-show__dates { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.cu-show__dates .cu-icon { width: 16px; height: 16px; color: var(--gilt-ink); }
.cu-show__blurb { margin: 2px 0 0; font-size: 14.5px; line-height: 21px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.cu-show__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cu-show__foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 18px 16px; border-top: 1px dashed var(--cu-hair-gilt); }
.cu-show__price { display: flex; align-items: baseline; gap: 6px; }
.cu-show__from { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cu-show__price .cu-numeral { font-size: 24px; line-height: 28px; color: var(--gilt-ink); }
.cu-show .cu-btn { position: relative; z-index: 1; }

/* ================================================================ ShowHero: the proscenium */
.cu-hero {
  position: relative; isolation: isolate; padding: 18px 46px 0;
  background-color: var(--velvet-deep);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0, transparent 9px, rgba(255, 255, 255, .05) 17px, transparent 25px, rgba(0, 0, 0, .28) 36px);
  border-radius: var(--radius-arch) var(--radius-arch) 0 0;
}
.cu-hero::before { content: ""; position: absolute; inset: 8px 8px 0; border: 1.5px solid var(--gilt); border-bottom: 0; border-radius: calc(var(--radius-arch) - 8px) calc(var(--radius-arch) - 8px) 0 0; pointer-events: none; z-index: 2; }
.cu-hero__leg { position: absolute; top: 60px; bottom: 0; width: 46px; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent); pointer-events: none; }
.cu-hero__leg--l { left: 0; }
.cu-hero__leg--r { right: 0; transform: scaleX(-1); }
.cu-hero__arch { position: relative; border-radius: calc(var(--radius-arch) - 18px) calc(var(--radius-arch) - 18px) 0 0; overflow: hidden; box-shadow: 0 0 0 1.5px var(--gilt); }
.cu-hero__scene {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 32px;
  min-height: 560px; padding: 92px 64px 84px; color: var(--pfg); background: var(--pbg);
}
.cu-hero__scene::before { content: ""; position: absolute; left: 50%; top: -30%; width: 900px; height: 900px; margin-left: -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 196, .13), transparent); pointer-events: none; }
.cu-hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cu-hero__copy > * { animation: cu-rise 700ms var(--cu-house) backwards; animation-delay: calc(var(--cu-delay, 250ms) + 900ms); }
.cu-hero__copy > :nth-child(2) { animation-delay: calc(var(--cu-delay, 250ms) + 980ms); }
.cu-hero__copy > :nth-child(3) { animation-delay: calc(var(--cu-delay, 250ms) + 1060ms); }
.cu-hero__copy > :nth-child(4) { animation-delay: calc(var(--cu-delay, 250ms) + 1140ms); }
.cu-hero__copy > :nth-child(n+5) { animation-delay: calc(var(--cu-delay, 250ms) + 1220ms); }
.cu-hero__over { font: 600 12px/16px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--pfg); opacity: .92; }
.cu-hero__title { color: var(--pfg); }
.cu-hero__by { margin: 0; font: italic 400 21px/29px var(--font-display); color: var(--pfg); opacity: .92; }
.cu-hero__quote { margin: 4px 0 0; padding: 0; }
.cu-hero__quote p { margin: 4px 0 2px; font: italic 500 19px/26px var(--font-display); color: var(--pfg); }
.cu-hero__quote cite { font: 600 11.5px/16px var(--font-body); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--pfg); opacity: .85; }
.cu-hero__stars { color: var(--pac); letter-spacing: .2em; font-size: 15px; }
.cu-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--pfg); }
.cu-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.cu-hero__facts .cu-icon { width: 17px; height: 17px; color: var(--pac); }
.cu-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 10px; align-items: center; }
.cu-hero__actions .cu-btn--ghost { color: var(--pfg); }
.cu-hero__art { position: relative; z-index: 0; justify-self: center; width: min(360px, 100%); border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 236, 196, .3), 0 30px 60px -30px rgba(0, 0, 0, .8); transform: rotate(1.5deg); }
.cu-hero__foots { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 24px; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent); }
.cu-hero__foots i { width: 26px; height: 10px; border-radius: 13px 13px 0 0; background: radial-gradient(ellipse at 50% 100%, #fff1c9 0 30%, rgba(255, 220, 140, .5) 55%, transparent 72%); }
.cu-hero--compact .cu-hero__scene { min-height: 420px; padding: 76px 56px 64px; }
.cu-hero .cu-reveal.has-pelmet .cu-pelmet { top: 0; }
@media (max-width: 860px) {
  .cu-hero { padding: 12px 14px 0; border-radius: 140px 140px 0 0; }
  .cu-hero::before { inset: 5px 5px 0; border-radius: 135px 135px 0 0; }
  .cu-hero__leg { width: 14px; }
  .cu-hero__arch { border-radius: 128px 128px 0 0; }
  .cu-hero__scene { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 64px 22px 52px; text-align: left; }
  .cu-hero__art { order: -1; width: min(220px, 64%); justify-self: center; }
  .cu-hero--compact .cu-hero__scene { padding: 60px 22px 48px; }
  .cu-hero__by { font-size: 18px; line-height: 25px; }
  .cu-hero__actions .cu-btn--lg { min-height: 50px; padding: 0 20px; }
}

/* ================================================================ PerformanceDatePicker */
.cu-dp { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cu-dp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cu-dp__month { margin: 0; font: 600 26px/32px var(--font-display); font-variation-settings: "opsz" 36; text-align: center; flex: 1; }
.cu-dp__cal { display: flex; flex-direction: column; gap: 12px; }
.cu-dp__grid { display: flex; flex-direction: column; gap: 4px; }
.cu-dp__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cu-dp__wdc { text-align: center; font-size: 11.5px; line-height: 24px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cu-dp__cell { position: relative; min-height: 58px; display: flex; }
.cu-dp__cell.is-dark { align-items: flex-start; justify-content: center; padding-top: 9px; border-radius: var(--radius-sm); background: var(--stage-sunk); }
.cu-dp__cell.is-dark .cu-dp__num { color: var(--ink-soft); font-size: 15px; }
.cu-dp__day {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 8px 2px 6px;
  border: 0; border-radius: var(--radius-sm); background: var(--stage); color: var(--ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--cu-hair), 0 2px 0 var(--cu-hair);
  transition: transform 260ms var(--cu-fold), box-shadow var(--cu-t-hover) ease, background-color var(--cu-t-hover) ease;
}
.cu-dp__day:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gilt), 0 3px 0 var(--cu-hair-gilt); }
.cu-dp__day:active { transform: translateY(1px); transition-duration: var(--cu-t-press); }
.cu-dp__day.is-selected { background: var(--velvet); color: var(--on-velvet); box-shadow: inset 0 0 0 1px var(--gilt), 0 1px 0 var(--velvet-deep); transform: translateY(1px); }
.cu-dp__day.is-soldout .cu-dp__num { text-decoration: line-through; text-decoration-color: var(--alert); text-decoration-thickness: 1.5px; }
.cu-dp__num { font: 500 18px/20px var(--font-display); font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 24; }
.cu-dp__pips { display: flex; gap: 4px; height: 9px; }
.cu-dp__acc { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border: 1.5px solid var(--gilt); transform: rotate(45deg); }
.cu-dp__day.is-selected .cu-dp__acc { border-color: #ecd08f; }
/* pips: evening a full disc, matinee a half disc; availability by colour AND shape */
.cu-pip { position: relative; display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--ok); }
.cu-pip--evening { background: currentColor; }
.cu-pip--matinee { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.cu-pip.is-limited { color: var(--gilt); }
.cu-pip.is-soldout { color: var(--alert); background: transparent; }
.cu-pip.is-soldout::after { content: ""; position: absolute; left: -1px; right: -1px; top: 3.75px; height: 1.5px; background: currentColor; transform: rotate(-45deg); }
.cu-dp__day.is-selected .cu-pip.is-good { color: #b9f0c4; }
.cu-dp__day.is-selected .cu-pip.is-limited { color: #ecd08f; }
.cu-dp__day.is-selected .cu-pip.is-soldout { color: #ffc2b8; }
.cu-dp__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.cu-dp__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cu-dp__legend span:nth-child(2) { margin-right: 10px; }
.cu-dp__panel { min-height: 120px; }
.cu-dp__daywrap--in { animation: cu-rise 420ms var(--cu-house) backwards; }
.cu-dp__dayname { margin: 0 0 10px; font: italic 500 22px/28px var(--font-display); }
.cu-dp__perfs { display: flex; flex-direction: column; gap: 10px; }
.cu-dp__empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px; border-radius: var(--radius-md); border: 1px dashed var(--cu-hair-gilt); color: var(--ink-soft); }
.cu-perf {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 14px 44px 14px 16px;
  border: 0; border-radius: var(--radius-md); background: var(--stage); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--edge), 0 3px 0 var(--cu-hair);
  transition: transform 260ms var(--cu-fold), box-shadow var(--cu-t-hover) ease;
}
.cu-perf:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gilt), 0 4px 0 var(--cu-hair-gilt); }
.cu-perf:active { transform: translateY(2px); transition-duration: var(--cu-t-press); }
.cu-perf.is-on { box-shadow: inset 0 0 0 2px var(--gilt), 0 1px 0 var(--cu-hair-gilt); transform: translateY(2px); }
.cu-perf.is-sold { cursor: not-allowed; background: var(--stage-sunk); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-perf.is-sold:hover { transform: none; }
.cu-perf__time { font-size: 26px; line-height: 30px; color: var(--gilt-ink); }
.cu-perf__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cu-perf__kind { font-weight: 600; font-size: 15px; line-height: 20px; }
.cu-perf__avail { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; line-height: 18px; color: var(--ink-soft); }
.cu-perf__avail.is-soldout { color: var(--alert); }
.cu-perf__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cu-perf__from { text-align: right; white-space: nowrap; }
.cu-perf__from small { font-size: 12px; color: var(--ink-soft); }
.cu-perf__from .cu-numeral { font-size: 20px; }
.cu-perf__tick { position: absolute; right: 14px; top: 50%; margin-top: -10px; color: var(--gilt-ink); opacity: 0; transform: scale(.4); transition: transform var(--cu-t-fold) var(--cu-fold), opacity 120ms ease; stroke-width: 2.2; }
.cu-perf.is-on .cu-perf__tick { opacity: 1; transform: none; }
@media (max-width: 520px) {
  .cu-perf { grid-template-columns: 64px minmax(0, 1fr); padding-right: 40px; }
  .cu-perf__time { font-size: 22px; }
  .cu-perf__from { grid-column: 2; text-align: left; }
  .cu-dp__cell { min-height: 50px; }
  .cu-dp__num { font-size: 16px; }
}

/* ================================================================ SeatMap */
.cu-sm { --seat: 20px; --gap: 3px; --arc: 1px; position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cu-sm.is-zoned { --seat: 32px; --gap: 6px; --arc: 0px; }
.cu-sm__view { overflow-x: auto; overflow-y: hidden; padding: 20px 16px 22px; border-radius: var(--radius-md); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair), var(--shadow-card); scrollbar-width: thin; }
.cu-sm__plan { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: min-content; margin: 0 auto; }
.cu-sm__stage {
  position: relative; width: min(440px, 80%); height: 44px; margin-bottom: 14px; display: grid; place-items: center;
  border-radius: 0 0 50% 50% / 0 0 100% 100%; background: var(--velvet-deep); color: var(--on-velvet);
  box-shadow: inset 0 -1.5px 0 var(--gilt);
}
.cu-sm__stage span { font: 600 11px/1 var(--font-body); letter-spacing: .4em; text-transform: uppercase; padding-left: .4em; }
.cu-sm.is-zoned .cu-sm__stage { display: none; }
.cu-sm__sec { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cu-sm__sec + .cu-sm__sec { margin-top: 18px; }
.cu-sm__secname { width: 100%; min-width: 260px; margin: 0 0 6px; font: 600 11.5px/16px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-ink); }
.cu-sm__secword { flex: none; }
.cu-sm__row { display: flex; align-items: flex-start; gap: calc(var(--seat) - 2px); padding-bottom: calc(9 * var(--arc)); }
.cu-sm__rl { width: 18px; flex: none; text-align: center; font: 600 11.5px/var(--seat) var(--font-body); color: var(--ink-soft); }
.cu-sm__block { display: flex; align-items: flex-start; gap: var(--gap); }
/* the seat: a back with rounded top, and a cushion that folds down when chosen */
.cu-seat {
  position: relative; flex: none; width: var(--seat); height: var(--seat); margin-top: calc(var(--o, 0) * var(--arc)); padding: 0;
  border: 0; background: transparent; cursor: pointer; color: var(--band-a); -webkit-tap-highlight-color: transparent;
}
.cu-seat--b { color: var(--band-b); }
.cu-seat--c { color: var(--band-c); }
.cu-seat__back {
  position: absolute; left: 1px; right: 1px; top: 0; height: 68%; display: grid; place-items: center;
  border-radius: var(--radius-seat) var(--radius-seat) 2px 2px; background: currentColor;
  transition: transform var(--cu-t-press) var(--cu-press), background-color var(--cu-t-hover) ease;
}
.cu-seat__base {
  position: absolute; left: 0; right: 0; top: 70%; height: 30%; border-radius: 1px 1px 3px 3px;
  background: currentColor; opacity: .62; transform-origin: 50% 0; transform: scaleY(.34);
  transition: transform var(--cu-t-fold) var(--cu-fold), opacity var(--cu-t-hover) ease, background-color var(--cu-t-hover) ease;
}
.cu-seat__tick { position: absolute; left: 50%; top: 34%; width: 70%; height: 70%; margin: -35% 0 0 -35%; color: var(--house); stroke-width: 3; opacity: 0; transform: scale(.4); transition: transform var(--cu-t-fold) var(--cu-fold), opacity 120ms ease; }
.cu-seat:hover .cu-seat__back { transform: translateY(-1px); }
.cu-seat:active .cu-seat__back { transform: translateY(1px); transition-duration: 60ms; }
.cu-seat[aria-pressed="true"], .cu-legend__seat.is-chosen { color: var(--gilt); }
.cu-seat[aria-pressed="true"] .cu-seat__base, .cu-legend__seat.is-chosen .cu-seat__base { transform: scaleY(1); opacity: 1; }
.cu-seat[aria-pressed="true"] .cu-seat__tick { opacity: 1; transform: none; }
[data-theme="light"] .cu-seat__tick { color: #fffaf1; }
.cu-seat:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* restricted view: a notch cut from the top of the back */
.cu-seat--restricted .cu-seat__back { -webkit-mask: radial-gradient(circle 3.5px at 50% 0, transparent 3px, #000 3.5px); mask: radial-gradient(circle 3.5px at 50% 0, transparent 3px, #000 3.5px); }
/* wheelchair space: square, outlined, glyph in the band colour */
.cu-seat--access .cu-seat__back { top: 0; height: 100%; border-radius: 3px; background: var(--stage); box-shadow: inset 0 0 0 1.5px currentColor; }
.cu-seat--access .cu-seat__base { display: none; }
.cu-seat__glyph { width: 80%; height: 80%; color: inherit; stroke-width: 2; }
.cu-seat--access[aria-pressed="true"] .cu-seat__back { background: var(--gilt); }
.cu-seat--access[aria-pressed="true"] .cu-seat__glyph { color: var(--house); }
.cu-seat--access[aria-pressed="true"] .cu-seat__tick { display: none; }
/* unavailable: a dim folded seat, out of the tab order */
.cu-seat.is-taken, .cu-legend__seat.is-taken { color: var(--stage-sunk); cursor: default; }
.cu-seat.is-taken .cu-seat__back { transform: scale(.78); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-seat.is-taken .cu-seat__base { opacity: .5; }
.cu-seat.is-taken:hover .cu-seat__back { transform: scale(.78); }
.cu-seat--access.is-taken .cu-seat__back { background: var(--stage-sunk); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-seat--access.is-taken .cu-seat__glyph { color: var(--ink-soft); opacity: .5; }
.cu-sm__tip {
  position: absolute; left: 0; top: 0; z-index: 5; display: flex; flex-direction: column; padding: 7px 11px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--house); font-size: 12.5px; line-height: 17px; pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity 140ms ease;
}
.cu-sm__tip strong { font: italic 600 14.5px/19px var(--font-display); }
.cu-sm__tip.is-on { opacity: 1; }
.cu-sm__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--stage-sunk); box-shadow: var(--shadow-inset); }
.cu-sm__count { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 600; }
.cu-sm__count .cu-numeral { font-size: 22px; line-height: 26px; color: var(--gilt-ink); }
.cu-sm__dot { width: 4px; height: 4px; margin: 0 8px; border-radius: 50%; background: var(--gilt); align-self: center; }
.cu-sm__msg { font-size: 14px; color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cu-sm__msg.is-warn { color: var(--alert); }
/* zone-first flow for phones */
.cu-sm__zones { display: none; flex-direction: column; gap: 6px; }
.cu-sm.is-zoned .cu-sm__zones { display: flex; }
.cu-sm__zstage { align-self: center; width: 60%; padding: 4px 0 6px; text-align: center; font: 600 10px/1 var(--font-body); letter-spacing: .36em; text-transform: uppercase; color: var(--on-velvet); background: var(--velvet-deep); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.cu-sm__zsec { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.cu-sm__zsecname { font-size: 10.5px; line-height: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gilt-ink); }
.cu-sm__zrow { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr 1fr; gap: 5px; }
.cu-sm__zone {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px; padding: 7px 8px; min-width: 0;
  border: 0; border-radius: var(--radius-sm); background: var(--stage); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--edge), 0 2px 0 var(--cu-hair);
  transition: transform 260ms var(--cu-fold), box-shadow var(--cu-t-hover) ease, background-color var(--cu-t-hover) ease;
}
.cu-sm__zone:active { transform: translateY(2px); }
.cu-sm__zone[aria-pressed="true"] { background: var(--velvet); color: var(--on-velvet); box-shadow: inset 0 0 0 1px var(--gilt), 0 1px 0 var(--velvet-deep); transform: translateY(1px); }
.cu-sm__zname { font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cu-sm__zfree { font-size: 11.5px; line-height: 15px; opacity: .85; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cu-sm.is-zoned .cu-sm__secname { min-width: 0; }
.cu-sm.is-zoned .cu-sm__row { gap: 8px; }

/* ================================================================ PriceBandLegend */
.cu-legend { display: flex; flex-direction: column; gap: 12px; }
.cu-legend ul { margin: 0; padding: 0; list-style: none; }
.cu-legend__bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.cu-legend__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-legend__seat { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; color: var(--band-a); }
.cu-legend__seat.cu-seat--b { color: var(--band-b); }
.cu-legend__seat.cu-seat--c { color: var(--band-c); }
.cu-legend__seat.is-chosen { color: var(--gilt); }
.cu-legend__seat.is-taken .cu-seat__back { transform: scale(.78); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-legend__seat.is-taken { color: var(--house-pattern); }
.cu-legend__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cu-legend__name { font-weight: 600; font-size: 14.5px; line-height: 19px; }
.cu-legend__note { font-size: 12.5px; line-height: 17px; color: var(--ink-soft); }
.cu-legend__price { font-size: 22px; line-height: 26px; color: var(--gilt-ink); }
.cu-legend__keys { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; line-height: 20px; color: var(--ink-soft); }
.cu-legend__keys li { display: inline-flex; align-items: center; gap: 8px; }
.cu-legend--compact .cu-legend__bands { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.cu-legend--compact .cu-legend__item { padding: 8px 10px; }

/* ================================================================ TicketStub */
.cu-stub {
  --px: calc(100% - 118px);
  position: relative; display: flex; align-items: stretch; min-width: 0; border-radius: var(--radius-sm);
  background: var(--stage); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--cu-hair-gilt);
  -webkit-mask: radial-gradient(circle 9px at var(--px) 0, transparent 8.5px, #000 9px) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--px) 100%, transparent 8.5px, #000 9px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 9px at var(--px) 0, transparent 8.5px, #000 9px) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--px) 100%, transparent 8.5px, #000 9px) bottom / 100% 51% no-repeat;
}
.cu-stub__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 18px 20px; }
.cu-stub__venue { font: 600 11px/15px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-ink); }
.cu-stub__show { font: italic 500 30px/34px var(--font-display); font-variation-settings: "opsz" 48; }
.cu-stub__when { font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.cu-stub__seat { margin-top: 6px; font: 600 13px/18px var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.cu-stub__door { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-soft); }
.cu-stub__door .cu-icon { width: 16px; height: 16px; color: var(--gilt-ink); }
.cu-stub__codewrap { display: block; margin-top: 12px; }
.cu-stub__code { display: block; width: 180px; height: 34px; fill: var(--ink); }
.cu-stub__perf { width: 0; border-left: 2px dashed var(--cu-hair-gilt); margin: 12px 0; }
.cu-stub__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 118px; flex: none; padding: 14px 10px; text-align: center;
  transition: transform 520ms var(--cu-exit), opacity 520ms var(--cu-exit);
}
.cu-stub__price { font-size: 30px; line-height: 32px; color: var(--gilt-ink); }
.cu-stub__band { font: 600 11px/14px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.cu-stub__ref { max-width: 100%; overflow-wrap: anywhere; font: 600 10.5px/14px var(--font-body); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.cu-stub__tear { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--gilt-ink); font: 600 11px/14px var(--font-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 0 0 1px var(--cu-hair-gilt); }
.cu-stub__tear .cu-icon { width: 15px; height: 15px; }
.cu-stub__tear:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gilt); }
.cu-stub__tear:disabled { color: var(--ink-soft); cursor: default; }
.cu-stub.is-torn .cu-stub__tab { transform: translateX(14px); }
.cu-stub.is-torn .cu-stub__perf { border-left-style: solid; opacity: .5; }
.cu-stub__rm { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; }
.cu-stub__rm:hover { color: var(--alert); background: var(--stage-sunk); }
.cu-stub__rm .cu-icon { width: 15px; height: 15px; }
.cu-stub--compact { --px: calc(100% - 92px); }
.cu-stub--compact .cu-stub__main { padding: 10px 14px; gap: 1px; }
.cu-stub--compact .cu-stub__venue { display: none; }
.cu-stub--compact .cu-stub__show { font-size: 19px; line-height: 23px; }
.cu-stub--compact .cu-stub__when { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.cu-stub--compact .cu-stub__seat { margin-top: 2px; font-size: 11.5px; line-height: 16px; }
.cu-stub--compact .cu-stub__perf { margin: 8px 0; }
.cu-stub--compact .cu-stub__tab { width: 92px; padding: 18px 8px 10px; gap: 2px; }
.cu-stub--compact .cu-stub__price { font-size: 22px; line-height: 26px; }
.cu-stub--compact .cu-stub__band { font-size: 10px; }
.cu-stub--compact .cu-stub__rm { top: 2px; right: 2px; width: 28px; height: 28px; }
.cu-stub.is-new { animation: cu-slot 460ms var(--cu-house) backwards; }
@keyframes cu-slot { from { opacity: 0; transform: translateY(-14px); } }
.cu-stub.is-leaving { opacity: 0; transform: translateX(18px); transition: opacity 200ms var(--cu-exit), transform 220ms var(--cu-exit); }
@media (max-width: 480px) {
  .cu-stub:not(.cu-stub--compact) { --px: calc(100% - 96px); }
  .cu-stub:not(.cu-stub--compact) .cu-stub__tab { width: 96px; }
  .cu-stub__show { font-size: 24px; line-height: 28px; }
  .cu-stub__code { width: 140px; }
  .cu-stub__main { padding: 16px; }
}

/* ================================================================ BasketSummary */
.cu-basket .cu-card__head { align-items: center; }
.cu-basket__hold { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-full); background: var(--stage-sunk); box-shadow: var(--shadow-inset); font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.cu-basket__hold .cu-icon { width: 16px; height: 16px; color: var(--gilt-ink); }
.cu-basket__clock { display: inline-block; width: 5ch; font-size: 17px; line-height: 20px; color: var(--ink); text-align: right; }
.cu-basket__hold.is-low, .cu-basket__hold.is-low .cu-basket__clock, .cu-basket__hold.is-low .cu-icon { color: var(--alert); }
.cu-basket__stubs { display: flex; flex-direction: column; gap: 8px; }
.cu-basket__empty { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px; border-radius: var(--radius-sm); border: 1px dashed var(--cu-hair-gilt); color: var(--ink-soft); font-size: 14.5px; line-height: 21px; }
.cu-basket__empty .cu-icon { width: 28px; height: 28px; color: var(--gilt-ink); }
.cu-basket__lines { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; }
.cu-basket__line { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; line-height: 20px; }
.cu-basket__line dt { color: var(--ink-soft); }
.cu-basket__line dd { margin: 0; font-size: 17px; }
.cu-basket__line.is-saving dd { color: var(--ok); }
.cu-basket__lead { flex: 1; border-bottom: 1.5px dotted var(--cu-hair-gilt); transform: translateY(-4px); }
.cu-basket__sum { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cu-hair-gilt); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.cu-basket__total { font-size: 34px; line-height: 38px; letter-spacing: 0; text-transform: none; color: var(--gilt-ink); }
.cu-basket__note { display: flex; gap: 8px; margin: 12px 0 0; font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }
.cu-basket__note .cu-icon { width: 17px; height: 17px; margin-top: 1px; color: var(--gilt-ink); }
.cu-basket .cu-card__foot { border-top: 0; padding-top: 0; }

/* ================================================================ TicketWallet */
.cu-wallet { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-md); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair), var(--shadow-card); min-width: 0; }
.cu-wallet__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cu-wallet__title { margin: 2px 0 0; font: italic 500 26px/30px var(--font-display); }
.cu-wallet__tally { display: flex; flex-direction: column; align-items: flex-end; }
.cu-wallet__count { font-size: 34px; line-height: 36px; color: var(--gilt-ink); }
.cu-wallet__sub { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cu-wallet__body { position: relative; height: 230px; }
.cu-wallet__stubs { position: absolute; left: 18px; right: 18px; top: 8px; bottom: 50px; }
.cu-wallet__stub {
  position: absolute; left: 0; right: 0; bottom: calc(var(--k) * 30px + 26px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; padding: 10px 14px 34px;
  border-radius: var(--radius-sm); background: var(--house); color: var(--ink); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), 0 -6px 14px -10px rgba(0, 0, 0, .6);
  transform: translateX(calc(var(--k) * 4px)) rotate(calc(var(--k) * -1deg));
}
[data-theme="light"] .cu-wallet__stub { background: #fffaf1; }
.cu-wallet__stub:nth-child(1) { z-index: 1; } .cu-wallet__stub:nth-child(2) { z-index: 2; } .cu-wallet__stub:nth-child(3) { z-index: 3; } .cu-wallet__stub:nth-child(4) { z-index: 4; }
.cu-wallet__stub.is-new { animation: cu-pocket 620ms var(--cu-house) backwards; }
@keyframes cu-pocket { from { opacity: 0; transform: translateY(-46px) translateX(calc(var(--k) * 4px)) rotate(calc(var(--k) * -1deg)); } }
.cu-wallet__show { font: italic 500 17px/22px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-wallet__seat { grid-column: 1; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-wallet__when { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 20px; color: var(--gilt-ink); }
.cu-wallet__more { position: absolute; right: 0; top: -22px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.cu-wallet__pocket {
  position: absolute; left: 0; right: 0; bottom: 0; height: 88px; z-index: 6; border-radius: 10px 10px var(--radius-md) var(--radius-md);
  background-color: var(--velvet);
  background-image: radial-gradient(120% 90% at 50% 0%, var(--cu-sheen), transparent 60%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), 0 -10px 18px -12px rgba(0, 0, 0, .7);
}
.cu-wallet__stitch { position: absolute; inset: 8px; border: 1.5px dashed rgba(236, 208, 143, .6); border-radius: 6px 6px 8px 8px; }
.cu-wallet__clasp { position: absolute; left: 50%; top: -8px; width: 40px; height: 22px; margin-left: -20px; border-radius: 0 0 20px 20px; background: var(--velvet-deep); box-shadow: inset 0 0 0 1px var(--gilt); }
.cu-wallet__clasp::after { content: ""; position: absolute; left: 50%; top: 8px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gilt); }
.cu-wallet.is-empty .cu-wallet__stubs::before { content: "Kept stubs land here"; position: absolute; left: 0; right: 0; top: 54px; text-align: center; font: italic 400 17px/24px var(--font-display); color: var(--ink-soft); }
.cu-wallet__foot { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================================================================ CastList */
.cu-cast__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 4px; list-style: none; }
.cu-cast__grid--crew { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cu-cast__grid > li { display: flex; }
.cu-cast__tile {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px 16px; min-width: 0;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); text-align: center; font: inherit; cursor: pointer;
  transition: transform var(--cu-t-slide) var(--cu-house);
}
div.cu-cast__tile { cursor: default; }
.cu-cast__tile .cu-avatar { margin-bottom: 10px; transition: transform var(--cu-t-slide) var(--cu-house); }
.cu-cast__tile:hover .cu-avatar, .cu-cast__tile.is-spot .cu-avatar { transform: translateY(-3px); }
.cu-cast__tile:focus-visible { outline-offset: -2px; }
.cu-cast__role { font: italic 500 18px/23px var(--font-display); color: var(--gilt-ink); font-variation-settings: "opsz" 24; }
.cu-cast__name { font-weight: 600; font-size: 14.5px; line-height: 20px; }
.cu-cast__note { font-size: 12.5px; line-height: 17px; color: var(--ink-soft); }
.cu-cast__grid--crew .cu-cast__role { font-family: var(--font-body); font-style: normal; font-size: 11.5px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cu-cast__grid--crew .cu-cast__name { font: 500 18px/24px var(--font-display); }
@media (max-width: 520px) { .cu-cast__grid, .cu-cast__grid--crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }

/* ================================================================ ProgrammeViewer */
.cu-prog { display: flex; flex-direction: column; gap: 16px; min-width: 0; outline: none; }
.cu-prog:focus-visible .cu-prog__book { outline: 2px solid var(--focus); outline-offset: 6px; }
.cu-prog__book { position: relative; display: flex; height: 520px; perspective: 2200px; touch-action: pan-y; user-select: none; }
.cu-prog__book.is-spread { height: 540px; }
.cu-prog__half { position: relative; flex: 1; min-width: 0; }
.cu-prog__spine { display: none; }
.cu-prog__book.is-spread .cu-prog__spine { display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 28px; margin-left: -14px; z-index: 6; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .22) 55%, transparent); }
.cu-page {
  position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--stage); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-card);
  border-radius: 4px;
}
.cu-page--l { border-radius: 6px 2px 2px 6px; }
.cu-page--r { border-radius: 2px 6px 6px 2px; }
[data-theme="light"] .cu-page { background: #fffdf7; }
.cu-page::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--cu-hair-gilt); pointer-events: none; }
.cu-page__in { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 40px 38px 44px; height: 100%; }
.cu-page__kicker { font: 600 11px/15px var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--gilt-ink); }
.cu-page__title { margin: 0; font: italic 500 30px/34px var(--font-display); font-variation-settings: "opsz" 48; }
.cu-page__body { font-size: 15px; line-height: 23px; color: var(--ink); }
.cu-page__body p { margin: 0 0 10px; }
.cu-page__body .cu-drop::first-letter { float: left; margin: 4px 8px 0 0; font: 500 52px/42px var(--font-display); color: var(--velvet); }
[data-theme="dark"] .cu-page__body .cu-drop::first-letter, :root:not([data-theme]) .cu-page__body .cu-drop::first-letter { color: var(--gilt-ink); }
.cu-page__body blockquote { margin: 6px 0 10px; font: italic 400 19px/27px var(--font-display); color: var(--ink); }
.cu-page__body .cu-leaders { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.cu-page__body .cu-leaders li { display: flex; align-items: baseline; gap: 6px; font-size: 14.5px; line-height: 21px; }
.cu-page__body .cu-leaders i { font-family: var(--font-display); font-size: 16px; }
.cu-page__body .cu-leaders span { flex: 1; border-bottom: 1.5px dotted var(--cu-hair-gilt); transform: translateY(-4px); }
.cu-page__body .cu-leaders b { font-weight: 600; }
.cu-page__folio { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 14px; color: var(--ink-soft); }
.cu-page--cover { padding: 0; }
.cu-page--cover::before { z-index: 2; border-color: rgba(255, 236, 196, .45); }
.cu-page__poster { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.cu-page__coverwords { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 70px !important; padding-bottom: 36px !important; background: linear-gradient(180deg, transparent, var(--pbg) 55%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 28px; text-align: center; color: var(--pfg, #f4e6c8); }
.cu-page--cover .cu-page__kicker { position: absolute; top: 12px; left: 12px; right: 12px; padding: 18px 0 12px; text-align: center; z-index: 1; color: var(--pfg, #f4e6c8); background: var(--pbg); }
.cu-page__covertitle { font: italic 500 46px/48px var(--font-display); font-variation-settings: "opsz" 72; }
.cu-page__coversub { font: 600 11px/15px var(--font-body); letter-spacing: .22em; text-transform: uppercase; }
.cu-page.cu-page--end { background-color: var(--velvet-deep); background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0, transparent 10px, rgba(255, 255, 255, .04) 20px, transparent 30px, rgba(0, 0, 0, .22) 42px); display: grid; place-items: center; }
.cu-page--end::before { border-color: rgba(236, 208, 143, .35); }
.cu-page__endmark .cu-mark { width: 64px; height: 64px; opacity: .9; }
.cu-page--end .cu-mark__drape { fill: var(--velvet); }
.cu-prog__leaf { position: absolute; top: 0; bottom: 0; z-index: 8; transform-style: preserve-3d; }
.cu-prog__leaf.is-fwd { left: 50%; right: 0; transform-origin: 0 50%; transform: rotateY(-180deg); animation: cu-turn-fwd var(--cu-t-turn) var(--cu-house) backwards; }
.cu-prog__leaf.is-back { left: 0; right: 50%; transform-origin: 100% 50%; transform: rotateY(180deg); animation: cu-turn-back var(--cu-t-turn) var(--cu-house) backwards; }
.cu-prog__leaf.is-one-fwd { left: 0; right: 0; transform-origin: 0 50%; transform: rotateY(-92deg); opacity: 0; animation: cu-turn-away var(--cu-t-turn) var(--cu-house) backwards; }
.cu-prog__leaf.is-one-back { left: 0; right: 0; transform-origin: 0 50%; animation: cu-turn-in var(--cu-t-turn) var(--cu-house) backwards; }
.cu-prog__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cu-prog__face--back { transform: rotateY(180deg); }
@keyframes cu-turn-fwd { from { transform: rotateY(0); } }
@keyframes cu-turn-back { from { transform: rotateY(0); } }
@keyframes cu-turn-away { from { transform: rotateY(0); opacity: 1; } 85% { opacity: 1; } }
@keyframes cu-turn-in { from { transform: rotateY(-92deg); } }
.cu-prog__nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cu-prog__hint { min-width: 190px; text-align: center; }
.cu-prog__count { font-size: 17px; color: var(--ink-soft); }
@media (max-width: 520px) { .cu-prog__book { height: 480px; } .cu-page__in { padding: 34px 28px 40px; } .cu-page__title { font-size: 26px; line-height: 30px; } .cu-page__covertitle { font-size: 40px; line-height: 42px; } }

/* ================================================================ MembershipTier */
.cu-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; align-items: stretch; padding: 8px 0; }
.cu-tier {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px; padding: 28px 24px 24px; min-width: 0;
  border-radius: var(--radius-md); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair), var(--shadow-card);
  transition: transform var(--cu-t-slide) var(--cu-house), box-shadow var(--cu-t-slide) var(--cu-house);
}
.cu-tier::after { content: ""; position: absolute; inset: 0 -4px -8px 0; z-index: -1; }
.cu-tier:hover, .cu-tier.is-spot { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-lift); }
.cu-tier--featured { padding-top: 64px; border-radius: 200px 200px var(--radius-md) var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--gilt), var(--shadow-card); }
.cu-tier--featured:hover, .cu-tier--featured.is-spot { box-shadow: inset 0 0 0 1.5px var(--gilt), var(--shadow-lift); }
.cu-tier--featured .cu-tier__head { align-items: center; text-align: center; }
.cu-tier__ribbon { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: var(--radius-full); background: var(--velvet); color: var(--on-velvet); font: 600 11px/14px var(--font-body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--cu-hair-gilt); }
.cu-tier__head { display: flex; flex-direction: column; gap: 6px; }
.cu-tier__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--gilt-ink); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt); margin-bottom: 4px; }
.cu-tier__name { margin: 0; font: italic 500 30px/34px var(--font-display); font-variation-settings: "opsz" 48; }
.cu-tier__tag { margin: 0; font-size: 14.5px; line-height: 21px; color: var(--ink-soft); min-height: 42px; }
.cu-tier__price { display: flex; align-items: baseline; gap: 8px; padding: 12px 0; border-top: 1px solid var(--cu-hair); border-bottom: 1px solid var(--cu-hair); }
.cu-tier--featured .cu-tier__price { justify-content: center; }
.cu-tier__price .cu-numeral { font-size: 40px; line-height: 44px; color: var(--gilt-ink); }
.cu-tier__per { font-size: 14px; color: var(--ink-soft); }
.cu-tier__list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; flex: 1; }
.cu-tier__list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 21px; }
.cu-tier__list .cu-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--gilt-ink); stroke-width: 2; }
.cu-tier__cta { margin-top: 6px; }

/* ================================================================ AccessInfo */
.cu-access { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cu-access__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--ink-soft); font: 600 13px/1 var(--font-body); letter-spacing: .04em; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: transform 240ms var(--cu-fold), background-color var(--cu-t-hover) ease, color var(--cu-t-hover) ease, box-shadow var(--cu-t-hover) ease;
}
.cu-chip .cu-icon { width: 18px; height: 18px; }
.cu-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--gilt); }
.cu-chip:active { transform: translateY(2px); }
.cu-chip[aria-pressed="true"] { color: var(--ink); background: var(--stage); box-shadow: inset 0 0 0 1.5px var(--gilt), 0 2px 0 var(--cu-hair-gilt); }
.cu-chip[aria-pressed="true"] .cu-icon { color: var(--gilt-ink); }
.cu-access__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cu-hair); }
.cu-access__row { display: grid; grid-template-columns: 64px 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--cu-hair); }
.cu-access__row:not([hidden]) { animation: cu-fade 300ms ease backwards; }
.cu-access__date { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: var(--radius-sm); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt); }
.cu-access__dd { font-size: 26px; line-height: 28px; }
.cu-access__mm { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-ink); }
.cu-access__type { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--gilt-ink); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt); }
.cu-access__type .cu-icon { width: 22px; height: 22px; }
.cu-access__main { display: flex; flex-direction: column; min-width: 0; }
.cu-access__kind { font-size: 11.5px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-ink); }
.cu-access__show { font: italic 500 21px/26px var(--font-display); }
.cu-access__meta { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.cu-access__empty { margin: 0; padding: 16px; color: var(--ink-soft); font-style: italic; }
.cu-access__services { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cu-access__services li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-md); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair); }
.cu-access__services li > span:last-child { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.cu-access__services strong { color: var(--ink); font-weight: 600; font-size: 15px; }
.cu-access__sicon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; color: var(--gilt-ink); background: var(--stage-sunk); }
@media (max-width: 560px) {
  .cu-access__row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
  .cu-access__type { display: none; }
  .cu-access__show { font-size: 18px; line-height: 23px; }
}

/* ================================================================ Countdown */
.cu-cd { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px; border-radius: var(--radius-md); background: var(--stage); box-shadow: inset 0 0 0 1px var(--cu-hair-gilt), var(--shadow-card); overflow: hidden; min-width: 0; }
.cu-cd__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cu-cd__bells { display: flex; gap: 6px; }
.cu-cd__bell { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--cu-hair); transition: background-color 300ms ease, color 300ms ease; }
.cu-cd__bell .cu-icon { width: 15px; height: 15px; }
.cu-cd__bell.is-rung { background: var(--gilt); color: var(--house); box-shadow: none; }
[data-theme="light"] .cu-cd__bell.is-rung { color: #fffaf1; }
.cu-cd__call { margin: 0; height: 30px; font: italic 500 23px/30px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-cd__call.is-new { animation: cu-rise 420ms var(--cu-house) backwards; }
.cu-cd__clock { display: flex; align-items: baseline; gap: 4px; height: 92px; font-family: var(--font-display); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 96; color: var(--ink); }
.cu-cd__d { display: inline-block; width: .64em; height: 92px; overflow: hidden; text-align: center; font-size: 88px; line-height: 92px; }
.cu-cd__dv { display: inline-block; }
.cu-cd__dv.is-tick { animation: cu-digit 340ms var(--cu-house) backwards; }
@keyframes cu-digit { from { opacity: 0; transform: translateY(-36%); } }
.cu-cd__colon { width: .3em; text-align: center; font-size: 80px; line-height: 92px; color: var(--gilt-ink); }
.cu-cd__bar { position: relative; height: 6px; border-radius: 3px; background: var(--stage-sunk); box-shadow: var(--shadow-inset); overflow: hidden; }
.cu-cd__fill { position: absolute; inset: 0; background: var(--gilt); transform-origin: 0 50%; transition: transform 1s linear; }
.cu-cd__note { margin: 0; font-size: 13.5px; line-height: 19px; color: var(--ink-soft); }
.cu-cd.is-up .cu-cd__call { color: var(--gilt-ink); }
.cu-cd--compact { padding: 14px 16px; gap: 6px; }
.cu-cd--compact .cu-cd__clock { height: 56px; }
.cu-cd--compact .cu-cd__d { height: 56px; font-size: 52px; line-height: 56px; }
.cu-cd--compact .cu-cd__colon { font-size: 48px; line-height: 56px; }
.cu-cd--compact .cu-cd__call { font-size: 18px; line-height: 24px; height: 24px; }

/* ================================================================ HouseBoard */
.cu-board__rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cu-board__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 66px 112px; align-items: center; gap: 14px; height: 52px; border-bottom: 1px solid var(--cu-hair); }
.cu-board__row:last-child { border-bottom: 0; }
.cu-board__when { display: flex; flex-direction: column; line-height: 18px; }
.cu-board__day { font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.cu-board__time { font-size: 17px; color: var(--ink-soft); }
.cu-board__track { position: relative; height: 10px; border-radius: 5px; background: var(--stage-sunk); box-shadow: var(--shadow-inset); overflow: hidden; }
.cu-board__fill { position: absolute; inset: 0; border-radius: 5px; background: var(--band-b); transform-origin: 0 50%; animation: cu-fill 900ms var(--cu-house) backwards; animation-delay: calc(var(--i) * 70ms + 200ms); }
.cu-board__fill.is-hot { background: var(--gilt); }
@keyframes cu-fill { from { transform: scaleX(0); } }
.cu-board__left { text-align: right; white-space: nowrap; }
.cu-board__left .cu-numeral { font-size: 20px; }
.cu-board__left small { font-size: 12px; color: var(--ink-soft); }
.cu-board__badge { justify-self: end; }
.cu-board__sum { display: flex; align-items: baseline; gap: 4px; }
.cu-board__sum .cu-numeral { font-size: 30px; line-height: 32px; color: var(--gilt-ink); }
.cu-board__sum small { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
@media (max-width: 520px) { .cu-board__row { grid-template-columns: 74px minmax(0, 1fr) 58px; } .cu-board__badge { display: none; } }

/* ================================================================ IntervalOrder */
.cu-order__lede { display: flex; gap: 8px; margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.cu-order__lede .cu-icon { width: 17px; height: 17px; margin-top: 1px; color: var(--gilt-ink); }
.cu-order__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cu-hair); }
.cu-order__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--cu-hair); }
.cu-order__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--stage-sunk); color: var(--gilt-ink); }
.cu-order__main { display: flex; flex-direction: column; min-width: 0; }
.cu-order__name { font-weight: 600; font-size: 15px; line-height: 20px; }
.cu-order__note { font-size: 12.5px; line-height: 17px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-order__price { font-size: 17px; color: var(--ink-soft); }
.cu-order__qty { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--stage-sunk); box-shadow: var(--shadow-inset); }
.cu-order__step { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--stage); color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--edge), 0 2px 0 var(--cu-hair); transition: transform 220ms var(--cu-fold), box-shadow var(--cu-t-hover) ease; }
.cu-order__step:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gilt), 0 2px 0 var(--cu-hair-gilt); }
.cu-order__step:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--gilt); transition-duration: var(--cu-t-press); }
.cu-order__step:disabled { opacity: .4; cursor: not-allowed; }
.cu-order__step .cu-icon { width: 16px; height: 16px; }
.cu-order__qv { display: inline-block; width: 26px; text-align: center; font-size: 20px; line-height: 24px; }
.cu-order__qv.is-tick { animation: cu-digit 300ms var(--cu-house) backwards; }
.cu-order__sum { display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.cu-order__sum .cu-numeral { font-size: 30px; line-height: 34px; letter-spacing: 0; color: var(--gilt-ink); }
.cu-order .cu-card__foot { border-top: 0; padding-top: 0; }
@media (max-width: 420px) { .cu-order__row { grid-template-columns: minmax(0, 1fr) auto; } .cu-order__icon, .cu-order__price { display: none; } }