/* ==========================================================================
   Restore and Beyond — editorial brand layer
   Warm, light, type-led. The single stylesheet for the site: type scale,
   colour system, components and the handful of grid utilities the markup uses.
   No framework, no build step.

   Warm chalk canvas, deep plum and apricot. Plum is the one deep anchor — the
   footer and the accent panel — rather than the ground. Every colour is a brand
   colour or a contrast-verified tint of one, and tokens are named by ROLE
   (--canvas, --brand, --accent) so a future palette change is a :root edit.

   Type: Petrona for display, Archivo for labels, Atkinson Hyperlegible Next
   for body. The body face is the one drawn by the Braille Institute for readers with
   low vision: ambiguous pairs (I l 1, O 0, r n / m) are deliberately differentiated,
   which matters on a site whose readers include people with psychosocial and
   cognitive disability, and which carries ~2,600 words of body copy.
   ========================================================================== */

:root {
  /* --- canvas --- */
  --canvas:      #FAF7F6;   /* page canvas, warm chalk */
  --surface:     #F1E9E7;   /* alternate band, wells */
  --surface-alt: #F6EFEE;   /* faintest blush wash */
  --white:       #FFFFFF;   /* raised panels */

  /* --- ink --- */
  --ink:         #241B21;   /* body text      15.5:1 on canvas */
  --ink-muted:   #54424C;   /* secondary text  7.0:1 on canvas */

  /* --- brand --- */
  --brand:       #5A2A44;   /* deep plum, headings + footer  8.6:1 */
  --brand-deep:  #411D31;   /* deeper plum, display over imagery */
  --brand-light: #7C4460;   /* motif and decorative strokes */

  /* --- accent --- */
  --accent:      #DE8B57;   /* apricot: fills, rules — not small text on canvas */
  --accent-ink:  #9E4F20;   /* apricot as TEXT on canvas      5.3:1 */
  --accent-soft: #F0B98E;   /* hover on apricot fills */
  --accent-pale: #F4CDB2;   /* apricot as TEXT on plum        6.0:1 */

  /* --- lines and controls --- */
  --line:    #E4D7D4;       /* decorative hairlines */
  --control: #8A7480;       /* input and button borders — SC 1.4.11 needs 3:1;
                               3.6:1 on canvas, 3.9:1 on white, 3.3:1 on surface */

  /* Retained because 25 inline styles in the markup reference it as a hairline. */
  --ink-500: #E4D7D4;

  --font-display: 'Petrona', Georgia, 'Times New Roman', serif;
  --font-kicker: 'Archivo', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Nunito Sans',
               system-ui, -apple-system, sans-serif;

  /* --- fluid editorial type scale --- */
  --fs-wordmark: clamp(1.9rem, 11vw, 9rem);
  --fs-hero:     clamp(2.6rem, 7.2vw, 6.5rem);
  --fs-display:  clamp(2rem, 5.6vw, 4.6rem);
  --fs-h2:       clamp(1.7rem, 3.6vw, 3rem);
  --fs-h3:       clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-stat:     clamp(2.8rem, 7vw, 6rem);
  --fs-lede:     clamp(1.1rem, 1.4vw, 1.5rem);
  --fs-body:     clamp(1rem, 0.3vw, 1.06rem);
  --fs-kicker:   clamp(0.68rem, 0.8vw, 0.8rem);
  /* supporting text, one notch below body. Was four near-identical values
     (0.94/0.95/0.96/0.97rem) scattered across the CSS and inline styles. */
  --fs-small:    0.95rem;

  --shell: 1440px;
  --gutter: clamp(18px, 4.5vw, 72px);
  --header-h: 74px;
}

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

/* The hidden attribute is only a user-agent display:none, so ANY author rule
   setting display beats it: .btn is display:inline-flex, which meant a button
   carrying [hidden] stayed on screen. This is the single fix for that, replacing
   per-component patches that had to be remembered each time. Scripts can now
   rely on el.hidden actually hiding. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* --------------------------------------------------------------------------
   Accessibility floor
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.band-light :focus-visible { outline-color: var(--accent-ink); }

.skip-link {
  position: absolute;
  left: 14px; top: -120px;
  z-index: 300;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-kicker);
  font-weight: 700;
  padding: 14px 24px;
  text-decoration: none;
  transition: top 0.16s ease-out;
}
.skip-link:focus { top: 0; }

.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;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--brand);
  text-wrap: balance;
}

.t-hero    { font-size: var(--fs-hero); }
.t-display { font-size: var(--fs-display); }
.t-h2      { font-size: var(--fs-h2); }
.t-h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

/* italic serif for the softer, more human lines */
.t-italic { font-style: italic; font-weight: 300; }

/* the kicker: uppercase, wide-tracked, always preceded by a rule */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-kicker);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 clamp(18px, 2.2vw, 30px);
}
.kicker::before {
  content: '';
  width: clamp(24px, 3vw, 52px);
  height: 1px;
  background: currentColor;
  flex: none;
}
.kicker-plain { display: block; }
.kicker-plain::before { display: none; }

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

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 300;
}

