/* The Sawtooth: site.css
   Demo site by BOUW. Fictional venue. One stylesheet, built from the Web Library (04 - Shared Resources/Web Library).
   Concept: the poster wall. Every gig is a two-colour screen-print poster generated from the act's name (tools/posters.py),
   and the listing is the wall outside. Dark only: the room is dark and the posters glow on it. Radius 0 everywhere.
   Hex colours live only in the token block below.

   Contents
   1. Tokens (site) + library token contract
   2. Motion tokens                        lib: motion-tokens@v1
   3. Fonts
   4. Base, reset, a11y                    lib: base@v1
   5. Type
   6. Texture: page grain, wall, sawtooth edges
   7. Demo bar                             lib: demo-bar@v1
   8. Nav + mobile menu                    lib: nav@v1 (restyled; animated panel, view-transition marker)
   9. Buttons and links                    lib: button@v1 (restyled: print-offset plate)
   10. Bands and section heads
   11. Posters                             (signature 1: the generated poster)
   12. The wall and cards                  lib: event-list@v1 (list view, restyled)
   13. Home
   14. Gig listing: toggle, chips, empty state
   15. Gig page
   16. Hire
   17. Visit
   18. About
   19. FAQ                                 lib: faq@v1 (restyled)
   20. Forms                               lib: form@v1 (restyled)
   21. Contact, 404
   22. Footer                              lib: footer@v1 (restyled)
   23. Checkout dialog, mobile buy bar
   24. Signature motion: the print pull, poster hover
   25. View transitions                    lib: view-transitions@v1 (poster morph + nav marker)
   26. Breakpoints
   27. Reduced motion */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --night: #121211;
  --surface: #1D1D1B;
  --wall: #171715;          /* the paste-up wall behind poster sections; newsprint on it 15:1, smoke 6.3:1 */
  --newsprint: #ECEAE2;
  --smoke: #9C9A92;
  --acid: #C8F135;
  --error: #FF8A70;
  --hairline: #3A3A37;      /* decorative only */
  /* poster inks: only inside posters */
  --brick: #B52A17;
  --cobalt: #1E2A78;
  --orange: #F28C28;
  /* blueprint: only on the floor plan. newsprint on it 8.06:1, acid on it 7.44:1, night on acid 14.36:1 */
  --blueprint: #1C4380;
  --bp-grid: rgb(236 234 226 / 0.09);
  --bp-grid5: rgb(236 234 226 / 0.2);

  /* library token contract */
  --bg: var(--night);
  --fg: var(--newsprint);
  --muted: var(--smoke);
  --accent: var(--acid);
  --on-accent: var(--night);
  --line: var(--hairline);
  --danger: var(--error);
  --on-media: var(--newsprint);

  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-body: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-mono: var(--font-body);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 7rem;
  --space-section: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --measure: 56ch;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --h1: clamp(3.5rem, 11vw, 9rem);
  --h2: clamp(2.25rem, 5vw, 3.75rem);
  --act: 2rem;

  --radius: 0;
  --radius-lg: 0;
  --teeth: 22px;           /* height of a sawtooth edge */
  --shade: rgb(0 0 0 / 0.7);      /* poster drop shadow on the wall */
  --shade-deep: rgb(0 0 0 / 0.9);
  --edge: rgb(0 0 0 / 0.18);      /* paper edge on a poster */
  --scrim: rgb(18 18 17 / 0.8);   /* dialog backdrop */
}

/* 2. Motion tokens --------------------------------------------------------- */
/* lib: motion-tokens@v1
   --ease-out settle (things arriving), --ease-in-out travel (menu, morphs, the squeegee), --ease-press snap (hover, press).
   Animate transform, opacity and clip-path only. Nothing is hidden unless html.js is set and motion is allowed.
   The LCP element (the hero H1) never waits on an animation. Section 27 zeroes everything under reduced motion. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 200ms;
  --dur-2: 450ms;
  --dur-3: 900ms;
  --stagger: 70ms;
  --ease: var(--ease-out);
}

/* 3. Fonts: self-hosted Latin subsets, OFL (see /fonts/LICENSES.md) ------- */
@font-face { font-family: "Big Shoulders Display"; src: url("/demos/the-sawtooth/fonts/big-shoulders-display-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/demos/the-sawtooth/fonts/big-shoulders-display-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/demos/the-sawtooth/fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/demos/the-sawtooth/fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* 4. Base ------------------------------------------------------------------ */
/* lib: base@v1 (reset, a11y helpers) */
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100svh;
  background: var(--night); color: var(--newsprint);
  font: 400 var(--step-0) / 1.7 var(--font-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--acid); color: var(--night); }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--space-3); top: var(--space-3); z-index: 100;
  padding: var(--space-2) var(--space-3); background: var(--acid); color: var(--night); font-weight: 500; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
:target { scroll-margin-top: 6rem; }
.wrap { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }

/* 5. Type ------------------------------------------------------------------ */
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 0.92; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); line-height: 0.95; }
h3 { font-size: var(--act); font-weight: 700; line-height: 1; }
p, li, dd { text-wrap: pretty; }
.prose > * + * { margin-top: var(--space-3); }
.prose > h2 + * { margin-top: var(--space-4); }
.prose p { max-width: var(--measure); }
.lede { font-size: var(--step-1); line-height: 1.6; max-width: 42ch; }
.sample-note { margin-top: var(--space-5); color: var(--smoke); font-size: var(--step--1); }
.tag { display: inline-block; margin-left: 0.5em; padding: 0.05em 0.5em; border: 1.5px solid var(--acid); color: var(--acid); font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 0.1em; }

/* 6. Texture --------------------------------------------------------------- */
/* Print grain over the whole page: one fixed, pointer-less layer, so it never repaints on scroll. Quiet on purpose. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("/demos/the-sawtooth/img/grain.png") 0 0 / 256px; opacity: 0.26;
}
/* The paste-up wall: ghosts of old posters scraped off, under every poster section */
.band--wall { background: var(--wall) url("/demos/the-sawtooth/img/wall.svg") center top / 1600px auto repeat; }
/* Sawtooth edge: the roofline cut into the top of a band. Vertical glass face, then the slope. */
.teeth-top { position: relative; }
.teeth-top::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--teeth);
  background: var(--band-bg, var(--acid));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V0l44 22z'/%3E%3C/svg%3E") 0 0 / calc(var(--teeth) * 2) 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V0l44 22z'/%3E%3C/svg%3E") 0 0 / calc(var(--teeth) * 2) 100% repeat-x;
}
.teeth-top--surface { --band-bg: var(--surface); }

