/* =========================================================================
   carlreader.com v5 — Bebas Neue + Inter, single cream, no italic
   ========================================================================= */

/* Self-hosted fonts
   ----------------------------------------------------------------------- */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/bebas-neue-latin-400-normal.woff2') format('woff2'),
       url('/fonts/bebas-neue-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'),
       url('/fonts/inter-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'),
       url('/fonts/inter-latin-500-normal.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'),
       url('/fonts/inter-latin-600-normal.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'),
       url('/fonts/inter-latin-700-normal.woff') format('woff');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playfair-display-latin-400-italic.woff2') format('woff2');
}

/* Design tokens
   ----------------------------------------------------------------------- */
:root {
  /* Palette — matched to homepage hero exactly */
  --cream: #e4c7a9;          /* identical to hero image bg (228,199,169) */
  --cream-text: #fbf7f2;     /* off-white, matches homepage menu rendered colour */
  --brown: #5c3a1c;
  --brown-deep: #2a1c10;
  --brass: #b8852f;
  --ink: #1a120a;
  --paper: #efd7b3;          /* slightly lighter paper for cards/inputs */
  --rule: rgba(42, 28, 16, 0.18);
  --rule-light: rgba(251, 247, 242, 0.22);

  /* Type — Bebas for display/nav/CTAs/eyebrows/numerals, Inter for body */
  --f-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Sizing */
  --max-w: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7rem);

  /* Type scale — sized for two-line headlines without runaway wrap */
  --t-display: clamp(2.5rem, 5.5vw, 4.75rem);
  --t-h1: clamp(2rem, 4vw, 3.25rem);
  --t-h2: clamp(1.75rem, 3vw, 2.5rem);
  --t-h3: clamp(1.3rem, 2vw, 1.65rem);
  --t-body: clamp(1rem, 1.1vw, 1.125rem);
  --t-lede: clamp(1.1rem, 1.45vw, 1.3rem);
  --t-small: 0.875rem;
  --t-eyebrow: 0.8rem;
}

/* Reset
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* scroll-behavior: smooth removed — handled by script.js with custom easing */
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Kill all italic site-wide — it was overused */
em, i, .t-italic { font-style: normal; }

/* Typography
   ----------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
  color: var(--brown-deep);
  text-transform: uppercase;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: 0.02em; }
.t-display { font-size: var(--t-display); line-height: 0.92; text-transform: uppercase; font-family: var(--f-display); }
.t-lede {
  font-family: var(--f-sans);
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--brown);
  max-width: 38ch;
  font-weight: 400;
}
.t-eyebrow {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1;
  margin: 0 0 0.5rem;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Layout primitives
   ----------------------------------------------------------------------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--narrow { padding-top: calc(var(--section-y) * 0.65); padding-bottom: calc(var(--section-y) * 0.65); }

/* Surfaces — all share the cream base now; dark is for accents only */
.s-cream { background: var(--cream); color: var(--ink); }
.s-cream-soft { background: var(--cream); color: var(--ink); }   /* legacy alias */
.s-cream-deep { background: var(--paper); color: var(--ink); }
.s-dark { background: var(--brown-deep); color: var(--cream-text); }
.s-dark h1, .s-dark h2, .s-dark h3 { color: var(--cream-text); }
.s-dark .t-eyebrow { color: var(--brass); }
.s-dark .t-lede { color: rgba(251, 247, 242, 0.82); }
.s-brown { background: var(--brown); color: var(--cream-text); }
.s-brown h1, .s-brown h2, .s-brown h3 { color: var(--cream-text); }

