@import url('/css/fonts.css');
@import url('/css/scroll-edge.css');

:root {
  --cream:#fff; --paper:#fff; --ink:#302820; --muted:#77716a;
  --copper:#b75d35; --copper-dark:#954626; --forest:#35271f; --white:#fff; --line:#dedbd3;
  --sans:'DM Sans',system-ui,-apple-system,Arial,sans-serif;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:122px; -webkit-text-size-adjust:100% }
body { margin:0; color:var(--ink); background:var(--cream); font:400 15px/1.65 var(--sans); -webkit-font-smoothing:antialiased }
body.public-site { touch-action:pan-x pan-y }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
a { color:inherit; text-decoration:none }
img { display:block; max-width:100% }
svg { display:block; width:24px; height:24px; flex:none }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent }
:focus-visible { outline:2px solid var(--copper); outline-offset:5px }
[hidden],[data-content]:empty { display:none!important }
.wrap { width:min(1160px,calc(100% - 80px)); margin-inline:auto }
.skip-link { position:fixed; top:10px; left:10px; z-index:500; padding:12px 20px; background:var(--ink); color:white; transform:translateY(-160%) }
.skip-link:focus { transform:none }

/* Shared navigation */
.site-header { position:sticky; z-index:50; top:16px; display:flex; align-items:center; gap:32px; width:min(1280px,calc(100% - 48px)); height:88px; margin:20px auto 24px; padding:8px 30px; border-radius:8px; background:#fffffffa; box-shadow:0 5px 25px #30282010 }
.brand { display:flex; align-items:center; flex:none }
.brand-logo { width:216px; height:66px; object-fit:cover }
.main-nav { display:flex; align-items:center; gap:30px; margin-left:auto }
.main-nav a { position:relative; padding:12px 0; font-size:13px; font-weight:500; white-space:nowrap; transition:color .2s ease }
.main-nav a > span { display:inline-block }
.main-nav a::after { content:''; position:absolute; bottom:7px; left:0; width:0; height:1px; background:currentColor; pointer-events:none; transition:width .2s }
.main-nav a:hover::after,.main-nav a[aria-current=page]::after { width:100% }
.header-action { display:inline-flex; align-items:center; gap:16px; font-size:13px; font-weight:500; white-space:nowrap; padding-left:30px; transition:color .2s ease }
.header-action svg { width:18px; height:18px }
.main-nav a:hover,.main-nav a:focus-visible,.header-action:hover,.header-action:focus-visible { color:var(--copper) }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .main-nav a > span,.main-nav a::after,.header-action > span,.header-action > svg { transform:translate3d(var(--nav-cursor-x,0px),var(--nav-cursor-y,0px),0); transition:transform .35s cubic-bezier(.2,.8,.2,1) }
  .main-nav a::after { transition:width .2s,transform .35s cubic-bezier(.2,.8,.2,1) }
}
.menu-toggle { display:none; width:48px; height:48px; padding:10px 7px; border:0; background:none }
.menu-toggle span { display:block; height:2px; width:29px; margin:7px auto; background:var(--ink) }
.menu-toggle span:nth-child(2) { width:23px; margin-right:3px }
.menu-toggle span:nth-child(3) { display:none }
.mobile-menu-layer { display:none }
.button { display:inline-flex; justify-content:center; align-items:center; gap:14px; min-height:44px; padding:11px 22px; border:1px solid transparent; border-radius:3px; font-size:12px; font-weight:600; line-height:1.4; text-align:center; transition:background .2s,color .2s }
.button svg { width:18px; height:18px }
.button-copper { background:var(--copper); color:white }
.button-copper:hover { background:var(--copper-dark) }
.button-dark { background:var(--ink); color:white }
.button-dark:hover { background:#514338 }
.button-light { background:var(--paper); color:var(--ink) }
.button-outline { color:white; border-color:#fff7; background:transparent }
.button-outline:hover { background:#ffffff16 }
.button-outline-dark { border-color:var(--line); background:none }
.button:disabled { cursor:wait; opacity:.5 }
.text-link { display:inline-flex; align-items:center; gap:14px; padding-bottom:4px; border-bottom:1px solid currentColor; font-size:13px; font-weight:500; line-height:1.4 }
.text-link svg { width:17px; height:17px; transition:transform .2s }
.text-link:hover svg { transform:translateX(4px) }

/* Images and copy have independent, fixed positions in the compact banner. */
.hero { width:min(1280px,calc(100% - 48px)); margin-inline:auto }
.hero-visual { position:relative; isolation:isolate; overflow:hidden; height:390px; color:#fffdf8; background:#493326; border-radius:5px; touch-action:pan-y }
.hero-visual::before,.hero-visual::after { content:''; position:absolute; inset:0; background-color:#493326; background-position:center; background-repeat:no-repeat; background-size:cover; pointer-events:none }
.hero-visual::after { z-index:-2; background-image:var(--banner-image,none); opacity:1 }
.hero-visual::before { z-index:-1; background-image:var(--incoming-banner-image,none); opacity:0; transition:none }
@media(min-width:761px) {
  .hero-visual::after { background-size:var(--banner-image-fit,cover); background-color:var(--banner-image-color,#493326) }
  .hero-visual::before { background-size:var(--incoming-banner-image-fit,cover); background-color:var(--incoming-banner-image-color,#493326) }
}
.hero-visual.is-switching::before { opacity:1; transition:opacity .18s ease }
.hero-video-wrap { position:absolute; z-index:0; inset:0; opacity:0; pointer-events:none; transition:opacity .18s ease }
.hero-video-wrap.is-ready { opacity:1 }
.hero-video { display:block; width:100%; height:100%; object-fit:cover }
.hero-video-wrap.is-shaded::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0000001a,#00000065 40%,#00000065 60%,#0000001a) }
@media(min-width:761px) { .hero-video { object-fit:var(--hero-video-fit,cover) } }
.hero-video-play { position:absolute; z-index:4; top:50%; left:50%; transform:translate(-50%,-50%); min-height:44px; padding:11px 20px; border:0; border-radius:6px; background:var(--copper); color:#fff; font-size:13px; font-weight:600 }
.hero-content { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; grid-template-rows:22px 154px 28px 44px; gap:9px; align-items:center; width:min(880px,83%); height:275px; text-align:center }
.hero .eyebrow { display:none }
.hero h1 { grid-row:2; margin:0; font:700 clamp(62px,6.6vw,90px)/.89 var(--display); letter-spacing:-.015em; text-transform:uppercase; text-wrap:balance }
.hero-copy { grid-row:3; margin:0 auto; max-width:58ch; font-size:13px; color:#f1e6dd; line-height:1.5 }
.hero-actions { grid-row:4; display:flex; align-items:center; justify-content:center; gap:12px; min-width:0 }
.hero-actions .button { max-width:48%; min-width:0 }
.hero-action-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.is-switching .hero-content { animation:copy-fade .18s ease }
@keyframes copy-fade { from { opacity:.85 } to { opacity:1 } }
.carousel-controls { position:absolute; z-index:3; inset:0; pointer-events:none }
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:50px; height:60px; padding:0; border:0; background:none; color:#fff9; font:300 48px/1 Arial,sans-serif; pointer-events:auto }
.carousel-arrow:hover { color:white }
#previousSlide { left:17px }
#nextSlide { right:17px }
.carousel-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:2px; pointer-events:auto }
.carousel-dot { position:relative; width:24px; height:24px; padding:0; border:0; background:none }
.carousel-dot::after { content:''; position:absolute; inset:9px; border-radius:50%; background:#ffffff60; transition:background .2s }
.carousel-dot.active::after { background:white }
.carousel-pause { position:absolute; z-index:3; right:19px; bottom:13px; width:28px; height:28px; padding:0; border:0; background:none; color:#fff9; font-size:11px }

/* Three shortcuts, without nested boxes. */
.quick-links { position:relative; display:grid; grid-template-columns:repeat(var(--quick-columns,3),minmax(0,1fr)); margin-top:0 }
.quick-links::after { content:''; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent); pointer-events:none }
.quick-card { display:flex; justify-content:center; align-items:center; gap:15px; min-width:0; margin-block:26px; padding:0 20px }
.quick-card + .quick-card { border-left:1px solid var(--line) }
.quick-symbol { color:var(--copper); flex:none }
.quick-symbol svg { width:25px; height:25px }
.quick-card strong { display:block; font-size:14px; font-weight:500; line-height:1.5; transition:color .2s }
.quick-card:hover strong { color:var(--copper) }
.quick-card small { display:block; font-size:11px; color:var(--muted); margin-top:2px }

/* Shared content hierarchy */
.section { padding-block:82px }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:37px }
.section-heading > div { min-width:0 }
.section-heading h2 { margin:0; font:500 clamp(33px,3.5vw,46px)/1.12 var(--sans); letter-spacing:-.045em; white-space:pre-line; overflow-wrap:anywhere }
#menuTitle,#footballTitle,#visitTitle { font-size:clamp(25px,2.35vw,31px) }
.section-intro { max-width:330px; margin:0 0 3px; color:var(--muted); font-size:14px; line-height:1.65 }
.section-label { display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; color:var(--muted); font-size:10px }
.section-label:has([data-content]:empty) { display:none }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--copper) }
.football-empty,.empty-card { padding:25px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.empty-illustration { display:none }
.football-empty h3,.empty-card h3 { margin:0; font:400 18px/1.5 var(--sans); letter-spacing:-.02em }
.football-empty p,.empty-card p { color:var(--muted); font-size:13px; margin:8px 0 0; max-width:550px }
.football-empty p:empty,.empty-card p:empty { display:none }
.football-empty > div:last-child { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 25px }
.football-empty p { flex-basis:100%; order:3 }
.football-empty .text-link { font-size:12px }

/* Football scoreboard */
.football-section > .section-heading { flex-direction:column; align-items:center; gap:10px; text-align:center }
.football-section > .section-heading .section-label { justify-content:center }
.football-section > .section-heading .section-intro { max-width:540px; margin:0 }
.football-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:25px }
.segmented-control { display:flex; align-items:center; gap:24px }
.segmented-control button { padding:8px 0; border:0; border-bottom:1px solid transparent; background:none; color:var(--muted); font-size:12px; font-weight:500 }
.segmented-control button[aria-pressed=true] { color:var(--ink); border-bottom-color:var(--ink) }
.football-update { font-size:10px; color:var(--muted) }
.match-grid { position:relative; display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding-block:5px 15px; cursor:grab; touch-action:pan-x pan-y pinch-zoom }
.match-grid::-webkit-scrollbar { display:none }
.match-grid > .match-card { flex:0 0 calc((100% - 36px)/3); scroll-snap-align:start }
.match-grid.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none }
.match-grid.is-pointer-focus:focus { outline:none }
.match-grid:focus-visible { outline-offset:4px; border-radius:14px }
.match-grid img { -webkit-user-drag:none; user-select:none }
.match-card { position:relative; isolation:isolate; display:flex; flex-direction:column; min-width:0; min-height:356px; padding:25px 21px 18px; border:1px solid #e8e6e1; border-radius:14px; background:#fff; box-shadow:0 8px 24px #30282006; transition:transform .3s ease,box-shadow .3s ease }
.match-card::before { content:''; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(ellipse at 50% 34%,#e8c3a92e,transparent 64%) }
.match-card.is-live { box-shadow:0 8px 28px #3028200d }
.match-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:24px; margin-bottom:30px }
.match-competition { font-size:11px; font-weight:500; color:var(--muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.match-status { display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:500; max-width:55%; text-align:right }
.is-live .match-status { color:var(--copper-dark); padding:4px 9px; border-radius:20px; background:#fff0e6 }
.is-live .match-status::before { content:''; width:6px; height:6px; flex:none; border-radius:50%; background:var(--copper); animation:live-pulse 2s ease infinite }
@keyframes live-pulse { 50% { opacity:.35 } }
.match-teams { display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); align-items:start; gap:6px }
.match-team { display:flex; flex-direction:column; align-items:center; gap:15px; min-width:0; text-align:center }
.team-crest { display:grid; place-items:center; width:76px; height:76px; color:var(--copper-dark); font:600 26px var(--display); transition:transform .35s ease }
.team-crest img { max-width:70px; max-height:70px; object-fit:contain; filter:drop-shadow(0 5px 6px #30282014) }
.match-team strong { font-size:14px; font-weight:600; line-height:1.4; min-height:40px; overflow-wrap:anywhere }
.match-score { padding-top:15px; text-align:center; font:700 46px/1 var(--display); letter-spacing:-.025em; font-variant-numeric:tabular-nums; white-space:nowrap }
.is-live .match-score { color:var(--copper-dark) }
.match-score.is-upcoming { padding-top:29px; color:#a49b92; font:500 14px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase }
.match-date { margin:21px 0 18px; font-size:12px; color:var(--muted); text-align:center }
.match-score-unavailable { margin:-7px 0 18px; font-size:11px; color:var(--muted); text-align:center }
.match-countdown { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:20px; padding:0 }
.countdown-part { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0 }
.countdown-part b { display:block; width:100%; padding:12px 2px 11px; border-radius:8px; background:#2b2927; color:#fff; text-align:center; font:600 35px/1 var(--display); letter-spacing:.015em; font-variant-numeric:tabular-nums }
.countdown-number { display:block }
.countdown-part:last-child b { background:#b56b43 }
.countdown-part small { font-size:9px; color:var(--muted); margin-top:7px }
.countdown-message { grid-column:1/-1; color:var(--muted); font-size:11px; text-align:center; padding:10px 0 }
.match-note { font-size:12px; color:var(--muted); white-space:pre-line; margin:8px 0 18px }
.match-card-bottom { display:flex; justify-content:center; align-items:center; gap:15px; margin-top:auto; border-top:1px solid #eee8e1; padding-top:14px; font-size:10px; color:var(--muted) }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .match-card:hover { transform:translateY(-5px); box-shadow:0 16px 32px #30282012 }
  .match-card:hover .match-team:first-child .team-crest { transform:translateY(-3px) rotate(-5deg) }
  .match-card:hover .match-team:last-child .team-crest { transform:translateY(-3px) rotate(5deg) }
}
.calendar-button { display:inline-flex; align-items:center; gap:6px; border:0; padding:0; background:none; color:var(--ink); font-size:10px }
.calendar-button:hover { color:var(--copper) }
.calendar-button svg { width:14px; height:14px }
.match-data-source { color:var(--muted); font-size:10px; margin:17px 0 0 }

/* Horizontally browsable drinks, with native touch scrolling. */
.menu-section { background:#fff }
.menu-section.section { padding-top:clamp(38px,4.6vw,58px) }
.menu-section .section-heading { display:block; text-align:center; margin-bottom:19px }
.menu-intro { max-width:600px; margin:-9px auto 22px; text-align:center }
.menu-layout { display:block; min-width:0 }
.menu-pdf-action { display:flex; justify-content:center; margin-top:25px }
.menu-pdf-action:has(.menu-pdf-button[hidden]) { display:none }
.menu-pdf-button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; max-width:165px; padding:9px 18px; border:0; border-radius:6px; background:var(--copper); color:#fff; font-size:11px; font-weight:600; line-height:1.4; text-align:center; transition:background .2s }
.menu-pdf-button:hover { background:var(--copper-dark) }
/* Cutout products float above a white base, with space for the hover movement. */
.drink-track { position:relative; display:flex; align-items:stretch; gap:16px; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:2px; scrollbar-width:none; padding:18px 2px 16px; cursor:grab; -webkit-overflow-scrolling:touch }
.drink-track::-webkit-scrollbar { display:none }
.drink-track:focus-visible { outline-offset:4px }
.drink-track.is-pointer-focus:focus { outline:none }
.drink-track.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none }
.drink-card { position:relative; isolation:isolate; flex:0 0 clamp(224px,23vw,280px); aspect-ratio:1; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:visible; scroll-snap-align:start }
.drink-card::before { content:''; position:absolute; z-index:-1; inset:21% 0 0; border:1px solid #efeeeb; border-radius:18px; background:#fff; box-shadow:0 5px 14px #30282008; pointer-events:none }
.drink-media { position:relative; z-index:1; flex:1; min-height:0; margin:0 14px }
.drink-photo { position:absolute; top:-8px; left:0; display:block; width:100%; height:calc(100% + 12px); object-fit:contain; transform:scale(1.08); transform-origin:50% 62%; filter:drop-shadow(0 7px 5px #30282012); transition:transform .55s cubic-bezier(.22,.75,.25,1); pointer-events:none }
.drink-photo-group { position:absolute; top:-8px; left:0; display:grid; grid-template-columns:repeat(var(--drink-image-count,2),minmax(0,1fr)); align-items:end; gap:5px; width:100%; height:calc(100% + 12px); transform:scale(1.08); transform-origin:50% 62%; filter:drop-shadow(0 7px 5px #30282012); transition:transform .55s cubic-bezier(.22,.75,.25,1); pointer-events:none }
.drink-variant-photo { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; object-position:center bottom }
.drink-photo-group--longdrink { grid-template-columns:1.15fr .85fr; gap:0; transform:none; padding-inline:5px }
.drink-photo-group--longdrink .drink-variant-photo:first-child { height:76%; align-self:end }
.drink-photo-group--longdrink .drink-bottle { object-fit:contain; object-position:center bottom }
.drink-photo-group--longdrink .drink-bottle.is-square-packshot { object-fit:cover }
.drink-details { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 20px 20px; text-align:center }
.drink-info { width:100%; min-width:0 }
.drink-name { margin:0; font:600 27px/1.08 var(--display); letter-spacing:-.015em; overflow-wrap:anywhere; text-wrap:balance }
.drink-price { font:500 17px/1.4 var(--sans); letter-spacing:-.025em; font-variant-numeric:tabular-nums; white-space:nowrap }
.drink-size { display:block; color:#8c8982; font-size:10px; line-height:1.4; overflow-wrap:anywhere }
@media(min-width:761px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .drink-track:not(.is-dragging) .drink-card:hover :is(.drink-photo,.drink-photo-group) { transform:translateY(-3px) rotate(35deg) scale(1.08) }
  .drink-track:not(.is-dragging) .drink-card:hover .drink-photo-group--longdrink { transform:translateY(-3px) rotate(5deg) }
}
.menu-layout .empty-card { padding-block:25px }
.menu-footnote { margin:17px 0 0; color:var(--muted); font-size:10px; line-height:1.7; text-align:center }
.hero-visual.has-banner-image .hero-content { text-shadow:0 2px 18px #0009 }
.hero-visual.has-banner-image .button { text-shadow:none }

/* Flat offer posters */
.offers-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:24px }
.offer-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; min-width:0; background:#b75d35; color:#fffaf2; padding:31px }
.offer-card:nth-child(3n+2) { background:#e8dfd0; color:var(--ink) }
.offer-card:nth-child(3n+3) { background:#493326 }
.offer-badge { font-size:10px; font-weight:500; padding-bottom:5px; border-bottom:1px solid currentColor }
.offer-image { width:100%; height:180px; object-fit:cover; margin-top:25px }
.offer-deal { margin:30px 0 18px; font:700 clamp(66px,6.4vw,88px)/.9 var(--display); letter-spacing:-.025em }
.offer-card > .offer-deal:first-child { margin-top:0 }
.offer-card h3 { margin:0 0 12px; font:500 23px/1.15 var(--sans); letter-spacing:-.035em; overflow-wrap:anywhere }
.offer-description { margin:0 0 24px; font-size:13px; line-height:1.7; white-space:pre-line; opacity:.85; overflow-wrap:anywhere }
.offer-pricing { display:flex; align-items:baseline; gap:14px; width:100%; margin-top:auto; padding-top:12px }
.offer-total { font:500 30px/1.1 var(--sans); letter-spacing:-.04em }
.offer-regular { font-size:14px; opacity:.65 }
.offer-savings { margin-top:11px; font-size:12px }
.offer-free-price { font-size:23px; font-weight:500; margin:5px 0 0 }
.offer-validity { width:100%; margin-top:24px; padding-top:17px; border-top:1px solid #ffffff45 }
.offer-card:nth-child(3n+2) .offer-validity { border-color:#30282035 }
.offer-clock { display:block; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums }
.offer-limits { display:block; font-size:10px; opacity:.75; margin-top:4px }

/* Opening hours beside the embedded map; map comes first on phones. */
#homeSections > .section:has(+ .visit-section:not([hidden])) { padding-bottom:36px }
.visit-section.section { padding-top:32px }
.visit-section > .section-heading { flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:25px }
.visit-section > .section-heading .section-intro { max-width:540px; margin:0 }
.visit-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); grid-template-areas:"map hours"; align-items:stretch; gap:clamp(32px,5vw,68px) }
.visit-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; padding:6px 0; text-align:left }
.visit-hours { grid-area:hours }
.visit-hours .opening-hours { align-items:flex-start }
.visit-hours .opening-hours-time { justify-content:flex-start }
.visit-card h3 { font:500 16px/1.4 var(--sans); letter-spacing:-.02em; margin:0 0 12px; overflow-wrap:anywhere }
.opening-hours { display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; color:var(--ink) }
.opening-hours-line { font-size:13px; line-height:1.7; white-space:pre-line; color:var(--muted) }
.opening-hours-time { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:6px; font:500 25px/1.25 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.opening-hours-time small { font-size:12px; letter-spacing:0; font-weight:400; color:var(--muted) }
.opening-status { display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:12px; font-size:10px; line-height:1.6 }
.opening-status-line { display:flex; align-items:center; flex-wrap:wrap; gap:9px }
.opening-status-label { display:inline-flex; align-items:center; gap:7px; color:#80766c }
.opening-status-label::before { content:''; width:5px; height:5px; flex:none; border-radius:50%; background:#a79c91 }
.opening-status.is-open .opening-status-label { color:#4a6d55 }
.opening-status.is-open .opening-status-label::before { background:#5d8464 }
.opening-status.is-soon .opening-status-label { color:var(--copper-dark) }
.opening-status.is-soon .opening-status-label::before { background:var(--copper) }
.opening-countdown { min-width:56px; color:var(--copper-dark); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.025em }
.opening-status-detail { padding-left:12px; color:var(--muted); font-size:10px }
.visit-hours .opening-status { width:100%; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:5px 8px }
.visit-hours .opening-status-line { justify-content:flex-start }
.visit-hours .opening-status-detail { padding-left:0 }
.visit-hours .opening-status-detail::before { content:'·'; margin-right:8px }
.visit-location { width:100%; margin-top:27px }
.visit-location h4 { font:500 14px/1.4 var(--sans); margin:0 0 8px }
.visit-card p { color:var(--muted); font-size:13px; line-height:1.7; white-space:pre-line; margin:0 0 18px }
.visit-card .text-link { color:var(--copper-dark); font-size:12px }
.visit-route-button { display:inline-flex; min-width:160px; min-height:42px; padding:10px 22px; border-radius:6px; font-size:12px }
.visit-map { grid-area:map; min-width:0; min-height:350px; margin:0; border:0; border-radius:10px; overflow:hidden; background:#f5f5f2 }
.visit-map iframe { display:block; width:100%; height:100%; min-height:350px; border:0 }
.map-consent { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:350px; height:100%; padding:30px; text-align:center; background:#f7f7f4; color:#403e39 }
.map-consent strong { font-size:17px; font-weight:600 }
.map-consent p { max-width:320px; margin:0; font-size:12px; line-height:1.65; color:#77746f }
.map-consent-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px }
.map-consent button { min-height:38px; padding:10px 15px; border:0; border-radius:6px; background:var(--copper); color:#fff; font:600 12px/1.4 var(--sans); cursor:pointer }
.map-consent button:hover { background:var(--copper-dark) }
.map-consent a { color:#6a6660; font-size:11px; text-decoration:underline; text-underline-offset:3px }
.map-consent[hidden], iframe[data-map-src][hidden], [data-map-enabled=false] .mobile-map-view { display:none!important }
@media(max-width:760px) {
  .visit-map .map-consent { min-height:260px; padding:24px }
  .mobile-menu-map .map-consent { min-height:145px; padding:13px; gap:6px }
  .mobile-menu-map .map-consent strong { font-size:13px }
  .mobile-menu-map .map-consent p { font-size:10px; line-height:1.4 }
  .mobile-menu-map .map-consent-actions { gap:5px 10px }
  .mobile-menu-map .map-consent button { min-height:30px; padding:6px 10px; font-size:10px }
  .mobile-menu-map .map-consent a { font-size:10px }
}

/* Three questions, with native keyboard-accessible disclosure controls. */
.faq-section { display:flex; flex-direction:column; align-items:center; gap:28px; padding-bottom:80px }
.faq-section h2 { width:100%; margin:0; text-align:center; font:500 clamp(29px,3vw,38px)/1.15 var(--sans); letter-spacing:-.045em }
.faq-content { width:min(780px,100%); min-width:0 }
.faq-item { border-bottom:1px solid var(--line) }
.faq-item:first-child { border-top:1px solid var(--line) }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:79px; padding:23px 0; color:var(--ink); cursor:pointer; list-style:none; font-size:16px; font-weight:500; line-height:1.5 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::marker { content:'' }
.faq-toggle { position:relative; width:16px; height:16px; flex:none; color:#8c8176 }
.faq-toggle::before,.faq-toggle::after { content:''; position:absolute; top:7px; left:1px; width:14px; height:1.5px; border-radius:1px; background:currentColor }
.faq-toggle::after { transform:rotate(90deg); transition:transform .2s }
.faq-item[open] .faq-toggle::after { transform:rotate(0) }
.faq-answer { padding:0 35px 25px 0 }
.faq-answer p { margin:0; color:var(--muted); font-size:14px; line-height:1.85; white-space:pre-line; overflow-wrap:anywhere }
.faq-contact { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:17px; padding-top:30px; text-align:center }
.faq-contact h3 { margin:0; font:500 20px/1.3 var(--sans); letter-spacing:-.03em }
.faq-contact p { margin:8px 0 0; color:var(--muted); font-size:13px; white-space:pre-line }
.faq-contact .button { flex:none; border-radius:5px }

/* Aligned footer columns, a black wordmark and a plain copyright line. */
.site-footer { background:#fff; border-top:1px solid #e8e5df }
.footer-top { display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:50px; padding-block:56px 44px }
.footer-brand .brand-logo { filter:brightness(0) saturate(100%); width:245px; height:75px; margin:-18px 0 0 -20px }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; color:#77716a; font-size:12px; line-height:1.65 }
.footer-links h3 { font:500 12px/1.4 var(--sans); color:var(--ink); margin:0 0 13px }
.footer-links a,.footer-links span { overflow-wrap:anywhere }
.footer-links a:hover,.footer-legal a:hover { color:var(--copper) }
#footerAddress { white-space:pre-line }
.footer-utility { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:21px; border-top:1px solid #e8e5df }
.footer-legal { display:flex; align-items:center; gap:27px; font-size:11px; color:var(--muted) }
.footer-admin { font-size:10px; color:#9d9790 }
.footer-admin:hover { color:var(--ink) }
.footer-copyright { display:flex; justify-content:center; gap:4px; padding-block:7px 25px; color:#9a948c; font-size:10px }
.bottom-notice { position:fixed; z-index:70; right:22px; bottom:22px; display:flex; align-items:center; gap:26px; max-width:min(380px,calc(100% - 32px)); padding:20px 23px; border-left:3px solid var(--copper); background:#fffefa; box-shadow:0 8px 50px #30282026 }
.bottom-notice small { color:var(--copper); font-size:9px; font-weight:500; letter-spacing:.1em }
.bottom-notice p { font-size:13px; margin:6px 0 0 }
.bottom-notice button { border:0; background:none; color:var(--muted); font:300 28px system-ui }
.load-error { font-size:13px; color:#a3442a; padding:18px 0; margin-block:20px }

/* Form and legal-page primitives */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.field { display:flex; flex-direction:column; gap:8px; min-width:0 }
.field > span { color:var(--muted); font-size:12px; font-weight:500 }
.field input,.field select,.field textarea { min-width:0; width:100%; border:1px solid var(--line); border-radius:3px; padding:13px 14px; background:var(--paper); color:var(--ink); font-size:14px }
.field textarea { resize:vertical }
.field-wide { grid-column:1/-1 }
.legal-page-main { min-height:65vh }
.legal-page-main > h1 { font:500 clamp(44px,5vw,70px)/1.1 var(--sans); letter-spacing:-.045em; margin:0 0 45px }
.legal-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px }
.legal-card { min-width:0; padding-block:25px; border-top:1px solid var(--line); scroll-margin-top:125px }
.legal-card h2 { font:500 24px var(--sans); letter-spacing:-.03em; margin:0 0 20px }
.legal-card p { font-size:14px; line-height:1.85; color:var(--muted); white-space:pre-line; overflow-wrap:anywhere }
.legal-card .button { margin-top:14px }

@media(min-width:1600px) { .hero-visual { height:420px } }
@media(max-width:1100px) {
  .site-header { gap:22px; padding-inline:22px }
  .brand-logo { width:195px }
  .main-nav { gap:23px }
  .header-action { padding-left:22px }
  .wrap { width:calc(100% - 64px) }
  .footer-top { gap:30px; grid-template-columns:1.2fr .8fr 1fr }
  .footer-brand .brand-logo { width:215px; height:70px; margin-left:-18px }
}
@media(max-width:900px) {
  .header-action { display:none }
  .hero-visual { height:360px }
  .hero-content { height:260px; grid-template-rows:22px 140px 26px 44px; gap:9px }
  .hero h1 { font-size:76px }
  .quick-card { gap:12px; padding-inline:13px }
  .quick-card strong { font-size:12px }
  .quick-card small { font-size:10px }
  .section { padding-block:68px }
  .section-intro { max-width:265px; font-size:13px }
  .match-grid { gap:14px }
  .match-grid > .match-card { flex-basis:calc((100% - 28px)/3) }
  .match-teams { grid-template-columns:minmax(0,1fr) 65px minmax(0,1fr) }
  .match-team strong { font-size:12px }
  .match-score { font-size:40px }
  .footer-top { grid-template-columns:1fr 1fr; gap:34px }
  .footer-brand { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between }
  .footer-brand .brand-logo { margin-top:-12px }
}
@media(max-width:760px) {
  html { scroll-padding-top:105px }
  .site-header { top:12px; width:calc(100% - 28px); height:72px; margin:14px auto 16px; padding:7px 16px; border-radius:7px }
  .brand-logo { width:186px; height:58px }
  .main-nav { display:none }
  .menu-toggle { display:block; margin-left:auto }
  .mobile-menu-layer { position:fixed; inset:0; z-index:100; display:block; visibility:hidden; pointer-events:none; transition:visibility 0s linear .5s }
  .mobile-menu-layer.is-open { visibility:visible; pointer-events:auto; transition-delay:0s }
  .mobile-menu-scrim { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#211a1480; opacity:0; transition:opacity .4s }
  .is-open .mobile-menu-scrim { opacity:1 }
  .mobile-menu { position:absolute; inset:0 0 0 auto; display:flex; flex-direction:column; width:min(84vw,420px); height:100dvh; padding:calc(env(safe-area-inset-top) + 22px) 26px calc(env(safe-area-inset-bottom) + 26px); border-radius:24px 0 0 24px; background:var(--paper); transform:translateX(105%); transition:transform .5s cubic-bezier(.16,1,.3,1); overflow-y:auto; overscroll-behavior:contain }
  .is-open .mobile-menu { transform:translateX(0) }
  .mobile-menu-head { display:flex; align-items:center; justify-content:space-between; gap:12px }
  .mobile-menu-brand { min-width:0 }
  .mobile-menu-brand .brand-logo { width:clamp(140px,44vw,190px); height:60px; margin-left:-13px }
  .mobile-menu-close { width:40px; height:44px; flex:none; display:grid; place-items:center; border:0; padding:0; background:none; font:300 38px/1 system-ui; color:var(--ink) }
  .mobile-menu-nav { display:flex; flex-direction:column; gap:10px; margin-top:46px }
  .mobile-menu-nav a { padding:9px 0 }
  .mobile-menu-nav strong { font:400 clamp(24px,6vw,31px)/1.2 var(--sans); letter-spacing:-.04em; overflow-wrap:anywhere }
  .mobile-menu-nav a:hover { color:var(--copper) }
  .mobile-menu-map { position:relative; width:100%; min-height:145px; margin-top:23px; border-radius:12px; overflow:hidden; flex:none; background:#eeece8 }
  .mobile-menu-map iframe { display:block; width:100%; height:145px; border:0 }
  .mobile-map-view { position:absolute; bottom:26px; left:9px; min-height:34px; padding:0 11px; border:1px solid #0000000f; border-radius:7px; background:#fff; color:#302820; box-shadow:0 2px 9px #0003; font:500 11px/1 var(--font-body,system-ui,sans-serif); cursor:pointer }
  .mobile-map-view:hover { background:#f5f4f2 }
  .mobile-menu-bottom { display:flex; flex-direction:column; align-items:stretch; gap:19px; margin-top:auto; padding-top:26px; text-align:center }
  .mobile-menu-hours h3 { margin:0 0 7px; color:var(--ink); font-size:12px; font-weight:500 }
  .mobile-menu-hours p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; white-space:pre-line }
  .mobile-menu-hours .opening-status { align-items:center; margin-top:12px }
  .mobile-menu-hours .opening-status-detail { padding-left:0 }
  .mobile-menu-image { width:100%; aspect-ratio:16/10; max-height:180px; margin:0; border-radius:12px; overflow:hidden }
  .mobile-menu-image img { width:100%; height:100%; object-fit:cover }
  .mobile-menu-caption { color:#a29588; font-size:10px }
  .mobile-menu-open { overflow:hidden }
  .hero { width:calc(100% - 28px) }
  .hero-visual { height:310px; border-radius:3px }
  .hero-content { height:236px; grid-template-rows:18px 118px 27px 40px; gap:9px }
  .hero .eyebrow { font-size:8px }
  .hero h1 { font-size:67px }
  .hero-copy { font-size:12px }
  .hero-actions .button { min-height:40px; padding:9px 18px; font-size:11px }
  .section-heading { gap:30px }
  .footer-top { gap:30px }
}
@media(max-width:620px) {
  .wrap { width:calc(100% - 40px) }
  .site-header { height:68px }
  .brand-logo { width:174px; height:54px }
  .hero-visual { height:226px }
  .hero-content { width:calc(100% - 36px); height:168px; grid-template-rows:0 86px 29px 35px; gap:5px }
  .hero .eyebrow { display:none }
  .hero h1 { font-size:clamp(40px,11.5vw,59px); line-height:.9; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
  .hero-copy { font-size:10px; max-width:40ch; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
  .hero-actions { gap:9px }
  .hero-actions .button { min-height:34px; padding:8px 13px; font-size:10px }
  .carousel-arrow { display:none }
  .carousel-dots { bottom:5px }
  .carousel-dot { width:22px; height:22px }
  .carousel-dot::after { inset:8px }
  .carousel-pause { right:7px; bottom:2px }
  .quick-card { flex-direction:column; gap:9px; padding:0 6px; margin-block:22px; text-align:center }
  .quick-symbol svg { width:22px; height:22px }
  .quick-card strong { font-size:11px; line-height:1.4 }
  .quick-card small { display:none }
  .section { padding-block:51px }
  .section-heading { align-items:flex-start; flex-direction:column; gap:13px; margin-bottom:25px }
  .section-heading h2 { font-size:clamp(30px,8.1vw,40px); line-height:1.15 }
  .section-intro { max-width:100%; font-size:12px }
  .football-empty,.empty-card { padding-block:23px }
  .football-empty h3,.empty-card h3 { font-size:16px }
  .football-empty > div:last-child { gap:13px; align-items:flex-start; flex-direction:column }
  .football-empty .text-link { font-size:11px }
  .football-toolbar { align-items:flex-start; flex-direction:column; gap:9px; margin-bottom:15px }
  .segmented-control { gap:25px }
  .segmented-control button { font-size:11px }
  .football-update { font-size:9px }
  .football-update:empty { display:none }
  .match-grid { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding-block:5px 15px }
  .match-grid::-webkit-scrollbar { display:none }
  .match-grid .match-card { flex:0 0 min(82%,338px); min-height:372px; padding:24px 18px 18px; scroll-snap-align:start }
  .match-card { padding-block:20px 17px }
  .match-card-top { margin-bottom:28px }
  .match-teams { grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr) }
  .team-crest { width:72px; height:72px }
  .team-crest img { max-width:66px; max-height:66px }
  .match-team strong { font-size:14px }
  .match-score { padding-top:14px; font-size:43px }
  .match-score.is-upcoming { padding-top:28px; font-size:13px }
  .match-countdown { padding-bottom:0; gap:6px; margin-bottom:19px }
  .countdown-part b { font-size:34px }
  .match-date { margin:21px 0 18px; font-size:11px }
  .menu-section .section-heading { margin-bottom:19px }
  .offers-grid { grid-template-columns:1fr; gap:18px }
  .offer-card { padding:27px }
  .offer-deal { font-size:80px }
  .offer-card h3 { font-size:23px }
  .offer-description { font-size:12px }
  .footer-top { grid-template-columns:1fr 1fr; gap:31px 27px; padding-block:35px 29px }
  .footer-brand { grid-column:1/-1; flex-direction:row; gap:15px }
  .footer-brand .brand-logo { width:190px; height:62px; margin:-8px 0 0 -16px }
  .footer-links { font-size:12px; gap:7px }
  .footer-links h3 { font-size:12px; margin-bottom:8px }
  .footer-utility { gap:18px; align-items:flex-start; padding-block:20px }
  .footer-legal { flex-wrap:wrap; gap:8px 16px; font-size:10px }
  .footer-admin { font-size:9px; white-space:nowrap; padding-top:1px }
  .footer-copyright { font-size:9px; padding-block:6px 23px }
  .bottom-notice { bottom:16px; right:16px; padding:17px 20px }
  .legal-grid { grid-template-columns:1fr; gap:25px }
  .legal-card p { font-size:13px }
  .form-grid { grid-template-columns:1fr }
  .field-wide { grid-column:1 }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 32px) }
  .hero-visual { height:214px }
  .hero-content { height:164px; grid-template-rows:0 82px 29px 34px }
  .hero h1 { font-size:39px }
  .hero-actions .button { padding-inline:11px; font-size:9px }
  .quick-card strong { font-size:10px }
  .quick-card { padding-inline:4px }
  .footer-brand .brand-logo { width:170px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important }
}

@media(max-width:760px) {
  #menuTitle,#footballTitle,#visitTitle { font-size:25px }
  .menu-section .section-heading { gap:12px }
  .menu-pdf-button { max-width:135px; padding:9px 11px; font-size:10.5px }
}
@media(max-width:620px) {
  .menu-section .section-heading { margin-bottom:14px }
  .drink-track { gap:12px; margin-right:-20px; padding-right:20px; scroll-padding-inline:0 }
  .drink-card { flex-basis:clamp(208px,60vw,244px) }
  .drink-card::before { border-radius:15px }
  .drink-details { gap:5px; padding:14px 16px 17px }
  .drink-name { font-size:24px }
  .drink-price { font-size:16px }
  .drink-size { font-size:10px }
}
@media(max-width:360px) { .drink-track { margin-right:-16px; padding-right:16px }#menuTitle,#footballTitle,#visitTitle { font-size:24px } }

@media(max-width:1000px) { .visit-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }.faq-section { gap:35px; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) } }
@media(max-width:760px) {
  #homeSections > .section:has(+ .visit-section:not([hidden])) { padding-bottom:24px }
  .visit-section.section { padding-top:24px }
  .visit-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"map" "hours"; gap:29px }
  .visit-map { min-height:0; margin:0 }
  .visit-map iframe { height:260px; min-height:0 }
  .visit-card { padding:0; align-items:center; text-align:center }
  .visit-hours .opening-hours { align-items:center }
  .visit-hours .opening-hours-time,.visit-hours .opening-status,.visit-hours .opening-status-line { justify-content:center }
  .visit-card h3 { font-size:15px; margin-bottom:12px }
  .opening-hours-time { font-size:24px }
  .opening-hours-line { font-size:12px }
  .visit-location { margin-top:24px }
  .visit-card p { font-size:13px }
  .faq-section { grid-template-columns:minmax(0,1fr); gap:25px; padding-bottom:55px }
  .faq-section h2 { font-size:30px }
  .faq-item summary { min-height:75px; padding-block:22px; gap:20px; font-size:14px }
  .faq-answer { padding-right:20px }
  .faq-answer p { font-size:13px }
  .faq-contact { align-items:center; flex-direction:column; gap:18px; padding-top:26px }
  .faq-contact h3 { font-size:19px }
}
@media(max-width:360px) { .visit-map iframe { height:240px }.opening-hours-time { font-size:23px } }

.match-tv-link { flex:none; text-decoration:underline; text-underline-offset:3px }

.hero-visual.has-light-controls .carousel-arrow,.hero-visual.has-light-controls .carousel-pause { color:#302820b3 }
.hero-visual.has-light-controls .carousel-dot::after { background:#30282050 }
.hero-visual.has-light-controls .carousel-dot.active::after { background:var(--copper) }