/* 7. Demo bar -------------------------------------------------------------- */
/* lib: demo-bar@v1 (inverted to newsprint so it reads as a different layer) */
.demo-bar { padding: 0.35rem var(--gutter); background: var(--newsprint); color: var(--night); font: 500 0.8125rem / 1.4 var(--font-body); text-align: center; position: relative; z-index: 60; }
.demo-bar a { font-weight: 500; text-decoration-color: currentColor; }
.demo-bar a:focus-visible { outline-color: var(--night); }
.demo-bar__short { display: none; }

/* 8. Nav ------------------------------------------------------------------- */
/* lib: nav@v1, restyled. Current page carries an acid marker that slides between links on page change (section 25). */
.nav { position: sticky; top: 0; z-index: 50; background: var(--night); border-bottom: 1px solid var(--hairline); view-transition-name: site-header; }
.nav__in { display: flex; align-items: center; gap: var(--space-4); min-height: 4.25rem; }
.nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: auto; font: 900 1.75rem / 1 var(--font-display); text-transform: uppercase; text-decoration: none; letter-spacing: 0.01em; }
.teeth { width: 2rem; height: auto; fill: var(--acid); flex: none; }
.nav__brand:hover .teeth { transform: translateY(-2px); }
.teeth { transition: transform var(--dur-1) var(--ease-press); }
.nav__menu ul { display: flex; gap: var(--space-1); }
.nav__menu a { position: relative; display: inline-block; padding: 0.6rem 0.8rem; font: 500 0.875rem / 1 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: var(--newsprint); }
.nav__menu a::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.25rem; height: 2px; background: var(--newsprint); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-1) var(--ease-press); }
.nav__menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__menu a.is-current { color: var(--acid); }
.nav__menu a.is-current::after { display: none; }
.nav__mark { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.25rem; height: 3px; background: var(--acid); view-transition-name: nav-mark; }
.nav__toggle { display: none; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.25rem 0 0.75rem; border: 0; background: transparent; font: 500 0.875rem / 1 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; }
.nav__bars, .nav__bars::before { display: block; width: 1.25rem; height: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease-in-out); }
.nav__bars { position: relative; transform: translateY(-4px); }
.nav__bars::before { content: ""; position: absolute; top: 8px; }
.nav__toggle[aria-expanded="true"] .nav__bars { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::before { top: 0; transform: rotate(-90deg); }

/* 9. Buttons and links ----------------------------------------------------- */
/* lib: button@v1, restyled. Cut-card buttons with a second plate behind: on hover the button lifts off its plate
   up and left, like a two-colour print a fraction off register. Transform only. */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 2.75rem; padding: 0.8em 1.4em;
  border: 0; background: transparent; color: var(--night);
  font: 500 0.9375rem / 1.1 var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap;
}
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.btn::before { background: var(--acid); transition: transform var(--dur-1) var(--ease-press); }
.btn::after { z-index: -2; background: var(--newsprint); }
.btn:hover::before { transform: translate(-4px, -4px); }
.btn:active::before { transform: translate(-1px, -1px); transition-duration: 60ms; }
.btn--sm { min-height: 2.75rem; padding: 0.6em 1em; font-size: 0.875rem; }
.btn--lg { min-height: 3.5rem; padding: 1em 1.8em; font-size: 1rem; }
.btn--outline { color: var(--acid); }
.btn--outline::before { background: var(--night); box-shadow: inset 0 0 0 2px var(--acid); }
.btn--outline::after { background: var(--acid); }
.band--surface .btn--outline::before { background: var(--surface); }
.btn--night { color: var(--acid); }
.btn--night::before { background: var(--night); }
.btn--night::after { background: var(--newsprint); }
.btn--night:focus-visible { outline-color: var(--night); }
.btn.is-disabled { color: var(--smoke); cursor: not-allowed; }
.btn.is-disabled::before { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--smoke); transform: none; }
.btn.is-disabled::after { display: none; }

.link {
  padding: 0; border: 0; background: none; color: var(--acid);
  font: 500 inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat;
}
.link:hover { text-decoration-thickness: 2px; }
.link--night { color: var(--night); }
.link--night:focus-visible { outline-color: var(--night); }

/* 10. Bands and section heads ---------------------------------------------- */
.band { padding-block: var(--space-section); }
.band--surface { background: var(--surface); }
.band--acid { background: var(--acid); color: var(--night); }
.band--acid ::selection { background: var(--night); color: var(--acid); }
.band--acid :focus-visible { outline-color: var(--night); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }

/* 11. Posters -------------------------------------------------------------- */
/* Each poster is one inline SVG (viewBox 600 x 900). The pair class sets the two inks; the SVG only uses classes. */
.p1 { --pg: var(--night); --pi: var(--acid); }
.p2 { --pg: var(--brick); --pi: var(--newsprint); }
.p3 { --pg: var(--cobalt); --pi: var(--acid); }
.p4 { --pg: var(--orange); --pi: var(--night); }
.p5 { --pg: var(--newsprint); --pi: var(--night); }
.poster { position: relative; aspect-ratio: 2 / 3; background: var(--pg); overflow: hidden; }
.poster__art { width: 100%; height: 100%; }
/* the foot line is set at 20 units so it reads at about 10px on a wall card; below 280px rendered it would not, so it goes */
.poster { container-type: inline-size; }
@container (max-width: 280px) { .poster .ft { display: none; } }
:is(.poster, .bill) .g { fill: var(--pg); }
:is(.poster, .bill) .i { fill: var(--pi); }
:is(.poster, .bill) .si { stroke: var(--pi); fill: none; }
:is(.poster, .bill) .sg { stroke: var(--pg); fill: none; }
.poster .d { font-family: var(--font-display); font-weight: 900; }
.poster .m { font-family: var(--font-body); font-weight: 400; }
.poster .m5 { font-family: var(--font-body); font-weight: 500; }
/* screen-print grain: a fixed tile of specks over the ink, plus a hair of paper edge */
.poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/demos/the-sawtooth/img/grain.png") 0 0 / 180px; opacity: 0.55; mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.p1::after { mix-blend-mode: normal; opacity: 0.4; }
.poster .pat, .poster .hot { transform-box: view-box; transition: transform var(--dur-2) var(--ease-out); }