/* Nav (subpages)
   ----------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(228, 199, 169, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.nav__brand {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.nav__links {
  display: flex;
  gap: 2rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown-deep);
  position: relative;
  padding-bottom: 0.15rem;
}
.nav__links a:hover { color: var(--brass); }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--brass);
}
.nav__cta {
  background: var(--brown-deep);
  color: var(--cream-text) !important;
  /* Bebas Neue's cap-height sits in the upper part of its line-box, so
     symmetric padding makes letters look top-heavy. Top padding is larger
     than bottom to push the visible glyphs to the optical centre. */
  padding: 0.55rem 1.2rem 0.45rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  transition: background 0.2s, transform 0.2s;
}
.nav__cta:hover {
  background: var(--brass);
  color: var(--brown-deep) !important;
  transform: translateY(-1px);
}
.nav__cta.is-active::after { display: none; }
.nav__toggle { display: none; background: none; border: 0; color: var(--brown-deep); padding: 0.5rem; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--cream);
    padding: 1.5rem var(--gutter);
    gap: 1.25rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__toggle { display: block; }
}

/* Homepage hero — full-bleed image + overlaid Bebas menu
   ----------------------------------------------------------------------- */
body.home { background: var(--cream); }
body.home .hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--cream);
  padding: 0;
  overflow: hidden;
}
body.home .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 1;
  background: var(--brown-deep);
}
/* Horizontal nav bar — sits between hero video and the rest of the page */
.home-bar {
  background: var(--cream);
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.home-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}
.home-bar__link {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2vw, 1.95rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brown-deep);
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s, transform 0.2s;
}
.home-bar__link:hover { color: var(--brass); transform: translateY(-1px); }

@media (max-width: 720px) {
  .home-bar__inner {
    justify-content: center;
    gap: 0.85rem 1.75rem;
  }
  .home-bar__link { font-size: 1.2rem; }
}

@media (max-width: 850px) {
  /* On narrow viewports, hero takes the video's natural 16:9 aspect.
     Full landscape clip visible, no zoom-crop, no letterboxing needed. */
  body.home .hero {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  body.home .hero-video {
    object-fit: cover;
    object-position: center;
  }
}

/* Homepage — one-pager continues below the hero
   ----------------------------------------------------------------------- */

/* Section blocks under the homepage hero */
.home-section {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  background: var(--cream);
  border-top: 1px solid var(--rule);
}
.home-section--dark { background: var(--brown-deep); color: var(--cream-text); border-top: 0; }
.home-section--dark h2 { color: var(--cream-text); }
.home-section--dark .t-eyebrow { color: var(--brass); }
.home-section__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.home-section__grid--flip { direction: rtl; }
.home-section__grid--flip > * { direction: ltr; }
.home-section__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  margin-bottom: 1.25rem;
}
.home-section__lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--brown);
  max-width: 42ch;
  margin-bottom: 1.75rem;
}
.home-section--dark .home-section__lede { color: rgba(251, 247, 242, 0.82); }
.home-section__media {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(42, 28, 16, 0.45);
}
.home-section__media img { width: 100%; height: 100%; object-fit: cover; }
.home-section__media--wide { aspect-ratio: 4 / 3; }

@media (max-width: 820px) {
  .home-section__grid,
  .home-section__grid--flip { grid-template-columns: 1fr; direction: ltr; }
}

/* Subpage hero (editorial)
   ----------------------------------------------------------------------- */
.hero {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__title {
  font-size: var(--t-display);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero__sub {
  margin-top: 1.5rem;
  font-size: var(--t-lede);
  color: var(--brown);
  max-width: 36ch;
  font-family: var(--f-sans);
}
.hero__credits {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--brown-deep);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}
.hero__credits span { color: var(--brass); }
.hero__cta-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(42, 28, 16, 0.35);
}
.hero__img, .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__img--mono { z-index: 2; transition: opacity 1.8s ease 0.4s; }
.hero__img--colour { z-index: 1; }
.hero.is-loaded .hero__img--mono { opacity: 0; }

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__media { aspect-ratio: 4 / 5; max-height: 70vh; }
}

