/* ==========================================================================
   Free charity redesign — landing page
   Palette: warm paper / warm ink / terracotta clay. Type: Instrument Serif + Inter.
   ========================================================================== */

:root {
  --paper: #FAF6F0;
  --paper-tint: #F2E8DB;

  /* One ink, stepped by alpha, rather than three separate browns. Notion builds its
     whole text hierarchy this way — the steps stay in tune with the paper by
     construction, and there is only ever one colour to change. 76% reproduces the
     old #57504A almost exactly. */
  --ink: #221D18;
  --ink-soft: color-mix(in srgb, var(--ink) 76%, transparent);
  --clay: #C4502A;
  --clay-deep: #A03E1E;
  --clay-press: #8A3519;
  --line: #E4D9CB;
  --white: #FFFDFA;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* DNA R5: display sizes gained a step (h2 max 3rem → 3.375rem ≈ 2.8× body) and
     tighter leading/tracking — Typeform's serif-at-400 reads "authored" only with
     negative tracking; Dash runs display leading at 0.80–0.88. See DESIGN-DNA.md. */
  --size-hero: clamp(2.75rem, 6.4vw + 1rem, 5.5rem);
  --size-h2: clamp(2rem, 3.2vw + 0.8rem, 3.375rem);
  --size-h3: clamp(1.2rem, 1vw + 0.9rem, 1.45rem);
  --size-body: 1.1875rem;

  /* DNA R7: reference pages run 3.1–6.6k px; density is credibility. Was 7.5rem max. */
  --space-section: clamp(3.25rem, 6.5vw, 5.5rem);
  --radius-card: 18px;
  /* The small step. Two surface radii and a pill, nothing else — audit fix 05.
     Strays before this: 8px on the skip link, 4px forced onto every focused
     element by the global ring. */
  --radius-small: 12px;
  --radius-pill: 999px;
  /* Shadowless. Five reference sites — Set Studio, Torchbox, Caldera, Notion,
     Geniestudio — use no card shadow at all; depth comes from the canvas/surface
     shift (--paper against --white) plus the 1px --line border every card already
     carries. Restore this token to bring the lift back. */
  --shadow-card: none;
}

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

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

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1, h2 { line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); font-family: var(--font-body); font-weight: 600; line-height: 1.3; }

p { margin: 0 0 1em; }

/* Links carry ink, not clay. The accent is reserved for things you can act on —
   buttons and the case-study pills. Prose links get a clay underline instead, the
   pattern .link-arrow already uses. :not([class]) leaves every styled link alone. */
a { color: var(--ink); }
p a:not([class]),
li a:not([class]) {
  text-decoration: none;
  border-bottom: 2px solid var(--clay);
  padding-bottom: 1px;
}
p a:not([class]):hover,
li a:not([class]):hover {
  color: var(--clay-deep);
  border-bottom-color: var(--clay-deep);
}

.container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}
/* 44rem ran 77 characters per line at 18.4px. Comfortable is 60-66; Torchbox sits at 57. */
.narrow { max-width: 38rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3.5rem;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; border-radius: var(--radius-small);
  z-index: 100;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* No border-radius here. It used to set 4px, which doesn't shape the ring — it
   reshapes the element itself the moment it takes focus, squaring off anything
   whose own radius is declared earlier in the file (the skip link). Outlines
   already follow each element's own corners, so the ring is correct without it. */
:focus-visible {
  outline: 3px solid var(--clay-deep);
  outline-offset: 3px;
}
/* clay-on-clay is a 1:1 ring and clay-on-ink measures 2.55:1 — on the saturated
   bands the ring flips to paper (brief-critic finding, conversion-path fix) */
.band--clay :focus-visible,
.band--deep :focus-visible {
  outline-color: var(--paper);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.7rem;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
  background: var(--clay-deep);
  color: var(--white);
}
.btn--primary:hover { background: var(--clay-press); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--small { padding: 0.6rem 1.15rem; font-size: 0.9rem; }
.btn--big { padding: 1.1rem 2.1rem; font-size: 1.0625rem; }

.link-arrow {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--clay);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--clay-deep); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 24px -18px rgba(34, 29, 24, 0.4);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.8rem;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.48em;
}
.wordmark__dot { color: var(--clay); }
/* Terminal wordmark — "> michaltech" with a cursor block, one image. */
.wordmark__logo {
  height: 1.35rem;
  width: auto;
  display: block;
}