/* 12. The wall and cards --------------------------------------------------- */
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.wall--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 68rem; }
.card { position: relative; display: flex; flex-direction: column; gap: 0.15rem; }
.card__poster { display: block; margin-bottom: var(--space-3); color: inherit; text-decoration: none; }
.card__poster .poster { transform: rotate(var(--tilt, 0deg)); box-shadow: 0 18px 30px -18px var(--shade); transition: transform var(--dur-2) var(--ease-out); }
.card__poster:focus-visible { outline: none; }
.card__poster:focus-visible .poster { outline: 3px solid var(--acid); outline-offset: 4px; }
.card__date { color: var(--acid); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9375rem; }
.card__act { font-size: var(--act); }
.card__with, .card__doors { color: var(--smoke); font-size: var(--step--1); line-height: 1.5; }
.card__doors { display: none; }
.card__price { margin-top: var(--space-2); font-weight: 500; }
.card__act-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.card__buy, .card__wait { display: inline-flex; align-items: center; min-height: 2.75rem; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.04em; }
.card__status { color: var(--smoke); font-weight: 500; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.04em; }
.is-sold .card__price { color: var(--smoke); text-decoration: line-through; text-decoration-thickness: 1px; }

/* house bills: type-only sheets that close the wall's last row; hidden when filtering or in list view.
   Built like a poster: kicker, a printed strip from a pattern the column isn't using, a headline fitted to the
   sheet width at build (--fs, in cqi), and the body and link pinned to the foot. */
.card--house .card__poster { container-type: inline-size; }
.bill { position: relative; aspect-ratio: 2 / 3; display: flex; flex-direction: column; gap: 3cqi; padding: 9cqi; background: var(--pg); color: var(--pi); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 18px 30px -18px var(--shade); transition: transform var(--dur-2) var(--ease-out); overflow: hidden; }
.bill::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/demos/the-sawtooth/img/grain.png") 0 0 / 180px; opacity: 0.5; mix-blend-mode: multiply; }
.bill.p1 { box-shadow: inset 0 0 0 3px var(--acid), 0 18px 30px -18px var(--shade); }
.bill:is(.p1, .p3)::after { mix-blend-mode: normal; opacity: 0.35; }
.bill__k { font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(0.6875rem, 4.2cqi, 0.8125rem); padding-bottom: 2cqi; border-bottom: 3px solid currentColor; }
.bill__strip { display: block; width: 100%; height: auto; flex: none; }
.bill__h { font: 900 calc(var(--fs, 14) * 1cqi) / 0.92 var(--font-display); text-transform: uppercase; }
.bill__h span { display: block; white-space: nowrap; }
.bill__foot { margin-top: auto; display: grid; gap: 2.5cqi; }
.bill__t { font-size: clamp(0.75rem, 4.4cqi, 0.875rem); line-height: 1.5; }
@container (max-width: 15rem) { .bill__t { display: none; } }
.bill__cta { font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.25em; }
.card--house .card__poster { margin: 0; }
.card--house:nth-last-child(2) { --tilt: 0.5deg; }
.card--house:last-child { --tilt: -0.6deg; }
.wall[data-view="list"] .card--house { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .card--house .card__poster:hover .bill { transform: translateY(-6px) rotate(0deg); } }

/* list view: one row per gig on surface, separated by night gaps (lib: event-list@v1 structure) */
.wall[data-view="list"] { grid-template-columns: 1fr; gap: 4px; background: var(--night); padding-block: 4px; }
.wall[data-view="list"] .card {
  display: grid; grid-template-columns: 5.5rem 60px minmax(0, 1.4fr) minmax(0, 1fr) 10.5rem 15rem; align-items: center;
  column-gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface);
  grid-template-areas: "date thumb act doors price buy" "date thumb with doors price buy";
}
.wall[data-view="list"] .card__poster { grid-area: thumb; width: 60px; margin: 0; }
.wall[data-view="list"] .card__poster .poster { transform: none; box-shadow: none; }
.wall[data-view="list"] .card__date { grid-area: date; align-self: center; }
.wall[data-view="list"] .card__date time { display: grid; line-height: 1.2; }
.wall[data-view="list"] .card__date span { font-size: 0.8125rem; }
.wall[data-view="list"] .card__act { grid-area: act; align-self: end; font-size: 1.75rem; }
.wall[data-view="list"] .card__with { grid-area: with; align-self: start; }
.wall[data-view="list"] .card__doors { grid-area: doors; display: block; }
.wall[data-view="list"] .card__price { grid-area: price; margin: 0; white-space: nowrap; }
.wall[data-view="list"] .card__act-row { flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 40.01rem) { .wall[data-view="list"] .card:not(:has(.card__with)) .card__act { grid-row: 1 / 3; align-self: center; } }
.wall[data-view="list"] .card__act-row { grid-area: buy; justify-self: end; }
.wall[data-view="list"] .card__price .tag { margin: 0.3rem 0 0; display: table; }

/* 13. Home ----------------------------------------------------------------- */
.hero { padding-block: var(--space-5) var(--space-6); }
.hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5);
  grid-template-areas: "poster poster poster poster poster copy copy copy copy copy copy copy" "poster poster poster poster poster more more more more more more more";
  grid-template-rows: auto 1fr;
}
.hero__copy { grid-area: copy; align-self: end; padding-top: var(--space-3); }
.hero__h { font-size: clamp(3.5rem, 2rem + 4.6vw, 7.25rem); max-width: 11ch; }
.hero__line { margin-top: var(--space-4); font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }
.hero__poster { grid-area: poster; display: block; align-self: start; width: 100%; max-width: 32rem; } /* fixed, not svh: viewport units reflow the page in full-page captures */
.hero__poster .poster { box-shadow: 0 30px 60px -30px var(--shade-deep); transition: transform var(--dur-2) var(--ease-out); }
.hero__more { grid-area: more; align-self: end; padding-top: var(--space-5); }
.hero__label { font: 500 var(--step--1) / 1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--smoke); margin-bottom: var(--space-2); }
.next li + li { margin-top: 4px; }
.next a { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding: 0.85rem var(--space-3); background: var(--surface); text-decoration: none; position: relative; overflow: hidden; }
.next a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--acid); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-1) var(--ease-press); }
.next a:hover::before, .next a:focus-visible::before { transform: scaleX(1); }
.next time { color: var(--acid); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.next__act { font: 700 1.5rem / 1 var(--font-display); text-transform: uppercase; }
.next__price { font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.hero__caption { margin-top: var(--space-4); color: var(--smoke); font-size: 0.8125rem; }

.room__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: center; }
.room__art img { width: 100%; }
.sunday { padding-block: var(--space-6); }
.sunday__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6); }
.sunday h2 { flex: 1 0 100%; max-width: 22ch; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); margin-bottom: var(--space-2); }
.sunday p { max-width: 46ch; font-size: var(--step-1); line-height: 1.5; }
.sunday .link { white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9375rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.hire-teaser__grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--space-6); align-items: center; }
.hire-teaser__copy { order: -1; }
.hire-teaser__plan { justify-self: start; width: 100%; }
.hire-teaser__copy > * + * { margin-top: var(--space-4); }
.hire-teaser__copy p { max-width: 44ch; }
.review { padding-block: calc(var(--space-section) * 1.2); }
/* the review is pasted up on the wall: a newsprint bill, a degree off square, with print grain */
.review__sheet {
  position: relative; max-width: 64rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 4vw, 4.5rem);
  background: var(--newsprint); color: var(--night); transform: rotate(-0.8deg); box-shadow: 0 24px 40px -24px var(--shade-deep);
}
.review__sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/demos/the-sawtooth/img/grain.png") 0 0 / 180px; opacity: 0.5; mix-blend-mode: multiply; }
.review__sheet::before { content: ""; position: absolute; left: clamp(1.75rem, 1rem + 4vw, 4.5rem); top: 0; width: 5rem; height: 8px; background: var(--brick); }
.review blockquote p { font: 900 clamp(2rem, 1rem + 3vw, 3.75rem) / 1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.review figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem var(--space-4); margin-top: var(--space-5); padding-top: var(--space-3); border-top: 3px solid var(--night); font-size: var(--step--1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.review__label { color: var(--brick); }
.newsletter__in { display: grid; grid-template-columns: 1fr minmax(0, 30rem); gap: var(--space-4) var(--space-6); align-items: end; }
.newsletter__copy > * + * { margin-top: var(--space-3); }
.newsletter__copy p { max-width: 46ch; color: var(--newsprint); }

/* room plan (A2) and map: inline SVG, colours from tokens */
.plan { width: 100%; height: auto; }
.pl-line { fill: none; stroke: var(--newsprint); stroke-width: 4; }
.pl-thin { fill: none; stroke: var(--smoke); stroke-width: 2; }
.pl-thin-line { fill: none; stroke: var(--smoke); stroke-width: 2; }
.pl-hatch { stroke: var(--newsprint); stroke-width: 2; }
.pl-fill { fill: var(--newsprint); }
.pl-door { stroke: var(--newsprint); stroke-width: 4; }
.pl-gap { stroke: var(--bg-of-plan, var(--night)); stroke-width: 6; }
.pl-night { fill: var(--bg-of-plan, var(--night)); }
.band--surface .plan { --bg-of-plan: var(--surface); }
.pl-acid { stroke: var(--acid); stroke-width: 4; }
.pl-acid-fill { fill: var(--acid); }
.pl-label { fill: var(--smoke); font: 400 18px var(--font-body); letter-spacing: 1px; }
.pl-big { fill: var(--newsprint); font-size: 22px; }
.plan--small .pl-label { font-size: 24px; }
.plan--small .pl-big { font-size: 28px; }

/* Blueprint: the floor plan (tools/blueprint.py). Classes only; the picked room wipes in acid top to bottom
   in 300ms like the print pull, and that room's line work turns night. Instant under reduced motion (section 27). */
.bp { display: block; width: 100%; height: auto; --bp-ink: var(--newsprint); }
.bp-bg { fill: var(--blueprint); }
.bp-grid { fill: none; stroke: var(--bp-grid); stroke-width: 1; }
.bp-grid5 { fill: none; stroke: var(--bp-grid5); stroke-width: 1.2; }
.bp-wall, .bp-solid { fill: var(--newsprint); }
.bp-line { fill: none; stroke: var(--bp-ink); stroke-width: 2; }
.bp-strong { stroke-width: 3; }
.bp-thin { fill: none; stroke: var(--bp-ink); stroke-width: 1.2; }
.bp-dim { fill: none; stroke: var(--newsprint); stroke-width: 1.4; }
.bp-t { fill: var(--bp-ink); }
.bp-mono { font: 400 24px var(--font-body); letter-spacing: 1.5px; }
.bp-name { font: 700 28px var(--font-display); letter-spacing: 2px; }
.bp-big { font-size: 36px; }
.bp-acid { stroke: var(--acid); stroke-width: 4; }
.bp-acid-fill { fill: var(--acid); }
.bp-room { --bp-ink: var(--newsprint); }
.bp-room .bp-solid { fill: var(--bp-ink); }
.bp-room .bp-bg { fill: var(--blueprint); transition: fill 0s var(--dur-1); }
.bp-fill { fill: var(--acid); clip-path: inset(0 0 100% 0); transition: clip-path 300ms var(--ease-in-out); }
.bp-room.is-on { --bp-ink: var(--night); }
.bp-room.is-on .bp-fill { clip-path: inset(0 0 0 0); }
.bp-room.is-on .bp-bg { fill: var(--acid); }

/* Live photographs: added for atmosphere, never in a poster slot. Graded to the poster inks at build (tools/photos.py).
   Each frame holds its ratio on a night fill, so nothing jumps while it loads. */
.photo { margin: 0; }
.photo__frame { aspect-ratio: var(--ar); background: var(--surface); overflow: hidden; position: relative; }
.photo__frame img { width: 100%; height: 100%; object-fit: cover; }
.photo__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--edge); }
.photo figcaption { display: grid; gap: 0.1rem; margin-top: var(--space-2); font-size: 0.8125rem; line-height: 1.5; color: var(--newsprint); }
.photo__cap { text-wrap: pretty; }
.photos__h { margin-bottom: var(--space-5); }
.photo__credit { color: var(--smoke); }
.photos-home { padding-block: var(--space-section) 0; }
.photos-home__grid, .photos-hire__grid, .photos-about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-5); align-items: start; }
.photos-home__grid, .photos-about { align-items: end; } /* the pair's captions share a baseline */
.photos-hire { padding-top: 0; }
.photos-hire__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
.photos-about { margin-top: var(--space-6); grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.eat .photo--wide { margin-top: var(--space-6); }

/* 14. Gig listing ---------------------------------------------------------- */
.listing { padding-top: var(--space-6); }
.listing__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
.listing__line { margin-top: var(--space-3); color: var(--smoke); max-width: 52ch; }
.toggle { display: inline-flex; border: 1.5px solid var(--smoke); }
.toggle__btn { min-height: 2.75rem; min-width: 5.5rem; padding: 0 1rem; border: 0; background: transparent; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.875rem; }
.toggle__btn[aria-pressed="true"] { background: var(--newsprint); color: var(--night); }
.chips { display: flex; gap: var(--space-2); margin-block: var(--space-5) var(--space-6); overflow-x: auto; scrollbar-width: none; padding: 4px; margin-inline: -4px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 2.75rem; padding: 0 1.1rem; border: 1.5px solid var(--smoke); background: var(--night); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; transition: transform var(--dur-1) var(--ease-press); }
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--acid); border-color: var(--acid); color: var(--night); }
.empty { display: grid; justify-items: center; gap: var(--space-4); padding-block: var(--space-4) var(--space-6); text-align: center; }
.empty__poster { width: min(18rem, 70vw); }
.empty__copy { max-width: 36ch; }

