/* ==========================================================================
   TASTE SOUTH AFRIKA
   Food • Heritage • Culture
   --------------------------------------------------------------------------
   Design system derived from the supplied logo and reference frames.

   Colour discipline:
     green  → primary branding, CTAs, navigation accents
     gold   → highlights, premium accents, small labels
     red    → selective editorial emphasis only
     forest → luxury sections, image overlays, footer
     ivory  → content surfaces and breathing space

   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout
     05  Patterns & ornament
     06  Buttons & links
     07  Header / navigation
     08  Hero
     09  Section furniture
     10  Cards
     11  Province selector
     12  Scroll sequence
     13  Editorial bands
     14  Impact
     15  Newsletter
     16  Forms
     17  Footer
     18  Article
     19  Motion
     20  Responsive
   ========================================================================== */

/* 01  TOKENS ------------------------------------------------------------- */

:root {
  --green: #006b45;
  --green-deep: #04452e;
  --green-bright: #0a8354;
  --gold: #f2b313;
  --gold-soft: #f7cf63;
  /* Brand gold is 1.87:1 on ivory — far below AA. This darkened gold keeps the
     hue and passes 4.5:1 on both ivory and white, and is used for any gold
     TEXT or UI element sitting on a light surface. Pure gold stays for dark
     surfaces and for fills (where the text on top is ink). */
  --gold-ink: #8d6708;
  --red: #e5242a;
  --ink: #111111;
  --ivory: #f7f3eb;
  --ivory-deep: #efe8db;
  --forest: #071a14;
  --forest-soft: #0d2a20;

  --surface: #ffffff;
  --body: #3f453f;
  --body-muted: #6b716b;
  --body-invert: rgba(255, 255, 255, 0.78);
  --hairline: rgba(17, 17, 17, 0.1);
  --hairline-invert: rgba(255, 255, 255, 0.16);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  --radius-card: 14px;
  --radius-media: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px -12px rgba(17, 17, 17, 0.12);
  --shadow-lift: 0 2px 4px rgba(17, 17, 17, 0.05), 0 24px 44px -20px rgba(17, 17, 17, 0.22);
  --shadow-nav: 0 1px 0 rgba(17, 17, 17, 0.06), 0 10px 30px -22px rgba(17, 17, 17, 0.5);

  --shell: 1600px;
  --gutter: 1.25rem;
  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: 3.5rem; --nav-h: 92px; }
}
@media (min-width: 1536px) {
  :root { --gutter: 4.5rem; }
}

/* 02  RESET & BASE ------------------------------------------------------- */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
svg { display: block; max-width: 100%; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

/*
  A single-colour focus ring cannot clear 3:1 on both ivory and forest. Pairing
  the gold ring with a dark halo means one of the two always contrasts.
*/
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(7, 26, 20, 0.55);
  border-radius: 4px;
}

::selection { background: var(--gold); color: var(--ink); }

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--green);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* 03  TYPOGRAPHY --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.display-xl { font-size: clamp(3.25rem, 8.6vw, 7.25rem); line-height: 0.92; }
.display-lg { font-size: clamp(2.75rem, 6.2vw, 5.25rem); line-height: 0.95; }
.display-md { font-size: clamp(2.125rem, 4.2vw, 3.5rem);  line-height: 1.02; }
.display-sm { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.12; }
.display-xs { font-size: clamp(1.25rem, 1.8vw, 1.5rem);   line-height: 1.2;  }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--gold-ink);
  margin: 0;
}
.section--forest .eyebrow,
.section--green .eyebrow,
.hero .eyebrow,
.band .eyebrow,
.newsletter .eyebrow { color: var(--gold); }
.eyebrow--green { color: var(--green); }
.eyebrow--light { color: rgba(255, 255, 255, 0.72); }
.eyebrow--ink   { color: var(--ink); }

.lede {
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.68;
  color: var(--body);
}

.measure       { max-width: 62ch; }
.measure-tight { max-width: 46ch; }
.measure-wide  { max-width: 76ch; }

/* The handwritten editorial marks from the reference frames */
.script {
  font-family: var(--font-script);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: #fff;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}
.script--ink { color: var(--ink); }
.script--sm  { font-size: clamp(1.375rem, 1.8vw, 1.75rem); }

.rule-gold::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: 1rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
}
.rule-gold--center::after { margin-inline: auto; }