.muted { color: var(--ink-muted); }
.measure { max-width: 62ch; }
.measure-tight { max-width: 46ch; }

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.9rem);
  line-height: 1.16;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   Bands — rhythm across the light canvas
   -------------------------------------------------------------------------- */

.band-light {
  background: var(--canvas);
  color: var(--ink);
}
.band-light h1, .band-light h2, .band-light h3, .band-light h4 { color: var(--brand); }
.band-light .kicker { color: var(--accent-ink); }
.band-light .lede { color: var(--ink); }
.band-light .muted { color: var(--ink-muted); }

/* the alternate band: a half-step deeper than the canvas, still light */
.band-deep { background: var(--surface); }
.band-olive { background: var(--brand); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

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

.section { padding-block: clamp(64px, 9vw, 160px); }
.section-tight { padding-block: clamp(44px, 5.5vw, 88px); }

/* asymmetric editorial grid */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
}
/* The grid stays at 12 tracks above the single-column breakpoint. An intermediate
   6-track step would make the `col-span-12` children span into implicit columns. */
@media (max-width: 620px) {
  .grid12 { grid-template-columns: minmax(0, 1fr); }
  .grid12 > * { grid-column: 1 / -1 !important; }
}

/* --------------------------------------------------------------------------
   Grid placement utilities
   These twelve classes were the *only* Tailwind the markup ever used. Writing
   them out here lets the site drop the framework entirely — no CDN, no runtime
   JIT compile, no build step. Breakpoints match Tailwind's defaults (md 768px,
   lg 1024px) so the class names keep their familiar meaning.
   Order matters: col-start rules must follow col-span rules, because the span
   shorthand also sets grid-column-start.
   -------------------------------------------------------------------------- */

.col-span-12 { grid-column: span 12 / span 12; }

@media (min-width: 768px) {
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-6 { grid-column: span 6 / span 6; }
}

@media (min-width: 1024px) {
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }

  .lg\:col-start-3 { grid-column-start: 3; }
  .lg\:col-start-6 { grid-column-start: 6; }
  .lg\:col-start-8 { grid-column-start: 8; }
  .lg\:col-start-9 { grid-column-start: 9; }
}

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }
.band-light .hairline { background: var(--line); }

/* --------------------------------------------------------------------------
   Media — photographs are washed toward the canvas so the page stays airy and
   overlaid text keeps its contrast whatever the underlying image does.
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  isolation: isolate;
}
.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The imagery is warm now — rust, clay, dusk — so it sits with the plum instead
     of fighting it. That means far less crushing than the green set needed. */
  filter: saturate(0.72) contrast(1.01) brightness(1.04);
}
/* plum wash keeps any replacement photograph on-brand */
.media::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--brand);
  opacity: 0.16;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* The scrim is shaped to the type rather than spread evenly over the frame, so
   the image reads at the edges while text keeps its contrast. Ratios below are
   computed against the worst case — a pure black pixel under the thinnest part
   of the scrim covering that text. */
.media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(250, 247, 246, 0.40) 0%,
    rgba(250, 247, 246, 0.62) 45%,
    rgba(250, 247, 246, 0.66) 70%,
    rgba(250, 247, 246, 0.80) 100%);
  pointer-events: none;
}
/* statement bands sit their heading on the floor of the frame */
.media-flat::after {
  background: linear-gradient(180deg,
    rgba(250, 247, 246, 0.34) 0%,
    rgba(250, 247, 246, 0.48) 42%,
    rgba(250, 247, 246, 0.72) 80%,
    rgba(250, 247, 246, 0.82) 100%);
}
/* Home hero: type is centred, so the cover is an ellipse behind it and the
   photograph opens up towards the corners. The second layer feathers the top and
   bottom edges where the transparent label strips sit — it fades to nothing by
   22%, so it lifts those small caps without drawing a box or touching the
   mid-field. Composited, the strips land near 0.72 alpha; ink needs 0.57. */
.hero .media::after {
  background:
    linear-gradient(180deg,
      rgba(250, 247, 246, 0.42) 0%,
      rgba(250, 247, 246, 0.30) 12%,
      rgba(250, 247, 246, 0.00) 22%,
      rgba(250, 247, 246, 0.00) 78%,
      rgba(250, 247, 246, 0.30) 88%,
      rgba(250, 247, 246, 0.42) 100%),
    radial-gradient(96% 62% at 50% 46%,
      rgba(250, 247, 246, 0.66) 0%,
      rgba(250, 247, 246, 0.64) 34%,
      rgba(250, 247, 246, 0.56) 66%,
      rgba(250, 247, 246, 0.42) 100%);
}
/* Interior heroes: type sits bottom-left. The short ones (FAQ, Contact) start
   their text block near 46%, so the cover has to reach 0.64 by then — ink needs
   0.57 and the olive-dark display needs 0.60 against a black pixel. */
