/* 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;
  --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;
}

/* ---------- nav : one line, 66px ---------- */

.nav {
  height: 66px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.nav__mark {
  font-weight: 900;
  font-size: clamp(1rem, .9rem + .35vw, 1.15rem);
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}
.nav__cta {
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color .25s var(--ease);
}
.nav__cta:hover { color: var(--accent); }

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

.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(.5rem, 2vw, 1.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5.5rem);
  text-align: center;
}

.hero__art {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin-inline: auto;
  /* No CSS masks. The torn-paper edge is baked into the image's alpha channel:
     a crisp irregular cut where content meets the boundary, like the collage it
     is. The artwork's own paper ground matches the page, so the left and top
     simply continue into the sheet. Never reintroduce rectangular fades here;
     they wash out the silhouettes (Erik called it, 2026-07-26). */
}

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

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

/* Manifesto voice: centred on the page spine like the tagline and the creed,
   set a size up from default so it reads as spoken text, not filler. */
.prose {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.prose p {
  margin: 0 auto 1.75rem;
  max-width: 62ch;
  font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem);
  line-height: 1.62;
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }

/* ---------- creed : full-width, the one raised voice on the page ---------- */

.creed {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: clamp(1.5rem, 4vw, 3rem) auto clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
  max-width: var(--shell);
}
.creed__line {
  margin: 0 auto;
  max-width: 22ch;
  font-weight: 900;
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
}

/* ---------- 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 clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.625rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
}

.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(170px, 20vw, 280px);
  object-fit: cover;
  border-radius: var(--radius);
  /* Same treatment as the hero: feather every edge so the illustration
     dissolves into the sheet instead of sitting on it as a tile. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  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: .9375rem;
  line-height: 1.6;
}

@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: 1rem;
}

/* 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 0 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: .875rem;
}

/* 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); }

/* ---------- 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; }
}