/* Collective Sponsors.
   Warm off-white paper, near-black ink, one bronze hairline. The register is
   quiet-luxury editorial: very few typefaces, very few rules, an enormous
   amount of space, and nothing that moves unless you scroll.

   Two type roles only:
     mono, uppercase, wide-tracked, small — labels, nav, buttons, numbers
     sans, light, very large             — statements
   Anything that can't be one of those two probably shouldn't be on the page.

   The hero is the one dark surface: a full-bleed photograph with white type
   over it, which is the whole reason the page opens the way it does. Every
   other section is paper. Text that sits over a photograph lives under
   `.on-image` and is scoped white there rather than being white by default.

   Committed to light. There is no dark variant, so the page looks the same
   whatever the visitor's system is set to. */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400&family=Inter:wght@200;300;400;500&display=swap");

:root {
  color-scheme: light;

  --paper: #faf9f7;
  --paper-deep: #f2efea;
  --card: #ffffff;
  --ink: #14120f;
  --dim: #6f6a63;
  --dimmer: #9a938a;
  --line: rgba(20, 18, 15, .17);
  --line-soft: rgba(20, 18, 15, .09);
  --bronze: #9a7444;
  --error: #a8443f;
  --good: #3f6f52;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wide: 1320px;
  --pad: 40px;
  --nav: 72px;

  /* One rhythm value drives every section's breathing room. */
  --chapter: clamp(96px, 14vh, 180px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Long words — an email address, a pasted handle, a URL — must wrap rather
   than widen the page. */
h1, h2, h3, p, li, dd, td, span, b, a { overflow-wrap: break-word; }

a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad); width: 100%; }
.narrow { max-width: 860px; }

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

/* Off-screen until focused. The first thing a keyboard or screen-reader user
   hits should be a way past the nav, not the nav itself. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
}
.skip:focus { left: 0; }

/* --- The two type roles --------------------------------------------------- */

/* Small, uppercase, wide-tracked. Labels, nav, buttons, attributions, specs. */
.label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0;
}
.label.faint { color: var(--dim); }

/* Large, light, sentence case. Statements. */
.statement {
  font-weight: 200;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.statement.dim { color: var(--dim); }

.body-copy {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dim);
  max-width: 58ch;
  margin: 0;
}
.body-copy + .body-copy { margin-top: 20px; }
.body-copy b, .body-copy strong { color: var(--ink); font-weight: 400; }

/* --- Type over a photograph ----------------------------------------------- */

/* Scoped rather than global: only a section that actually sits on an image
   flips to white, so nothing else on the page has to fight it back. */