.hero-page .media::after {
  background: linear-gradient(180deg,
    rgba(250, 247, 246, 0.30) 0%,
    rgba(250, 247, 246, 0.40) 22%,
    rgba(250, 247, 246, 0.64) 46%,
    rgba(250, 247, 246, 0.74) 74%,
    rgba(250, 247, 246, 0.82) 100%);
}
.media-content { position: relative; z-index: 2; color: var(--ink); }

/* text over imagery: display type takes olive, everything smaller takes a
   colour that clears 4.5:1 against the worst-case scrim */
.media-content h1,
.media-content h2,
.media-content h3 { color: var(--brand-deep); }
.media-content .kicker { color: var(--ink); }
.media-content .pull { color: var(--brand-deep); }
.media-content .lede { color: var(--ink); }
.media-content .muted { color: var(--ink); }

/* type sitting directly on a hero image, outside .media-content */
.hero-centre h1 { color: var(--brand-deep); }
.hero-centre .kicker { color: var(--ink); }
.hero-centre .lede { color: var(--ink); }
.hero .crumb,
.hero .crumb a { color: var(--ink); }
.hero .crumb a:hover { color: var(--brand-deep); border-bottom-color: var(--brand-deep); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* The <site-header> / <site-footer> wrappers are plumbing, not layout. A custom
   element is display:inline by default, and any box here would break the sticky
   masthead: sticky travels only within its containing block, so a wrapper the
   exact height of the header would pin it in place. display:contents removes
   the box entirely, leaving .masthead a direct child of <body> as far as layout
   is concerned. */
site-header,
site-footer { display: contents; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(250, 247, 246, 0.86);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}

.masthead-in {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  min-height: var(--header-h);
  padding-block: 10px;
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--brand);
  margin-right: auto;
  padding: 6px 12px 6px 0;   /* clear space around the mark */
}
/* The mark is wrapped in <picture> to offer WebP, so the wrapper is the flex item
   and has to be kept from stretching alongside the wordmark. */
.brandmark picture { display: inline-flex; flex: none; }
.brandmark img { width: 46px; height: 38px; flex: none; }
.brandmark span {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.5vw, 1.45rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.05;
  white-space: nowrap;
}
/* The whole wordmark is one weight and one style now, so the <em> only carries
   the semantics. No opacity: dimming would undo part of the weight. */
.brandmark em { font-style: italic; font-weight: 700; }

/* The masthead is a single row: the mark, then the menu button. The wordmark is
   nowrap, so at 360px the enlarged text plus a 101px button need 334px against
   the 324px available and the mark gets clipped. It steps back down here, which
   is the only width where the larger size does not fit. */
@media (max-width: 420px) {
  .brandmark { gap: 10px; }
  .brandmark img { width: 40px; height: 33px; }
  .brandmark span { font-size: 1.05rem; }
}

.nav-main { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 30px); }
.nav-main a {
  font-family: var(--font-kicker);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s;
}
.nav-main a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.nav-main a[aria-current='page'] { color: var(--accent-ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--control);
  color: var(--brand);
  font-family: var(--font-kicker);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
}
.nav-toggle .bars { position: relative; display: block; width: 16px; height: 10px; }
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars span {
  content: ''; position: absolute; left: 0; right: 0;
  height: 1.5px; background: currentColor;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars span { top: 4.2px; }
.nav-toggle .bars::after { bottom: 0; }

@media (max-width: 1120px) {
  .nav-main, .masthead .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}

.nav-panel {
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: 8px 26px;
}
.nav-panel[data-open='true'] { display: block; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel li + li { border-top: 1px solid var(--line); }
.nav-panel a {
  display: block;
  padding: 17px 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--brand);
  text-decoration: none;
}
.nav-panel a[aria-current='page'] { color: var(--accent-ink); }
.nav-panel .btn { margin-top: 20px; width: 100%; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: var(--font-kicker);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.15em 1.9em;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* gold fill carries ink text at 6.30:1 */
.btn-gold { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn-gold:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

.btn-outline { background: transparent; color: var(--brand); border-color: var(--control); }
.btn-outline:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

.band-light .btn-outline { color: var(--brand); border-color: var(--control); }
.band-light .btn-outline:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* the solid button now sits on light imagery, so it fills olive */
.btn-solid { background: var(--brand); color: var(--canvas); border-color: var(--brand); }
.btn-solid:hover { background: var(--brand-deep); border-color: var(--brand-deep); }

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

.link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(158, 79, 32, 0.45);
  transition: color 0.18s, text-decoration-color 0.18s;
}
.link:hover { color: var(--brand); text-decoration-color: currentColor; }
.band-light .link { color: var(--accent-ink); text-decoration-color: rgba(158, 79, 32, 0.45); }
.band-light .link:hover { color: var(--brand); }

/* the arrow link used to close sections */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-kicker);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(158, 79, 32, 0.4);
  transition: color 0.18s, border-color 0.18s, gap 0.18s;
}
.link-arrow:hover { color: var(--brand); border-color: var(--brand); gap: 1.1em; }
.band-light .link-arrow { color: var(--accent-ink); border-color: rgba(158, 79, 32, 0.4); }
.band-light .link-arrow:hover { color: var(--brand); border-color: var(--brand); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  flex-direction: column;
}
.hero .media { position: absolute; inset: 0; z-index: 0; }
.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px);
}

