/* ==========================================================================
   Wise Guys Trivia
   Palette and typography transcribed from the legacy GoDaddy site snapshot.
   ========================================================================== */

:root {
    --ink:        rgb(22, 22, 22);
    --ink-soft:   rgb(64, 64, 64);
    --muted:      rgb(94, 94, 94);
    --accent:     rgb(143, 110, 110);
    --brand-red:  rgb(176, 28, 16);   /* the red of 'Trivia' in logo.png — the game-name bands (👤 Alex, 2026-09-18) */
    --rule:       rgb(226, 226, 226);
    --wash:       rgb(247, 247, 247);
    --white:      #ffffff;

    --serif: 'Lusitana', Georgia, serif;
    --sans:  'Lato', Arial, Helvetica, sans-serif;

    --wrap: 1100px;
}

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

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-soft);
    background: var(--white);
}

h1, h2, h3, h4, h5 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 .6em;
}

h1 { font-size: 2.6rem; letter-spacing: .01em; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

/* --- Header ------------------------------------------------------------- */

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

/* 👤 Alex, 2026-09-24: with Trophy back the menu is five items plus the account
   button. The header keeps the page's width so the logo lines up with the content
   below it; the gaps shrink instead (here and on `.site-nav ul`), so a signed-in
   visitor's *My Account* stays on the menu's row. */
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 92px;
}

/* max-width: 100% on both — the logo is 360px wide at 52px tall, so below ~408px
   it pushed every public page sideways (WGT_16246). It scales down, ratio kept. */
.brand img { max-height: 52px; max-width: 100%; width: auto; height: auto; }
.brand { flex-shrink: 0; max-width: 100%; }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: .5rem .7rem;
    font: inherit;
    font-size: 1.1rem;
    color: var(--ink);
    cursor: pointer;
}

.site-nav {
    /* Flex items default to min-width:auto, which floors this at the ul's
       unwrapped content width and defeats the wrap below. */
    min-width: 0;
}

.site-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* 👤 Alex, 2026-09-24: every item on one centre line with the account button,
       which is taller than a plain link. */
    align-items: center;
    gap: .6rem 1.1rem;
    margin: 0;
    padding: 0;
}

