/* =============================================================================
   Reids of Henley - base.css (shared by every page). Mobile-first.
   Breakpoints (min-width): 768 tablet, 1025 desktop (desktop nav appears).

   COMPONENT CATALOGUE (see work/IMPLEMENTATION-NOTES.md)
   Layout:   .container  .container--narrow (700 text block)  .container--hero (500)
             .section  .section--paper (#f5f5f5)  .section--dark (#1c1c1c)  .section--tight
             .section-head (centred eyebrow + h2 group)
   Type:     .eyebrow (13px tracked label)  .h2 (Playfair 45px section title, any heading level)
             .h2--sans (Roboto 500 title for dark bands)  .lead (20px)  .text-center  .sr-only
   Buttons:  .btn  + .btn--outline-light (hero) | .btn--dark (Amiko) | .btn--black
   Hero:     .hero (+ __media picture, __overlay, __inner, __mark, __title, __subtitle)
             modifiers: .hero--home (tall, 566) | .hero--page (interior, 382)
   Chrome:   .site-header .site-nav .nav__* .nav-toggle .site-footer(--ruled) .skip-link
   CTA band: .cta-section (white wrapper, set padding in page css) > .cta-band (1120 max, 433 tall, dark
             photo banner) with __media (picture), __inner, __title (h2), __text (p), .btn.btn--outline-light.
             Page CSS may set --cta-pad-t/--cta-pad-b on .cta-section. Used by our-story, less-plastic-scheme,
             opening-hours (and available to others).
   Prose:    .prose (672px centred reading column, drop cap on first paragraph; font set per page)
   Utility:  .table-scroll (overflow-x wrapper)  .ext-link (external-link anchor)
   Page-specific styles go in css/{slug}.css (loaded via extraCss in work/pages/{slug}.json).
   ============================================================================= */

