/*
 * One stylesheet for every template. The merchant's colours arrive as custom
 * properties on :root, already corrected for contrast by ThemeResolver — so no
 * per-merchant CSS is generated, and nothing here can be made unreadable by a
 * colour choice (constitution §10).
 */

:root {
    /* Fallbacks only. The rendered page overrides all of these inline. */
    --site-surface: #ffffff;
    --site-surface-alt: #f5f5f5;
    --site-text: #111111;
    --site-text-muted: #595959;
    --site-primary: #1f5c3a;
    --site-primary-text: #1f5c3a;
    --site-on-primary: #ffffff;
    --site-accent: #c8873b;
    --site-accent-text: #8a5a1f;
    --site-on-accent: #ffffff;
    --site-button: #1f5c3a;
    --site-on-button: #ffffff;
    --site-button-border: #1f5c3a;
    --site-border: #dcdcdc;
    --site-focus: #1f5c3a;
    --site-radius: 10px;
    --site-gap: 4rem;
    --site-font-heading: system-ui, sans-serif;
    --site-font-body: system-ui, sans-serif;

    --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* 16px floor and a comfortable measure, holding at 320px and at 200% zoom (FR-12.5). */
    font: 400 1rem/1.6 var(--site-font-body);
    color: var(--site-text);
    background: var(--site-surface);
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    font-family: var(--site-font-heading);
    line-height: 1.2;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; max-width: 70ch; }

a { color: var(--site-primary-text); }

img { max-width: 100%; height: auto; display: block; }

/* A visible focus ring everywhere, never removed (FR-12.9). */
:focus-visible {
    outline: 3px solid var(--site-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: 0.75rem 1rem; background: var(--site-primary); color: var(--site-on-primary);
}
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.muted { color: var(--site-text-muted); }

/* Empty states are written, never blank (FR-12.15). */
.empty {
    color: var(--site-text-muted);
    background: var(--site-surface-alt);
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius);
    padding: 1.25rem;
    max-width: 60ch;
}

/* ------------------------------------------------------------------ buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    /* 44px minimum target, with real spacing around it (FR-12.4). */
    min-height: 44px; min-width: 44px;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    color: var(--site-text);
    font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer;
}

/* The merchant's button colours (ThemeResolver: the main colour unless they chose otherwise). */
.btn--primary { background: var(--site-button); color: var(--site-on-button); border-color: var(--site-button-border); }
.btn--lg { padding: 0.9rem 1.75rem; font-size: 1.05rem; }
.btn + .btn { margin-left: 0.75rem; }

/* ------------------------------------------------------------------- header */

.site-header { border-bottom: 1px solid var(--site-border); background: var(--site-surface); }
.site-header.is-sticky { position: sticky; top: 0; z-index: 20; }
/* Where a pinned thing starts. A sticky header owns the top 69px of the viewport (the
   68px row and its border; the header is a nowrap flex row, so it never grows a second
   line), and the rail sits a comfortable gap below whichever edge it is measured from. */
:root { --site-pin-top: 1.25rem; }
.has-sticky-header { --site-pin-top: calc(69px + 1.25rem); }

.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; }

.site-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; text-decoration: none; color: var(--site-text); }
.site-brand__logo { width: 40px; height: 40px; object-fit: contain; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.site-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--site-text); text-decoration: none; padding: 0.6rem 0; display: inline-block; }
.site-nav a[aria-current="page"] { border-bottom: 2px solid var(--site-primary); }
/* The header call to action is a button that happens to live in the nav: it keeps the
   button's text colour and padding rather than taking a nav link's, which once left a
   white button with white text on a dark site. */
.site-nav a.site-nav__cta { color: var(--site-on-button); padding: 0.7rem 1.25rem; border-color: var(--site-button-border); }

.site-nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 1px solid var(--site-border); border-radius: var(--site-radius); }
.site-nav__toggle span, .site-nav__toggle span::before, .site-nav__toggle span::after {
    display: block; width: 20px; height: 2px; background: var(--site-text); margin-inline: auto; position: relative;
}
.site-nav__toggle span::before, .site-nav__toggle span::after { content: ""; position: absolute; }
.site-nav__toggle span::before { top: -6px; }
.site-nav__toggle span::after { top: 6px; }

@media (max-width: 767px) {
    .site-nav__toggle { display: block; }
    .site-nav {
        display: none; position: absolute; left: 0; right: 0; top: 68px;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--site-surface); border-bottom: 1px solid var(--site-border);
        padding: 0.5rem 1.25rem 1.25rem;
    }
    body.nav-open .site-nav { display: flex; }
    .site-nav ul { flex-direction: column; gap: 0; }
    .site-nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--site-border); }
    .site-nav a.site-nav__cta { margin-top: 0.75rem; }
}

/* -------------------------------------------------------------------- hero */

.hero { position: relative; }
.hero__inner { display: grid; gap: 2rem; padding-block: clamp(3rem, 8vw, 6rem); }
.hero--image-right .hero__inner, .hero--image-left .hero__inner { grid-template-columns: 1fr; }

@media (min-width: 768px) {
    .hero--image-right .hero__inner, .hero--image-left .hero__inner { grid-template-columns: 1fr 1fr; align-items: center; }
    .hero--image-left .hero__media { order: -1; }
}

.hero.has-image.hero--image-background { color: #fff; }
.hero.has-image.hero--image-background .hero__inner { position: relative; z-index: 2; min-height: 60vh; align-content: center; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/*
 * The scrim is why hero text is readable over ANY photo. Without it, contrast
 * would depend on the picture the merchant happened to upload (FR-12.7).
 */
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)); z-index: 1; }

.hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 700; margin-bottom: .5rem; }
.hero__body { font-size: 1.1rem; }
.hero--plain .hero__inner { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* ---------------------------------------------------------------- sections */

.section { padding-block: var(--site-gap); }
.section:nth-of-type(even) { background: var(--site-surface-alt); }
.section--hero { padding-block: 0; background: none; }
.section--spacer { padding-block: 0; background: none; }

.spacer--sm { height: 2rem; }
.spacer--md { height: 4rem; }
.spacer--lg { height: 7rem; }

.page-title { padding-top: var(--site-gap); }

.prose p { font-size: 1.05rem; }

/* ------------------------------------------------------------------- grids */

.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(var(--cols, 3), 1fr); } }

