/* ============================================================================
   Jesse Wilson — site stylesheet
   Layered on top of Bootstrap 5 (CDN). Plain CSS + custom properties, no build
   step. Palette and type scale come from the PRD sections 4.2–4.3; nothing here
   should introduce a colour or font outside those tables.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* Palette (PRD 4.2) */
  --ink:         #262922;
  --cream:       #FAF6EC;
  --parchment:   #F2ECDD;
  --sage:        #7E8C6C;
  --olive:       #4E5A3E;
  --dusty-gold:  #C4A25F;
  --terracotta:  #B97455;
  --stone:       #6B6558;
  --mist:        #E4E7DE;

  /* Contrast-checked derivatives.
     Measured against --cream (#FAF6EC), WCAG 2.1:
       ink   14.1:1   stone 5.4:1   olive 6.8:1   — safe for body text
       sage   3.3:1   terracotta 3.4:1            — LARGE TEXT / non-text only
     So: links and small accent text use --olive, never --sage. --sage is for
     rules, icons, decorative fills and 24px+ display text. --terracotta is
     editorial only (one underline or badge per page), never body copy. */
  --link:        var(--olive);
  --link-hover:  var(--ink);

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm — "unhurried" means generous vertical space (PRD 4.4) */
  --section-y:    clamp(4.5rem, 9vw, 8rem);
  --section-y-sm: clamp(3.5rem, 6vw, 5.5rem);
  --measure:      36rem;   /* comfortable reading width */
  --radius:       8px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------- 2. Base & texture */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A whisper of paper grain, to sit with the gouache imagery rather than
   against it. Deliberately near-invisible — if you can see it, it's too much. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ 3. Typography */

h1, h2, h3, h4, .display-serif {
  font-family: var(--font-display);
  font-weight: 500;
  /* Fraunces variable axes — SOFT rounds the terminals, WONK keeps a little
     organic irregularity. This is the "soft optical variant" the PRD asks for. */
  font-variation-settings: "SOFT" 45, "WONK" 1;
  font-optical-sizing: auto;
  color: var(--ink);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem); line-height: 1.1; }
h2, .h2 { font-size: clamp(1.875rem, 1.4rem + 1.7vw, 2.25rem); line-height: 1.2; }
h3, .h3 { font-size: 1.375rem; line-height: 1.3; }

p { margin-bottom: 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--link-hover); }

strong, b { font-weight: 600; }

.lede {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--stone);
}

.small-print,
.caption {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--stone);
}

/* Eyebrow — the small uppercase kicker above a headline */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.9rem;
}

.eyebrow--olive { color: var(--olive); }

/* Pull-quote / tagline */
.pull-quote,
.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 55, "WONK" 1;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.pull-quote {
  margin: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--dusty-gold);
}

/* Rich text arriving from the CMS — give it the same rhythm as hand-written copy */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h2, .rich-text h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.rich-text ul, .rich-text ol { padding-left: 1.25rem; margin-bottom: 1.15em; }
.rich-text li { margin-bottom: 0.35em; }

.measure { max-width: var(--measure); }
.measure-wide { max-width: 46rem; }

/* -------------------------------------------------------- 4. Layout & rules */

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-sm); }

.section--parchment { background-color: var(--parchment); }

.section--ink {
  background-color: var(--ink);
  color: var(--cream);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--cream); }
.section--ink .lede,
.section--ink .small-print { color: var(--mist); }
.section--ink .eyebrow { color: var(--dusty-gold); }
.section--ink a { color: var(--dusty-gold); }
.section--ink a:hover, .section--ink a:focus { color: var(--cream); }
.section--ink .pull-quote { color: var(--cream); }
.section--ink hr,
.section--ink .rule { border-color: rgba(228, 231, 222, 0.25); }

/* Quiet dividers — a hairline, never a hard colour-block edge */
.rule {
  border: 0;
  border-top: 1px solid var(--mist);
  margin: 0;
  opacity: 1;
}

.rule--short {
  width: 3.5rem;
  border-top-width: 2px;
  border-color: var(--dusty-gold);
  margin-bottom: 1.75rem;
}

.rule--terracotta { border-color: var(--terracotta); }

/* ---------------------------------------------------------- 5. Buttons */

/* One CTA pattern, used everywhere: dusty gold on ink text (6.1:1).
   Terracotta is never a button. */
.btn-threshold,
.btn-threshold-outline {
  --btn-bg: var(--dusty-gold);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 220ms var(--ease),
              border-color 220ms var(--ease),
              color 220ms var(--ease),
              transform 220ms var(--ease);
}

.btn-threshold {
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}
.btn-threshold:hover,
.btn-threshold:focus-visible {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  transform: translateY(-1px);
}

.btn-threshold-outline {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-threshold-outline:hover,
.btn-threshold-outline:focus-visible {
  background-color: var(--dusty-gold);
  border-color: var(--dusty-gold);
  color: var(--ink);
  transform: translateY(-1px);
}

.section--ink .btn-threshold-outline {
  color: var(--cream);
  border-color: var(--mist);
}
.section--ink .btn-threshold-outline:hover,
.section--ink .btn-threshold-outline:focus-visible {
  background-color: var(--dusty-gold);
  border-color: var(--dusty-gold);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .btn-threshold:hover, .btn-threshold-outline:hover,
  .btn-threshold:focus-visible, .btn-threshold-outline:focus-visible { transform: none; }
}

/* A quieter tertiary action — text with a gold underline that grows */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--olive);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--dusty-gold), var(--dusty-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 260ms var(--ease), color 220ms var(--ease);
}
.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--ink);
  background-size: 100% 2px;
}
.link-arrow .arrow { transition: transform 260ms var(--ease); }
.link-arrow:hover .arrow { transform: translateX(3px); }

.section--ink .link-arrow { color: var(--dusty-gold); }
.section--ink .link-arrow:hover { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .link-arrow .arrow, .link-arrow:hover .arrow { transition: none; transform: none; }
}

/* ------------------------------------------------------ 6. Focus visibility */

/* Bootstrap's default ring is a washed-out blue that disappears on cream and
   on ink. Replace it with something visible on both grounds (PRD 10). */
:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 3px;
}
.section--ink :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--dusty-gold);
}
.btn-threshold:focus-visible,
.btn-threshold-outline:focus-visible { outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 2000;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--cream); }

/* ------------------------------------------------------------ 7. Navigation */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--cream);
  border-bottom: 1px solid var(--mist);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}

/* On the homepage the nav floats over the hero until you scroll */
.site-nav--over-hero {
  position: fixed;
  left: 0;
  right: 0;
  background-color: transparent;
  border-bottom-color: transparent;
}

/* Cream nav text at 15px needs 4.5:1, and these skies are bright enough that
   the hero's own top scrim only reaches ~2.9:1 behind the nav — measured off
   the rendered pixels, not assumed. Rather than darkening the top quarter of
   the painting (which would flatten it), the nav carries a short gradient of
   its own that dies out just below the bar, and disappears entirely once the
   nav goes solid. */
.site-nav--over-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(38, 41, 34, 0.72) 0%,
    rgba(38, 41, 34, 0.58) 50%,
    rgba(38, 41, 34, 0.28) 75%,
    rgba(38, 41, 34, 0) 100%
  );
  transition: opacity 300ms var(--ease);
}
.site-nav--over-hero.is-scrolled::before { opacity: 0; }
/* Only the navbar needs lifting above the scrim. Do NOT include .nav-panel
   here: it is a Bootstrap .offcanvas, and overriding its position:fixed puts
   a 575px hidden panel back into the header's flow, which inflates the
   header box and makes the 200%-height scrim above cover the whole hero. */
.site-nav--over-hero .navbar { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-nav--over-hero::before { transition: none; }
}
.site-nav--over-hero .nav-link-threshold,
.site-nav--over-hero .site-wordmark,
.site-nav--over-hero .navbar-toggler-custom {
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(38, 41, 34, 0.5), 0 2px 18px rgba(38, 41, 34, 0.4);
}
.site-nav--over-hero .site-wordmark .wordmark-rule { background-color: var(--dusty-gold); }
.site-nav--over-hero.is-scrolled {
  background-color: var(--cream);
  border-bottom-color: var(--mist);
  box-shadow: 0 1px 20px rgba(38, 41, 34, 0.06);
}
.site-nav--over-hero.is-scrolled .nav-link-threshold,
.site-nav--over-hero.is-scrolled .site-wordmark,
.site-nav--over-hero.is-scrolled .navbar-toggler-custom {
  color: var(--ink);
  text-shadow: none;
}

/* Generous vertical padding — the bar reads as unhurried rather than
   app-like. Do NOT put Bootstrap's .py-0 back on the <nav>: it carries
   !important and silently collapses this to nothing. */
.site-nav .navbar { padding-block: clamp(1.25rem, 2.2vw, 1.75rem); }

.site-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 45, "WONK" 1;
  font-size: 1.25rem;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.15;
}
.site-wordmark:hover, .site-wordmark:focus { color: var(--ink); }
.site-wordmark .wordmark-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.15rem;
}

.nav-link-threshold {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  transition: color 200ms var(--ease);
}
.nav-link-threshold::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 1px;
  background-color: var(--dusty-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
.nav-link-threshold:hover::after,
.nav-link-threshold:focus-visible::after,
.nav-link-threshold[aria-current="page"]::after,
.nav-link-threshold.is-active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nav-link-threshold::after { transition: none; }
}

/* Work dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: 0; padding: 0.5rem 0; }
.nav-dropdown-toggle .caret {
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform 220ms var(--ease);
}
.nav-dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1rem;
  min-width: 16rem;
  background-color: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(38, 41, 34, 0.10);
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
}
.nav-dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 5px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background-color: var(--parchment);
  color: var(--olive);
}
.nav-dropdown-menu .menu-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--stone);
  margin-top: 0.1rem;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-menu { transition: none; }
}

/* Mobile panel. The Get Involved button lives OUTSIDE the collapse so it stays
   visible at every width (PRD 9). */
.navbar-toggler-custom {
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--ink);
  padding: 0.45rem 0.7rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-panel {
  background-color: var(--cream);
  border-left: 1px solid var(--mist);
  width: min(22rem, 86vw);
}

/* The panel lives inside the same <header>, so on the homepage it would inherit
   the over-hero treatment and render cream text on a cream surface. It is its
   own opaque surface — opt it back out. */
.site-nav--over-hero .nav-panel .nav-link-threshold,
.site-nav--over-hero .nav-panel .site-wordmark,
.site-nav--over-hero.is-scrolled .nav-panel .nav-link-threshold,
.site-nav--over-hero.is-scrolled .nav-panel .site-wordmark {
  color: var(--ink);
  text-shadow: none;
}
.site-nav--over-hero .nav-panel .nav-link-threshold:hover,
.site-nav--over-hero .nav-panel .nav-link-threshold:focus-visible {
  color: var(--olive);
}
.nav-panel .offcanvas-header { padding: 1.35rem 1.5rem 0.5rem; }
.nav-panel .offcanvas-body { padding: 0.5rem 1.5rem 2rem; }
.nav-panel .nav-link-threshold {
  display: block;
  font-size: 1.0625rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mist);
}
.nav-panel .nav-link-threshold::after { display: none; }
.nav-panel .nav-sub {
  list-style: none;
  padding: 0 0 0.4rem 0.9rem;
  margin: 0;
  border-bottom: 1px solid var(--mist);
}
.nav-panel .nav-sub a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--stone);
  text-decoration: none;
}
.nav-panel .nav-sub a:hover,
.nav-panel .nav-sub a:focus-visible { color: var(--olive); }
.nav-panel .nav-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  padding-top: 1.1rem;
  padding-bottom: 0.3rem;
  display: block;
}

/* -------------------------------------------------------------- 8. Heroes */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background-color: var(--ink);
}

.hero--home { min-height: min(92vh, 46rem); }
.hero--page { min-height: min(66vh, 34rem); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* <picture> is inline by default, which would collapse the height it's meant to
   fill. Every art_picture() wrapper needs to behave like the img inside it. */
.hero__media picture,
.card-threshold__media picture,
.image-band picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --focus is set per image so the figure and horizon survive the mobile crop
     instead of being centre-cropped by default (PRD 4.1). */
  object-position: var(--focus, 50% 50%);
  display: block;
}

/* Soft gradient scrim, not a flat overlay — keeps the painting readable as a
   painting while giving the text a floor to stand on (PRD 4.1). */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two soft gradients, not a flat overlay — the painting stays a painting
     (PRD 4.1). The bottom one gives the headline a floor; the top one gives the
     nav somewhere to sit, since these skies are pale enough to swallow cream
     text entirely. */
  background:
    linear-gradient(
      to bottom,
      rgba(38, 41, 34, 0.30) 0%,
      rgba(38, 41, 34, 0.16) 10%,
      rgba(38, 41, 34, 0.04) 19%,
      rgba(38, 41, 34, 0) 28%
    ),
    linear-gradient(
      to top,
      rgba(38, 41, 34, 0.82) 0%,
      rgba(38, 41, 34, 0.68) 28%,
      rgba(38, 41, 34, 0.44) 54%,
      rgba(38, 41, 34, 0.14) 78%,
      rgba(38, 41, 34, 0) 100%
    );
}

/* .hero--page is a shorter box (~530px vs ~736px), so identical percentage
   stops land higher up the painting and leave the eyebrow under-covered —
   measured at 3.9:1 against the lit valley on /walks. Tighten the stops for
   this variant only, so the tall homepage hero keeps the lighter treatment. */
.hero--page .hero__scrim {
  background:
    linear-gradient(
      to bottom,
      rgba(38, 41, 34, 0.30) 0%,
      rgba(38, 41, 34, 0.16) 10%,
      rgba(38, 41, 34, 0.04) 19%,
      rgba(38, 41, 34, 0) 28%
    ),
    linear-gradient(
      to top,
      rgba(38, 41, 34, 0.90) 0%,
      rgba(38, 41, 34, 0.83) 30%,
      rgba(38, 41, 34, 0.65) 58%,
      rgba(38, 41, 34, 0.26) 80%,
      rgba(38, 41, 34, 0) 100%
    );
}

.hero__inner {
  width: 100%;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.hero--home .hero__inner { padding-top: 10.5rem; }

.hero__content { max-width: 42rem; }

.hero h1 {
  color: var(--cream);
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 24px rgba(38, 41, 34, 0.35);
}

/* Hero eyebrows are cream, not gold.
   --dusty-gold small text cannot reach WCAG AA over these pale, golden skies at
   any workable scrim strength (it measures under 2:1 against the lit parts of
   the paintings). Cream over the scrim measures ~4.9:1 and passes. Gold stays
   the eyebrow colour on .section--ink, where it is 6.1:1. */
.hero .eyebrow {
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(38, 41, 34, 0.7), 0 2px 16px rgba(38, 41, 34, 0.5);
}

.hero__lede {
  color: var(--mist);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  max-width: 34rem;
  text-shadow: 0 1px 16px rgba(38, 41, 34, 0.4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.hero__note {
  color: var(--mist);
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 30rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(228, 231, 222, 0.28);
}

/* The painting sits taller on phones so the composition still reads */
@media (max-width: 767.98px) {
  .hero--home { min-height: 88vh; }
  .hero--page { min-height: 60vh; }
  .hero--home .hero__inner { padding-top: 8.25rem; }
}

/* ------------------------------------------------------- 9. Full-bleed band */

/* A painting used as a quiet divider between sections rather than a hard edge */
.image-band {
  position: relative;
  height: clamp(16rem, 34vw, 26rem);
  overflow: hidden;
  background-color: var(--ink);
}
.image-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  display: block;
}

/* ------------------------------------------------------------- 10. Cards */

.card-threshold {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 260ms var(--ease),
              box-shadow 260ms var(--ease),
              transform 260ms var(--ease);
}
.section--parchment .card-threshold { background-color: var(--cream); }

a.card-threshold:hover,
a.card-threshold:focus-visible {
  border-color: var(--sage);
  box-shadow: 0 14px 34px rgba(38, 41, 34, 0.09);
  transform: translateY(-3px);
  color: inherit;
}
a.card-threshold:hover .card-threshold__title,
a.card-threshold:focus-visible .card-threshold__title { color: var(--olive); }
a.card-threshold:hover .card-threshold__img,
a.card-threshold:focus-visible .card-threshold__img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  a.card-threshold:hover, a.card-threshold:focus-visible { transform: none; }
  a.card-threshold:hover .card-threshold__img { transform: none; }
}

.card-threshold__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--mist);
}
.card-threshold__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  display: block;
  transition: transform 600ms var(--ease);
}

.card-threshold__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.6rem 1.6rem 1.75rem;
}

.card-threshold__title {
  margin-bottom: 0.6rem;
  transition: color 200ms var(--ease);
}

.card-threshold__text {
  color: var(--stone);
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.card-threshold__foot { margin-top: auto; }

.card-threshold__meta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

/* Definition card — used by the Key Language section */
.definition {
  padding: 2rem 0 0;
  border-top: 2px solid var(--dusty-gold);
  height: 100%;
}
.definition__term {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  font-variation-settings: "SOFT" 45, "WONK" 1;
  margin-bottom: 0.15rem;
}
.definition__pron {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--stone);
  margin-bottom: 1rem;
  display: block;
}
.section--ink .definition__pron { color: var(--mist); opacity: 0.8; }
.definition__body { font-size: 1rem; }

/* Two-path invitation cards */
.path-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.section--parchment .path-card { background-color: var(--cream); }
.section--ink .path-card {
  background-color: rgba(250, 246, 236, 0.05);
  border-color: rgba(228, 231, 222, 0.22);
}
.path-card h3 { margin-bottom: 0.75rem; }
.path-card__text { color: var(--stone); margin-bottom: 1.5rem; }
.section--ink .path-card__text { color: var(--mist); }
.path-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  font-size: 1rem;
}
.path-card__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--stone);
}
.section--ink .path-card__list li { color: var(--mist); }
.path-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 1px;
  background-color: var(--dusty-gold);
}
.path-card__foot { margin-top: auto; }

/* ------------------------------------------------- 11. Empty state & notes */

.empty-state {
  border: 1px dashed var(--sage);
  border-radius: var(--radius);
  background-color: var(--parchment);
  padding: clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.empty-state h3 { margin-bottom: 0.75rem; }
.empty-state p { color: var(--stone); max-width: 30rem; margin-inline: auto; }

/* ------------------------------------------------------------ 12. Forms */

.form-threshold label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.45rem;
}

.form-threshold .form-control,
.form-threshold .form-select {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background-color: var(--cream);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  box-shadow: none;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.form-threshold .form-control::placeholder { color: var(--stone); opacity: 0.65; }
.form-threshold .form-control:focus,
.form-threshold .form-select:focus {
  border-color: var(--sage);
  background-color: var(--cream);
  box-shadow: none;
}
.form-threshold .form-text { color: var(--stone); font-size: 0.8125rem; }

.form-threshold .field { margin-bottom: 1.5rem; }

/* Honeypot — hidden from people, reachable by bots */
.field-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  background-color: var(--parchment);
  border-left: 2px solid var(--dusty-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.35rem;
  font-size: 0.9375rem;
  color: var(--stone);
}

.alert-threshold {
  border-radius: var(--radius);
  border: 1px solid var(--sage);
  background-color: var(--parchment);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.alert-threshold--error { border-color: var(--terracotta); }
.alert-threshold h3 { font-size: 1.125rem; margin-bottom: 0.4rem; }
.alert-threshold p { color: var(--stone); font-size: 0.9375rem; }

/* ------------------------------------------------------------ 13. Footer */

.site-footer {
  background-color: var(--ink);
  color: var(--mist);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
.site-footer a { color: var(--mist); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible {
  color: var(--dusty-gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.site-footer .site-wordmark { color: var(--cream); }
.site-footer .site-wordmark:hover { color: var(--cream); }
.site-footer .tagline { color: var(--cream); }
.site-footer .footer-heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusty-gold);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.55rem; font-size: 0.9375rem; }
.site-footer .footer-rule {
  border-top: 1px solid rgba(228, 231, 222, 0.18);
  margin-block: 2.75rem 1.75rem;
}
.site-footer .colophon {
  font-size: 0.8125rem;
  color: var(--mist);
  opacity: 0.7;
}

/* Mailing list */
.signup-form { max-width: 26rem; }
.signup-form .input-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.signup-form input[type="email"] {
  flex: 1 1 12rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--cream);
  background-color: rgba(250, 246, 236, 0.07);
  border: 1px solid rgba(228, 231, 222, 0.3);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}
.signup-form input[type="email"]::placeholder { color: var(--mist); opacity: 0.6; }
.signup-form input[type="email"]:focus {
  outline: 2px solid var(--dusty-gold);
  outline-offset: 2px;
  border-color: transparent;
}

/* -------------------------------------------------- 14. Scroll reveal */

/* Soft fade-and-rise. Slow, no bounce, and switched off entirely for anyone
   who has asked for reduced motion (PRD 4.4 / 10). */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Staggered children, gently */
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* If JS never runs, nothing should stay invisible */
.no-js .reveal { opacity: 1; transform: none; }

/* Without JS the nav never gets .is-scrolled, so a floating cream-on-transparent
   nav would end up as cream text over the cream page once you scrolled past the
   hero. Pin it to the solid treatment instead. */
.no-js .site-nav--over-hero {
  position: sticky;
  background-color: var(--cream);
  border-bottom-color: var(--mist);
}
.no-js .site-nav--over-hero .nav-link-threshold,
.no-js .site-nav--over-hero .site-wordmark,
.no-js .site-nav--over-hero .navbar-toggler-custom {
  color: var(--ink);
  text-shadow: none;
}

/* -------------------------------------------------------- 15. Utilities */

.text-stone { color: var(--stone) !important; }
.text-olive { color: var(--olive) !important; }
.bg-parchment { background-color: var(--parchment) !important; }

.stack-lg > * + * { margin-top: 2.5rem; }

/* Editorial accent — the single terracotta moment a page is allowed */
.accent-underline {
  background-image: linear-gradient(var(--terracotta), var(--terracotta));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 2px;
  padding-bottom: 1px;
}

.print-only { display: none; }

/* Approach-page inset — a tall crop of a wide painting */
.portrait-inset {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  display: block;
}