.site-nav a {
    color: var(--ink);
    font-size: .82rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .4rem 0;
    display: block;
    /* The top border matches the bottom one (👤 Alex, 2026-09-24): with only the
       2px underline slot, a link's text sat 1px above the account button's. */
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover { text-decoration: none; border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* The account button (👤 Alex, 2026-09-17). It is the last item of the nav LIST
   so the mobile menu carries it too — which means `.site-nav a` above wins on
   specificity over `.btn` and would flatten it back into a plain nav link.
   These two selectors are (0,2,1) and restate what `.btn` owns. */
.site-nav .nav-account { margin-left: .6rem; }
.site-nav .nav-account a {
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    border-radius: 2px;
    padding: .45rem 1.1rem;
}
.site-nav .nav-account a:hover { background: var(--white); color: var(--ink); border-color: var(--ink); }

/* Left-aligned uppercase section heading with a full-width rule beneath. */
.section-head {
    font-family: var(--sans);
    font-size: 1.02rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
}

.page-head {
    background: var(--wash);
    border-bottom: 1px solid var(--rule);
    text-align: center;
    padding: 3.5rem 1.5rem;
}
.page-head h1 { margin: 0; }

/* The front page's page-head (👤 Alex, 2026-09-18): trophy left, title, tagline, one line
   and a button right. Below 720px it stacks, trophy first, all centred. */
.home-head { padding: 2.5rem 1.5rem; }
.home-head-inner {
    max-width: 52rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 4rem;                   /* 👤 Alex, 2026-09-18: the text sits apart from the trophy, */
    align-items: center;
    text-align: center;          /* centred in its column rather than lined up against it */
}
.home-head-trophy { display: block; text-align: center; text-decoration: none; }
.home-head-trophy img { display: block; width: 100%; border-radius: 3px; margin-bottom: .4rem; }
.home-head-tagline {
    margin: .35rem 0 .75rem;
    font-family: var(--serif);
    font-size: 1.45rem;
    color: var(--brand-red);
}
.home-head-where { margin: 0 auto 1.25rem; max-width: 34rem; }
.home-head-action { margin: 0; }
@media (max-width: 719px) {
    .home-head-inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; text-align: center; }
    .home-head-trophy { max-width: 9rem; margin: 0 auto; }
}

/* --- Sections ----------------------------------------------------------- */

.section { padding: 4rem 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-title { text-align: center; margin-bottom: 2.5rem; }

.lede { font-size: 1.1rem; max-width: 44rem; margin: 0 auto 1.1em; text-align: center; }

.notice {
    background: var(--wash);
    border-left: 3px solid var(--accent);
    padding: 1.1rem 1.4rem;
    margin: 0 0 2rem;
    border-radius: 0 3px 3px 0;
}
.notice p:last-child { margin-bottom: 0; }

/* --- Cards -------------------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.card { text-align: center; }
.card img { border-radius: 3px; margin-bottom: 1.2rem; }
.card h4 { margin-bottom: .4em; }
.card p { color: var(--muted); font-size: .95rem; }

.btn {
    display: inline-block;
    background: var(--ink);
    color: var(--white);
    padding: .75rem 1.9rem;
    font-size: .82rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--sans);
}
.btn:hover { background: var(--white); color: var(--ink); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }

/* --- Front page (👤 Alex, 2026-09-18, WGT_14604) ------------------------ */

/* The two doors at the top, side by side — want to host? · venues: hire us.
   Same shading as /games' day tables: an --ink-soft band with white text over a
   white body, ruled in --rule. Below 720px they stack. */
.home-doors-section { padding-top: 3rem; }
.home-doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
}
.home-door {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    background: var(--white);
}
.home-door-head {
    margin: 0;
    padding: .9rem 1.4rem;
    background: var(--ink-soft);
    color: var(--white);
    font-size: 1.5rem;
    text-align: center;
}
.home-door-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.6rem 1.6rem;
    text-align: center;
}
.home-door-body p { margin-bottom: .8em; }
.home-door-action { margin: auto 0 0; padding-top: .6rem; }  /* buttons line up across the two doors */
@media (max-width: 719px) {
    .home-doors { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* The games: photos on one side, the description on the other, alternating.
   The game's name sits in an --accent band, the shade /games' Trivia / Bingo
   kind rows use. The wordmark tile overlaps the photo's lower corner and hangs
   below it; it stays inside the figure's width so it can never push the page. */
.home-game {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
    gap: 3.5rem;
    align-items: center;
}
.home-game + .home-game { margin-top: 5rem; }
.home-game--flip .home-game-art { order: 2; }

.home-game-art { position: relative; margin: 0 0 2.5rem; }
.home-game-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
}
.home-game-art--tall .home-game-photo { aspect-ratio: 4 / 5; object-position: 50% 40%; }
.home-game-art--wide .home-game-photo { aspect-ratio: 16 / 9; }   /* the whole bingo photo, no one cut off (WGT_22122) */
.home-game-mark {
    position: absolute;
    right: 1.25rem;
    bottom: -2.5rem;
    width: 34%;
    max-width: 10rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: .35rem;
    box-shadow: 0 6px 18px rgba(22, 22, 22, .14);
}
.home-game--flip .home-game-mark { right: auto; left: 1.25rem; }

.home-game-name {
    display: table;             /* shrink-to-fit like the old inline-block, but centrable */
    margin: 0 auto 1.4rem;      /* 👤 Alex, 2026-09-18: name, button and venue line centred; */
                                /* the description paragraphs stay left */
    padding: .5rem 1.4rem;
    background: var(--brand-red);   /* 👤 Alex, 2026-09-18: not --accent, which is a quieter sub-heading shade */
    color: var(--white);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 2px;
}
.home-game-text > p:not(.home-game-action):not(.home-game-venue) {
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--ink);
}
.home-game-action { margin: 1.8rem 0 .9rem; text-align: center; }
.home-game-venue { font-size: .92rem; color: var(--muted); margin: 0; text-align: center; }

/* Graham's promo video under each game (WGT_24165): full column width up to
   960px, centred, 16:9. preload="none" in the markup, so only the poster loads. */
.home-game-video { position: relative; max-width: 960px; margin: 3rem auto 0; }

/* WGT_24205 — home-video.js's click-anywhere button: covers the picture while
   the video is paused, stops 3rem above the bottom so the controls bar still
   works, and carries a round play mark in the middle. Gone while it plays. */
.home-game-video-play {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 3rem;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.home-game-video-play::before {
    content: '';
    position: absolute;
    top: calc(50% + 1.5rem); left: 50%;   /* the middle of the whole picture, bar included */
    width: 5rem; height: 5rem;
    margin: -2.5rem 0 0 -2.5rem;
    border-radius: 50%;
    background: rgba(22, 22, 22, .72);
    box-shadow: 0 4px 16px rgba(22, 22, 22, .3);
}
.home-game-video-play::after {
    content: '';
    position: absolute;
    top: calc(50% + 1.5rem); left: 50%;
    margin: -1rem 0 0 -.6rem;
    border-style: solid;
    border-width: 1rem 0 1rem 1.7rem;
    border-color: transparent transparent transparent var(--white);
}
.home-game-video-play:hover::before,
.home-game-video-play:focus-visible::before { background: var(--brand-red); }
.home-game-video.is-playing .home-game-video-play { display: none; }
.home-game-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    border-radius: 3px;
}

/* 👤 Alex, 2026-10-29 (WGT_24205): each game and its video sit in one lightly
   shaded, rounded block — no border — so the video reads as that game's. */
.home-game-block {
    background: rgb(240, 240, 240);   /* a shade darker than --wash (👤 Alex, 2026-10-29) */
    border-radius: 14px;
    padding: 3rem;
}
.home-game-block + .home-game-block { margin-top: 3rem; }