.card-grid { list-style: none; margin: 0; padding: 0; }

.card { border: 1px solid var(--site-border); border-radius: var(--site-radius); overflow: hidden; background: var(--site-surface); }
/* An explicit aspect ratio so a late-loading image cannot shift the layout (FR-7.15). */
.card__image { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card__body { padding: 1rem; }
.card__title { margin: 0 0 .35rem; font-size: 1.05rem; }
.card__price { margin: 0; font-weight: 700; }

/* -------------------------------------------------------------------- menu */

.menu-group { margin-bottom: 2.5rem; }
.menu-group__name { border-bottom: 2px solid var(--site-border); padding-bottom: .5rem; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--site-border); }
.menu-item__image { width: 72px; height: 72px; object-fit: cover; border-radius: var(--site-radius); flex: none; }
.menu-item__body { flex: 1; }
.menu-item__name { margin: 0; font-weight: 600; }
.menu-item__description { margin: .2rem 0 0; font-size: .95rem; }
.menu-item__price { margin: 0; font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------------- other */

.hours { border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: .5rem 1.5rem .5rem 0; border-bottom: 1px solid var(--site-border); }
.hours .is-today { font-weight: 700; }

.address { font-style: normal; margin-bottom: 1rem; }

.contact-list, .social, .filters ul, .reviews, .notfound__links ul { list-style: none; margin: 0; padding: 0; }
.contact-list, .social, .filters ul { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Contacts: one is a line, several are a list of them — bulleted, so a board of who
   handles what reads as one. A contact with several ways through lists them under its
   name, with a lighter bullet when it sits inside the list of contacts. Spacing is by
   sibling margin rather than a grid gap, so each item stays a list item with its marker. */
.contacts { margin: .25rem 0 0; font-size: .95rem; }
ul.contacts { list-style: disc; padding-left: 1.25rem; }
ul.contacts > li + li { margin-top: .45rem; }
.contact__lines { list-style: disc; margin: .3rem 0 0; padding-left: 1.25rem; }
ul.contacts .contact__lines { list-style: circle; }
.contact__lines > li + li { margin-top: .25rem; }
ul.contacts > li::marker, .contact__lines > li::marker { color: var(--site-accent-text); }
.contact__who { font-weight: 600; }
.contact__sep { color: var(--site-text-muted); }

.cta { text-align: center; }
.cta p { margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

.reviews { display: grid; gap: 1.5rem; }
.review { border: 1px solid var(--site-border); border-radius: var(--site-radius); padding: 1.25rem; }
.review__rating { color: var(--site-accent-text); margin: 0 0 .5rem; }

.breadcrumbs { padding-top: 1.25rem; font-size: .9rem; }
.breadcrumbs ol { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--site-text-muted); }

/* ------------------------------------------------------------------- forms */

.form, .booking { display: grid; gap: 1.25rem; max-width: 34rem; }
.booking { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; max-width: 46rem; }

.field { display: grid; gap: .35rem; }
/* Visible labels, never placeholder-only (FR-12.13). */
.field label { font-weight: 600; }
.field input, .field textarea {
    font: inherit; padding: .7rem .8rem; min-height: 44px;
    border: 1px solid var(--site-border); border-radius: var(--site-radius);
    background: var(--site-surface); color: var(--site-text); width: 100%;
}
.field__hint { font-size: .9rem; color: var(--site-text-muted); margin: 0; }

/* A tick box belongs beside its own words, not stacked above them: the box keeps its own
   small square at the start of the first line and the wording wraps beside it, the whole
   line one target to tap. */
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.field--check input[type="checkbox"] {
    width: 1.15rem; height: 1.15rem; min-height: 0; flex: none;
    margin: .2rem 0 0; padding: 0; border-radius: 4px;
    accent-color: var(--site-primary);
}
.field--check label { font-weight: 400; line-height: 1.5; cursor: pointer; }

/* Country and number are one field wearing two controls: the country is picked so the number
   can be stored in one shape. The select takes what it needs for the longest country name and
   the number takes the rest; below 26rem they stack rather than squeeze. */
.field--phone .field__pair { display: flex; gap: .5rem; flex-wrap: wrap; }
.field--phone .field__pair select {
    font: inherit; padding: .7rem .8rem; min-height: 44px;
    border: 1px solid var(--site-border); border-radius: var(--site-radius);
    background: var(--site-surface); color: var(--site-text);
    flex: 0 1 11rem; min-width: 8rem; max-width: 100%;
}
.field--phone .field__pair input { flex: 1 1 9rem; width: auto; }

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--site-border); padding-block: 2.5rem 1.5rem; background: var(--site-surface-alt); }
.site-footer__inner { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer__col p { margin-bottom: .25rem; }
.site-footer__name { font-weight: 700; font-size: 1.1rem; }
.site-footer__label { font-weight: 700; margin-bottom: .5rem; }
.site-footer__hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.site-footer__hours li { display: flex; gap: 1rem; justify-content: space-between; max-width: 22rem; }
.site-footer__days { font-weight: 600; white-space: nowrap; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; text-transform: capitalize; }
.site-footer__bottom {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: baseline;
    margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--site-border); font-size: .9rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__powered a { color: inherit; }
/* The merchant's own last line — a company number, a licence — takes the whole row, so
   the copyright and the platform credit stay where they have always been. */
.site-footer__note { flex-basis: 100%; }
.site-footer__tagline { margin-bottom: .5rem; }

.notfound { padding-block: clamp(3rem, 10vw, 6rem); }
.notfound__links ul { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Nothing moves for someone who asked for less motion (FR-12.12). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .site-nav, .skip-link, .btn { display: none; }
}

/* ------------------------------------------------------------------- events */

.event-card__when { margin: 0 0 .35rem; font-weight: 600; color: var(--site-primary-text); }
.event-card__note { margin: .35rem 0 0; font-weight: 700; color: var(--site-text-muted); }
.card.is-unavailable .card__image { opacity: .6; }

.event-detail { display: grid; gap: 2rem; }
@media (min-width: 768px) { .event-detail { grid-template-columns: 1fr 1fr; align-items: start; } }
.event-detail__image { border-radius: var(--site-radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.event-detail__name { margin-top: 0; }
.event-detail__facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 1.25rem; }
.event-detail__facts dt { font-weight: 700; }
.event-detail__facts dd { margin: 0; }

.ticket-picker__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ticket-type {
    display: grid; gap: .5rem 1rem; align-items: center;
    grid-template-columns: 1fr auto; padding: 1rem 0;
    border-bottom: 1px solid var(--site-border);
}
@media (min-width: 600px) { .ticket-type { grid-template-columns: 1fr auto auto; } }
.ticket-type.is-unavailable { opacity: .6; }
.ticket-type__name { margin: 0; font-weight: 600; }
.ticket-type__remaining { margin: .2rem 0 0; font-size: .9rem; font-weight: 700; color: var(--site-accent-text); }
.ticket-type__price { margin: 0; font-weight: 700; white-space: nowrap; }
.ticket-type__qty { display: grid; gap: .25rem; }
.ticket-type__qty label { font-size: .85rem; font-weight: 600; }
.ticket-type__qty input { width: 5.5rem; min-height: 44px; font: inherit; padding: .5rem;
    border: 1px solid var(--site-border); border-radius: var(--site-radius);
    background: var(--site-surface); color: var(--site-text); }
.ticket-picker__terms { font-size: .9rem; color: var(--site-text-muted); max-width: 60ch; }

/* ------------------------------------------------------------------ product */

.card__link { display: block; color: inherit; text-decoration: none; }
.card__link:hover .card__title { text-decoration: underline; }

.filters a { display: inline-block; padding: .5rem .9rem; min-height: 44px; line-height: 1.8;
    border: 1px solid var(--site-border); border-radius: var(--site-radius);
    text-decoration: none; color: var(--site-text); }
.filters a.is-active { background: var(--site-primary); color: var(--site-on-primary); border-color: var(--site-primary); }

.product { display: grid; gap: 2rem; }
@media (min-width: 768px) { .product { grid-template-columns: 1fr 1fr; align-items: start; } }
.product__media img { width: 100%; border-radius: var(--site-radius); aspect-ratio: 1 / 1; object-fit: cover; }
.product__name { margin-top: 0; }
.product__price { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.25rem; }
.product__was { margin-left: .6rem; font-size: 1rem; font-weight: 400; text-decoration: line-through; color: var(--site-text-muted); }
.product__buy { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.product__buy .field { display: grid; gap: .25rem; }
.product__buy input { width: 5.5rem; }
.product__description { margin-top: 1rem; }

/* ---------------------------------------------------------------- event page */
/* The event the way a flyer reads (sites spec, events template). Mobile first: one
   column with the order bar pinned to the bottom; from 1024px the flyer holds the left
   rail and the order summary the right, so the total is never off screen. Every colour
   is a theme token, so the dark events template and a light site both work. */

.section--events-showcase { padding-block: 1.25rem var(--site-gap); }
.event-page { display: grid; gap: 1.25rem; padding-bottom: 5.5rem; }
.event-page.is-selling { padding-bottom: 6rem; }
@media (min-width: 1024px) {
    .event-page { grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; gap: 2.5rem; padding-bottom: 0; }
    .event-page.is-selling { grid-template-columns: minmax(280px, 360px) 1fr minmax(260px, 316px); padding-bottom: 0; }
}
.event-flyer { border-radius: var(--site-radius); overflow: hidden; border: 1px solid var(--site-border); line-height: 0; background: var(--site-surface-alt); }
.event-flyer img { width: 100%; display: block; }
.event-flyer--text { aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 1.5rem; line-height: 1.15;
    font-family: var(--site-font-heading); font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 700; text-align: center; letter-spacing: -.02em; }
.event-page__under { display: flex; gap: .6rem; margin-top: .75rem; }
.event-tool { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px;
    padding: .6rem .8rem; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
    border: 1px solid var(--site-border); border-radius: var(--site-radius); background: var(--site-surface-alt); color: var(--site-text); }
.event-tool svg { width: 16px; height: 16px; color: var(--site-text-muted); }
.event-page__toolnote { margin: .5rem 0 0; font-size: .9rem; }

.event-page__kicker { margin: 0 0 .4rem; font-size: .9rem; color: var(--site-text-muted); }
/* The title as the merchant styled it (Event page settings, EventTitleStyle): each custom
   property is set inline only when they chose, so the template's own value stands
   otherwise — a template stylesheet gives its own fallback for the size and the capitals.
   A chosen size is capped by the screen so a long word still fits a phone; the outline
   is drawn under the fill (paint-order) in the page's own background unless a colour is
   chosen, so it reads against the letters by construction. */
.event-page__title { margin: 0 0 1.25rem; letter-spacing: -.03em; line-height: 1.06;
    font-size: min(var(--event-title-size, clamp(1.9rem, 6vw, 2.6rem)), 13vw);
    color: var(--event-title-color, currentColor);
    text-transform: var(--event-title-case, none);
    -webkit-text-stroke: var(--event-title-stroke, 0) var(--event-title-stroke-color, var(--site-surface));
    paint-order: stroke fill;
    text-shadow: var(--event-title-shadow, none); }
.event-page__paid { margin: 0 0 1rem; }
.event-page__subhead { margin: 1.75rem 0 .7rem; font-size: 1rem; font-weight: 600; }
.event-page__about { font-size: .95rem; color: var(--site-text-muted); max-width: 62ch; line-height: 1.65; }
.event-page__contact { font-size: .9rem; margin-top: 1rem; }
.event-page__note { font-weight: 700; color: var(--site-text-muted); margin: 1rem 0; }

/* Facts: a grid of bold line + detail, one hairline between cells. */
.event-facts { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--site-border);
    border: 1px solid var(--site-border); border-radius: var(--site-radius); overflow: hidden; margin: 0; }
@media (min-width: 640px) { .event-facts { grid-template-columns: repeat(var(--facts-cols, 2), 1fr); } }
.event-fact { background: var(--site-surface); padding: .9rem 1rem; display: flex; gap: .8rem; align-items: flex-start; }
.event-fact > svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--site-text-muted); }
.event-fact__k { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.event-fact__v { margin: 2px 0 0; font-size: .85rem; line-height: 1.45; color: var(--site-text-muted); }

/* Chips: a row of short tags. */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .45rem .85rem; font-size: .85rem; border: 1px solid var(--site-border); border-radius: 999px; background: var(--site-surface-alt); }

