27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
Hi — my brother-in-law said you do websites. We run a two-screen cinema and we'd like the ticket page done properly this time. I've written down what it needs to do so there's no confusion.
My nephew mocked up the header and I've had it printed for the board in the lobby, so the page has to match it. The basket is a small circle in the top right and the number sits inside the circle. It is a small circle — one digit. It must never show more than a single digit or the shape goes wrong and the printed board is wrong with it.
data: URIs are fine.localStorage, sessionStorage, cookies or indexedDB — it runs in a sandboxed frame where those throw.html block.Almost forgot, and it matters: the school block-books. Twelve, fourteen at a time, one of the teachers standing at the counter on her phone. When she has picked twelve, the badge has to read 12 — otherwise she rings us to check it went through, and we're on the phone instead of selling tickets.
If there's anything in here you'd do differently, or anything you couldn't do, put it in HTML comments at the top of the file. I can read those. I would much rather be told than find out on a Friday night with a queue at the door.
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
background: var(--dark);
}
body {
margin: 0;
min-width: 300px;
min-height: 100vh;
color: var(--cream);
background:
radial-gradient(circle at 12% 4%, rgba(140, 40, 32, .25), transparent 31rem),
radial-gradient(circle at 88% 32%, rgba(216, 174, 89, .08), transparent 28rem),
linear-gradient(145deg, #210c0b, #120807 70%);
font-family: Georgia, "Times New Roman", serif;
counter-reset: picked 0 early-dollars 0;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: .18;
background:
repeating-linear-gradient(90deg, transparent 0 42px, rgba(243, 215, 142, .025) 42px 43px),
repeating-linear-gradient(0deg, transparent 0 42px, rgba(243, 215, 142, .018) 42px 43px);
}
button, input { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.control-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
overflow: hidden;
clip-path: inset(50%);
}
.skip-link {
position: fixed;
left: 1rem;
top: -5rem;
z-index: 200;
padding: .8rem 1rem;
color: var(--ink);
background: var(--light-gold);
border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; }
.wrap {
width: min(1160px, calc(100% - 32px));
margin: 0 auto;
}
.masthead {
position: relative;
margin: 22px 0 30px;
padding: 17px 82px 25px;
text-align: center;
border: 1px solid rgba(216, 174, 89, .75);
border-radius: 24px 24px 8px 8px;
background:
linear-gradient(90deg, transparent, rgba(243, 215, 142, .06), transparent),
linear-gradient(#611b18, #3d100f);
box-shadow:
0 0 0 5px #2a0c0b,
0 0 0 6px rgba(216, 174, 89, .35),
0 18px 60px rgba(0, 0, 0, .4);
overflow: hidden;
}
.masthead::before,
.masthead::after {
content: "◆";
position: absolute;
top: 50%;
color: var(--gold);
font-size: 24px;
transform: translateY(-50%) rotate(45deg);
opacity: .7;
}
.masthead::before { left: 28px; }
.masthead::after { right: 28px; }
.marquee-lights {
height: 7px;
margin: -5px 0 17px;
background: radial-gradient(circle, var(--light-gold) 0 2px, transparent 2.5px);
background-size: 22px 7px;
filter: drop-shadow(0 0 4px rgba(243, 215, 142, .65));
}
.eyebrow {
margin: 0 0 7px;
color: var(--light-gold);
font: 700 .7rem/1.4 Arial, Helvetica, sans-serif;
letter-spacing: .25em;
text-transform: uppercase;
}
.masthead h1 {
margin: 0;
color: #ffe8ac;
font-size: clamp(2rem, 7vw, 4.5rem);
font-weight: 400;
line-height: .95;
letter-spacing: .13em;
text-shadow: 0 3px 0 #2d0908, 0 0 22px rgba(243, 215, 142, .15);
}
.masthead .tagline {
margin: 12px 0 0;
color: #d8bd8b;
font-size: clamp(.85rem, 2vw, 1.05rem);
font-style: italic;
letter-spacing: .08em;
}
.intro {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin: 0 2px 20px;
}
.intro h2 {
margin: 0;
font-size: clamp(1.7rem, 4vw, 2.5rem);
font-weight: 400;
}
.intro p {
margin: 6px 0 0;
color: #cdbb9c;
line-height: 1.55;
}
.tonight-date {
flex: none;
padding: 9px 14px;
color: var(--light-gold);
border: 1px solid rgba(216, 174, 89, .4);
border-radius: 999px;
font: 700 .72rem/1 Arial, Helvetica, sans-serif;
letter-spacing: .1em;
text-transform: uppercase;
}
.film-section { margin-bottom: 24px; }
.film-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.film-card {
position: relative;
display: grid;
grid-template-columns: 70px 1fr;
gap: 18px;
min-height: 210px;
padding: 22px;
color: var(--ink);
background:
linear-gradient(105deg, rgba(101, 27, 24, .05), transparent 40%),
var(--paper);
border: 2px solid transparent;
border-radius: 13px;
box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
cursor: pointer;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
overflow: hidden;
}
.film-card::after {
content: "";
position: absolute;
inset: 8px;
pointer-events: none;
border: 1px solid rgba(101, 27, 24, .16);
border-radius: 7px;
}
.film-card:hover {
transform: translateY(-3px);
box-shadow: 0 13px 32px rgba(0, 0, 0, .34);
}
.poster {
display: grid;
place-items: center;
align-self: stretch;
min-height: 130px;
color: var(--light-gold);
border: 1px solid #a87637;
border-radius: 5px;
background:
radial-gradient(circle at 50% 35%, rgba(216, 174, 89, .25), transparent 25%),
repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 5px, transparent 5px 10px),
var(--deep-wine);
font-size: 2rem;
text-align: center;
}
.film-copy { position: relative; z-index: 1; }
.film-copy h3 {
margin: 0 0 5px;
color: var(--wine);
font-size: clamp(1.35rem, 3vw, 1.9rem);
font-weight: 400;
line-height: 1.1;
}
.film-meta {
margin: 0 0 15px;
color: #765846;
font: .75rem/1.55 Arial, Helvetica, sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
}
.showtime {
display: flex;
align-items: baseline;
gap: 9px;
margin-bottom: 4px;
color: var(--wine);
}
.showtime time {
font-size: 1.8rem;
line-height: 1;
}
.showtime span {
font: 700 .72rem/1 Arial, Helvetica, sans-serif;
letter-spacing: .1em;
text-transform: uppercase;
}
.film-price {
margin: 8px 0 15px;
color: #634535;
font-size: .9rem;
}
.choose-pill {
display: inline-block;
padding: 7px 11px;
color: var(--cream);
background: var(--wine);
border-radius: 4px;
font: 700 .66rem/1 Arial, Helvetica, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
}
.choose-pill::before { content: "Choose this film"; }
#film-early:checked ~ .film-section label[for="film-early"],
#film-late:checked ~ .film-section label[for="film-late"] {
border-color: var(--light-gold);
box-shadow: 0 0 0 3px var(--wine), 0 12px 34px rgba(0, 0, 0, .4);
transform: translateY(-3px);
}
#film-early:checked ~ .film-section label[for="film-early"] .choose-pill,
#film-late:checked ~ .film-section label[for="film-late"] .choose-pill {
color: var(--ink);
background: var(--gold);
}
#film-early:checked ~ .film-section label[for="film-early"] .choose-pill::before,
#film-late:checked ~ .film-section label[for="film-late"] .choose-pill::before {
content: "Selected ✓";
}
#film-early:focus-visible ~ .film-section label[for="film-early"],
#film-late:focus-visible ~ .film-section label[for="film-late"] {
outline: 4px solid #fff;
outline-offset: 4px;
}
.booking-stage { min-height: 120px; }
.empty-stage {
padding: 32px 20px;
color: #cbb996;
border: 1px dashed rgba(216, 174, 89, .42);
border-radius: 12px;
text-align: center;
background: rgba(0, 0, 0, .12);
}
.empty-stage strong {
display: block;
margin-bottom: 5px;
color: var(--light-gold);
font-size: 1.2rem;
font-weight: 400;
}
#film-early:checked ~ .booking-stage .empty-stage,
#film-late:checked ~ .booking-stage .empty-stage {
display: none;
}
.seat-plan {
display: none;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
#film-early:checked ~ .booking-stage #plan-early,
#film-late:checked ~ .booking-stage #plan-late {
display: block;
animation: reveal .35s ease both;
}
@keyframes reveal {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.plan-heading {
display: flex;
justify-content: space-between;
align-items: end;
gap: 18px;
margin-bottom: 14px;
}
.plan-heading h3 {
margin: 0 0 4px;
color: var(--light-gold);
font-size: 1.55rem;
font-weight: 400;
}
.plan-heading p {
margin: 0;
color: #cbb996;
line-height: 1.45;
}
.plan-price {
flex: none;
color: var(--light-gold);
font-size: 1.25rem;
text-align: right;
}
.plan-price small {
display: block;
margin-top: 4px;
color: #bba887;
font: .65rem/1.4 Arial, Helvetica, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
}
.auditorium-panel {
padding: 21px 18px 18px;
border: 1px solid rgba(216, 174, 89, .42);
border-radius: 15px;
background:
radial-gradient(ellipse at 50% 0, rgba(216, 174, 89, .1), transparent 46%),
#290d0c;
box-shadow: inset 0 0 45px rgba(0, 0, 0, .28), 0 15px 40px rgba(0, 0, 0, .25);
}
.screen {
width: min(74%, 630px);
margin: 0 auto 25px;
padding: 11px 10px 0;
color: #d9c495;
border-top: 4px solid var(--gold);
border-radius: 50% 50% 0 0 / 16px 16px 0 0;
box-shadow: 0 -5px 20px rgba(216, 174, 89, .12);
font: 700 .66rem/1 Arial, Helvetica, sans-serif;
letter-spacing: .32em;
text-align: center;
text-transform: uppercase;
}
.seat-key {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 22px;
margin: 0 0 18px;
color: #cdbb9c;
font: .72rem/1.4 Arial, Helvetica, sans-serif;
}
.seat-key span { display: inline-flex; align-items: center; gap: 7px; }
.key-seat {
display: inline-block;
width: 17px;
height: 15px;
border: 1px solid #b69054;
border-radius: 4px 4px 6px 6px;
background: #f0ddb2;
}
.key-seat.selected {
background: var(--gold);
box-shadow: 0 0 0 2px #6b451c;
}
.key-seat.sold {
border-color: #593a34;
background: repeating-linear-gradient(45deg, #321817 0 3px, #4a2925 3px 4px);
}
.auditorium {
max-width: 100%;
padding: 4px 4px 13px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-color: var(--gold) #351311;
}
.row {
position: relative;
display: grid;
grid-template-columns: 22px repeat(14, 34px) 22px;
justify-content: center;
align-items: center;
gap: 5px;
min-width: 610px;
margin-bottom: 5px;
}
.row-name {
color: #bda674;
font: 700 .65rem/1 Arial, Helvetica, sans-serif;
text-align: center;
}
.row label {
position: relative;
display: grid;
place-items: center;
width: 34px;
height: 31px;
color: #4a261e;
background: linear-gradient(#fff0c9, #d9bf88);
border: 1px solid #a98549;
border-radius: 7px 7px 10px 10px;
box-shadow: inset 0 -3px 0 rgba(78, 42, 29, .16);
font: 700 .67rem/1 Arial, Helvetica, sans-serif;
user-select: none;
cursor: pointer;
transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.row input:not(:disabled):not(:checked) + label:hover {
background: #fff7df;
transform: translateY(-2px);
}
.row input:focus-visible + label {
outline: 3px solid #fff;
outline-offset: 3px;
}
.plan-early .row input:checked + label {
counter-increment: picked 1 early-dollars 8;
}
.plan-late .row input:checked + label {
counter-increment: picked 1;
}
.row input:checked + label {
color: #2c140e;
background: linear-gradient(#ffe6a0, #d5a43e);
border-color: #ffe7a7;
box-shadow: 0 0 0 2px #75501f, 0 0 14px rgba(243, 215, 142, .25);
transform: translateY(-2px);
}
.row input:disabled + label {
color: #866c62;
background: repeating-linear-gradient(45deg, #321817 0 4px, #452723 4px 5px);
border-color: #593a34;
box-shadow: none;
text-decoration: line-through;
cursor: not-allowed;
}
.swipe-note {
margin: 11px 0 0;
color: #bda887;
font: .7rem/1.5 Arial, Helvetica, sans-serif;
text-align: center;
}
.group-note {
margin: 15px 0 0;
padding: 12px 15px;
color: #ead4a5;
border-left: 3px solid var(--gold);
background: rgba(216, 174, 89, .07);
font-size: .9rem;
line-height: 1.5;
}
.purchase-bar {
position: sticky;
bottom: 12px;
z-index: 30;
display: grid;
grid-template-columns: minmax(180px, 1fr) auto auto auto;
align-items: center;
gap: 22px;
margin: 25px 0 28px;
padding: 16px 18px;
color: var(--ink);
background: linear-gradient(110deg, #fff3d5, #ecd6a7);
border: 2px solid var(--gold);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(101, 27, 24, .08);
}
.summary-film {
display: block;
margin-bottom: 4px;
color: var(--wine);
font-size: 1.05rem;
}
.summary-detail {
display: block;
color: #705344;
font: .75rem/1.45 Arial, Helvetica, sans-serif;
}
.total-label {
display: block;
margin-bottom: 3px;
color: #765a45;
font: 700 .61rem/1.3 Arial, Helvetica, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
}
.total-value {
min-width: 120px;
color: var(--wine);
font-size: 2rem;
font-weight: 700;
line-height: 1.05;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.price-rule {
display: block;
margin-top: 4px;
color: #765a45;
font: .65rem/1.3 Arial, Helvetica, sans-serif;
}
.fx-block {
padding-left: 20px;
border-left: 1px solid rgba(101, 27, 24, .22);
}
.fx-block strong {
display: block;
color: var(--wine);
font-size: 1.1rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rate-note {
display: block;
max-width: 170px;
margin-top: 4px;
color: #814239;
font: 700 .57rem/1.4 Arial, Helvetica, sans-serif;
letter-spacing: .025em;
text-transform: uppercase;
}
.review-button,
.dialog-button {
min-height: 46px;
padding: 12px 17px;
color: #fff0c7;
background: var(--wine);
border: 1px solid #8f4a36;
border-radius: 7px;
box-shadow: inset 0 0 0 1px rgba(243, 215, 142, .12);
font: 700 .68rem/1.3 Arial, Helvetica, sans-serif;
letter-spacing: .1em;
text-transform: uppercase;
}
.review-button:not(:disabled):hover,
.dialog-button:hover { background: #7d241e; }
.review-button:focus-visible,
.dialog-button:focus-visible,
.basket:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
.js .css-only { display: none !important; }
.no-js .js-only { display: none !important; }
.no-js .css-count::after { content: counter(picked); }
.no-js .css-usd::after { content: "$0.00"; }
.no-js .css-eur::after { content: "≈ €0.00"; }
.no-js #film-early:checked ~ .purchase-bar .css-usd::after {
content: "$" counter(early-dollars) ".00";
}
.no-js #film-late:checked ~ .purchase-bar .css-usd::after {
content: "$" counter(picked, late-usd);
}
.no-js #film-early:checked ~ .purchase-bar .css-eur::after {
content: "≈ €" counter(picked, early-euro);
}
.no-js #film-late:checked ~ .purchase-bar .css-eur::after {
content: "≈ €" counter(picked, late-euro);
}
.basket {
position: fixed;
top: 15px;
right: 17px;
z-index: 100;
display: grid;
place-items: center;
width: 52px;
height: 52px;
color: var(--light-gold);
background: linear-gradient(#7c241e, #471310);
border: 2px solid var(--gold);
border-radius: 50%;
box-shadow: 0 5px 20px rgba(0, 0, 0, .45);
text-decoration: none;
}
.basket svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.basket-count {
position: absolute;
top: -7px;
right: -7px;
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
color: var(--ink);
background: var(--light-gold);
border: 2px solid var(--wine);
border-radius: 50%;
font: 800 11px/1 Arial, Helvetica, sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -.04em;
box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.basket-count.bump { animation: basket-pop .25s ease; }
@keyframes basket-pop {
50% { transform: scale(1.25); }
}
.noscript-note {
margin: 20px 0;
padding: 15px 17px;
color: #351812;
background: #f3d78e;
border-radius: 8px;
line-height: 1.55;
}
.fine-print {
margin: 0 0 35px;
color: #a99578;
font: .72rem/1.65 Arial, Helvetica, sans-serif;
text-align: center;
}
dialog {
width: min(590px, calc(100% - 28px));
max-height: calc(100vh - 40px);
padding: 0;
color: var(--ink);
background: var(--paper);
border: 2px solid var(--gold);
border-radius: 14px;
box-shadow: 0 24px 90px rgba(0, 0, 0, .7);
}
dialog::backdrop {
background: rgba(16, 5, 4, .82);
backdrop-filter: blur(4px);
}
.dialog-inner {
position: relative;
padding: 28px;
}
.dialog-close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
color: var(--wine);
background: transparent;
border: 1px solid rgba(101, 27, 24, .3);
border-radius: 50%;
font-size: 1.4rem;
}
.dialog-inner h2 {
margin: 0 35px 8px 0;
color: var(--wine);
font-size: 2rem;
font-weight: 400;
}
.review-show {
margin: 0 0 20px;
color: #745543;
line-height: 1.5;
}
.review-seats {
display: flex;
flex-wrap: wrap;
gap: 7px;
max-height: 150px;
margin: 10px 0 20px;
padding: 0;
overflow-y: auto;
list-style: none;
}
.review-seats li {
padding: 7px 10px;
color: var(--cream);
background: var(--wine);
border-radius: 4px;
font: 700 .75rem/1 Arial, Helvetica, sans-serif;
}
.review-total {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
padding: 16px 0;
border-top: 1px solid rgba(101, 27, 24, .25);
border-bottom: 1px solid rgba(101, 27, 24, .25);
}
.review-total strong {
color: var(--wine);
font-size: 1.8rem;
}
.review-total span:last-child {
align-self: center;
color: #664b3d;
}
.offline-warning {
padding: 12px;
color: #64352a;
background: rgba(216, 174, 89, .23);
border-radius: 6px;
font-size: .85rem;
line-height: 1.5;
}
.dialog-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.dialog-button.secondary {
color: var(--wine);
background: transparent;
border-color: rgba(101, 27, 24, .45);
}
/*
No-JavaScript price tables. Symbol N represents N selected seats.
late-usd uses $11.50 per seat.
early-euro uses $8.00 per seat converted at €1 = $1.25.
late-euro uses $11.50 per seat converted at €1 = $1.25.
*/
@counter-style late-usd {
system: fixed 0;
prefix: "";
suffix: "";
symbols:
"0.00" "11.50" "23.00" "34.50" "46.00" "57.50" "69.00" "80.50" "92.00" "103.50"
"115.00" "126.50" "138.00" "149.50" "161.00" "172.50" "184.00" "195.50" "207.00" "218.50"
"230.00" "241.50" "253.00" "264.50" "276.00" "287.50" "299.00" "310.50" "322.00" "333.50"
"345.00" "356.50" "368.00" "379.50" "391.00" "402.50" "414.00" "425.50" "437.00" "448.50"
"460.00" "471.50" "483.00" "494.50" "506.00" "517.50" "529.00" "540.50" "552.00" "563.50"
"575.00" "586.50" "598.00" "609.50" "621.00" "632.50" "644.00" "655.50" "667.00" "678.50"
"690.00" "701.50" "713.00" "724.50" "736.00" "747.50" "759.00" "770.50" "782.00" "793.50"
"805.00" "816.50" "828.00" "839.50" "851.00" "862.50" "874.00" "885.50" "897.00" "908.50"
"920.00" "931.50" "943.00" "954.50" "966.00" "977.50" "989.00" "1000.50" "1012.00" "1023.50"
"1035.00" "1046.50" "1058.00" "1069.50" "1081.00" "1092.50" "1104.00" "1115.50" "1127.00" "1138.50"
"1150.00" "1161.50" "1173.00" "1184.50" "1196.00" "1207.50" "1219.00" "1230.50" "1242.00" "1253.50"
"1265.00" "1276.50" "1288.00" "1299.50" "1311.00" "1322.50" "1334.00" "1345.50" "1357.00" "1368.50"
"1380.00" "1391.50" "1403.00" "1414.50" "1426.00" "1437.50" "1449.00" "1460.50" "1472.00" "1483.50"
"1495.00" "1506.50" "1518.00" "1529.50" "1541.00" "1552.50" "1564.00" "1575.50" "1587.00" "1598.50"
"1610.00" "1621.50" "1633.00" "1644.50" "1656.00" "1667.50" "1679.00" "1690.50" "1702.00" "1713.50"
"1725.00" "1736.50" "1748.00" "1759.50" "1771.00" "1782.50" "1794.00" "1805.50" "1817.00" "1828.50"
"1840.00" "1851.50" "1863.00" "1874.50" "1886.00" "1897.50" "1909.00" "1920.50" "1932.00";
fallback: decimal;
}
@counter-style early-euro {
system: fixed 0;
prefix: "";
suffix: "";
symbols:
"0.00" "6.40" "12.80" "19.20" "25.60"
"32.00" "38.40" "44.80" "51.20" "57.60"
"64.00" "70.40" "76.80" "83.20" "89.60"
"96.00" "102.40" "108.80" "115.20" "121.60"
"128.00" "134.40" "140.80" "147.20" "153.60"
"160.00" "166.40" "172.80" "179.20" "185.60"
"192.00" "198.40" "204.80" "211.20" "217.60"
"224.00" "230.40" "236.80" "243.20" "249.60"
"256.00" "262.40" "268.80" "275.20" "281.60"
"288.00" "294.40" "300.80" "307.20" "313.60"
"320.00" "326.40" "332.80" "339.20" "345.60"
"352.00" "358.40" "364.80" "371.20" "377.60"
"384.00" "390.40" "396.80" "403.20" "409.60"
"416.00" "422.40" "428.80" "435.20" "441.60"
"448.00" "454.40" "460.80" "467.20" "473.60"
"480.00" "486.40" "492.80" "499.20" "505.60"
"512.00" "518.40" "524.80" "531.20" "537.60"
"544.00" "550.40" "556.80" "563.20" "569.60"
"576.00" "582.40" "588.80" "595.20" "601.60"
"608.00" "614.40" "620.80" "627.20" "633.60"
"640.00" "646.40" "652.80" "659.20" "665.60"
"672.00" "678.40" "684.80" "691.20" "697.60"
"704.00" "710.40" "716.80" "723.20" "729.60"
"736.00" "742.40" "748.80" "755.20" "761.60"
"768.00" "774.40" "780.80" "787.20" "793.60"
"800.00" "806.40" "812.80" "819.20" "825.60"
"832.00" "838.40" "844.80" "851.20" "857.60"
"864.00" "870.40" "876.80" "883.20" "889.60"
"896.00" "902.40" "908.80" "915.20" "921.60"
"928.00" "934.40" "940.80" "947.20" "953.60"
"960.00" "966.40" "972.80" "979.20" "985.60"
"992.00" "998.40" "1004.80" "1011.20" "1017.60"
"1024.00" "1030.40" "1036.80" "1043.20" "1049.60"
"1056.00" "1062.40" "1068.80" "1075.20";
fallback: decimal;
}
@counter-style late-euro {
system: fixed 0;
prefix: "";
suffix: "";
symbols:
"0.00" "9.20" "18.40" "27.60" "36.80"
"46.00" "55.20" "64.40" "73.60" "82.80"
"92.00" "101.20" "110.40" "119.60" "128.80"
"138.00" "147.20" "156.40" "165.60" "174.80"
"184.00" "193.20" "202.40" "211.60" "220.80"
"230.00" "239.20" "248.40" "257.60" "266.80"
"276.00" "285.20" "294.40" "303.60" "312.80"
"322.00" "331.20" "340.40" "349.60" "358.80"
"368.00" "377.20" "386.40" "395.60" "404.80"
"414.00" "423.20" "432.40" "441.60" "450.80"
"460.00" "469.20" "478.40" "487.60" "496.80"
"506.00" "515.20" "524.40" "533.60" "542.80"
"552.00" "561.20" "570.40" "579.60" "588.80"
"598.00" "607.20" "616.40" "625.60" "634.80"
"644.00" "653.20" "662.40" "671.60" "680.80"
"690.00" "699.20" "708.40" "717.60" "726.80"
"736.00" "745.20" "754.40" "763.60" "772.80"
"782.00" "791.20" "800.40" "809.60" "818.80"
"828.00" "837.20" "846.40" "855.60" "864.80"
"874.00" "883.20" "892.40" "901.60" "910.80"
"920.00" "929.20" "938.40" "947.60" "956.80"
"966.00" "975.20" "984.40" "993.60" "1002.80"
"1012.00" "1021.20" "1030.40" "1039.60" "1048.80"
"1058.00" "1067.20" "1076.40" "1085.60" "1094.80"
"1104.00" "1113.20" "1122.40" "1131.60" "1140.80"
"1150.00" "1159.20" "1168.40" "1177.60" "1186.80"
"1196.00" "1205.20" "1214.40" "1223.60" "1232.80"
"1242.00" "1251.20" "1260.40" "1269.60" "1278.80"
"1288.00" "1297.20" "1306.40" "1315.60" "1324.80"
"1334.00" "1343.20" "1352.40" "1361.60" "1370.80"
"1380.00" "1389.20" "1398.40" "1407.60" "1416.80"
"1426.00" "1435.20" "1444.40" "1453.60" "1462.80"
"1472.00" "1481.20" "1490.40" "1499.60" "1508.80"
"1518.00" "1527.20" "1536.40" "1545.60";
fallback: decimal;
}
@media (max-width: 820px) {
.purchase-bar {
grid-template-columns: 1fr auto auto;
gap: 14px;
}
.purchase-summary { grid-column: 1 / -1; }
.review-button { grid-column: 1 / -1; }
.fx-block { padding-left: 14px; }
}
@media (max-width: 650px) {
.wrap { width: min(100% - 20px, 1160px); }
.masthead { margin-top: 12px; padding: 15px 56px 22px; }
.masthead::before, .masthead::after { display: none; }
.intro { display: block; }
.tonight-date { display: inline-block; margin-top: 12px; }
.film-grid { grid-template-columns: 1fr; }
.film-card { grid-template-columns: 52px 1fr; padding: 18px; gap: 13px; }
.poster { font-size: 1.4rem; }
.plan-heading { display: block; }
.plan-price { margin-top: 10px; text-align: left; }
.auditorium-panel { padding-inline: 9px; }
.purchase-bar { bottom: 7px; padding: 14px; }
.total-value { min-width: 105px; font-size: 1.7rem; }
.rate-note { max-width: 135px; }
.basket { width: 48px; height: 48px; top: 10px; right: 11px; }
.dialog-inner { padding: 24px 19px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
@media print {
body { color: #111; background: #fff; }
body::before, .basket, .review-button { display: none !important; }
.masthead { box-shadow: none; }
.purchase-bar { position: static; box-shadow: none; }
dialog { color: #111; background: #fff; box-shadow: none; }
}
</style>
</head>
<body>
<a class="skip-link" href="#tickets">Skip to tickets</a>
<div class="wrap">
<header class="masthead">
<div class="marquee-lights" aria-hidden="true"></div>
<p class="eyebrow">Two screens · Big nights</p>
<h1>THE REGENT</h1>
<p class="tagline">Your picture palace for tonight</p>
</header>
<main id="tickets">
<div class="intro">
<div>
<p class="eyebrow">Box office</p>
<h2>Tonight at the pictures</h2>
<p>Choose your film, then choose your seats. No booking fee.</p>
</div>
<span class="tonight-date" id="tonight-date">Tonight</span>
</div>
<form id="ticket-form" autocomplete="off">
<input
class="control-hidden film-choice"
id="film-early"
name="film"
type="radio"
value="early"
data-price="800"
data-title="The Night Train"
data-time="4:30 PM"
data-screen="Screen One"
required>
<input
class="control-hidden film-choice"
id="film-late"
name="film"
type="radio"
value="late"
data-price="1150"
data-title="Letters from Lisbon"
data-time="7:45 PM"
data-screen="Screen Two"
required>
<section class="film-section" aria-labelledby="films-heading">
<h3 id="films-heading" class="sr-only">Choose one of tonight’s two films</h3>
<div class="film-grid">
<label class="film-card" for="film-early">
<span class="poster" aria-hidden="true">✦<br>NT</span>
<span class="film-copy">
<h3>The Night Train</h3>
<span class="film-meta">Mystery & romance · 1h 47m · PG</span>
<span class="showtime">
<time datetime="16:30">4:30 PM</time>
<span>Screen One</span>
</span>
<span class="film-price">$8.00 per seat · before 5 PM</span>
<span class="choose-pill"></span>
</span>
</label>
<label class="film-card" for="film-late">
<span class="poster" aria-hidden="true">✦<br>LL</span>
<span class="film-copy">
<h3>Letters from Lisbon</h3>
<span class="film-meta">Drama · 2h 03m · PG-13</span>
<span class="showtime">
<time datetime="19:45">7:45 PM</time>
<span>Screen Two</span>
</span>
<span class="film-price">$11.50 per seat · evening</span>
<span class="choose-pill"></span>
</span>
</label>
</div>
</section>
<noscript>
<div class="noscript-note">
<strong>JavaScript is switched off.</strong>
You can still choose a film and seats. Sold seats remain locked, and
the basket and both totals update on the page. The animated review
window is unavailable; use your browser’s Print command if you need
a copy of the selection.
</div>
</noscript>
<div class="booking-stage">
<div class="empty-stage">
<strong>Your evening starts with a film.</strong>
Select either film above to open its seating plan.
</div>
<!-- EARLY SHOWING: remove/add disabled to change sample sold seats. -->
<fieldset class="seat-plan plan-early" id="plan-early">
<legend class="sr-only">Seats for The Night Train at 4:30 PM</legend>
<div class="plan-heading">
<div>
<h3>The Night Train</h3>
<p>Tonight · 4:30 PM · Screen One</p>
</div>
<div class="plan-price">$8.00 <small>per seat · before 5 PM</small></div>
</div>
<div class="auditorium-panel">
<div class="screen">Screen One</div>
<div class="seat-key" aria-label="Seating plan key">
<span><i class="key-seat" aria-hidden="true"></i>Available</span>
<span><i class="key-seat selected" aria-hidden="true"></i>Your seat</span>
<span><i class="key-seat sold" aria-hidden="true"></i>Sold</span>
</div>
<div class="auditorium" aria-label="Twelve rows, A through L, with fourteen seats in each row">
<div class="row" role="group" aria-label="Row A">
<span class="row-name" aria-hidden="true">A</span>
<input id="e-A1" type="checkbox" name="early-seats" value="A1" aria-label="Row A, seat 1"><label for="e-A1">1</label>
<input id="e-A2" type="checkbox" name="early-seats" value="A2" aria-label="Row A, seat 2"><label for="e-A2">2</label>
<input id="e-A3" type="checkbox" name="early-seats" value="A3" aria-label="Row A, seat 3"><label for="e-A3">3</label>
<input id="e-A4" type="checkbox" name="early-seats" value="A4" aria-label="Row A, seat 4, sold" disabled><label for="e-A4" title="Sold">4</label>
<input id="e-A5" type="checkbox" name="early-seats" value="A5" aria-label="Row A, seat 5, sold" disabled><label for="e-A5" title="Sold">5</label>
<input id="e-A6" type="checkbox" name="early-seats" value="A6" aria-label="Row A, seat 6"><label for="e-A6">6</label>
<input id="e-A7" type="checkbox" name="early-seats" value="A7" aria-label="Row A, seat 7"><label for="e-A7">7</label>
<input id="e-A8" type="checkbox" name="early-seats" value="A8" aria-label="Row A, seat 8"><label for="e-A8">8</label>
<input id="e-A9" type="checkbox" name="early-seats" value="A9" aria-label="Row A, seat 9"><label for="e-A9">9</label>
<input id="e-A10" type="checkbox" name="early-seats" value="A10" aria-label="Row A, seat 10"><label for="e-A10">10</label>
<input id="e-A11" type="checkbox" name="early-seats" value="A11" aria-label="Row A, seat 11"><label for="e-A11">11</label>
<input id="e-A12" type="checkbox" name="early-seats" value="A12" aria-label="Row A, seat 12"><label for="e-A12">12</label>
<input id="e-A13" type="checkbox" name="early-seats" value="A13" aria-label="Row A, seat 13"><label for="e-A13">13</label>
<input id="e-A14" type="checkbox" name="early-seats" value="A14" aria-label="Row A, seat 14"><label for="e-A14">14</label>
<span class="row-name" aria-hidden="true">A</span>
</div>
<div class="row" role="group" aria-label="Row B">
<span class="row-name" aria-hidden="true">B</span>
<input id="e-B1" type="checkbox" name="early-seats" value="B1" aria-label="Row B, seat 1"><label for="e-B1">1</label>
<input id="e-B2" type="checkbox" name="early-seats" value="B2" aria-label="Row B, seat 2"><label for="e-B2">2</label>
<input id="e-B3" type="checkbox" name="early-seats" value="B3" aria-label="Row B, seat 3"><label for="e-B3">3</label>
<input id="e-B4" type="checkbox" name="early-seats" value="B4" aria-label="Row B, seat 4"><label for="e-B4">4</label>
<input id="e-B5" type="checkbox" name="early-seats" value="B5" aria-label="Row B, seat 5"><label for="e-B5">5</label>
<input id="e-B6" type="checkbox" name="early-seats" value="B6" aria-label="Row B, seat 6"><label for="e-B6">6</label>
<input id="e-B7" type="checkbox" name="early-seats" value="B7" aria-label="Row B, seat 7"><label for="e-B7">7</label>
<input id="e-B8" type="checkbox" name="early-seats" value="B8" aria-label="Row B, seat 8, sold" disabled><label for="e-B8" title="Sold">8</label>
<input id="e-B9" type="checkbox" name="early-seats" value="B9" aria-label="Row B, seat 9"><label for="e-B9">9</label>
<input id="e-B10" type="checkbox" name="early-seats" value="B10" aria-label="Row B, seat 10"><label for="e-B10">10</label>
<input id="e-B11" type="checkbox" name="early-seats" value="B11" aria-label="Row B, seat 11"><label for="e-B11">11</label>
<input id="e-B12" type="checkbox" name="early-seats" value="B12" aria-label="Row B, seat 12"><label for="e-B12">12</label>
<input id="e-B13" type="checkbox" name="early-seats" value="B13" aria-label="Row B, seat 13"><label for="e-B13">13</label>
<input id="e-B14" type="checkbox" name="early-seats" value="B14" aria-label="Row B, seat 14"><label for="e-B14">14</label>
<span class="row-name" aria-hidden="true">B</span>
</div>
<div class="row" role="group" aria-label="Row C">
<span class="row-name" aria-hidden="true">C</span>
<input id="e-C1" type="checkbox" name="early-seats" value="C1" aria-label="Row C, seat 1, sold" disabled><label for="e-C1" title="Sold">1</label>
<input id="e-C2" type="checkbox" name="early-seats" value="C2" aria-label="Row C, seat 2, sold" disabled><label for="e-C2" title="Sold">2</label>
<input id="e-C3" type="checkbox" name="early-seats" value="C3" aria-label="Row C, seat 3, sold" disabled><label for="e-C3" title="Sold">3</label>
<input id="e-C4" type="checkbox" name="early-seats" value="C4" aria-label="Row C, seat 4"><label for="e-C4">4</label>
<input id="e-C5" type="checkbox" name="early-seats" value="C5" aria-label="Row C, seat 5"><label for="e-C5">5</label>
<input id="e-C6" type="checkbox" name="early-seats" value="C6" aria-label="Row C, seat 6"><label for="e-C6">6</label>
<input id="e-C7" type="checkbox" name="early-seats" value="C7" aria-label="Row C, seat 7"><label for="e-C7">7</label>
<input id="e-C8" type="checkbox" name="early-seats" value="C8" aria-label="Row C, seat 8"><label for="e-C8">8</label>
<input id="e-C9" type="checkbox" name="early-seats" value="C9" aria-label="Row C, seat 9"><label for="e-C9">9</label>
<input id="e-C10" type="checkbox" name="early-seats" value="C10" aria-label="Row C, seat 10"><label for="e-C10">10</label>
<input id="e-C11" type="checkbox" name="early-seats" value="C11" aria-label="Row C, seat 11"><label for="e-C11">11</label>
<input id="e-C12" type="checkbox" name="early-seats" value="C12" aria-label="Row C, seat 12"><label for="e-C12">12</label>
<input id="e-C13" type="checkbox" name="early-seats" value="C13" aria-label="Row C, seat 13"><label for="e-C13">13</label>
<input id="e-C14" type="checkbox" name="early-seats" value="C14" aria-label="Row C, seat 14"><label for="e-C14">14</label>
<span class="row-name" aria-hidden="true">C</span>
</div>
<div class="row" role="group" aria-label="Row D">
<span class="row-name" aria-hidden="true">D</span>
<input id="e-D1" type="checkbox" name="early-seats" value="D1" aria-label="Row D, seat 1"><label for="e-D1">1</label>
<input id="e-D2" type="checkbox" name="early-seats" value="D2" aria-label="Row D, seat 2"><label for="e-D2">2</label>
<input id="e-D3" type="checkbox" name="early-seats" value="D3" aria-label="Row D, seat 3"><label for="e-D3">3</label>
<input id="e-D4" type="checkbox" name="early-seats" value="D4" aria-label="Row D, seat 4"><label for="e-D4">4</label>
<input id="e-D5" type="checkbox" name="early-seats" value="D5" aria-label="Row D, seat 5"><label for="e-D5">5</label>
<input id="e-D6" type="checkbox" name="early-seats" value="D6" aria-label="Row D, seat 6"><label for="e-D6">6</label>
<input id="e-D7" type="checkbox" name="early-seats" value="D7" aria-label="Row D, seat 7"><label for="e-D7">7</label>
<input id="e-D8" type="checkbox" name="early-seats" value="D8" aria-label="Row D, seat 8"><label for="e-D8">8</label>
<input id="e-D9" type="checkbox" name="early-seats" value="D9" aria-label="Row D, seat 9"><label for="e-D9">9</label>
<input id="e-D10" type="checkbox" name="early-seats" value="D10" aria-label="Row D, seat 10, sold" disabled><label for="e-D10" title="Sold">10</label>
<input id="e-D11" type="checkbox" name="early-seats" value="D11" aria-label="Row D, seat 11, sold" disabled><label for="e-D11" title="Sold">11</label>
<input id="e-D12" type="checkbox" name="early-seats" value="D12" aria-label="Row D, seat 12"><label for="e-D12">12</label>
<input id="e-D13" type="checkbox" name="early-seats" value="D13" aria-label="Row D, seat 13"><label for="e-D13">13</label>
<input id="e-D14" type="checkbox" name="early-seats" value="D14" aria-label="Row D, seat 14"><label for="e-D14">14</label>
<span class="row-name" aria-hidden="true">D</span>
</div>
<div class="row" role="group" aria-label="Row E">
<span class="row-name" aria-hidden="true">E</span>
<input id="e-E1" type="checkbox" name="early-seats" value="E1" aria-label="Row E, seat 1"><label for="e-E1">1</label>
<input id="e-E2" type="checkbox" name="early-seats" value="E2" aria-label="Row E, seat 2"><label for="e-E2">2</label>
<input id="e-E3" type="checkbox" name="early-seats" value="E3" aria-label="Row E, seat 3"><label for="e-E3">3</label>
<input id="e-E4" type="checkbox" name="early-seats" value="E4" aria-label="Row E, seat 4"><label for="e-E4">4</label>
<input id="e-E5" type="checkbox" name="early-seats" value="E5" aria-label="Row E, seat 5"><label for="e-E5">5</label>
<input id="e-E6" type="checkbox" name="early-seats" value="E6" aria-label="Row E, seat 6"><label for="e-E6">6</label>
<input id="e-E7" type="checkbox" name="early-seats" value="E7" aria-label="Row E, seat 7"><label for="e-E7">7</label>
<input id="e-E8" type="checkbox" name="early-seats" value="E8" aria-label="Row E, seat 8"><label for="e-E8">8</label>
<input id="e-E9" type="checkbox" name="early-seats" value="E9" aria-label="Row E, seat 9"><label for="e-E9">9</label>
<input id="e-E10" type="checkbox" name="early-seats" value="E10" aria-label="Row E, seat 10"><label for="e-E10">10</label>
<input id="e-E11" type="checkbox" name="early-seats" value="E11" aria-label="Row E, seat 11"><label for="e-E11">11</label>
<input id="e-E12" type="checkbox" name="early-seats" value="E12" aria-label="Row E, seat 12"><label for="e-E12">12</label>
<input id="e-E13" type="checkbox" name="early-seats" value="E13" aria-label="Row E, seat 13"><label for="e-E13">13</label>
<input id="e-E14" type="checkbox" name="early-seats" value="E14" aria-label="Row E, seat 14"><label for="e-E14">14</label>
<span class="row-name" aria-hidden="true">E</span>
</div>
<div class="row" role="group" aria-label="Row F">
<span class="row-name" aria-hidden="true">F</span>
<input id="e-F1" type="checkbox" name="early-seats" value="F1" aria-label="Row F, seat 1"><label for="e-F1">1</label>
<input id="e-F2" type="checkbox" name="early-seats" value="F2" aria-label="Row F, seat 2"><label for="e-F2">2</label>
<input id="e-F3" type="checkbox" name="early-seats" value="F3" aria-label="Row F, seat 3"><label for="e-F3">3</label>
<input id="e-F4" type="checkbox" name="early-seats" value="F4" aria-label="Row F, seat 4"><label for="e-F4">4</label>
<input id="e-F5" type="checkbox" name="early-seats" value="F5" aria-label="Row F, seat 5"><label for="e-F5">5</label>
<input id="e-F6" type="checkbox" name="early-seats" value="F6" aria-label="Row F, seat 6, sold" disabled><label for="e-F6" title="Sold">6</label>
<input id="e-F7" type="checkbox" name="early-seats" value="F7" aria-label="Row F, seat 7, sold" disabled><label for="e-F7" title="Sold">7</label>
<input id="e-F8" type="checkbox" name="early-seats" value="F8" aria-label="Row F, seat 8, sold" disabled><label for="e-F8" title="Sold">8</label>
<input id="e-F9" type="checkbox" name="early-seats" value="F9" aria-label="Row F, seat 9"><label for="e-F9">9</label>
<input id="e-F10" type="checkbox" name="early-seats" value="F10" aria-label="Row F, seat 10"><label for="e-F10">10</label>
<input id="e-F11" type="checkbox" name="early-seats" value="F11" aria-label="Row F, seat 11"><label for="e-F11">11</label>
<input id="e-F12" type="checkbox" name="early-seats" value="F12" aria-label="Row F, seat 12"><label for="e-F12">12</label>
<input id="e-F13" type="checkbox" name="early-seats" value="F13" aria-label="Row F, seat 13"><label for="e-F13">13</label>
<input id="e-F14" type="checkbox" name="early-seats" value="F14" aria-label="Row F, seat 14"><label for="e-F14">14</label>
<span class="row-name" aria-hidden="true">F</span>
</div>
<div class="row" role="group" aria-label="Row G">
<span class="row-name" aria-hidden="true">G</span>
<input id="e-G1" type="checkbox" name="early-seats" value="G1" aria-label="Row G, seat 1"><label for="e-G1">1</label>
<input id="e-G2" type="checkbox" name="early-seats" value="G2" aria-label="Row G, seat 2"><label for="e-G2">2</label>
<input id="e-G3" type="checkbox" name="early-seats" value="G3" aria-label="Row G, seat 3"><label for="e-G3">3</label>
<input id="e-G4" type="checkbox" name="early-seats" value="G4" aria-label="Row G, seat 4"><label for="e-G4">4</label>
<input id="e-G5" type="checkbox" name="early-seats" value="G5" aria-label="Row G, seat 5"><label for="e-G5">5</label>
<input id="e-G6" type="checkbox" name="early-seats" value="G6" aria-label="Row G, seat 6"><label for="e-G6">6</label>
<input id="e-G7" type="checkbox" name="early-seats" value="G7" aria-label="Row G, seat 7"><label for="e-G7">7</label>
<input id="e-G8" type="checkbox" name="early-seats" value="G8" aria-label="Row G, seat 8"><label for="e-G8">8</label>
<input id="e-G9" type="checkbox" name="early-seats" value="G9" aria-label="Row G, seat 9"><label for="e-G9">9</label>
<input id="e-G10" type="checkbox" name="early-seats" value="G10" aria-label="Row G, seat 10"><label for="e-G10">10</label>
<input id="e-G11" type="checkbox" name="early-seats" value="G11" aria-label="Row G, seat 11"><label for="e-G11">11</label>
<input id="e-G12" type="checkbox" name="early-seats" value="G12" aria-label="Row G, seat 12"><label for="e-G12">12</label>
<input id="e-G13" type="checkbox" name="early-seats" value="G13" aria-label="Row G, seat 13"><label for="e-G13">13</label>
<input id="e-G14" type="checkbox" name="early-seats" value="G14" aria-label="Row G, seat 14"><label for="e-G14">14</label>
<span class="row-name" aria-hidden="true">G</span>
</div>
<div class="row" role="group" aria-label="Row H">
<span class="row-name" aria-hidden="true">H</span>
<input id="e-H1" type="checkbox" name="early-seats" value="H1" aria-label="Row H, seat 1"><label for="e-H1">1</label>
<input id="e-H2" type="checkbox" name="early-seats" value="H2" aria-label="Row H, seat 2"><label for="e-H2">2</label>
<input id="e-H3" type="checkbox" name="early-seats" value="H3" aria-label="Row H, seat 3"><label for="e-H3">3</label>
<input id="e-H4" type="checkbox" name="early-seats" value="H4" aria-label="Row H, seat 4"><label for="e-H4">4</label>
<input id="e-H5" type="checkbox" name="early-seats" value="H5" aria-label="Row H, seat 5"><label for="e-H5">5</label>
<input id="e-H6" type="checkbox" name="early-seats" value="H6" aria-label="Row H, seat 6"><label for="e-H6">6</label>
<input id="e-H7" type="checkbox" name="early-seats" value="H7" aria-label="Row H, seat 7"><label for="e-H7">7</label>
<input id="e-H8" type="checkbox" name="early-seats" value="H8" aria-label="Row H, seat 8"><label for="e-H8">8</label>
<input id="e-H9" type="checkbox" name="early-seats" value="H9" aria-label="Row H, seat 9"><label for="e-H9">9</label>
<input id="e-H10" type="checkbox" name="early-seats" value="H10" aria-label="Row H, seat 10"><label for="e-H10">10</label>
<input id="e-H11" type="checkbox" name="early-seats" value="H11" aria-label="Row H, seat 11"><label for="e-H11">11</label>
<input id="e-H12" type="checkbox" name="early-seats" value="H12" aria-label="Row H, seat 12, sold" disabled><label for="e-H12" title="Sold">12</label>
<input id="e-H13" type="checkbox" name="early-seats" value="H13" aria-label="Row H, seat 13"><label for="e-H13">13</label>
<input id="e-H14" type="checkbox" name="early-seats" value="H14" aria-label="Row H, seat 14"><label for="e-H14">14</label>
<span class="row-name" aria-hidden="true">H</span>
</div>
<div class="row" role="group" aria-label="Row I">
<span class="row-name" aria-hidden="true">I</span>
<input id="e-I1" type="checkbox" name="early-seats" value="I1" aria-label="Row I, seat 1"><label for="e-I1">1</label>
<input id="e-I2" type="checkbox" name="early-seats" value="I2" aria-label="Row I, seat 2"><label for="e-I2">2</label>
<input id="e-I3" type="checkbox" name="early-seats" value="I3" aria-label="Row I, seat 3"><label for="e-I3">3</label>
<input id="e-I4" type="checkbox" name="early-seats" value="I4" aria-label="Row I, seat 4"><label for="e-I4">4</label>
<input id="e-I5" type="checkbox" name="early-seats" value="I5" aria-label="Row I, seat 5"><label for="e-I5">5</label>
<input id="e-I6" type="checkbox" name="early-seats" value="I6" aria-label="Row I, seat 6"><label for="e-I6">6</label>
<input id="e-I7" type="checkbox" name="early-seats" value="I7" aria-label="Row I, seat 7"><label for="e-I7">7</label>
<input id="e-I8" type="checkbox" name="early-seats" value="I8" aria-label="Row I, seat 8"><label for="e-I8">8</label>
<input id="e-I9" type="checkbox" name="early-seats" value="I9" aria-label="Row I, seat 9"><label for="e-I9">9</label>
<input id="e-I10" type="checkbox" name="early-seats" value="I10" aria-label="Row I, seat 10"><label for="e-I10">10</label>
<input id="e-I11" type="checkbox" name="early-seats" value="I11" aria-label="Row I, seat 11"><label for="e-I11">11</label>
<input id="e-I12" type="checkbox" name="early-seats" value="I12" aria-label="Row I, seat 12"><label for="e-I12">12</label>
<input id="e-I13" type="checkbox" name="early-seats" value="I13" aria-label="Row I, seat 13"><label for="e-I13">13</label>
<input id="e-I14" type="checkbox" name="early-seats" value="I14" aria-label="Row I, seat 14"><label for="e-I14">14</label>
<span class="row-name" aria-hidden="true">I</span>
</div>
<div class="row" role="group" aria-label="Row J">
<span class="row-name" aria-hidden="true">J</span>
<input id="e-J1" type="checkbox" name="early-seats" value="J1" aria-label="Row J, seat 1"><label for="e-J1">1</label>
<input id="e-J2" type="checkbox" name="early-seats" value="J2" aria-label="Row J, seat 2"><label for="e-J2">2</label>
<input id="e-J3" type="checkbox" name="early-seats" value="J3" aria-label="Row J, seat 3, sold" disabled><label for="e-J3" title="Sold">3</label>
<input id="e-J4" type="checkbox" name="early-seats" value="J4" aria-label="Row J, seat 4, sold" disabled><label for="e-J4" title="Sold">4</label>
<input id="e-J5" type="checkbox" name="early-seats" value="J5" aria-label="Row J, seat 5"><label for="e-J5">5</label>
<input id="e-J6" type="checkbox" name="early-seats" value="J6" aria-label="Row J, seat 6"><label for="e-J6">6</label>
<input id="e-J7" type="checkbox" name="early-seats" value="J7" aria-label="Row J, seat 7"><label for="e-J7">7</label>
<input id="e-J8" type="checkbox" name="early-seats" value="J8" aria-label="Row J, seat 8"><label for="e-J8">8</label>
<input id="e-J9" type="checkbox" name="early-seats" value="J9" aria-label="Row J, seat 9"><label for="e-J9">9</label>
<input id="e-J10" type="checkbox" name="early-seats" value="J10" aria-label="Row J, seat 10"><label for="e-J10">10</label>
<input id="e-J11" type="checkbox" name="early-seats" value="J11" aria-label="Row J, seat 11"><label for="e-J11">11</label>
<input id="e-J12" type="checkbox" name="early-seats" value="J12" aria-label="Row J, seat 12"><label for="e-J12">12</label>
<input id="e-J13" type="checkbox" name="early-seats" value="J13" aria-label="Row J, seat 13"><label for="e-J13">13</label>
<input id="e-J14" type="checkbox" name="early-seats" value="J14" aria-label="Row J, seat 14"><label for="e-J14">14</label>
<span class="row-name" aria-hidden="true">J</span>
</div>
<div class="row" role="group" aria-label="Row K">
<span class="row-name" aria-hidden="true">K</span>
<input id="e-K1" type="checkbox" name="early-seats" value="K1" aria-label="Row K, seat 1"><label for="e-K1">1</label>
<input id="e-K2" type="checkbox" name="early-seats" value="K2" aria-label="Row K, seat 2"><label for="e-K2">2</label>
<input id="e-K3" type="checkbox" name="early-seats" value="K3" aria-label="Row K, seat 3"><label for="e-K3">3</label>
<input id="e-K4" type="checkbox" name="early-seats" value="K4" aria-label="Row K, seat 4"><label for="e-K4">4</label>
<input id="e-K5" type="checkbox" name="early-seats" value="K5" aria-label="Row K, seat 5"><label for="e-K5">5</label>
<input id="e-K6" type="checkbox" name="early-seats" value="K6" aria-label="Row K, seat 6"><label for="e-K6">6</label>
<input id="e-K7" type="checkbox" name="early-seats" value="K7" aria-label="Row K, seat 7"><label for="e-K7">7</label>
<input id="e-K8" type="checkbox" name="early-seats" value="K8" aria-label="Row K, seat 8"><label for="e-K8">8</label>
<input id="e-K9" type="checkbox" name="early-seats" value="K9" aria-label="Row K, seat 9, sold" disabled><label for="e-K9" title="Sold">9</label>
<input id="e-K10" type="checkbox" name="early-seats" value="K10" aria-label="Row K, seat 10"><label for="e-K10">10</label>
<input id="e-K11" type="checkbox" name="early-seats" value="K11" aria-label="Row K, seat 11"><label for="e-K11">11</label>
<input id="e-K12" type="checkbox" name="early-seats" value="K12" aria-label="Row K, seat 12"><label for="e-K12">12</label>
<input id="e-K13" type="checkbox" name="early-seats" value="K13" aria-label="Row K, seat 13"><label for="e-K13">13</label>
<input id="e-K14" type="checkbox" name="early-seats" value="K14" aria-label="Row K, seat 14"><label for="e-K14">14</label>
<span class="row-name" aria-hidden="true">K</span>
</div>
<div class="row" role="group" aria-label="Row L">
<span class="row-name" aria-hidden="true">L</span>
<input id="e-L1" type="checkbox" name="early-seats" value="L1" aria-label="Row L, seat 1"><label for="e-L1">1</label>
<input id="e-L2" type="checkbox" name="early-seats" value="L2" aria-label="Row L, seat 2"><label for="e-L2">2</label>
<input id="e-L3" type="checkbox" name="early-seats" value="L3" aria-label="Row L, seat 3"><label for="e-L3">3</label>
<input id="e-L4" type="checkbox" name="early-seats" value="L4" aria-label="Row L, seat 4"><label for="e-L4">4</label>
<input id="e-L5" type="checkbox" name="early-seats" value="L5" aria-label="Row L, seat 5"><label for="e-L5">5</label>
<input id="e-L6" type="checkbox" name="early-seats" value="L6" aria-label="Row L, seat 6"><label for="e-L6">6</label>
<input id="e-L7" type="checkbox" name="early-seats" value="L7" aria-label="Row L, seat 7"><label for="e-L7">7</label>
<input id="e-L8" type="checkbox" name="early-seats" value="L8" aria-label="Row L, seat 8"><label for="e-L8">8</label>
<input id="e-L9" type="checkbox" name="early-seats" value="L9" aria-label="Row L, seat 9"><label for="e-L9">9</label>
<input id="e-L10" type="checkbox" name="early-seats" value="L10" aria-label="Row L, seat 10"><label for="e-L10">10</label>
<input id="e-L11" type="checkbox" name="early-seats" value="L11" aria-label="Row L, seat 11"><label for="e-L11">11</label>
<input id="e-L12" type="checkbox" name="early-seats" value="L12" aria-label="Row L, seat 12"><label for="e-L12">12</label>
<input id="e-L13" type="checkbox" name="early-seats" value="L13" aria-label="Row L, seat 13, sold" disabled><label for="e-L13" title="Sold">13</label>
<input id="e-L14" type="checkbox" name="early-seats" value="L14" aria-label="Row L, seat 14, sold" disabled><label for="e-L14" title="Sold">14</label>
<span class="row-name" aria-hidden="true">L</span>
</div>
</div>
<p class="swipe-note">On a small screen, swipe the seating plan sideways to see every seat.</p>
</div>
<p class="group-note"><strong>Schools & groups:</strong> keep picking—the basket badge shows the full seat count, including 12 and 14.</p>
</fieldset>
<!-- LATE SHOWING: remove/add disabled to change sample sold seats. -->
<fieldset class="seat-plan plan-late" id="plan-late">
<legend class="sr-only">Seats for Letters from Lisbon at 7:45 PM</legend>
<div class="plan-heading">
<div>
<h3>Letters from Lisbon</h3>
<p>Tonight · 7:45 PM · Screen Two</p>
</div>
<div class="plan-price">$11.50 <small>per seat · evening</small></div>
</div>
<div class="auditorium-panel">
<div class="screen">Screen Two</div>
<div class="seat-key" aria-label="Seating plan key">
<span><i class="key-seat" aria-hidden="true"></i>Available</span>
<span><i class="key-seat selected" aria-hidden="true"></i>Your seat</span>
<span><i class="key-seat sold" aria-hidden="true"></i>Sold</span>
</div>
<div class="auditorium" aria-label="Twelve rows, A through L, with fourteen seats in each row">
<div class="row" role="group" aria-label="Row A">
<span class="row-name" aria-hidden="true">A</span>
<input id="l-A1" type="checkbox" name="late-seats" value="A1" aria-label="Row A, seat 1"><label for="l-A1">1</label>
<input id="l-A2" type="checkbox" name="late-seats" value="A2" aria-label="Row A, seat 2"><label for="l-A2">2</label>
<input id="l-A3" type="checkbox" name="late-seats" value="A3" aria-label="Row A, seat 3"><label for="l-A3">3</label>
<input id="l-A4" type="checkbox" name="late-seats" value="A4" aria-label="Row A, seat 4"><label for="l-A4">4</label>
<input id="l-A5" type="checkbox" name="late-seats" value="A5" aria-label="Row A, seat 5"><label for="l-A5">5</label>
<input id="l-A6" type="checkbox" name="late-seats" value="A6" aria-label="Row A, seat 6"><label for="l-A6">6</label>
<input id="l-A7" type="checkbox" name="late-seats" value="A7" aria-label="Row A, seat 7, sold" disabled><label for="l-A7" title="Sold">7</label>
<input id="l-A8" type="checkbox" name="late-seats" value="A8" aria-label="Row A, seat 8, sold" disabled><label for="l-A8" title="Sold">8</label>
<input id="l-A9" type="checkbox" name="late-seats" value="A9" aria-label="Row A, seat 9, sold" disabled><label for="l-A9" title="Sold">9</label>
<input id="l-A10" type="checkbox" name="late-seats" value="A10" aria-label="Row A, seat 10"><label for="l-A10">10</label>
<input id="l-A11" type="checkbox" name="late-seats" value="A11" aria-label="Row A, seat 11"><label for="l-A11">11</label>
<input id="l-A12" type="checkbox" name="late-seats" value="A12" aria-label="Row A, seat 12"><label for="l-A12">12</label>
<input id="l-A13" type="checkbox" name="late-seats" value="A13" aria-label="Row A, seat 13"><label for="l-A13">13</label>
<input id="l-A14" type="checkbox" name="late-seats" value="A14" aria-label="Row A, seat 14"><label for="l-A14">14</label>
<span class="row-name" aria-hidden="true">A</span>
</div>
<div class="row" role="group" aria-label="Row B">
<span class="row-name" aria-hidden="true">B</span>
<input id="l-B1" type="checkbox" name="late-seats" value="B1" aria-label="Row B, seat 1"><label for="l-B1">1</label>
<input id="l-B2" type="checkbox" name="late-seats" value="B2" aria-label="Row B, seat 2, sold" disabled><label for="l-B2" title="Sold">2</label>
<input id="l-B3" type="checkbox" name="late-seats" value="B3" aria-label="Row B, seat 3, sold" disabled><label for="l-B3" title="Sold">3</label>
<input id="l-B4" type="checkbox" name="late-seats" value="B4" aria-label="Row B, seat 4"><label for="l-B4">4</label>
<input id="l-B5" type="checkbox" name="late-seats" value="B5" aria-label="Row B, seat 5"><label for="l-B5">5</label>
<input id="l-B6" type="checkbox" name="late-seats" value="B6" aria-label="Row B, seat 6"><label for="l-B6">6</label>
<input id="l-B7" type="checkbox" name="late-seats" value="B7" aria-label="Row B, seat 7"><label for="l-B7">7</label>
<input id="l-B8" type="checkbox" name="late-seats" value="B8" aria-label="Row B, seat 8"><label for="l-B8">8</label>
<input id="l-B9" type="checkbox" name="late-seats" value="B9" aria-label="Row B, seat 9"><label for="l-B9">9</label>
<input id="l-B10" type="checkbox" name="late-seats" value="B10" aria-label="Row B, seat 10"><label for="l-B10">10</label>
<input id="l-B11" type="checkbox" name="late-seats" value="B11" aria-label="Row B, seat 11"><label for="l-B11">11</label>
<input id="l-B12" type="checkbox" name="late-seats" value="B12" aria-label="Row B, seat 12"><label for="l-B12">12</label>
<input id="l-B13" type="checkbox" name="late-seats" value="B13" aria-label="Row B, seat 13"><label for="l-B13">13</label>
<input id="l-B14" type="checkbox" name="late-seats" value="B14" aria-label="Row B, seat 14"><label for="l-B14">14</label>
<span class="row-name" aria-hidden="true">B</span>
</div>
<div class="row" role="group" aria-label="Row C">
<span class="row-name" aria-hidden="true">C</span>
<input id="l-C1" type="checkbox" name="late-seats" value="C1" aria-label="Row C, seat 1"><label for="l-C1">1</label>
<input id="l-C2" type="checkbox" name="late-seats" value="C2" aria-label="Row C, seat 2"><label for="l-C2">2</label>
<input id="l-C3" type="checkbox" name="late-seats" value="C3" aria-label="Row C, seat 3"><label for="l-C3">3</label>
<input id="l-C4" type="checkbox" name="late-seats" value="C4" aria-label="Row C, seat 4"><label for="l-C4">4</label>
<input id="l-C5" type="checkbox" name="late-seats" value="C5" aria-label="Row C, seat 5"><label for="l-C5">5</label>
<input id="l-C6" type="checkbox" name="late-seats" value="C6" aria-label="Row C, seat 6"><label for="l-C6">6</label>
<input id="l-C7" type="checkbox" name="late-seats" value="C7" aria-label="Row C, seat 7"><label for="l-C7">7</label>
<input id="l-C8" type="checkbox" name="late-seats" value="C8" aria-label="Row C, seat 8"><label for="l-C8">8</label>
<input id="l-C9" type="checkbox" name="late-seats" value="C9" aria-label="Row C, seat 9"><label for="l-C9">9</label>
<input id="l-C10" type="checkbox" name="late-seats" value="C10" aria-label="Row C, seat 10"><label for="l-C10">10</label>
<input id="l-C11" type="checkbox" name="late-seats" value="C11" aria-label="Row C, seat 11, sold" disabled><label for="l-C11" title="Sold">11</label>
<input id="l-C12" type="checkbox" name="late-seats" value="C12" aria-label="Row C, seat 12"><label for="l-C12">12</label>
<input id="l-C13" type="checkbox" name="late-seats" value="C13" aria-label="Row C, seat 13"><label for="l-C13">13</label>
<input id="l-C14" type="checkbox" name="late-seats" value="C14" aria-label="Row C, seat 14"><label for="l-C14">14</label>
<span class="row-name" aria-hidden="true">C</span>
</div>
<div class="row" role="group" aria-label="Row D">
<span class="row-name" aria-hidden="true">D</span>
<input id="l-D1" type="checkbox" name="late-seats" value="D1" aria-label="Row D, seat 1"><label for="l-D1">1</label>
<input id="l-D2" type="checkbox" name="late-seats" value="D2" aria-label="Row D, seat 2"><label for="l-D2">2</label>
<input id="l-D3" type="checkbox" name="late-seats" value="D3" aria-label="Row D, seat 3"><label for="l-D3">3</label>
<input id="l-D4" type="checkbox" name="late-seats" value="D4" aria-label="Row D, seat 4"><label for="l-D4">4</label>
<input id="l-D5" type="checkbox" name="late-seats" value="D5" aria-label="Row D, seat 5, sold" disabled><label for="l-D5" title="Sold">5</label>
<input id="l-D6" type="checkbox" name="late-seats" value="D6" aria-label="Row D, seat 6, sold" disabled><label for="l-D6" title="Sold">6</label>
<input id="l-D7" type="checkbox" name="late-seats" value="D7" aria-label="Row D, seat 7, sold" disabled><label for="l-D7" title="Sold">7</label>
<input id="l-D8" type="checkbox" name="late-seats" value="D8" aria-label="Row D, seat 8, sold" disabled><label for="l-D8" title="Sold">8</label>
<input id="l-D9" type="checkbox" name="late-seats" value="D9" aria-label="Row D, seat 9"><label for="l-D9">9</label>
<input id="l-D10" type="checkbox" name="late-seats" value="D10" aria-label="Row D, seat 10"><label for="l-D10">10</label>
<input id="l-D11" type="checkbox" name="late-seats" value="D11" aria-label="Row D, seat 11"><label for="l-D11">11</label>
<input id="l-D12" type="checkbox" name="late-seats" value="D12" aria-label="Row D, seat 12"><label for="l-D12">12</label>
<input id="l-D13" type="checkbox" name="late-seats" value="D13" aria-label="Row D, seat 13"><label for="l-D13">13</label>
<input id="l-D14" type="checkbox" name="late-seats" value="D14" aria-label="Row D, seat 14"><label for="l-D14">14</label>
<span class="row-name" aria-hidden="true">D</span>
</div>
<div class="row" role="group" aria-label="Row E">
<span class="row-name" aria-hidden="true">E</span>
<input id="l-E1" type="checkbox" name="late-seats" value="E1" aria-label="Row E, seat 1, sold" disabled><label for="l-E1" title="Sold">1</label>
<input id="l-E2" type="checkbox" name="late-seats" value="E2" aria-label="Row E, seat 2"><label for="l-E2">2</label>
<input id="l-E3" type="checkbox" name="late-seats" value="E3" aria-label="Row E, seat 3"><label for="l-E3">3</label>
<input id="l-E4" type="checkbox" name="late-seats" value="E4" aria-label="Row E, seat 4"><label for="l-E4">4</label>
<input id="l-E5" type="checkbox" name="late-seats" value="E5" aria-label="Row E, seat 5"><label for="l-E5">5</label>
<input id="l-E6" type="checkbox" name="late-seats" value="E6" aria-label="Row E, seat 6"><label for="l-E6">6</label>
<input id="l-E7" type="checkbox" name="late-seats" value="E7" aria-label="Row E, seat 7"><label for="l-E7">7</label>
<input id="l-E8" type="checkbox" name="late-seats" value="E8" aria-label="Row E, seat 8"><label for="l-E8">8</label>
<input id="l-E9" type="checkbox" name="late-seats" value="E9" aria-label="Row E, seat 9"><label for="l-E9">9</label>
<input id="l-E10" type="checkbox" name="late-seats" value="E10" aria-label="Row E, seat 10"><label for="l-E10">10</label>
<input id="l-E11" type="checkbox" name="late-seats" value="E11" aria-label="Row E, seat 11"><label for="l-E11">11</label>
<input id="l-E12" type="checkbox" name="late-seats" value="E12" aria-label="Row E, seat 12"><label for="l-E12">12</label>
<input id="l-E13" type="checkbox" name="late-seats" value="E13" aria-label="Row E, seat 13"><label for="l-E13">13</label>
<input id="l-E14" type="checkbox" name="late-seats" value="E14" aria-label="Row E, seat 14"><label for="l-E14">14</label>
<span class="row-name" aria-hidden="true">E</span>
</div>
<div class="row" role="group" aria-label="Row F">
<span class="row-name" aria-hidden="true">F</span>
<input id="l-F1" type="checkbox" name="late-seats" value="F1" aria-label="Row F, seat 1"><label for="l-F1">1</label>
<input id="l-F2" type="checkbox" name="late-seats" value="F2" aria-label="Row F, seat 2"><label for="l-F2">2</label>
<input id="l-F3" type="checkbox" name="late-seats" value="F3" aria-label="Row F, seat 3"><label for="l-F3">3</label>
<input id="l-F4" type="checkbox" name="late-seats" value="F4" aria-label="Row F, seat 4"><label for="l-F4">4</label>
<input id="l-F5" type="checkbox" name="late-seats" value="F5" aria-label="Row F, seat 5"><label for="l-F5">5</label>
<input id="l-F6" type="checkbox" name="late-seats" value="F6" aria-label="Row F, seat 6"><label for="l-F6">6</label>
<input id="l-F7" type="checkbox" name="late-seats" value="F7" aria-label="Row F, seat 7"><label for="l-F7">7</label>
<input id="l-F8" type="checkbox" name="late-seats" value="F8" aria-label="Row F, seat 8"><label for="l-F8">8</label>
<input id="l-F9" type="checkbox" name="late-seats" value="F9" aria-label="Row F, seat 9"><label for="l-F9">9</label>
<input id="l-F10" type="checkbox" name="late-seats" value="F10" aria-label="Row F, seat 10"><label for="l-F10">10</label>
<input id="l-F11" type="checkbox" name="late-seats" value="F11" aria-label="Row F, seat 11"><label for="l-F11">11</label>
<input id="l-F12" type="checkbox" name="late-seats" value="F12" aria-label="Row F, seat 12"><label for="l-F12">12</label>
<input id="l-F13" type="checkbox" name="late-seats" value="F13" aria-label="Row F, seat 13, sold" disabled><label for="l-F13" title="Sold">13</label>
<input id="l-F14" type="checkbox" name="late-seats" value="F14" aria-label="Row F, seat 14, sold" disabled><label for="l-F14" title="Sold">14</label>
<span class="row-name" aria-hidden="true">F</span>
</div>
<div class="row" role="group" aria-label="Row G">
<span class="row-name" aria-hidden="true">G</span>
<input id="l-G1" type="checkbox" name="late-seats" value="G1" aria-label="Row G, seat 1"><label for="l-G1">1</label>
<input id="l-G2" type="checkbox" name="late-seats" value="G2" aria-label="Row G, seat 2"><label for="l-G2">2</label>
<input id="l-G3" type="checkbox" name="late-seats" value="G3" aria-label="Row G, seat 3"><label for="l-G3">3</label>
<input id="l-G4" type="checkbox" name="late-seats" value="G4" aria-label="Row G, seat 4"><label for="l-G4">4</label>
<input id="l-G5" type="checkbox" name="late-seats" value="G5" aria-label="Row G, seat 5"><label for="l-G5">5</label>
<input id="l-G6" type="checkbox" name="late-seats" value="G6" aria-label="Row G, seat 6, sold" disabled><label for="l-G6" title="Sold">6</label>
<input id="l-G7" type="checkbox" name="late-seats" value="G7" aria-label="Row G, seat 7, sold" disabled><label for="l-G7" title="Sold">7</label>
<input id="l-G8" type="checkbox" name="late-seats" value="G8" aria-label="Row G, seat 8"><label for="l-G8">8</label>
<input id="l-G9" type="checkbox" name="late-seats" value="G9" aria-label="Row G, seat 9"><label for="l-G9">9</label>
<input id="l-G10" type="checkbox" name="late-seats" value="G10" aria-label="Row G, seat 10"><label for="l-G10">10</label>
<input id="l-G11" type="checkbox" name="late-seats" value="G11" aria-label="Row G, seat 11"><label for="l-G11">11</label>
<input id="l-G12" type="checkbox" name="late-seats" value="G12" aria-label="Row G, seat 12"><label for="l-G12">12</label>
<input id="l-G13" type="checkbox" name="late-seats" value="G13" aria-label="Row G, seat 13"><label for="l-G13">13</label>
<input id="l-G14" type="checkbox" name="late-seats" value="G14" aria-label="Row G, seat 14"><label for="l-G14">14</label>
<span class="row-name" aria-hidden="true">G</span>
</div>
<div class="row" role="group" aria-label="Row H">
<span class="row-name" aria-hidden="true">H</span>
<input id="l-H1" type="checkbox" name="late-seats" value="H1" aria-label="Row H, seat 1"><label for="l-H1">1</label>
<input id="l-H2" type="checkbox" name="late-seats" value="H2" aria-label="Row H, seat 2"><label for="l-H2">2</label>
<input id="l-H3" type="checkbox" name="late-seats" value="H3" aria-label="Row H, seat 3, sold" disabled><label for="l-H3" title="Sold">3</label>
<input id="l-H4" type="checkbox" name="late-seats" value="H4" aria-label="Row H, seat 4, sold" disabled><label for="l-H4" title="Sold">4</label>
<input id="l-H5" type="checkbox" name="late-seats" value="H5" aria-label="Row H, seat 5, sold" disabled><label for="l-H5" title="Sold">5</label>
<input id="l-H6" type="checkbox" name="late-seats" value="H6" aria-label="Row H, seat 6"><label for="l-H6">6</label>
<input id="l-H7" type="checkbox" name="late-seats" value="H7" aria-label="Row H, seat 7"><label for="l-H7">7</label>
<input id="l-H8" type="checkbox" name="late-seats" value="H8" aria-label="Row H, seat 8"><label for="l-H8">8</label>
<input id="l-H9" type="checkbox" name="late-seats" value="H9" aria-label="Row H, seat 9"><label for="l-H9">9</label>
<input id="l-H10" type="checkbox" name="late-seats" value="H10" aria-label="Row H, seat 10"><label for="l-H10">10</label>
<input id="l-H11" type="checkbox" name="late-seats" value="H11" aria-label="Row H, seat 11"><label for="l-H11">11</label>
<input id="l-H12" type="checkbox" name="late-seats" value="H12" aria-label="Row H, seat 12"><label for="l-H12">12</label>
<input id="l-H13" type="checkbox" name="late-seats" value="H13" aria-label="Row H, seat 13"><label for="l-H13">13</label>
<input id="l-H14" type="checkbox" name="late-seats" value="H14" aria-label="Row H, seat 14"><label for="l-H14">14</label>
<span class="row-name" aria-hidden="true">H</span>
</div>
<div class="row" role="group" aria-label="Row I">
<span class="row-name" aria-hidden="true">I</span>
<input id="l-I1" type="checkbox" name="late-seats" value="I1" aria-label="Row I, seat 1"><label for="l-I1">1</label>
<input id="l-I2" type="checkbox" name="late-seats" value="I2" aria-label="Row I, seat 2"><label for="l-I2">2</label>
<input id="l-I3" type="checkbox" name="late-seats" value="I3" aria-label="Row I, seat 3"><label for="l-I3">3</label>
<input id="l-I4" type="checkbox" name="late-seats" value="I4" aria-label="Row I, seat 4"><label for="l-I4">4</label>
<input id="l-I5" type="checkbox" name="late-seats" value="I5" aria-label="Row I, seat 5"><label for="l-I5">5</label>
<input id="l-I6" type="checkbox" name="late-seats" value="I6" aria-label="Row I, seat 6"><label for="l-I6">6</label>
<input id="l-I7" type="checkbox" name="late-seats" value="I7" aria-label="Row I, seat 7"><label for="l-I7">7</label>
<input id="l-I8" type="checkbox" name="late-seats" value="I8" aria-label="Row I, seat 8"><label for="l-I8">8</label>
<input id="l-I9" type="checkbox" name="late-seats" value="I9" aria-label="Row I, seat 9"><label for="l-I9">9</label>
<input id="l-I10" type="checkbox" name="late-seats" value="I10" aria-label="Row I, seat 10, sold" disabled><label for="l-I10" title="Sold">10</label>
<input id="l-I11" type="checkbox" name="late-seats" value="I11" aria-label="Row I, seat 11"><label for="l-I11">11</label>
<input id="l-I12" type="checkbox" name="late-seats" value="I12" aria-label="Row I, seat 12"><label for="l-I12">12</label>
<input id="l-I13" type="checkbox" name="late-seats" value="I13" aria-label="Row I, seat 13"><label for="l-I13">13</label>
<input id="l-I14" type="checkbox" name="late-seats" value="I14" aria-label="Row I, seat 14"><label for="l-I14">14</label>
<span class="row-name" aria-hidden="true">I</span>
</div>
<div class="row" role="group" aria-label="Row J">
<span class="row-name" aria-hidden="true">J</span>
<input id="l-J1" type="checkbox" name="late-seats" value="J1" aria-label="Row J, seat 1"><label for="l-J1">1</label>
<input id="l-J2" type="checkbox" name="late-seats" value="J2" aria-label="Row J, seat 2"><label for="l-J2">2</label>
<input id="l-J3" type="checkbox" name="late-seats" value="J3" aria-label="Row J, seat 3"><label for="l-J3">3</label>
<input id="l-J4" type="checkbox" name="late-seats" value="J4" aria-label="Row J, seat 4"><label for="l-J4">4</label>
<input id="l-J5" type="checkbox" name="late-seats" value="J5" aria-label="Row J, seat 5"><label for="l-J5">5</label>
<input id="l-J6" type="checkbox" name="late-seats" value="J6" aria-label="Row J, seat 6"><label for="l-J6">6</label>
<input id="l-J7" type="checkbox" name="late-seats" value="J7" aria-label="Row J, seat 7"><label for="l-J7">7</label>
<input id="l-J8" type="checkbox" name="late-seats" value="J8" aria-label="Row J, seat 8, sold" disabled><label for="l-J8" title="Sold">8</label>
<input id="l-J9" type="checkbox" name="late-seats" value="J9" aria-label="Row J, seat 9, sold" disabled><label for="l-J9" title="Sold">9</label>
<input id="l-J10" type="checkbox" name="late-seats" value="J10" aria-label="Row J, seat 10"><label for="l-J10">10</label>
<input id="l-J11" type="checkbox" name="late-seats" value="J11" aria-label="Row J, seat 11"><label for="l-J11">11</label>
<input id="l-J12" type="checkbox" name="late-seats" value="J12" aria-label="Row J, seat 12"><label for="l-J12">12</label>
<input id="l-J13" type="checkbox" name="late-seats" value="J13" aria-label="Row J, seat 13"><label for="l-J13">13</label>
<input id="l-J14" type="checkbox" name="late-seats" value="J14" aria-label="Row J, seat 14"><label for="l-J14">14</label>
<span class="row-name" aria-hidden="true">J</span>
</div>
<div class="row" role="group" aria-label="Row K">
<span class="row-name" aria-hidden="true">K</span>
<input id="l-K1" type="checkbox" name="late-seats" value="K1" aria-label="Row K, seat 1"><label for="l-K1">1</label>
<input id="l-K2" type="checkbox" name="late-seats" value="K2" aria-label="Row K, seat 2, sold" disabled><label for="l-K2" title="Sold">2</label>
<input id="l-K3" type="checkbox" name="late-seats" value="K3" aria-label="Row K, seat 3, sold" disabled><label for="l-K3" title="Sold">3</label>
<input id="l-K4" type="checkbox" name="late-seats" value="K4" aria-label="Row K, seat 4, sold" disabled><label for="l-K4" title="Sold">4</label>
<input id="l-K5" type="checkbox" name="late-seats" value="K5" aria-label="Row K, seat 5"><label for="l-K5">5</label>
<input id="l-K6" type="checkbox" name="late-seats" value="K6" aria-label="Row K, seat 6"><label for="l-K6">6</label>
<input id="l-K7" type="checkbox" name="late-seats" value="K7" aria-label="Row K, seat 7"><label for="l-K7">7</label>
<input id="l-K8" type="checkbox" name="late-seats" value="K8" aria-label="Row K, seat 8"><label for="l-K8">8</label>
<input id="l-K9" type="checkbox" name="late-seats" value="K9" aria-label="Row K, seat 9"><label for="l-K9">9</label>
<input id="l-K10" type="checkbox" name="late-seats" value="K10" aria-label="Row K, seat 10"><label for="l-K10">10</label>
<input id="l-K11" type="checkbox" name="late-seats" value="K11" aria-label="Row K, seat 11"><label for="l-K11">11</label>
<input id="l-K12" type="checkbox" name="late-seats" value="K12" aria-label="Row K, seat 12"><label for="l-K12">12</label>
<input id="l-K13" type="checkbox" name="late-seats" value="K13" aria-label="Row K, seat 13"><label for="l-K13">13</label>
<input id="l-K14" type="checkbox" name="late-seats" value="K14" aria-label="Row K, seat 14"><label for="l-K14">14</label>
<span class="row-name" aria-hidden="true">K</span>
</div>
<div class="row" role="group" aria-label="Row L">
<span class="row-name" aria-hidden="true">L</span>
<input id="l-L1" type="checkbox" name="late-seats" value="L1" aria-label="Row L, seat 1"><label for="l-L1">1</label>
<input id="l-L2" type="checkbox" name="late-seats" value="L2" aria-label="Row L, seat 2"><label for="l-L2">2</label>
<input id="l-L3" type="checkbox" name="late-seats" value="L3" aria-label="Row L, seat 3"><label for="l-L3">3</label>
<input id="l-L4" type="checkbox" name="late-seats" value="L4" aria-label="Row L, seat 4"><label for="l-L4">4</label>
<input id="l-L5" type="checkbox" name="late-seats" value="L5" aria-label="Row L, seat 5"><label for="l-L5">5</label>
<input id="l-L6" type="checkbox" name="late-seats" value="L6" aria-label="Row L, seat 6"><label for="l-L6">6</label>
<input id="l-L7" type="checkbox" name="late-seats" value="L7" aria-label="Row L, seat 7"><label for="l-L7">7</label>
<input id="l-L8" type="checkbox" name="late-seats" value="L8" aria-label="Row L, seat 8"><label for="l-L8">8</label>
<input id="l-L9" type="checkbox" name="late-seats" value="L9" aria-label="Row L, seat 9"><label for="l-L9">9</label>
<input id="l-L10" type="checkbox" name="late-seats" value="L10" aria-label="Row L, seat 10, sold" disabled><label for="l-L10" title="Sold">10</label>
<input id="l-L11" type="checkbox" name="late-seats" value="L11" aria-label="Row L, seat 11, sold" disabled><label for="l-L11" title="Sold">11</label>
<input id="l-L12" type="checkbox" name="late-seats" value="L12" aria-label="Row L, seat 12"><label for="l-L12">12</label>
<input id="l-L13" type="checkbox" name="late-seats" value="L13" aria-label="Row L, seat 13"><label for="l-L13">13</label>
<input id="l-L14" type="checkbox" name="late-seats" value="L14" aria-label="Row L, seat 14"><label for="l-L14">14</label>
<span class="row-name" aria-hidden="true">L</span>
</div>
</div>
<p class="swipe-note">On a small screen, swipe the seating plan sideways to see every seat.</p>
</div>
<p class="group-note"><strong>Schools & groups:</strong> keep picking—the basket badge shows the full seat count, including 12 and 14.</p>
</fieldset>
</div>
<section class="purchase-bar" id="purchase" aria-label="Current ticket selection">
<div class="purchase-summary">
<strong class="summary-film" id="summary-film">Choose a film to begin</strong>
<span class="summary-detail" id="summary-detail">Your selected seats will appear here.</span>
</div>
<div class="total-block">
<span class="total-label">Running total · USD</span>
<div class="total-value">
<span class="js-only" id="usd-total">$0.00</span>
<span class="css-only css-usd" aria-hidden="true"></span>
</div>
<span class="price-rule" id="price-rule">Per-seat price appears after film selection</span>
</div>
<div class="fx-block">
<span class="total-label">Euro guide</span>
<strong>
<span class="js-only" id="eur-total">≈ €0.00</span>
<span class="css-only css-eur" aria-hidden="true"></span>
</strong>
<span class="rate-note" title="This is not a live market rate">Offline sample · €1 = $1.2500 · not live</span>
</div>
<button class="review-button js-only" id="review-button" type="button" disabled>Review selection</button>
</section>
<a class="basket" id="basket" href="#purchase" aria-label="Basket; selected seat count is shown in the small circle">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4.5 8.5h15l-1.4 11h-12l-1.6-11Z"></path>
<path d="M9 9V6.5a3 3 0 0 1 6 0V9M8 12.5h8"></path>
</svg>
<span class="basket-count" id="basket-badge" aria-hidden="true">
<span class="js-only" id="basket-count">0</span>
<span class="css-only css-count"></span>
</span>
</a>
<p class="sr-only" id="selection-status" aria-live="polite"></p>
</form>
<p class="fine-print">
Prices are per seat and follow the screening start time. The euro figure is an offline sample guide, not a live quote.<br>
Reviewing a selection does not reserve seats or take payment.
</p>
</main>
</div>
<dialog id="review-dialog" aria-labelledby="review-heading">
<div class="dialog-inner">
<button class="dialog-close" type="button" data-close aria-label="Close review">×</button>
<p class="eyebrow">Your selection</p>
<h2 id="review-heading">Review your seats</h2>
<p class="review-show" id="review-show"></p>
<strong>Selected seats</strong>
<ul class="review-seats" id="review-seats"></ul>
<div class="review-total">
<strong id="review-usd">$0.00</strong>
<span id="review-eur">≈ €0.00</span>
</div>
<p class="offline-warning">
<strong>Selection only—not a reservation.</strong>
Availability has not been rechecked and no payment has been taken.
The euro conversion uses the labelled offline sample rate.
</p>
<div class="dialog-actions">
<button class="dialog-button" id="print-selection" type="button">Print selection</button>
<button class="dialog-button secondary" type="button" data-close>Back to seats</button>
</div>
</div>
</dialog>
<script>
(() => {
"use strict";
const form = document.getElementById("ticket-form");
const filmInputs = Array.from(document.querySelectorAll(".film-choice"));
const usdOutput = document.getElementById("usd-total");
const eurOutput = document.getElementById("eur-total");
const badge = document.getElementById("basket-badge");
const badgeCount = document.getElementById("basket-count");
const basket = document.getElementById("basket");
const summaryFilm = document.getElementById("summary-film");
const summaryDetail = document.getElementById("summary-detail");
const priceRule = document.getElementById("price-rule");
const reviewButton = document.getElementById("review-button");
const status = document.getElementById("selection-status");
const reviewDialog = document.getElementById("review-dialog");
const fxRate = Number(document.documentElement.dataset.usdPerEur);
const usd = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
});
const eur = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "EUR"
});
const reducedMotion = window.matchMedia
? window.matchMedia("(prefers-reduced-motion: reduce)")
: { matches: false };
let displayedCents = 0;
let animationFrame = 0;
let currentSelection = [];
let currentTotal = 0;
const currentFilm = () => filmInputs.find(input => input.checked) || null;
const selectedSeats = film => {
if (!film) return [];
const plan = document.getElementById("plan-" + film.value);
return Array.from(
plan.querySelectorAll('.row input[type="checkbox"]:checked:not(:disabled)')
);
};
function renderAmounts(cents) {
usdOutput.textContent = usd.format(cents / 100);
eurOutput.textContent = "≈ " + eur.format((cents / 100) / fxRate);
}
function animateTo(targetCents, animate) {
cancelAnimationFrame(animationFrame);
if (!animate || reducedMotion.matches) {
displayedCents = targetCents;
renderAmounts(targetCents);
return;
}
const startingCents = displayedCents;
const difference = targetCents - startingCents;
const startTime = performance.now();
const duration = 420;
function frame(now) {
const progress = Math.min(1, (now - startTime) / duration);
const eased = 1 - Math.pow(1 - progress, 3);
displayedCents = Math.round(startingCents + difference * eased);
renderAmounts(displayedCents);
if (progress < 1) {
animationFrame = requestAnimationFrame(frame);
} else {
displayedCents = targetCents;
renderAmounts(targetCents);
}
}
animationFrame = requestAnimationFrame(frame);
}
function pulseBadge() {
if (reducedMotion.matches) return;
badge.classList.remove("bump");
void badge.offsetWidth;
badge.classList.add("bump");
}
function updateSelection(animate = true, seatChanged = false) {
const film = currentFilm();
currentSelection = selectedSeats(film);
const count = currentSelection.length;
const seatNames = currentSelection.map(input => input.value);
const unitCents = film ? Number(film.dataset.price) : 0;
currentTotal = count * unitCents;
badgeCount.textContent = String(count);
badge.style.fontSize = count > 99 ? "9px" : count > 9 ? "10px" : "12px";
basket.setAttribute(
"aria-label",
"Basket: " + count + (count === 1 ? " seat" : " seats") +
(film ? " selected for " + film.dataset.title : "") +
". Jump to total."
);
if (!film) {
summaryFilm.textContent = "Choose a film to begin";
summaryDetail.textContent = "Your selected seats will appear here.";
priceRule.textContent = "Per-seat price appears after film selection";
} else {
summaryFilm.textContent = film.dataset.title + " · " + film.dataset.time;
summaryDetail.textContent = count
? count + (count === 1 ? " seat" : " seats") + " · " +
(seatNames.length > 8
? seatNames.slice(0, 8).join(", ") + " …"
: seatNames.join(", "))
: "No seats picked yet — choose from the plan above.";
summaryDetail.title = seatNames.join(", ");
priceRule.textContent = usd.format(unitCents / 100) +
" per seat · " + film.dataset.screen;
}
reviewButton.disabled = !film || count === 0;
status.textContent = film
? count + (count === 1 ? " seat" : " seats") +
" selected. Total " + usd.format(currentTotal / 100) + "."
: "No film selected.";
animateTo(currentTotal, animate);
if (seatChanged) pulseBadge();
}
form.addEventListener("submit", event => event.preventDefault());
form.addEventListener("change", event => {
if (event.target.matches(".film-choice")) {
updateSelection(true, false);
} else if (event.target.matches('.row input[type="checkbox"]')) {
updateSelection(true, true);
}
});
badge.addEventListener("animationend", () => badge.classList.remove("bump"));
function openReview() {
const film = currentFilm();
if (!film || !currentSelection.length) return;
document.getElementById("review-show").textContent =
film.dataset.title + " · Tonight · " + film.dataset.time +
" · " + film.dataset.screen;
const list = document.getElementById("review-seats");
list.replaceChildren();
currentSelection.forEach(input => {
const item = document.createElement("li");
item.textContent = input.value;
list.appendChild(item);
});
document.getElementById("review-usd").textContent =
usd.format(currentTotal / 100);
document.getElementById("review-eur").textContent =
"≈ " + eur.format((currentTotal / 100) / fxRate) +
" · sample guide";
if (typeof reviewDialog.showModal === "function") {
reviewDialog.showModal();
} else {
reviewDialog.setAttribute("open", "");
}
}
function closeReview() {
if (typeof reviewDialog.close === "function") {
reviewDialog.close();
} else {
reviewDialog.removeAttribute("open");
}
}
reviewButton.addEventListener("click", openReview);
document.querySelectorAll("[data-close]").forEach(button => {
button.addEventListener("click", closeReview);
});
reviewDialog.addEventListener("click", event => {
if (event.target === reviewDialog) closeReview();
});
document.getElementById("print-selection").addEventListener("click", () => {
window.print();
});
try {
document.getElementById("tonight-date").textContent =
new Intl.DateTimeFormat("en-US", {
weekday: "long",
month: "long",
day: "numeric"
}).format(new Date());
} catch (_) {
/* “Tonight” remains as the offline fallback. */
}
updateSelection(false, false);
})();
</script>
</body>
</html>