/* The Haddenham Beer Festival: the new design (Site:Theme "festival").
   Near-black, warm white and beer gold, with a little of the logo's hop green; Barlow Condensed (heavy, upper case)
   for headings and Barlow for reading. No build step: plain CSS. The parts, top to bottom: the basics, buttons, the
   header, When & Where, the hero, the home page's bands, inside pages, the festival's parts (What's On, the drinks,
   the sponsors, the merch, the map, the contact form, the FAQs), the sponsors' strip, the footer. */

:root {
    --ink: #141414;
    --ink-2: #222120;
    --ink-soft: #3a3835;
    --paper: #f7f2e8;
    --paper-2: #efe7d6;
    --white: #fff;
    --gold: #f2b230;
    --gold-deep: #d6960f;
    --gold-pale: #fbe6b4;
    --hop: #8fb339;
    --hop-deep: #56701c;
    --brick: #b3401c;
    --muted: #6b665c;
    --line: rgba(20, 20, 20, .12);
    --line-light: rgba(255, 255, 255, .16);

    --head: "Barlow Condensed", "Arial Narrow", sans-serif;
    --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

    --wrap: 1240px;
    --gutter: clamp(16px, 4vw, 40px);
    --radius: 14px;
    --header-h: 76px;
}

/* ---------------------------------------------------------------- the basics */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.0625rem/1.65 var(--body);
    overflow-x: hidden;
}

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

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--gold); }
a:hover { color: var(--gold-deep); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

h1, h2, h3, h4 {
    font-family: var(--head);
    font-weight: 800;
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: .005em;
    margin: 0 0 .5em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.45rem; font-weight: 700; }

p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

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

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

main:focus { outline: none; }

.eyebrow {
    font: 700 .95rem/1.2 var(--head);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 .6em;
}
.eyebrow a { text-decoration: none; }

/* fading up as they come into view (site.js adds .is-in; without it everything shows) */
.ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--delay, 0s); }
.ready [data-reveal].is-in { opacity: 1; transform: none; }

/* a map pin, drawn in CSS */
.pin {
    display: inline-block; width: .8em; height: .8em; margin-right: .45em; flex: none;
    border-radius: 50% 50% 50% 0; background: var(--gold); transform: rotate(-45deg) translateY(-1px);
}

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

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 48px; padding: .55em 1.4em;
    border: 2px solid var(--gold); border-radius: 999px;
    background: var(--gold); color: var(--ink);
    font: 800 1.05rem/1 var(--head); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.button:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--ink); transform: translateY(-1px); }
.button--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.button--dark:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--white); }
.button--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.button--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.button--outline-light { background: transparent; border-color: var(--white); color: var(--white); }
.button--outline-light:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.button:disabled { opacity: .6; cursor: default; transform: none; }

.more {
    font: 800 1rem/1 var(--head); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
    border-bottom: 3px solid var(--gold); padding-bottom: 3px; white-space: nowrap;
}

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

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.site-header__bar { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

.logo { display: block; flex: none; line-height: 0; }
.logo p { margin: 0; }
.logo img { display: block; width: auto; height: 60px; }

.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-nav a {
    display: block; padding: 10px 12px;
    font: 700 1.12rem/1 var(--head); letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
    transition: background .2s;
}
.site-nav a:hover { background: var(--paper); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--ink); color: var(--white); }
.site-nav__social { display: none; }

.site-header__extra { display: flex; align-items: center; gap: 12px; }

.countdown {
    margin: 0; padding: 8px 14px; border-radius: 999px;
    background: var(--gold); color: var(--ink);
    font: 800 .95rem/1 var(--head); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}

.site-header__social {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--ink); color: var(--white);
}
.site-header__social:hover { background: var(--gold); color: var(--ink); }