/* Ticket cards with steppers. */
.ticket-select { margin: 0; }
.ticket-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ticket-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1rem 1.1rem; border: 1px solid var(--site-border); border-radius: var(--site-radius); background: var(--site-surface-alt); }
.ticket-card.is-selected { border-color: var(--site-text); }
.ticket-card.is-sold { opacity: .45; }
.ticket-card__about { min-width: 0; }
.ticket-card__name { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.ticket-card__sub { margin: 2px 0 0; font-size: .85rem; color: var(--site-text-muted); }
.ticket-card__perks { list-style: none; margin: .5rem 0 0; padding: 0; }
.ticket-card__perks li { position: relative; padding-left: 15px; font-size: .85rem; line-height: 1.6; color: var(--site-text-muted); }
.ticket-card__perks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--site-text-muted); }
.ticket-card__left { display: block; margin-top: .5rem; font-size: .8rem; font-weight: 600; color: var(--site-accent-text); }
.ticket-card__right { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; flex: 0 0 auto; }
@media (min-width: 640px) { .ticket-card__right { flex-direction: row; align-items: center; gap: 1.4rem; } }
.ticket-card__price { margin: 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepper { display: flex; align-items: center; gap: .5rem; }
.stepper__btn { width: 40px; height: 40px; display: grid; place-items: center; font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
    border: 1px solid var(--site-border); border-radius: calc(var(--site-radius) - 2px); background: var(--site-surface); color: var(--site-text); }
.stepper__btn.is-on { background: var(--site-primary); color: var(--site-on-primary); border-color: var(--site-primary); }
.stepper__btn.is-off { opacity: .4; }
.stepper__qty { width: 3.2rem; min-height: 40px; text-align: center; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
    border: 1px solid transparent; border-radius: calc(var(--site-radius) - 2px); background: transparent; color: var(--site-text); -moz-appearance: textfield; }
.stepper__qty::-webkit-outer-spin-button, .stepper__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__qty:focus-visible { border-color: var(--site-border); }

/* The order: a rail on a desktop, a bar pinned to the bottom of a phone. */
.order-summary { border: 1px solid var(--site-border); border-radius: var(--site-radius); background: var(--site-surface-alt); padding: 1.1rem 1.2rem; }
.order-summary__title { margin: 0 0 .6rem; font-weight: 600; }
.order-summary__rows { list-style: none; margin: 0; padding: 0; }
.order-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .9rem; color: var(--site-text-muted); }
.order-row b { color: var(--site-text); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-row--total { border-top: 1px solid var(--site-border); margin-top: .5rem; padding-top: .85rem; font-size: 1.05rem; color: var(--site-text); }
.order-row--total b { font-weight: 700; }
.order-summary__empty { font-size: .9rem; margin: 0 0 .25rem; }
.order-summary__btn { width: 100%; margin-top: .9rem; }
.order-summary__mini { margin: .6rem 0 0; font-size: .8rem; text-align: center; }
.order-summary__event { display: flex; gap: .8rem; padding-bottom: .9rem; margin-bottom: .4rem; border-bottom: 1px solid var(--site-border); }
.order-summary__event img { width: 56px; height: 80px; object-fit: cover; border-radius: calc(var(--site-radius) - 3px); flex: 0 0 56px; }
.order-summary__name { margin: 0; font-weight: 600; line-height: 1.25; }
.order-summary__meta { margin: .25rem 0 0; font-size: .85rem; line-height: 1.45; }
/* Pinned, the order follows the buyer down the page. It starts clear of a sticky header
   and is never taller than what is left of the viewport: the ticket rows take the
   squeeze and scroll inside the card, so the event, the total, the button and the hold
   note stay in sight however many tiers have been chosen. The pinned element is the one
   the grid places — the checkout's card is the grid item itself, the event page's card
   sits inside its aside — because a sticky box only travels inside its own parent, and
   these parents are sized to their content by align-items: start. */
.event-page__summary { display: none; }
@media (min-width: 900px) {
    .checkout__summary, .event-page__summary {
        position: sticky; top: var(--site-pin-top);
        max-height: calc(100vh - var(--site-pin-top) - 1.25rem);
    }
    .checkout__summary, .event-page__summary > .order-summary {
        display: flex; flex-direction: column; min-height: 0;
    }
    /* Everything but the rows keeps its size; the rows give up the room and scroll. */
    .checkout__summary > *, .event-page__summary > .order-summary > * { flex-shrink: 0; }
    .checkout__summary .order-summary__rows, .event-page__summary .order-summary__rows {
        flex: 0 1 auto; min-height: 3rem; overflow-y: auto; overscroll-behavior: contain;
    }
}
@media (min-width: 1024px) { .event-page__summary { display: flex; flex-direction: column; } }

.event-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); background: var(--site-surface); border-top: 1px solid var(--site-border); }
.event-bar__text { display: grid; min-width: 0; }
.event-bar__text strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.event-bar__text small { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-bar .btn { white-space: nowrap; }
.event-bar .btn[disabled] { opacity: .55; cursor: default; }
@media (min-width: 1024px) { .event-page .event-bar { display: none; } }
.event-bar--section { position: sticky; bottom: 0; border-radius: var(--site-radius) var(--site-radius) 0 0; }

/* The buyer-details step: a narrow form with the order pinned alongside. */
.step-bar { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; gap: .5rem; font-size: .9rem; color: var(--site-text-muted); }
/* In the grid the row gap does the spacing the margin used to — the same 1.5rem, so a
   phone renders exactly as it did before the steps moved into the grid. */
.checkout__grid > .step-bar { margin-bottom: 0; }
.step-bar li + li::before { content: "\203A"; margin-right: .5rem; }
.step-bar [aria-current="step"] { color: var(--site-text); font-weight: 600; }
.step-bar a { color: inherit; }
.checkout__grid { display: grid; gap: 1.5rem; }
/* Two columns, and the order fills the second from the first row: level with the steps,
   not a step's height below them. The row gap stays the 1.5rem the steps' own margin
   gave them; only the column gap is the wider one. */
@media (min-width: 900px) {
    .checkout__grid { grid-template-columns: 1fr minmax(280px, 372px); align-items: start; gap: 1.5rem 2.5rem; }
    .checkout__grid > .step-bar { grid-area: 1 / 1; }
    .checkout__form { grid-area: 2 / 1; }
    /* And it rises into the block's own top padding, so it fills the space beside the
       breadcrumbs rather than starting below them — stopping 1.25rem under that line,
       whatever spacing the merchant's theme gives a section. */
    .checkout__summary { grid-area: 1 / 2 / span 2; margin-top: calc(1.25rem - var(--site-gap)); }
}
.checkout__heading { font-size: 1.4rem; margin: 0 0 1rem; }
.checkout__preview { margin: 0 0 1.5rem; padding: .75rem 1rem; border: 1px solid var(--site-border); border-radius: var(--site-radius); background: var(--site-surface-alt); color: var(--site-text-muted); font-size: .95rem; }
.checkout__form .field { margin-bottom: .9rem; }
.checkout__two { display: grid; gap: .9rem; }
@media (min-width: 640px) { .checkout__two { grid-template-columns: 1fr 1fr; } }
.checkout__consent { margin: 1.25rem 0 .75rem; }
.checkout__pay { width: 100%; margin-top: .75rem; }
.checkout__note { font-size: .85rem; margin-top: .9rem; line-height: 1.6; }
.ticket-picker__status { margin: 1rem 0 0; font-weight: 600; }
.ticket-picker__status.is-warn { color: var(--site-accent-text); }
.ticket-picker__status.is-ok { color: var(--site-primary-text); }

@media print { .event-bar, .event-page__under, .event-page__summary { display: none; } }

/* ---------------------------------------------------------------- order page */
/* After payment: "You're on the list", a pass per ticket, the code the door scans. The
   pass is always white with dark type so it reads on a dim phone and prints as-is. */
.section--order { padding-block: 2rem 4rem; }
.done { max-width: 600px; text-align: center; }
.done__mark { width: 56px; height: 56px; border-radius: 50%; background: var(--site-text); color: var(--site-surface);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; }
.done__mark svg { width: 26px; height: 26px; }
.done__title { margin: 0; font-size: clamp(1.6rem, 5vw, 2rem); letter-spacing: -.025em; }
.done__sub { margin: .5rem auto 0; font-size: .95rem; color: var(--site-text-muted); max-width: 44ch; }
.pass { display: flex; flex-direction: column; margin: 1.75rem 0 0; background: #fff; color: #0B0C0F; border-radius: 1rem; overflow: hidden; text-align: left; }
.pass__left { flex: 1; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; }
.pass__event { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.pass__venue { margin: .25rem 0 0; font-size: .85rem; color: #5C616B; }
.pass__grid { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; }
.pass__l { margin: 0; font-size: .65rem; color: #787D87; letter-spacing: .05em; text-transform: uppercase; }
.pass__v { margin: 2px 0 0; font-size: .9rem; font-weight: 600; }
.pass__ref { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; font-size: 1.05rem; }
.pass__right { border-top: 1px dashed #C9CDD4; padding: 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.pass__qr { width: 164px; height: 164px; }
.pass__right small { font-size: .7rem; color: #787D87; }
.pass__open { font-size: .78rem; color: #5C616B; }
.pass__wallet { display: flex; gap: .5rem; flex-wrap: wrap; padding: 0 1.4rem 1.2rem; }
/* The ticket as the organiser drew it, above the pass: the picture the email carries. Its
   code is small at page width, so the pass keeps its own, scannable one underneath. */
.pass__picture { display: block; width: 100%; height: auto; background: #F1F2F4; }
@media (min-width: 560px) {
    .pass { flex-wrap: wrap; flex-direction: row; }
    .pass__picture { flex-basis: 100%; }
    .pass__right { flex: 0 0 200px; border-top: 0; border-left: 1px dashed #C9CDD4; }
    .pass__wallet { flex-basis: 100%; }
}
.done__acts { display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; justify-content: center; }
.done__acts + .done__acts { margin-top: .6rem; }
.done__note { font-size: .85rem; margin: 1rem auto 0; max-width: 52ch; line-height: 1.6; }
.done__toolnote { margin: .6rem 0 0; font-size: .85rem; }
@media print {
    .done__mark, .done__acts, .pass__open, .pass__wallet, .done__toolnote { display: none; }
    .pass { border: 1px solid #ccc; break-inside: avoid; }
}

/* A map: Google's embed in a frame the width of its column. */
.map-embed { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 220px; border: 0;
    border-radius: var(--site-radius); background: var(--site-surface-alt); margin: 0 0 1rem; }

/* ------------------------------------------------- checkout: the card on the page */
/* The "card" and "express" payment pages mount Stripe's fields between the buyer's
   details and the consent line. The fields are Stripe's own frames; these rules only
   place them and draw the "or pay by card" seam under a wallet button. */
.checkout__heading--pay { font-size: 1.15rem; margin: 1.75rem 0 .9rem; }
.checkout__express { margin: 0 0 .9rem; }
.pay-divider { display: flex; align-items: center; gap: .75rem; margin: .9rem 0 1rem; font-size: .85rem; color: var(--site-text-muted); }
.pay-divider::before, .pay-divider::after { content: ""; flex: 1; border-top: 1px solid var(--site-border); }
.checkout__card { min-height: 3.25rem; }
.checkout__secure { font-size: .8rem; margin: .6rem 0 0; }
.order-summary__hold { display: block; margin-top: .25rem; font-variant-numeric: tabular-nums; color: var(--site-text); }

/* ------------------------------------------------- a buyer's own purchases */
/* "My Tickets", "My Stays" or "My Orders", depending on what this business sells.
   Signing in is one field and one code; what it opens is a list of what the buyer
   already bought, each row linking to the receipt or the passes they already hold. */
.section--account { padding-block: 2rem 4rem; }
.account { max-width: 46rem; }
.account__title { margin: 0 0 1rem; }
.account__status { border-radius: var(--site-radius); padding: .8rem 1rem; margin: 0 0 1.25rem; }
.account__status.is-ok { background: var(--site-surface-alt); }
.account__status.is-warn { background: var(--site-surface-alt); border: 1px solid var(--site-border); }
.account__lead { max-width: 52ch; color: var(--site-text-muted); }
.account__form { margin-block: 1.25rem; }
/* A code is read off a phone and typed once: give it room and spacing, not a cramped box. */
.account__code { font-size: 1.35rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; max-width: 12ch; }
.account__again { margin-top: .75rem; }
/* Two ways in, one form: the word between them has to read as a choice, not a heading. */
.account__or { margin-block: 1rem; color: var(--site-text-muted); text-transform: lowercase; }
.account__who { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--site-border); }
.account__who p { margin: 0; }

.account__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.account__purchase { border: 1px solid var(--site-border); border-radius: var(--site-radius);
    background: var(--site-surface); padding: 1.1rem 1.25rem; }
.account__purchase-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.account__purchase-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.015em; }
.account__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0;
    font-size: .9rem; color: var(--site-text-muted); font-variant-numeric: tabular-nums; }
.account__when, .account__lines { margin: .5rem 0 0; font-size: .95rem; }
.account__purchase p:last-child { margin-bottom: 0; }

/* The state of an order, said in words as well as colour (FR-12.9): the badge always
   carries its own label, so nothing here depends on telling one shade from another. */
.account__badge { flex: none; font-size: .8rem; font-weight: 600; white-space: nowrap;
    padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--site-border);
    background: var(--site-surface-alt); color: var(--site-text); }
.account__badge.is-paid { border-color: var(--site-primary); }
.account__badge.is-cancelled { color: var(--site-text-muted); }

/* A small button for a secondary action beside a sentence. */
.btn--sm { min-height: 36px; padding: .4rem .85rem; font-size: .9rem; }

/* The visitor's own time, under an event time given in the venue's zone (site.js). */
.local-time { display: block; margin-top: 2px; font-size: .8rem; font-weight: 400; line-height: 1.4; color: var(--site-text-muted); }
.pass__v .local-time { color: #787D87; }

/* ================================================================ templates */
/* Everything below is shared by every template; a template's own stylesheet
   (css/templates/{key}.css) only reshapes what is here. Colours stay theme tokens. */

/* A section's title row: the heading, and beside it a line or a link. */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-head h1, .section-head h2, .section-head h3 { margin-bottom: 0; }
.section-head__note { margin: 0; }
.section-head__link { font-weight: 600; text-decoration: none; white-space: nowrap; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--site-accent-text); margin: 0 0 .5rem; }

.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--site-accent); color: var(--site-on-accent); }
.tag--muted { background: var(--site-surface-alt); color: var(--site-text-muted); }

/* Open now: a dot and a line. The state is in the words as well as the dot (FR-12.9). */
.open-now { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; padding: 0 .8rem 0 .7rem; border-radius: 999px;
    background: var(--site-surface-alt); font-weight: 600; font-size: .9rem; color: var(--site-text); }
.open-now i { width: 8px; height: 8px; border-radius: 50%; background: var(--site-text-muted); flex: none; }
.open-now.is-open i { background: var(--site-primary); }

/* The strip above the header, in the site's ink on its paper, reversed. */
.site-strip { background: var(--site-text); color: var(--site-surface); font-size: .85rem; }
.site-strip__inner { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; flex-wrap: wrap; min-height: 32px; padding-block: .25rem; }
.site-strip__note, .site-strip__open { margin: 0; }

/* -------------------------------------------------------------- hero, again */
.hero__copy { max-width: 42rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero__actions .btn + .btn { margin-left: 0; }
.hero--photo .hero__secondary, .hero--colour .hero__secondary { background: transparent; color: inherit; border-color: currentColor; }
.hero--size-compact .hero__inner { min-height: 0; padding-block: clamp(2rem, 5vw, 3.5rem); }
.hero--size-tall.hero--photo .hero__inner { min-height: 72vh; }
.hero--photo.hero--scrim-light { color: #111; }
.hero--scrim-light .hero__scrim { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.8)); }
.hero--scrim-none .hero__scrim { display: none; }
.hero--align-center .hero__copy { text-align: center; margin-inline: auto; }
.hero--align-center .hero__actions { justify-content: center; }
.hero--align-center .hero__body { margin-inline: auto; }
.hero--colour a:not(.btn) { color: inherit; }
/* The poster: the promise in big type on a colour, and a stamp in the corner. */
.hero--poster .hero__inner { padding-block: clamp(3rem, 8vw, 5rem); }
.hero--poster .hero__heading { font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: .98; letter-spacing: -.02em; max-width: 16ch; }
.hero--poster .hero__body { font-size: 1.2rem; max-width: 36em; }
@media (min-width: 768px) {
    .hero--poster .hero__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.hero__badge { width: 150px; height: 150px; border-radius: 50%; background: var(--site-accent); color: var(--site-on-accent);
    display: grid; place-content: center; text-align: center; transform: rotate(-8deg); justify-self: end; align-self: start; }
.hero__badge strong { display: block; font-size: 2.6rem; line-height: 1; font-family: var(--site-font-heading); }
.hero__badge span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-top: .2rem; }

/* ------------------------------------------------------------- shop window */
.section--retail-spotlight { padding-block: clamp(2.5rem, 6vw, 4rem); background: none; }
.spotlight { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .spotlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; } .spotlight--words { grid-template-columns: 1fr; } }
.spotlight__note { margin: 1rem 0 0; font-size: .95rem; }
.spotlight__stage { position: relative; padding: 1.5rem 1.5rem 0 0; }
.spotlight__block { position: absolute; right: 0; top: 0; width: 82%; height: 92%; border-radius: calc(var(--site-radius) + 4px); background: var(--site-primary); opacity: .92; }
.spotlight__product { position: relative; max-width: 400px; box-shadow: 0 24px 48px -24px rgba(0,0,0,.45); }
.spotlight__image { aspect-ratio: 5 / 4; }
.spotlight__image--text { display: grid; place-items: center; background: var(--site-surface-alt); font-family: var(--site-font-heading); font-size: 1.6rem; font-weight: 700; text-align: center; padding: 1rem; }
.spotlight__body { display: grid; gap: .6rem; padding: 1rem 1.1rem 1.1rem; }
.spotlight__line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.spotlight__name { font-size: 1.3rem; margin: 0; }
.spotlight__name a { color: inherit; text-decoration: none; }
.spotlight__about { margin: 0; font-size: .95rem; }
.spotlight .card__add .btn { width: 100%; }

/* Categories as chips: a colour, the name, how many. */
.category-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.category-chip { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1rem 0 .5rem; border: 1px solid var(--site-border);
    border-radius: 999px; background: var(--site-surface); color: var(--site-text); text-decoration: none; font-weight: 500; }
.category-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.category-chip small { font-size: .85rem; }
.category-chip:hover { border-color: var(--site-text); }

/* Cards that carry an action. */
.product-card { display: flex; flex-direction: column; }
.product-card .card__link { flex: 1; }
.card__actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: 0; }
.card__was { margin-left: .4rem; font-weight: 400; font-size: .9rem; color: var(--site-text-muted); text-decoration: line-through; }
.card__add { margin: 0; }
.card.is-unavailable .card__image { opacity: .6; }

/* ------------------------------------------------------------------- story */
.story { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
    .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
    .story--image-right .story__media { order: 2; }
    .story--no-photo { grid-template-columns: minmax(0, 1fr); }
}
.story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--site-radius); }
.story__copy p { font-size: 1.05rem; }
.story__facts, .numbers { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: 1.5rem 0 0; }
.number { display: grid; gap: .15rem; }
.number dt { font-family: var(--site-font-heading); font-size: 2rem; font-weight: 700; line-height: 1; }
.number dd { margin: 0; font-size: .9rem; color: var(--site-text-muted); }

/* ------------------------------------------------------------------- steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.step { counter-increment: step; display: grid; gap: .5rem; padding: 1.25rem 1.25rem 1.4rem; border: 1px solid var(--site-border); border-radius: var(--site-radius); background: var(--site-surface); }
.step::before { content: counter(step); font-family: var(--site-font-heading); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--site-accent-text); }
.step p { margin: 0; font-size: .95rem; }

/* ------------------------------------------------------------------ quotes */
.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.quote { display: grid; gap: .6rem; padding: 1.25rem 1.4rem; border-radius: var(--site-radius); background: var(--site-surface); border: 1px solid var(--site-border); }
.quote__text { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.quote__text::before { content: "\201C"; }
.quote__text::after { content: "\201D"; }
.quote__who { margin: 0; font-size: .9rem; }

/* ------------------------------------------------------------ facts, looks */
.facts-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.facts-row__item { display: flex; gap: .9rem; align-items: flex-start; }
.facts-row__item > svg { width: 26px; height: 26px; flex: none; color: var(--site-primary-text); margin-top: .1rem; }
.facts-row__item p { margin: .15rem 0 0; font-size: .95rem; }

/* ---------------------------------------------------------- galleries, work */
.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
.gallery__item { margin: 0; }
.gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--site-radius); }
.work { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
@media (min-width: 768px) { .work { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; } .work__item:first-child { grid-column: span 2; grid-row: span 2; } }
.work__item { margin: 0; position: relative; border-radius: var(--site-radius); overflow: hidden; }
.work__item img { width: 100%; height: 100%; object-fit: cover; }
.work__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .8rem; font-size: .8rem; font-weight: 600; color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65)); }