/* Multi-colour wordmark treatment: Taste / South / Afrika */
.wm-white { color: #fff; }
.wm-gold  { color: var(--gold); }
.wm-red   { color: var(--red); }
.wm-ink   { color: var(--ink); }

/* 04  LAYOUT ------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 1180px; }

.section        { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--flush-top { padding-top: 0; }

.section--ivory  { background: var(--ivory); }
.section--forest { background: var(--forest); color: var(--body-invert); }
.section--green  { background: var(--green-deep); color: var(--body-invert); }

.section--forest h1, .section--forest h2, .section--forest h3, .section--forest h4,
.section--green  h1, .section--green  h2, .section--green  h3, .section--green  h4 { color: #fff; }
/* Light cards inside a dark section keep dark type. */
.section--forest .card, .section--green .card { color: var(--body); }
.section--forest .card :is(h1, h2, h3, h4),
.section--green  .card :is(h1, h2, h3, h4) { color: var(--ink); }

.grid { display: grid; gap: clamp(1rem, 1.8vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.stack > * + * { margin-top: 1.25rem; }
.stack-sm > * + * { margin-top: 0.75rem; }
.stack-lg > * + * { margin-top: 2rem; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}

/* 05  PATTERNS & ORNAMENT ------------------------------------------------ */

/*
  Restrained South African geometric motif. Rendered as a CSS gradient stack
  rather than imagery so it stays crisp, weightless and easy to re-colour.
*/
.pattern-edge {
  position: absolute;
  inset-block: 0;
  width: 34px;
  pointer-events: none;
  opacity: 0.9;
  z-index: 2;
  background-image:
    linear-gradient(135deg, var(--gold) 25%, transparent 25%),
    linear-gradient(225deg, var(--red) 25%, transparent 25%),
    linear-gradient(315deg, var(--green-bright) 25%, transparent 25%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%);
  background-size: 34px 34px;
  background-position: 0 0, 0 0, 17px 17px, 17px 17px;
}
.pattern-edge--left  { left: 0; }
.pattern-edge--right { right: 0; }
.pattern-edge--muted { opacity: 0.22; }

/* Fine chevron band used as a section divider */
.pattern-band {
  height: 10px;
  background-image: repeating-linear-gradient(
    115deg,
    var(--green) 0 14px,
    var(--gold) 14px 24px,
    var(--red) 24px 30px,
    var(--forest) 30px 44px
  );
}
.pattern-band--thin { height: 5px; opacity: 0.9; }

/* Soft watermark motif for ivory sections */
.pattern-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image:
    repeating-linear-gradient(45deg, var(--green) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 22px);
}

/* Vertical keyword rail from the reference frames */
.rail {
  position: absolute;
  right: calc(34px + clamp(0.75rem, 1.6vw, 1.75rem));
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 0.55rem;
  z-index: 3;
}
.rail li {
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.rail li:last-child::after {
  content: "";
  display: block;
  margin-left: auto;
  width: 26px;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--gold);
}

/* 06  BUTTONS & LINKS ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.8125rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: var(--shadow-card); }

.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-bright); transform: translateY(-2px); box-shadow: var(--shadow-card); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #2b2b2b; transform: translateY(-2px); }

.btn--outline { border-color: var(--hairline); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--green); color: var(--green); }

/* Sits directly on photos, so it carries its own frosted dark fill to stay
   legible whatever is behind it. */
.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
  background: rgba(12, 16, 14, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.btn--outline-light:hover { border-color: #fff; background: #fff; color: var(--ink); text-shadow: none; transform: translateY(-2px); }
.hero .btn--gold,
.hero .btn--green { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }

.btn--play { padding-left: 0.4375rem; }
.btn--play .btn__disc {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex: none;
}
.btn--play .btn__disc svg { width: 11px; height: 11px; }
.btn--play:hover .btn__disc svg { transform: none; }

.btn--block { width: 100%; }

/* Small inline "Explore →" link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  padding-block: 0.25rem;
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.link-arrow:hover { gap: 0.75rem; }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow--gold  { color: var(--gold-ink); }
.section--forest .link-arrow--gold,
.section--green .link-arrow--gold,
.hero .link-arrow--gold { color: var(--gold); }
.link-arrow--red   { color: var(--red); }
.link-arrow--light { color: #fff; }

/* Circular arrow affordance used on cards */
.arrow-disc {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex: none;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              transform 0.35s var(--ease);
}
.arrow-disc svg { width: 15px; height: 15px; }
.arrow-disc--gold { color: var(--gold-ink); }
.tile .arrow-disc--gold,
.dish .arrow-disc--gold,
.section--forest .arrow-disc--gold,
.section--green .arrow-disc--gold { color: var(--gold); }
.arrow-disc--light { color: #fff; }

/* 07  HEADER / NAVIGATION ------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow 0.4s var(--ease), background-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-nav);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  min-height: var(--nav-h);
}

.nav__logo { flex: none; display: block; }
.nav__logo img {
  height: clamp(40px, 4.2vw, 58px);
  width: auto;
}

.nav__menu {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  margin-inline: auto;
}
.nav__link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
  padding-block: 0.5rem;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover { color: var(--green); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--green); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.nav__icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__icon-btn:hover { background: var(--ivory); color: var(--green); }
.nav__icon-btn svg { width: 20px; height: 20px; }

.nav__cta { display: none; }

/* Hamburger */
.nav__burger { display: grid; }
.nav__burger-lines { display: block; }
.nav__burger-label { display: none; }
.nav__burger-lines span {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.nav__burger-lines span + span { margin-top: 5px; }

/* Fullscreen mobile menu */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--forest);
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.55s var(--ease), visibility 0.55s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--hairline-invert);
}
.mobile-nav__top img { height: 42px; width: auto; }
.mobile-nav__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-invert);
  border-radius: 50%;
  background: transparent;
  color: #fff;
}
.mobile-nav__close svg { width: 18px; height: 18px; }

.mobile-nav__list {
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter);
  display: grid;
  gap: 0.25rem;
  flex: 1;
}
.mobile-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.16;
  color: #fff;
  padding-block: 0.375rem;
  transition: color 0.3s var(--ease), padding-left 0.35s var(--ease);
}
.mobile-nav__list a::before {
  content: attr(data-index);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--gold);
  flex: none;
}
.mobile-nav__list a:hover,
.mobile-nav__list a[aria-current="page"] { color: var(--gold); padding-left: 0.5rem; }

.mobile-nav__foot {
  padding: 0 var(--gutter) clamp(2rem, 6vw, 3rem);
  display: grid;
  gap: 1.25rem;
}
.mobile-nav__foot .btn { width: 100%; }
.mobile-nav__tagline {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

body.is-locked { overflow: hidden; }

/* Search overlay */
.search-panel {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(7, 26, 20, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: start center;
  padding: clamp(4rem, 14vh, 10rem) var(--gutter) 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.search-panel.is-open { opacity: 1; visibility: visible; }
.search-panel__inner { width: min(760px, 100%); }
.search-panel__field {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 1rem;
}
.search-panel__field input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  padding: 0;
}
.search-panel__field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.search-panel__field input:focus { outline: none; }
.search-results { margin-top: 2rem; display: grid; gap: 0.25rem; }
.search-results a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--hairline-invert);
  color: #fff;
  transition: padding-left 0.3s var(--ease), color 0.3s var(--ease);
}
.search-results a:hover { padding-left: 0.5rem; color: var(--gold); }
.search-results__title { font-family: var(--font-display); font-size: 1.375rem; }
.search-results__kind {
  font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); flex: none;
}
.search-empty {
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
}

/* 08  HERO --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  background: var(--forest);
  overflow: hidden;
  isolation: isolate;
}
.hero--tall { min-height: 92vh; }
.hero--short { min-height: 62vh; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* No colour wash on the photograph: a neutral shade sits only behind the
     copy on the left so the text and buttons stay readable on bright photos. */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.12) 68%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 16%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 30%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(3.5rem, 9vw, 6rem);
}
.hero__copy { max-width: 46rem; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.hero__copy .btn--gold,
.hero__copy .btn--green { text-shadow: none; }
.hero__copy .eyebrow { color: rgba(255, 255, 255, 0.75); }
.hero__title {
  color: #fff;
  margin-top: 1.125rem;
  font-size: clamp(3rem, 7.6vw, 6.25rem);
  line-height: 0.94;
}
.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.24;
  color: #fff;
  margin-top: 1.5rem;
  max-width: 24ch;
}
.hero__text {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1.25rem;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.72;
}
.hero__actions { margin-top: 2.25rem; }