/* 15. Gig page ------------------------------------------------------------- */
.gig { padding-block: var(--space-5) var(--space-section); }
.gig__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6);
  grid-template-areas: "poster poster poster poster poster head head head head head head head" "poster poster poster poster poster facts facts facts facts facts facts facts" "poster poster poster poster poster about about about about about about about";
  grid-template-rows: auto auto 1fr;
}
.gig__head { grid-area: head; padding-top: var(--space-4); }
.gig__date { color: var(--acid); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); }
.gig__head h1 { font-size: clamp(3.5rem, 1.5rem + 5vw, 7.5rem); }
.gig__with { margin-top: var(--space-3); font-size: var(--step-1); }
.gig__genre { color: var(--smoke); margin-top: var(--space-1); }
.gig__poster { grid-area: poster; position: sticky; top: 5.5rem; align-self: start; }
.gig__poster a { display: block; }
.gig__poster .poster { box-shadow: 0 30px 60px -30px var(--shade-deep); }
.gig__facts { grid-area: facts; margin-top: var(--space-5); }
.facts { display: grid; gap: 0; max-width: 40rem; }
.facts__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.6rem; padding-block: 0.45rem; }
.facts__row::after { content: ""; order: 1; height: 1px; background: radial-gradient(circle, var(--smoke) 1px, transparent 1.4px) 0 0 / 7px 2px repeat-x; align-self: center; translate: 0 3px; }
.facts__row dt { order: 0; color: var(--smoke); }
.facts__row dd { order: 2; text-align: right; font-weight: 500; }
.gig__buy { margin-top: var(--space-5); display: grid; gap: var(--space-4); justify-items: start; }
.gig__notes { margin-top: var(--space-4); color: var(--smoke); font-size: var(--step--1); max-width: 54ch; }
.gig__about { grid-area: about; margin-top: var(--space-6); }
.gig__about h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.gig__about section > * + * { margin-top: var(--space-3); }
.gig__about section > h2 + p { margin-top: var(--space-4); }
.gig__support { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.gig__support h3 { font-size: 1.75rem; margin-bottom: var(--space-2); }
.gig__support p { max-width: var(--measure); }
.before__h { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: var(--space-5); }
.before__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.before__item { padding: var(--space-4); background: var(--night); }
.before__item h3 { font-size: 1.5rem; margin-bottom: var(--space-2); color: var(--acid); }
.more h2 { margin-bottom: var(--space-5); }

/* 16. Hire ----------------------------------------------------------------- */
.hire-head { padding-top: var(--space-6); }
.hire-head__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; }
.hire-head__poster { justify-self: end; width: 100%; max-width: 26rem; }
.hire-head__poster .poster { transform: rotate(0.8deg); box-shadow: 0 30px 60px -30px var(--shade-deep); }
.hire-head__copy > * + * { margin-top: var(--space-4); }
.hire-head__copy .btn { margin-top: var(--space-5); }
.spaces__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.space { padding: var(--space-5); background: var(--night); display: grid; align-content: start; gap: var(--space-3); }
.space__name { font-size: clamp(2.5rem, 2rem + 2vw, 4rem); font-weight: 900; }
.space__cap { font-size: var(--step-1); line-height: 1.5; }
.space__inc { color: var(--newsprint); max-width: 52ch; }
.space__inc span { display: block; color: var(--smoke); }
.facts--tight .facts__row { padding-block: 0.2rem; }
.rates { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.rates dd { color: var(--acid); }
.spaces__note { margin-top: var(--space-4); color: var(--smoke); font-size: var(--step--1); max-width: 72ch; }
.uses h2 { margin-bottom: var(--space-5); }
.uses__lines { display: grid; font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.4rem) / 1.35 var(--font-body); letter-spacing: -0.02em; }
.uses__lines span { display: block; padding-block: 0.35rem; }
.how h2 { margin-bottom: var(--space-6); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.steps li { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-4); border-top: 4px solid var(--acid); }
.steps h3 { font-size: clamp(2.75rem, 1.5rem + 3vw, 4.5rem); font-weight: 900; line-height: 0.9; }
.steps p { max-width: 36ch; }
.ask__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5) var(--space-6); align-items: start; }
.ask__side { position: sticky; top: 6rem; }
.hire .ask__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ask__plan { margin-top: var(--space-5); }
.hire .ask__in { grid-template-areas: "head head" "plan form"; row-gap: var(--space-6); }
.ask__side--plan { grid-area: head; position: static; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: end; }
.ask__side--plan p { margin: 0; }
.ask__plan--side { grid-area: plan; align-self: start; margin: 0; position: sticky; top: 6rem; max-width: 30rem; max-height: calc(100svh - 7rem); }
.ask__plan--side .bp { width: min(100%, 26rem, calc((100svh - 9rem) * 760 / 1180)); } /* the whole sheet, title block included, stays on screen */
.hire .ask__main { grid-area: form; }
.ask__plan--inline { display: none; margin: 0 0 var(--space-3); }
.ask__plan figcaption { margin-top: var(--space-2); color: var(--smoke); font-size: 0.8125rem; }
.ask__side p { margin-top: var(--space-4); max-width: 34ch; color: var(--newsprint); }
.ask__main { max-width: 48rem; }
.space-pick { grid-column: 1 / -1; display: grid; gap: var(--space-3); }
.space-pick__hint { margin-top: var(--space-2); }