/* Buttons
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem 0.8rem;  /* extra top, less bottom — pulls Bebas optically centred */
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.05;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.2s, background 0.2s, color 0.2s;
  border: 0;
}
.btn--primary { background: var(--brown-deep); color: var(--cream-text); }
.btn--primary:hover { background: var(--brass); color: var(--brown-deep); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--brown-deep);
  border: 1px solid var(--brown-deep);
}
.btn--ghost:hover { background: var(--brown-deep); color: var(--cream-text); }
.btn--brass { background: var(--brass); color: var(--brown-deep); }
.btn--brass:hover { background: var(--brown-deep); color: var(--cream-text); transform: translateY(-1px); }
.btn--big { padding: 1.1rem 1.9rem 0.95rem; font-size: 1.2rem; }
.s-dark .btn--ghost { color: var(--cream-text); border-color: var(--cream-text); }
.s-dark .btn--ghost:hover { background: var(--cream-text); color: var(--brown-deep); }

/* Pulled quote — Playfair italic, the one editorial italic moment
   ----------------------------------------------------------------------- */
.pullquote {
  padding-top: clamp(2.5rem, 4.5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 4.5rem);
  position: relative;
}
.pullquote__inner {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.pullquote__mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(5rem, 10vw, 9rem);
  color: var(--brass);
  line-height: 0.5;
  display: block;
  margin-bottom: 1rem;
}
.pullquote__text {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--brown-deep);
  text-transform: none;
}
.pullquote__attrib {
  margin-top: 2.5rem;
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(42, 28, 16, 0.65);
}
/* On dark backgrounds, flip to cream */
.s-dark .pullquote__text,
.s-brown .pullquote__text { color: var(--cream-text); }
.s-dark .pullquote__attrib,
.s-brown .pullquote__attrib { color: rgba(251, 247, 242, 0.65); }

/* Quote slider — multiple quotes with auto-advance + dot navigation */
.quote-slider { position: relative; }
.quote-slider__viewport {
  position: relative;
  display: grid;
  /* All slides occupy the same grid cell; only active one is visible */
}
.quote-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 0 1rem;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.quote-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.quote-slider__dots {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}
.quote-slider__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: rgba(42, 28, 16, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}
.quote-slider__dot:hover { background: rgba(42, 28, 16, 0.5); }
.quote-slider__dot.is-active {
  background: var(--brass);
  transform: scale(1.2);
}
.s-brown .quote-slider__dot,
.s-dark .quote-slider__dot { background: rgba(251, 247, 242, 0.3); }
.s-brown .quote-slider__dot:hover,
.s-dark .quote-slider__dot:hover { background: rgba(251, 247, 242, 0.6); }

/* Section header
   ----------------------------------------------------------------------- */
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 60ch; }
.section-head__eyebrow {
  display: block;
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.section-head__title {
  font-size: var(--t-h2);
  text-transform: uppercase;
}
.section-head__lede {
  margin-top: 1rem;
  font-family: var(--f-sans);
  font-size: var(--t-lede);
  color: var(--brown);
  max-width: 52ch;
}
.s-dark .section-head__lede { color: rgba(251, 247, 242, 0.82); }

/* Mosaic
   ----------------------------------------------------------------------- */
.mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.25rem;
}
.mosaic__lead { grid-row: span 2; }
.mosaic__tile--full {
  grid-column: 1 / -1;
}
.mosaic__tile {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 6px;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}
.mosaic__lead {
  background: var(--brown-deep);
  color: var(--cream-text);
  border-color: transparent;
}
.mosaic__lead h3, .mosaic__lead .mosaic__num { color: var(--cream-text); }

/* Dark-section mosaic: all tiles visually identical at rest.
   Hover state introduces brass accent on the border + lift. */