/* Handwritten mark, right of the hero */
.hero__script {
  display: none;
  position: absolute;
  z-index: 3;
  right: clamp(7rem, 13vw, 13rem);
  top: 28%;
  text-align: center;
  transform: rotate(-4deg);
}
.hero__script-sub {
  margin-top: 1.75rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  line-height: 2;
  transform: rotate(4deg);
}

/* Feature indicators along the hero base */
.hero__features {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 46rem;
}
.hero__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}
.hero__feature svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.hero__feature span {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Location stamp, bottom right of hero */
.hero__stamp {
  position: absolute;
  z-index: 3;
  right: calc(34px + clamp(1rem, 2vw, 2rem));
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hero__stamp svg { width: 13px; height: 13px; color: var(--gold); }

/* Short laptop viewports: let the hero breathe without overflowing the fold. */
@media (max-height: 880px) and (min-width: 1024px) {
  .hero__inner { padding-block: clamp(2rem, 4vw, 3rem); }
  .hero__title { font-size: clamp(2.75rem, 6vw, 5rem); }
  .hero__sub { font-size: clamp(1.375rem, 2vw, 1.75rem); margin-top: 1.125rem; }
  .hero__text { margin-top: 1rem; }
  .hero__actions { margin-top: 1.5rem; }
  .hero__features { margin-top: 2rem; }
}

/* 09  SECTION FURNITURE -------------------------------------------------- */

.section-head { display: grid; gap: 1.25rem; }
.section-head__title { margin-top: 0.5rem; }
.section-head__text { color: var(--body-muted); max-width: 52ch; }
.section--forest .section-head__text,
.section--green .section-head__text { color: rgba(255, 255, 255, 0.66); }

/* Heading left / copy right, the recurring editorial split */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.split--media { align-items: stretch; }

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--ivory-deep);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.media-frame--16x9 { aspect-ratio: 16 / 9; }
.media-frame--4x3  { aspect-ratio: 4 / 3; }
.media-frame--3x2  { aspect-ratio: 3 / 2; }
.media-frame--4x5  { aspect-ratio: 4 / 5; }
.media-frame--1x1  { aspect-ratio: 1 / 1; }
.media-frame--wide { aspect-ratio: 21 / 9; }
.media-frame--tile { aspect-ratio: 7 / 3; }

/* Branded stand-in for any image slot with no file yet */
.media-frame__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(45deg, rgba(0, 107, 69, 0.07) 0 2px, transparent 2px 16px),
    linear-gradient(145deg, var(--forest-soft), var(--forest));
}
.media-frame__placeholder span {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.media-frame__placeholder strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.15;
}

/* Small caption used where imagery is illustrative rather than documentary */
.media-note {
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--body-muted);
  font-style: italic;
}
.section--forest .media-note { color: rgba(255, 255, 255, 0.5); }

/* 10  CARDS -------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.card:hover .media-frame img { transform: scale(1.06); }

.card__media { position: relative; }
.card__body { padding: 1.5rem 1.375rem 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; flex: 1; }
.card__kicker {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}
.card__title { font-size: 1.375rem; line-height: 1.16; }
.card__text { font-size: 0.9375rem; line-height: 1.64; color: var(--body-muted); }
.card__foot { margin-top: auto; padding-top: 1rem; }

/* Whole-card link target without nesting interactive elements */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Icon badge that straddles the image / body boundary */
.card__badge {
  position: absolute;
  left: 1.375rem;
  bottom: -19px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(7, 26, 20, 0.28);
}
.card__badge svg { width: 18px; height: 18px; }
.card__badge--green { background: var(--green); }
.card__badge--gold  { background: var(--gold); color: var(--ink); }
.card__badge--red   { background: var(--red); }
.card__badge--ink   { background: var(--ink); }
.card--badged .card__body { padding-top: 2rem; }

/* Image-led tile with type laid over the photograph */
.tile {
  position: relative;
  display: block;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--forest);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
/* Narrow tiles (five across on desktop) turn taller so the stacked title and
   line of text fit inside the photograph. */
.tile { container-type: inline-size; }
@container (max-width: 320px) {
  .media-frame--tile { aspect-ratio: 4 / 3; }
}
.tile:hover img { transform: scale(1.07); }
.tile img { transition: transform 1.1s var(--ease); }
.tile__scrim {
  position: absolute;
  inset: 0;
  /* Neutral shade under the caption only. */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0) 60%);
}
.tile__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1.25rem 1.125rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
}
.tile__title { display: block; font-family: var(--font-display); font-size: 1.5rem; color: #fff; line-height: 1.1; }
.tile__text { display: block; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); margin-top: 0.3125rem; }
.tile:hover .arrow-disc { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Dish card — compact, photograph-led, dark caption */
.dish {
  position: relative;
  display: block;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--forest-soft);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.dish:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.dish:hover img { transform: scale(1.07); }
.dish img { transition: transform 1.1s var(--ease); }
.dish__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem 1.125rem;
  color: #fff;
}
.dish__name {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.dish__text { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); margin-top: 0.1875rem; }
.dish:hover .arrow-disc { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Person card — portrait beside a pull quote, coloured base rule */
.person {
  display: grid;
  grid-template-columns: minmax(120px, 0.85fr) 1.15fr;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  border-bottom: 3px solid var(--accent, var(--gold));
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.person:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.person__media img { width: 100%; height: 100%; object-fit: cover; }
.person__body { padding: 1.375rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.person__role {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--body-muted);
}
.person__quote {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.34;
  color: var(--ink);
  font-style: italic;
}
.person__name {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.person__place { font-size: 0.8125rem; color: var(--body-muted); }
.person__foot { margin-top: auto; padding-top: 0.5rem; }

/* Story card */
.story__meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--body-muted);
}
.story__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }

/* Restaurant card */
.restaurant__place {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body-muted);
}
.restaurant__place svg { width: 13px; height: 13px; color: var(--green); }

/* 11  PROVINCE SELECTOR -------------------------------------------------- */

.provinces { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* The province tablist scrolls horizontally on small screens without a bar. */
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }

.province-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
}
.province-list li { scroll-snap-align: start; flex: none; }
.province-btn {
  border: 1px solid var(--hairline);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 0.6875rem 1.125rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body-muted);
  min-height: 44px;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.province-btn:hover { border-color: var(--green); color: var(--green); }
.province-btn[aria-selected="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.section--forest .province-btn { border-color: var(--hairline-invert); color: rgba(255,255,255,0.7); }
.section--forest .province-btn:hover { border-color: var(--gold); color: var(--gold); }
.section--forest .province-btn[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.province-panel {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}
.province-panel__media { position: relative; }
.province-panel__facts { display: grid; gap: 1.25rem; }
.province-fact { display: grid; gap: 0.25rem; }
.province-fact dt {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.section--forest .province-fact dt,
.section--green .province-fact dt { color: var(--gold); }
.province-fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
}
.section--forest .province-fact dd { color: #fff; }

/* Cross-fade when the selected province changes */
.province-fade { animation: province-in 0.6s var(--ease) both; }
@keyframes province-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 12  SCROLL SEQUENCE ---------------------------------------------------- */

.sequence { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.sequence__media {
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--forest);
}
.sequence__media figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s var(--ease), transform 1.4s var(--ease);
}
.sequence__media figure.is-active { opacity: 1; transform: none; }
.sequence__media img { width: 100%; height: 100%; object-fit: cover; }

.sequence__steps { display: grid; gap: 0.25rem; }
.sequence__step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.375rem 0;
  border-top: 1px solid var(--hairline-invert);
  opacity: 0.42;
  transition: opacity 0.5s var(--ease);
}
.sequence__step:last-child { border-bottom: 1px solid var(--hairline-invert); }
.sequence__step.is-active { opacity: 1; }
/* Phones read the steps as a plain list, so none of them are dimmed. */
@media (max-width: 767px) {
  .sequence__step { opacity: 1; }
  .sequence__text { color: rgba(255, 255, 255, 0.78); }
}
.sequence__num {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gold);
  padding-top: 0.375rem;
}
.sequence__title { font-size: clamp(1.375rem, 2.2vw, 1.875rem); color: #fff; }
.sequence__text { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.62); margin-top: 0.375rem; }

/* 13  EDITORIAL BANDS ---------------------------------------------------- */