/* the label strips that frame the image, top and bottom */
/* The strips are transparent — no panel, just hairlines over the photograph. The
   contrast their small caps need comes from the feathered lift at the top and
   bottom of the hero scrim, which has no visible edge. */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid rgba(65, 29, 49, 0.34);
}
.strip > * {
  font-family: var(--font-kicker);
  font-size: clamp(0.56rem, 0.85vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 13px 6px;
  color: var(--ink);
  text-decoration: none;
  border-left: 1px solid rgba(65, 29, 49, 0.34);
  transition: background-color 0.2s, color 0.2s;
}
.strip > *:first-child { border-left: 0; }
a.strip-cell:hover { background: rgba(90, 42, 68, 0.12); color: var(--brand); }

@media (max-width: 700px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > *:nth-child(3) { border-left: 0; }
  .strip > *:nth-child(n + 3) { border-top: 1px solid rgba(65, 29, 49, 0.30); }
}

.hero-centre {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(40px, 7vw, 90px);
}

.wordmark {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-wordmark);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: 0.04em;
  color: var(--brand-deep);
  margin: 0;
  white-space: nowrap;
}
.wordmark i {
  font-style: normal;
  font-size: 0.42em;
  vertical-align: 0.28em;
  opacity: 0.5;
  padding-inline: 0.1em;
}
.wordmark-sub {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2.4vw, 1.9rem);
  letter-spacing: 0.06em;
  color: var(--brand-deep);
  margin-top: clamp(6px, 1vw, 14px);
}

.crumb {
  font-family: var(--font-kicker);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.crumb li::after { content: '/'; margin-left: 10px; opacity: 0.55; }
.crumb li:last-child::after { display: none; }
.crumb a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--brand-deep); border-bottom-color: var(--brand-deep); }

/* interior page heroes — shorter, left-aligned */
.hero-page { min-height: min(58svh, 560px); }
.hero-page .hero-centre {
  align-items: flex-start;
  text-align: left;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.panel {
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 46px);
}
.panel-solid {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 46px);
}
.panel-olive {
  background: var(--brand);
  border: 1px solid var(--brand);
  padding: clamp(24px, 2.8vw, 46px);
  color: var(--canvas);
}
/* gold-light only reaches 4.22:1 on olive, so kickers here take cream (5.87:1) */
.panel-olive .kicker,
.panel-olive .stat-figure { color: var(--canvas); }
.panel-olive .stat-caption { color: var(--canvas); }
.panel-olive h2, .panel-olive h3, .panel-olive h4 { color: var(--canvas); }
.panel-light {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 46px);
}
.panel-light h2, .panel-light h3 { color: var(--brand); }

/* --------------------------------------------------------------------------
   Statement / statistic blocks
   -------------------------------------------------------------------------- */

.stat-figure {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
  display: block;
}
.band-light .stat-figure { color: var(--accent-ink); }
.stat-caption {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: 16px;
  max-width: 30ch;
}
.band-light .stat-caption { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Signature: the two-readings device
   -------------------------------------------------------------------------- */

.reading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(18px, 2.4vw, 46px);
  padding-block: clamp(28px, 3.4vw, 52px);
  border-top: 1px solid var(--line);
  align-items: start;
}
.band-light .reading { border-top-color: var(--line); }
@media (max-width: 900px) { .reading { grid-template-columns: 1fr; } }

.reading dt {
  font-family: var(--font-kicker);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.band-light .reading dt { color: var(--accent-ink); }
.reading dd { margin: 0; }

.reading .r-said dd {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--brand);
}
.band-light .reading .r-said dd { color: var(--brand); }
.reading .r-read dd { color: var(--ink-muted); font-size: var(--fs-small); }
.band-light .reading .r-read dd { color: var(--ink-muted); }
.reading .r-means dd { color: var(--ink); font-size: var(--fs-small); }
.band-light .reading .r-means dd { color: var(--ink); }

/* --------------------------------------------------------------------------
   Editorial index — services and similar lists
   -------------------------------------------------------------------------- */

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(16px, 3vw, 56px);
  padding-block: clamp(26px, 3.2vw, 46px);
  border-top: 1px solid var(--line);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.25s;
}
.band-light .entry { border-top-color: var(--line); }
/* The title steps forward on hover. This was a padding-inline transition, which
   forced a layout pass on every hover; a transform composites instead. */