.s-dark .mosaic__tile {
  background: rgba(251, 247, 242, 0.05);
  border-color: rgba(251, 247, 242, 0.18);
  color: var(--cream-text);
  transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.s-dark .mosaic__tile:hover {
  transform: translateY(-4px);
  background: rgba(251, 247, 242, 0.10);
  border-color: var(--brass);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.5);
}
.s-dark .mosaic__tile .mosaic__title { color: var(--cream-text); }
.s-dark .mosaic__tile .mosaic__body { color: rgba(251, 247, 242, 0.78); }
/* Lead tile uses identical resting style — hover differentiation handles it */
.s-dark .mosaic__lead {
  background: rgba(251, 247, 242, 0.05);
  border-color: rgba(251, 247, 242, 0.18);
  color: var(--cream-text);
}
.s-dark .mosaic__lead:hover {
  background: rgba(251, 247, 242, 0.10);
  border-color: var(--brass);
}
.s-dark .mosaic__lead .mosaic__title,
.s-dark .mosaic__lead h3 { color: var(--cream-text); }
.s-dark .mosaic__lead .mosaic__body { color: rgba(251, 247, 242, 0.85); }
.mosaic__num {
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--brass);
  letter-spacing: 0.05em;
}
.mosaic__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mosaic__body { font-size: 0.98rem; line-height: 1.55; color: var(--brown); font-family: var(--f-sans); }
.mosaic__lead .mosaic__body { color: rgba(251, 247, 242, 0.85); font-size: 1.05rem; }

@media (max-width: 820px) {
  .mosaic { grid-template-columns: 1fr; }
  .mosaic__lead { grid-row: auto; }
}

/* Three-column bring list
   ----------------------------------------------------------------------- */
.brings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.brings__item { position: relative; padding-left: 0; }
.brings__num {
  font-family: var(--f-display);
  font-size: clamp(4rem, 7vw, 6rem);
  color: var(--brass);
  line-height: 0.9;
  display: block;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.brings__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  margin-bottom: 0.75rem;
  color: var(--brown-deep);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.s-dark .brings__title { color: var(--cream-text); }
.brings__body { font-size: 1rem; line-height: 1.55; color: var(--brown); font-family: var(--f-sans); }
.s-dark .brings__body { color: rgba(251, 247, 242, 0.82); }

@media (max-width: 820px) {
  .brings { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Reach figure
   ----------------------------------------------------------------------- */
.reach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.reach__figure {
  font-family: var(--f-display);
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--brown-deep);
}
.s-dark .reach__figure { color: var(--cream-text); }
.reach__caption {
  font-family: var(--f-sans);
  font-size: var(--t-lede);
  color: var(--brown);
  max-width: 36ch;
}
.s-dark .reach__caption { color: rgba(251, 247, 242, 0.85); }
.reach__breakdown {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  color: var(--brown);
}
.s-dark .reach__breakdown { color: rgba(251, 247, 242, 0.78); }
.reach__breakdown div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}
.s-dark .reach__breakdown div { border-color: rgba(251, 247, 242, 0.18); }
.reach__breakdown strong { font-weight: 600; color: var(--brown-deep); }
.s-dark .reach__breakdown strong { color: var(--cream-text); }
.reach__caveat {
  margin-top: 0.85rem;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--brown);
  opacity: 0.7;
}
.s-dark .reach__caveat { color: rgba(251, 247, 242, 0.6); }