/* -------------------------------------------------------------------- team */
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.team__member { display: grid; gap: .35rem; }
.team__member p { margin: 0; font-size: .9rem; }
.team__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; margin-bottom: .5rem; }
.team__photo--initial { display: grid; place-items: center; background: var(--site-surface-alt); font-family: var(--site-font-heading); font-size: 2.5rem; font-weight: 700; color: var(--site-text-muted); }

/* ------------------------------------------------------------ business card */
.section--profile-card { background: none; padding-block: clamp(2.5rem, 6vw, 4rem); }
.bizcard { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .bizcard { grid-template-columns: minmax(0, 1fr) 440px; gap: 3.5rem; } .bizcard--words { grid-template-columns: 1fr; } }
.bizcard__copy .open-now { margin-bottom: 1rem; }
.bizcard__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.bizcard__actions .btn + .btn { margin-left: 0; }
.bizcard__actions .btn svg { width: 18px; height: 18px; margin-right: .5rem; }
.bizcard__note { margin: 1rem 0 0; font-size: .95rem; }
.bizcard__photos { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
.bizcard__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--site-radius); }
.bizcard__photos--1 { grid-template-columns: 1fr; grid-auto-rows: 360px; }
.bizcard__photos--3 img:first-child { grid-row: span 2; }