a.entry:hover { background: rgba(90, 42, 68, 0.06); }
.band-light a.entry:hover { background: rgba(90, 42, 68, 0.06); }
@media (max-width: 760px) { .entry { grid-template-columns: 1fr; } }

.entry-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--brand);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s;
}
.band-light .entry-title { color: var(--brand); }
a.entry:hover .entry-title {
  color: var(--accent-ink);
  transform: translateX(clamp(6px, 1vw, 14px));
}
.band-light a.entry:hover .entry-title { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.list-tick { list-style: none; margin: 0; padding: 0; }
.list-tick li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  line-height: 1.55;
}
.list-tick li::before {
  content: '';
  position: absolute;
  left: 1px; top: 0.62em;
  width: 12px; height: 6px;
  border-left: 1.5px solid var(--accent-ink);
  border-bottom: 1.5px solid var(--accent-ink);
  transform: rotate(-45deg);
}
.band-light .list-tick li::before { border-color: var(--accent-ink); }

/* One semantic list rendered in two columns. This replaced two side-by-side
   <ul>s holding one conceptual list, which made a screen reader announce
   "list, N items" twice and implied a grouping that was only ever layout. */
.list-2col { column-gap: clamp(22px, 3vw, 48px); }
@media (min-width: 768px) { .list-2col { column-count: 2; } }
.list-2col li { break-inside: avoid; -webkit-column-break-inside: avoid; }

.list-rule { list-style: none; margin: 0; padding: 0; }
.list-rule > li {
  padding-block: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
.list-rule > li:first-child { border-top: 0; padding-top: 0; }
.band-light .list-rule > li { border-top-color: var(--line); }

/* a genuine sequence — numbering earns its place here */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps > li {
  position: relative;
  counter-increment: s;
  padding: 0 0 clamp(24px, 3vw, 40px) clamp(52px, 6vw, 82px);
}
.steps > li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0; top: -0.1em;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 300;
  color: var(--accent-ink);
}
.band-light .steps > li::before { color: var(--accent-ink); }
.steps > li::after {
  content: '';
  position: absolute;
  left: clamp(14px, 1.6vw, 22px);
  top: 2.4em; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.band-light .steps > li::after { background: var(--line); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }

/* --------------------------------------------------------------------------
   Botanical watermark — the one decorative motif, always faint
   -------------------------------------------------------------------------- */

.motif {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.12;
  width: clamp(280px, 40vw, 620px);
  z-index: 0;
}
.band-light .motif { opacity: 0.12; }
.motif-tr { top: -4%; right: -6%; transform: rotate(12deg); }
.motif-bl { bottom: -8%; left: -8%; transform: rotate(-160deg); }
/* the motif inside the olive panel loads branch-motif-cream.svg instead, so it
   only needs a touch more opacity to read against the darker surface */
.panel-olive .motif { opacity: 0.18; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 22px; }

.field label,
.field-consent label,
legend {
  display: block;
  font-family: var(--font-kicker);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 9px;
}
.band-light .field label { color: var(--ink); }

.field .hint {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  margin: -4px 0 9px;
}
.band-light .field .hint { color: var(--ink-muted); }

.req { color: var(--accent-ink); }
.band-light .req { color: var(--accent-ink); }

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--control);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--brand); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(90, 42, 68, 0.16);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A2A44' stroke-width='1.6'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
  padding-right: 44px;
}
.field select option { color: #241B21; background: #FFFFFF; }

.field-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.field-consent input[type='checkbox'] {
  width: 22px; height: 22px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--brand);
}
.field-consent label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Form tabs: referral / feedback / complaint

   A JS enhancement. Without scripting the tablist stays hidden and all three
   panels render one after another under their own headings, so every form is
   still reachable and submittable.
   -------------------------------------------------------------------------- */

.form-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}
.form-tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  cursor: pointer;
  padding: 13px 20px;
  margin-bottom: -1px;
  font-family: var(--font-kicker);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 0.15s ease, background 0.15s ease;
}
.form-tab:hover { color: var(--accent-ink); background: var(--surface-alt); }

/* The selected tab. Distinguished by a solid rule and a weight change, not by
   colour alone, so it survives greyscale and colour-blind viewing. */
.form-tab[aria-selected='true'] {
  color: var(--brand);
  background: var(--white);
  border-color: var(--line);
  border-bottom: 3px solid var(--brand);
  font-weight: 700;
}

/* The panel is focusable so focus can be moved into it on tab change; that
   focus ring would otherwise sit on a large empty box, so it is suppressed
   for pointer users and kept for keyboard users via :focus-visible. */
.form-panel:focus { outline: none; }
.form-panel:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 6px; }

@media (max-width: 520px) {
  .form-tabs { gap: 0; }
  .form-tab { flex: 1; padding: 12px 8px; text-align: center; letter-spacing: 0.08em; }
}