@media (max-width: 820px) {
  .reach { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Steps
   ----------------------------------------------------------------------- */
.steps { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); }
.step {
  display: grid;
  grid-template-columns: clamp(5rem, 10vw, 9rem) 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.step__num {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  color: var(--brass);
  line-height: 0.85;
  letter-spacing: 0.02em;
}
.step__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  margin-bottom: 0.75rem;
  color: var(--brown-deep);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.step__body { font-family: var(--f-sans); font-size: 1.02rem; line-height: 1.55; color: var(--brown); max-width: 55ch; }

@media (max-width: 820px) {
  .step { grid-template-columns: 1fr; gap: 0.5rem; }
  .step__num { font-size: 3rem; }
}

/* Cream-text accent — replaces the old italic emphasis; used in headlines
   ----------------------------------------------------------------------- */
.accent { color: var(--cream-text); }
.s-dark .accent,
.home-section--dark .accent { color: var(--brass); }

/* Photo tone — warm sepia treatment to tie images into the cream/brown palette
   Applied to all content photos. Excluded: logos (already filtered to white/mono)
   and the hero portrait (cleaned and tinted in source).
   ----------------------------------------------------------------------- */
.home-section__media img,
.feature__media img,
.stage-grid__item img,
.hero__media img,
.hero__media video,
.mosaic img,
.books__img img {
  filter: sepia(0.30) saturate(0.88) contrast(1.02);
}
/* Logos stay clean (their own white-invert filter handles them) */
.logo-row__item img { filter: brightness(0) invert(1); }

/* Logo strip — auto-scrolling marquee (smooth, seamless, GPU-accelerated)
   -----------------------------------------------------------------------
   How it works:
   - HTML contains TWO copies of the items, back-to-back.
   - The track is translated by exactly -50% of its own width over the duration.
   - At the end of the animation the position is identical to the start (because
     the second copy lines up exactly where the first started), so the loop is
     seamless. No JS measurement, no snap.
   - We avoid mask gradients and edge fades — they caused visual "disappearing"
     on iPad/Safari. The dark brown band provides its own visual frame.
*/
.logo-row {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--brown-deep);
  color: var(--cream-text);
  overflow: hidden;
  position: relative;
}
.logo-row__label {
  text-align: center;
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 1.9rem;
}
.logo-row__viewport {
  overflow: hidden;
  width: 100%;
}
.logo-row__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  width: max-content;
  animation: logo-scroll var(--scroll-duration, 40s) linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.logo-row__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(32px, 3.4vw, 48px);
  flex: 0 0 auto;
  /* Prevent sub-pixel rendering causing jitter */
  transform: translateZ(0);
}
.logo-row__item img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.78;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s;
  pointer-events: none;  /* avoids hover flicker disrupting scroll */
}

@keyframes logo-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-row__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* Books strip
   ----------------------------------------------------------------------- */
.books {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.books__img {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--paper);
}
.books__img img { width: 100%; height: 100%; object-fit: cover; }
.books__list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.books__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.25rem;
}
.books__item-title { font-family: var(--f-display); font-size: 1.6rem; color: var(--brown-deep); text-transform: uppercase; letter-spacing: 0.02em; }
.books__item-meta { font-family: var(--f-sans); font-size: 0.85rem; color: var(--brown); opacity: 0.8; }
.books__item a { color: var(--brass); font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 820px) {
  .books { grid-template-columns: 1fr; }
}

/* Media outlets grid
   ----------------------------------------------------------------------- */
.outlets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.outlet {
  background: var(--paper);
  padding: 1.15rem 1.25rem;
  border-radius: 4px;
  border: 1px solid var(--rule);
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--brown-deep);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Image features
   ----------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.feature--flip { direction: rtl; }