/* The header CTA never wraps: it swaps to a two-word label instead. Full label
   plus Menu button plus wordmark needs ~495px, so the swap sits at 31rem. */
.site-header .btn--small { white-space: nowrap; }
.btn__label-short { display: none; }
@media (max-width: 31rem) {
  .btn__label-full { display: none; }
  .btn__label-short { display: inline; }
}

/* keep wordmark + CTA on one line down to small phones */
@media (max-width: 30rem) {
  .wordmark { font-size: 1.1rem; }
  .wordmark__logo { height: 1.05rem; }
  /* 44px minimum height — the page promises "buttons a thumb can hit" and the
     header has to be the first place that's true */
  .site-header .btn--small { font-size: 0.78rem; padding: 0.55rem 0.85rem; min-height: 2.75rem; }
  .site-header__inner { gap: 0.5rem; }
}

/* ---------- Section nav (bookmarks) ----------
   Links carry soft ink; the one you're in gets the clay mark — same
   accent-only-for-wayfinding rule as .link-arrow. The anchors carry
   .site-nav__link because the prose rule `li a:not([class])` outranks
   `.site-nav__links a` (0,1,2 vs 0,1,1) and was painting all five with the
   prose clay underline; the class keeps them out of its reach by the rule's
   own ":not([class]) leaves every styled link alone" contract. On desktop
   the list sits inline between the wordmark and the CTA; below 62rem it
   folds into a panel under the sticky header, opened by a plainly-labelled
   Menu button (this audience gets a word, not just three lines). */

.site-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.site-nav__link {
  position: relative;
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.site-nav__link:hover {
  color: var(--ink);
  background: var(--paper-tint);
}
/* the wayfinding mark: a short clay bar under the label of the section
   you're in, grown in by the scrollspy — never a resting decoration */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.28rem;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--clay);
  transition: width 0.22s ease;
}
.site-nav__link[aria-current="true"] { color: var(--ink); }
.site-nav__link[aria-current="true"]::after { width: calc(100% - 1.8rem); }

/* ---------- Submenus ----------
   The main menu stays five quiet words; the deeper pages hang under the word
   they belong to (hosting under "How it works", the case pages under "My
   work", the Facebook answer under "Fair questions"). Parent links still
   navigate — the panel is a shortcut, not a gate. Open on hover and on
   keyboard focus; the panel's shadow is state-signalling, same sanction as
   the mobile nav panel. */