/* 17. Visit ---------------------------------------------------------------- */
.visit-head { padding-top: var(--space-6); }
.visit-head__art { padding-inline: var(--gutter); max-width: 100rem; margin-inline: auto; }
.visit-head__art img { width: 100%; }
.visit-head__copy { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5) var(--space-6); }
.visit-head__copy h1 { flex: 1 1 100%; }
.visit-head__addr { font-size: var(--step-1); }
.getting__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.getting__item h3 { font: 500 var(--step-0) / 1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--acid); margin-bottom: var(--space-2); }
.map-sec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); align-items: start; }
.map-sec__grid h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: var(--space-4); }
.map-sec__grid p + p { margin-top: var(--space-3); }
.map { width: 100%; height: auto; background: var(--surface); }
.map--narrow { display: none; }
.map-sec__map figcaption { margin-top: var(--space-2); color: var(--smoke); font-size: 0.8125rem; }
.mp-street path { stroke: var(--hairline); stroke-width: 26; fill: none; }
.mp-lane { stroke: var(--hairline); stroke-width: 12; }
.mp-block { fill: none; stroke: var(--newsprint); stroke-width: 3; }
.mp-route { fill: none; stroke: var(--acid); stroke-width: 5; stroke-dasharray: 2 12; stroke-linecap: round; }
.mp-venue { fill: var(--acid); }
.mp-label { fill: var(--smoke); font: 400 20px var(--font-body); letter-spacing: 1.5px; }
.mp-strong { fill: var(--newsprint); font-weight: 500; }
.mp-acid { fill: var(--acid); }
.access h2 { margin-bottom: var(--space-5); }
.access__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: stretch; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); background: var(--surface); }
.access__points { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-content: space-between; height: 100%; }
.access__points h3 { font-size: 1.75rem; margin-bottom: var(--space-2); color: var(--acid); }
.access__points p { max-width: 40ch; }
.access__plan figcaption { margin-top: var(--space-2); color: var(--smoke); font-size: 0.8125rem; }
.pl-acid-t { fill: var(--acid); }
.access__plan .bp { max-width: 26rem; margin-inline: auto; }
.bp-on-acid { stroke: var(--night); }
.eat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.eat__col > * + * { margin-top: var(--space-4); }

/* 18. About ---------------------------------------------------------------- */
.about-head { padding-top: var(--space-6); padding-bottom: var(--space-section); }
.about-head__h { max-width: 14ch; }
.about-head__art { padding-inline: var(--gutter); max-width: 100rem; margin: var(--space-5) auto 0; }
.about-head__art img { width: 100%; }
.about-head__copy { margin-top: var(--space-5); columns: 2 22rem; column-gap: var(--space-6); }
.about-head__copy p { break-inside: avoid; }
.about-head__copy p + p { margin-top: 0; }
.booking__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; }
.booking__fig { font: 900 clamp(6rem, 3rem + 13vw, 15rem) / 0.8 var(--font-display); color: var(--acid); letter-spacing: -0.01em; }
.archive__head { margin-bottom: var(--space-6); }
.archive__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.archive__row li:nth-child(odd) .poster { transform: rotate(-0.8deg); }
.archive__row li:nth-child(even) .poster { transform: rotate(0.6deg) translateY(var(--space-4)); }
.archive__cap { margin-top: var(--space-3); color: var(--smoke); font-size: var(--step--1); }
.archive__row li:nth-child(even) .archive__cap { margin-top: calc(var(--space-3) + var(--space-4)); }
.close { padding-block: var(--space-6); }
.close__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* 19. FAQ ------------------------------------------------------------------ */
/* lib: faq@v1, restyled: grouped, two columns on desktop */
.faq-page__head { margin-bottom: var(--space-6); }
.faq-page__head p { margin-top: var(--space-4); }
.faq-page__grid { columns: 2; column-gap: var(--space-5); }
.faq-page__grid .faq-group { break-inside: auto; }
.faq-page__grid .faq-group__h { break-after: avoid; }
.faq-page__grid details { break-inside: avoid; }
@media (min-width: 75rem) {
  .faq-page__grid { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-5); align-items: start; }
}
.faq-group { break-inside: avoid; margin-bottom: var(--space-6); }
.faq-group__h { font: 500 var(--step--1) / 1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--acid); margin-bottom: var(--space-3); }
.faq details { background: var(--surface); }
.faq details + details { margin-top: 4px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 3.5rem; padding: var(--space-3) var(--space-4); font: 700 1.5rem / 1.05 var(--font-display); text-transform: uppercase; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--acid), var(--acid)) center / 100% 2px no-repeat, linear-gradient(var(--acid), var(--acid)) center / 2px 100% no-repeat; transition: transform var(--dur-2) var(--ease-in-out); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details > p { padding: 0 var(--space-4) var(--space-4); max-width: 60ch; }
.stuck { padding-block: var(--space-6); }
.stuck__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.stuck__in p { font: 900 var(--h2) / 1 var(--font-display); text-transform: uppercase; }

/* 20. Forms ---------------------------------------------------------------- */
/* lib: form@v1, restyled: labels above, inputs on night with 1.5px smoke borders, 2px acid focus */
.form { display: grid; gap: var(--space-4); }
.form--wide { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
.form--wide > .field--full, .form--wide > button, .form--wide > .form__summary, .form--wide > .hp { grid-column: 1 / -1; }
.field { display: grid; align-content: start; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { font-weight: 500; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; padding: 0; }
.field__opt { color: var(--smoke); text-transform: none; letter-spacing: 0; }
.field input:not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--smoke); border-radius: 0; background: var(--night); color: var(--newsprint);
}
.field input[type="date"] { color-scheme: dark; }
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; background: var(--night) linear-gradient(45deg, transparent 50%, var(--acid) 50%) calc(100% - 18px) 55% / 7px 7px no-repeat; padding-right: 2.5rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.field__hint { font-size: var(--step--1); color: var(--smoke); }
.field__error { font-size: var(--step--1); font-weight: 500; color: var(--error); }
.field__error::before { content: "Error: "; }
.field [aria-invalid="true"] { border-color: var(--error) !important; border-width: 2px; }
.opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.1rem; border: 1.5px solid var(--smoke); background: var(--night); }
.opt input:checked + span { background: var(--acid); border-color: var(--acid); color: var(--night); }
.opt input:focus-visible + span { outline: 2px solid var(--acid); outline-offset: 2px; }
.field[aria-invalid="true"] .opt span { border-color: var(--error); }
.form button[type="submit"] { justify-self: start; margin-top: var(--space-2); }
.form__summary { padding: var(--space-3) var(--space-4); box-shadow: inset 4px 0 0 var(--error); background: var(--night); color: var(--error); font-weight: 500; }
.form__success { padding: var(--space-3) var(--space-4); box-shadow: inset 4px 0 0 var(--acid); background: var(--night); font-weight: 500; }
.form--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2) var(--space-3); }
.form--inline .field__error, .form--inline .form__success { grid-column: 1 / -1; }
.form--inline .field { display: contents; }
.form--inline .field > label { grid-column: 1 / -1; }
.form--inline button[type="submit"] { margin: 0; min-height: 3rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.success { padding: var(--space-5); background: var(--night); box-shadow: inset 4px 0 0 var(--acid); }
.success__h { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: var(--space-3); }

/* 21. Contact, 404 --------------------------------------------------------- */
.contact h1 { margin-bottom: var(--space-6); }
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.routes li { padding: var(--space-4); background: var(--surface); }
.routes h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: var(--space-3); }
.routes .link { overflow-wrap: anywhere; }
.contact__line { margin-top: var(--space-5); max-width: 60ch; }
.nf__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; }
.nf__poster { max-width: 26rem; }
.nf__copy > * + * { margin-top: var(--space-4); }

