:root {
  --paper:     #FAF7F1;

  --linen:     #F1E7DC;

  --stone:     #E5E0D6;
  --stone-2:   #F1EDE4;   /* a lighter step, for cards on stone */
  --taupe:     #BEB6A6;   /* hairlines, dividers, quiet marks */

  --dusk:      #3A4A63;

  /* The three programme colours */
  --sola:      #542A9B;   /* workshops — the purple sola flower in the
                             finished-work photograph. Brown was the gathering
                             room, which is where the workshops happen but is
                             not what they are; this is what people made.
                             9.0:1 under --paper, 6.5:1 under the muted label. */
  --timber:    #5E3A24;   /* no longer a programme colour — kept because it is
                             the documented fallback for --dusk */
  --pasture:   #647425;

  --charcoal:  #2C211C;
  --charcoal-2:#3A2C25;   /* cards on charcoal — 11.9:1 / 6.5:1 */

  /* Ink */
  --ink:    #212121;      /* 16.1 white · 12.1 stone */
  --ink-2:  #55504A;      /* secondary voice — 8.0 paper · 6.6 linen · 6.0 stone */
  --ink-3:  #665F56;      /* 6.3 paper · 5.1 linen · 4.7 stone · 5.4 stone-2 */

  /* The one interactive colour. Warm, inside the taupe family. */
  --umber:    #5F544A;    /* 7.4 paper · 6.1 linen · 5.5 stone */
  --umber-lo: #443C34;

  --accent:    #7E252C;
  --accent-lo: #5F1C21;

  /* The workshop palette — six dabs on /creative-workshops, one per
     photograph in that page's reel. Each was measured off its own frame as
     the colour most distinctive to it, because the pine panelling and the
     tungsten light make every frame's *dominant* colour the same brown:
       --dab-teal   the arena light through the window   (workshop-demo)
       --dab-gold   the retriever and the blonde canvas  (workshop-room)
       --dab-red    the Solo cup and the crimson on the plate (workshop-brushwork)
       --dab-clay   the table under the paint plates     (workshop-cat-table)
       --dab-violet the purple sola flower               (workshop-finished-pots)
       --dab-blue   the painted canvas's sky, measured    (workshop-cat-canvas)
     These are paint, and paint only. They are dabs a few pixels across on a
     paper plate; none of them may fill a panel, tint a band or colour type.
     --dab-teal especially: a 43%-saturated cyan is the clinical register this
     organisation spends four pages disclaiming, which is why the chair cyan
     has deliberately never had a token. This one earns its name by being
     16px wide and staying that way. --dab-blue is a different, more indigo
     hue (measured ~226°) than --dab-teal's cyan (~193°) — the same rule
     applies to it for the same reason. */
  /* The plates in these photographs are white — brighter than --paper, which
     is a warm off-white. On a --paper section the tone alone is only 1.09, so
     the plate reads as an object by its shadow, not by its colour. */
  --plate:      #FFFFFF;

  --dab-teal:   #59A9BE;
  --dab-gold:   #D2AE62;
  --dab-red:    #810303;
  --dab-clay:   #D48437;
  --dab-violet: var(--sola);
  --dab-blue:   #45568D;

  /* On charcoal */
  --on-dark:     #F2F1EE; /* 13.2:1 */
  --on-dark-dim: #B9B5AE; /* 6.4:1 — clears AA comfortably */

  /* Hairlines. Ink at low alpha reads as a rule, not as a border. */
  --hair:    rgba(33, 33, 33, .14);
  --hair-lo: rgba(33, 33, 33, .08);
  --hair-hi: rgba(33, 33, 33, .30);
  --hair-dk: rgba(242, 241, 238, .16);

  /* Type */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --lbl: 12px;
  --lbl-track: .16em;

  --lead: clamp(1.16rem, 1.5vw, 1.28rem);

  --sec-y:    clamp(68px, 8vw, 116px);
  --sec-y-lg: clamp(92px, 11vw, 156px);
  --sec-y-sm: clamp(44px, 5.5vw, 76px);

  --wrap: 1160px;
  --gut: 24px;            /* the page gutter — anything breaking out of
                             .page negates this, never a literal */
  --read: 680px;   /* reading measure: the letter, legal copy */
  --r: 3px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}


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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { scroll-padding-top: 92px; }
@media (max-width: 460px) { html { scroll-padding-top: 82px; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


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

[hidden] { display: none; }

h1, h2, h3, h4, p, li, dd, dt, summary, address { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4rem);   line-height: 1.06; letter-spacing: -.018em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.14; letter-spacing: -.012em; }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.28; font-weight: 700; letter-spacing: -.004em; }
h4 { font-size: 1.15rem;                      line-height: 1.35; font-weight: 700; letter-spacing: 0; }

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

a { color: var(--umber); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--umber-lo); }

strong, b { font-weight: 700; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: .45em; }

hr { border: 0; border-top: 1px solid var(--hair); margin: 2.5rem 0; }

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