.site-nav__item--sub { position: relative; }
.site-nav__chev {
  width: 10px;
  height: 6px;
  margin-left: 0.35rem;
  vertical-align: 0.1em;
  opacity: 0.55;
}
.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 12.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  box-shadow: 0 18px 32px -24px rgba(34, 29, 24, 0.35);
  display: none;
  z-index: 60;
}
/* invisible bridge so the pointer can travel from pill to panel */
.site-nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}
.site-nav__item--sub:hover .site-nav__sub,
.site-nav__item--sub:focus-within .site-nav__sub { display: block; }
.site-nav__sub a {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.6rem 0.75rem;
  border-radius: calc(var(--radius-small) - 4px);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.site-nav__sub a:hover {
  color: var(--ink);
  background: var(--paper-tint);
}
.site-nav__sub a[aria-current="true"] {
  color: var(--ink);
  background: var(--paper-tint);
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__sub a { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__link,
  .site-nav__link::after { transition: none; }
}

.site-nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.site-nav__toggle:hover,
.site-nav__toggle[aria-expanded="true"] { background: var(--paper-tint); }
.site-nav__toggle-icon {
  position: relative;
  width: 14px;
  height: 2px;
  background: var(--ink);
  transition: background 0.15s ease;
}
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease;
}
.site-nav__toggle-icon::before { top: -5px; }
.site-nav__toggle-icon::after { top: 5px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before { transform: translateY(5px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after { transform: translateY(-5px) rotate(-45deg); }

/* five words + three chevrons + wordmark + CTA; below 70rem the list folds
   into the Menu panel (measured need ≈1050px of viewport) */
@media (max-width: 69.999rem) {
  .site-nav__toggle { display: inline-flex; }
  .site-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 32px -24px rgba(34, 29, 24, 0.35);
    padding: 0.75rem 1.25rem 1rem;
  }
  .site-nav__links.is-open { display: flex; }
  /* rows, not pills: full-width rounded buttons a thumb can hit (≥44px);
     the wayfinding mark moves to the left edge — a vertical list underlines
     nothing, it flags the row */
  .site-nav__link {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-small);
    border-left: 3px solid transparent;
  }
  .site-nav__link::after { content: none; }
  .site-nav__link[aria-current="true"] {
    color: var(--clay-deep);
    background: var(--paper-tint);
    border-left-color: var(--clay);
  }
  /* folded: the submenu is always open — indented rows under their parent,
     no panel, no chevron */
  .site-nav__chev { display: none; }
  .site-nav__sub {
    position: static;
    transform: none;
    display: block;
    min-width: 0;
    padding: 0 0 0.25rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-nav__sub::before { content: none; }
  .site-nav__sub a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 0.92rem;
    padding: 0.5rem 0.9rem 0.5rem 2.1rem;
    border-radius: var(--radius-small);
    white-space: normal;
  }
}
@media (max-width: 30rem) {
  .site-nav__toggle { font-size: 0.78rem; padding: 0.45rem 0.75rem; min-height: 2.75rem; }
}

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

.hero {
  padding-block: clamp(3rem, 7vw, 6rem) var(--space-section);
  background: url("../assets/art/wash-light.webp") center / cover no-repeat var(--paper);
}
.hero__grid {
  display: grid;
  gap: 2.8rem;
  align-items: center;
}
@media (min-width: 62rem) {
  /* copy gets the wider column; the form card only needs to hold three fields */
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  margin: 0 0 1.4rem;
}
.chip__pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--clay);
}
@media (prefers-reduced-motion: no-preference) {
  .chip__pulse { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 80, 42, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(196, 80, 42, 0); }
  }
}

.hero__title {
  font-size: var(--size-hero);
  margin-bottom: 0.45em;
}
.hero__title em {
  font-style: italic;
  color: var(--clay);
}
.hero__sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 1.8rem;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* The primary CTA lives in the hero: the form itself, on light paper.
   Field styling is inherited from .lead-form — only the light-background
   colours are set here (the shared rules are written light-first, with the
   dark-band overrides scoped to .cta). */
.hero__form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}
@media (max-width: 30rem) {
  .hero__form-card { padding: 1.35rem; }
}
.hero__form-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-h3);
  line-height: 1.15;
  margin: 0 0 1.25rem;
}
/* the card is already the measure — let the form fill it */
.hero__form-card .lead-form,
.hero__form-card .lead-form__thanks { max-width: none; }
/* white-on-white would lose the field edges against the card */
.hero__form-card .lead-form__field input {
  background: var(--paper);
  border-color: var(--line);
}
.hero__form-card .lead-form__field input:focus-visible { border-color: var(--clay); }
.hero__form-card .lead-form__field input[aria-invalid="true"] { border-color: #E4572E; }

/* ---------- Showcase ---------- */

.showcase {
  position: relative;
  padding-block: var(--space-section);
  border-top: 1px solid var(--line);
}
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/art/wash-light.webp") center / cover no-repeat;
  transform: scaleX(-1);
  opacity: 0.55;
  pointer-events: none;
}
.showcase > .container { position: relative; }

.section-head { max-width: 44rem; margin-bottom: 2rem; }
/* Matches .prose: 20px over 38rem lands at ~61 characters. At 1.1rem/44rem this
   intro ran 80ch — the longest line on the page once .narrow came down. */
.section-head__intro { color: var(--ink-soft); font-size: 1.25rem; max-width: 38rem; }

/* A tinted chip rather than clay text. Caldera reserves a soft wash for labels and
   badges and keeps the accent for things you can act on; this drops 8 accent
   firings and reads as a label instead of a link. */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  /* A translucent ink wash, not --paper-tint: half the eyebrows sit on tinted
     sections, where a fixed tint is the same colour as its own background and the
     chip disappears. This darkens whatever is behind it, so it reads everywhere. */
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  margin-bottom: 0.9rem;
}

.section-head__hint {
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-style: italic;
  max-width: 62ch;
}