/*
  Full-bleed photographic closing band.

  It needs real height — as a thin letterbox the photograph reads as noise and
  the sticky header clips the eyebrow. The photograph is shown without a
  colour wash.
*/
.band {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  isolation: isolate;
  min-height: clamp(320px, 36vw, 460px);
  display: flex;
  align-items: center;
}
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.band__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Neutral shade, not a colour wash, so the heading and button stay readable. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.45) 100%);
}
.band__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: center;
}
.band__title { color: #fff; margin-top: 0.875rem; }
.band__text {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  margin-top: 1rem;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.7;
}
/* The button column aligns to the heading rather than floating to the top. */
.band__action { display: flex; justify-content: flex-start; }

/* Three-pillar strip */
.pillars {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pillar { display: grid; gap: 0.75rem; justify-items: center; text-align: center; }
.pillar svg { width: 34px; height: 34px; color: var(--green); }
.pillar__label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.pillar__text { font-size: 0.875rem; color: var(--body-muted); }

/* Pull quote */
.pullquote { display: grid; gap: 1.25rem; }
.pullquote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}
.pullquote cite {
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.section--forest .pullquote cite,
.section--green .pullquote cite { color: var(--gold); }
.pullquote__sub {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-muted);
}
.section--forest .pullquote blockquote { color: #fff; }

/* Partner category discs */
.categories { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.category { display: grid; gap: 0.75rem; justify-items: center; text-align: center; }
.category__disc {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
}
.category__disc svg { width: 26px; height: 26px; }
.category__title {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.category__text { font-size: 0.875rem; color: var(--body-muted); }

/* Logo placeholders awaiting approved partner marks */
.logo-wall { display: grid; gap: 1rem; }
.logo-slot {
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-media);
  background: var(--surface);
  padding: 1rem;
  text-align: center;
}
.logo-slot span {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--body-muted);
}
.logo-slot--filled { border-style: solid; background: #fff; }
.logo-slot--filled img { width: 100%; max-width: 160px; height: auto; }

/* Founding partner: a slim strip between sections, plus a footer block. */
.partner-strip {
  border-block: 1px solid var(--hairline);
  background: #fff;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.partner-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
}
.partner-strip__logo { flex: none; }
.partner-strip__logo img { width: clamp(140px, 16vw, 180px); height: auto; }
.partner-strip__copy { flex: 1 1 18rem; display: grid; gap: 0.375rem; }
.partner-strip__copy .eyebrow { margin: 0; }
.partner-strip__text { max-width: 52ch; color: var(--body-muted); }

.footer-partner { display: grid; gap: 0.75rem; justify-items: start; margin-top: 0.5rem; }
.footer-partner__label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
/* Out-ranks the brand-logo sizing and gutter offset in .site-footer__brand img. */
.site-footer__brand .footer-partner img {
  width: 150px;
  height: auto;
  margin-left: 0;
  transition: opacity 0.3s var(--ease);
}
.site-footer__brand .footer-partner:hover img { opacity: 0.85; }

/* 14  IMPACT ------------------------------------------------------------- */

.impact { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.impact__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.metric { display: grid; gap: 0.375rem; }
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.96;
  color: var(--ink);
  font-weight: 600;
}
.metric__label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
}
.metric__note { font-size: 0.8125rem; color: var(--body-muted); line-height: 1.55; }
.section--forest .metric__value,
.section--forest .metric__label { color: #fff; }
.section--forest .metric__note { color: rgba(255, 255, 255, 0.6); }

/* Every projected figure carries this tag — never presented as achieved */
.tag-projected {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  align-self: start;
  justify-self: start;
  width: fit-content;
  border: 1px solid var(--gold-ink);
  border-radius: var(--radius-pill);
  padding: 0.3125rem 0.75rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: rgba(141, 103, 8, 0.07);
}
.section--forest .tag-projected,
.section--green .tag-projected {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(242, 179, 19, 0.1);
}
.tag-projected svg { width: 11px; height: 11px; }

.disclaimer {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--body-muted);
  border-left: 2px solid var(--gold);
  padding-left: 1rem;
  max-width: 68ch;
}
.section--forest .disclaimer { color: rgba(255, 255, 255, 0.58); }

/* 15  NEWSLETTER --------------------------------------------------------- */

/*
  The newsletter sits directly beneath the photographic closing band. If it is
  also a full-bleed photograph the two merge into one muddy dark zone, so the
  photograph is confined to the right and faded out, leaving a flat forest
  field with the geometric motif on the left. Distinct, and it stops relying on
  the image to carry the section.
*/
.newsletter {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  isolation: isolate;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.newsletter__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  z-index: 0;
}
.newsletter__media img { width: 100%; height: 100%; object-fit: cover; }
.newsletter__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Neutral shade: on phones the photo sits behind the copy, so it is darkened
     evenly; from tablet up only its inner edge softens into the panel. */
  background: rgba(8, 12, 10, 0.72);
}
@media (min-width: 1024px) {
  .newsletter__scrim {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.15) 100%);
  }
}
.newsletter .pattern-wash { z-index: 1; opacity: 0.06; }
.newsletter__inner {
  position: relative; z-index: 2;
  padding-block: clamp(3.25rem, 6vw, 5rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.newsletter__title { color: #fff; margin-top: 0.75rem; }
.newsletter__text {
  color: rgba(255, 255, 255, 0.74);
  max-width: 42ch;
  margin-top: 1rem;
  line-height: 1.7;
}
.newsletter__foot {
  margin-top: 1.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The form reads as its own module rather than floating on the photograph. */
.newsletter__panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.newsletter__panel-label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.875rem;
}
.newsletter__promise {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}
.newsletter__promise a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; }
.newsletter__promise a:hover { color: var(--gold); }

.subscribe {
  display: flex;
  gap: 0.5rem;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  align-items: center;
  width: 100%;
}
.subscribe__icon { width: 18px; height: 18px; color: var(--body-muted); flex: none; }
.subscribe input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.75rem 0.5rem;
  font-size: 0.9375rem;
}
.subscribe input:focus { outline: none; }
.subscribe .btn { flex: none; }

/* The inline field turns into a stacked one where a pill would crowd. */
@media (max-width: 539px) {
  .subscribe {
    flex-wrap: wrap;
    border-radius: var(--radius-card);
    padding: 0.75rem;
    gap: 0.75rem;
  }
  .subscribe__icon { display: none; }
  .subscribe input { flex: 1 0 100%; padding: 0.5rem 0.25rem; }
  .subscribe .btn { width: 100%; }
}

/* A newsletter form inside the panel reports errors in light-on-dark. */
.newsletter__panel .field__error { color: #ff9b9b; }

/*
  Below the two-column breakpoint the side-anchored photograph would sit behind
  the copy, so it goes full-bleed.
*/
@media (max-width: 767px) {
  .newsletter__media { width: 100%; }
  .newsletter__panel { padding: 1.25rem; }
  .band { min-height: clamp(300px, 62vw, 380px); }
  .band__title { font-size: clamp(2rem, 8.5vw, 2.75rem); }
  .band__action .btn { width: 100%; }
}

/* 16  FORMS -------------------------------------------------------------- */

.form { display: grid; gap: 1.25rem; }
.form__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field { display: grid; gap: 0.4375rem; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--red); margin-left: 0.125rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1.5px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
  padding: 0.8125rem 0.9375rem;
  font-size: 0.9375rem;
  min-height: 48px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 107, 69, 0.12);
}
.field__hint { font-size: 0.75rem; color: var(--body-muted); }

.field__error {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--red);
}
.field__error svg { width: 13px; height: 13px; flex: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--red); }
.field.has-error .field__error { display: flex; }

/* File input styled as a drop target, with previews */
.filefield input[type="file"] { display: none; }
.filefield__drop {
  display: grid;
  place-items: center;
  gap: 0.375rem;
  text-align: center;
  padding: 1.75rem 1rem;
  border: 1.5px dashed var(--hairline);
  border-radius: 10px;
  background: var(--ivory);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.filefield__drop:hover,
.filefield__drop.is-dragover { border-color: var(--green); background: #fff; }
.filefield__drop svg { width: 22px; height: 22px; color: var(--green); }
.filefield__drop strong { font-size: 0.8125rem; font-weight: 800; color: var(--ink); }
.filefield__drop span { font-size: 0.75rem; color: var(--body-muted); }
.filefield__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filefield__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 0.3125rem 0.5rem 0.3125rem 0.3125rem;
  font-size: 0.75rem;
  background: #fff;
  max-width: 100%;
}
.filefield__chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.filefield__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filefield__chip button {
  border: none; background: transparent; color: var(--body-muted);
  line-height: 1; padding: 0.25rem; border-radius: 50%;
}
.filefield__chip button:hover { color: var(--red); }

/* Submit states */
.form__status { display: none; border-radius: 10px; padding: 1rem 1.125rem; gap: 0.75rem; align-items: flex-start; }
.form__status.is-visible { display: flex; }
.form__status svg { width: 18px; height: 18px; flex: none; margin-top: 0.125rem; }
.form__status p { font-size: 0.875rem; line-height: 1.6; margin: 0; }
.form__status strong { display: block; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; }
.form__status--ok    { background: rgba(0, 107, 69, 0.08);  color: var(--green-deep); }
.form__status--error { background: rgba(229, 36, 42, 0.08); color: #a3171c; }

.btn.is-busy { pointer-events: none; opacity: 0.75; }
.btn__spinner { display: none; width: 15px; height: 15px; }
.btn.is-busy .btn__spinner { display: block; animation: spin 0.8s linear infinite; }
.btn.is-busy .btn__icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty state used by any list with nothing to show yet */
.empty-state {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-card);
  background: var(--ivory);
}
.empty-state svg { width: 30px; height: 30px; color: var(--green); }
.empty-state h3 { font-size: 1.375rem; }
.empty-state p { font-size: 0.9375rem; color: var(--body-muted); max-width: 44ch; }

/* 17  FOOTER ------------------------------------------------------------- */

.site-footer { background: var(--forest); color: var(--body-invert); }
.site-footer__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.site-footer__brand { display: grid; gap: 1.25rem; align-content: start; }
.site-footer__brand img { height: 56px; width: auto; }
.site-footer__tagline {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.site-footer__cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.footer-col h3 {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}
.footer-col li + li { margin-top: 0.625rem; }
.footer-col a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.footer-col a:hover { color: var(--gold); padding-left: 0.25rem; }

.socials { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-invert);
  color: #fff;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.socials a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.socials svg { width: 17px; height: 17px; }

.site-footer__base {
  border-top: 1px solid var(--hairline-invert);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__legal a:hover { color: var(--gold); }

/* 18  ARTICLE ------------------------------------------------------------ */

.article { max-width: 44rem; margin-inline: auto; }
.article > * + * { margin-top: 1.5rem; }
.article h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); margin-top: 2.75rem; }
.article h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 2rem; }
.article p { font-size: 1.0625rem; line-height: 1.8; }
.article p.lede-para {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
}
.article blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
  margin: 2.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--ink);
}
.article ul { display: grid; gap: 0.625rem; padding-left: 1.125rem; }
.article ul li { position: relative; font-size: 1.0625rem; line-height: 1.75; list-style: none; }
.article ul li::before {
  content: "";
  position: absolute;
  left: -1.125rem; top: 0.75rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.article figure { margin: 2.5rem 0; }
.article figcaption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--body-muted); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body-muted);
}
.breadcrumbs a:hover { color: var(--green); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; opacity: 0.5; }
.breadcrumbs--light { color: rgba(255, 255, 255, 0.6); }
.breadcrumbs--light a:hover { color: var(--gold); }