.site-header__toggle {
    display: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: var(--ink); color: var(--white); cursor: pointer; position: relative;
}
.site-header__toggle-bars, .site-header__toggle-bars::before, .site-header__toggle-bars::after {
    position: absolute; left: 14px; width: 20px; height: 2px; background: currentColor; content: ""; transition: transform .25s, opacity .25s;
}
.site-header__toggle-bars { top: 23px; }
.site-header__toggle-bars::before { left: 0; top: -6px; }
.site-header__toggle-bars::after { left: 0; top: 6px; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars { background: transparent; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before { transform: translateY(6px) rotate(45deg); background: var(--white); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); background: var(--white); }

@media (max-width: 1180px) {
    .site-header__social { display: none; }
}

@media (max-width: 1060px) {
    :root { --header-h: 68px; }
    .logo img { height: 44px; }
    .site-header__toggle { display: block; }
    .site-header__extra { margin-left: auto; }

    /* the phone menu: full screen, dark, big */
    .site-nav {
        position: fixed; inset: var(--header-h) 0 0 0; margin: 0;
        background: var(--ink); color: var(--white);
        padding: 24px var(--gutter) 40px; overflow-y: auto;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .25s, transform .25s, visibility .25s;
    }
    .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
    .site-nav ul { flex-direction: column; gap: 0; }
    .site-nav li { border-bottom: 1px solid var(--line-light); }
    .site-nav a { padding: 16px 0; font-size: 2rem; border-radius: 0; }
    .site-nav a:hover, .site-nav a[aria-current="page"] { background: none; color: var(--gold); }
    .site-nav__social { display: block; margin: 28px 0 0; }
    .site-nav__social a { font-size: 1.1rem; color: var(--gold); }
    body.menu-open { overflow: hidden; }
}

@media (max-width: 520px) {
    .logo img { height: 38px; }
    .countdown { font-size: .8rem; padding: 7px 10px; }
}

@media (max-width: 380px) {
    .countdown { display: none; }
}

/* ---------------------------------------------------------------- When & Where (every page) */

.whenwhere { background: var(--ink); color: var(--white); }

.whenwhere__inner {
    display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap;
    min-height: 52px; padding-top: 8px; padding-bottom: 8px;
    font-size: .98rem;
}

.whenwhere__label {
    margin: 0; color: var(--gold);
    font: 800 1rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase;
}

.whenwhere__short { display: none; margin: 0; font-weight: 600; }

.whenwhere__days { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.whenwhere__days strong { font-weight: 700; margin-right: 6px; }

.whenwhere__place { margin-left: auto; display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; }
.whenwhere__place:hover { color: var(--gold); }

@media (max-width: 900px) {
    .whenwhere__days { display: none; }
    .whenwhere__short { display: block; }
    .whenwhere__inner { gap: 4px 14px; font-size: .92rem; }
    .whenwhere__place { margin-left: 0; }
}

/* ---------------------------------------------------------------- the slide show, and the home page's hero */

.slideshow { position: relative; background: var(--ink); overflow: hidden; }
.slideshow__slides { position: relative; aspect-ratio: 16 / 7; }
.slideshow__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.slideshow__slide.is-active { opacity: 1; }
.slideshow__slide picture, .slideshow__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.slideshow__link { position: absolute; inset: 0; }

/* the "dots": a row of thin lines; the current one fills with gold over its 6 seconds (paused with the slide show) */
.slideshow__dots { position: absolute; z-index: 3; right: var(--gutter); bottom: 22px; display: flex; gap: 6px; }
.slideshow__dots button {
    position: relative; width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
}
.slideshow__dots button::before, .slideshow__dots button::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
}
.slideshow__dots button::before { background: rgba(255, 255, 255, .45); transition: background .2s; }
.slideshow__dots button:hover::before { background: rgba(255, 255, 255, .85); }
.slideshow__dots button::after { background: var(--gold); transform: scaleX(0); transform-origin: left; }
.slideshow__dots button[aria-current="true"]::after { transform: none; animation: fill 6s linear both; }
.slideshow.is-paused .slideshow__dots button::after { animation-play-state: paused; }

@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.slideshow--hero .slideshow__slides { aspect-ratio: auto; height: min(84vh, 760px); min-height: 560px; }
/* (the photo going keeps its zoom while it fades: site.js gives it .is-leaving) */
.slideshow--hero .slideshow__slide.is-active .slideshow__image,
.slideshow--hero .slideshow__slide.is-leaving .slideshow__image { animation: drift 14s ease-out both; }
.slideshow--hero .slideshow__slide.is-leaving .slideshow__image { animation-play-state: paused; }
/* the shade over the photos: just enough on the left for the words */
.slideshow--hero .slideshow__slides::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, .3) 45%, transparent 75%),
        linear-gradient(0deg, rgba(10, 10, 10, .4) 0%, transparent 30%);
}
.hero__text { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }

@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero__overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; color: var(--white); pointer-events: none; }
.hero__overlay a { pointer-events: auto; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); align-items: center; gap: 40px; }