.showcase__list {
  display: grid;
  gap: 2.5rem; /* R8: sibling gap ≤ half section padding (41.6px at 1280) */
}

/* No margin-block: the list's grid gap already spaces it, and grid margins
   don't collapse — the old var(--space-section) doubled the air both sides. */
.showcase__more {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.showcase__more > summary {
  cursor: pointer;
  padding-block: 1rem;
  font-weight: 600;
  color: var(--ink);
  list-style-position: inside;
}
.showcase__more > summary:hover {
  color: var(--clay-deep);
}
.showcase__more[open] > summary {
  margin-bottom: 2.5rem;
}

.showcase__more-list {
  display: grid;
  gap: 2.5rem;
}

/* title row — name, domain pill, and the case-study link all on one line */
.cmp__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}

.cmp__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2vw + 1rem, 1.9rem);
  margin-bottom: 0;
}
.cmp__domain {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
}

/* short explainer under a showcase item's name, where the pair needs context */
.cmp__note {
  max-width: 62ch;
  margin: -0.4rem 0 1.4rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* marks a showcase item that isn't a homepage redesign (e.g. a booking system) */
.cmp__kind {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  background: var(--clay-deep);
  border: 1px solid var(--clay-deep);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
}

/* Link out to the deep case study. It rides on the title row, ahead of the
   screenshots, because the write-up is the point — not a footnote to the pictures. */
.cmp__casestudy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--clay-deep);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cmp__casestudy:hover,
.cmp__casestudy:focus-visible {
  background: var(--clay-deep);
  border-color: var(--clay-deep);
  color: var(--white);
}
.cmp__casestudy-dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay);
  transition: background 0.2s ease;
}
.cmp__casestudy:hover .cmp__casestudy-dot,
.cmp__casestudy:focus-visible .cmp__casestudy-dot { background: var(--white); }
.cmp__casestudy-arrow {
  flex: none;
  transition: transform 0.2s ease;
}
.cmp__casestudy:hover .cmp__casestudy-arrow { transform: translateX(3px); }
/* no room to sit beside the title — let it wrap and span the card instead */
@media (max-width: 48rem) {
  .cmp__casestudy {
    display: flex;
    white-space: normal;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-card);
  }
}

.cmp__pair {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .cmp__pair { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* one clickable full-page screenshot; hover (or keyboard focus) pans down the page */
.shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.shot:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(34, 29, 24, 0.06), 0 22px 44px -16px rgba(34, 29, 24, 0.28);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
@media (prefers-reduced-motion: no-preference) {
  .shot img { transition: object-position 6s ease-in-out; }
  .shot:hover img,
  .shot:focus-visible img { object-position: bottom center; }
}

.shot__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(34, 29, 24, 0.78);
  color: var(--paper);
  pointer-events: none;
}
.shot__tag--after {
  background: var(--clay-deep);
  color: var(--white);
}

.shot__cta {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(34, 29, 24, 0.82);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  pointer-events: none;
  transition: background-color 0.2s ease;
}
.shot--after .shot__cta { background: var(--clay-deep); }
a.shot:not(.shot--after):hover .shot__cta { background: var(--ink); }
a.shot.shot--after:hover .shot__cta { background: var(--clay-press); }

/* ---------- Bands / sections ---------- */

section { scroll-margin-top: 5rem; }

.band {
  background: var(--paper-tint);
  padding-block: var(--space-section);
}
.band--deep {
  background: url("../assets/art/wash-dark.webp") center / cover no-repeat var(--ink);
  color: var(--paper);
}
/* The one saturated band (DNA R2) — Thisispam's rule: the warm colour is a canvas for
   a whole section, not an accent. --paper on --clay-deep measures 6.1:1, AA for body. */
.band--clay {
  background: var(--clay-deep);
  color: var(--paper);
  padding-block: var(--space-section);
}
.band--clay h2 { color: var(--paper); }
.band--clay .eyebrow {
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 14%, transparent);
}

.look, .why, .how, .fit, .faq, .cta, .compare, .explain { padding-block: var(--space-section); }

.why .prose,
.fit .prose {
  font-size: 1.25rem;
}

.get { padding-block: var(--space-section); }

