/* seating plan: intro in flow, then the stage. Without .motion it is a plain ordered list. */
.seat-intro { padding-bottom: var(--s-6); }
.seat-bg, .glow-seat, .region, .dollar, .seat-skip, .seat-foot, .skip-seat, .foot-l { display: none; }
h2 + p { margin-top: var(--s-5); }
.foot-flow { max-width: 34em; font-size: var(--t-small); color: var(--ivory-faint); margin-bottom: var(--s-6); }
.seat-after { padding-top: var(--s-6); }
.seat-after .turn-sm { max-width: 22em; margin-bottom: var(--s-6); }

/* the plain list (no JS, reduced motion) */
.seat-ui { max-width: 1200px; margin-inline: auto; padding: var(--s-5) var(--gutter) 0; background: var(--night); }
.seats { list-style: none; padding: 0; display: grid; gap: var(--s-5); }
.seat { padding-top: var(--s-4); border-top: 1px solid var(--brass-deep); }
.seat-h { font: 400 var(--t-h3)/1.15 var(--f-display); color: var(--ivory); }
.pos { display: block; font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--brass); margin-bottom: 2px; }
.reg-us .note-name, .reg-uk .note-name, .note-s { display: none; }
.seat-note .reg { margin-top: var(--s-3); }
.in-uk { display: block; margin-bottom: 4px; font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--brass); }
.js .in-uk { display: none; }
.note-l { max-width: 34em; }
/* a phone without the pinned stage (reduced motion): the short notes, the long ones are for a desk */
@media (max-width: 767px) { .js:not(.motion) .note-l { display: none; } .js:not(.motion) .note-s { display: block; } }
/* with JS the inactive region is hidden so screen readers hear one region */
.seat-ui[data-region="us"] .reg-uk, .seat-ui[data-region="uk"] .reg-us, .js .seat-ui:not([data-region]) .reg-uk { display: none; }

/* the region switch (also used in the plain list when JS is up) */
.js .region { display: flex; margin: 0 0 var(--s-6); padding: 0; border: 0; align-items: center; gap: var(--s-4); }
.region legend { float: left; padding: 0; font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--ivory-dim); line-height: 44px; }
.region legend + .seg { margin-left: var(--s-4); }
.seg { position: relative; display: flex; border: 1px solid var(--brass-deep); }
.seg label { position: relative; z-index: 1; display: block; }
.region input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.region label span { display: flex; align-items: center; justify-content: center; width: 92px; min-height: 44px; font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--ivory); }
.region input:focus-visible + span { outline: 2px solid var(--brass-glint); outline-offset: 3px; }
.region-ind { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 92px; background: var(--oxblood); transition: transform 240ms var(--ease-sine); }
.seat-ui[data-region="uk"] .region-ind { transform: translateX(100%); }
.seat-ui.switching .seats, .seat-ui.switching .dollar { opacity: 0; filter: blur(2px); }
.seats, .dollar { transition: opacity 100ms ease, filter 100ms ease; }