.hero__kicker {
    margin: 0 0 14px; color: var(--gold);
    font: 800 clamp(1rem, 1.6vw, 1.25rem)/1.1 var(--head); letter-spacing: .16em; text-transform: uppercase;
}

.hero__dates {
    margin: 0 0 18px;
    font: 800 clamp(4.2rem, 11vw, 9.5rem)/.86 var(--head); text-transform: uppercase; letter-spacing: -.01em;
}
.hero__dates span { display: block; }
.hero__dates span + span { color: var(--gold); }

.hero__where { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; max-width: 30ch; margin-bottom: 26px; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.hero__hopman { position: relative; justify-self: end; width: min(100%, 440px); }

/* the hopman on a gold disc (his drawing is black lines on clear) */
.disc {
    position: relative; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd46b 0%, var(--gold) 55%, var(--gold-deep) 100%);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
    display: grid; place-items: center; overflow: visible;
}
/* (kept inside the disc: his black lines don't show on the dark photos) */
.disc img { width: auto; height: auto; max-width: 70%; max-height: 74%; transform: rotate(-4deg); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12)); }

.sticker {
    position: absolute; left: -6%; bottom: 8%; margin: 0; padding: 12px 18px;
    background: var(--white); color: var(--ink); border-radius: 12px; transform: rotate(-6deg);
    font: 800 clamp(1rem, 1.7vw, 1.35rem)/1 var(--head); letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

@media (max-width: 860px) {
    .slideshow--hero .slideshow__slides { height: auto; min-height: 0; aspect-ratio: auto; }
    .slideshow--hero .slideshow__slides { position: absolute; inset: 0; }
    .slideshow--hero { display: flex; }
    .hero__overlay { position: relative; padding: 36px 0 64px; }
    .slideshow--hero .slideshow__slides::after { background: linear-gradient(0deg, rgba(10, 10, 10, .88) 10%, rgba(10, 10, 10, .45) 100%); }
    .hero__inner { grid-template-columns: 1fr; gap: 24px; }
    .hero__hopman { order: -1; justify-self: start; width: 190px; }
    .sticker { left: auto; right: -70%; bottom: 30%; font-size: 1rem; }
    .slideshow__dots { bottom: 16px; }
    .slideshow__dots button { width: 32px; }
}

/* ---------------------------------------------------------------- the home page's bands */

.band { padding: clamp(56px, 8vw, 104px) 0; }

.band__head { display: flex; align-items: end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 36px; }
.band__head h2 { margin: 0; }
.band__head .eyebrow { flex-basis: 100%; margin: 0 0 -8px; }

/* the weekend: a card for each day */
.band--weekend { background: var(--paper); }

.weekend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

.weekend__day {
    position: relative; padding: 30px 28px 26px; border-radius: var(--radius);
    background: var(--ink); color: var(--white); overflow: hidden;
}
.weekend__day:nth-child(2) { background: var(--gold); color: var(--ink); }
.weekend__day:nth-child(3) { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

.weekend__name { margin: 0; font: 800 clamp(2.6rem, 4vw, 3.4rem)/.9 var(--head); text-transform: uppercase; }
.weekend__date { margin: 6px 0 0; font: 700 1.35rem/1.1 var(--head); text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.weekend__times {
    display: inline-block; margin: 18px 0 0; padding: 6px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); font-weight: 700;
}
.weekend__day:nth-child(2) .weekend__times, .weekend__day:nth-child(3) .weekend__times { background: rgba(20, 20, 20, .1); }

/* (the start of each day's line-up: the whole of it is on What's On) */
.weekend__lineup {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(127, 127, 127, .35); font-size: .98rem;
    max-height: 12.5em; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
            mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.weekend__lineup p { margin: 0 0 .4em; }
.weekend__lineup p:last-child { margin: 0; }
.weekend__lineup a { color: inherit; }

.weekend__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 28px; }
.weekend__where { display: flex; align-items: center; margin: 0; font-size: 1.15rem; font-weight: 600; }
.weekend__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* the welcome, with the side links */
.band--welcome { background: var(--white); }

.welcome { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.welcome__text h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.welcome__text h1::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 18px; background: var(--gold); border-radius: 3px; }

.side-links { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.side-links li { border-bottom: 1px solid var(--line); }
.side-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px;
    font: 700 1.4rem/1.1 var(--head); text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
    transition: padding .2s, color .2s;
}
.side-links a::after { content: "→"; font-family: var(--body); color: var(--gold-deep); transition: transform .2s; }
.side-links a:hover { color: var(--ink); padding-left: 12px; }
.side-links a:hover::after { transform: translateX(4px); }

@media (max-width: 860px) {
    .welcome { grid-template-columns: 1fr; }
}

/* other words on the home page (e.g. the strip of photos) */
.band--html { padding: 0; background: var(--ink); }
.band--html .wrap { max-width: none; padding: 0; }

.photo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.photo-strip img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .3s, transform .6s; }
.photo-strip img:hover { opacity: .85; }
.photo-strip p { display: contents; margin: 0; }

@media (max-width: 860px) {
    .photo-strip { grid-template-columns: repeat(3, 1fr); }
}

/* the news */
.band--news { background: var(--paper); }

.news-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

.news-card {
    display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 0 var(--line); transition: transform .25s, box-shadow .25s;
}
.news-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 20, 20, .12); }
.news-card__image { display: block; aspect-ratio: 3 / 2; background: var(--paper-2); overflow: hidden; }
.news-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-card__image .news-card__placeholder { object-fit: contain; padding: 18%; opacity: .5; }
.news-card__body { padding: 20px 22px 24px; }
.news-card h3 { font-size: 1.5rem; margin: 0 0 .4em; }
.news-card h3 a { text-decoration: none; }
.news-card h3 a::after { content: ""; position: absolute; inset: 0; }
.news-card { position: relative; }
.news-card p:last-child { margin: 0; color: var(--muted); }