/* 22. Footer --------------------------------------------------------------- */
/* lib: footer@v1, restyled */
.footer { padding-top: var(--space-6); border-top: 1px solid var(--hairline); font-size: var(--step--1); }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-5); padding-bottom: var(--space-5); }
.footer__mark { font: 900 2.5rem / 0.9 var(--font-display); text-transform: uppercase; margin-bottom: var(--space-3); }
.footer__h { font: 500 var(--step--1) / 1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--smoke); margin-bottom: var(--space-3); }
.footer__col ul { display: grid; gap: var(--space-1); }
.footer a { text-underline-offset: 0.25em; text-decoration-color: var(--smoke); }
.footer a:hover { text-decoration-color: var(--acid); }
.footer__col a { display: inline-block; padding-block: 0.3rem; overflow-wrap: anywhere; }
.footer__links ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--hairline); }
.footer__links a { display: inline-block; padding-block: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.footer__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-block: var(--space-3) var(--space-5); border-top: 1px solid var(--hairline); color: var(--smoke); }

/* 23. Checkout dialog, mobile buy bar -------------------------------------- */
.checkout { max-width: min(30rem, calc(100vw - 2rem)); padding: 0; border: 0; background: var(--newsprint); color: var(--night); }
.checkout::backdrop { background: var(--scrim); }
.checkout__in { display: grid; gap: var(--space-3); padding: var(--space-5); }
.checkout__kicker { font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step--1); }
.checkout__title { font-size: 2.75rem; }
.checkout__line { font-weight: 500; }
.checkout__note { font-size: var(--step--1); }
.checkout .btn { justify-self: start; margin-top: var(--space-2); color: var(--acid); }
.checkout .btn::before { background: var(--night); }
.checkout .btn::after { background: var(--acid); }
.checkout :focus-visible { outline-color: var(--night); }
.buybar { display: none; }