/* --------------------------------------------------------------------------
   Multi-step referral form

   The steps are a JS enhancement. Without scripting the .form-step wrappers
   are plain divs, every field is visible at once and the form submits as it
   always did. Nothing here hides anything until JS adds [data-stepped].
   -------------------------------------------------------------------------- */

.step-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0 0 clamp(26px, 3vw, 36px);
  padding: 0 0 clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
  counter-reset: step;
}
.step-progress li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-kicker);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.step-progress li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border: 1px solid var(--control);   /* SC 1.4.11: 3.6:1 on canvas */
  border-radius: 50%;
  font-size: 0.72rem;
  letter-spacing: 0;
  color: var(--ink-muted);
}
/* The step you are on. Marked by weight and fill, never by colour alone. */
.step-progress li[data-state='current'] { color: var(--ink); }
.step-progress li[data-state='current']::before {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}
/* Steps already completed carry a tick instead of their number. */
.step-progress li[data-state='done']::before {
  content: '¹3';
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
}
.step-progress li + li { margin-left: clamp(0px, 1.4vw, 18px); }

.step-nav {
  display: flex;
  gap: 14px;
  margin-top: 26px;
}
.step-nav .btn { flex: 1; }

/* Radio group. The options are answers, so they opt out of the uppercase
   kicker styling that .field label applies to the question above them. */