.date { margin: 0 0 8px; color: var(--muted); font: 700 .9rem/1 var(--head); letter-spacing: .12em; text-transform: uppercase; }

.news-cards--list { grid-template-columns: 1fr; }
.news-cards--list .news-card { flex-direction: row; }
.news-cards--list .news-card__image { flex: 0 0 min(38%, 320px); aspect-ratio: auto; }

@media (max-width: 640px) {
    .news-cards--list .news-card { flex-direction: column; }
    .news-cards--list .news-card__image { aspect-ratio: 3 / 2; flex: none; }
}

.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.pagination a, .pagination span {
    display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px;
    font: 700 1.05rem/1 var(--head); text-decoration: none; background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
}
.pagination span[aria-current] { background: var(--ink); color: var(--white); }

/* ---------------------------------------------------------------- inside pages */

.page { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 8vw, 104px); }

.prose > * { max-width: 760px; }
.prose > h1, .prose > .drinks, .prose > .programme, .prose > .merch-grid, .prose > .map, .prose > .faqs,
.prose > .news-cards, .prose > .pagination, .prose > section, .prose > .sponsor-group, .prose > div:not(.contact-form__thanks) { max-width: none; }
.prose > h1 { max-width: 16ch; }
.prose > h1::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 18px; background: var(--gold); border-radius: 3px; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.3em; }
.prose img { border-radius: 10px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .3em; }
.prose li::marker { color: var(--gold-deep); }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--gold); font-size: 1.2rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; background: var(--white); border-radius: 10px; overflow: hidden; }
.prose th, .prose td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--ink); color: var(--white); font: 700 1.05rem/1.2 var(--head); letter-spacing: .06em; text-transform: uppercase; }
.prose hr { border: 0; height: 2px; background: var(--line); margin: 2.5em 0; }

.article-photo { margin: 0 0 1.5em; }
.article-photo img { display: block; width: 100%; border-radius: var(--radius); }
.back { margin-top: 2.5em; }

.not-found { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 96px; }
.not-found p:last-child { display: flex; flex-wrap: wrap; gap: 12px; }
.disc--solo { max-width: 340px; }

@media (max-width: 720px) {
    .not-found { grid-template-columns: 1fr; }
    .disc--solo { max-width: 220px; }
}

/* ---------------------------------------------------------------- What's On */

.programme { display: grid; gap: 18px; margin: 32px 0; }