/* Key/value strip used on restaurant profiles */
.factlist { display: grid; gap: 1.125rem; }
.factlist div { display: grid; gap: 0.25rem; }
.factlist dt {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--body-muted);
}
.section--forest .factlist dt { color: rgba(255, 255, 255, 0.6); }
.section--forest .factlist dd { color: #fff; }
.section--forest .factlist dd.is-pending { color: rgba(255, 255, 255, 0.55); }
.factlist dd { margin: 0; font-size: 0.9375rem; color: var(--ink); }
.factlist dd.is-pending { color: var(--body-muted); font-style: italic; }

/* 19  MOTION ------------------------------------------------------------- */

/*
  Reveal states are gated on `.js`, set by an inline script in each <head>.
  Without JavaScript every element renders in its final state rather than
  staying invisible waiting for an observer that will never run.
*/
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }

/*
  Media wipes clip the CHILD, not the observed element. Chrome reports a zero
  intersection ratio for an element hidden by its own clip-path, so clipping
  the frame itself would stop the observer ever firing.
*/
.js [data-reveal="media"] { opacity: 1; transform: none; }
.js [data-reveal="media"] > img,
.js [data-reveal="media"] > .media-frame__placeholder {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.05);
  transition: clip-path 1.05s var(--ease), transform 1.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="media"].is-in > img,
.js [data-reveal="media"].is-in > .media-frame__placeholder {
  clip-path: inset(0 0 0% 0);
  transform: none;
}

