/* The Story We Tell
   Type: Cooper* by indestructible type, SIL OFL 1.1 (see fonts/Cooper-OFL.txt).
   A historically accurate revival of Oswald Cooper's 1920s Cooper family.
   Palette: sampled directly from the hero artwork. The page ground is the
   artwork's own background colour, so the illustrations dissolve into the sheet.
   Theme: light-locked on purpose. The whole page is one continuous sheet of
   paper; a dark mode would break the only idea the design has. */

@font-face {
  font-family: "Cooper";
  src: url("/assets/fonts/Cooper-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:       #E2DFDB;
  --paper-deep:  #D6D2CC;
  --band:        #F3F1ED;   /* near-white, a step lighter than the page paper */
  --ink:         #262A40;
  --ink-muted:   #55586B;
  --accent:      #474F8F;
  --accent-deep: #3A4176;
  --rule:        rgba(38, 42, 64, .16);

  --shell: 1400px;
  --measure: 42rem;

  /* Shape lock: every corner on this page is square. */
  --radius: 0;

  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

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

/* Any element carrying a `display` value beats the UA stylesheet's [hidden]
   rule, which would otherwise leave the form row and submit button on screen
   after a successful signup. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Cooper", Georgia, serif;
  font-weight: 700;                    /* body is set bold, per the brief */
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.1875rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

:where(a, button, input):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- hero : the artwork dissolves into the sheet ---------- */

.hero {
  /* Full-bleed: the artwork spans the whole viewport, no shell, no frame. */
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* The spoken line and the CTA sit on the artwork itself, in the open paper
   under the painted title. Wide screens only; on small screens the art is too
   short to host them, so the overlay flows below the art as a band in the
   same deeper paper as the belief section, reading as one surface. */
@media (max-width: 899px) {
  .hero__overlay {
    background: var(--band);
    padding: 2rem 1.25rem 2.5rem;
  }
  .hero__overlay .hero__lead { margin-top: 0; }
}
@media (min-width: 900px) {
  .hero__overlay {
    position: absolute;
    left: 43%;
    right: 10%;
    top: 52%;
    transform: translate(15px, -25px);
  }
  .hero__overlay .hero__lead {
    font-size: clamp(1.25rem, .9rem + 1.1vw, 1.75rem);
    margin: 0 auto 1.25rem;
  }
}

.hero__art {
  /* The artwork exactly as provided: full viewport width, natural aspect,
     no crop, no mask, no fade, no frame. Do not add treatments here. */
  width: 100%;
  height: auto;
}

.hero__lead {
  padding-inline: 1.25rem;
  font-weight: 900;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  max-width: 44ch;
  margin: clamp(1rem, 2.5vw, 2rem) auto clamp(1.25rem, 2.5vw, 1.75rem);
  text-wrap: balance;
}

.hero__btn { margin-inline: auto; }

/* ---------- button ---------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;                       /* 7.6:1 on --accent */
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .01em;
  padding: 1.0625rem 2rem;
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;               /* CTA never wraps */
  cursor: pointer;
  transition: background .25s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- belief : the creed beside the words it stands on ---------- */

.belief {
  /* Full-width band on the deeper paper tone; the grid inside stays on the
     72rem measure via the max() padding trick. Creed rides the left rail,
     all four manifesto paragraphs read down the right rail. */
  background: var(--band);
  display: grid;
  grid-template-columns: 5.4fr 6.6fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2.5rem, 5vw, 4rem)
           max(clamp(1.25rem, 4vw, 2.5rem), calc((100% - 72rem) / 2))
           clamp(2.5rem, 5.5vw, 4.5rem);
}
.belief__creed {
  margin: -.06em 0 0;   /* optical cap-height alignment with the right rail */
  font-weight: 900;
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  text-align: left;
  text-wrap: balance;
}
.belief__text p {
  margin: 0 0 1.5rem;
  text-align: left;
  font-size: clamp(1.0625rem, .97rem + .45vw, 1.25rem);
  line-height: 1.66;
  text-wrap: pretty;
}
.belief__text p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .belief { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- projects ---------- */

.projects {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem);
}
/* The page runs on a centred spine: the artwork, the creed and the section
   voices all sit on it. Only the card text below each illustration is ranged
   left, so the reading blocks stay scannable. */
.projects__h {
  margin: 0 0 1rem;
  font-weight: 900;
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.625rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
}
.projects__intro {
  margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem);
  max-width: 62ch;
  text-align: center;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
}
.card--2 { grid-column: span 2; }
.card--3 { grid-column: span 3; }
.card--4 { grid-column: span 4; }

.card { margin: 0; }
.card img {
  width: 100%;
  /* Fixed band height, not an aspect ratio. A 4-column card and a 2-column card
     must be the same height or the grid rows tear open. Wider cards simply show
     a wider crop of the same scene. */
  height: clamp(200px, 22vw, 320px);
  object-fit: cover;
  border-radius: var(--radius);
  /* Torn-paper cut on all four sides, same collage language as the hero.
     A shared jagged-rect SVG mask survives the object-fit crop; no fades. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0.0%2C2.8%20L1.6%2C2.6%20L3.1%2C2.7%20L4.7%2C2.8%20L6.2%2C2.8%20L7.8%2C2.4%20L9.4%2C1.9%20L10.9%2C1.4%20L12.5%2C1.2%20L14.1%2C1.5%20L15.6%2C2.0%20L17.2%2C2.4%20L18.8%2C2.6%20L20.3%2C2.4%20L21.9%2C1.9%20L23.4%2C1.4%20L25.0%2C1.0%20L26.6%2C1.0%20L28.1%2C1.0%20L29.7%2C0.9%20L31.2%2C0.5%20L32.8%2C-0.1%20L34.4%2C-0.7%20L35.9%2C-1.1%20L37.5%2C-0.9%20L39.1%2C-0.3%20L40.6%2C0.4%20L42.2%2C1.1%20L43.8%2C1.4%20L45.3%2C1.5%20L46.9%2C1.5%20L48.4%2C1.7%20L50.0%2C2.2%20L51.6%2C2.8%20L53.1%2C3.2%20L54.7%2C3.2%20L56.2%2C2.8%20L57.8%2C2.2%20L59.4%2C1.8%20L60.9%2C1.6%20L62.5%2C1.9%20L64.1%2C2.3%20L65.6%2C2.7%20L67.2%2C2.8%20L68.8%2C2.6%20L70.3%2C2.4%20L71.9%2C2.3%20L73.4%2C2.6%20L75.0%2C2.9%20L76.6%2C3.2%20L78.1%2C3.2%20L79.7%2C2.7%20L81.2%2C1.8%20L82.8%2C0.9%20L84.4%2C0.3%20L85.9%2C0.1%20L87.5%2C0.1%20L89.1%2C0.2%20L90.6%2C0.1%20L92.2%2C-0.2%20L93.8%2C-0.5%20L95.3%2C-0.6%20L96.9%2C-0.3%20L98.4%2C0.4%20L100.0%2C1.2%20L98.7%2C0.0%20L99.1%2C1.6%20L99.1%2C3.1%20L98.6%2C4.7%20L97.9%2C6.2%20L97.2%2C7.8%20L96.7%2C9.4%20L96.6%2C10.9%20L96.8%2C12.5%20L96.9%2C14.1%20L96.8%2C15.6%20L96.6%2C17.2%20L96.4%2C18.8%20L96.4%2C20.3%20L96.9%2C21.9%20L97.7%2C23.4%20L98.6%2C25.0%20L99.3%2C26.6%20L99.6%2C28.1%20L99.5%2C29.7%20L99.3%2C31.2%20L99.2%2C32.8%20L99.3%2C34.4%20L99.6%2C35.9%20L99.8%2C37.5%20L99.7%2C39.1%20L99.3%2C40.6%20L98.8%2C42.2%20L98.4%2C43.8%20L98.4%2C45.3%20L98.8%2C46.9%20L99.4%2C48.4%20L99.8%2C50.0%20L100.0%2C51.6%20L99.8%2C53.1%20L99.3%2C54.7%20L99.0%2C56.2%20L98.9%2C57.8%20L98.9%2C59.4%20L98.9%2C60.9%20L98.7%2C62.5%20L98.0%2C64.1%20L97.2%2C65.6%20L96.4%2C67.2%20L95.9%2C68.8%20L96.0%2C70.3%20L96.4%2C71.9%20L96.9%2C73.4%20L97.2%2C75.0%20L97.3%2C76.6%20L97.2%2C78.1%20L97.3%2C79.7%20L97.6%2C81.2%20L98.2%2C82.8%20L98.9%2C84.4%20L99.3%2C85.9%20L99.3%2C87.5%20L98.9%2C89.1%20L98.4%2C90.6%20L98.1%2C92.2%20L98.1%2C93.8%20L98.4%2C95.3%20L98.9%2C96.9%20L99.2%2C98.4%20L99.3%2C100.0%20L100.0%2C97.3%20L98.4%2C98.1%20L96.9%2C99.1%20L95.3%2C99.8%20L93.8%2C100.1%20L92.2%2C100.0%20L90.6%2C99.8%20L89.1%2C99.6%20L87.5%2C99.7%20L85.9%2C99.9%20L84.4%2C100.1%20L82.8%2C99.9%20L81.2%2C99.5%20L79.7%2C98.8%20L78.1%2C98.3%20L76.6%2C98.1%20L75.0%2C98.4%20L73.4%2C98.9%20L71.9%2C99.3%20L70.3%2C99.4%20L68.8%2C99.2%20L67.2%2C98.8%20L65.6%2C98.4%20L64.1%2C98.3%20L62.5%2C98.4%20L60.9%2C98.5%20L59.4%2C98.3%20L57.8%2C97.8%20L56.2%2C97.0%20L54.7%2C96.2%20L53.1%2C95.8%20L51.6%2C95.9%20L50.0%2C96.3%20L48.4%2C96.9%20L46.9%2C97.3%20L45.3%2C97.5%20L43.8%2C97.5%20L42.2%2C97.6%20L40.6%2C98.0%20L39.1%2C98.7%20L37.5%2C99.4%20L35.9%2C99.9%20L34.4%2C99.9%20L32.8%2C99.6%20L31.2%2C99.0%20L29.7%2C98.6%20L28.1%2C98.6%20L26.6%2C98.8%20L25.0%2C99.2%20L23.4%2C99.4%20L21.9%2C99.4%20L20.3%2C99.1%20L18.8%2C98.9%20L17.2%2C99.0%20L15.6%2C99.4%20L14.1%2C99.9%20L12.5%2C100.3%20L10.9%2C100.3%20L9.4%2C99.9%20L7.8%2C99.1%20L6.2%2C98.4%20L4.7%2C97.9%20L3.1%2C97.7%20L1.6%2C97.6%20L0.0%2C97.5%20L1.4%2C100.0%20L0.9%2C98.4%20L0.7%2C96.9%20L0.7%2C95.3%20L0.9%2C93.8%20L0.9%2C92.2%20L0.6%2C90.6%20L0.0%2C89.1%20L-0.5%2C87.5%20L-0.8%2C85.9%20L-0.6%2C84.4%20L-0.0%2C82.8%20L0.8%2C81.2%20L1.4%2C79.7%20L1.8%2C78.1%20L1.9%2C76.6%20L2.0%2C75.0%20L2.2%2C73.4%20L2.7%2C71.9%20L3.3%2C70.3%20L3.7%2C68.8%20L3.7%2C67.2%20L3.3%2C65.6%20L2.6%2C64.1%20L2.0%2C62.5%20L1.8%2C60.9%20L1.9%2C59.4%20L2.2%2C57.8%20L2.5%2C56.2%20L2.5%2C54.7%20L2.2%2C53.1%20L1.9%2C51.6%20L1.8%2C50.0%20L2.0%2C48.4%20L2.3%2C46.9%20L2.6%2C45.3%20L2.6%2C43.8%20L2.2%2C42.2%20L1.4%2C40.6%20L0.6%2C39.1%20L0.0%2C37.5%20L-0.2%2C35.9%20L-0.1%2C34.4%20L-0.0%2C32.8%20L-0.0%2C31.2%20L-0.3%2C29.7%20L-0.5%2C28.1%20L-0.5%2C26.6%20L-0.1%2C25.0%20L0.6%2C23.4%20L1.5%2C21.9%20L2.2%2C20.3%20L2.5%2C18.8%20L2.4%2C17.2%20L2.1%2C15.6%20L1.9%2C14.1%20L2.0%2C12.5%20L2.3%2C10.9%20L2.5%2C9.4%20L2.6%2C7.8%20L2.3%2C6.2%20L1.9%2C4.7%20L1.6%2C3.1%20L1.7%2C1.6%20L2.1%2C0.0%20Z'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0.0%2C2.8%20L1.6%2C2.6%20L3.1%2C2.7%20L4.7%2C2.8%20L6.2%2C2.8%20L7.8%2C2.4%20L9.4%2C1.9%20L10.9%2C1.4%20L12.5%2C1.2%20L14.1%2C1.5%20L15.6%2C2.0%20L17.2%2C2.4%20L18.8%2C2.6%20L20.3%2C2.4%20L21.9%2C1.9%20L23.4%2C1.4%20L25.0%2C1.0%20L26.6%2C1.0%20L28.1%2C1.0%20L29.7%2C0.9%20L31.2%2C0.5%20L32.8%2C-0.1%20L34.4%2C-0.7%20L35.9%2C-1.1%20L37.5%2C-0.9%20L39.1%2C-0.3%20L40.6%2C0.4%20L42.2%2C1.1%20L43.8%2C1.4%20L45.3%2C1.5%20L46.9%2C1.5%20L48.4%2C1.7%20L50.0%2C2.2%20L51.6%2C2.8%20L53.1%2C3.2%20L54.7%2C3.2%20L56.2%2C2.8%20L57.8%2C2.2%20L59.4%2C1.8%20L60.9%2C1.6%20L62.5%2C1.9%20L64.1%2C2.3%20L65.6%2C2.7%20L67.2%2C2.8%20L68.8%2C2.6%20L70.3%2C2.4%20L71.9%2C2.3%20L73.4%2C2.6%20L75.0%2C2.9%20L76.6%2C3.2%20L78.1%2C3.2%20L79.7%2C2.7%20L81.2%2C1.8%20L82.8%2C0.9%20L84.4%2C0.3%20L85.9%2C0.1%20L87.5%2C0.1%20L89.1%2C0.2%20L90.6%2C0.1%20L92.2%2C-0.2%20L93.8%2C-0.5%20L95.3%2C-0.6%20L96.9%2C-0.3%20L98.4%2C0.4%20L100.0%2C1.2%20L98.7%2C0.0%20L99.1%2C1.6%20L99.1%2C3.1%20L98.6%2C4.7%20L97.9%2C6.2%20L97.2%2C7.8%20L96.7%2C9.4%20L96.6%2C10.9%20L96.8%2C12.5%20L96.9%2C14.1%20L96.8%2C15.6%20L96.6%2C17.2%20L96.4%2C18.8%20L96.4%2C20.3%20L96.9%2C21.9%20L97.7%2C23.4%20L98.6%2C25.0%20L99.3%2C26.6%20L99.6%2C28.1%20L99.5%2C29.7%20L99.3%2C31.2%20L99.2%2C32.8%20L99.3%2C34.4%20L99.6%2C35.9%20L99.8%2C37.5%20L99.7%2C39.1%20L99.3%2C40.6%20L98.8%2C42.2%20L98.4%2C43.8%20L98.4%2C45.3%20L98.8%2C46.9%20L99.4%2C48.4%20L99.8%2C50.0%20L100.0%2C51.6%20L99.8%2C53.1%20L99.3%2C54.7%20L99.0%2C56.2%20L98.9%2C57.8%20L98.9%2C59.4%20L98.9%2C60.9%20L98.7%2C62.5%20L98.0%2C64.1%20L97.2%2C65.6%20L96.4%2C67.2%20L95.9%2C68.8%20L96.0%2C70.3%20L96.4%2C71.9%20L96.9%2C73.4%20L97.2%2C75.0%20L97.3%2C76.6%20L97.2%2C78.1%20L97.3%2C79.7%20L97.6%2C81.2%20L98.2%2C82.8%20L98.9%2C84.4%20L99.3%2C85.9%20L99.3%2C87.5%20L98.9%2C89.1%20L98.4%2C90.6%20L98.1%2C92.2%20L98.1%2C93.8%20L98.4%2C95.3%20L98.9%2C96.9%20L99.2%2C98.4%20L99.3%2C100.0%20L100.0%2C97.3%20L98.4%2C98.1%20L96.9%2C99.1%20L95.3%2C99.8%20L93.8%2C100.1%20L92.2%2C100.0%20L90.6%2C99.8%20L89.1%2C99.6%20L87.5%2C99.7%20L85.9%2C99.9%20L84.4%2C100.1%20L82.8%2C99.9%20L81.2%2C99.5%20L79.7%2C98.8%20L78.1%2C98.3%20L76.6%2C98.1%20L75.0%2C98.4%20L73.4%2C98.9%20L71.9%2C99.3%20L70.3%2C99.4%20L68.8%2C99.2%20L67.2%2C98.8%20L65.6%2C98.4%20L64.1%2C98.3%20L62.5%2C98.4%20L60.9%2C98.5%20L59.4%2C98.3%20L57.8%2C97.8%20L56.2%2C97.0%20L54.7%2C96.2%20L53.1%2C95.8%20L51.6%2C95.9%20L50.0%2C96.3%20L48.4%2C96.9%20L46.9%2C97.3%20L45.3%2C97.5%20L43.8%2C97.5%20L42.2%2C97.6%20L40.6%2C98.0%20L39.1%2C98.7%20L37.5%2C99.4%20L35.9%2C99.9%20L34.4%2C99.9%20L32.8%2C99.6%20L31.2%2C99.0%20L29.7%2C98.6%20L28.1%2C98.6%20L26.6%2C98.8%20L25.0%2C99.2%20L23.4%2C99.4%20L21.9%2C99.4%20L20.3%2C99.1%20L18.8%2C98.9%20L17.2%2C99.0%20L15.6%2C99.4%20L14.1%2C99.9%20L12.5%2C100.3%20L10.9%2C100.3%20L9.4%2C99.9%20L7.8%2C99.1%20L6.2%2C98.4%20L4.7%2C97.9%20L3.1%2C97.7%20L1.6%2C97.6%20L0.0%2C97.5%20L1.4%2C100.0%20L0.9%2C98.4%20L0.7%2C96.9%20L0.7%2C95.3%20L0.9%2C93.8%20L0.9%2C92.2%20L0.6%2C90.6%20L0.0%2C89.1%20L-0.5%2C87.5%20L-0.8%2C85.9%20L-0.6%2C84.4%20L-0.0%2C82.8%20L0.8%2C81.2%20L1.4%2C79.7%20L1.8%2C78.1%20L1.9%2C76.6%20L2.0%2C75.0%20L2.2%2C73.4%20L2.7%2C71.9%20L3.3%2C70.3%20L3.7%2C68.8%20L3.7%2C67.2%20L3.3%2C65.6%20L2.6%2C64.1%20L2.0%2C62.5%20L1.8%2C60.9%20L1.9%2C59.4%20L2.2%2C57.8%20L2.5%2C56.2%20L2.5%2C54.7%20L2.2%2C53.1%20L1.9%2C51.6%20L1.8%2C50.0%20L2.0%2C48.4%20L2.3%2C46.9%20L2.6%2C45.3%20L2.6%2C43.8%20L2.2%2C42.2%20L1.4%2C40.6%20L0.6%2C39.1%20L0.0%2C37.5%20L-0.2%2C35.9%20L-0.1%2C34.4%20L-0.0%2C32.8%20L-0.0%2C31.2%20L-0.3%2C29.7%20L-0.5%2C28.1%20L-0.5%2C26.6%20L-0.1%2C25.0%20L0.6%2C23.4%20L1.5%2C21.9%20L2.2%2C20.3%20L2.5%2C18.8%20L2.4%2C17.2%20L2.1%2C15.6%20L1.9%2C14.1%20L2.0%2C12.5%20L2.3%2C10.9%20L2.5%2C9.4%20L2.6%2C7.8%20L2.3%2C6.2%20L1.9%2C4.7%20L1.6%2C3.1%20L1.7%2C1.6%20L2.1%2C0.0%20Z'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  transition: transform .5s var(--ease);
}
.card h3 {
  margin: .5rem 0 .5rem;
  font-weight: 900;
  font-size: clamp(1.0625rem, .98rem + .38vw, 1.3125rem);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.card p {
  margin: 0;
  color: var(--ink-muted);           /* 5.28:1 on --paper */
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.62;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover img { transform: scale(1.025); }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .card--2, .card--3, .card--4 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .card--2, .card--3, .card--4 { grid-column: span 1; }
}

/* ---------- join ---------- */

.join {
  border-top: 1px solid var(--rule);
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;
}
.join__h {
  margin: 0 0 1.25rem;
  font-weight: 900;
  font-size: clamp(1.375rem, 1.08rem + 1.25vw, 2.125rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.join__note {
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  max-width: var(--measure);
  color: var(--ink-muted);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
}

/* The form is a centred block with ranged-left internals: labels and help text
   still read normally, the block still sits on the spine. */
.form { max-width: 27rem; margin-inline: auto; text-align: left; }
.form__btn { width: 100%; }
.form__row { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.form__label {
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink);                 /* 10.6:1 on --paper */
}
.form__input {
  font-family: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  width: 100%;
  transition: border-color .25s var(--ease);
}
.form__input:hover { border-color: var(--accent); }
.form__help {
  margin: 0;
  font-weight: 500;
  font-size: .875rem;
  color: var(--ink-muted);           /* 5.28:1 */
}
.form__err {
  margin: 0;
  font-weight: 700;
  font-size: .875rem;
  color: var(--accent-deep);
}
.form__input[aria-invalid="true"] { border-color: var(--accent-deep); }
.form__ok {
  margin: 1.25rem auto 0;
  max-width: 34rem;
  text-align: center;
}
.form__ok strong {
  display: block;
  font-weight: 900;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-bottom: .625rem;
}
.form__ok span {
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--ink-muted);
}

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

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--rule);
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 5vw, 3.5rem);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 1.5rem;
}
.foot__mark { margin: 0; font-weight: 900; font-size: 1rem; }
.foot__meta { margin: 0; font-weight: 500; font-size: .9375rem; color: var(--ink-muted); }
.foot__ig {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color .25s var(--ease);
}
.foot__ig:hover { color: var(--accent); }

/* ---------- motion : sequences the read, nothing more ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}