.feature--flip > * { direction: ltr; }
.feature__media {
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(42, 28, 16, 0.4);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media--square { aspect-ratio: 1 / 1; }
.feature__media--wide { aspect-ratio: 4 / 3; }

/* Mono treatment for newspapers image */
.feature__media--mono img,
img.is-mono {
  filter: grayscale(100%) contrast(1.05);
}

@media (max-width: 820px) {
  .feature, .feature--flip { grid-template-columns: 1fr; direction: ltr; }
}

/* Stage grid
   ----------------------------------------------------------------------- */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.stage-grid__item {
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
}
.s-dark .stage-grid__item { background: rgba(251, 247, 242, 0.06); }
.stage-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.stage-grid__item:hover img { transform: scale(1.04); }
.stage-grid__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (max-width: 820px) {
  .stage-grid { grid-template-columns: 1fr 1fr; }
  .stage-grid__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
}

/* Contact form
   ----------------------------------------------------------------------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.form__field { display: flex; flex-direction: column; gap: 0.5rem; }
.form__field--full { grid-column: 1 / -1; }
.form__label {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass);
}
.form__input, .form__textarea, .form__select {
  font-family: var(--f-sans);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  transition: border-color 0.2s;
}
.s-dark .form__input,
.s-dark .form__textarea,
.s-dark .form__select {
  background: rgba(251, 247, 242, 0.08);
  border-color: rgba(251, 247, 242, 0.22);
  color: var(--cream-text);
}
.form__textarea { resize: vertical; min-height: 140px; }
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: 0;
  border-color: var(--brass);
}
.form__submit-row { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.form__status {
  grid-column: 1 / -1;
  font-family: var(--f-sans);
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  display: none;
}
.form__status.is-success {
  display: block;
  background: rgba(184, 133, 47, 0.18);
  color: var(--brown-deep);
  border: 1px solid var(--brass);
}
.form__status.is-error {
  display: block;
  background: rgba(170, 50, 50, 0.12);
  color: #8b2424;
  border: 1px solid #c75050;
}

@media (max-width: 600px) {
  .form { grid-template-columns: 1fr; }
}

/* Footer
   ----------------------------------------------------------------------- */
.footer {
  padding: 1.75rem 0 1.5rem;
  background: var(--brown-deep);
  color: rgba(251, 247, 242, 0.72);
  font-family: var(--f-sans);
  font-size: 0.82rem;
  line-height: 1.55;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(251, 247, 242, 0.14);
  min-height: 2.4rem;  /* matches social icon height for stable row */
}
.footer__brand {
  font-family: var(--f-display);
  font-size: 2.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream-text);
  line-height: 1;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  height: 2.4rem;  /* matches the social anchor height so they level perfectly */
  /* Bebas Neue has empty space below the cap baseline; pull text up
     visually so optical centre matches the icons */
  transform: translateY(0.18rem);
}
.footer__socials {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin: 0;
}
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: rgba(251, 247, 242, 0.85);
  transition: color 0.2s, transform 0.2s;
}
.footer__socials a:hover { color: var(--brass); transform: translateY(-2px); }
.footer__socials svg { width: 100%; height: 100%; fill: currentColor; }
.footer__legal { font-size: 0.78rem; opacity: 0.78; max-width: 80ch; }
.footer__legal a {
  color: var(--brass);
  text-decoration: underline;
  text-decoration-color: rgba(184, 133, 47, 0.4);
}
.footer__legal a:hover { text-decoration-color: var(--brass); }

/* Utility
   ----------------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
.center { text-align: center; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* =========================================================================
   PREMIUM MOTION & EDITORIAL CALLOUT COMPONENTS  (v34 → v5 layer)
   ----------------------------------------------------------------------- 
   Adds choreographed scroll-driven motion and the new editorial callout
   format used on the home page (specifics row + journo quote card in
   place of the old right-hand image).
   ========================================================================= */

/* The motion timing curve — high initial velocity, long deceleration tail.
   This is the single "expensive feeling" curve used everywhere. */
:root {
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-deep:    cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-d:     900ms;
}

/* ---- Reveal system (overrides the simple opacity/translate rule above) ---- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--reveal-d) var(--ease-premium),
    transform var(--reveal-d) var(--ease-premium);
  will-change: transform, opacity;
}
.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variant choreography — each element type gets its own timing & motion */

/* Eyebrow: tiny hairline draws across as it lifts in */
.reveal[data-reveal="eyebrow"] {
  position: relative;
  padding-left: 0;
  transform: translate3d(-6px, 0, 0);
  transition:
    opacity 700ms var(--ease-premium),
    transform 700ms var(--ease-premium);
}
.reveal[data-reveal="eyebrow"].is-in {
  transform: translate3d(0, 0, 0);
}
.reveal[data-reveal="eyebrow"]::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0;
  transition: width 900ms var(--ease-premium) 150ms,
              margin-right 900ms var(--ease-premium) 150ms;
}
.reveal[data-reveal="eyebrow"].is-in::before {
  width: 28px;
  margin-right: 12px;
}

/* Title: line-by-line mask reveal. Each <br>-separated line in the
   title is wrapped at render time by JS into .reveal-line spans. */
.reveal[data-reveal="title"] {
  transform: translate3d(0, 0, 0);
  opacity: 1;          /* the lines handle their own opacity */
  transition: none;
}
.reveal-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.02em;  /* keep descenders from being clipped */
}
.reveal-line__inner {
  display: inline-block;
  transform: translate3d(0, 102%, 0);
  transition: transform 1100ms var(--ease-premium);
  will-change: transform;
}
.reveal[data-reveal="title"].is-in .reveal-line:nth-child(1) .reveal-line__inner {
  transform: translate3d(0, 0, 0);
  transition-delay: 100ms;
}
.reveal[data-reveal="title"].is-in .reveal-line:nth-child(2) .reveal-line__inner {
  transform: translate3d(0, 0, 0);
  transition-delay: 260ms;
}