.programme__day { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); background: var(--white); border-radius: var(--radius); overflow: hidden; }
.programme__head { padding: 26px 28px; background: var(--ink); color: var(--white); }
.programme__day:nth-child(2) .programme__head { background: var(--gold); color: var(--ink); }
.programme__head h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); }
.programme__head p { margin: 8px 0 0; display: flex; flex-direction: column; font-weight: 600; }
.programme__body { padding: 26px 28px; }
.programme__body > :last-child { margin-bottom: 0; }
.programme__where { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.programme__where img { display: none; }

@media (max-width: 720px) {
    .programme__day { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- the drinks */

.drinks { margin-top: 28px; }
.drinks--empty { padding: 28px; background: var(--white); border-radius: var(--radius); font-size: 1.15rem; }
.drinks--empty p { margin: 0; }

.drinks__bar {
    position: sticky; top: var(--header-h); z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    padding: 14px 0; margin-bottom: 18px; background: var(--paper); border-bottom: 1px solid var(--line);
}

.drinks__top { flex: 1 1 100%; display: flex; gap: 10px; }
.drinks__search { flex: 1 1 auto; min-width: 0; }

/* on phones the types and filters fold away behind the Filters button (only once site.js is running) */
.drinks__options { display: contents; }
.drinks__toggle {
    display: none; flex: none; align-items: center; gap: 2px; padding: 0 16px;
    border: 2px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer;
    font: 800 1.05rem/1 var(--head); letter-spacing: .08em; text-transform: uppercase;
}
.drinks__toggle::after {
    content: ""; width: 7px; height: 7px; margin-left: 10px; border: solid currentColor; border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.drinks__toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.drinks__on { color: var(--gold); }

@media (max-width: 720px) {
    .ready .drinks__toggle { display: inline-flex; }
    .ready .drinks__options { display: none; }
    .ready .drinks__options.is-open { display: flex; flex-direction: column; gap: 14px; flex: 1 1 100%; }
}
.drinks__search input {
    display: block; width: 100%; max-width: 560px; padding: 12px 16px;
    border: 2px solid var(--ink); background: var(--white); color: var(--ink);
    font: 500 1.05rem/1.3 var(--body);
}
.drinks__search input:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-pale); }

.drinks__types { display: flex; flex-wrap: wrap; gap: 8px; }
.drinks__types a {
    padding: 8px 16px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
    font: 700 1.05rem/1 var(--head); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.drinks__types a.is-active { background: var(--ink); color: var(--white); box-shadow: none; }

.drinks__filters { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; }
.drinks__filters label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.drinks__filters input { width: 20px; height: 20px; accent-color: var(--ink); }

.drinks__group { margin-bottom: 36px; }
.drinks__group h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.drinks__count { font: 600 1rem/1 var(--body); text-transform: none; color: var(--muted); }

/* (.drinks .drinks__list: beats the page text's list indent, .prose ul) */
.drinks .drinks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

.drink { position: relative; margin: 0; padding: 18px 20px; background: var(--white); border-radius: 12px; border-left: 6px solid var(--gold); overflow: hidden; }
.drink__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.drink__producer { margin: 0 0 3px; font: 700 1.05rem/1.15 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--hop-deep); }
.drink__name { margin: 0; font-size: 1.45rem; }

/* the barrel's number: a dark block down the card's left edge */
.drink--numbered { padding-left: 82px; border-left: 0; }
.drink__number {
    position: absolute; left: 0; top: 0; bottom: 0; width: 62px;
    display: grid; place-items: center; background: var(--ink); color: var(--gold);
    font: 800 2rem/1 var(--head);
}

/* with a colour, the block is a pint of it: a head of foam on top (its bubbly edge drawn with circles) and a glint
   down the glass; the number in dark ink or white, whichever reads (--beer-ink, from DrinksService) */
.drink--coloured .drink__number {
    background: var(--beer); color: var(--beer-ink); padding-top: 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .15);
}
.drink--coloured .drink__number::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px;
    background:
        radial-gradient(circle at 50% 0, #fbf6e9 6px, transparent 6.5px) -3px 12px / 13px 8px repeat-x,
        linear-gradient(#fbf6e9, #fbf6e9) 0 0 / 100% 12px no-repeat;
}
.drink--coloured .drink__number::after {
    content: ""; position: absolute; left: 9px; top: 26px; bottom: 12px; width: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, .28);
}

/* the colour's name, with a little pint of it */
.drink__swatch {
    display: inline-block; width: 10px; height: 13px; margin-right: 5px; vertical-align: -1px;
    background: var(--beer); border-radius: 0 0 2px 2px;
    box-shadow: inset 0 3px 0 #fbf6e9, 0 0 0 1px rgba(20, 20, 20, .25);
}

.drink__sponsor { margin: 10px 0 0; font-size: .92rem; color: var(--muted); }
.drink__sponsor a, .drink__sponsor strong { color: var(--ink); font-weight: 700; }
.drink__abv { flex: none; font: 800 1.2rem/1 var(--head); color: var(--gold-deep); }
.drink__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: .92rem; color: var(--muted); font-weight: 600; }
.drink__description { margin: 10px 0 0; font-size: .98rem; }
.drink__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.drink__badges:empty { display: none; }

