/* ==========================================================================
   Alfresco Living Tech — site.css
   The only stylesheet on the site. Organised as:
     1. Custom properties (palette, type, spacing)
     2. Reset and base elements
     3. Layout primitives
     4. Header and navigation
     5. Hero and page intro
     6. Cards and grids
     7. Affiliate components
     8. Gallery and lightbox
     9. Footer
    10. Cookie consent
    11. Utilities, print, reduced motion

   The palette is sampled from the Canva page graphics in /images so the
   hand-built pages and the owner's existing artwork read as one site.
   The caption bar in those graphics is exactly #CBC7B7.
   ========================================================================== */

/* -------------------------------------------------- 1. Custom properties */

:root {
  /* Neutrals — warm stone, sampled from the Canva caption bars */
  --cream:      #FAF8F2;
  --cream-deep: #F2EFE4;
  --stone-100:  #E8E6DD;
  --stone-200:  #D8D5C8;
  --stone-300:  #CBC7B7;
  --stone-500:  #8C8A7C;

  /* Greens — garden foliage */
  --green-900: #16261C;
  --green-800: #1E3427;
  --green-700: #2C4A35;
  --green-600: #3A6044;
  --green-400: #6E9179;

  /* Terracotta — pots, brick, the accent in the furniture artwork */
  --terracotta:      #A64B23;
  --terracotta-dark: #7E3818;
  --terracotta-tint: #F6E7DF;

  /* Brand — taken straight out of the logo artwork. --charcoal is the exact
     colour of the logo's background plate, so the header and footer use it
     and the logo sits flush with no visible edge. */
  --charcoal:      #2E2E2D;
  --charcoal-soft: #3D3D3B;
  --brand-orange:  #FF6000;

  /* Text */
  --ink:      #1B2118;
  --ink-soft: #454C41;
  --ink-mute: #61695C;

  --focus: #A64B23;

  /* Typography — system stack, no webfont request */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Times New Roman", serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.65rem + 2.2vw, 3.6rem);

  /* Spacing */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;

  --measure: 68ch;
  --wrap: 1180px;
  --wrap-wide: 1440px;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgb(27 33 24 / 0.06), 0 3px 10px rgb(27 33 24 / 0.05);
  --shadow-md: 0 4px 12px rgb(27 33 24 / 0.08), 0 14px 34px rgb(27 33 24 / 0.09);

  --header-h: 4.5rem;
}

/* ------------------------------------------------ 2. Reset and base */

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--green-900);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, dl, figure, table, blockquote { margin: 0 0 var(--sp-3); }
p { text-wrap: pretty; }

a { color: var(--terracotta-dark); text-underline-offset: 0.18em; }
a:hover { color: var(--terracotta); }

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

strong, b { font-weight: 650; }

hr {
  border: 0;
  border-top: 1px solid var(--stone-200);
  margin: var(--sp-5) 0;
}

blockquote {
  margin-inline: 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--green-400);
  background: var(--cream-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step-1);
  font-family: var(--font-display);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--stone-300); color: var(--green-900); }

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -6rem;
  z-index: 999;
  padding: var(--sp-2) var(--sp-3);
  background: var(--green-800);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ------------------------------------------------ 3. Layout primitives */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap-wide { width: min(100% - 2.5rem, var(--wrap-wide)); margin-inline: auto; }