.choice-group { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.choice { display: flex; align-items: center; gap: 10px; }
.choice input[type='radio'] {
  width: 22px; height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--brand);
}
.choice label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.form-grid {
  display: grid;
  gap: 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

/* One field in a row may carry a hint line, or a label that wraps to two, while
   its neighbour does not, which left their inputs sitting at different heights
   (date of birth beside age). Grid already stretches both cells to the same
   height, so making each field a column and letting the control absorb the
   leftover space lines every control up, whatever the label above it does. */
.form-grid .field { display: flex; flex-direction: column; }
.form-grid .field > input,
.form-grid .field > select,
.form-grid .field > textarea { margin-top: auto; }

/* Two buttons side by side, with a third beneath spanning exactly their
   combined width. inline-grid so the block shrinks to the buttons rather than
   filling the column, auto tracks so each column is sized by its own button,
   and the third item spans both tracks plus the gap between them. */
.btn-stack {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 14px;
}
.btn-stack > :nth-child(3) { grid-column: 1 / -1; }

/* Below this the two would overflow a narrow column, so everything stacks. */
@media (max-width: 460px) {
  .btn-stack { display: grid; grid-template-columns: 1fr; }
  .btn-stack > :nth-child(3) { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Sticky aside

   On About the left column runs about 1200px while the column beside it runs
   about 3100px, leaving nearly 2000px of empty page next to the career history.
   The aside travels with the reader instead of stopping a third of the way down.

   It sticks by its BOTTOM edge, not its top. The aside is taller than most
   viewports, so pinning the top would push the practice details below the fold
   and hold them there for the whole scroll. Anchoring the bottom lets the aside
   scroll fully into view first, then holds it in place.

   align-self:start is load-bearing. A grid item stretches to the row height by
   default, which leaves sticky nothing to travel within, and it then silently
   does nothing at all.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* The photo scrolls away with the page; the details list travels instead. That
     split is deliberate. The whole aside is ~1200px, taller than a laptop
     viewport, so sticking all of it would pin the top and hold the ABN,
     insurance and service area below the fold for the entire scroll. The list
     alone is ~670px and fits.

     Sticking by top, not bottom: Chrome only engages bottom-sticky when
     scrolling upward, so `bottom` here did nothing at all on the way down.

     The aside itself is deliberately left to stretch. A grid item stretches to
     the row height by default, and that full-height box is what gives the list
     inside it room to travel. Setting align-self:start here would collapse the
     box to its content and the stickiness would stop after a few hundred
     pixels. */
  .sticky-aside > dl {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    /* On a short laptop the list is ~100px taller than the space left under the
       masthead, which would clip the last row for the whole scroll. This lets it
       scroll internally in that case only; on any viewport tall enough there is
       no scrollbar and nothing changes. */
    max-height: calc(100vh - var(--header-h) - 56px);
    overflow-y: auto;

    /* The default scrollbar is a grey OS chrome that reads as a foreign object
       on a warm plum canvas. Thin, brand plum, no track, no arrows.
       scrollbar-color is the standard property (Firefox, and Chrome 121+); the
       ::-webkit rules below cover older WebKit and Safari. Plum sits at 6.9:1
       against the canvas, well past the 3:1 that SC 1.4.11 asks of a control. */
    scrollbar-width: thin;
    scrollbar-color: var(--brand-light) transparent;
  }
  .sticky-aside > dl::-webkit-scrollbar { width: 6px; }
  .sticky-aside > dl::-webkit-scrollbar-track { background: transparent; }
  .sticky-aside > dl::-webkit-scrollbar-thumb {
    background: var(--brand-light);
    border-radius: 3px;
  }
  .sticky-aside > dl::-webkit-scrollbar-thumb:hover { background: var(--brand); }
}

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

.form-status {
  margin-top: 20px;
  padding: 15px 18px;
  border: 1px solid var(--accent-ink);
  background: rgba(222, 139, 87, 0.14);
  color: var(--ink);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Status badge — marks a service that is not yet available
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-family: var(--font-kicker);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--accent-ink);
  color: var(--accent-ink);
  vertical-align: 0.35em;
  margin-left: 14px;
  white-space: nowrap;
}
.band-light .badge { border-color: var(--accent-ink); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Fieldsets — the referral form is long enough to need grouping
   -------------------------------------------------------------------------- */

.fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 8px;
  padding: clamp(24px, 3vw, 34px) 0 0;
}
.fieldset:first-of-type { border-top: 0; padding-top: 0; }
.fieldset > legend {
  font-family: var(--font-kicker);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding: 0;
  margin-bottom: 6px;
}
.fieldset .fieldset-note {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0 0 22px;
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Empty states — sections awaiting client material, styled not apologetic
   -------------------------------------------------------------------------- */

.empty-state {
  border: 1px dashed var(--control);
  padding: clamp(30px, 4vw, 56px);
  text-align: center;
}
.band-light .empty-state { border-color: var(--control); }
.empty-state .empty-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 300;
  color: var(--brand);
  margin-bottom: 12px;
}
.band-light .empty-state .empty-title { color: var(--brand); }
.empty-state p { color: var(--ink-muted); max-width: 52ch; margin-inline: auto; }
.band-light .empty-state p { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   FAQ — native details/summary, no script needed
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.band-light .faq { border-top-color: var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--brand);
}
.band-light .faq summary { color: var(--brand); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.band-light .faq summary:hover { color: var(--accent-ink); }
.faq summary .sign {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  margin-top: 6px;
}
.faq summary .sign::before,
.faq summary .sign::after {
  content: '';
  position: absolute;
  background: var(--accent-ink);
}
.band-light .faq summary .sign::before,
.band-light .faq summary .sign::after { background: var(--accent-ink); }
.faq summary .sign::before { left: 0; right: 0; top: 9.2px; height: 1.5px; }
.faq summary .sign::after { top: 0; bottom: 0; left: 9.2px; width: 1.5px; }
.faq[open] summary .sign::after { display: none; }
.faq .faq-body {
  padding-bottom: clamp(22px, 2.6vw, 34px);
  max-width: 66ch;
  color: var(--ink-muted);
}
.band-light .faq .faq-body { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Disclaimer
   -------------------------------------------------------------------------- */

/* Links in running prose.

   There is no base `a {}` rule in this stylesheet: nearly every anchor is
   styled through its component (.nav-main a, .footer-list a, .crumb a). A bare
   <a> inside a paragraph therefore fell through to the browser default blue,
   which is both off-palette and the one colour nothing else here uses. These
   are the prose contexts where that can happen. Underlined as well as coloured,
   so the link is not signalled by colour alone (SC 1.4.1). */
.disclaimer a,
.faq-body a,
.fieldset-note a,
.empty-state a {
  color: var(--accent-ink);          /* 4.88:1 on surface, 5.48:1 on canvas */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.disclaimer a:hover,
.faq-body a:hover,
.fieldset-note a:hover,
.empty-state a:hover { color: var(--brand); }

/* The footer disclaimer sits on plum, where accent-ink would be unreadable. */
.site-footer .disclaimer a { color: var(--accent-pale); }   /* 6.0:1 on plum */
.site-footer .disclaimer a:hover { color: var(--white); }

.disclaimer {
  border-left: 1px solid var(--accent-ink);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
  background: var(--surface);
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--ink-muted);
}
.disclaimer strong { color: var(--brand); font-weight: 600; }
.band-light .disclaimer {
  border-left-color: var(--accent-ink);
  background: var(--surface);
  color: var(--ink-muted);
}
.band-light .disclaimer strong { color: var(--brand); }

/* --------------------------------------------------------------------------
   Footer — the one deep anchor at the foot of the light page
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--brand);
  color: var(--canvas);
  border-top: 1px solid var(--brand);
  padding-block: clamp(56px, 7vw, 104px) 34px;
}
.footer-grid {
  display: grid;
  gap: clamp(30px, 4vw, 60px);
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(150px, 1fr));
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-head {
  font-family: var(--font-kicker);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-pale);
  margin: 0 0 18px;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 11px; font-size: var(--fs-small); color: var(--canvas); }
.footer-list a {
  color: var(--canvas);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s, color 0.18s;
}
.footer-list a:hover { color: var(--accent-pale); border-bottom-color: var(--accent-pale); }


/* --------------------------------------------------------------------------
   Testimonial

   Set at reading size in the display face rather than at pull-quote scale. This
   is someone's own account of a hard period in their life, and blowing it up to
   3rem would turn testimony into advertising copy.
   -------------------------------------------------------------------------- */
.testimonial {
  margin: 0;
  padding-left: clamp(20px, 2.4vw, 34px);
  border-left: 1px solid var(--accent-ink);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink);
}
.testimonial p + p { margin-top: 0.85em; }

.testimonial-by {
  margin-top: clamp(18px, 2vw, 26px);
  padding-left: clamp(20px, 2.4vw, 34px);
  font-family: var(--font-kicker);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);   /* 5.0:1 on the surface band */
}

/* Social icons. The tap target is 44px square even though the glyph is 20px:
   WCAG 2.5.8 asks 24px minimum and 2.5.5 asks 44px, and an icon-only control is
   exactly where a small target hurts. The visible box stays quiet because only
   the glyph is inked until hover or focus. */
.social-list {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.social-list li { margin: 0; }
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: -11px;            /* optically align the first glyph with the text above */
  color: var(--canvas);          /* 10.65:1 on the plum footer */
  border-bottom: 0;
  transition: color 0.18s, background-color 0.18s;
}
.social svg { fill: currentColor; display: block; }
.social:hover { color: var(--accent-pale); background: rgba(250, 247, 246, 0.10); }
.social:focus-visible { outline: 3px solid var(--accent-pale); outline-offset: -3px; }

.footer-bottom {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 26px;
  border-top: 1px solid rgba(250, 247, 246, 0.28);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  font-family: var(--font-kicker);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--canvas);
}
.footer-bottom p { margin: 0; }