.badge { padding: 4px 10px; border-radius: 999px; font: 700 .85rem/1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.badge--vegan { background: #e4efcc; color: var(--hop-deep); }
.badge--gf { background: var(--gold-pale); color: #7a5300; }
.badge--restocked { background: var(--ink); color: var(--gold); }
.badge--low { background: #ffe0c2; color: #8a3a0c; box-shadow: inset 0 0 0 1px #e8a36a; }

/* sold out: the card fades and gets a rubber stamp across it, at an angle, its ink worn (img/stamp-grain.svg) */
.drink--soldout { border-left-color: #c9c2b4; }
.drink--soldout > :not(.drink__stamp) { opacity: .3; }
/* (sold out: the glass is empty) */
.drink--soldout .drink__number { opacity: 1; background: #8c877d; color: var(--white); padding-top: 0; text-shadow: none; }
.drink--soldout .drink__number::before { display: none; }
.drink__stamp {
    position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none;
    transform: translate(-50%, -50%) rotate(-11deg);
    padding: 6px 18px 4px; border: 4px solid currentColor; border-radius: 6px;
    box-shadow: 0 0 0 3px var(--white), 0 0 0 5px currentColor;
    color: #a8321b; font: 800 2.7rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    mix-blend-mode: multiply; opacity: .88;
    -webkit-mask-image: url(/img/stamp-grain.svg); mask-image: url(/img/stamp-grain.svg);
    -webkit-mask-size: 240px; mask-size: 240px;
}

.drinks__none { padding: 20px; background: var(--white); border-radius: 12px; }
.drinks__note { margin-top: 24px; color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------------------------- the sponsors page */

.sponsor-group { margin-top: 48px; }
.sponsor-group h2 { padding-bottom: 12px; border-bottom: 3px solid var(--ink); }

.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.sponsor-group--large .sponsor-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

.sponsor { background: var(--white); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.sponsor__logo { display: block; aspect-ratio: 3 / 2; overflow: hidden; padding: 18px; border-bottom: 1px solid var(--line); }
.sponsor__initial { display: grid; place-items: center; height: 100%; }
.sponsor__logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.sponsor__initial { font: 800 3rem/1 var(--head); color: var(--gold-deep); }
.sponsor__text { padding: 14px 16px 18px; font-size: .96rem; }
.sponsor__name { font-size: 1.2rem; margin: 0 0 .3em; }
.sponsor-group--large .sponsor__name { font-size: 1.5rem; }
.sponsor__link { margin: .6em 0 0; font-weight: 700; }

/* ---------------------------------------------------------------- the merch */

.merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin: 32px 0; }

.merch-card { background: var(--white); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.merch-card__image { aspect-ratio: 1; overflow: hidden; padding: 8%; background: var(--gold); }
.merch-card:nth-child(even) .merch-card__image { background: var(--paper-2); }
.merch-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.merch-card__image .merch-card__placeholder { padding: 25%; opacity: .6; }
.merch-card__body { padding: 20px 22px 24px; }
.merch-card__name { font-size: 1.8rem; margin: 0 0 .3em; }
.merch-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-weight: 600; }
.merch-card__price { padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--gold); font: 800 1.15rem/1 var(--head); }
.merch-card__body > :last-child { margin-bottom: 0; }
.merch-empty { padding: 24px; background: var(--white); border-radius: var(--radius); }

/* ---------------------------------------------------------------- the map */

.map { position: relative; margin: 28px 0 36px; }
.map__canvas { height: min(60vh, 480px); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); display: grid; place-items: center; }
.map__canvas.is-loaded { display: block; }
.map__where { margin: 14px 0 10px; font-weight: 600; font-size: 1.1rem; }
.map__pin { background: none; border: 0; }
.map__pin img { display: block; margin: 0 auto; width: 36px; height: 44px; padding: 8px; box-sizing: content-box; background: var(--white); border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); border-radius: 50% 50% 50% 0; }

/* ---------------------------------------------------------------- the contact form */

.contact-form { max-width: 720px; margin-top: 28px; padding: clamp(20px, 4vw, 36px); background: var(--white); border-radius: var(--radius); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.contact-form label { display: block; margin-bottom: 18px; font: 700 1.05rem/1.2 var(--head); letter-spacing: .06em; text-transform: uppercase; }
.contact-form input, .contact-form textarea {
    display: block; width: 100%; margin-top: 8px; padding: 12px 14px;
    border: 2px solid var(--line); border-radius: 10px; background: var(--paper);
    font: 400 1.05rem/1.4 var(--body); color: var(--ink); text-transform: none; letter-spacing: 0;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); background: var(--white); }
.contact-form__trap { position: absolute; left: -9999px; }
.contact-form__status { margin: 0; font-weight: 600; }
.contact-form__thanks { margin-top: 28px; padding: 28px; background: var(--gold); border-radius: var(--radius); }

@media (max-width: 600px) {
    .contact-form__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- the FAQs */

.section__title { display: none; }

.faqs { margin-top: 28px; max-width: 900px; }
.faq { background: var(--white); border-radius: 12px; margin-bottom: 10px; }
.faq__question {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font: 700 1.35rem/1.15 var(--head); text-transform: uppercase; letter-spacing: .02em;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
    content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--gold); font: 700 1.5rem/1 var(--body); transition: transform .25s;
}
.faq[open] .faq__question::after { transform: rotate(45deg); background: var(--ink); color: var(--white); }
.faq__answer { padding: 0 22px 20px; }
.faq__answer > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- the sponsors' strip (every page) */

.sponsor-strip { padding: clamp(48px, 6vw, 80px) 0; background: var(--white); border-top: 1px solid var(--line); }

.sponsor-strip__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.sponsor-strip__head h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.sponsor-strip__controls { display: flex; align-items: center; gap: 10px; }
.sponsor-strip__controls .more { margin-left: 10px; }

.arrow {
    width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer;
    position: relative; transition: background .2s;
}
.arrow::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
    border: solid var(--ink); border-width: 0 3px 3px 0; transform: translate(-65%, -50%) rotate(-45deg);
}
.arrow--prev::before { transform: translate(-35%, -50%) rotate(135deg); }
.arrow:hover { background: var(--gold); border-color: var(--gold); }

.sponsor-strip__track {
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.sponsor-strip__track::-webkit-scrollbar { display: none; }
.sponsor-strip__track:focus-visible { outline-offset: -3px; }

.sponsor-strip__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; width: max-content; }
/* each logo comes as a square on white (square-400), so the tile is just the picture with a fine edge; pointed at,
   the logo grows inside its tile (the tile itself stays put: the strip's track would clip it) */
.sponsor-strip__item a, .sponsor-strip__item span {
    display: block; width: 180px; height: 180px; overflow: hidden;
    background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
}
.sponsor-strip__item img { display: block; width: 100%; height: 100%; padding: 24px; transition: transform .3s ease; }
.sponsor-strip__item a:hover img, .sponsor-strip__item a:focus-visible img { transform: scale(1.12); }

@media (max-width: 600px) {
    .sponsor-strip__item a, .sponsor-strip__item span { width: 132px; height: 132px; }
    .sponsor-strip__controls .arrow { display: none; }
}

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

.site-footer { background: var(--ink); color: var(--white); padding: clamp(56px, 8vw, 96px) 0 32px; }
.site-footer a:hover { color: var(--gold); }

.site-footer__top {
    display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: 24px 48px;
    padding-bottom: 48px; border-bottom: 1px solid var(--line-light);
}
.site-footer__hopman img { display: block; width: 100%; transform: rotate(-4deg); }
.site-footer__title { margin: 0 0 12px; font: 800 clamp(3rem, 8vw, 6.5rem)/.88 var(--head); text-transform: uppercase; color: var(--gold); }
.site-footer__when { font-size: 1.15rem; font-weight: 500; margin-bottom: 24px; }
.site-footer__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.site-footer__links { padding-top: 40px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 40px; }
.footer-cols h2 { font-size: 1.15rem; letter-spacing: .12em; color: var(--gold); margin: 0 0 14px; }
.footer-cols h2 a { text-decoration: none; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 8px; }
.footer-cols li a { text-decoration: none; color: rgba(255, 255, 255, .82); }
.credit { margin: 40px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .55); }
.credit a { color: inherit; }

@media (max-width: 640px) {
    .site-footer__top { grid-template-columns: 1fr; }
    .site-footer__hopman { width: 140px; }
}

/* ---------------------------------------------------------------- less motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}