@font-face {
  font-family: "Ticket Display";
  src: url("assets/print-title.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #1c343b;
  --paper: #f6efdb;
  --red: #b9452f;
  --gold: #deb24a;
  --sans: "Instrument Sans", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --display: "Ticket Display", "Noto Serif CJK SC", SimSun, serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 14px; }
body { margin: 0; color: var(--ink); background: var(--paper) url("assets/paper-grain.png"); font: 15px/1.6 var(--sans); }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #177e95; outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; padding: 7px 14px; background: var(--paper); z-index: 20; }
.wrapper { width: min(1260px, calc(100% - clamp(42px, 10vw, 160px))); margin-inline: auto; }
.masthead { border-bottom: 1px solid #243939; position: relative; }
.masthead::after { content: ""; position: absolute; bottom: -4px; inset-inline: 0; border-bottom: 1px solid #24393950; }
.mast-inner { min-height: 76px; display: flex; justify-content: space-between; align-items: center; }
.brand, .brand-lines, .mast-inner nav, .sound-button, .menu-link, .programme-link { display: flex; align-items: center; }
.brand { gap: 10px; line-height: 1; }
.brand img { width: 48px; height: 41px; }
.brand-lines { flex-direction: column; align-items: flex-start; gap: 3px; }
.brand strong { font: 900 25px/1.2 var(--display); letter-spacing: .04em; }
.brand small { font: 750 8px/1 var(--mono); letter-spacing: .21em; }
.mast-inner nav { gap: 23px; }
.sound-button { gap: 7px; padding: 6px 0; background: none; border: none; font-size: 12px; font-weight: 650; }
.sound-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sound-button[aria-pressed="false"] .sound-on, .sound-button[aria-pressed="true"] .sound-off { display: none; }
.menu-link { gap: 12px; padding: 6px 15px; border: 1px solid var(--ink); font-size: 13px; font-weight: 700; box-shadow: 2px 2px 0 #23383c; }
.menu-link:hover { color: var(--paper); background: var(--ink); }
.booth { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 68% 42%, #f6d5863b, transparent 48%), radial-gradient(at 15% 10%, #fffae34a, transparent 28%); }
.booth-layout { display: grid; grid-template-columns: 44% 56%; align-items: center; min-height: clamp(500px, 42vw, 610px); padding-block: 23px 40px; position: relative; }
.fairground { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("assets/fairground-print.webp") center bottom / 100% auto no-repeat; mix-blend-mode: multiply; opacity: .45; mask-image: linear-gradient(to bottom,transparent 43%,#0008 74%,#000 91%); }
.broadside { padding: 7px 0 22px clamp(4px,2vw,32px); position: relative; z-index: 2; }
.imprint { display: flex; align-items: center; gap: 10px; color: #34454a; font: 650 12px/1.5 var(--sans); letter-spacing: .11em; }
.imprint i { width: 30px; height: 5px; border-block: 1px solid currentColor; }
.imprint span { font: 700 9px/1.4 var(--mono); letter-spacing: .13em; }
.broadside h1 { width: fit-content; margin: 14px 0 23px; font: 900 clamp(69px,6.85vw,104px)/1.05 var(--display); letter-spacing: -.045em; }
.broadside h1 span, .broadside h1 em { display: block; font-style: normal; transform-origin: left center; }
.broadside h1 span { animation: ink-register .62s both; }
.broadside h1 em { color: var(--red); animation: ink-register .67s .09s both; text-shadow: 1px 2px 0 #e6b88c; }
@keyframes ink-register { 0% { transform: translate(-4px, 5px) rotate(-.7deg); opacity: .6; text-shadow: 5px -1px 0 #c69b719c; } 60% { transform: translate(1px, -1px); } 100% { transform: none; } }
.lead { font-size: clamp(14px,1.15vw,18px); color: #35484a; line-height: 1.85; letter-spacing: .03em; }
.programme-link { width: max-content; gap: 20px; margin-top: 22px; padding: 4px 1px; border-bottom: 1px solid var(--ink); font-weight: 700; font-size: 13px; }
.programme-link span { font-size: 19px; transition: transform .16s; }
.programme-link:hover span { transform: translate(2px,2px); }
.machine-bay { isolation: isolate; position: relative; display: grid; place-items: center; min-width: 0; align-self: stretch; }
.print-sun { width: min(83%,520px); aspect-ratio: 1; position: absolute; z-index: -1; border-radius: 50%; transform: rotate(-8deg); background: radial-gradient(circle,#a58148 1px, transparent 1.24px) 0 0/5px 5px; opacity: .28; mask-image: radial-gradient(circle at 52% 44%,#000 36%,#000b 62%,transparent 72%); pointer-events: none; }
#ticket-press { width: min(100%,600px); min-width: 0; position: relative; }
.programme { position: relative; background: #f9f5e8 url("assets/paper-grain.png"); padding: 29px 0 48px; border-top: 2px solid var(--ink); }
.programme::before { position: absolute; content: ""; top: 3px; inset-inline: 0; border-top: 1px solid #263d3b80; }
.programme-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 19px; }
.programme-title { display: flex; align-items: center; gap: 13px; }
.programme-star { color: var(--red); font: 400 39px/1 Georgia, serif; align-self: center; }
.programme-title p { font: 700 9px/1.3 var(--mono); letter-spacing: .18em; color: #825c46; margin-bottom: 3px; }
.programme-title h2 { font: 900 clamp(27px,2.35vw,35px)/1.22 var(--display); }
dialog { color: var(--ink); max-height: calc(100dvh - 28px); }
dialog::backdrop { background: #17282ada; }
body:has(dialog[open]) { overflow: hidden; }
.dialog-x { position: absolute; z-index: 5; top: 8px; right: 8px; width: 35px; height: 35px; border: 1px solid var(--ink); background: #f7efdb; color: var(--ink); font: 500 26px/1 var(--sans); }
.dialog-x:hover { background: var(--ink); color: var(--paper); }
@media(max-width:950px) {
  .wrapper { width: calc(100% - 48px); }
  .booth-layout { min-height: 450px; padding: 17px 0 35px; grid-template-columns: 40% 60%; }
  .broadside { padding-left: 0; }
  .broadside h1 { font-size: clamp(60px,8vw,74px); margin-block: 13px 19px; }
  .programme-link { margin-top: 16px; }
}
@media(max-width:680px) {
  .wrapper { width: calc(100% - 34px); }
  .mast-inner { min-height: 61px; }
  .brand img { width: 36px; height: 33px; }
  .brand { gap: 7px; }
  .brand strong { font-size: 21px; }
  .brand small { font-size: 6px; }
  .mast-inner nav { gap: 14px; }
  .sound-button { font-size: 11px; gap: 4px; }
  .menu-link { gap: 7px; padding: 5px 9px; font-size: 12px; }
  .booth-layout { grid-template-columns: 1fr; min-height: 0; gap: 7px; padding: 23px 0 27px; }
  .broadside { padding: 0; }
  .imprint { font-size: 10px; gap: 7px; }
  .imprint i { width: 21px; }
  .imprint span { font-size: 8px; }
  .broadside h1 { margin: 6px 0 8px; font-size: clamp(41px,9.8vw,62px); line-height: 1.16; }
  .broadside h1 span, .broadside h1 em { display: inline-block; }
  .lead { font-size: 13px; line-height: 1.7; }
  .lead br { display: none; }
  .programme-link { display: none; }
  .machine-bay { width: min(100%, 475px); justify-self: center; }
  .fairground { background-size: auto 48%; opacity: .34; }
  .programme { padding: 22px 0 29px; }
  .programme-head { flex-wrap: wrap; row-gap: 11px; margin-bottom: 14px; align-items: center; }
  .programme-title { gap: 7px; }
  .programme-title h2 { font-size: 23px; }
  .programme-star { font-size: 28px; }
  .programme-title p { font-size: 7px; margin-bottom: 1px; }
}
@media(max-width:365px) { .programme-star { display:none; } .sound-label { display:none; } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .broadside h1 span, .broadside h1 em { animation: none; }
  .programme-link span { transition: none; }
}