.wrap-text { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

main { display: block; }

.section { padding-block: var(--sp-6); }
.section-tight { padding-block: var(--sp-5); }
.section-alt { background: var(--cream-deep); }
.section-dark {
  background: var(--green-800);
  color: var(--stone-100);
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: var(--stone-300); }
.section-dark a:hover { color: #fff; }

.section-head { max-width: var(--measure); margin-bottom: var(--sp-4); }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  margin-bottom: var(--sp-2);
}

.prose { max-width: var(--measure); }
.prose > * + h2 { margin-top: var(--sp-5); }
.prose > * + h3 { margin-top: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: var(--sp-1); }
.prose li::marker { color: var(--green-600); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-weight: 650;
  font-size: var(--step-0);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.btn-primary { background: var(--terracotta); color: #fff; }
.btn-primary:hover { background: var(--terracotta-dark); color: #fff; transform: translateY(-2px); }
.btn-secondary {
  background: transparent;
  color: var(--green-800);
  border-color: var(--green-600);
}
.btn-secondary:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.btn-light { background: #fff; color: var(--green-900); }
.btn-light:hover { background: var(--stone-100); color: var(--green-900); transform: translateY(-2px); }

/* ------------------------------------------------ 4. Header and nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--charcoal);
  border-bottom: 3px solid var(--brand-orange);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { width: 168px; height: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1.5px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  color: #fff;
  cursor: pointer;
}
.nav-toggle-bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  align-items: center;
}
.site-nav a,
.nav-sub-toggle {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: #EDEBE4;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--charcoal-soft); color: #fff; }
.site-nav a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--brand-orange);
}

/* --- dropdown groups ---------------------------------------------------
   Opening is driven by :hover and :focus-within, so the menus are fully
   operable by mouse and by keyboard even with JavaScript disabled. The
   script only adds click-to-open and Escape-to-close on top. */

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav-sub-toggle:hover { background: var(--charcoal-soft); color: #fff; }
.has-sub.is-active > .nav-sub-toggle {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--brand-orange);
}
.chev {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

@media (min-width: 60.0625rem) {
  .site-nav .has-sub { position: relative; }

  .nav-sub {
    position: absolute;
    top: 100%;                      /* flush, so there is no hover gap */
    left: 0;
    z-index: 10;
    min-width: 16rem;
    padding: 0.35rem;
    background: var(--charcoal);
    border: 1px solid rgb(255 255 255 / 0.16);
    border-top: 2px solid var(--brand-orange);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  .nav-sub a { white-space: normal; padding: 0.55rem 0.7rem; }

  .has-sub:hover > .nav-sub,
  .has-sub:focus-within > .nav-sub,
  .has-sub > .nav-sub-toggle[aria-expanded="true"] + .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-sub:hover > .nav-sub-toggle .chev,
  .has-sub:focus-within > .nav-sub-toggle .chev {
    transform: translateY(1px) rotate(225deg);
  }

  /* Right-hand groups drop leftwards so they cannot overflow the viewport. */
  .nav-top > .has-sub:nth-last-child(-n+2) > .nav-sub { left: auto; right: 0; }
}

/* Mobile: the toggle button is only shown when JS has enhanced the nav.
   Without JS the nav simply stays open, so every page remains navigable. */
.nav-toggle { display: none; }

@media (max-width: 60rem) {
  .header-inner { flex-wrap: wrap; padding-block: 0.6rem; }
  .site-nav { flex-basis: 100%; }
  .nav-top { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--sp-2); }
  .site-nav a {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }

  /* No nested menus on small screens — each group becomes a labelled
     section that is always open, so nothing is more than one tap away. */
  .nav-sub-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 1rem 0.6rem 0.35rem;
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone-300);
    cursor: default;
  }
  .nav-sub-toggle:hover { background: none; color: var(--stone-300); }
  .chev { display: none; }
  .has-sub.is-active > .nav-sub-toggle { box-shadow: none; color: var(--brand-orange); }
  .nav-sub a { padding-left: 1.4rem; }

  .js .nav-toggle { display: inline-flex; }
  .js .site-nav[hidden] { display: none; }
}

@media (min-width: 60.0625rem) {
  .site-nav[hidden] { display: block; }
}

/* ------------------------------------------------ 5. Hero */

.hero { position: relative; background: var(--green-900); overflow: hidden; }
.hero picture, .hero > img { position: absolute; inset: 0; }
.hero img { width: 100%; height: 100%; object-fit: cover; }

/* Contrast scrim.

   Hero text sits on photography, so its contrast depends on whatever happens
   to be behind it — a blown-out sky will fail WCAG however light the text is,
   and text-shadow does not count towards the contrast ratio. This opaque-enough
   gradient guarantees a dark background behind the text no matter what the
   photograph does. Mobile-first it covers the whole hero, because the text
   spans the full width; on wider screens it is weighted to the left so more of
   the photograph shows through beside the copy. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 16 12 / 0.88) 0%, rgb(10 16 12 / 0.80) 100%);
}

@media (min-width: 52rem) {
  .hero::after {
    background: linear-gradient(96deg,
      rgb(10 16 12 / 0.92) 0%,
      rgb(10 16 12 / 0.88) 58%,
      rgb(10 16 12 / 0.55) 80%,
      rgb(10 16 12 / 0.30) 100%);
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  max-width: 46rem;
  color: #fff;
}
.hero-inner h1 { color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / 0.35); }
.hero-inner .eyebrow { color: var(--stone-300); }
.hero-lede {
  font-size: var(--step-1);
  color: #F3F1E9;
  margin-bottom: var(--sp-4);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Compact header for utility pages with no photograph */
.page-head {
  background: var(--green-800);
  color: #fff;
  padding-block: var(--sp-5);
}
.page-head h1 { color: #fff; margin-bottom: var(--sp-2); }
.page-head p { color: var(--stone-200); max-width: var(--measure); margin-bottom: 0; }
.page-head .eyebrow { color: var(--stone-300); }

/* Poster layout — portrait key art beside the intro copy */
.poster-intro {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .poster-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
}
.poster-intro img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* Breadcrumbs */
.breadcrumbs { font-size: var(--step--1); padding-block: var(--sp-2); color: var(--ink-mute); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.4rem; color: var(--stone-500); }
.breadcrumbs a { color: var(--ink-soft); }

/* ------------------------------------------------ 6. Cards and grids */

.grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--stone-100);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--stone-200); }
.card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.card p { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: var(--sp-3); }
.card .card-cta { margin-top: auto; font-weight: 650; font-size: var(--step--1); text-decoration: none; }
.card .card-cta::after { content: " →"; }

/* Whole card clickable, but only one real link in the accessibility tree */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Cards built from the Canva artwork already carry their own caption bar,
   so they are shown whole rather than cropped. */
.card-artwork img { aspect-ratio: auto; }

.feature {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-reverse > :first-child { order: 2; }
}
.feature img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.feature-body > :last-child { margin-bottom: 0; }

.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--sp-2);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2.5px solid var(--green-600);
  border-bottom: 2.5px solid var(--green-600);
  transform: rotate(-45deg);
}

.stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.stat { flex: 1 1 12rem; }
.stat dt { font-size: var(--step--1); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.stat dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); color: var(--green-800); }

/* ------------------------------------------------ 7. Affiliate components */

/* Amazon Associates disclosure.

   Required to be visible without interaction on every page carrying Amazon
   links — and on every visit, which is why it lives here in the page and not
   only in the cookie banner (that is dismissed once and never seen again).

   Deliberately understated: a single small line under the hero copy rather
   than a full-width coloured bar across the top of the page. */
.hero-disclosure {
  margin: var(--sp-3) 0 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: #E7E4DA;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
}
.hero-disclosure a { color: #E7E4DA; text-decoration-thickness: 1px; }
.hero-disclosure a:hover { color: #fff; }

/* Same line on the flat-colour page headers. */
.page-head .hero-disclosure { color: var(--stone-200); text-shadow: none; }
.page-head .hero-disclosure a { color: var(--stone-200); }

.disclosure-inline {
  font-size: var(--step--1);
  color: var(--ink-mute);
  background: var(--cream-deep);
  border-left: 3px solid var(--stone-300);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Product recommendation row */
.pick {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--stone-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-3);
}
@media (min-width: 40rem) {
  .pick { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; }
}
.pick img { border-radius: 10px; background: var(--cream-deep); object-fit: contain; aspect-ratio: 1; }
.pick h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.pick p { font-size: var(--step--1); color: var(--ink-soft); }
.pick > div > :last-child { margin-bottom: 0; }

/* Outbound affiliate link marker */
a[rel~="sponsored"]::after {
  content: "↗";
  font-size: 0.75em;
  margin-left: 0.25em;
  vertical-align: super;
  color: var(--ink-mute);
}
.btn[rel~="sponsored"]::after, .card-link[rel~="sponsored"]::after { content: none; }

.banner-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  align-items: center;
}
.banner-rail a { display: block; line-height: 0; }
.banner-rail img { border-radius: 8px; box-shadow: var(--shadow-sm); }

.partner-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.partner-list a {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--stone-300);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--green-800);
  background: #fff;
}
.partner-list a:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); }

/* ------------------------------------------------ 8. Gallery and lightbox */

.gallery {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.gallery figure { margin: 0; }
.gallery button {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.3s ease, filter 0.3s ease;
}
.gallery button:hover img { transform: scale(1.04); filter: brightness(1.04); }
.gallery figcaption { font-size: var(--step--1); color: var(--ink-mute); padding-top: var(--sp-1); }

/* Native dialog — closes with Esc and traps focus for free */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1200px);
  max-height: 94vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(12 18 12 / 0.88); }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius);
}
.lightbox figcaption { color: var(--stone-200); text-align: center; padding-top: var(--sp-2); font-size: var(--step--1); }
.lightbox-close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--green-900);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------ 9. Footer */

.site-footer {
  background: var(--charcoal);
  color: var(--stone-200);
  padding-block: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-6);
  border-top: 3px solid var(--brand-orange);
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.site-footer a { color: var(--stone-200); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.4rem; font-size: var(--step--1); }
.footer-brand img { width: 190px; }
.footer-brand p { font-size: var(--step--1); color: var(--stone-300); margin-top: var(--sp-2); }
.footer-legal {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--stone-300);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
}
.footer-legal p { margin: 0; }
.footer-legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: 0; }

/* ------------------------------------------------ 10. Cookie consent */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  background: var(--charcoal);
  color: var(--stone-100);
  border-top: 3px solid var(--brand-orange);
  padding: var(--sp-3) 0;
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.25);
}
.consent[hidden] { display: none; }
.consent-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.consent-copy { max-width: 68ch; }
.consent p { margin: 0; font-size: var(--step--1); }
.consent-affiliate {
  margin-bottom: 0.4rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
  color: #fff;
}
.consent a { color: var(--stone-300); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.consent .btn { padding: 0.6rem 1.2rem; font-size: var(--step--1); }
.consent-reject {
  background: transparent;
  color: var(--stone-100);
  border-color: var(--stone-500);
}
.consent-reject:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

/* ------------------------------------------------ 11. Utilities */

.visually-hidden {
  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;
}

.center { text-align: center; }
.center .section-head, .center .prose { margin-inline: auto; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }
.lede { font-size: var(--step-1); color: var(--ink-soft); }

.tag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 650;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--stone-100);
  color: var(--green-800);
}

.notice {
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--cream-deep);
  border: 1px solid var(--stone-200);
}
.notice > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .btn:hover { transform: none; }
  .gallery button:hover img { transform: none; }
}

@media print {
  .site-header, .site-footer, .consent, .banner-rail, .hero img { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}