/* Focus is visible everywhere and never hidden behind a hover style. */
:focus-visible {
  outline: 2px solid var(--umber);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible,
.site-foot :focus-visible { outline-color: var(--on-dark); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; font-weight: 600; font-size: .9rem;
}
.skip-link:focus { left: 8px; top: 8px; }

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


.page {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.page--narrow { max-width: 880px; }

.section { padding: var(--sec-y) 0; }
.section--lg { padding: var(--sec-y-lg) 0; }
.section--sm { padding: var(--sec-y-sm) 0; }
.section--linen { background: var(--linen); }

/* .section--field — the one band on the home page that is a colour rather
   than a paper: a watercolour wash on paper, so the colour arrives as a made
   mark rather than as a fill. It sits behind the letter, which is the page's
   emotional centre and the one place that can hold a whole band of colour
   without it reading as decoration. Same argument as brushstroke.webp — stock, but
   ornament with no subject, not stock standing in for this organisation's
   rooms. Provenance and the rejected alternates are in assets/README.md.
   The wash measures hue 195 at 89% saturation. That is far outside anything
   the interface holds, and it is only wearable because it is a photograph of
   pigment: CLAUDE.md's rule is that the site has no token for a saturated
   cyan and that the colour "lives in photographs only" — this is that case,
   not an exception to it. Nothing here may be sampled into :root.
   Positioned bottom: the wash's own pale edge falls where the type sits. */
.section--field {
  background:
    linear-gradient(100deg,
      rgba(250, 247, 241, .28) 0 24%,
      rgba(250, 247, 241, .10) 44%,
      rgba(250, 247, 241, 0) 60%),
    var(--linen) url('/assets/wash.webp') center bottom / cover;
}

@media (max-width: 900px) {
  .section--field {
    background:
      linear-gradient(
        rgba(250, 247, 241, .34) 0 42%,
        rgba(250, 247, 241, .16) 62%,
        rgba(250, 247, 241, 0) 100%),
      var(--linen) url('/assets/wash.webp') center bottom / cover;
  }
}

/* The veil above is insurance, not a scrim — the rule against scrims is about
   dark panels dropped over a photograph so white type can sit on top, and
   this is the opposite: the picture stays as light as it was painted and the
   ink stays ink. It is deliberately weak, because measured with the type
   hidden the band is comfortable: --ink holds 9.3:1 across the letter's own
   width and 8.1:1 at the band's darkest corner. What the veil buys is that
   `cover` recomposes at every viewport, so the saturated top of the wash does
   not always sit where it sits at 1280.
   The type still comes up a step. --ink-2 measures 4.6:1 at the letter and
   4.0:1 at that darkest corner — one side of the line and the other, decided
   by the reader's window — so the secondary voices are --ink here and links
   are --umber-lo. That is the tonal step a coloured band costs. The label
   above the heading is the one thing that does not move: --accent measures
   5.5:1 on the wash, which is the wine doing exactly its usual job. */
.section--field p { color: var(--ink); }
.section--field a { color: var(--umber-lo); }

/* The letter's rule down the left is --taupe everywhere else, which is the
   right amount of quiet on paper and measures 1.16:1 against the wash — not
   quiet, gone. --umber is the same register with a value that survives.
   The sign-off's second line comes up too: --ink-2 lands at 4.59:1 in the
   text column, which passes and would still be the first thing to fail when
   `cover` recomposes the wash at another width. */
.section--field .letter { border-left-color: var(--umber); }
.section--field .letter__sign span { color: var(--ink); }

/* The ghost button fills here, for the same reason .btn--primary inverts to
   paper on --charcoal: a transparent button with a hairline border needs a
   flat ground behind it to read as a button at all, and the wash gives it
   pigment that moves under the border. Paper, not --accent — the accent
   budget is one filled shape per page and the closing call already spends
   it. So this is solid without being a second invitation, which is right:
   "Read the whole story" is a door, not a call to act. */
.section--field .btn--ghost {
  background: var(--paper);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(33, 33, 33, .12);
}
.section--field .btn--ghost:hover {
  background: var(--stone-2);
  border-color: transparent;
  color: var(--ink);
}

/* .straddle — one element across a band boundary */
.straddle {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * (var(--sec-y) + var(--straddle, 48px)));
}
@media (max-width: 900px) { .straddle { margin-top: 0; } }

.section--dark { background: var(--charcoal); color: var(--on-dark); }
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark p  { color: var(--on-dark-dim); }
.section--dark a  { color: var(--on-dark); }
.section--dark hr { border-color: var(--hair-dk); }

.measure { max-width: var(--read); }
.center { text-align: center; }
.center .measure, .center .head__intro { margin-inline: auto; }

.head { margin-bottom: clamp(30px, 3.8vw, 54px); }
.head h2 { margin-bottom: .34em; }
.section--ways .head h2 { margin-bottom: calc(.34em + 15px); }
.head__intro {
  max-width: 54ch;
  font-size: var(--lead);
  line-height: 1.55;   /* larger type wants proportionally less leading than body's 1.68 */
  color: var(--ink);
  margin-bottom: 0;
}
.section--dark .head__intro { color: var(--on-dark-dim); }

.label {
  display: block;
  font-family: var(--sans);
  font-size: var(--lbl);
  font-weight: 700;
  letter-spacing: var(--lbl-track);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .95em;
}
.head > .label::before {
  content: "";
  display: block;
  width: 34px;
  border-top: 2px solid var(--accent);
  margin-bottom: .85em;
}
.center .head > .label::before,
.head--center > .label::before { margin-inline: auto; }
.section--dark .label { color: var(--on-dark-dim); }
.section--dark .head > .label::before { border-top-color: var(--on-dark-dim); }

.photo {
  background-color: var(--stone);
  background-image: var(--img, none);
  background-size: cover;
  background-position: center calc(var(--pos-y, 50%) + var(--drift, 0%));
  border-radius: var(--r);
}
.photo--tall  { aspect-ratio: 3 / 4; }
.photo--wide  { aspect-ratio: 16 / 10; }
.photo--square{ aspect-ratio: 1 / 1; }

.photo[style*="--ar"] { aspect-ratio: var(--ar); }

/* .photo--mount — a photograph on a mount board */
.photo--mount {
  box-shadow: var(--mount-x, 14px) var(--mount-y, 14px) 0 0
              var(--mount, var(--dusk));
}
@media (max-width: 900px) {
  .photo--mount { --mount-x: 0px; --mount-y: 10px; }
}

.photo--mount + figcaption { margin-top: calc(10px + var(--mount-y, 14px)); }

figure { margin: 0; }
figcaption {
  font-size: .86rem;
  color: var(--ink-3);
  margin-top: 10px;
  line-height: 1.5;
}


.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 241, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-head.is-scrolled {
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 14px rgba(33, 33, 33, .06);
}
.site-head > .page {
  display: flex; align-items: center; gap: 18px;
  min-height: 76px;
}

.brand-lockup {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink);
  margin-right: auto;
  padding: 6px 0;
  min-width: 0;
}
.brand-lockup svg { width: 32px; height: 32px; flex: none; }
.brand-lockup img { height: 38px; width: auto; flex: none; }
.brand-lockup .name {
  font-family: var(--display);
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.05;
  white-space: nowrap;
}
.brand-lockup .name small {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links__mark { display: none; }
.nav-links > li { margin: 0; }

.nav-links a,
.nav-dropdown-trigger {
  display: inline-block;
  font-family: var(--sans);
  font-size: .935rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: var(--r);
  border: 0; background: none; cursor: pointer;
  line-height: 1.3;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav-links a:hover,
.nav-dropdown-trigger:hover { color: var(--ink); background: rgba(33, 33, 33, .05); }

.nav-links a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.nav-cta {
  background: var(--ink) !important;
  color: var(--paper) !important;
  padding: 10px 20px !important;
  margin-left: 8px;
}
.nav-cta:hover { background: var(--umber-lo) !important; color: var(--paper) !important; }
.nav-cta[aria-current="page"] {
  background: var(--umber-lo) !important;
  box-shadow: inset 0 -2px 0 var(--paper);
}

.nav-item-dropdown { position: relative; }
.nav-dropdown-trigger::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 7px; vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.nav-item-dropdown.is-open .nav-dropdown-trigger::after { transform: rotate(-135deg) translateY(-2px); }

.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 300px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: 0 14px 40px rgba(33, 33, 33, .14);
  list-style: none; margin: 0; padding: 7px;
  opacity: 0; visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-item-dropdown.is-open .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
  display: block; padding: 10px 13px; width: 100%;
  font-weight: 700; color: var(--ink);
}
.nav-dropdown-menu a:hover { background: var(--stone-2); }
.nav-dropdown-menu .menu-desc {
  display: block;
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 2px;
  line-height: 1.45;
}

/* Hamburger */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
  flex: none;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%; width: 19px; height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform .24s var(--ease), opacity .18s var(--ease);
}
.nav-toggle span { top: 50%; margin-top: -.75px; }
.nav-toggle span::before { content: ""; left: 0; transform: none; top: -6px; }
.nav-toggle span::after  { content: ""; left: 0; transform: none; top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(33, 33, 33, .46);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }


.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans);
  font-size: 1rem; font-weight: 700;
  padding: 13px 26px;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--umber-lo); color: var(--paper); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair-hi); }
.btn--ghost:hover { background: rgba(33, 33, 33, .05); color: var(--ink); border-color: var(--ink); }

/* On photography and on charcoal the ghost button inverts. */
.section--dark .btn--ghost {
  color: var(--on-dark);
  border-color: rgba(242, 241, 238, .42);
}
.section--dark .btn--ghost:hover {
  background: rgba(242, 241, 238, .12);
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.section--dark .btn--primary { background: var(--paper); color: var(--ink); }
.section--dark .btn--primary:hover { background: var(--stone); color: var(--ink); }


.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }


.hero { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); }
.hero > .page { position: relative; z-index: 2; }


.hero h1 { margin-bottom: .34em; max-width: 17ch; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero--center h1, .hero--center .hero-lead { margin-inline: auto; }
.hero--center { text-align: center; }
.hero--center .btn-row { justify-content: center; }

.hero-lead {
  font-size: var(--lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 50ch;
  margin-bottom: 1.7em;
}

/* .hero--photo — the "decision" page hero */
.hero--photo {
  background: var(--linen);
  padding: clamp(40px, 5vw, 76px) 0 clamp(44px, 5.5vw, 84px);
}
.hero--photo > .page {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
.hero--photo h1 { max-width: 15ch; }
.hero--photo .hero-lead { max-width: 44ch; margin-bottom: 1.5em; }
.hero--photo__fig { margin: 0; }
.hero--photo__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  background: var(--taupe);   /* while it loads, not a white flash */
}

@media (max-width: 900px) {
  .hero--photo > .page { grid-template-columns: 1fr; gap: 26px; }
  .hero--photo__type { order: 2; }
  .hero--photo__fig { order: 1; }
  .hero--photo h1, .hero--photo .hero-lead { max-width: none; }
}

/* .hero--fire — a photograph blended into the hero, used on the home page
   opening and the /our-story hero.
   The deliberate, hand-picked exception on the site to "no dark scrim, type
   sits on paper, photographs get looked at" (see CLAUDE.md) — not a general
   utility to reach for, only used where Patrick has decided a specific
   photograph is strong enough to open on. The fade is --linen, not black,
   and the type stays --ink, not white — so it's still paper the words sit
   on, just paper laid over the photograph instead of beside it. Keep it that
   way if this ever needs revisiting: a dark scrim + white type would be the
   generic version of this same idea and is what the rest of the site is
   built to avoid.
   Each use sets --hero-fire-pos / --hero-fire-pos-m (desktop / mobile
   object-position) on the .hero--fire element for its own photograph — the
   defaults below are the firepit's. Cropping is usually vertical-only: the
   container is wider than the source photo, so object-fit: cover scales to
   match width and there's no horizontal slack for the X value to matter. */
.hero--fire {
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 54vw, 720px);
  display: flex;
  align-items: center;
}
.hero--fire__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-fire-pos, 63% 68%);
}
.hero--fire__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(241, 231, 220, .97) 0%,
    rgba(241, 231, 220, .97) 42%,
    rgba(241, 231, 220, .55) 60%,
    rgba(241, 231, 220, 0) 80%
  );
}
.hero--fire > .page { position: relative; width: 100%; }
.hero--fire__type { max-width: 58ch; }

/* .hero--fire--reverse — mirrors which side the fade sits on, not the
   photograph. Use when the subject who needs to stay legible sits on the
   left of the frame: the clear photo stays left, the paper fade and the
   type move right. The fade is narrower than the firepit original and the
   type column is squeezed to match (42ch, not 58ch) — on /our-story more of
   the photograph is the point, so the paper gets less of the frame. */
.hero--fire--reverse .hero--fire__scrim {
  background: linear-gradient(
    to left,
    rgba(241, 231, 220, .97) 0%,
    rgba(241, 231, 220, .97) 32%,
    rgba(241, 231, 220, .55) 48%,
    rgba(241, 231, 220, 0) 65%
  );
}
.hero--fire--reverse .hero--fire__type { margin-left: auto; max-width: 42ch; }

.hero--fire h1 { max-width: 20ch; margin-bottom: .42em; color: var(--ink); }
@media (max-width: 430px) {
  .hero--fire h1 { font-size: clamp(2rem, 7.27vw + 8.7px, 2.5rem); }
}
.hero--fire .hero-lead { margin-bottom: .9em; max-width: 52ch; color: var(--ink); }

.hero-by { margin: 0; font-size: .95rem; color: var(--ink-2); max-width: 44ch; }
.hero-by b { font-weight: 700; color: var(--ink); }

.hero--fire__invite {
  margin-top: 1.3em;
  padding-top: 1.3em;
  border-top: 1px solid var(--hair);
}

@media (max-width: 900px) {
  /* Fading a photo behind full-width type doesn't work at phone width —
     there's no room for the fade to resolve before the words hit the edge.
     Headline, then the photo, then the rest of the words on plain paper —
     same "flatten the wrappers, reorder with flex" technique the previous
     version of this hero used for its own mobile reflow. */
  .hero--fire {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--linen);
    padding-top: 0;
    padding-bottom: clamp(44px, 5.5vw, 84px);
    --hero-gap: 32px;
  }
  .hero--fire > .page,
  .hero--fire__type { display: contents; }

  .hero--fire h1 {
    order: 1;
    max-width: none;
    padding-inline: 24px;
    margin-top: clamp(40px, 5vw, 76px);
  }
  .hero--fire__img {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-position: var(--hero-fire-pos-m, 78% center);
    display: block;
    margin-top: var(--hero-gap);
  }
  .hero--fire__scrim { display: none; }
  .hero--fire .hero-lead {
    order: 3;
    max-width: none;
    margin-top: var(--hero-gap);
    padding-inline: 24px;
  }
  .hero--fire .hero-by {
    order: 4;
    margin-top: .5em;
    padding-inline: 24px;
  }
  .hero--fire__invite {
    order: 5;
    margin-top: var(--hero-gap);
    padding-inline: 24px;
  }
}

/* .hero--practical — the "practical" page hero */
.hero--practical {
  background: var(--linen);
  padding: clamp(38px, 4.6vw, 68px) 0;
  position: relative;
  overflow: hidden;
}
.hero--practical .hero-lead {
  margin-bottom: 0;
  max-width: 62ch;
  color: var(--ink);
}

.hero--practical::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("/assets/the-place.webp") no-repeat right center;
  background-size: 62% auto;
  opacity: .13;
  filter: grayscale(.55) contrast(.85);
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 78%);
          mask-image: linear-gradient(90deg, transparent 34%, #000 78%);
}
@media (max-width: 760px) {
  .hero--practical::before { display: none; }
}

/* .hero--plain — the prose page's opening */
.hero--plain > .page {
  padding-bottom: clamp(30px, 3.6vw, 48px);
  border-bottom: 1px solid var(--hair);
}
.hero--plain .hero-lead {
  color: var(--ink);
  max-width: var(--read);
  margin-bottom: 0;
}
.hero--plain .hero-act,
.hero--plain .btn-row { margin-top: 1.6rem; }

/* .band-photo — a photograph at full width, uncropped */
.band-photo { margin: 0; overflow: hidden; }
.band-photo img { width: 100%; height: auto; display: block; }

@media (max-width: 700px) {
  .band-photo img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 61% center;
  }
}

.hero-plain {
  color: var(--ink);
  max-width: 42ch;
  margin-bottom: 0;
}

.hero-act {
  margin: 1.25em 0 0;
  max-width: 46ch;
  line-height: 1.8;
  color: var(--ink);
  text-wrap: balance;
}
.hero-act a {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: var(--taupe);
  transition: text-decoration-color .18s var(--ease);
}
.hero-act a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* .hero-act--cta — the home hero's one exception to "buttons only in a
   .btn-row, never in the opening hero." Patrick's call; the plain "ask us"
   link stays a link so this doesn't become the two-button row the rest of
   the site avoids. --dusk rather than --ink so it doesn't compete with the
   closing call's --accent button as "the" filled shape on the page. */
.hero-act--cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7em;
}
.hero-act--cta p { margin: 0; }
.hero-act--cta .btn--primary {
  background: var(--dusk);
  color: var(--paper);
  text-decoration: none;
}
.hero-act--cta .btn--primary:hover { filter: brightness(1.12); }

.keep { white-space: nowrap; }


/* ── .band — a photograph allowed to be nothing but a photograph ──── */
.band {
  height: clamp(240px, 34vw, 560px);
  background-color: var(--stone);
  background-image: var(--img, none);
  background-size: cover;
  background-position: center calc(var(--pos-y, 50%) + var(--drift, 0%));
}


/* .board — "What's happening" */
.board {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: 0 14px 40px rgba(33, 33, 33, .08);
  overflow: hidden;
}
.section--linen .board { box-shadow: 0 14px 40px rgba(33, 33, 33, .07); }

.board__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  padding: 17px 22px 15px;
  border-bottom: 1px solid var(--hair);
  background: var(--stone-2);
}
.board__head .label { margin-bottom: 0; color: var(--ink); }
.board__head .board__when { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }

.board--lead { box-shadow: none; }
.board--lead .board__head {
  background: var(--dusk);
  border-bottom-color: transparent;
}
.board--lead .board__head .label { color: var(--paper); }
.board--lead .board__head .board__when { color: rgba(250, 247, 241, .84); }

/* .board--kind — a board wearing its programme's own colour, taken from the
   same [data-kind] tokens the calendar key uses on /session-information.
   A workshop is timber there, so a workshop board is timber here; a board
   that picked its own colour would quietly break the key. Same treatment as
   .board--lead, which is this rule with --dusk hard-coded.
   Paper on timber is 9.3:1, on dusk 8.4:1. --pasture is 4.8:1 and the muted
   "when" drops to 3.5:1 on it — still AA for the 12px label, but do not put
   anything smaller or lighter on that one. */
.board--kind { box-shadow: none; }
.board--kind .board__head {
  background: var(--k, var(--dusk));
  border-bottom-color: transparent;
}
.board--kind .board__head .label { color: var(--paper); }
.board--kind .board__head .board__when { color: rgba(250, 247, 241, .84); }

.board__rows { list-style: none; margin: 0; padding: 0; }
.board__row { margin: 0; border-top: 1px solid var(--hair-lo); }
.board__row:first-child { border-top: 0; }
.board__row > a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding: 17px 22px;
  text-decoration: none;
  color: inherit;
  transition: background-color .18s var(--ease);
}
.board__row > a:hover { background: var(--stone-2); }
.board__what {
  grid-column: 1;
  font-family: var(--display);
  font-size: 1.17rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.board__row > a:hover .board__what { text-decoration: underline; text-underline-offset: .18em; }
.board__cadence { grid-column: 1; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }

.board__tag {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  font-size: .92rem;
  font-style: italic;
  color: var(--ink-2);
  white-space: nowrap;
}
.board__tag--book { color: var(--umber); }

.board__foot {
  padding: 15px 22px 17px;
  border-top: 1px solid var(--hair);
  background: var(--stone-2);
  font-size: .875rem;
  color: var(--ink-2);
}
.board__foot p { margin-bottom: 0; }
.board__foot a { font-weight: 700; }

/* On a linen band the foot drops its tint entirely. --stone-2 is 1.045
   against --linen — the card looked like it ended a row early — and stepping
   down to --stone only reaches 1.078, because the distance that matters is
   the foot against the ground, not the foot against the rows. --paper is
   1.142, which is why the rows read crisp and the foot did not. The foot
   stays legible as a different register by its hairline and its type.
   Same trap the rail documents, and the same fix. */
.hero--split .board__foot,
.section--linen .board__foot { background: var(--paper); }

/* ── .ways — the three programmes ─────────────────────────────────── */
.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.way {
  display: flex; flex-direction: column;
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
/* z-index on hover so a card's shadow and lift clear the neighbours beside
   it in the grid, rather than being painted under their edge.
   The extra .ways qualifier isn't decorative: .m-armed [data-reveal].is-in
   sets transform:none at (0,3,0) once a card has scrolled into view, which
   otherwise outranks a plain .way:hover and silently cancels the lift. */
.ways .way:hover,
.ways .way.is-in:hover {
  box-shadow: 0 26px 52px rgba(33, 33, 33, .18);
  transform: translateY(-12px);
  z-index: 2;
}
.way .photo { border-radius: 0; aspect-ratio: 16 / 10; }
.way__body { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; flex: 1; }
.way h3 { margin-bottom: .4em; }
.way p { color: var(--ink); font-size: .97rem; margin-bottom: 1.35em; }
.way__more {
  margin-top: auto;
  font-weight: 700; font-size: .93rem;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .4em;
}
.way__more:hover { text-decoration: underline; }

.plain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
.plain__col h3 { padding-bottom: .55em; margin-bottom: .9em; border-bottom: 1px solid var(--hair); }
.section--dark .plain__col h3 { border-color: var(--hair-dk); }
.plain__col ul { list-style: none; padding: 0; margin: 0; }
.plain__col li { position: relative; padding-left: 27px; margin-bottom: .8em; color: var(--ink); }
.section--dark .plain__col li { color: var(--on-dark-dim); }
.plain__col li::before { position: absolute; left: 0; top: 0; font-size: 1rem; line-height: 1.68; }
.plain__col--is li::before   { content: "\2713"; color: var(--ink); font-weight: 700; }
.plain__col--isnt li::before { content: "\2013"; color: var(--ink-3); }
.section--dark .plain__col--is li::before { color: var(--on-dark); }

/* .letter — the founder's letter */
.letter { max-width: var(--read); padding-left: clamp(20px, 3vw, 38px); border-left: 2px solid var(--taupe); }
.letter p {
  font-family: var(--display);
  font-size: clamp(1.16rem, 1.6vw, 1.36rem);
  line-height: 1.62;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1.05em;
}
.letter em { font-style: italic; }
.letter__sign { margin-top: 1.7em; font-family: var(--display); font-style: italic; font-size: 1.24rem; color: var(--ink); }
.letter__sign span {
  display: block;
  font-family: var(--sans); font-style: normal;
  font-size: var(--lbl); font-weight: 700;
  letter-spacing: var(--lbl-track); text-transform: uppercase;
  color: var(--ink-2); margin-top: .6em;
}

/* ── .pull — one quoted line, once or twice a page ─────────────────── */
.pull {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.34;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  max-width: 24ch;
  margin: 0;
}
.section--dark .pull { color: var(--on-dark); }
.pull__by {
  display: block;
  font-family: var(--sans); font-style: normal;
  font-size: var(--lbl); font-weight: 700;
  letter-spacing: var(--lbl-track); text-transform: uppercase;
  color: var(--ink-2); margin-top: 1.1em;
}
.section--dark .pull__by { color: var(--on-dark-dim); }

.facts { border-top: 1px solid var(--hair); margin: 0; }
.section--dark .facts { border-color: var(--hair-dk); }
.fact {
  display: grid;
  grid-template-columns: minmax(148px, 208px) minmax(0, 1fr);
  gap: 6px 32px;
  padding: 19px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.section--dark .fact { border-color: var(--hair-dk); }
.fact dt {
  font-size: .93rem; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--ink);
}
.section--dark .fact dt { color: var(--on-dark-dim); }
.fact dd { margin: 0; color: var(--ink); }
.section--dark .fact dd { color: var(--on-dark); }
.fact dd .sub { display: block; color: var(--ink-2); font-size: .93rem; margin-top: .25em; }
.section--dark .fact dd .sub { color: var(--on-dark-dim); }

/* ── .blog-list — a hairline index of posts (SCPOR-13) ────────────────────
   Same reasoning as .facts above: "preferred over a grid of six equal cards,
   which says everything matters equally and therefore nothing does" — a
   reading list of posts is a sequence, not a grid of equally-weighted tiles,
   so it takes .facts' shape rather than .cards'. Generated by
   scripts/build-blog.mjs, not hand-authored. */
.blog-list { border-top: 1px solid var(--hair); }
.blog-list__item { padding: 26px 0; border-bottom: 1px solid var(--hair); }
.blog-list__item:last-child { border-bottom: none; }
.blog-list__date {
  display: block;
  font-family: var(--sans);
  font-size: var(--lbl);
  font-weight: 700;
  letter-spacing: var(--lbl-track);
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .5em;
}
.blog-list__item h3 { margin-bottom: .3em; }
.blog-list__item p { color: var(--ink-2); margin-bottom: 0; }

.blog-post__cover {
  width: 100%; height: auto; display: block;
  border-radius: var(--r);
}

/* ── .steps — a genuine sequence, so it is genuinely numbered ─────── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 74ch; }
.step { counter-increment: step; position: relative; padding: 0 0 30px 56px; margin: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
  letter-spacing: 0; color: var(--ink-3);
}
.step::after { content: ""; position: absolute; left: 11px; top: 24px; bottom: 6px; width: 1px; background: var(--hair); }
.section--dark .step::after { background: var(--hair-dk); }
.step:last-child { padding-bottom: 0; }
.step:last-child::after { display: none; }
.step h3 { margin-bottom: .3em; }
.step p { color: var(--ink-2); margin-bottom: 0; }
.section--dark .step p { color: var(--on-dark-dim); }

/* ── .cards — where a grid genuinely is the right shape ───────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(264px, 100%), 1fr)); gap: 20px; }
.card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 30px);
}
.section--dark .card { background: var(--charcoal-2); border-color: var(--hair-dk); }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink); font-size: .97rem; }
.section--dark .card p { color: var(--on-dark-dim); }
.card p:last-child { margin-bottom: 0; }
.card__lead { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--ink); margin-bottom: .3em; }
.section--dark .card__lead { color: var(--on-dark); }

/* .cards--lead — one that leads, two that follow */
.cards--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
  text-align: left;
}
.card--lead {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(26px, 3.2vw, 40px);
  box-shadow: 0 14px 40px rgba(33, 33, 33, .07);
}
.card--lead h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin-bottom: .45em; }
.card--lead p { font-size: 1.05rem; color: var(--ink); }
.card--lead .btn { margin-top: .6em; }

.cards__also { border-top: 1px solid var(--hair); }
.cards__also > * {
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--hair);
}
.cards__also h3 { margin-bottom: .3em; }
.cards__also p { color: var(--ink); font-size: .97rem; margin-bottom: .5em; }
.cards__also a { font-weight: 700; }

@media (max-width: 900px) {
  .cards--lead { grid-template-columns: 1fr; gap: 30px; }
}

/* ── .people — Meg, Beth, and whoever else belongs here ───────────── */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(24px, 3vw, 40px); }
.person .photo { aspect-ratio: 1 / 1; border-radius: 50%; max-width: 168px; margin-bottom: 18px; }
.person h3 { margin-bottom: .15em; }
.person .role {
  font-size: var(--lbl); font-weight: 700;
  letter-spacing: var(--lbl-track); text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .8em; display: block;
}
.person p { color: var(--ink-2); font-size: .96rem; }

.note {
  background: var(--stone-2);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--ink);
  border-radius: var(--r);
  padding: 21px 25px;
  max-width: 72ch;
}
.note h3 { font-size: 1.1rem; margin-bottom: .35em; }
.note p { color: var(--ink-2); font-size: .96rem; }
.note p:last-child { margin-bottom: 0; }
.section--dark .note {
  background: var(--charcoal-2);
  border-color: var(--hair-dk);
  border-left-color: var(--on-dark);
}
.section--dark .note h3 { color: var(--on-dark); }
.section--dark .note p { color: var(--on-dark-dim); }

/* ── .faq — native <details>, one open at a time (site.js) ────────── */
.faq { border-top: 1px solid var(--hair); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 20px 44px 20px 0; position: relative;
  font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:hover { color: var(--umber); }
.faq-answer { padding: 0 44px 22px 0; color: var(--ink-2); max-width: 64ch; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── .split — copy beside a photograph ────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.split--wide-left  { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); }
.split--wide-right { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
.split--top { align-items: start; }
.split__flip { order: -1; }
@media (max-width: 900px) { .split__flip { order: 0; } }

.cal-embed {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  min-height: 520px;
}
.cal-embed iframe { display: block; width: 100%; height: 620px; border: 0; }
@media (max-width: 700px) {
  .cal-embed { min-height: 460px; }
  .cal-embed iframe { height: 520px; }
}

/* .cal / .dates — the sessions calendar */
.cal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.cal-layout.is-ready { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .cal-layout.is-ready { grid-template-columns: 1fr; }
}

.cal {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(33, 33, 33, .08);
}
.cal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px 13px 18px;
  background: var(--dusk);
}
.cal__month {
  font-family: var(--display);
  font-size: 1.18rem; font-weight: 700; line-height: 1.2;
  color: var(--paper);
  margin: 0;
}
.cal__nav { display: inline-flex; flex: none; }
.cal__btn {
  width: 40px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(250, 247, 241, .32);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.cal__btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.cal__btn + .cal__btn { border-radius: 0 var(--r) var(--r) 0; margin-left: -1px; }
.cal__btn:hover:not(:disabled) { background: rgba(250, 247, 241, .14); border-color: rgba(250, 247, 241, .6); }
.cal__btn:disabled { opacity: .3; cursor: default; }
.cal__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cal__bar :focus-visible { outline-color: var(--paper); }

.cal__body { padding: 14px 16px 16px; }
.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__grid caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cal__grid th {
  padding: 2px 0 10px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.cal__grid td { padding: 2px 0; text-align: center; }
.cal__d {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: .95rem; line-height: 1;
  color: var(--ink-2);
}
[data-kind="support"]  { --k: var(--dusk); }
[data-kind="workshop"] { --k: var(--sola); }
[data-kind="horse"]    { --k: var(--pasture); }

.cal__d--today { outline: 1px solid var(--hair-hi); outline-offset: 2px; color: var(--ink); font-weight: 700; }
.cal__d--on { background: var(--k, var(--dusk)); color: var(--paper); font-weight: 700; }
.cal__d--was { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--k, var(--taupe)); font-weight: 700; }
.cal__d--split { background: linear-gradient(125deg, var(--k, var(--dusk)) 0 50%, var(--k2, var(--dusk)) 50% 100%); }

button.cal__d { border: 0; padding: 0; font: inherit; cursor: pointer; transition: transform .12s var(--ease); }
button.cal__d:hover { transform: scale(1.09); }
button.cal__d[aria-pressed="true"] { outline: 2px solid var(--umber); outline-offset: 2px; }

.cal__key {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--hair-lo);
  font-size: .84rem; color: var(--ink-2);
}
.cal__key span { display: inline-flex; align-items: center; gap: 7px; }
.cal__key i { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--k, var(--taupe)); }
.cal__key .is-was { background: transparent; box-shadow: inset 0 0 0 1.5px var(--taupe); }
.cal__key--sep { flex-basis: 100%; height: 0; margin: 0; }

/* ── .key — the calendar's colour language, borrowed onto the home page.
   The season section's job is "there is no fixed timetable, the dates live on
   the calendar", so the colour it carries should be the calendar's own: the
   same [data-kind] tokens the key above and the date list below take. A page
   of warm neutrals needed one place where the three programmes are visibly
   three different things, and this is the section that earns it, because it
   is the one pointing at the page where those colours mean something.
   The 3px rule is .date[data-kind]'s treatment at reading size rather than
   the 11px dot — the dot is a legend mark and disappears at body scale. */
.key { list-style: none; margin: 1.9rem 0 0; padding: 0; }
.key li {
  border-left: 5px solid var(--k, var(--taupe));
  padding: 3px 0 4px 16px;
  margin-bottom: 16px;
}
.key li:last-child { margin-bottom: 0; }
.key b {
  display: block;
  font-size: 1.02rem; font-weight: 700;
  color: var(--ink); line-height: 1.4;
}
.key span { font-size: .93rem; color: var(--ink-2); line-height: 1.5; }
.cal__today {
  margin-left: auto;
  padding: 0; border: 0; background: none;
  font-family: var(--sans); font-size: .84rem; font-weight: 700;
  color: var(--umber);
  text-decoration: underline; text-underline-offset: .18em;
  cursor: pointer;
}
.cal__today:hover { color: var(--umber-lo); }