/* ----------------------------------------------------------------- tonight */
.tonight { display: grid; gap: .8rem; max-width: 400px; padding: 1.4rem; border-radius: var(--site-radius); background: var(--site-surface); border: 1px solid var(--site-border); box-shadow: 0 30px 60px -32px rgba(0,0,0,.45); }
.tonight__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tonight__title { margin: 0; font-size: 1.5rem; }
.tonight__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.tonight__actions .btn + .btn { margin-left: 0; }
.tonight__actions .btn svg { width: 18px; height: 18px; margin-right: .4rem; }
.tonight__note { margin: 0; font-size: .9rem; }

/* ------------------------------------------------------------------ ledger */
.ledger { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 900px) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger__name { font-size: 1.25rem; border-bottom: 1px solid var(--site-border); padding-bottom: .4rem; margin: 0 0 .5rem; }
.ledger__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ledger__row { display: flex; align-items: baseline; gap: .6rem; }
.ledger__dish { font-weight: 600; }
.ledger__dots { flex: 1; border-bottom: 1px dotted var(--site-border); transform: translateY(-4px); min-width: 1rem; }
.ledger__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger__about { margin: .1rem 0 0; font-size: .9rem; font-style: italic; }

/* ------------------------------------------------------------------ dishes */
.dishes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.dish { display: grid; gap: .3rem; }
.dish__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--site-radius); margin-bottom: .5rem; }
.dish__line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dish__name { margin: 0; font-size: 1.25rem; }
.dish__price { margin: 0; font-weight: 700; white-space: nowrap; }
.dish__about { margin: 0; font-size: .95rem; }