/* ---------- Editorial split (DNA layout `editorial-split`) ----------
   Heading rail left, content rows right — Dash's museum move adapted: rows on the
   band separated by hairlines, no boxes, and the art finally earns its area
   (was 56px in a 600px column — a rounding error, per the DNA argument). */

.esplit {
  display: grid;
  gap: 2rem;
}
/* 72rem, not 62rem: between 62 and 72rem the 8fr body ran 590–725px and the
   standards strip inside it collapsed to ~178px columns (brief-critic finding) */
@media (min-width: 72rem) {
  .esplit { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
  .esplit__rail {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.checklist li {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  font-size: 1.1rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--line);
}
.checklist li:first-child { border-top: none; padding-top: 0; }
.checklist__art {
  flex: 0 0 auto;
  width: clamp(140px, 12vw, 150px); /* R4: editorial rows carry ≥140px art */
  height: auto;
}
/* a 120px art column beside 190px of text reads as a shaft on small phones —
   stack instead, art leading */
@media (max-width: 30rem) {
  .checklist li { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

/* the standards strip — subordinate to the checklist above it (DNA R6) */
.standards__lead {
  margin: 1.4rem 0 1.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
.standards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}
@media (min-width: 48rem) {
  .standards { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
}
.standards__art {
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: 0.7rem;
}
.standards h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.standards p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---------- Trio — three plain cards, used twice (standards, and where it lives)
   Sits in a full .container rather than .narrow: three columns inside 38rem is
   ~11rem a column, which breaks the words. Capped at 58rem so it still reads as
   the same column of page as the narrow prose above it. ---------- */

.trio {
  list-style: none;
  max-width: 58rem;
  margin: 1.4rem auto 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 48rem) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
}
.trio__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.4rem;
}
/* hosting.html: a spot illustration beside the words rather than above them.
   The copy keeps the .narrow measure so every left edge on the page lines up;
   the drawing hangs in the right-hand margin instead of taking a grid column.
   Below 72rem there isn't room out there (measure + gap + art > viewport), so
   it drops back into the flow underneath. */
.explain-anchor { position: relative; }
.explain-hero__copy > :last-child { margin-bottom: 0; }
.explain__art {
  display: block;
  width: clamp(140px, 18vw, 200px);
  height: auto;
  margin-top: 2.2rem;
}
/* section markers are quieter than the hero's, and sit level with the eyebrow
   rather than centred — the prose blocks below are too tall to centre against */
.explain__art--aside { width: clamp(120px, 14vw, 156px); }
@media (min-width: 72rem) {
  .explain__art {
    position: absolute;
    top: 50%;
    left: calc(100% + 3rem);
    transform: translateY(-50%);
    margin-top: 0;
  }
  .explain__art--aside {
    top: 0.25rem;
    transform: none;
  }
}

/* same slot as .steps__art — decorative spot illustration above the heading.
   120px floor per DNA R4: art earns its area or is refused. */
.trio__art {
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: 1rem;
}
.trio__item h3 { margin-bottom: 0.55em; }
.trio__item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}
/* 38rem, not the 58rem of the cards below it: the line belongs to the prose
   column above, and stepping it out to the card width breaks that edge. */
.trio__lead {
  max-width: 38rem;
  margin: 1.6rem auto 0;
  font-weight: 600;
}

/* ---------- Facebook comparison ----------
   Two cells a row, labelled on every row rather than under a header pair: the
   header would scroll off on a phone, and repeated labels are already the house
   pattern (see .diagnosis-strip__label). Stacks below 48rem, Facebook first. */

.compare__list {
  list-style: none;
  max-width: 58rem;
  margin: 1.6rem auto 0;
  padding: 0;
  display: grid;
  gap: 0;
}
/* Ledger rows, not cards (DNA T10): hairline-ruled rows straight on the band —
   Dash's editorial edge. The white boxes moved the eye to the container; the
   rule moves it to the comparison. */
.compare__row {
  display: grid;
  gap: 1rem;
  padding-block: 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.compare__list li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
@media (min-width: 48rem) {
  .compare__row { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .compare__cell--site { border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding-left: 3rem; margin-left: -1.5rem; }
}
.compare__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.compare__cell p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* the right-hand cell is the point of the section, so it carries full ink */
.compare__cell--site p { color: var(--ink); }
.compare__closing {
  max-width: 38rem;
  margin: 1.6rem auto 0;
}

/* ---------- Steps ---------- */

/* ---------- Steps (DNA layout `colour-rail`) ----------
   No cards, no art — Typeform's stat-block move: a giant serif numeral floating
   free carries each column; hairlines between columns, everything on the clay
   band. The italic numeral is one point of the page's three-point serif echo
   (hero em → these → the quote text). One component, every page — hosting's
   change-a-word section rides the same rail. */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
/* 62rem, not 48rem: three columns at a 768px viewport left ~18 characters a line
   of 19px text — the worst measure on the page (brief-critic finding) */
@media (min-width: 62rem) {
  .steps { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .steps__item { padding-inline: 2rem; border-left: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); }
  .steps__item:first-child { padding-left: 0; border-left: none; }
  .steps__item:last-child { padding-right: 0; }
}
.steps__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.6rem, 4vw + 2rem, 5.5rem);
  line-height: 0.9;
  color: var(--paper);
  opacity: 0.62; /* 3.32:1 on clay — the only visible sequence marker clears the 3:1 large bar */
  display: block;
  margin-bottom: 0.9rem;
}
.steps__item h3 { color: var(--paper); margin-bottom: 0.4em; }
/* 88%, not 82%: the composited colour at 82% measured 4.64:1 on clay — a pass
   by 0.14. Contrast is computed from the rendered colour, not the token. */
.steps__item p { margin: 0; color: color-mix(in srgb, var(--paper) 88%, transparent); }

/* The .steps--cards white-card variant died 2026-08-20 when hosting.html joined
   the clay colour-rail — the 3-step grammar is now one component everywhere.
   (_after.html, the unlinked dev snapshot, was its last reference.) */

/* ---------- FAQ ---------- */

/* Accordion columns (DNA layout `accordion-columns`): the three groups sit side
   by side at desktop — 12 questions drop from a ~1,200px column to one screen. */
.faq__list {
  display: grid;
  gap: 2.4rem;
  margin-top: 2rem;
}
/* 2-up before 3-up: three columns at a 992px viewport ran ~285px each and the
   summaries wrapped to three ragged lines (brief-critic finding) */
@media (min-width: 62rem) {
  .faq__list { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; align-items: start; }
}
@media (min-width: 72rem) {
  .faq__list { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* Twelve questions in one flat run was a wall; three labelled clusters let a
   reader jump to the worry they arrived with. Labels use the eyebrow register —
   they're wayfinding, not headings competing with the summaries. */
.faq__group-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}
.faq__group > .faq__item:last-of-type {
  border-bottom: none;
}

.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item:last-child {
  border-bottom: none;
}
.faq__item > summary {
  cursor: pointer;
  padding-block: 1rem;
  font-weight: 600;
  color: var(--ink);
  list-style-position: inside;
}
.faq__item > summary:hover {
  color: var(--clay-deep);
}
.faq__item > p {
  padding-bottom: 1rem;
  color: var(--ink-soft);
  margin: 0;
}

/* The one-bill fact carries the section (same statement grammar as salisbury's
   money take) — #cost was the third identical narrow-prose section in a run,
   and the page's rhythm sagged exactly where attention flags. */
.cost__big {
  font-family: var(--font-display);
  /* min 1.9rem, not 1.5rem: at 375 the statement collapsed to barely over the
     prose around it — 30px keeps it reading as display; desktop cap unchanged */
  font-size: clamp(1.9rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin-block: 0.9rem 0.5em;
  text-wrap: balance;
}

/* ---------- Glossary (hosting) ----------
   Five one-line meanings don't earn accordions — hiding a single sentence
   behind a click is a tax, and loose <details> dropped into the FAQ's column
   grid scattered into a ragged masonry. Term over meaning, hairline rows,
   two columns when there's room: read it, don't operate it. */

.glossary {
  max-width: 58rem;
  margin: 2rem auto 0;
  display: grid;
  gap: 0 3rem;
}
@media (min-width: 62rem) {
  .glossary { grid-template-columns: 1fr 1fr; }
}
.glossary__row {
  padding-block: 1.05rem;
  border-top: 1px solid var(--line);
}
.glossary dt {
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.glossary dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.975rem;
  line-height: 1.6;
}

/* ---------- Quiet aside — a line that arrived early on ---------- */

.vouch { padding-block: calc(var(--space-section) / 2); }
/* A C&B-style giant quote glyph was tried here and killed by the brief critic:
   it double-quoted a quote that carries its own marks, on a section whose locked
   decision reads "presented plainly". The enlarged italic-serif quote text IS the
   pull-quote treatment — and the third point of the DNA's serif echo. */
.vouch__intro {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.vouch__figure { margin: 0; }
.vouch__quote { margin: 0; }
.vouch__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1.8vw + 1rem, 2.4rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.vouch__attribution {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Final CTA + form ---------- */

.cta__title { color: var(--paper); }
.cta__sub {
  color: color-mix(in srgb, var(--paper) 75%, transparent);
  font-size: 1.15rem;
  margin-bottom: 2.2rem;
}

.lead-form { max-width: 30rem; }
.lead-form__field { margin-bottom: 1.3rem; }
.lead-form__field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.45rem;
}
.lead-form__field .optional { font-weight: 400; opacity: 0.7; }
.req { color: var(--clay); }

.lead-form__field input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius-small);
  padding: 0.85rem 1rem;
}
.lead-form__field input:focus-visible {
  outline: none;
  border-color: var(--clay);
}
.lead-form__field input[aria-invalid="true"] { border-color: #E4572E; }

.lead-form__error {
  color: #A3341A;
  font-size: 0.88rem;
  margin: 0.4rem 0 0;
}

.lead-form .btn { width: 100%; margin-top: 0.4rem; }

.lead-form__micro {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 1rem;
}
.lead-form__micro em { color: var(--ink); }

.lead-form__thanks {
  max-width: 30rem;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem;
}
.lead-form__thanks-icon {
  width: 44px; height: 44px;
  color: var(--paper);
  background: var(--clay-deep);
  border-radius: 50%;
  padding: 9px;
  margin-bottom: 1rem;
}
.lead-form__thanks h3 { color: var(--ink); }
.lead-form__thanks p { color: var(--ink-soft); margin: 0; }

/* The same form runs twice: on light paper in the hero, and on the dark band
   down here. Everything above is written for light; these override for dark. */
.cta .lead-form__error { color: #FFB59D; }
.cta .lead-form__micro { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.cta .lead-form__micro em { color: color-mix(in srgb, var(--paper) 85%, transparent); }
.cta .lead-form__thanks {
  background: color-mix(in srgb, var(--paper) 8%, transparent);
  border-color: color-mix(in srgb, var(--paper) 25%, transparent);
}
.cta .lead-form__thanks h3 { color: var(--paper); }
.cta .lead-form__thanks p { color: color-mix(in srgb, var(--paper) 75%, transparent); }

/* ---------- Footer ---------- */

.site-footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--line);
}
/* the site's map, repeated where a reader finishes — three short columns in
   the same pill grammar as the header nav. Same map on every page (the
   sub-pages carried no footer nav at all before 24 Aug). The negative inline
   margin keeps each column's first pill TEXT on the column edge, and the
   hairline lives on __inner's top so the pulled-out pills can't stretch it. */
.site-footer__nav {
  display: grid;
  gap: 1.5rem 2rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 62rem) {
  .site-footer__nav { grid-template-columns: 1.35fr 1fr 1fr; }
}
.site-footer__heading {
  font-size: 0.78rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  margin: 0 0 0.4rem;
}
.site-footer__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-left: -0.75rem;
}
.site-footer__nav a {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.site-footer__nav a:hover {
  color: var(--ink);
  background: var(--paper-tint);
}
/* the ask keeps its clay even on hover — after :hover so the later rule wins
   the tie; accent here is the one action, not wayfinding */
.site-footer__nav a.site-footer__cta {
  color: var(--clay-deep);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__nav a { transition: none; }
}
.site-footer__inner {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.site-footer p { margin: 0; }

/* ---------- Sticky mobile CTA ---------- */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 0.8rem 1.25rem calc(0.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(250, 246, 240, 0.97) 65%, rgba(250, 246, 240, 0));
  z-index: 60;
  transform: translateY(110%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta__btn { width: 100%; }
@media (min-width: 62rem) {
  .sticky-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ---------- Scroll reveals (JS-gated so content never hides without JS) ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .reveal--delay { transition-delay: 0.15s; }
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}