/* ── the list beside it ──────────────────────────────────────────── */
.cal-side__head {
  font-family: var(--sans);
  font-size: var(--lbl); font-weight: 700;
  letter-spacing: var(--lbl-track); text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.cal-none { color: var(--ink-2); margin: 0; }
.cal-side .note { margin-top: clamp(24px, 3vw, 34px); }

.dates { list-style: none; margin: 0; padding: 0; }
.date:first-child { border-top: 1px solid var(--hair); }

.date {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 18px;
  align-items: baseline;
  margin: 0;
  padding: 17px 0;
  border-bottom: 1px solid var(--hair);
}
.date[data-kind] { border-left: 3px solid var(--k, var(--dusk)); padding-left: 15px; }
.date.is-lit { background: var(--stone-2); }
.date { transition: background-color .5s var(--ease); }
.date__when {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 700; line-height: 1.3;
  color: var(--ink);
  margin-bottom: .3em;
}
.date__time {
  font-family: var(--sans);
  font-size: .9rem; font-weight: 400;
  color: var(--ink-2);
  margin-left: .6em;
}
.date__what { grid-column: 1; font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.date__note { grid-column: 1 / -1; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.date__tag {
  grid-column: 2;
  font-size: .92rem; font-style: italic;
  color: var(--ink-2);
}
.date__tag--book { color: var(--umber); }

.date--was .date__when,
.date--was .date__what { color: var(--ink-3); }
.date--was .date__tag { color: var(--ink-3); font-style: italic; }

/* ── .cta-band — the closing call ─────────────────────────────────── */
.cta-band {
  background: var(--linen);
  color: var(--ink);
  padding: var(--sec-y) 0;
  border-top: 1px solid var(--hair);
}
.cta-band > .page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.cta-band h2 { color: var(--ink); max-width: 20ch; }
.cta-band p { color: var(--ink); max-width: 48ch; font-size: var(--lead); line-height: 1.55; margin-bottom: 1.8em; }

.cta-band .btn--primary { background: var(--accent); color: var(--paper); }
.cta-band .btn--primary:hover { background: var(--accent-lo); color: var(--paper); }

.cta-band .btn-row { display: grid; gap: 12px; }
@media (min-width: 560px) {
  .cta-band .btn-row {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-content: start;
    width: max-content;
    max-width: 100%;
  }
}

.cta-band__fig { margin: 0; overflow: hidden; border-radius: var(--r); }
.cta-band__fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--stone);   /* a picture still loading is a calm panel */
}

@media (max-width: 900px) {
  .cta-band > .page { grid-template-columns: 1fr; gap: 34px; }
  /* Words first here. The photograph is company, not the answer. */
  .cta-band__fig { order: 2; }
}

/* .with-rail / .rail — the practical column */
.with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 344px;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
.rail {
  position: sticky;
  top: 92px;                    /* clears the 76px header — see scroll-padding-top */
  background: var(--stone-2);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
}
.rail__head {
  padding: 15px 22px 13px;
  border-bottom: 1px solid var(--hair);
  background: var(--stone);
}
.rail__head .label { margin-bottom: 0; color: var(--ink); }
.rail__body { padding: 20px 22px 22px; }
.rail__body p { font-size: .95rem; color: var(--ink); }
.rail__body p:last-child { margin-bottom: 0; }
.rail__body .btn { width: 100%; margin-bottom: 10px; }
.rail__body .btn:last-child { margin-bottom: 0; }
.rail__note {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: .875rem; color: var(--ink-2);
}
.rail__fig { margin: 0; }
.rail__fig .photo { border-radius: 0; }

.section--linen .rail { background: var(--paper); }

@media (max-width: 900px) {
  .with-rail { grid-template-columns: 1fr; gap: 34px; }
  .rail { position: static; }
}

/* ── utilities ────────────────────────────────────────────────────── */
.stack > * + * { margin-top: 1.15em; }
.stack-lg > * + * { margin-top: clamp(28px, 3.6vw, 48px); }
.stack-sm > * + * { margin-top: .6em; }



.form-wrap {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(24px, 3.4vw, 40px);
}
.section--linen .form-wrap { box-shadow: 0 14px 40px rgba(33, 33, 33, .06); }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--stone-2);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 12px 14px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.form-field textarea { min-height: 136px; resize: vertical; line-height: 1.58; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  background: var(--paper);
  border-color: var(--umber);
  outline: 2px solid var(--umber);
  outline-offset: 1px;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form-hint { font-size: .85rem; color: var(--ink-2); margin: 6px 0 0; }
.form-note { font-size: .84rem; color: var(--ink-2); margin: 14px 0 0; }

.form-msg { display: none; border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; font-size: .95rem; }
.form-msg--error { background: #FBF0EE; border: 1px solid #C9A79E; color: #7E3220; }
.form-msg--ok { background: var(--stone); border: 1px solid var(--hair-hi); color: var(--ink); padding: 26px; }
.form-msg--ok h3 { margin-bottom: .35em; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


.site-foot {
  background: var(--charcoal);
  color: var(--on-dark-dim);
  padding: clamp(50px, 6vw, 74px) 0 28px;
  font-size: .94rem;
}
.site-foot .cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
  gap: clamp(26px, 4vw, 52px);
  padding-bottom: 38px;
}
.site-foot .brand-lockup { color: var(--on-dark); margin-bottom: 14px; }
.site-foot .brand-lockup .name small { color: var(--on-dark-dim); }
.foot-tag { color: var(--on-dark-dim); max-width: 34ch; font-size: .92rem; }

.site-foot a { color: var(--on-dark-dim); }
.site-foot a:hover { color: var(--on-dark); }

.site-foot h3 {
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: var(--lbl); font-weight: 700;
  letter-spacing: var(--lbl-track); text-transform: uppercase;
  margin-bottom: 14px;
}
.site-foot .links { list-style: none; margin: 0; padding: 0; }
.site-foot .links li { margin-bottom: 9px; }
.site-foot .links a { color: var(--on-dark-dim); text-decoration: none; transition: color .16s var(--ease); }
.site-foot .links a:hover { color: var(--on-dark); text-decoration: underline; }
.site-foot address { font-style: normal; color: var(--on-dark-dim); line-height: 1.7; }

.foot-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(242, 241, 238, .24);
  border-radius: var(--r);
  color: var(--on-dark-dim);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.foot-social:hover { color: var(--on-dark); border-color: rgba(242, 241, 238, .55); }

/* The crisis line. On every page, always reachable, never alarming. */
.foot-crisis {
  margin: 0 0 28px;
  padding: 15px 19px;
  border: 1px solid var(--hair-dk);
  border-left: 3px solid var(--on-dark);
  border-radius: var(--r);
  font-size: .89rem;
  color: var(--on-dark-dim);
  line-height: 1.6;
}
.foot-crisis strong { color: var(--on-dark); font-weight: 700; }
.foot-crisis a { color: var(--on-dark); }

.foot-trust {
  display: flex; flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hair-dk);
  font-size: .86rem;
  color: var(--on-dark-dim);
}
.foot-trust b { color: var(--on-dark); font-weight: 700; }
.foot-trust a { color: var(--on-dark); }

.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--hair-dk);
  font-size: .84rem;
  color: var(--on-dark-dim);
}
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }


.m-armed [data-reveal] {
  opacity: .55;
  transform: translateY(12px);
  transition: opacity .7s var(--ease) var(--rd, 0s),
              transform .7s var(--ease) var(--rd, 0s);
}
.m-armed [data-reveal].is-in { opacity: 1; transform: none; }

.m-armed .hero [data-rise] { opacity: .4; transform: translateY(10px); }
.m-armed .hero.is-on [data-rise] {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease) var(--rd, 0s),
              transform .5s var(--ease) var(--rd, 0s);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Scroll-driven motion */

@property --drift {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .site-head        { view-transition-name: site-head; }
  .brand-lockup img { view-transition-name: brand-mark; }

  ::view-transition-group(root) { animation-duration: .42s; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .42s;
    animation-timing-function: var(--ease);
  }

  @supports (animation-timeline: view()) {

    .band, .photo { background-repeat: no-repeat; }

    .band {
      animation: nh-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .photo {
      --drift-amp: 7%;
      animation: nh-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes nh-drift {
      from { --drift: calc(-1 * var(--drift-amp, 11%)); }
      to   { --drift: var(--drift-amp, 11%); }
    }

    .band-photo img,
    .cta-band__fig img {
      animation: nh-figure-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes nh-figure-settle {
      from { transform: scale(1.035); }
      to   { transform: none; }
    }

    /* Width, not scaleX, so the 2px stroke weight stays 2px throughout. */
    .head > .label::before {
      animation: nh-rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 62%;
    }
    @keyframes nh-rule-draw {
      from { width: 0; }
      to   { width: 34px; }
    }
  }
}

/* .carousel — a reel of photographs, still running */
.carousel { position: relative; }
.carousel__reel { position: relative; }

.carousel__viewport {
  --fade: clamp(28px, 8vw, 160px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.carousel__viewport::-webkit-scrollbar { width: 0; height: 0; }

.carousel.is-manual .carousel__viewport { scroll-snap-type: x mandatory; }

.carousel__viewport:focus-visible { outline: 2px solid var(--umber); outline-offset: -3px; }
@supports selector(:has(*)) {
  .carousel__viewport:focus-visible { outline: none; }
  .carousel__reel:has(.carousel__viewport:focus-visible) {
    outline: 2px solid var(--umber);
    outline-offset: -2px;
  }
}

.carousel__track {
  position: relative;   /* slides measure offsetLeft against this */
  display: flex;
  gap: clamp(14px, 1.8vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel__slide { flex: 0 0 auto; scroll-snap-align: center; display: flex; align-items: center; }
.carousel__slide img {
  display: block;
  height: clamp(240px, 33vw, 480px);
  width: auto;
  max-width: min(86vw, 880px);
  object-fit: contain;
  border-radius: var(--r);
  background: var(--stone);   /* a picture still loading is a calm panel */
}

.carousel__controls {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;   /* the plate drops below the buttons on a narrow phone */
  margin-top: clamp(18px, 2.2vw, 28px);
}
/* Two halves of one control, sharing a hairline. */
.carousel__nav { display: inline-flex; }
.carousel__nav .carousel__btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.carousel__nav .carousel__btn + .carousel__btn {
  border-radius: 0 var(--r) var(--r) 0;
  margin-left: -1px;
}

.carousel__btn {
  position: relative;
  width: 46px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.carousel__btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* z-index so the lit border wins over its neighbour's at the shared edge. */
.carousel__btn:hover:not(:disabled) { border-color: var(--umber); color: var(--umber); z-index: 1; }
.carousel__btn:disabled { opacity: .35; cursor: default; }
/* The play triangle is a solid shape; the rest of the icons are strokes. */
.carousel__btn .icon-play path { fill: currentColor; stroke: none; }

/* ── .palette — the reel's navigation, on /creative-workshops ───────
   Dots are what every carousel does. This room paints off paper plates —
   both of the close-up photographs show one — so the plate is the control
   and each photograph is a dab of its own paint on it. The dabs are the
   one place this page departs from the rest of the site, which is the whole
   budget for the departure: everything around them stays as it is.
   State is never carried by colour alone — the current dab is larger, sits
   under a gloss, and is the only one marked aria-current. */
.palette {
  display: inline-flex;
  align-items: center;
  flex: none;        /* a squashed dab is an oval, not a blob */
  gap: 11px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--plate);
  border: 1px solid var(--hair-lo);
  /* A dish sitting on the page: the rim catches a little light, and the
     whole thing casts. Tone cannot do this job here — see --plate. */
  box-shadow: inset 0 1px 2px rgba(33, 33, 33, .06),
              0 2px 7px rgba(33, 33, 33, .11);
}

.palette__dab {
  position: relative;
  flex: none;
  width: 17px; height: 17px;
  padding: 0;
  border: 0;
  background: var(--dab);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* Paint does not land in circles. Each dab gets its own irregular blob so
   the row reads as a used plate rather than a row of indicators. */
.palette__dab:nth-child(1) { border-radius: 57% 43% 48% 52% / 51% 46% 54% 49%; }
.palette__dab:nth-child(2) { border-radius: 44% 56% 61% 39% / 57% 44% 56% 43%; }
.palette__dab:nth-child(3) { border-radius: 62% 38% 43% 57% / 45% 59% 41% 55%; }
.palette__dab:nth-child(4) { border-radius: 48% 52% 55% 45% / 62% 38% 62% 38%; }
.palette__dab:nth-child(5) { border-radius: 53% 47% 39% 61% / 43% 57% 43% 57%; }

.palette__dab:hover { transform: scale(1.18); }

.palette__dab[aria-current="true"] {
  transform: scale(1.42);
  box-shadow: 0 1px 3px rgba(33, 33, 33, .3);
}
/* Still wet — the one that is showing has a specular highlight on it. */
.palette__dab[aria-current="true"]::after {
  content: "";
  position: absolute;
  top: 17%; left: 22%;
  width: 30%; height: 24%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  pointer-events: none;
}

.palette__dab:focus-visible {
  outline: 2px solid var(--umber);
  outline-offset: 4px;
  border-radius: 50%;
}

/* A 17px dab is not a tap target. The hit area is a transparent square over
   it; the gap is widened to match so neighbouring targets never overlap. */
@media (pointer: coarse) {
  .palette { gap: 20px; padding: 8px 12px; }
  .palette__dab { width: 24px; height: 24px; }
  .palette__dab::before {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

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

/* One brushstroke under the reel, so the photographs sit on paint rather
   than on the page. A real stroke, photographed — the bristle drag and the
   dry edge where the brush ran out are the things a drawn one never gets
   right. Stretched rather than cropped: it is abstract paint, so nothing
   about it reads as distorted, and stretching keeps the whole sweep from
   blue through to yellow instead of throwing both ends away to `cover`.
   Source: Markus Spiske, Unsplash — see assets/README.md. */
.carousel__stroke {
  position: absolute;
  /* The pictures cover the middle of the stroke and run to both edges, so
     the only part anyone can read is what shows above and below them.
     It stops short at the bottom: the plate's whole job is to show five
     colours you can tell apart, and it cannot do that sitting on paint. */
  /* Top stays under the 30px floor of .head's margin-bottom (styles.css:284)
     — that's the least clearance the heading above ever gets, at any
     viewport width, so anything taller here starts eating into the
     heading's own line height. */
  inset: -28px 0 -20px;
  width: 100%;             /* never wider: the reel is already full-bleed */
  z-index: 0;
  pointer-events: none;
  background: url('/assets/brushstroke.webp') center / 100% 100% no-repeat;
  /* Paint the pictures sit on, not paint they compete with. */
  opacity: .72;
  /* Its top and bottom are the edges of a photograph, not of a stroke, and a
     straight cut reads as a colour bar. Fading them lets the paint come out
     of the paper and go back into it. */
  --fade: 22px;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  /* .carousel__viewport fades the photographs to nothing at its left/right
     edges with this same clamp. Without a matching fade here, the stroke
     behind them doesn't fade with them — it's still full-strength paint once
     the picture above it has faded away, so the edge reads as a raw stripe
     of saturated colour instead of paint the photos are sitting on. */
  --fade-x: clamp(28px, 8vw, 160px);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%),
    linear-gradient(to right,
    transparent 0, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent 100%);
  mask-composite: intersect;
}

.carousel__reel > .carousel__viewport { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .carousel__stroke { inset: -22px 0 -12px; --fade: 18px; }
}

/* .carousel--quiet — the plate is the navigation, so the framed buttons
   beside it are noise. The arrows are gone from the markup: five dabs beat
   two arrows, and the viewport still takes Left/Right from the keyboard.
   Pause stays, because a reel that drifts on its own owes the reader a way
   to stop it — it just stops looking like a button while it is doing so. */
.carousel--quiet .carousel__btn {
  width: 34px; height: 34px;
  border-color: transparent;
  /* Small and unframed, not faint: --taupe would have been 1.88:1 here and
     this is a control someone has to find. --ink-3 is 5.9:1. */
  color: var(--ink-3);
}
.carousel--quiet .carousel__btn svg { width: 15px; height: 15px; }
.carousel--quiet .carousel__btn:hover:not(:disabled) {
  border-color: transparent;
  color: var(--umber);
}
/* Nothing recedes so far that it cannot be found by keyboard. */
.carousel--quiet .carousel__btn:focus-visible { color: var(--umber); }

/* Still a 44px target on a phone, still 34px of ink. */
@media (pointer: coarse) {
  .carousel--quiet .carousel__btn { position: relative; }
  .carousel--quiet .carousel__btn::after {
    content: "";
    position: absolute;
    inset: -5px;
  }
}


@media (max-width: 1000px) {
  .hero-lead { max-width: 58ch; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }

  .ways { grid-template-columns: 1fr 1fr; }
  .ways > :nth-child(3) { grid-column: 1 / -1; flex-direction: row; }
  .ways > :nth-child(3) .photo { flex: 0 0 42%; aspect-ratio: auto; }
  .ways > :nth-child(3) .way__body { flex: 1; justify-content: center; }
}

@media (max-width: 900px) {
  .ways { grid-template-columns: 1fr; }
  /* Back to a stacked card — undo the sideways third above. */
  .ways > :nth-child(3) { flex-direction: column; }
  .ways > :nth-child(3) .photo { flex: none; aspect-ratio: 16 / 10; }
  .ways > :nth-child(3) .way__body { justify-content: flex-start; }
  .section--ways .head h2 { text-align: center; }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; gap: 34px; }
  .plain { grid-template-columns: 1fr; gap: 32px; }

  .site-head {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--paper);
  }

  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 99;
    width: min(332px, 85vw);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 84px 18px 32px;
    /* --linen, not --paper: the drawer reads as its own panel over the page
       behind it rather than a plain white column continuing the page. */
    background: var(--linen);
    border-left: 1px solid var(--hair);
    box-shadow: -12px 0 40px rgba(33, 33, 33, .16);
    transform: translateX(102%);
    transition: transform .28s var(--ease);
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a,
  .nav-dropdown-trigger {
    display: block; width: 100%; text-align: left;
    padding: 16px 12px;              /* clears 44px */
    font-size: 1.03rem;
  }
  /* Top-level items in the display face, same register as the rest of the
     site's headings, so the drawer reads as this site rather than generic
     app chrome. Sub-items and the CTA stay --sans: they're the "do this"
     layer, not the wayfinding layer. */
  .nav-links > li:not(:last-child) > a,
  .nav-links > li:not(:last-child) > .nav-dropdown-trigger {
    font-family: var(--display);
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--ink);
  }
  /* A hairline index instead of a flat stack of links — same rhythm as
     .board__rows and .facts elsewhere on the site. Excludes the CTA li,
     which already reads as its own block via the filled button. */
  .nav-links > li:not(:last-child) > a,
  .nav-links > li:not(:last-child) > .nav-dropdown-trigger {
    border-bottom: 1px solid var(--hair-hi);
  }
  .nav-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--dusk); }
  .nav-item-dropdown.is-open .nav-dropdown-trigger { color: var(--dusk); }
  .nav-cta {
    margin: 22px 0 0;
    text-align: center !important;
    box-shadow: 0 10px 24px rgba(33, 33, 33, .16);
  }

  /* The dropdown becomes a plain nested list inside the drawer. A quiet
     rule on the left ties the three programmes back to "Take part" without
     reaching for a filled pill or an icon. */
  .nav-item-dropdown { position: static; }
  .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0;
    min-width: 0; margin-left: 12px; padding: 4px 0 10px 12px;
    background: transparent;
    border-left: 1px solid var(--hair);
    display: none;
  }
  .nav-item-dropdown.is-open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a { padding: 11px 12px; font-size: .97rem; }
  .nav-dropdown-menu .menu-desc { display: none; }

  /* A quiet echo of the header mark, pinned to the drawer floor — fills the
     empty space below the CTA on a short menu without adding more links. */
  .nav-links__mark {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 20px;
    text-align: center;
  }
  .nav-links__mark img { width: 125px; height: auto; margin: 0 auto; opacity: .875; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .site-foot .cols { grid-template-columns: 1fr; gap: 30px; }
  .fact { grid-template-columns: 1fr; gap: 3px; padding: 16px 0; }
  .letter { padding-left: 18px; }
  .board__row > a { padding: 16px 18px; }
  .board__head, .board__foot { padding-left: 18px; padding-right: 18px; }
  .faq-item summary { font-size: 1.06rem; }
  .person .photo { max-width: 140px; }

  /* Phones: the cards give up the page gutters so each photograph reaches the
     screen edge — the rule the hero band already follows, pictures touch the
     edges and type stays inset. Linen between them keeps the three programmes
     separate rather than fusing them into one strip. */
  .ways { margin-inline: calc(var(--gut) * -1); gap: 30px; }
  .way { border-inline: 0; border-radius: 0; }
  .way__body { padding-inline: var(--gut); }

  .carousel__slide img {
    height: auto;
    max-height: min(58vh, 430px);
    max-width: 86vw;
  }
}

@media (max-width: 460px) {
  :root { --gut: 18px; }

  .btn { width: auto; }
  .btn--primary { width: 100%; }

  .brand-lockup { gap: 9px; }
  .brand-lockup img { height: 30px; }
  .brand-lockup .name { font-size: 1.05rem; }
  .brand-lockup .name small { display: none; }
  .site-head > .page { gap: 14px; min-height: 66px; }

  /* The tag drops beneath the title rather than crushing it to 4 chars. */
  .board__row > a { grid-template-columns: 1fr; }
  .board__tag { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 9px; }
}

@media (pointer: coarse) {
  .site-foot .links li { margin-bottom: 2px; }
  .site-foot .links a { display: inline-block; padding: 10px 0; }
  .faq-item summary { padding-top: 22px; padding-bottom: 22px; }

  .hero-act a { position: relative; }
  .hero-act a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -2px; bottom: -2px;
  }
  .way__more { display: inline-block; padding: 8px 0; }
  .board__foot a, .fact dd a { display: inline-block; padding: 4px 0; }
}

@media print {
  .site-head, .nav-scrim, .cta-band, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-foot { background: #fff; color: #000; }
  .band, .photo, .hero--practical::before { display: none !important; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}