/* ---- Fonts (self-hosted, latin subset, swap) ---- */
@font-face{font-family:"Mulish";font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/mulish-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/mulish-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/mulish-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/mulish-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Mulish";font-style:normal;font-weight:900;font-display:swap;src:url("../assets/fonts/mulish-latin-900-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/playfair-display-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amiko";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/amiko-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/roboto-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/roboto-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/roboto-slab-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Tokens ---- */
:root {
  --c-white: #fff; --c-paper: #f5f5f5; --c-ink: #363636; --c-navy: #263844; --c-slate: #3c4858;
  --c-body-muted: #6a6a6a; --c-nav: #555; --c-band-dark: #1c1c1c; --c-footer: #313437;
  --c-footer-text: #e2e3e3; --c-footer-rule: #5a5d5f; --c-rule-on-dark: rgba(255,255,255,.24);
  --c-rule: #e5e5e5; --c-black: #000; --c-star: #ffc800; --c-overlay: rgba(0,0,0,.61);

  --ff-sans: "Mulish", "Muli", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-alt: "Montserrat", "Mulish", Helvetica, Arial, sans-serif;
  --ff-button: "Amiko", "Mulish", Helvetica, Arial, sans-serif;
  --ff-roboto: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-slab: "Roboto Slab", Rockwell, Georgia, serif;

  --fs-hero: clamp(2.5rem, 1.734rem + 3.268vw, 4.0625rem);
  --fs-h2: clamp(2.1875rem, 0.897rem + 2.688vw, 2.8125rem);
  --fs-counter: clamp(4rem, -0.5rem + 14.6vw, 10.3125rem);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 10px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 32px; --sp-8: 40px; --sp-9: 50px; --sp-10: 60px; --sp-11: 80px; --sp-12: 100px;
  --flow: 20px;

  --container: 1140px;
  --gutter: 16px;
  --header-h: 70px;
  --section-pad-y: clamp(3.5rem, 2rem + 4vw, 6rem);

  --shadow-header: 0 1px 10px -6px rgba(0,0,0,.42), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
  --shadow-drop: 0 10px 30px rgba(0,0,0,.12);
  --shadow-card-hover: 0 0 60px 0 rgba(0,0,0,.09);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1025px) { :root { --gutter: 30px; } }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body { margin: 0; font: 400 1rem/1.6 var(--ff-sans); color: var(--c-ink); background: var(--c-white); -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { body { font-size: 1.125rem; line-height: 1.556; } }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 3px; }
.hero :focus-visible, .section--dark :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Utilities ---- */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 200; background: #fff; color: var(--c-ink); padding: 12px 18px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-drop); }
.skip-link:focus { top: 8px; }
.table-scroll { overflow-x: auto; }

/* ---- Layout ---- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(700px + 2 * var(--gutter)); }
.container--narrow, .container--hero { margin-inline: auto; }
.container--hero { max-width: calc(500px + 2 * var(--gutter)); }
.section { padding-block: var(--section-pad-y); }
.section--paper { background: var(--c-paper); }
.section--dark { background: var(--c-band-dark); color: #fff; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }
.section-head { text-align: center; }

/* ---- Type ---- */
.eyebrow { font: 700 13px/1.4 var(--ff-sans); letter-spacing: 2.5px; text-transform: uppercase; }
.h2 { font: 700 var(--fs-h2)/1.22 var(--ff-display); letter-spacing: -1.5px; color: var(--c-ink); }
.h2--sans { font: 500 clamp(1.625rem, 1.4rem + 0.9vw, 2rem)/1.2 var(--ff-roboto); letter-spacing: 0; color: #fff; }
.lead { font-size: 1.125rem; line-height: 1.75rem; }
@media (min-width: 768px) { .lead { font-size: 1.25rem; line-height: 2rem; } }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 0; text-decoration: none; text-align: center; border: 2px solid transparent; transition: none; }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background-color .2s, color .2s, border-color .2s; } }
.btn--outline-light { font: 500 18px/1 var(--ff-alt); color: #fff; border-color: #fff; background: transparent; padding: 18px 40px; }
.btn--outline-light span { display: block; }
.btn--outline-light:hover { background: #fff; color: var(--c-ink); }
.btn--dark { font: 600 14px/1.2 var(--ff-button); letter-spacing: 2px; text-transform: uppercase; color: #fff; background: var(--c-ink); padding: 20px 40px; }
.btn--dark:hover { background: #000; }
.btn--black { font: 500 16px/1.3 var(--ff-sans); text-transform: uppercase; color: #fff; background: #000; padding: 12px 24px; }
.btn--black:hover { background: var(--c-ink); }

/* ---- Hero (shared; .hero--home 566px tall, .hero--page interior 382px) ---- */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-align: center; background: var(--c-ink); }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media { z-index: -2; }
.hero__media img { object-fit: cover; object-position: center; }
.hero__overlay { position: absolute; inset: 0; z-index: -1; background: var(--c-overlay); }
.hero__inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
.hero__mark { width: 72px; height: auto; }
.hero__title { font: 700 var(--fs-hero)/1.05 var(--ff-display); letter-spacing: -1.5px; color: #fff; }
.hero__subtitle { font: 700 13px/1.4 var(--ff-sans); letter-spacing: 2.5px; text-transform: uppercase; }
.hero--home { min-height: 480px; padding: 62px 0 60px; }
.hero--page { min-height: clamp(240px, 32vw, 382px); padding-block: 40px; }
@media (min-width: 768px) { .hero--home { min-height: 0; padding: 72px 0 110px; } }

/* ---- CTA band: "The Reids Club" banner (our-story, less-plastic-scheme, opening-hours) ---- */
.cta-section { padding: var(--cta-pad-t, 56px) var(--gutter) var(--cta-pad-b, 56px); background: #fff; }
.cta-band { position: relative; isolation: isolate; max-width: 1120px; margin-inline: auto; overflow: hidden; color: #fff; background: #000; }
.cta-band__media, .cta-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta-band__media { z-index: -2; }
.cta-band__media img { object-fit: cover; object-position: center 70%; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(0,0,0,.82), rgba(0,0,0,.6)); }
.cta-band__inner { padding: 44px 24px 48px; }
.cta-band__title { font: 700 clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem)/1.1 var(--ff-display); letter-spacing: -1.5px; color: #fff; }
.cta-band__text { max-width: 720px; margin-top: 18px; font: 300 1.0625rem/1.55 var(--ff-sans); }
.cta-band .btn { margin-top: 28px; }
@media (min-width: 768px) {
  .cta-band__inner { padding: 64px 48px 68px; }
  .cta-band__text { font-size: 1.25rem; line-height: 32px; }
  .cta-band .btn { margin-top: 30px; min-width: 237px; min-height: 61px; }
}
@media (min-width: 1025px) { .cta-band__inner { padding: 100px 210px; } }
@media (max-width: 480px) { .cta-band .btn { width: 100%; max-width: 280px; padding-inline: 16px; } }

/* ---- Prose: centred reading column with a 2-line drop cap ---- */
.prose { max-width: 672px; margin-inline: auto; }
.prose p + p { margin-top: 10px; }
.prose > p:first-child::first-letter { float: left; margin: .02em 10px 0 0; font-size: 3.5em; line-height: .82; color: var(--c-navy); }

/* ---- Header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: #fff; box-shadow: var(--shadow-header); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.site-header__logo { display: block; margin-left: 0; flex: none; line-height: 0; }
.site-header__logo img { width: 126px; height: 47px; }
.nav-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; position: relative; }
.js .nav-toggle { display: block; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--c-ink); content: ""; }
.nav-toggle__bars { top: 21px; }
.nav-toggle__bars::before { left: 0; top: -7px; }
.nav-toggle__bars::after { left: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle__bars::before, .nav-toggle__bars::after { transition: top .2s, transform .2s; }
}

/* mobile / tablet nav panel (<1025) */
.site-nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; background: #fff; border-top: 1px solid #eee; box-shadow: var(--shadow-header); }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
.nav__list { display: block; margin: 0; padding: 0; list-style: none; }
.nav__item { border-bottom: 1px solid #eee; }
.nav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 var(--gutter); background: none; border: 0; text-align: left; font: 400 16px/1 var(--ff-sans); text-transform: uppercase; color: var(--c-nav); text-decoration: none; }
.nav__link:hover, .nav__link[aria-current="page"] { color: #000; }
.nav__caret { width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__sub { margin: 0; padding: 0; list-style: none; background: var(--c-paper); }
.js .nav__sub { display: none; }
.js .nav__toggle[aria-expanded="true"] + .nav__sub { display: block; }
.nav__sublink { display: flex; align-items: center; min-height: 48px; padding: 0 calc(var(--gutter) + 16px); font: 400 15px/1 var(--ff-sans); text-transform: uppercase; color: var(--c-nav); text-decoration: none; }
.nav__sublink:hover, .nav__sublink[aria-current="page"] { color: #000; background: #ececec; }
/* no-JS: static expanded list below the logo */
@media (max-width: 1024.98px) {
  .no-js .site-header { position: static; height: auto; }
  .no-js .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 11px 0; }
  .no-js .site-nav { position: static; width: 100%; max-height: none; box-shadow: none; margin-top: 11px; }
  .no-js .nav__toggle .nav__caret { display: none; }
}

/* desktop nav (>=1025) */
@media (min-width: 1025px) {
  .site-header__logo { margin-left: 11px; }
  .nav-toggle, .js .nav-toggle { display: none; }
  .site-nav, .js .site-nav { display: block; position: static; max-height: none; overflow: visible; background: none; border: 0; box-shadow: none; }
  .nav__list { display: flex; align-items: center; margin-right: -7px; }
  .nav__item { position: relative; border: 0; }
  .nav__link { width: auto; min-height: var(--header-h); padding: 0 15px; justify-content: flex-start; font-size: 15px; }
  .nav__link:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .nav__sub, .js .nav__sub { position: absolute; top: 100%; left: 0; min-width: 230px; padding: 8px 0; background: #fff; box-shadow: var(--shadow-drop); display: none; }
  .nav__item--has-sub:hover > .nav__sub, .js .nav__toggle[aria-expanded="true"] + .nav__sub, .no-js .nav__item--has-sub:focus-within > .nav__sub { display: block; }
  .nav__sublink { min-height: 44px; padding: 0 20px; font-size: 14px; letter-spacing: .5px; }
}

/* ---- Footer ---- */
.site-footer { background: var(--c-footer); color: var(--c-footer-text); text-align: center; padding: 30px 0 38px; }
.site-footer__mark { width: 72px; height: auto; margin: 0 auto; }
.site-footer--ruled .site-footer__mark { margin-bottom: 40px; }
.site-footer--ruled .site-footer__nav { border-top: 1px solid var(--c-footer-rule); padding-top: 0; }
.site-footer__nav ul { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.site-footer__nav a { display: block; padding: 12px 8px; font: 400 15px/24px var(--ff-sans); text-transform: uppercase; text-decoration: none; color: var(--c-footer-text); }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer__copy { margin-top: 18px; font: 300 15px/1.4 var(--ff-roboto); text-transform: uppercase; }
@media (min-width: 480px) {
  .site-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; }
  .site-footer__nav a { padding: 15px 0; }
}
@media (min-width: 768px) {
  .site-footer__nav ul { column-gap: 34px; }
  .site-footer__nav a { font-size: 16px; }
  .site-footer__nav { margin-top: 0; }
  .site-footer__copy { text-align: right; margin-top: 25px; }
}
/* eight links in one row inside the 1140px container */
@media (min-width: 1025px) { .site-footer__nav ul { column-gap: 22px; } .site-footer__nav a { font-size: 15px; } }

/* ---- Scroll reveal (classes added by main.js): subtle slide-up pop-in (left items appear first, via per-element delay set in main.js) ---- */
.reveal { opacity: 0; transform: translate3d(0, 34px, 0); }
.reveal-in { animation: reveal-in .9s cubic-bezier(.22, .68, .2, 1) var(--reveal-delay, 0ms) backwards; }
@keyframes reveal-in { from { opacity: 0; transform: translate3d(0, 34px, 0); } }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-in { opacity: 1; transform: none; animation: none; } }