/* ------------------------------------------------------------------- rooms */
.rail { list-style: none; margin: 0; padding: 0 0 .75rem; display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail > * { flex: 0 0 min(80vw, 340px); scroll-snap-align: start; }
.room__body { display: grid; gap: .55rem; }
.room__line { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.room__line .card__title { margin: 0; }
.room__sleeps { font-size: .9rem; white-space: nowrap; }
.room__about { margin: 0; font-size: .95rem; }
.room__amenities .chip { font-size: .75rem; padding: .3rem .6rem; }
.room__foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .25rem; }
.room__from, .room__night { font-weight: 400; font-size: .85rem; }

.amenities-block { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .amenities-block { grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; } }
.amenities { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.amenity { display: flex; gap: .8rem; align-items: flex-start; }
.amenity > svg { width: 26px; height: 26px; flex: none; color: var(--site-primary-text); }
.amenity p { margin: .1rem 0 0; font-size: .9rem; }
.amenity-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }

.booking-card { padding: 1.25rem 1.5rem; border-radius: var(--site-radius); background: var(--site-surface); border: 1px solid var(--site-border); box-shadow: 0 30px 60px -32px rgba(0,0,0,.4); }
.booking-card__title { margin: 0 0 .9rem; font-size: 1.35rem; }
.booking-card .booking { max-width: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.booking__go { display: grid; gap: .4rem; justify-items: end; }
.booking__note { margin: 0; font-size: .85rem; }

/* ------------------------------------------------------------------- dates */
.dates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--site-border); }
.date-row { display: grid; gap: .25rem 1.25rem; grid-template-columns: 1fr auto; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--site-border); }
@media (min-width: 768px) { .date-row { grid-template-columns: 7rem minmax(0, 1fr) auto auto auto; } }
.date-row__d { font-family: var(--site-font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1; grid-column: 1 / -1; }
@media (min-width: 768px) { .date-row__d { grid-column: auto; } }
.date-row__name { margin: 0; font-size: 1.1rem; }
.date-row__name a { color: inherit; text-decoration: none; }
.date-row__sub { margin: .1rem 0 0; font-size: .9rem; }
.date-row__when { font-size: .9rem; white-space: nowrap; }
.date-row__price { white-space: nowrap; }
.date-row.is-unavailable { opacity: .6; }

/* The flyer behind the top of the event page. */
.section--events-showcase { position: relative; }
.event-backdrop { position: absolute; inset: 0 0 auto 0; height: min(620px, 80vh); overflow: hidden; z-index: 0; pointer-events: none; }
.event-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.2); transform: scale(1.12); opacity: .55; }
.event-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), var(--site-surface) 100%); }
.event-page.has-backdrop { position: relative; z-index: 1; }