/* Lede & CTA: gentle rise with subtle delay so they trail the title */
.reveal[data-reveal="lede"] { transition-delay: 380ms; }
.reveal[data-reveal="specifics"] { transition-delay: 480ms; }
.reveal[data-reveal="cta"] { transition-delay: 580ms; }

/* Quote card: slides in from the opposite side of the section. Flipped
   sections (collaborate) get the mirror motion via the parent grid. */
.reveal[data-reveal="quote"] {
  transform: translate3d(36px, 24px, 0) scale(0.98);
  transition:
    opacity 1100ms var(--ease-premium) 200ms,
    transform 1100ms var(--ease-premium) 200ms;
}
.reveal[data-reveal="quote"].is-in {
  transform: translate3d(0, 0, 0) scale(1);
}
.home-section__grid--flip .reveal[data-reveal="quote"] {
  transform: translate3d(-36px, 24px, 0) scale(0.98);
}
.home-section__grid--flip .reveal[data-reveal="quote"].is-in {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Marquees: very gentle. Just opacity, no transform — the marquee itself moves */
.reveal[data-reveal="marquee"] {
  transform: none;
  transition: opacity 1400ms var(--ease-premium);
}

/* Reduced motion: honour user preference, kill all the choreography */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal[data-reveal="quote"],
  .reveal[data-reveal="eyebrow"],
  .reveal-line__inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal[data-reveal="eyebrow"]::before {
    width: 28px;
    margin-right: 12px;
    transition: none;
  }
}

/* =========================================================================
   HOME SECTION — copy + quote (new editorial format)
   ========================================================================= */

/* Adjust the existing grid slightly so the quote-card column has a tighter
   container than the previous image cell. */
.home-section .home-section__grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
}

.home-section__copy {
  position: relative;
}

/* The specifics row sits between the lede and the CTA. It's a single line
   of small editorial copy: a label, then a value with bullet separators. */
.home-section__specifics {
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 1rem 0 0 0;
  border-top: 1px solid var(--rule);
}
.home-section--dark .home-section__specifics { border-top-color: var(--rule-light); }

.home-section__specifics li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: baseline;
  padding-block: 0.15rem;
}
.home-section__specifics-label {
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown);
  opacity: 0.85;
  white-space: nowrap;
}
.home-section--dark .home-section__specifics-label { color: var(--brass); opacity: 1; }
.home-section__specifics-value {
  font-family: var(--f-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--brown-deep);
  font-weight: 500;
}
.home-section--dark .home-section__specifics-value { color: var(--cream-text); }

/* =========================================================================
   HOME SECTION — quote card (replaces the image-on-right cell)
   ========================================================================= */
.home-section__quote {
  position: relative;
  padding: clamp(2rem, 3.4vw, 3.25rem) clamp(1.75rem, 3vw, 2.75rem);
  background:
    linear-gradient(180deg, rgba(251, 247, 242, 0.55), rgba(251, 247, 242, 0.25));
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(251, 247, 242, 0.6) inset,
    0 30px 60px -32px rgba(42, 28, 16, 0.35);
  overflow: hidden;
}
/* A spine of brass along the top-left corner, the recurring editorial motif */
.home-section__quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--brass);
}
.home-section__quote::after {
  content: "";
  position: absolute;
  top: 0;
  left: 56px;
  width: 1px;
  height: 56px;
  background: var(--brass);
  opacity: 0.6;
}

.home-section__quote-mark {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  line-height: 0.55;
  color: var(--brass);
  margin-bottom: 1.25rem;
  user-select: none;
}

.home-section__quote-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.55vw, 1.55rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--brown-deep);
  margin: 0 0 1.75rem 0;
  text-transform: none;
}

.home-section__quote-attrib {
  margin: 0;
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown-deep);
  line-height: 1.5;
}
.home-section__quote-attrib span {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--brown);
  opacity: 0.78;
  margin-top: 0.4rem;
}

/* Dark-section variant (in case a callout ever goes onto a dark background) */
.home-section--dark .home-section__quote {
  background: linear-gradient(180deg, rgba(251, 247, 242, 0.08), rgba(251, 247, 242, 0.03));
  border-color: var(--rule-light);
}
.home-section--dark .home-section__quote-text { color: var(--cream-text); }
.home-section--dark .home-section__quote-attrib { color: var(--cream-text); }
.home-section--dark .home-section__quote-attrib span { color: rgba(251, 247, 242, 0.65); }

/* =========================================================================
   PARALLAX DEPTH — quote card drifts slower than scroll
   Controlled by JS setting --parallax-y on the element, in px.
   ========================================================================= */
.home-section__quote {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  /* Smooth out the JS scroll updates so per-frame jitter is invisible */
  transition: transform 80ms linear;
}
/* But during the reveal, the parallax transform must not fight the reveal
   transform. The reveal animation sets transform directly; once it lands
   in .is-in, this transition runs. The reveal class block already overrides. */
.home-section__quote.reveal { transition: opacity 1100ms var(--ease-premium) 200ms,
                                          transform 1100ms var(--ease-premium) 200ms; }
.home-section__quote.reveal.is-in { transition: transform 80ms linear,
                                                opacity 1100ms var(--ease-premium) 200ms; }

@media (prefers-reduced-motion: reduce) {
  .home-section__quote { transform: none !important; }
}

/* =========================================================================
   MOBILE STACKING
   ========================================================================= */
@media (max-width: 820px) {
  .home-section .home-section__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .home-section__quote {
    padding: 1.75rem 1.5rem;
  }
  .home-section__specifics li {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
  }
  /* On mobile, kill the horizontal slide on quote cards (just rises in) */
  .reveal[data-reveal="quote"],
  .home-section__grid--flip .reveal[data-reveal="quote"] {
    transform: translate3d(0, 28px, 0) scale(1);
  }
  .reveal[data-reveal="quote"].is-in,
  .home-section__grid--flip .reveal[data-reveal="quote"].is-in {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* =========================================================================
   HERO VIDEO — soft feather where it meets the nav bar below
   Adds depth: the video's bottom edge doesn't slam-cut into the cream bar.
   ========================================================================= */
.hero {
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(228, 199, 169, 0.35));
  z-index: 2;
}

/* =========================================================================
   HOME NAV BAR — refined hover state with brass underline grow
   ========================================================================= */
.home-bar__link {
  position: relative;
  transition: color 320ms var(--ease-premium), transform 320ms var(--ease-premium);
}
.home-bar__link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -6px;
  height: 1px;
  background: var(--brass);
  transition: left 420ms var(--ease-premium), right 420ms var(--ease-premium);
}
.home-bar__link:hover::after {
  left: 0;
  right: 0;
}


/* Legal page styles
   ----------------------------------------------------------------------- */
.legal-content { max-width: 70ch; margin: 0 auto; }
.legal-content h2 {
  font-size: var(--t-h2);
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.legal-content h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.legal-content h3 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--brown-deep);
}
.legal-content p,
.legal-content ul {
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brown);
  margin-bottom: 1.2rem;
}
.legal-content ul { padding-left: 1.5rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a {
  color: var(--brass);
  text-decoration: underline;
  text-decoration-color: rgba(184, 133, 47, 0.4);
}
.legal-content .last-updated {
  font-family: var(--f-sans);
  font-size: 0.85rem;
  color: var(--brown);
  opacity: 0.75;
  margin-bottom: 1.5rem;
}

/* Legal page: thin horizontal rule between A/B/C/D sections.
   The top border on each content section gives a single fine line where
   the cream background continues unbroken, so the page reads as one
   document but with clear section boundaries. */
.legal-divider {
  border-top: 1px solid var(--rule);
}