@media (max-width: 799px) {
    .home-game { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .home-game-block { padding: 1.5rem 1rem; border-radius: 10px; }
    .home-game-block + .home-game-block { margin-top: 2rem; }
    .home-game-video { margin-top: 2rem; }
    .home-game--flip .home-game-art { order: 0; }
    .home-game-art--tall .home-game-photo { aspect-ratio: 4 / 3; object-position: 50% 45%; }
    .home-game-text { text-align: center; }
}

/* "Follow along" (👤 Alex, 2026-09-18, WGT_14605): Facebook and Instagram as two
   white panels, side by side, each topped by a band of its brand colour, with a
   large icon, the name and a button — nothing else (👤 Alex); the one line of copy
   is .home-follow-intro, under the heading. Stacks below 720px, as the doors do.
   Replaced .socials, a row of two 34px icons. */
.home-follow-section { background: var(--wash); }
.home-follow-title { text-align: center; margin-bottom: .6rem; }
.home-follow-intro { text-align: center; margin: 0 auto 2rem; }
.home-follow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    max-width: 52rem;
    margin: 0 auto;
    align-items: stretch;       /* equal-height panels, buttons level */
}
.home-follow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--rule);
    border-top: 5px solid var(--brand);
    border-radius: 3px;
    padding: 2rem 1.6rem 1.8rem;
}
.home-follow-card--fb { --brand: #1877f2; }
.home-follow-card--ig { --brand: #d62976; }
.home-follow-icon { width: 64px; height: 64px; color: var(--brand); margin-bottom: 1rem; }
.home-follow-name { margin-bottom: .5rem; }
.home-follow-card .home-follow-action { margin: auto 0 0; padding-top: .8rem; }  /* buttons line up */
@media (max-width: 719px) {
    .home-follow { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* --- Book us (👤 Alex, 2026-09-18, WGT_14605) --------------------------- */

/* One "How it works" section (the page's main focus), then a smaller "Choose your
   night" pair, then Private events. It REUSES the front page's pieces rather than
   copying them: .home-door (white panel, --ink-soft heading band), .home-game (photo
   beside text) and .home-game-name (the --accent game-name band). Only what differs
   is here. */
.book-sub { margin: .6rem 0 0; font-size: 1.1rem; }

/* The three anchors land below the sticky header, not under it; #trivia and
   #musical-bingo are 301 targets of the old /trivia and /musical-bingo. */
#how, #games, #trivia, #musical-bingo, #events { scroll-margin-top: 130px; }

.book-who { margin-bottom: 3.5rem; }
.book-who-art { margin-bottom: 0; }             /* no wordmark tile hangs below this photo */
.book-who-head { margin-bottom: 1rem; }

/* 1 · 2 · 3 — the three things that happen, as panels. */
.book-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.book-steps .home-door-head { font-size: 1.25rem; }
.book-step-no {
    display: inline-block;
    min-width: 1.7em;
    margin-right: .35em;
    padding: 0 .2em;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    font-family: var(--sans);
    font-size: .85em;
    line-height: 1.6;
}
.book-steps .home-door-body p:last-child { margin-bottom: 0; }

/* The line that finishes the section: the agreement. */
.book-promise {
    margin: 2.5rem auto 0;
    max-width: 44rem;
    text-align: center;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink);
}
.book-promise p:last-child { margin-bottom: 0; }

/* Choose your night — smaller: a --wash band holding two white panels. */
.book-games-section { background: var(--wash); }
.book-games {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
}
.book-card .home-game-name { margin-bottom: 1rem; }
.book-games-note { max-width: 44rem; margin: 2rem auto 0; text-align: center; }

/* Private events — one panel, the width of a column of prose. */
.book-events { max-width: 46rem; margin: 0 auto; }

@media (max-width: 799px) {
    .book-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
    .book-games { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* --- Become a host + Host Sign-Up (👤 Alex, 2026-09-18, WGT_14606) ------- */

/* /become-a-host: centred text and button, three .home-door panels, then the
   sign-up form on a --wash band. /host-sign-up-1 (the carrier-filed opt-in URL)
   shows the same form panel; both come from includes/host_signup_form.php.
   Keyed on classes, never on the #sign-up slug; the id only takes the anchor's
   landing offset, as book-us's anchors do. */
.host-intro { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.host-intro .lede { margin-bottom: 2rem; }
.host-intro-photo { width: 100%; max-width: 40rem; border-radius: 3px; margin: 0 auto; }

.host-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.host-points .home-door-head { font-size: 1.25rem; }
.host-points .home-door-body p:last-child { margin-bottom: 0; }
.host-needs { list-style: none; margin: 0; padding: 0; }
.host-needs li { padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.host-needs li:last-child { border-bottom: 0; }

.host-cta { margin: 2.5rem 0 0; text-align: center; }

.host-signup-section { background: var(--wash); scroll-margin-top: 130px; }
.host-signup-section .lede { margin-bottom: 2rem; }

/* The form panel: a centred column, heading band and intro centred like every
   other panel, the fields themselves left-aligned so labels sit over inputs. */
.host-form-panel { max-width: 40rem; margin: 0 auto; }
.host-form-panel .home-door-body { padding: 1.6rem 2rem 2rem; }
.host-form-intro { margin: 0 0 1.4rem; }
.host-form-panel .alert { text-align: left; }
.host-form-panel .host-form { max-width: none; text-align: left; }   /* beats .form's 34rem, which comes later */
/* The consent question reads as a question, not a field caption: .field label's
   .78rem uppercase would make the one line a vetter looks for the smallest. */
.field .host-consent-title { text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-family: var(--serif); }
.field .host-consent-box { text-transform: none; letter-spacing: 0; font-weight: normal; font-size: .95rem; cursor: pointer;
                          display: block; text-align: center; }   /* 👤 Alex, 2026-09-18: centred */
.host-consent p { font-size: .95rem; }
.host-form-action { margin: 1.6rem 0 0; text-align: center; }
.host-form-alt { max-width: 40rem; margin: 2rem auto 0; text-align: center; }

@media (max-width: 799px) {
    .host-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
    .host-form-panel .home-door-body { padding: 1.4rem 1.1rem 1.6rem; }
}

/* --- Locations / schedule ---------------------------------------------- */

/* /games (👤 Alex, 2026-09-18, WGT_14600): one night after another down the page,
   each a table of venue · street address · time (plus game and distance on a ZIP
   search). Replaced WGT_14489's side-by-side day columns (.day-grid, .wrap-week),
   which had no room for an address. */
.games-day { margin: 0 0 2.5rem; }
.games-day:last-child { margin-bottom: 0; }

/* WGT_19225 (👤 Alex, 2026-10-06): the header between the published week's list and
   the following week's (#next-week). A brand-red rule across the column, then the
   heading, then that week's dates on their own line in the muted grey — so the
   second list reads as a new week, not as more nights of the first.
   WGT_19297 (👤 Alex, 2026-10-06: "needs a background color … so it pops out more"):
   the header is now a solid --brand-red band with white text (6.9:1), the same red as
   the home page's game-name bands, so it outranks the --ink-soft day bands below it. */
.games-next-week { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 4px solid var(--brand-red); }
.games-week-head {
    text-align: center;
    margin: 0 0 1.75rem;
    padding: 1rem 1rem 1.1rem;
    line-height: 1.2;
    background: var(--brand-red);
    color: var(--white);
}
.games-week-head-dates {
    display: block;
    margin-top: .4rem;
    font-family: var(--sans);
    font-size: 1.05rem;
    color: var(--white);
}

/* 🛑 WGT_14602 (👤 Alex): SHADING, strongest first — the day heading is a solid
   --ink-soft band with white text (10.4:1), the kind label rows (Trivia / Bingo) MUST
   be shaded (👤 Alex), --accent with white text (4.5:1, bold), and the venue rows stay
   white. ⚠️ The column header row that sat between them (--rule) is gone from sight
   since WGT_14607: its <thead> is .sr-only, read by a screen reader only, so its
   visible styling was removed (WGT_14605). */
.games-day h3 {
    background: var(--ink-soft);
    color: var(--white);
    padding: .45rem .75rem;
    margin: 0;
    font-size: 1.25rem;
    text-align: center;
}

/* 🛑 A wide table scrolls INSIDE its .table-wrap; the PAGE never scrolls sideways
   (CLAUDE.md → Seeing a screen). The public twin of portal.css's rule — the two
   sheets never load together. */
.table-wrap { max-width: 100%; overflow-x: auto; }

/* 🛑 WGT_17065 (👤 Graham, 2026-09-26: "the alignment of times is off"): every night
   is its own table, so with `table-layout: auto` each sized its columns from that
   night's longest name and the time column wandered 97px across the week. FIXED
   layout plus the <col> widths below (games.php's <colgroup>) gives all seven
   tables the same columns, whatever the data. The address takes what is left. */
.games-table { width: 100%; border-collapse: collapse; font-size: .95rem; table-layout: fixed; }
.games-col-venue { width: 34%; }
.games-col-time  { width: 10rem; }     /* room for "Next on Tue Sep 29" on one line */
.games-col-kind  { width: 8.5rem; }   /* "General event", "Bingo/Karaoke" */
.games-col-miles { width: 5rem; }
.games-col-more  { width: 6.5rem; }   /* WGT_17219: "More info" on one line */
.games-table--zip .games-col-venue { width: 28%; }
@media (max-width: 719px) {
    /* A phone: the address gets the room. "Next on" / "Tue Sep 29" wrap between halves. */
    .games-col-venue { width: 30%; }
    .games-col-time  { width: 6.25rem; }
}
/* 🛑 WGT_17219: the FOURTH column has to fit a phone's un-stacked table (385–719px) with
   no word broken mid-way. MEASURED 2026-09-28 at the 14.4px below, widest unbreakable
   runs: address "Attleborough," 88 · date "Wed May 28" 80 · venue "Coachmans" 73 ·
   "More" 35 — each column is that plus .4rem a side, and at 385px the address still
   has ~93px for its 88. At 15.2px / .5rem it did not fit: the address column fell to
   90px and "Gilbertville" broke. ⚠️ The widths follow the DATA, as the breakpoints
   below do — re-measure when the venue list changes. */
@media (min-width: 385px) and (max-width: 719px) {
    .games-table:not(.games-table--zip) { font-size: .9rem; }
    .games-table:not(.games-table--zip) th,
    .games-table:not(.games-table--zip) td { padding-left: .4rem; padding-right: .4rem; }
    .games-table:not(.games-table--zip) .games-col-venue { width: 28%; }
    .games-table:not(.games-table--zip) .games-col-time  { width: 5.85rem; }
    .games-table:not(.games-table--zip) .games-col-more  { width: 3.1rem; }
}
/* ⚠️ A FIXED width below 480px, where 28% would take the address's last pixels. Not
   `max(5.4rem, 28%)`: Chrome treats a <col> width mixing % and a length as AUTO
   (measured — venue and address split 99/99 and "Attleborough," broke). */
@media (min-width: 385px) and (max-width: 479px) {
    .games-table:not(.games-table--zip) .games-col-venue { width: 5.5rem; }
}
.games-table th,
.games-table td {
    text-align: left;
    vertical-align: middle;   /* 👤 Alex, 2026-09-18: centred when an address wraps */
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--rule);
    overflow-wrap: break-word;   /* a fixed column cannot grow for one long word */
}
.games-table tbody tr:last-child td { border-bottom: 0; }
.games-table .games-kind th {
    background: var(--accent);
    padding-top: .3rem;
    padding-bottom: .3rem;
    border-bottom: 0;
}
.games-table .games-kind .kind-label { margin: 0; color: var(--white); }
.games-venue { min-width: 6.5rem; }
/* 🛑 WGT_17219 (👤 Alex, 2026-09-27): THE WHOLE ROW is the way to a venue's page —
   the venue name is plain text, and the last column's "More info" is the row's one
   real link. The click is games.php's `data-row-href`, read by row-link.js (the
   portal's own mechanism — design_guide.md, *The link rule*), NOT a stretched
   `a::after`: Safari does not make a <tr> its containing block, so a tap could open
   the wrong venue. A row with no venue page carries no class and does nothing.
   It replaced WGT_17065's underlined name. .games-venue-hint says so once above. */
.games-row-link { cursor: pointer; }
.games-row-link:hover td { background: var(--wash); }
.games-row-link:hover .games-more a { text-decoration: underline; }
.games-more { white-space: nowrap; }
.games-venue-hint { text-align: center; color: var(--muted); margin: 0 0 1.25rem; }
.games-address { color: var(--muted); min-width: 6.5rem; }
.games-time,
.games-miles,
.games-kind-cell { white-space: nowrap; }
@media (max-width: 719px) {
    .games-time,
    .games-more { white-space: normal; }   /* WGT_17065: "Not this week" may wrap in the narrow column; WGT_17219: so may "More info" */
    .games-table th,
    .games-table td { padding-left: .5rem; padding-right: .5rem; }   /* after the base rule, so it wins */
}
.games-not-week { color: var(--muted); }
/* WGT_14602: "Sep 19 only · 7:00pm" — each half unbreakable, the cell free to wrap
   between them, so a one-time night widens the Time column no more than "Not this week". */
.games-time .games-once { white-space: normal; }
.games-once > span { display: inline-block; white-space: nowrap; }

/* 🛑 WGT_14602 (👤 Alex): on a narrow screen each row STACKS — venue, then address,
   then the time (a ZIP search adds the game before it and the distance after it, on
   the same line). The day band and the kind rows stay; the column header row goes.
   ONLY below the width where the table would start scrolling inside its .table-wrap,
   MEASURED on local dev 2026-09-18 (the widest table's min-content width + the
   .wrap's 48px of padding): the 5-column ZIP table needs a 557px viewport, the
   3-column one 385px. Above that the table is exactly the table. (The ZIP figure was
   585px until WGT_14607 hid the header row, whose labels had set the column widths;
   re-measured by WGT_14605.)
   ⚠️ The numbers follow the DATA — a venue name or address with a longer unbreakable
   word widens its column — so re-measure when a column, its padding, a min-width or
   the venue list changes; WGT_14602's record has the method.
   🛑 WGT_17065: since `table-layout: fixed` the tables never grow for their data,
   so these widths no longer follow it — below them a column would squeeze, not
   scroll. The ZIP table stacks from 719px (its five fixed columns left the
   address ~80px wide at 557); the 3-column one still stacks at 384.
   🛑 WGT_17219: the More info column made them SIX and FOUR. The ZIP table now stacks
   from 899px — at 720 its fixed columns left the address ~20px (MEASURED); at 900 it
   has ~105px for "Attleborough,"'s 88. The four-column one still stacks at 384; the
   385–719 band above fits it with a smaller font instead. */
@media (max-width: 899px) {
    .games-table--zip,
    .games-table--zip tbody,
    .games-table--zip tr,
    .games-table--zip td { display: block; }
    .games-table--zip thead { display: none; }
    .games-table--zip tr { padding: .55rem .75rem; border-bottom: 1px solid var(--rule); }
    .games-table--zip tbody tr:last-child { border-bottom: 0; }
    .games-table--zip td { padding: 0; border: 0; }
    .games-table--zip .games-kind-cell,
    .games-table--zip .games-time,
    .games-table--zip .games-miles { display: inline; }
    .games-table--zip .games-time:not(:empty)::before,
    .games-table--zip .games-miles:not(:empty)::before { content: "\00b7"; margin: 0 .4em; color: var(--muted); }
}
@media (max-width: 384px) {
    .games-table,
    .games-table tbody,
    .games-table tr,
    .games-table td,
    .games-table .games-kind th { display: block; }
    .games-table thead { display: none; }
    .games-table tr { padding: .55rem .75rem; border-bottom: 1px solid var(--rule); }
    .games-table tbody tr:last-child { border-bottom: 0; }
    .games-table td { padding: 0; border: 0; }
    .games-table tr.games-kind { padding: 0; }
}

/* /games' trophy photo. Since WGT_14602 it is the LEFT column of .games-intro. */
.locations-trophy { margin: 0 auto 2.5rem; max-width: 22rem; text-align: center; }
.locations-trophy img { margin: 0 auto; }

/* /games (👤 Alex, 2026-09-18, WGT_14602): the top of the page in two columns —
   the trophy left; the week notice, the compact ZIP search and the alerts sign-up
   right. Below 900px it is two cells stacked, the trophy UNDER the right side
   (👤 Alex, 2026-09-28, WGT_17223: at 720–899 the right column was cramped). */
.games-intro {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.games-intro .locations-trophy { margin: 0; }
.games-intro-side { text-align: center; }   /* 👤 Alex, 2026-09-18: centre all of it */
.games-intro-side .notice { margin-bottom: 1.5rem; }
@media (max-width: 899px) {
    .games-intro { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .games-intro .locations-trophy { margin: 0 auto; max-width: 16rem; order: 2; }
}

/* Read by a screen reader, not shown — the compact ZIP search's labels. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* /locations: the in-page ZIP filter (a GET form — works without JavaScript). */
.zip-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem .8rem;
    margin: 0 auto 2.5rem;
    scroll-margin-top: 130px; /* #listings lands below the sticky header, not under it */
}
.zip-filter label {
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}
.zip-filter input, .zip-filter select {
    font: inherit;
    font-size: 1rem;
    padding: .55rem .7rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--white);
    color: var(--ink);
}
.zip-filter input { width: 8rem; }
.zip-filter input:focus, .zip-filter select:focus { outline: none; border-color: var(--accent); }
.zip-filter-clear { font-size: .9rem; }
.zip-filter-note { max-width: 44rem; margin: -1rem auto 2.5rem; text-align: center; }

.kind-label {
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 1.2rem 0 .5rem;
    font-weight: 700;
}
.kind-label:first-of-type { margin-top: 0; }

.venues { list-style: none; margin: 0; padding: 0; }
.venues li {
    padding: .4rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: .95rem;
}
.venues li:last-child { border-bottom: 0; }

.venue-time { color: var(--muted); font-size: .85rem; white-space: nowrap; }

/* /games (WGT_14574): the alerts line beneath the ZIP search. Centred in
   .games-intro's right column (👤 Alex, 2026-09-18), as is the ZIP search. */
.games-alerts { max-width: 44rem; margin: 0 auto; }
.games-alerts p:last-child { margin-bottom: 0; }
#find .zip-filter { justify-content: center; margin: 0 0 1.5rem; }
#find .zip-filter input { width: 7rem; }

/* --- Prose -------------------------------------------------------------- */

.prose { max-width: 46rem; margin: 0 auto; }
.prose h4 { margin-top: 2.2rem; }
.prose h4:first-child { margin-top: 0; }

/* /trivia: everything centred — picture, text and button (👤 Alex, 2026-09-17, WGT_14489). */
.prose-centred { text-align: center; }
.prose-centred img { margin-left: auto; margin-right: auto; }

.faq dt { font-family: var(--serif); color: var(--ink); font-size: 1.08rem; margin-top: 1.6rem; }
.faq dd { margin: .4rem 0 0; }
.faq dd p:last-child { margin-bottom: 0; }

/* Trophy Wins gallery (/trophy). Square crops like live's thumbnails; each links to the
   uncropped photo. Five across on desktop, two on a phone — never wider than its panel. */
.trophy-cta { margin-top: 2.5rem; margin-bottom: 0; }   /* /trophy's foot button (👤 Alex, 2026-09-18) */
.trophy-wins {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: 1rem;
}
.trophy-wins li { min-width: 0; }
.trophy-wins a { display: block; border-radius: 3px; overflow: hidden; background: var(--wash); }
.trophy-wins a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trophy-wins img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: opacity .15s;
}
.trophy-wins a:hover img { opacity: .85; }
@media (max-width: 600px) {
    .trophy-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

/* /trophy laid out as panels (👤 Alex, 2026-09-18, WGT_14609). White intro (the trophy
   photo beside the pitch), then "How do we win the trophy?" as four numbered .home-door
   rows on a --wash band, the FAQ as four question panels on white, and the Trophy Wins
   grid on --wash. Reuses .home-door and .book-step-no; only what differs is here. */
.trophy-intro {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 3.5rem;
    align-items: center;
    max-width: 62rem;
    margin: 0 auto;
}
.trophy-intro-art { margin: 0; }
/* 👤 Alex, 2026-09-18: the intro and every rules panel are centred, as /book-us and
   /become-a-host are; the column caps the line at about .lede's 44rem. */
.trophy-intro-text { text-align: center; max-width: 44rem; margin: 0 auto; }
.trophy-intro-art img { width: 100%; max-width: 24rem; margin: 0 auto; border-radius: 3px;
    box-shadow: 0 10px 28px rgba(22, 22, 22, .16); }
.trophy-pitch-head { font-size: 2rem; margin-bottom: 1rem; }
.trophy-pitch {
    font-family: var(--serif);
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--ink);
}
.trophy-who {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 3px solid var(--brand-red);   /* the strongest accent on the page */
}
.trophy-who h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.trophy-who p { margin: 0; }

/* The gated "which bar has it now" line: printed only when trophyMovements has a row. */
.trophy-now {
    background: var(--white);
    border: 1px solid var(--rule);
    border-left: 5px solid var(--brand-red);
    padding: 1rem 1.3rem;
    margin-bottom: 2rem;
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--ink);
}
.trophy-now strong { font-weight: 400; }

/* Where the name came from (WGT_16239, 2026-09-24): Graham's story between the intro and
   the steps, always open. Centred like the rest of /trophy, in one column capped at .lede's
   44rem, in the pitch's serif. The P.S. sits a little apart from the two closing lines. */
.trophy-story { max-width: 44rem; margin: 0 auto; text-align: center; }
/* 1.8rem, not 2rem (👤 Alex, 2026-09-24): at 2rem "From?" wrapped to a second line in the
   44rem column; the heading measured 755px against 704. At 1.8rem it is one line. */
.trophy-story-head { font-size: 1.8rem; margin-bottom: 1.4rem; }
.trophy-story p {
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink);
    margin-bottom: 1.1em;
}
.trophy-story p.trophy-story-ps { margin: 2rem 0 0; }
/* Graham's two photos of Barry (WGT_16241), under the heading: side by side at one height,
   each shown WHOLE (never cropped — the first is from his obituary). They wrap to one per
   line when the column is too narrow for both. */
.trophy-story-photos {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.trophy-story-photos li { min-width: 0; max-width: 100%; }
.trophy-story-photos a { display: block; border-radius: 3px; overflow: hidden; background: var(--wash); }
.trophy-story-photos a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trophy-story-photos img {
    display: block;
    height: 16rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: opacity .15s;
}
.trophy-story-photos a:hover img { opacity: .85; }

.trophy-how-section, .trophy-wins-section { background: var(--wash); }
/* The four steps are full-width ROWS, one under another (👤 Alex, 2026-09-18: four columns
   squished the text): the numbered title is a left block on the --ink-soft band, the text
   sits beside it, centred, no wider than about 44rem. Below 700px the title is a band on top. */
.trophy-how-section .section-head { text-align: center; }
.trophy-steps {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 62rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.trophy-steps .home-door { flex-direction: row; }
.trophy-steps .home-door-head {
    flex: 0 0 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.trophy-steps .home-door-body { justify-content: center; padding: 1.2rem 2rem; }
.trophy-steps .home-door-body p { max-width: 44rem; margin: 0 auto; }
@media (max-width: 699px) {
    .trophy-steps .home-door { flex-direction: column; }
    .trophy-steps .home-door-head { flex-basis: auto; }
    .trophy-steps .home-door-body { padding: 1.2rem 1.3rem 1.4rem; }
}

.trophy-faq {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.trophy-faq .home-door-head { font-size: 1.15rem; line-height: 1.35; margin: 0; color: var(--white); }
.trophy-faq .home-door-body { margin: 0; }   /* centred, from .home-door-body (👤 Alex) */
.trophy-faq .home-door-body p:last-child { margin-bottom: 0; }

@media (max-width: 799px) {
    .trophy-intro { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .trophy-intro-art img { max-width: 16rem; }
    .trophy-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
    .trophy-pitch-head, .trophy-story-head { font-size: 1.6rem; }
}

/* --- Form --------------------------------------------------------------- */

.form { max-width: 34rem; }
/* /contact (👤 Alex, 2026-10-19): each column's headings and the Send button are centred over
   that column, and the whole right column is centred. The form's fields stay left. The form
   keeps its 34rem cap, so its heading takes the same cap and the button sits in the middle of
   the form, not of a wider column. */
.contact-cards h4 { text-align: center; }
.contact-cards > div:last-child { text-align: center; }   /* the right column's text and its Facebook / Instagram links too */
.contact-cards > div:first-child > h4 { max-width: 34rem; }
.contact-cards .form > .btn { display: block; margin-left: auto; margin-right: auto; }
.field { margin-bottom: 1.2rem; }
.field label {
    display: block;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: .4rem;
}
.field input, .field textarea, .field select {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    padding: .65rem .8rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--white);
    color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input[type="checkbox"], .field input[type="radio"] {
    width: auto;
    padding: 0;
}

.alert { padding: .9rem 1.2rem; border-radius: 3px; margin-bottom: 1.5rem; }
.alert-ok  { background: #e8f4ec; border: 1px solid #b6d9c2; color: #1d5231; }
.alert-err { background: #fbeaea; border: 1px solid #e2b8b8; color: #7a2626; }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }

.hp { position: absolute; left: -9999px; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
    /* Centred site-wide — 👤 Alex, 2026-09-17 (WGT_14489), asked on /trivia; the footer is shared. */
    text-align: center;
    background: var(--white);
    color: var(--muted);
    padding: 2rem 0 3rem;
    font-size: .88rem;
    border-top: 1px solid var(--rule);
    margin-top: 4rem;
}
.site-footer a { color: var(--muted); }

.legal { color: var(--muted); font-size: .84rem; margin: 0; }
.legal a { text-decoration: underline; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 860px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.55rem; }
    .hero { padding: 4.5rem 1.25rem; }
    .section { padding: 3rem 0; }

    .nav-toggle { display: block; }
    .site-header .wrap { flex-wrap: wrap; min-height: 72px; }
    .site-nav {
        flex-basis: 100%;
        display: none;
        border-top: 1px solid var(--rule);
    }
    .site-nav.open { display: block; }
    .site-nav ul { flex-direction: column; gap: 0; padding: .5rem 0 1rem; }
    .site-nav a { padding: .7rem 0; }
}

/* 👤 Alex, 2026-09-17 — THE SENTENCE-BREAK RULE, the public half. A two-sentence
   line breaks BETWEEN its sentences rather than mid-sentence. Each sentence is
   its own <span>; an inline-block is one unit to the line breaker, so the space
   between them is the first break offered. 🛑 Not a <br>: where both fit they
   stay on one line. ⚠️ The portal half is in portal.css, and the rule is written
   up in CLAUDE/specs/design_guide.md. */
.sentences > span { display: inline-block; }

/* --- One venue's page (WGT_14579) ------------------------------------------
   👤 Alex's plan for Meiji, 2026-09-18: a big picture on top, then two columns on
   a desktop — Upcoming nights + About on the left, Good to know + Map on the
   right — and one column on a phone. The photos stay full width below. */

/* 👤 Alex, 2026-09-27 (the WGT_17086 walk) — the venue's name, town and Follow on the
   left, its picture on the right, one band; below 720px they stack, picture first. */
.venue-head { padding: 2.5rem 1.5rem; }
.page-head .venue-head-inner { max-width: 60rem; margin: 0 auto; }
.venue-head .venue-head-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    align-items: center;
}
.venue-head-pic img { display: block; margin: 0 auto; border-radius: 3px; }
/* The WHOLE photo, shrunk to fit — never cropped (👤 Alex, 2026-09-27: a tall phone
   photo lost most of itself to object-fit: cover). */
.venue-head-pic--photo img { width: auto; height: auto; max-width: 100%; max-height: 320px; }
/* A logo is a brand mark, not a photograph: shown whole, never cropped. */
.venue-head-pic--logo img { max-width: 260px; max-height: 220px; width: auto; height: auto; }
@media (max-width: 719px) {
    .venue-head .venue-head-inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .venue-head-pic { order: -1; }
    .venue-head-pic--photo img { max-height: 300px; }
}

.venue-town { margin: .35rem 0 0; color: var(--muted); }

.venue-cols {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 3rem;
    align-items: start;
}
.venue-cols--single { grid-template-columns: minmax(0, 1fr); }
.venue-block + .venue-block { margin-top: 3rem; }
.venue-block-title { text-align: center; margin-bottom: 1.5rem; }
.venue-about p { text-transform: none; letter-spacing: normal; }
.venue-address { text-align: center; }
.good-to-know { margin: 0; }
.good-to-know-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--rule);
}
.good-to-know-row:last-child { border-bottom: 0; }
.good-to-know dt { font-weight: 700; }
.good-to-know dd { margin: 0; text-align: right; }
@media (max-width: 859px) {
    .venue-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .venue-col + .venue-col { margin-top: 3rem; }
}

/* The photo slideshow — assets/js/venue-slideshow.js adds `.is-slideshow` to a
   `[data-slideshow]` grid of two or more cards. Without it the grid is unchanged. */
.cards.is-slideshow { display: block; max-width: 44rem; margin: 0 auto; }
.cards.is-slideshow > .card { display: none; }
.cards.is-slideshow > .card.is-current { display: block; }
.cards.is-slideshow > .card img { max-height: 70vh; width: auto !important; max-width: 100%; margin-left: auto; margin-right: auto; }
.slideshow-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0 2rem;
}
.slideshow-btn {
    background: var(--ink);
    color: var(--white);
    border: 0;
    border-radius: 3px;
    padding: .55rem 1.2rem;
    font: inherit;
    font-size: .82rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
}
.slideshow-count { color: var(--muted); font-size: .9rem; white-space: nowrap; }