/* ------------------------------------------------------------ hours, summary */
.hours-summary { margin: 0; display: grid; gap: .35rem 1.5rem; grid-template-columns: max-content 1fr; max-width: 24rem; }
.hours-summary > div { display: contents; }
.hours-summary dt { font-weight: 600; }
.hours-summary dd { margin: 0; }

/* ------------------------------------------------------------- price table */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; vertical-align: middle; padding: .9rem .75rem; border-bottom: 1px solid var(--site-border); }
.price-table th { padding-left: 0; }
.price-table td:last-child { padding-right: 0; text-align: right; }
.price-table__name { font-size: 1.05rem; }
.price-table__name a { color: inherit; text-decoration: none; }
.price-table__about { font-size: .95rem; }
.price-table__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table__from { font-size: .85rem; margin-right: .3rem; }
@media (max-width: 639px) {
    .price-table thead { display: none; }
    .price-table tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .9rem 0; border-bottom: 1px solid var(--site-border); }
    .price-table th, .price-table td { display: block; padding: 0; border: 0; }
    .price-table__about { grid-column: 1 / -1; }
    .price-table__go { grid-column: 2; grid-row: 1; }
}

/* ----------------------------------------------------------------- counter */
.counter { display: grid; gap: .8rem; max-width: 720px; }
.counter__search input[type="search"] { font: inherit; min-height: 48px; padding: .7rem 1rem; width: 100%; border: 1px solid var(--site-border); border-radius: var(--site-radius); background: var(--site-surface); color: var(--site-text); }
.counter__chips { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.counter__chips .chip { font: inherit; font-size: .9rem; font-weight: 600; min-height: 40px; cursor: pointer; color: var(--site-text); }
.counter__chips .chip.is-on { background: var(--site-primary); color: var(--site-on-primary); border-color: var(--site-primary); }
.counter__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.counter__item { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border: 1px solid var(--site-border); border-radius: var(--site-radius); background: var(--site-surface); }
.counter__item.is-chosen { border-color: var(--site-primary); background: var(--site-surface-alt); }
.counter__item.is-unavailable { opacity: .6; }
.counter__photo { width: 60px; height: 60px; border-radius: calc(var(--site-radius) - 2px); object-fit: cover; flex: none; background: var(--site-surface-alt); }
.counter__about { flex: 1; min-width: 0; display: grid; }
.counter__about span { font-size: .85rem; }
.counter__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.counter__stepper { flex: none; }
.counter__qty { width: 2.2rem; }
.counter__none { margin: 0; }
.counter__choose { flex: none; }
.counter__add { flex: none; margin: 0; }
.counter__bar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: .5rem; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); border-radius: var(--site-radius) var(--site-radius) 0 0;
    background: var(--site-text); color: var(--site-surface); }