/* Parallax on hero photography — translated by script, eased by the browser */
.hero__media { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-reveal] > img,
  .js [data-reveal] > .media-frame__placeholder {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* 20  RESPONSIVE --------------------------------------------------------- */

/* Small phones (320–479) get the tightest stacking. */
@media (max-width: 479px) {
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: minmax(0, 1fr); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .hero__features { grid-template-columns: minmax(0, 1fr); }
  .person { grid-template-columns: minmax(0, 1fr); }
  .person__media { aspect-ratio: 3 / 2; }
  .display-xl { font-size: clamp(2.75rem, 13vw, 3.75rem); }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .impact__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 480px) {
  .grid--2, .grid--4, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero__features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .impact__grid   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .categories     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logo-wall      { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .split--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band__inner { grid-template-columns: 1.55fr auto; }
  .band__action { justify-content: flex-end; }
  .newsletter__inner { grid-template-columns: 1fr minmax(320px, 0.82fr); }
  .site-footer__top { grid-template-columns: 1fr 1.55fr; }

  .sequence { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .sequence__media { position: sticky; top: calc(var(--nav-h) + 2.5rem); }

  .province-panel { grid-template-columns: 1.25fr 1fr; }
  .province-list { flex-wrap: wrap; overflow: visible; }
}

@media (min-width: 1024px) {
  .hero { min-height: 90vh; }
  .hero--tall { min-height: 100vh; }
  .hero--short { min-height: 66vh; }
  .hero__script { display: block; }

  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .split--intro  { grid-template-columns: 1fr 1fr 0.9fr; }
  .split--asym   { grid-template-columns: 1.15fr 0.85fr; }
  .split--asym-r { grid-template-columns: 0.85fr 1.15fr; }

  .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pillars   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
  Desktop bar: six core links, search, the CTA and a labelled "Menu" button
  that opens the fullscreen menu with every page.
*/
@media (min-width: 1180px) {
  .nav__menu { display: flex; }
  .nav__cta  { display: inline-flex; }
  .nav__burger {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding-inline: 0.875rem;
    border-radius: var(--radius-pill);
  }
  .nav__burger-label {
    display: inline;
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .nav__burger-lines span { width: 18px; }
}
@media (min-width: 1180px) and (max-width: 1379px) {
  .nav__menu { gap: 1.25rem; }
  .nav__link, .nav__burger-label { font-size: 0.875rem; }
  .nav__cta { display: none; }
}

@media (min-width: 1280px) {
  .grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .article { max-width: 46rem; }
}

@media (min-width: 1536px) {
  .hero__copy { max-width: 50rem; }
}

/* Touch targets stay generous on coarse pointers */
@media (pointer: coarse) {
  .nav__link,
  .footer-col a,
  .link-arrow { padding-block: 0.625rem; }
  .card:hover,
  .tile:hover,
  .dish:hover,
  .person:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .mobile-nav, .search-panel, .pattern-edge { display: none !important; }
  body { color: #000; background: #fff; }
  .js [data-reveal],
  .js [data-reveal] > img,
  .js [data-reveal] > .media-frame__placeholder {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}

/* Late additions ---------------------------------------------------------- */

.province-fact-group { display: grid; gap: 1rem; margin: 0; }

/* Icon placeholders sit inline with their label until hydrated */
[data-icon] { display: inline-flex; }
.hero__feature [data-icon] svg { width: 22px; height: 22px; }
.btn [data-icon] svg,
.btn .btn__icon svg { width: 16px; height: 16px; }
.hero__stamp [data-icon] svg { width: 13px; height: 13px; }
.pillar [data-icon] svg { width: 34px; height: 34px; }

/* FAQ accordion */
.faq { display: grid; gap: 0; }
.faq__item { border-top: 1px solid var(--hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__item h3 { margin: 0; font-family: var(--font-sans); }
.faq__item button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  background: transparent;
  border: none;
  padding: 1.375rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  color: var(--ink);
  min-height: 56px;
}
.faq__item button svg { width: 18px; height: 18px; flex: none; color: var(--green); transition: transform 0.35s var(--ease); }
.faq__item button[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__body { padding-bottom: 1.375rem; max-width: 68ch; }
.faq__body p { font-size: 0.9375rem; line-height: 1.7; color: var(--body-muted); }

/* Programme list */
.programme { display: grid; gap: 0; }
.programme__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--hairline);
}
.programme__row:last-child { border-bottom: 1px solid var(--hairline); }
.programme__day {
  font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-ink);
}
.section--forest .programme__day,
.section--green .programme__day { color: var(--gold); }
.programme__title { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.programme__note { font-size: 0.875rem; color: var(--body-muted); }
@media (min-width: 768px) {
  .programme__row { grid-template-columns: 10rem 1fr 1fr; align-items: baseline; }
}

/* Gallery strip */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Map figure on the destinations page */
.map-figure { position: relative; display: grid; place-items: center; }
.map-figure img { width: min(100%, 460px); height: auto; }
.map-figure__note {
  position: absolute;
  right: 0;
  top: 8%;
  max-width: 11rem;
  text-align: left;
  transform: rotate(-3deg);
}
@media (max-width: 767px) { .map-figure__note { position: static; transform: none; margin-top: 1rem; } }

/* 21  BACKGROUND VIDEO --------------------------------------------------- */

/*
  A looping hero clip sits under the same scrim as a hero photograph. The
  poster image is always in the DOM beneath the video, so the section is never
  empty while the clip loads, on a failed decode, or when motion is reduced.

  WCAG 2.2.2: the loop runs longer than five seconds, so it must be pausable.
  The control below is that mechanism, not decoration.
*/
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--forest);
}
.hero__video img,
.hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video video {
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hero__video video.is-playing { opacity: 1; }

.video-toggle {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 0.9375rem 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(7, 26, 20, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.video-toggle:hover { background: rgba(7, 26, 20, 0.78); border-color: #fff; }
.video-toggle svg { width: 13px; height: 13px; flex: none; }

/* A caption crediting supplied footage, sat under the hero copy. */
.media-credit {
  margin-top: 1.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

/* Motion off: never autoplay, and keep the poster as the visible frame. */
@media (prefers-reduced-motion: reduce) {
  .hero__video video { opacity: 0 !important; }
}

/* Vertical player, for footage supplied in portrait ----------------------- */
.video-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--forest);
}
.video-frame--portrait { aspect-ratio: 9 / 16; max-width: 360px; }
.video-frame--landscape { aspect-ratio: 16 / 9; }
.video-frame .hero__video { position: absolute; inset: 0; }
.video-frame .video-toggle { left: 0.875rem; bottom: 0.875rem; }

/* Full-length venue film, with sound ---------------------------------------- */
@media (min-width: 900px) {
  .split--film { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
}
.film-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 0.5rem;
}
.film-meta .btn svg { width: 13px; height: 13px; }
.film-meta__time {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--body-muted);
}

.film {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--forest);
  box-shadow: var(--shadow-lift);
}
.film__video,
.film__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film__video { object-fit: contain; background: #000; }
.film__poster { transition: transform 0.8s var(--ease); }
/* Until started, the video sits out of the tab order and out of sight. */
.film:not(.is-started) .film__video { visibility: hidden; }
.film.is-started .film__poster,
.film.is-started .film__cover { display: none; }
.film__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(7, 26, 20, 0.14);
  cursor: pointer;
  transition: background-color 0.4s var(--ease);
}
.film__cover:hover,
.film__cover:focus-visible { background: rgba(7, 26, 20, 0.28); }
.film:hover .film__poster { transform: scale(1.02); }
.film__cover:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.film__icon {
  display: grid;
  place-items: center;
  width: clamp(56px, 6vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.4s var(--ease), background-color 0.3s var(--ease);
}
.film__icon svg { width: 38%; height: 38%; margin-left: 8%; }
.film__cover:hover .film__icon,
.film__cover:focus-visible .film__icon { transform: scale(1.08); background: var(--gold-soft); }

/* Where a venue's details came from ---------------------------------------- */
.sources {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--body-muted);
}
.sources h4 {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--body-muted);
  margin-bottom: 0.4375rem;
}
.sources a { text-decoration: underline; text-underline-offset: 2px; }
.sources a:hover { color: var(--green); }
.sources li + li { margin-top: 0.25rem; }
.section--forest .sources { border-color: var(--hairline-invert); color: rgba(255,255,255,.6); }

.venue-socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.venue-socials a {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 0.4375rem 0.8125rem; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.venue-socials a:hover { border-color: var(--green); color: var(--green); }
.venue-socials svg { width: 13px; height: 13px; }

/* 22  SMALL-SCREEN CORRECTIONS ------------------------------------------- */

/*
  On a 390px screen the two 34px pattern strips consume 17% of the width and
  sit on top of the hero copy, and the vertical keyword rail overlaps the
  paragraph. Both are decorative, so they step back rather than compete.
*/
@media (max-width: 639px) {
  .pattern-edge { display: none; }
  .hero__stamp { display: none; }
}

@media (max-width: 1023px) {
  .rail { display: none; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .pattern-edge { width: 20px; background-size: 20px 20px; background-position: 0 0, 0 0, 10px 10px, 10px 10px; }
  .hero__stamp { right: calc(20px + 1rem); }
}

/* Comfortable targets on touch devices without disturbing the desktop rhythm. */
@media (pointer: coarse) {
  .link-arrow { padding-block: 0.75rem; }
  .factlist dd a,
  .sources a { display: inline-block; padding-block: 0.25rem; }
}

/* Province tabs scroll; show that they do. */
@media (max-width: 767px) {
  .province-list {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    padding-right: 2rem;
  }
}

/* 23  EVENTS ------------------------------------------------------------- */

.event-facts { padding-top: 0.5rem; }

/* Filters reuse the province pill; pressed replaces selected. */
.event-filters { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.event-filters .province-btn[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.event-filters__count {
  margin-left: 0.25rem;
  font-weight: 700;
  opacity: 0.6;
}

/*
  Masonry by columns: photographs keep their own proportions, so portrait and
  landscape frames sit together without cropping anyone out of the picture.
*/
.event-grid { columns: 2; column-gap: 0.75rem; }
@media (min-width: 768px) { .event-grid { columns: 3; column-gap: 1rem; } }
@media (min-width: 1180px) { .event-grid { columns: 4; } }

.event-grid__item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--ivory-deep);
  cursor: zoom-in;
  break-inside: avoid;
}
@media (min-width: 768px) { .event-grid__item { margin-bottom: 1rem; } }
.event-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.event-grid__item:hover img { transform: scale(1.04); }
.event-grid__item:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.event-grid__tag {
  position: absolute;
  left: 0.625rem;
  bottom: 0.625rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: rgba(7, 26, 20, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.event-grid__item:hover .event-grid__tag,
.event-grid__item:focus-visible .event-grid__tag { opacity: 1; transform: none; }

.photo-credit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--body-muted);
}
.photo-credit svg { width: 15px; height: 15px; color: var(--gold-ink); flex: none; }
.photo-credit a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.photo-credit a:hover { color: var(--green); }

/* Lightbox ---------------------------------------------------------------- */
.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(7, 26, 20, 0.96);
  color: #fff;
}
.lightbox::backdrop { background: rgba(7, 26, 20, 0.6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure {
  display: grid;
  gap: 0.875rem;
  justify-items: center;
  max-width: calc(100vw - 2 * var(--gutter));
  padding-block: 4.5rem 1.5rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100dvh - 10rem);
  width: auto;
  height: auto;
  border-radius: var(--radius-media);
  object-fit: contain;
}
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem 1rem;
  max-width: 60ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}
.lightbox__count {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(7, 26, 20, 0.55);
  color: #fff;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lightbox__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: 1rem; right: var(--gutter); }
.lightbox__prev,
.lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: var(--gutter); }
.lightbox__next { right: var(--gutter); }
@media (max-width: 767px) {
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 1rem; transform: none; }
  .lightbox__figure { padding-bottom: 5rem; }
  .lightbox__img { max-height: calc(100dvh - 13rem); }
}

/* PHONE REFINEMENTS -------------------------------------------------------- */

/* Grid and split children may shrink below their content's natural width,
   so a long word or button never pushes a column past the screen edge. */
.split > *, .grid > * { min-width: 0; }

@media (max-width: 767px) {
  /* Small caps labels: nothing under 11px on a phone. */
  .card__kicker, .programme__day, .tag-projected, .event-grid__tag,
  .factlist dt, .newsletter__foot, .newsletter__panel-label,
  .site-footer__tagline, .footer-col h3, .story__meta, .breadcrumbs { font-size: 0.6875rem; }

  /* Footer and breadcrumb links get a 44px tall tap area without moving. */
  .footer-col a { display: inline-block; padding-block: 0.6875rem; margin-block: -0.6875rem; }
  .footer-col li + li { margin-top: 1.125rem; }
  .breadcrumbs a { display: inline-block; padding-block: 0.875rem; margin-block: -0.875rem; }
  .site-footer__legal a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
}

@media (max-width: 479px) {
  /* Long labels wrap onto two lines instead of overflowing the screen. */
  .btn { white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; }
}

/* Restaurant location: live map with the address and directions beneath ------ */
.venue-map {
  border: 1px solid var(--hairline-invert);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--forest-soft);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7);
}
.venue-map__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  background: var(--forest-soft);
}
.venue-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
}
.venue-map__place { display: flex; align-items: flex-start; gap: 0.875rem; min-width: 0; }
.venue-map__pin {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(242, 179, 19, 0.14);
  color: var(--gold);
}
.venue-map__pin svg { width: 18px; height: 18px; }
.venue-map__place .eyebrow { margin-bottom: 0.25rem; }
.venue-map__address {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.25;
  color: #fff;
}

/* ==========================================================================
   Mobile refinements (from a 390px review of every page)
   ========================================================================== */

/* The logo file carries 67px of transparent margin on its left (at 248px
   tall); pull it back so the mark lines up with the footer's gutter. */
.site-footer__brand img { margin-left: calc(-67 / 248 * 56px); }

/* Selects are drawn without the native control, so give them a chevron. */
.field select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006b45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9375rem center;
  background-size: 18px;
}

/* Buttons inside an empty-state card keep their own small arrow. */
.empty-state .btn svg { width: 16px; height: 16px; color: currentColor; }

/* While the map loads it reads as a map area, not an empty box. */
.venue-map__frame { background: #e9e6dd; }

/* Previous / next story links: labelled, and a comfortable tap target. */
.story-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-inline: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}
.story-step svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 767px) {
  /* Copy spans the full width on phones, so shade the whole photograph
     rather than only its left side. */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.62) 100%);
  }

  /* Scrolling chip rows fade at the edge, so they read as scrollable. */
  .province-list {
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
    padding-right: 2.5rem;
  }

  /* Three gallery photos: one full width, two beneath, no orphan tile. */
  .gallery > :first-child { grid-column: 1 / -1; }

  /* Equal-width action pairs instead of a ragged wrap. */
  .actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .actions-grid .btn { justify-content: center; padding-inline: 0.75rem; }
  /* An odd count still ends on a full row, never a lone half-width button. */
  .actions-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* The handwritten map note sits under the map, aligned with the text. */
  .map-figure__note { justify-self: start; max-width: none; }
}