/* 24. Signature motion ----------------------------------------------------- */
/* The print pull (hero and gig page): the paper is there from the first frame; the ink is pulled through the
   screen top to bottom by a squeegee, once, in 900ms. clip-path and transform only. Skipped when the poster
   arrives by view transition, and under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .pull .poster__art { animation: pull var(--dur-3) var(--ease-in-out) 150ms both; }
  .js .pull::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to bottom, transparent calc(100% - 10px), var(--pi) calc(100% - 10px), var(--pi) calc(100% - 7px), transparent calc(100% - 7px));
    animation: squeegee var(--dur-3) var(--ease-in-out) 150ms both;
  }
  .vt-in .pull .poster__art, .vt-in .pull::before { animation: none; }
  .vt-in .pull::before { opacity: 0; }
}
@keyframes pull { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes squeegee { from { transform: translateY(-100%); } 96% { transform: translateY(0); opacity: 1; } to { transform: translateY(0); opacity: 0; } }

/* Poster hover and focus: the poster lifts, straightens off the wall and its pattern moves one step.
   G1 waves shift a half period (a full tooth for the sawtooth), G2 suns and G5 dots swell, G3 rings widen by a ring,
   G4 turns one tile. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card__poster:hover .poster, .hero__poster:hover .poster { transform: translateY(-6px) rotate(0deg); }
  :is(.card__poster, .hero__poster):hover .g1 { transform: translateX(var(--hx)); }
  :is(.card__poster, .hero__poster):hover :is(.g2, .g5) { transform: scale(1.1); }
  :is(.card__poster, .hero__poster):hover .g3 { transform: scale(1.12); }
  :is(.card__poster, .hero__poster):hover .hot { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .card__poster:focus-visible .poster { transform: translateY(-6px) rotate(0deg); }
  .card__poster:focus-visible .g1 { transform: translateX(var(--hx)); }
  .card__poster:focus-visible :is(.g2, .g5) { transform: scale(1.1); }
  .card__poster:focus-visible .g3 { transform: scale(1.12); }
  .card__poster:focus-visible .hot { transform: rotate(90deg); }
}
/* the mobile menu panel: drops from under the header, links rise in sequence */
@media (prefers-reduced-motion: no-preference) {
  .nav__menu.is-open li { animation: rise var(--dur-2) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* 25. View transitions ----------------------------------------------------- */
/* lib: view-transitions@v1. Cross-document. The header holds still; the acid nav marker slides to the new page's
   link; a tapped poster flies into the gig page's poster (names set at navigation time in site.js and the inline
   head script). Browsers without support navigate normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*) { animation-duration: var(--dur-2); animation-timing-function: var(--ease-in-out); }
::view-transition-old(root) { animation: 220ms var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: 380ms var(--ease-out) 60ms both vt-in; }
::view-transition-group(poster) { animation-duration: 560ms; z-index: 5; }
::view-transition-old(poster), ::view-transition-new(poster) { animation-duration: 560ms; height: 100%; object-fit: cover; }
::view-transition-group(nav-mark) { animation-duration: 420ms; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* 26. Breakpoints ---------------------------------------------------------- */
@media (max-width: 80rem) {
  .wall { column-gap: var(--space-4); } /* stays 4-up: the poster balancing covers 4-up and 2-up, never 3-up */
  .wall[data-view="list"] .card { grid-template-columns: 5rem 60px minmax(0, 1.3fr) minmax(0, 1fr) 10rem 14.5rem; column-gap: var(--space-3); }
}
@media (max-width: 64rem) {
  .wall, .wall--three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .hero__grid { column-gap: var(--space-4); }
  .room__grid, .hire-teaser__grid, .hire-head__grid, .hire .ask__in, .photos-home__grid, .photos-hire__grid, .photos-about, .map-sec__grid, .booking__grid, .nf__grid, .ask__in, .access__panel { grid-template-columns: 1fr; gap: var(--space-5); }
  .ask__side { position: static; }
  .ask__plan--side { display: none; }
  .hire .ask__in { grid-template-areas: "head" "form"; }
  .ask__side--plan { grid-template-columns: 1fr; gap: var(--space-4); }
  .ask__plan--inline { display: block; }
  .hire-teaser__copy { order: 0; }
  .hire-teaser__plan, .hire-head__poster { justify-self: center; max-width: 24rem; }
  .photos-home .photo--side, .photos-hire .photo--side { margin: 0; }
  .hire-teaser__plan { max-width: 36rem; }
  .archive__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__lead { grid-column: 1 / -1; }
  .wall[data-view="list"] .card { grid-template-columns: 4.5rem 60px minmax(0, 1fr) auto; grid-template-areas: "date thumb act price" "date thumb with buy" "date thumb doors buy"; row-gap: 0.15rem; }
  .wall[data-view="list"] .card__price { justify-self: end; text-align: right; }
}
@media (max-width: 56rem) {
  /* nav: wordmark, Get tickets, menu. Without JS the menu stays inline under the bar. */
  .nav__in { flex-wrap: wrap; gap: var(--space-2) var(--space-3); min-height: 3.75rem; }
  .nav__brand { font-size: 1.5rem; }
  .teeth { width: 1.6rem; }
  .nav__menu { order: 3; flex: 1 0 100%; }
  .nav__menu ul { flex-wrap: wrap; }
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "copy" "more" "poster"; grid-template-rows: none; }
  .hero__poster { width: 80%; max-width: 26rem; margin-top: var(--space-6); justify-self: center; }
  .hero__more { padding-top: var(--space-4); }

  .gig__grid { grid-template-columns: 1fr; grid-template-areas: "head" "facts" "poster" "about"; grid-template-rows: none; }
  .gig__poster { position: static; width: 80%; max-width: 26rem; margin-top: var(--space-6); justify-self: center; }
  .before__grid, .getting__grid, .routes, .spaces__grid, .eat__grid { grid-template-columns: 1fr; }
  .newsletter__in { grid-template-columns: 1fr; }
  .form--wide { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: var(--space-6); }
  .buybar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: var(--night); border-top: 1px solid var(--hairline);
    transform: translateY(110%); transition: transform var(--dur-2) var(--ease-out);
  }
  .buybar.is-on { transform: none; }
  .buybar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .buybar__act { display: block; font: 700 1.25rem / 1 var(--font-display); text-transform: uppercase; }
  .buybar__price { font-size: var(--step--1); color: var(--smoke); }
}
@media (max-width: 56rem) and (scripting: enabled) {
  .nav__in { flex-wrap: nowrap; }
  .nav__toggle { display: inline-flex; }
  .nav__cta { margin-left: auto; transition: opacity var(--dur-1) var(--ease-press), visibility 0s; }
  .buybar-on .nav__cta { opacity: 0; visibility: hidden; transition: opacity var(--dur-1) var(--ease-press), visibility 0s var(--dur-1); }
  .nav__brand { margin-right: 0; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0; padding: var(--space-3) var(--gutter) var(--space-5);
    background: var(--night); border-bottom: 1px solid var(--hairline);
    visibility: hidden; clip-path: inset(0 0 100% 0);
  }
  /* the panel only animates once the button has been used, so a resize or a width change on load never runs it */
  .nav__menu.is-armed { transition: clip-path var(--dur-2) var(--ease-in-out), visibility 0s var(--dur-2); }
  .nav__menu.is-open { visibility: visible; clip-path: inset(0 0 -1px 0); transition-delay: 0s; }
  .nav__menu ul { flex-direction: column; gap: 0; }
  .nav__menu a { display: block; padding: 0.7rem 0; font: 900 2.5rem / 1 var(--font-display); letter-spacing: 0; }
  .nav__menu a::after, .nav__mark { display: none; }
}
@media (max-width: 40rem) {
  .demo-bar__long { display: none; }
  .demo-bar__short { display: inline; }
  .nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav__toggle { padding: 0 0.5rem; }
  .nav__brand span { font-size: 1.35rem; }
  .nav__cta { padding-inline: 0.8em; }
  .hero { padding-top: var(--space-4); }
  .hero__h { font-size: clamp(3rem, 15vw, 4.25rem); }
  .hero__line { font-size: 1.0625rem; }
  .next a { grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--space-2); padding-inline: 0.75rem; }
  .next time { font-size: 0.875rem; }
  .next__act { font-size: 1.25rem; }
  .card__act { font-size: 1.5rem; }
  .wall[data-view="list"] .card { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "thumb date price" "thumb act act" "thumb with with" "thumb doors doors" "buy buy buy"; padding: var(--space-3); column-gap: var(--space-3); }
  .wall[data-view="list"] .card__date time { display: block; }
  .wall[data-view="list"] .card__date { white-space: nowrap; }
  .wall[data-view="list"] .card__price { font-size: var(--step--1); text-align: right; }
  .wall[data-view="list"] .card__act-row { justify-self: stretch; margin-top: var(--space-2); }
  .wall[data-view="list"] .card__buy { justify-content: center; width: 100%; background: var(--acid); color: var(--night); text-decoration: none; }
  .wall[data-view="list"] .card__poster { align-self: start; }
  .archive__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--gutter) var(--space-5); margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .archive__row::-webkit-scrollbar { display: none; }
  .archive__row li { scroll-snap-align: start; }
  .pl-label, .plan--small .pl-label { font-size: 31px; }
  .pl-big, .plan--small .pl-big { font-size: 34px; }
  .map:not(.map--narrow) { display: none; }
  .map--narrow { display: block; }
  .mp-n { font-size: 25px; letter-spacing: 1px; }
  .faq-page__grid { columns: 1; }
  .access__points { grid-template-columns: 1fr; }
  .access__panel { padding: var(--space-4); }
  .access__plan { margin-inline: calc(var(--space-4) * -1); }
  .access__plan .bp { max-width: none; }
  .access__plan figcaption { padding-inline: var(--space-4); }
  .ask__plan { margin-inline: calc(var(--gutter) * -0.5); }
  .space-pick { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .facts__row { grid-template-columns: auto 1fr; }
  .facts__row::after { display: none; }
  .facts__row dd { grid-column: 2; }
  .space { padding: var(--space-4); }
  .footer__top { grid-template-columns: 1fr; }
  .checkout__in { padding: var(--space-4); }
  .form--inline { grid-template-columns: 1fr; }
  .form--inline button[type="submit"] { justify-self: stretch; }
}

/* 27. Reduced motion ------------------------------------------------------- */
/* Posters render complete; hover only changes the outline. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .card__poster:hover .poster, .hero__poster:hover .poster { outline: 2px solid var(--acid); outline-offset: 4px; }
  .btn:hover::before { transform: none; }
}