.counter__bar-text { display: grid; min-width: 0; }
.counter__bar-text small { color: inherit; opacity: .75; }
.counter__bar-text .counter__problem { opacity: 1; font-weight: 600; }
.counter__bar .btn { white-space: nowrap; }

/* ------------------------------------------------------------- phone rules */
/* Two-up grids of products on a phone, never a column of full-width cards. */
@media (max-width: 559px) {
    .grid.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .grid.products .card__body { padding: .7rem .75rem; }
    .grid.products .card__title { font-size: .95rem; }
    .grid.products .card__actions { flex-wrap: wrap; }
}
/* The order list on a phone: the photo, then the words, then the price over the stepper. */
@media (max-width: 480px) {
    .counter__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "photo about price" "photo about step"; gap: .25rem .8rem; }
    .counter__photo { grid-area: photo; width: 52px; height: 52px; }
    .counter__about { grid-area: about; }
    .counter__price { grid-area: price; justify-self: end; }
    .counter__stepper { grid-area: step; justify-self: end; }
    .counter__item .tag { grid-area: step; justify-self: end; }
}

/* A section whose partial rendered nothing is absent: no band, no padding. */
.section:not(:has(*)) { display: none; }
/* Six pieces of work sit in three columns: the first large, five around it, no orphan. */
.work:has(> :nth-child(6)) { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .work:has(> :nth-child(6)) { grid-template-columns: repeat(3, 1fr); } }