/* the footer sits on olive, so its own disclaimer and muted text invert */
.site-footer .disclaimer {
  border-left-color: var(--accent-pale);
  background: rgba(36, 27, 33, 0.16);
  color: var(--canvas);
}
.site-footer .disclaimer strong { color: var(--accent-pale); }
.site-footer .muted { color: var(--canvas); }
.site-footer .ph { color: var(--canvas); border-bottom-color: var(--accent-pale); background: rgba(36, 27, 33, 0.22); }
.site-footer :focus-visible { outline-color: var(--accent-pale); }

/* --------------------------------------------------------------------------
   Placeholder marker — stays visible until the client fills it in
   -------------------------------------------------------------------------- */

.ph {
  background: rgba(222, 139, 87, 0.26);
  border-bottom: 1px dashed var(--accent-ink);
  padding: 0 4px;
  font-style: normal;
  color: var(--ink);
}
.band-light .ph { color: var(--ink); border-bottom-color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Motion — one reveal, one parallax, both switched off on request
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Without JS the content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .btn:active { transform: none; }
  a.entry:hover .entry-title { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Post prose

   The body of a generated article. Feed content arrives as bare <p>, <h2>,
   <ul> with no classes on it, so unlike the hand-written articles - which
   carry class="muted" on every paragraph - it has nothing for the rules above
   to hook onto. This block is that hook, and nothing more: it reuses the
   existing tokens and the h1-h4 base rule rather than introducing a second
   type scale. Scoped to .post-prose so it can never affect a hand-built page.
   -------------------------------------------------------------------------- */

.post-prose { color: var(--ink-muted); }

/* Opening paragraph gets the lede treatment the hand-written articles use. */
.post-prose > p:first-of-type {
  font-size: var(--fs-lede);
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink);
}

.post-prose h2 {
  font-size: var(--fs-h2);
  margin: clamp(40px, 5vw, 64px) 0 20px;
}
.post-prose h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: clamp(30px, 3.6vw, 44px) 0 14px;
}

.post-prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(158, 79, 32, 0.45);
  transition: color 0.18s, text-decoration-color 0.18s;
}
.post-prose a:hover { color: var(--brand); text-decoration-color: var(--brand); }

.post-prose strong, .post-prose b { color: var(--ink); font-weight: 600; }
.post-prose em, .post-prose i { font-style: italic; }

.post-prose ul, .post-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.post-prose li { margin-bottom: 0.5em; }
.post-prose li::marker { color: var(--accent-ink); }

.post-prose blockquote {
  margin: clamp(28px, 3.4vw, 40px) 0;
  padding-left: clamp(18px, 2.2vw, 28px);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.35;
  font-style: italic;
  font-weight: 300;
  color: var(--brand);
}

.post-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: clamp(28px, 3.4vw, 40px) 0;
}
.post-prose figure { margin: clamp(28px, 3.4vw, 40px) 0; }
.post-prose figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.post-prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(34px, 4vw, 52px) 0;
}

/* Rare in this feed, but unstyled <pre> overflows the measure and breaks the
   page on a phone rather than scrolling inside itself. */
.post-prose pre {
  overflow-x: auto;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: 8px;
  font-size: var(--fs-small);
}
.post-prose code { font-size: 0.94em; }

.post-prose table { width: 100%; border-collapse: collapse; margin: clamp(28px, 3.4vw, 40px) 0; }
.post-prose th, .post-prose td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.post-prose th { font-family: var(--font-kicker); font-size: var(--fs-small); color: var(--ink); }