.on-image { color: #ffffff; }
.on-image .label.faint { color: rgba(255, 255, 255, .72); }
.on-image .triad { color: rgba(255, 255, 255, .8); }
.on-image .button { border-color: #ffffff; color: #ffffff; }
.on-image .button:hover { background: #ffffff; color: var(--ink); }
.on-image .button.solid { background: #ffffff; color: var(--ink); }
.on-image .button.solid:hover { background: transparent; color: #ffffff; }
.on-image ::selection { background: #ffffff; color: var(--ink); }

/* --- Scroll reveal -------------------------------------------------------- */

/* Set by app.js once the observer is wired, so a visitor with JS disabled
   sees the finished page rather than an empty one. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s cubic-bezier(.2, .6, .2, 1), transform 1s cubic-bezier(.2, .6, .2, 1);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .12s; }
.js .reveal[data-delay="2"] { transition-delay: .24s; }
.js .reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Nav ------------------------------------------------------------------ */

/* Transparent over the hero photograph, where it is white; solid paper the
   moment the page scrolls past it. */
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--nav);
  display: flex;
  align-items: center;
  color: #ffffff;
  transition: background-color .4s ease, backdrop-filter .4s ease,
              border-color .4s ease, color .4s ease;
  border-bottom: 1px solid transparent;
}
.site-head.solid {
  background: rgba(250, 249, 247, .88);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}

.site-head .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.wordmark {
  grid-column: 2;
  justify-self: center;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark b { font-weight: 400; }

.site-nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-home { grid-column: 1; justify-self: start; }
.site-nav a, .nav-home a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: .68;
  transition: opacity .25s ease;
}
.site-nav a:hover, .nav-home a:hover { opacity: 1; }
.site-nav a[aria-current="page"] { opacity: 1; }

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 34px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.button:hover { background: var(--ink); color: var(--paper); }
.button:focus-visible { outline: 1px solid var(--bronze); outline-offset: 4px; }

.button.solid { background: var(--ink); color: var(--paper); }
.button.solid:hover { background: transparent; color: var(--ink); }

.button.quiet { border-color: var(--line); color: var(--dim); }
.button.quiet:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

.button[disabled] { opacity: .4; cursor: default; }
.button[disabled]:hover { background: transparent; color: var(--ink); }

/* A bare text link with the rule under it — used where a button would shout. */
.textlink {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color .3s ease;
}
.textlink:hover { border-bottom-color: var(--ink); }

/* --- Full-bleed chapters -------------------------------------------------- */

/* A chapter names the image it wants in `data-img`; app.js sets `--img` and
   `.has-img` only once that file has actually decoded. Until then the graded
   field below stands in, so a missing photograph is a finished-looking page
   rather than a broken one. */
.chapter {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav) + var(--chapter)) 0 var(--chapter);
  overflow: hidden;
  background: #0d0d0d;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #0d0d0d;
  background-image: var(--img, none);
  background-size: cover;
  background-position: var(--img-pos, center);
  background-repeat: no-repeat;
}

/* Scrim. The supplied photography is bright warm studio work and the type on
   it is white, so it needs a floor under it or the whole thing turns into a
   stock-photo banner. */
.chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.15) 68%, rgba(0,0,0,.45) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.5), transparent 70%);
}

/* No photograph yet. */
.chapter:not(.has-img)::before {
  background-image:
    radial-gradient(90% 60% at var(--tint-x, 20%) var(--tint-y, 15%), rgba(185, 155, 107, .13), transparent 60%),
    radial-gradient(70% 60% at 85% 85%, rgba(255, 255, 255, .06), transparent 65%),
    linear-gradient(var(--tint-a, 160deg), #1a1a1a 0%, #0d0d0d 55%, #070707 100%);
}

.chapter-inner { width: 100%; }

/* Index numeral in the corner of each chapter — tells you where you are in
   the sequence without a progress bar. */
.chapter-index {
  position: absolute;
  top: calc(var(--nav) + 28px);
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.chapter-index .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 255, 255, .6);
}

/* A chapter whose subject sits on the right of the frame. The scrim runs
   left-to-right instead of bottom-up so the type lands on the empty part of
   the backdrop rather than on the subject. */
.chapter.subject-right { --img-pos: right center; }
.chapter.subject-right::after {
  background:
    linear-gradient(to right, rgba(0,0,0,.90) 0%, rgba(0,0,0,.74) 30%, rgba(0,0,0,.30) 58%, rgba(0,0,0,.08) 100%),
    /* A band under the nav. The right of this frame is a bright tan backdrop
       and the nav is white type over it — without this the links wash out. */
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 12%, transparent 22%),
    linear-gradient(to top, rgba(0,0,0,.5), transparent 40%);
}

/* On a phone there is no empty left third to write into — the crop is close
   to the subject either way, so the scrim goes back to bottom-up and the type
   sits under them. */
@media (max-width: 720px) {
  /* On a phone this frame crops to about a third of the photograph's width,
     and biasing that third to the right pushes the subject's face off the
     left edge. Centre it: the type moves under her here anyway, because the
     scrim below flips to bottom-up. */
  .chapter.subject-right { --img-pos: center center; }
  .chapter.subject-right::after {
    background:
      linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.68) 42%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.45) 100%);
  }
}

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

.hero { align-items: center; min-height: 100svh; }
.hero .wrap > * { max-width: 620px; }

.hero h1 {
  font-weight: 200;
  font-size: clamp(38px, 6.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 26px 0 0;
  max-width: 17ch;
  text-wrap: balance;
}

/* "Matched. Negotiated. Paid." — the reference's three-word cadence, set as
   one line that breaks to three on a phone. */
.triad {
  font-family: var(--mono);
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 34px 0 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 46px 0 0;
}

.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
}
.scroll-cue span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }

/* --- Placements ----------------------------------------------------------- */

/* Each placement is a full-bleed photograph you scroll into, with the mark and
   the copy sitting on it — the same treatment as the hero.

   The source files are portrait and were 730–1200px wide, which is under half
   what a full-bleed chapter needs on a large display. They are converted to
   black and white and upscaled with lanczos before being used here: the
   desaturation unifies four very different colour casts (two warm studio tans,
   one hot pink, one cool grey) into one sequence, and it hides the softness
   that a 2x blow-up would otherwise make obvious. Colour originals are kept
   alongside as `<name>-color.jpg` — switching back is a filename change. */
/* Focal points, one per photograph.
   These are portrait files in a landscape frame, so `cover` fills the width
   exactly and spills vertically — on a desktop window the horizontal position
   has no effect at all and only the vertical one does. A single shared value
   cannot work when the four faces sit at 15%, 23%, 39% and 49% of their
   frame's height; each below is set so the face lands around the top third of
   the viewport, clear of the copy at the bottom, without cropping the top of
   anyone's head.

   On a phone the maths inverts — the frame is narrower than the image is
   tall, so the height fits, the width spills, and only the horizontal
   position matters. Every subject is roughly centred, so the narrow rule at
   the end of this file just says `center`. */
.p-alo     { --img-pos: center 62%; }
.p-skims   { --img-pos: center 8%; }
.p-sephora { --img-pos: center 18%; }
.p-ulta    { --img-pos: center 35%; }

/* Anchored bottom-left over the photograph, with the copy held to a column
   narrow enough to stay off the subject. */
.placement .wrap > * { max-width: 640px; }

.placement .brand-name { font-size: clamp(48px, 10vw, 132px); margin: 18px 0 0; }
.placement .brand-line { max-width: 46ch; }

.brand-name {
  font-weight: 200;
  line-height: .95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
}

.brand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.on-image .brand-meta { border-top-color: rgba(255, 255, 255, .28); }

.brand-line {
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--dim);
}
.on-image .brand-line { color: rgba(255, 255, 255, .88); }

/* Brand marks are supplied as full-colour SVGs. Knocking them back to a flat
   ink or white keeps the page monochrome and stops four unrelated brand
   palettes fighting each other and the photography. */
.brand-logo {
  height: var(--logo-h, 34px);
  width: auto;
  max-width: min(260px, 70%);
  margin: 22px 0 0;
  filter: brightness(0);
  opacity: .92;
}
.on-image .brand-logo { filter: brightness(0) invert(1); opacity: .96; }

.logo-alo { --logo-h: clamp(36px, 4vw, 52px); }
.logo-skims { --logo-h: clamp(22px, 2.4vw, 30px); }
.logo-ulta { --logo-h: clamp(28px, 3vw, 38px); }

/* A mark starts hidden and is revealed by app.js only once the file has
   decoded, so a missing logo shows the typeset name instead of a broken-image
   glyph — and a visitor with scripting off gets the name, never the glyph. */
.brand-logo[data-logo] { display: none; }
.brand-logo[data-logo].loaded { display: block; }
.brand-logo[data-logo].loaded ~ [data-logo-fallback] { display: none; }

/* --- Plain sections ------------------------------------------------------- */

.section { padding: var(--chapter) 0; border-top: 1px solid var(--line-soft); }
.section.flush { border-top: 0; }

.section-head { margin-bottom: 60px; }
.section-head .label { margin-bottom: 22px; }

/* Two long-form columns. Cards with borders and shadows read as a dashboard;
   two columns of type separated by whitespace read as a magazine. */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 90px;
}
.duo > div { display: flex; flex-direction: column; }
.duo h3 {
  font-weight: 200;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 18px 0 22px;
}

.spec { list-style: none; margin: 34px 0 40px; padding: 0; counter-reset: spec; }
.spec li {
  counter-increment: spec;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
.spec li::before {
  content: counter(spec, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--bronze);
  padding-top: 4px;
}
.spec b { font-weight: 400; font-size: 16px; }
.spec span { color: var(--dim); font-size: 15px; line-height: 1.6; }

.duo .button { margin-top: auto; align-self: flex-start; }
.duo .foot-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin: 16px 0 0;
}

/* --- Terms ---------------------------------------------------------------- */

/* The spec line: "0% from creators. Agreed in writing. Paid on placement." */
.spec-line {
  font-size: clamp(19px, 2.3vw, 30px);
  font-weight: 200;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--dim);
  margin: 30px 0 0;
  max-width: 26ch;
}
.spec-line b { color: var(--ink); font-weight: 200; }

/* auto-fit rather than a fixed count: the number of promises here has already
   changed once and will again. */
.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 50px 44px;
  margin-top: 80px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.terms h4 { margin: 0 0 14px; }
.terms p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.65; }

/* --- Statement band ------------------------------------------------------- */

.pull {
  padding: calc(var(--chapter) * 1.3) 0;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-deep);
  text-align: center;
}
.pull p {
  font-weight: 200;
  font-size: clamp(28px, 4.6vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}
.pull .label { margin-top: 34px; color: var(--dimmer); }

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

.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 300;
  letter-spacing: -0.015em;
  transition: color .25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--dim); }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 300;
  color: var(--bronze);
  flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--dim); margin: 0 0 30px; max-width: 68ch; font-size: 16px; }

/* --- Closing CTA ---------------------------------------------------------- */

.close-out { padding: calc(var(--chapter) * 1.2) 0; border-top: 1px solid var(--line-soft); text-align: center; }
.close-out h2 {
  font-weight: 200;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  margin: 24px 0 0;
  text-wrap: balance;
}
.close-out .hero-actions { justify-content: center; }

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

.site-foot {
  border-top: 1px solid var(--line-soft);
  padding: 40px 0;
  color: var(--dimmer);
  background: var(--paper-deep);
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-foot a { text-decoration: none; transition: color .25s ease; }
.site-foot a:hover { color: var(--ink); }
.site-foot .spacer { margin-left: auto; }

/* --- Form pages ----------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: 96px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: calc(var(--nav) + 88px) var(--pad) 120px;
  align-items: start;
}

.rail { position: sticky; top: calc(var(--nav) + 48px); }
.rail h1 {
  font-weight: 200;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 22px 0 24px;
  text-wrap: balance;
}
.rail p { color: var(--dim); max-width: 34ch; font-size: 16px; }
.rail-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--dimmer);
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
  margin-top: 34px;
}

.form { display: flex; flex-direction: column; gap: 0; max-width: 760px; }

.q { border-top: 1px solid var(--line-soft); padding: 52px 0 0; margin-bottom: 52px; }
.q:first-of-type { border-top: 0; padding-top: 0; }
.q > h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 10px;
}
.q > .hint { color: var(--dim); font-size: 15px; margin: 0 0 30px; max-width: 58ch; }
.q > h2 + .grid-2, .q > h2 + .field, .q > h2 + .chips, .q > h2 + .platforms { margin-top: 28px; }

.sub {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 10px;
}
.sub .opt { color: var(--dimmer); }

.field { margin-bottom: 4px; }

input[type="text"], input:not([type]), input[type="email"], input[type="tel"],
input[type="url"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  padding: 11px 2px;
  border-radius: 0;
  transition: border-color .25s ease;
}
select {
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dim) 50%),
    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: right 11px center, right 6px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
select option { background: var(--card); color: var(--ink); }
textarea {
  border: 1px solid var(--line);
  padding: 14px;
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
  background: var(--card);
}
input:hover, select:hover, textarea:hover { border-color: rgba(20, 18, 15, .38); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--dimmer); }
input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 28px; }

/* --- Platform rows -------------------------------------------------------- */

.platform-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 140px;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.platform-row:first-child { border-top: 1px solid var(--line-soft); }
.platform-row > .name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.platform-row input { padding: 6px 2px; }
.platform-row .err { grid-column: 1 / -1; margin: 0; }

/* --- Chips ---------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.chip span:hover { border-color: var(--ink); color: var(--ink); }
.chip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip input:focus-visible + span { outline: 1px solid var(--bronze); outline-offset: 3px; }
.chip input:disabled + span { opacity: .35; cursor: not-allowed; }
.chip input:disabled + span:hover { border-color: var(--line); color: var(--dim); }
.chip small { display: block; font-size: 10px; letter-spacing: .06em; opacity: .65; }

.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 18px 0;
  cursor: pointer;
  line-height: 1.55;
  font-size: 15px;
  color: var(--dim);
}
.check input {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--ink);
  cursor: pointer;
}

.note { font-size: 13px; color: var(--dimmer); margin: 16px 0 0; max-width: 60ch; line-height: 1.6; }

.err { color: var(--error); font-size: 13px; margin: 8px 0 0; font-family: var(--mono); letter-spacing: .02em; }
.err:empty { display: none; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   inputs but not positioned ones. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.actions { border-top: 1px solid var(--line); padding-top: 40px; }
.actions .button { min-width: 260px; }
.status { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--dim); margin: 20px 0 0; }
.status.bad { color: var(--error); }

/* --- Thanks --------------------------------------------------------------- */

.thanks {
  max-width: 780px;
  margin: 0 auto;
  padding: calc(var(--nav) + 130px) var(--pad) 140px;
}
.thanks h1 {
  font-weight: 200;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 24px 0 26px;
  text-wrap: balance;
}
.thanks .lede { font-size: 19px; color: var(--dim); margin: 0; max-width: 50ch; font-weight: 300; }
.thanks-next { border-top: 1px solid var(--line); margin: 66px 0 0; padding-top: 12px; }
.thanks-next dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-top: 34px;
}
.thanks-next dd { margin: 10px 0 0; color: var(--dim); max-width: 62ch; }

/* --- Narrow --------------------------------------------------------------- */

@media (max-width: 1000px) {
  .duo { grid-template-columns: 1fr; gap: 64px; }
  .terms { grid-template-columns: 1fr; gap: 36px; }
  .layout { grid-template-columns: 1fr; gap: 48px; }
  .rail { position: static; }
  .rail p { max-width: none; }
}

@media (max-width: 720px) {
  :root { --pad: 22px; --nav: 60px; --chapter: clamp(72px, 10vh, 110px); }

  body { font-size: 15px; }

  /* "Collective Sponsors" at desktop tracking plus two nav links is wider
     than a 375px screen. Left alone the header overflows, and because it is
     fixed it drags the whole document wider than the viewport rather than
     being clipped by the body's overflow-x. Everything here is about fitting
     that one row. */
  .site-head .wrap { grid-template-columns: auto 1fr; gap: 10px; }
  .wordmark { grid-column: 1; justify-self: start; font-size: 11px; letter-spacing: .16em; }
  .site-nav { grid-column: 2; gap: 14px; }
  .site-nav a { font-size: 10px; letter-spacing: .1em; }
  .nav-home { display: none; }

  .hero-actions { gap: 12px; }
  .hero-actions .button { flex: 1 1 100%; }

  .brand-meta { gap: 8px 24px; }
  .placement .wrap > * { max-width: none; }
  /* A portrait source in a portrait frame fits vertically and spills
     horizontally, so the vertical focal points above stop applying and only
     the horizontal one counts. Every subject is centred in frame. */
  .placement { --img-pos: center; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 26px; }

  .platform-row { grid-template-columns: 1fr 116px; gap: 8px 16px; padding: 16px 0; }
  .platform-row > .name { grid-column: 1 / -1; }

  .actions .button { width: 100%; }

  .spec li { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; }
}