/* Quiz-UK site v2
   Brand mosaic (assets/brand-gradient.jpg) carries the header, hero and banners.
   Page sections sit on warm off-white. Bowlby One for headings only, Figtree for everything else. */

/* Fonts are served from this site (no Google request, works with the CSP) */
@font-face { font-family: 'Bowlby One'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/bowlby-one-latin.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(assets/fonts/figtree-latin.woff2) format('woff2'); }

:root {
  --pink: #FC009C;
  --pink-dark: #C4007A;
  --yellow: #FFD400;
  --ink: #1C1222;
  --ink-soft: #4A3F52;
  --paper: #FBF7F2;
  --paper-2: #F3ECE3;
  --line: #E2D8CC;
  --white: #FFFFFF;
  --display: 'Bowlby One', 'Arial Black', sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --hero-h: 620px;
  --quizmo-h: 450px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-dark); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mosaic :focus-visible { outline-color: var(--yellow); }

h1, h2, h3 { text-wrap: balance; font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(44px, 6.4vw, 92px); }
h2 { font-size: clamp(34px, 4.4vw, 62px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); }
p { margin: 0; }

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--ink); padding: 10px 16px; font-weight: 700; z-index: 99; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The mosaic: real brand image with a darkening layer so white text passes contrast */
.mosaic { position: relative; color: var(--white); background: #4B1A8C url(assets/brand-gradient.jpg) center / cover; isolation: isolate; }
.mosaic::before { content: ''; position: absolute; inset: 0; background: rgba(28, 6, 52, .38); z-index: -1; }

/* Buttons: one loud primary, a quieter secondary, plain text links for the rest */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 10px; font-weight: 800; font-size: 18px; text-decoration: none; border: 3px solid transparent; transition: transform .15s ease-out, background-color .15s ease-out; }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
button, .btn, .chip { touch-action: manipulation; }
.btn-primary { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.btn-primary:hover { color: var(--ink); }
.btn-pink { background: var(--pink-dark); color: var(--white); box-shadow: 0 4px 0 var(--ink); }
.btn-pink:hover { color: var(--white); background: #9E0062; }
.btn-ghost { border-color: currentColor; color: inherit; }
.mosaic .btn-ghost:hover { color: var(--white); background: rgba(255,255,255,.12); }
.link-arrow { font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.link-arrow::after { content: '\2192'; transition: transform .15s ease-out; }
.link-arrow:hover::after { transform: translateX(4px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--white); isolation: isolate; border-bottom: 1px solid #000; }
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s ease-out;
  background: linear-gradient(rgba(28, 6, 52, .38), rgba(28, 6, 52, .38)), url(assets/brand-gradient.jpg) center / cover; }
.site-header.scrolled::before { opacity: 1; }
.site-header :focus-visible { outline-color: var(--yellow); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 84px; flex-wrap: wrap; padding-block: 8px; }
.site-header .logo img { height: 58px; width: auto; }
.nav { display: flex; align-items: center; font-weight: 700; font-size: 16px; }
.nav-links { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.nav-logo, .nav-backdrop { display: none; }
.nav a { color: var(--white); text-decoration: none; padding: 8px 0; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--yellow); color: var(--white); }
.nav .btn { min-height: 46px; padding: 0 18px; font-size: 16px; border-bottom: 3px solid transparent; }
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--ink); border-bottom-color: transparent; }
.nav-toggle { display: none; }

/* Home hero */
.hero, .page-hero { height: var(--hero-h); overflow: hidden; }
.hero .wrap, .page-hero .wrap { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hero-quizmo { height: var(--quizmo-h); width: auto; max-width: none; align-self: end; justify-self: center; }
@media (max-width: 900px) { :root { --quizmo-h: 280px; } .hero, .page-hero { height: auto; } .hero .wrap, .page-hero .wrap { grid-template-columns: 1fr; padding-top: 40px; } }
.hero h1, .page-hero h1 { font-size: clamp(38px, 4.6vw, 68px); }
.hero-copy { padding-bottom: 0; position: relative; z-index: 3; } /* stars pass behind the headline and buttons */
.hero-copy .kicker { display: inline-block; font-weight: 800; font-size: 17px; color: var(--white); margin-bottom: 18px; padding-bottom: 4px; border-bottom: 4px solid var(--yellow); }
.hero-copy p.lead { font-size: 21px; margin-top: 22px; max-width: 34ch; }
.hero-copy .actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-copy .facts { margin-top: 28px; font-size: 16px; opacity: .92; }


/* Hero stage: Quizmo asks, the team answers, confetti, 1st place */
.stage { position: relative; height: 100%; }
.stage .hero-quizmo { position: absolute; left: 0; bottom: 0; }
@media (max-width: 900px) { .stage { height: 500px; } }
.bubble { position: absolute; right: 0; top: 36px; width: min(380px, 70%); background: var(--white); color: var(--ink); border-radius: 22px; padding: 20px 22px 18px; box-shadow: 0 6px 0 var(--ink); transform-origin: 12% 100%; transform: scale(.6); opacity: 0; transition: transform .35s ease-out, opacity .25s ease-out; }
.bubble.show { transform: scale(1); opacity: 1; }
.bubble::after { content: ''; position: absolute; left: 34px; bottom: -22px; border: 12px solid transparent; border-top: 16px solid var(--white); border-left: 18px solid var(--white); }
.bubble .q { font-weight: 800; font-size: 21px; line-height: 1.3; margin: 0 0 12px; }
.answers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.answers li { border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 16px; opacity: 0; transform: translateY(6px); transition: opacity .2s ease-out, transform .2s ease-out, background-color .2s, border-color .2s; }
.answers.show li { opacity: 1; transform: none; }
.answers.show li:nth-child(2) { transition-delay: .08s; } .answers.show li:nth-child(3) { transition-delay: .16s; } .answers.show li:nth-child(4) { transition-delay: .24s; }
.answers li.picked { border-color: var(--ink); background: var(--paper-2); }
.answers li.correct { border-color: #0B7A3B; background: #D9F5E3; }
.answers li.correct::after { content: ' \2713'; color: #0B7A3B; }
/* Fastest three: separate cards that pop in one at a time (3rd, 2nd, then 1st) */
.podium { position: absolute; right: 0; bottom: 26px; width: min(340px, 72%); list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.podium li { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px;
  background: var(--white); color: var(--ink); box-shadow: 0 5px 0 var(--ink); opacity: 0; transform: translateY(14px) scale(.92); transition: transform .3s ease-out, opacity .2s ease-out; }
.podium li.in { opacity: 1; transform: none; }
.podium .place { font-family: var(--display); font-size: 22px; line-height: 1; text-align: center; padding: 9px 0; border-radius: 9px; }
.podium .nm { font-weight: 800; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .time { font-weight: 700; font-size: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.podium .p1 { background: var(--yellow); padding-block: 14px; }
.podium .p1 .place { background: var(--ink); color: var(--yellow); font-size: 24px; }
.podium .p1 .nm { font-size: 20px; }
.podium .p1 .time { color: var(--ink); }
.podium .p2 .place { background: #D7D2DD; }
.podium .p3 .place { background: #E8B07F; }
/* The star layer covers the whole window so stars can fly past the edge of the hero without being cut off.
   It sits under the sticky header (z 50), the podium cards (z 2) and the hero headline/buttons (z 3). */
.confetti { position: fixed; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }
/* stars fly out from behind the winner card and pass behind the other cards, so team names stay readable */
.podium { z-index: 2; }

/* Town ticker strip */
.ticker { background: var(--yellow); color: var(--ink); overflow: hidden; border-block: 3px solid var(--ink); }
.ticker-track { display: flex; width: max-content; animation: ticker 50s linear infinite; font-family: var(--display); font-size: 26px; padding: 12px 0; white-space: nowrap; }
.ticker-track span { padding: 0 18px; }
.ticker-track span:nth-child(odd) { color: var(--pink-dark); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Sections */
.section { padding: 96px 0; }
.section.tint { background: var(--paper-2); }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head p { margin-top: 14px; font-size: 20px; color: var(--ink-soft); }

/* Audience rows: three different layouts, not three matching cards */
.audience { display: grid; gap: 28px; }
.aud { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 28px 0; border-top: 3px solid var(--ink); }
.aud:last-child { border-bottom: 3px solid var(--ink); }
.aud img { width: 220px; height: 165px; object-fit: cover; border-radius: 6px; }
.aud .who { font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--pink-dark); }
.aud h3 { margin: 6px 0 10px; }
.aud p { color: var(--ink-soft); max-width: 52ch; }
@media (max-width: 800px) { .aud { grid-template-columns: 1fr; gap: 14px; } .aud img { width: 100%; height: 200px; } }

/* How a night works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 28px 0 0; counter-increment: step; }
.steps li::before { content: counter(step); display: block; font-family: var(--display); font-size: 88px; line-height: 1; color: var(--pink); -webkit-text-stroke: 0; }
.steps li + li { padding-left: 28px; border-left: 3px dashed var(--line); }
.steps strong { display: block; font-size: 22px; margin: 10px 0 6px; }
.steps span { color: var(--ink-soft); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 28px; } .steps li + li { padding-left: 0; border-left: 0; border-top: 3px dashed var(--line); padding-top: 24px; } }

/* Rounds list, with a Quizmo beside it on desktop */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.rounds { list-style: none; margin: 0; padding: 0; }
.rounds li { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 20px 0; border-bottom: 2px solid var(--line); }
.rounds li:first-child { border-top: 2px solid var(--line); }
.rounds b { font-weight: 800; font-size: 20px; }
.rounds span { color: var(--ink-soft); }
@media (max-width: 600px) { .rounds li { grid-template-columns: 1fr; gap: 4px; } }

/* Mosaic banner */
.banner { padding: 80px 0; overflow: hidden; }
.banner .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.banner p { font-size: 20px; margin-top: 18px; max-width: 46ch; }
.banner .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.banner .actions a:not(.btn) { color: var(--white); font-weight: 800; }
.banner .art { justify-self: end; width: 100%; border-radius: 6px; box-shadow: 12px 12px 0 var(--yellow); }
@media (max-width: 800px) { .banner .wrap { grid-template-columns: 1fr; } }
.banner.solo .wrap { grid-template-columns: 1fr; }

/* Photo split */
.photo-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.photo-split figure { margin: 0; position: relative; }
.photo-split figure img { border-radius: 6px; box-shadow: 14px 14px 0 var(--pink); }
.photo-split figcaption { margin-top: 22px; font-size: 15px; color: var(--ink-soft); }
.photo-split p { margin-top: 16px; color: var(--ink-soft); font-size: 19px; }
.photo-split .btn { margin-top: 26px; }
@media (max-width: 860px) { .photo-split { grid-template-columns: 1fr; gap: 32px; } }

/* Lists with ticks */
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { padding-left: 34px; position: relative; font-weight: 600; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 6px; width: 20px; height: 12px; border-left: 4px solid var(--pink); border-bottom: 4px solid var(--pink); transform: rotate(-45deg); }

/* App block */
.app-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.app-block > img { width: 100%; max-width: 560px; justify-self: end; border-radius: 6px; box-shadow: 12px 12px 0 var(--yellow); }
.store { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Official store badges: shown as supplied, same height, no restyling */
.store a { display: inline-block; border-radius: 9px; line-height: 0; transition: transform .15s ease-out; }
@media (hover: hover) { .store a:hover { transform: translateY(-2px); } }
.store img { height: 54px; width: auto; }
@media (max-width: 800px) { .app-block { grid-template-columns: 1fr; } }

/* Inner page hero text */
.page-hero p { font-size: 21px; margin-top: 18px; max-width: 44ch; }
.page-hero .actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.page-hero .actions a:not(.btn) { color: var(--white); font-weight: 800; }

/* Forms */
.form { display: grid; gap: 16px; background: var(--white); border: 3px solid var(--ink); border-radius: 14px; padding: 28px; box-shadow: 8px 8px 0 var(--ink); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .form legend { font-weight: 800; font-size: 16px; }
.field input, .field select, .field textarea { font: 400 17px var(--body); color: var(--ink); background: var(--paper); border: 2px solid #B9AC9E; border-radius: 8px; min-height: 50px; padding: 10px 12px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid #B9AC9E; border-radius: 8px; font-weight: 700; }
.checks input { width: 18px; height: 18px; accent-color: var(--pink); }
.form-note { font-size: 15px; color: var(--ink-soft); }
.form-status { font-weight: 800; }
.form button { justify-self: start; cursor: pointer; font-family: var(--body); }

/* FAQ */
.faq details { border-bottom: 2px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 66px; font-weight: 800; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--display); font-size: 28px; color: var(--pink-dark); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 0 20px; color: var(--ink-soft); max-width: 62ch; }

/* Find a quiz */
.finder > * { min-width: 0; }
.finder { display: grid; gap: 16px; padding: 24px; background: var(--white); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 8px 8px 0 var(--ink); }
.finder-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.finder-row .field { flex: 1 1 320px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font: 700 16px var(--body); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.chip:hover { background: var(--paper-2); }
.chip[aria-pressed="true"]:hover { background: var(--ink); }
.results-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; margin-top: 36px; }
@media (max-width: 900px) { .results-layout { grid-template-columns: 1fr; } }
.count { font-weight: 800; margin-bottom: 8px; }
.night { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 0; border-bottom: 2px solid var(--line); }
.night .when b { display: block; font-weight: 800; font-size: 18px; color: var(--pink-dark); line-height: 1.2; }
.night .when span { font-size: 18px; }
.night .when span { font-weight: 800; }
.night h3 { font-family: var(--body); font-weight: 800; font-size: 20px; line-height: 1.3; }
.night p { color: var(--ink-soft); font-size: 16px; }
.night .kind { font-size: 14px; font-weight: 700; color: var(--ink); background: var(--paper-2); border-radius: 6px; padding: 3px 8px; display: inline-block; margin-top: 6px; }
.night-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; margin-top: 4px; }
.night-actions .link-arrow { font-size: 16px; }
@media (max-width: 600px) { .night { grid-template-columns: 84px minmax(0, 1fr); } .night .when b, .night .when span { font-size: 16px; } }
.side-box { padding: 22px; border-radius: 12px; background: var(--white); border: 2px solid var(--line); }
.side-box + .side-box { margin-top: 18px; }
.side-box h3 { font-size: 24px; margin-bottom: 8px; }
.side-box p { font-size: 16px; color: var(--ink-soft); }
.towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.towns button { min-height: 40px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--paper-2); color: var(--ink); font: 700 15px var(--body); cursor: pointer; }
.towns button:hover { background: var(--yellow); }
.empty { padding: 28px 0; }

/* Events list */
.event-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--ink); }
.event-types article { padding: 30px 30px 30px 0; border-bottom: 3px solid var(--ink); display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.event-types article:nth-child(even) { padding-left: 30px; border-left: 3px solid var(--ink); }
.event-types img { width: 200px; height: 150px; object-fit: cover; border-radius: 6px; }
.event-types img.cutout { object-fit: contain; border-radius: 0; }
.event-types p { color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 800px) { .event-types { grid-template-columns: 1fr; } .event-types article:nth-child(even) { padding-left: 0; border-left: 0; } }

/* Contact */
.contact-ways { display: grid; gap: 0; border-top: 3px solid var(--ink); }
.contact-ways a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 0; border-bottom: 3px solid var(--ink); text-decoration: none; color: var(--ink); font-weight: 800; font-size: 22px; }
.contact-ways a span { font-weight: 500; font-size: 16px; color: var(--ink-soft); }
.contact-ways a:hover { color: var(--pink-dark); }

/* Footer */
.site-footer { background: var(--ink); color: #E9E1F0; padding: 64px 0 36px; font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.site-footer img { height: 64px; width: auto; }
.site-footer h2 { font-family: var(--body); font-weight: 800; font-size: 16px; margin-bottom: 10px; color: var(--white); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: #E9E1F0; text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }
.footer-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid #3A2F42; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: #BDB2C8; }
.footer-base a { color: #BDB2C8; text-decoration: underline; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bubble, .answers li { opacity: 1; transform: none; }
}

/* Find a quiz map */
.finder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; margin-top: 32px; }
.map-wrap { position: sticky; top: 104px; }
#map { height: min(640px, 72vh); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 8px 8px 0 var(--ink); background: var(--paper-2); }
.map-note { font-size: 14px; color: var(--ink-soft); margin-top: 14px; }
.results-scroll { max-height: min(720px, 80vh); overflow-y: auto; padding-right: 8px; border-top: 2px solid var(--line); }
.night.active { background: #FFF6C2; }
.night .dist { font-weight: 800; color: var(--ink); }
.night button.show-on-map { background: none; border: 0; padding: 0; font: 800 16px var(--body); color: var(--pink-dark); text-decoration: underline; cursor: pointer; min-height: 44px; }
.finder-extra { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font-size: 16px; }
.leaflet-popup-content { font: 500 15px/1.45 var(--body); color: var(--ink); }
.leaflet-popup-content b { font-weight: 800; font-size: 16px; }
.qk-pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pink-dark); border: 3px solid var(--white); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.qk-pin.hl { background: var(--yellow); border-color: var(--ink); }
.qk-you { width: 18px; height: 18px; border-radius: 50%; background: #1A73E8; border: 3px solid var(--white); box-shadow: 0 0 0 6px rgba(26,115,232,.25); }
@media (max-width: 900px) { .finder-layout { grid-template-columns: 1fr; } .map-wrap { position: static; order: -1; } #map { height: 380px; } .results-scroll { max-height: none; overflow: visible; } }

/* Phones: inner page heroes all the same height, Quizmo pinned bottom right at one size */
@media (max-width: 900px) {
  .page-hero .wrap { display: block; padding-top: 36px; }

  .page-hero h1 { font-size: 38px; }
  .page-hero p { font-size: 19px; }
  .event-types article { grid-template-columns: 1fr; padding-right: 0; }
  .event-types img { width: 100%; height: 200px; }
  .event-types img.cutout { width: auto; height: 200px; }
}

/* Section pieces that used to be inline styles */
.wrap.narrow { max-width: 760px; }
.rounds { margin-top: 32px; }
.photo-split.text-first { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.photo-split > img { border-radius: 6px; box-shadow: 12px 12px 0 var(--pink); }
.photo-split .link-arrow { margin-top: 18px; }
.photo-split.fest { grid-template-columns: minmax(0, 1fr) 220px; }
.photo-split.fest > img { width: 220px; border-radius: 0; box-shadow: none; }
.app-block p { margin-top: 16px; font-size: 19px; color: var(--ink-soft); max-width: 48ch; }
.form h2 { font-size: clamp(30px, 3vw, 42px); }
.h-sub { margin-top: 44px; font-size: clamp(28px, 3vw, 40px); }
@media (min-width: 1001px) { .steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) and (min-width: 801px) {
  .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .steps.four li:nth-child(3) { padding-left: 0; border-left: 0; }
}
.need { margin-top: 16px; font-size: 22px; font-weight: 700; }
.price-note { margin-top: 20px; color: var(--ink-soft); }
.price-note a { font-weight: 800; }
.faq h2 { margin-bottom: 28px; }
.finder-section { padding-top: 48px; }
.finder-row .btn, .finder-row .chip { min-height: 50px; }
.empty p { margin-top: 8px; color: var(--ink-soft); }
.footer-about { margin-top: 16px; max-width: 34ch; }
@media (max-width: 860px) {
  .photo-split.text-first, .photo-split.fest { grid-template-columns: 1fr; }
  .photo-split.fest > img { width: 180px; justify-self: center; }
}

/* ===== Phones: most visitors are here, so this is the main layout ===== */
@media (max-width: 600px) {
  body { font-size: 17px; }
  .wrap { width: calc(100% - 36px); }
  h2 { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.08; }
  h3 { font-size: 22px; }

  /* Header: shorter, with big tap targets in the open menu */
  .site-header .wrap { min-height: 64px; padding-block: 6px; gap: 10px; }
  .site-header .logo img { height: 44px; }
  .map-wrap { top: 76px; }

  /* Buttons stretch to the full width so they are easy to hit with a thumb */
  .hero-copy .actions, .banner .actions, .page-hero .actions { gap: 12px; }
  .hero-copy .actions .btn, .banner .actions .btn, .aud .btn, .photo-split .btn, .form button { width: 100%; justify-content: center; }
  .banner .actions a:not(.btn) { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .store { gap: 10px; }
  .store img { height: 50px; }

  /* Home hero */
  .hero .wrap { padding-top: 28px; gap: 8px; }
  .hero h1 { font-size: 40px; line-height: 1.08; }
  .hero-copy p.lead { font-size: 18px; margin-top: 14px; }
  .hero-copy .actions { margin-top: 22px; }
  .stage { height: 440px; }
  .stage .hero-quizmo { height: 250px; left: -6px; }
  .bubble { top: 6px; width: 80%; padding: 14px 16px 14px; border-radius: 18px; }
  .bubble::after { left: 26px; }
  .bubble .q { font-size: 18px; margin-bottom: 10px; }
  .answers { gap: 6px; }
  .answers li { font-size: 15px; padding: 7px 9px; }
  .podium { width: 74%; bottom: 14px; gap: 8px; }
  .podium li { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px 8px 8px; border-radius: 12px; }
  .podium .place { font-size: 17px; padding: 7px 0; }
  .podium .p1 .place { font-size: 19px; }
  .podium .nm { font-size: 15px; }
  .podium .p1 .nm { font-size: 17px; }
  .podium .time { font-size: 13px; }

  /* Inner page heroes: one fixed height on every page */
  .page-hero .wrap { padding-top: 28px; }
  .page-hero h1 { font-size: 34px; line-height: 1.1; }
  .page-hero p { font-size: 17px; line-height: 1.5; margin-top: 12px; }
  .page-hero .actions { margin-top: 20px; gap: 6px 16px; }
  .page-hero .actions a:not(.btn) { font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
  .stage.results .bubble { opacity: 0; transform: scale(.9); }
  .stage.results .podium { bottom: auto; top: 10px; }

  .ticker-track { font-size: 24px; padding: 8px 0; }
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 26px; }
  .banner { padding: 56px 0; }
  .banner p { font-size: 18px; }
  .banner .art, .photo-split > img, .app-block > img { box-shadow: 8px 8px 0 var(--yellow); }
  .photo-split > img, .photo-split figure img { box-shadow: 8px 8px 0 var(--pink); }
  .photo-split p, .app-block p { font-size: 17px; }

  /* Audience rows */
  .aud { padding: 22px 0; gap: 12px; }
  .aud img { height: auto; aspect-ratio: 16 / 10; }

  /* Steps: number beside the text instead of a huge number above it */
  .steps, .steps.four { gap: 0; }
  .steps li, .steps li + li { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; border-left: 0; }
  .steps li + li { border-top: 2px dashed var(--line); }
  .steps li::before { grid-row: span 2; font-size: 50px; }
  .steps strong { margin: 4px 0 4px; font-size: 19px; }

  .rounds { margin-top: 22px; }
  .rounds li { padding: 16px 0; }
  .rounds b { font-size: 18px; }

  /* Forms */
  .form, .finder { padding: 20px 18px; box-shadow: 6px 6px 0 var(--ink); }
  .h-sub { margin-top: 36px; }

  /* Find a quiz: day and town buttons scroll sideways in one row */
  .finder-row { gap: 10px; }
  .finder-row .field { flex: 1 1 100%; }
  .finder-row .btn { flex: 1 1 auto; justify-content: center; }
  .chips, .towns { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
  .chips::-webkit-scrollbar, .towns::-webkit-scrollbar { display: none; }
  .chip, .towns button { flex: 0 0 auto; }
  #map { height: 340px; box-shadow: 6px 6px 0 var(--ink); }
  .night { gap: 4px 14px; padding: 16px 0; }
  .night h3 { font-size: 18px; }

  .contact-ways a { font-size: 19px; padding: 18px 0; }
  .contact-ways a span { font-size: 15px; }
  .event-types article { padding-block: 24px; }

  .site-footer { padding: 48px 0 28px; }
  .site-footer ul { gap: 0; }
  .site-footer ul a { display: inline-block; padding: 7px 0; }
}
#map .leaflet-bar a, #map.leaflet-touch .leaflet-bar a { width: 42px; height: 42px; line-height: 42px; font-size: 22px; }

/* Quizmo's speech bubble in the inner page heroes */
.says { position: relative; align-self: end; justify-self: center; }
.says .hero-quizmo { display: block; }
.page-hero .says-bubble { position: absolute; right: 52%; bottom: calc(100% + 16px); width: max-content; max-width: 250px; background: var(--white); color: var(--ink); font-weight: 800; font-size: 18px; line-height: 1.3; padding: 13px 17px; border-radius: 18px; filter: drop-shadow(0 5px 0 var(--ink)); text-wrap: balance; transform-origin: 85% 100%; animation: says-in .35s ease-out .7s both; }
.page-hero .says-bubble::after { content: ''; position: absolute; right: 24px; bottom: -13px; border: 10px solid transparent; border-top: 14px solid var(--white); border-right: 16px solid var(--white); border-bottom: 0; }
@keyframes says-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Spam trap field: hidden from people, bots fill it in */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ===== Phone and tablet menu: burger button, panel slides in from the right ===== */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 3; width: 48px; height: 48px; margin-right: -6px; padding: 0; background: none; border: 0; border-radius: 10px; color: var(--white); cursor: pointer; }
  .burger { position: relative; display: block; width: 26px; height: 18px; }
  .burger span { position: absolute; left: 0; width: 100%; height: 3px; border-radius: 3px; background: currentColor; transition: transform .3s ease, opacity .2s ease, top .3s ease; }
  .burger span:nth-child(1) { top: 0; }
  .burger span:nth-child(2) { top: 7.5px; }
  .burger span:nth-child(3) { top: 15px; }
  .nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { top: 7.5px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { top: 7.5px; transform: rotate(-45deg); }

  .nav { position: fixed; z-index: 2; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch; padding: 88px 28px max(28px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background: linear-gradient(rgba(28, 6, 52, .5), rgba(28, 6, 52, .5)), #4B1A8C url(assets/brand-gradient.jpg) center / cover;
    box-shadow: -10px 0 40px rgba(0, 0, 0, .35); transform: translateX(100%); visibility: hidden;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s; }
  .nav.open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a:not(.btn) { display: flex; align-items: center; min-height: 58px; padding: 0; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 5.6vw, 23px); white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--yellow); border-bottom-color: rgba(255, 255, 255, .2); }
  .nav-links .btn { justify-content: center; margin-top: 26px; min-height: 54px; font-size: 18px; }
  .nav-links > * { opacity: 0; transform: translateX(24px); transition: opacity .25s ease-out, transform .3s ease-out; }
  .nav.open .nav-links > * { opacity: 1; transform: none; }
  .nav.open .nav-links > :nth-child(1) { transition-delay: .08s; }
  .nav.open .nav-links > :nth-child(2) { transition-delay: .12s; }
  .nav.open .nav-links > :nth-child(3) { transition-delay: .16s; }
  .nav.open .nav-links > :nth-child(4) { transition-delay: .2s; }
  .nav.open .nav-links > :nth-child(5) { transition-delay: .24s; }
  .nav.open .nav-links > :nth-child(6) { transition-delay: .28s; }
  .nav.open .nav-links > :nth-child(7) { transition-delay: .32s; }
  .nav-logo { display: block; align-self: center; margin-top: auto; padding-top: 32px; }
  .nav-logo img { height: 64px; width: auto; }

  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1; background: rgba(12, 4, 20, .55); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  .nav-backdrop.show { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
  html.menu-open { overflow: hidden; }
}

/* ===== Phones and tablets: inner heroes are the text plus a zoomed-in Quizmo peeking up from the bottom corner ===== */
@media (max-width: 900px) {
  .page-hero { --qh: 300px; --peek: 178px; --qx: -14px; position: relative; height: auto; }
  .page-hero .wrap { display: block; height: auto; padding-top: 30px; padding-bottom: calc(var(--peek) + 14px); }
  .page-hero .says { position: static; }
  .page-hero .says .hero-quizmo { position: absolute; right: var(--qx); bottom: calc(var(--peek) - var(--qh)); height: var(--qh); width: auto; max-width: none; }
  .page-hero .says-bubble { left: max(18px, calc((100% - 1200px) / 2)); right: auto; bottom: 62px; width: auto; max-width: min(250px, 47%); padding: 11px 14px; font-size: 15px; line-height: 1.3;
    border-radius: 14px; filter: drop-shadow(0 4px 0 var(--ink)); transform-origin: 100% 50%; z-index: 1; }
  .page-hero .says-bubble::after { right: -14px; left: auto; bottom: calc(50% - 9px); border: 9px solid transparent; border-left: 16px solid var(--white); border-right: 0; }
  /* per pose: how far he sits off the right edge, so his face and props stay in view */
  .says-party { --qx: -64px; }
  .says-headset { --qx: -34px; }
  .says-detective { --qx: -22px; }
  .says-landlord { --qx: -30px; }
  .says-app { --qx: -6px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .page-hero { --qh: 380px; --peek: 220px; }
  .page-hero .says-bubble { font-size: 17px; bottom: 80px; }
}

/* ===== Header: logo shrinks and the bar slims down once you scroll ===== */
.site-header .wrap { transition: min-height .3s ease; }
.site-header .logo { display: block; line-height: 0; }
.site-header .logo img { transition: height .3s ease; }
.site-header.scrolled .wrap { min-height: 66px; }
.site-header.scrolled .logo img { height: 44px; }
@media (max-width: 900px) {
  /* Phones and tablets: big centred logo at the top, burger on the right */
  .site-header .wrap { position: relative; justify-content: center; min-height: 96px; padding-block: 8px; }
  .site-header .logo img { height: 70px; }
  .nav-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: -6px; }
  .site-header.scrolled .wrap { min-height: 60px; padding-block: 4px; }
  .site-header.scrolled .logo img { height: 42px; }
  .nav { padding-top: 104px; }
}

/* ===== Home hero on phones and tablets: zoomed-in Quizmo peeking from the bottom right ===== */
@media (max-width: 900px) {
  .hero .wrap { gap: 0; }
  .hero .stage { height: 430px; margin-top: 22px; }
  .hero .stage .hero-quizmo { left: auto; right: -28px; bottom: -118px; height: 370px; }
  .hero .bubble { left: 0; right: auto; top: 0; width: min(340px, 86%); transform-origin: 80% 100%; }
  .hero .bubble::after { left: auto; right: 44px; border-left-color: transparent; border-right: 18px solid var(--white); }
  .hero .podium { left: 0; right: auto; width: min(340px, 86%); }
  .hero .stage.results .bubble { opacity: 0; transform: scale(.9); }
  .hero .stage.results .podium { top: 0; bottom: auto; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero .stage { height: 470px; }
  .hero .stage .hero-quizmo { right: 4%; bottom: -150px; height: 470px; }
  .hero .bubble, .hero .podium { width: 420px; }
}

/* What you play: Quizmo beside the rounds on desktop, nothing on phones and tablets */
.play-quizmo { height: 460px; width: auto; justify-self: center; align-self: center; }
@media (max-width: 900px) { .play-quizmo { display: none; } }

/* Find a quiz on phones: no boxed card, search and button on one row, filters scroll edge to edge */
.finder-row .clear[hidden] { display: none; }
.staff-login { white-space: nowrap; }
@media (max-width: 600px) {
  .finder-section { padding-top: 26px; }
  .finder { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; gap: 14px; }
  .finder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
  .finder-row .field { grid-column: 1; }
  .finder-row .field input { background: var(--white); border-color: var(--ink); min-height: 52px; }
  .finder-row .btn { grid-column: 2; min-height: 52px; padding: 0 18px; box-shadow: none; border-radius: 8px; }
  .finder-row .clear { grid-column: 1 / -1; justify-self: start; min-height: 40px; padding: 0; border: 0; background: none; color: var(--pink-dark); font-weight: 800; text-decoration: underline; }
  .finder-row .clear:hover { background: none; }
  .chips { gap: 8px; }
  .chip { min-height: 42px; padding: 0 14px; font-size: 15px; }
  .towns { margin-top: 0; gap: 6px; }
  .towns button { min-height: 42px; padding: 0 12px; font-size: 14px; }
  .finder-layout { margin-top: 22px; }
}

/* Alton Systems credit, matching the Zest site */
.credit-bar { background: #fff; border-top: 1px solid #E6E1EA; padding: 4px 16px; display: flex; justify-content: center; line-height: 1; }
.credit-bar a { display: inline-flex; align-items: center; gap: 5px; font: 400 8px/1 var(--body); letter-spacing: .08em; color: #081C3F; text-decoration: none; }
.credit-bar a:hover { text-decoration: underline; color: #081C3F; }
.credit-bar img { width: auto; height: 10px; }

/* Privacy policy, website terms and the not found page */
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 24px; }
.legal h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 32px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { margin: 10px 0 0; padding-left: 22px; }
.actions-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }