/* The Few Society. Mobile first; the desktop grid starts at 900px. See DESIGN.md. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-latin-ext.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --adriatic: #0E2A3B;
  --slate: #5B6B73;
  --limestone: #D9D4C7;
  --salt: #F2F4F3;
  --amber: #E0A43A;

  /* Text tints that pass WCAG AA (slate itself is lines-only, see DESIGN.md) */
  --salt-soft: rgb(242 244 243 / 0.72);
  --salt-line: rgb(242 244 243 / 0.45);
  --ink-soft: rgb(14 42 59 / 0.78);

  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --gutter: clamp(24px, 6vw, 72px);
  --space: clamp(96px, 18vw, 208px);
  --measure: 62ch;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--adriatic);
  color: var(--salt);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, dt, label, .button {
  font-family: var(--display);
  font-optical-sizing: auto;
  margin: 0;
}

p, ul, ol, dl, dd { margin: 0; }
p, dd, li { text-wrap: pretty; }
h1, h2, h3, dt { text-wrap: balance; }
p + p { margin-top: 1em; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--salt);
  outline-offset: 4px;
}
.section--light :focus-visible, .is-admin :focus-visible { outline-color: var(--adriatic); }

::selection { background: var(--salt); color: var(--adriatic); }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: 12px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--salt);
  color: var(--adriatic);
  font-family: var(--display);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

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

/* ---------- Button (amber: one of only two places it appears) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 30px;
  border: 0;
  border-radius: 2px;
  background: var(--amber);
  color: var(--adriatic);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.button:hover { background: #EAB553; text-decoration: none; }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.6; cursor: progress; }

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

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
}
.hero .wrap {
  display: flex;
  flex-direction: column;
  padding-block: clamp(56px, 12vh, 128px) clamp(48px, 9vh, 96px);
}

.hero__name {
  font-size: clamp(4rem, 24.5vw, 15rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.045em;
  margin-left: -0.04em; /* optical alignment of the T with the text below */
}
.hero__name span { display: block; }

.hero__manifesto {
  max-width: 24ch;
  margin-top: clamp(32px, 6vh, 56px);
  font-size: clamp(1.375rem, 5.4vw, 2.125rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.hero__seats { margin-top: auto; padding-top: clamp(48px, 10vh, 112px); }

.seats {
  display: flex;
  gap: clamp(10px, 3vw, 20px);
  padding: 0;
  list-style: none;
}
.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: clamp(38px, 11vw, 60px);
}
.seat svg { display: block; width: 100%; height: auto; overflow: visible; }
.seat circle {
  fill: transparent;
  stroke: var(--amber);
  stroke-width: 2.5;
  transform: rotate(-90deg);
  transform-origin: center;
  transform-box: fill-box;
}
.seat.is-taken circle { fill: var(--amber); }
.seat__no {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--salt-soft);
}
.hero__seatline {
  margin-top: 20px;
  color: var(--salt-soft);
}
.hero .button { margin-top: 28px; }

/* The one orchestrated moment: seats light up in order, like a lighthouse sweep. */
@media (prefers-reduced-motion: no-preference) {
  .seat circle {
    stroke-dasharray: 132;
    stroke-dashoffset: 132;
    animation: seat-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
  .seat.is-taken circle {
    fill: transparent;
    animation: seat-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) forwards,
               seat-fill 500ms ease 1.6s forwards;
  }
  .seat__no { opacity: 0; animation: seat-no 500ms ease forwards; }
  .seat:nth-child(1) :is(circle, .seat__no) { animation-delay: 300ms, 1.6s; }
  .seat:nth-child(2) :is(circle, .seat__no) { animation-delay: 440ms, 1.7s; }
  .seat:nth-child(3) :is(circle, .seat__no) { animation-delay: 580ms, 1.8s; }
  .seat:nth-child(4) :is(circle, .seat__no) { animation-delay: 720ms, 1.9s; }
  .seat:nth-child(5) :is(circle, .seat__no) { animation-delay: 860ms, 2s; }
  .seat:nth-child(6) :is(circle, .seat__no) { animation-delay: 1000ms, 2.1s; }
}
@keyframes seat-draw { to { stroke-dashoffset: 0; } }
@keyframes seat-fill { to { fill: var(--amber); } }
@keyframes seat-no { to { opacity: 1; } }

/* ---------- Sections ---------- */

.section {
  padding-block: var(--space);
  border-top: 1px solid var(--slate);
}
.section--light {
  background: var(--limestone);
  color: var(--adriatic);
  border-top: 0;
}
.section--light + .section { border-top: 0; }

.section__title {
  font-size: clamp(2.5rem, 10.5vw, 4.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 40px;
  max-width: 12ch;
}

.section__body { max-width: var(--measure); }

.lead {
  font-size: clamp(1.375rem, 5vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.lead + * { margin-top: 32px; }

.section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.section__body > h3 { margin-top: 64px; margin-bottom: 16px; }

.quiet { color: var(--salt-soft); }

/* Who it's for: three criteria as ruled lines */
.ticks {
  position: relative;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding-block: 18px;
  font-family: var(--display);
  font-size: clamp(1.375rem, 5.6vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* What members get: a real sequence. The line is time; the filled dot is now. */
.sequence { padding: 0; list-style: none; }
.sequence__step {
  position: relative;
  padding-left: 44px;
  padding-bottom: 56px;
}
.sequence__step:last-child { padding-bottom: 0; }
.sequence__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--adriatic);
  border-radius: 50%;
  background: var(--limestone);
}
.sequence__step.is-now::before { background: var(--adriatic); }
.sequence__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 25px;
  bottom: 4px;
  width: 2px;
  background: var(--slate);
}
.sequence__when {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-soft);
}
.sequence h3 {
  margin: 4px 0 12px;
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.sequence__step:not(.is-now) h3 { font-size: clamp(1.625rem, 6vw, 2rem); }
.sequence__step:not(.is-now) > p:last-child { color: var(--ink-soft); }

/* Founding members: the member numbers, set as display type */
.numerals {
  margin-bottom: 40px;
  font-family: var(--display);
  font-size: clamp(4rem, 19vw, 10rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.numerals .n { display: inline-block; }
.numerals .dash { color: var(--slate); }

/* ---------- Application form ---------- */

.section--apply .lead { margin-bottom: 48px; }

.apply__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 24px;
}

.field { display: flex; flex-direction: column; min-width: 0; }
.field label {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}
.hint {
  margin-top: 4px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--salt-soft);
}
.error {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}
.error:empty { display: none; }
.has-error .error { margin-top: 8px; }
.has-error .error::before { content: 'Error: '; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.has-error:not(.field--check) {
  padding-left: 16px;
  border-left: 3px solid var(--salt);
}

input[type='text'], input[type='email'], input[type='url'], textarea, select {
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
  border: 1px solid var(--salt-line);
  border-radius: 2px;
  background: rgb(242 244 243 / 0.04);
  color: var(--salt);
  font: inherit;
  font-size: 1.125rem; /* 16px+ stops iOS zooming in */
  line-height: 1.45;
  appearance: none;
}
textarea { resize: vertical; min-height: 3.5em; }
input:hover, textarea:hover { border-color: var(--salt-soft); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: 2px;
  border-color: var(--salt);
}
[aria-invalid='true'] { border: 2px solid var(--salt); }

.field--check { margin-top: 40px; }
.check { display: flex; gap: 14px; align-items: flex-start; }
.check label { font-family: var(--serif); font-weight: 400; font-size: 1.0625rem; line-height: 1.45; cursor: pointer; }
.check input {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 1.5px solid var(--salt);
  border-radius: 2px;
  background: transparent center / 18px no-repeat;
  appearance: none;
  cursor: pointer;
}
.check input:checked {
  background-color: var(--salt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%230E2A3B' stroke-width='2.4'/%3E%3C/svg%3E");
}
.check input[aria-invalid='true'] { outline: 2px solid var(--salt); outline-offset: 3px; }
.field--check .hint { margin-top: 12px; padding-left: 40px; }
.field--check .error { margin: 0 0 12px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.error-summary {
  margin-bottom: 48px;
  padding: 24px 24px 24px 20px;
  border-left: 4px solid var(--salt);
  background: rgb(242 244 243 / 0.06);
}
.error-summary h3 { margin-bottom: 12px; }
.error-summary ul { padding-left: 1.1em; }
.error-summary li + li { margin-top: 6px; }

.form-status:empty { display: none; }
.form-status { margin-top: 32px; font-family: var(--display); font-weight: 700; }

.apply .button { margin-top: 40px; width: 100%; }

.confirmation {
  padding-top: 32px;
  border-top: 1px solid var(--slate);
}
.confirmation h3 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.confirmation p { font-size: clamp(1.25rem, 4.6vw, 1.5rem); line-height: 1.4; max-width: 34ch; }
.confirmation:focus { outline: none; }

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

.faq { position: relative; }
.faq > div { position: relative; padding-block: 28px; }
.faq dt {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.faq dd { margin-top: 10px; }

/* ---------- Footer & small pages ---------- */

.footer {
  padding-block: 72px 56px;
  color: var(--salt-soft);
  font-size: 1rem;
}
.footer__name {
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--salt);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.footer__links a { display: inline-block; padding-block: 8px; color: var(--salt); }

.topbar { padding-block: 24px; }
.topbar__name {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.prose-page { border-top: 0; padding-top: clamp(40px, 8vw, 96px); }
.prose h2 {
  margin: 48px 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.notfound { border-top: 0; min-height: 80vh; }
.notfound .section__title { margin-bottom: 24px; }
.notfound .lead { margin-bottom: 24px; }

/* ---------- Admin ---------- */

.is-admin { background: var(--limestone); color: var(--adriatic); color-scheme: light; }
.admin { padding-block: 24px 96px; }
.admin h1 {
  font-size: clamp(2.5rem, 9vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.tabs { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 32px; padding: 0; list-style: none; font-family: var(--display); font-weight: 600; }
.tabs a { display: inline-block; padding-block: 8px; text-decoration: none; color: var(--ink-soft); }
.tabs a[aria-current='page'] { color: var(--adriatic); text-decoration: underline; text-decoration-thickness: 2px; }
.tabs span { font-variant-numeric: tabular-nums; }
.app { padding-block: 32px; border-top: 1px solid var(--slate); scroll-margin-top: 16px; }
.app__head h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.app__who { margin-top: 4px; font-family: var(--display); font-size: 1.125rem; font-weight: 500; }
.app__meta { margin-top: 4px; font-size: 0.9375rem; color: var(--ink-soft); }
.app__contact { margin-top: 16px; padding: 0; list-style: none; font-size: 1rem; }
.app__contact li + li { margin-top: 6px; }
.app__contact a { font-family: var(--display); font-weight: 600; overflow-wrap: anywhere; }
.app__contact span { display: block; color: var(--ink-soft); overflow-wrap: anywhere; }
.app__status { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-family: var(--display); }
.app__status label { font-weight: 600; }
.app__status select {
  width: auto;
  margin: 0;
  padding: 8px 40px 8px 12px;
  border-color: var(--adriatic);
  background: var(--salt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E2A3B' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  color: var(--adriatic);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
}
.app[data-status='new'] select { background-color: var(--adriatic); color: var(--salt); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2F4F3' stroke-width='1.6'/%3E%3C/svg%3E"); }
.button--small { min-height: 40px; padding: 8px 18px; font-size: 0.9375rem; background: var(--adriatic); color: var(--salt); }
.button--small:hover { background: var(--slate); }
.app__answers { display: grid; gap: 20px; margin-top: 28px; max-width: 68ch; }
.app__answers dt { font-size: 0.9375rem; font-weight: 600; color: var(--ink-soft); }
.app__answers dd { margin-top: 2px; }
.app__answers dd { overflow-wrap: anywhere; }
.admin__empty { color: var(--ink-soft); }

/* ---------- Ruled lines (pseudo-elements so they can draw in) ---------- */

.ticks li::before, .ticks::after, .faq > div::before, .faq::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--slate);
  transform-origin: left center;
}
.ticks li::before, .faq > div::before { top: 0; }
.ticks::after, .faq::after { bottom: 0; }

/* ---------- Scroll motion ----------
   motion.js adds .motion to <html> (never under reduced motion) and .is-pending to anything still
   below the fold; .is-pending comes off as it scrolls into view. Without JS nothing is hidden. */

/* 1. Hero: the content sinks and fades as the next section slides over it */
.hero { position: relative; z-index: 0; }
.hero + main { position: relative; z-index: 1; background: var(--adriatic); }
.motion .hero .wrap {
  transform: translate3d(0, calc(var(--hero-p, 0) * 28vh), 0);
  opacity: calc(1 - var(--hero-p, 0) * 0.85);
  will-change: transform, opacity;
}

/* 2 + 5. Ruled lists: lines draw left to right, then each row settles in.
   Transitions exist only once an element is no longer pending, so hiding is instant and only
   the reveal animates. Longhands, so the per-row delays below survive. */
.ticks li span { display: block; }
.motion .ticks:not(.is-pending) li::before, .motion .faq:not(.is-pending) > div::before,
.motion .ticks:not(.is-pending)::after, .motion .faq:not(.is-pending)::after {
  transition-property: transform;
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.motion .ticks:not(.is-pending) li span, .motion .faq:not(.is-pending) :is(dt, dd) {
  transition-property: opacity, transform;
  transition-duration: 800ms, 900ms;
  transition-timing-function: ease, cubic-bezier(0.16, 1, 0.3, 1);
}
.is-pending.ticks li::before, .is-pending.ticks::after,
.is-pending.faq > div::before, .is-pending.faq::after { transform: scaleX(0); }
.is-pending.ticks li span, .is-pending.faq dt, .is-pending.faq dd { opacity: 0; transform: translateY(14px); }

/* Stagger, also scoped to the revealed state: a delay alone would still start a transition. */
.motion .ticks:not(.is-pending) li:nth-child(2)::before, .motion .faq:not(.is-pending) > div:nth-child(2)::before { transition-delay: 120ms; }
.motion .ticks:not(.is-pending) li:nth-child(3)::before, .motion .faq:not(.is-pending) > div:nth-child(3)::before { transition-delay: 240ms; }
.motion .faq:not(.is-pending) > div:nth-child(4)::before { transition-delay: 360ms; }
.motion .ticks:not(.is-pending)::after { transition-delay: 360ms; }
.motion .faq:not(.is-pending)::after { transition-delay: 480ms; }
.motion .ticks:not(.is-pending) li:nth-child(1) span, .motion .faq:not(.is-pending) > div:nth-child(1) > * { transition-delay: 200ms; }
.motion .ticks:not(.is-pending) li:nth-child(2) span, .motion .faq:not(.is-pending) > div:nth-child(2) > * { transition-delay: 320ms; }
.motion .ticks:not(.is-pending) li:nth-child(3) span, .motion .faq:not(.is-pending) > div:nth-child(3) > * { transition-delay: 440ms; }
.motion .faq:not(.is-pending) > div:nth-child(4) > * { transition-delay: 560ms; }

/* 3. The timeline fills as you scroll through it; reached steps darken */
.motion .sequence__step:not(:last-child) {
  background: linear-gradient(rgb(91 107 115 / 0.35), rgb(91 107 115 / 0.35)) no-repeat 7px 25px / 2px calc(100% - 29px);
}
.motion .sequence__step:not(:last-child)::after {
  background: var(--adriatic);
  transform: scaleY(var(--fill, 0));
  transform-origin: top center;
}
.motion .sequence__step:not(.is-now)::before { border-color: var(--slate); transition: border-color 400ms ease; }
.motion .sequence__step.is-reached::before { border-color: var(--adriatic); }
.motion .sequence__step:not(.is-now) h3 { transition: color 400ms ease; }
.motion .sequence__step:not(.is-now):not(.is-reached) h3 { color: var(--ink-soft); }

/* 4. Founding numerals rise from behind a baseline */
.numerals { overflow: hidden; padding-top: 0.12em; margin-top: -0.12em; }
.motion .numerals:not(.is-pending) .n {
  transition-property: transform;
  transition-duration: 1100ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.motion .numerals:not(.is-pending) .n:nth-child(2) { transition-delay: 90ms; }
.motion .numerals:not(.is-pending) .n:nth-child(3) { transition-delay: 180ms; }
.is-pending.numerals .n { transform: translateY(110%); }

/* ---------- Larger screens ---------- */

@media (min-width: 640px) {
  .apply__grid { grid-template-columns: 1fr 1fr; }
  .apply__grid > .field { grid-column: span 2; }
  .apply__grid > .field--half, .apply__grid > .field--narrow { grid-column: span 1; }
  .field--narrow input { max-width: 8ch; box-sizing: content-box; }
  .apply .button { width: auto; }
}

@media (min-width: 900px) {
  body { font-size: 1.25rem; }
  .grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }
  .section__title {
    grid-column: 1 / span 4;
    position: sticky;
    top: 48px;
    font-size: clamp(2.75rem, 4.6vw, 4.25rem);
    margin-bottom: 0;
  }
  .section__body { grid-column: 6 / span 7; }
  .section__body--wide { max-width: 720px; }
  .faq > div { display: grid; grid-template-columns: 2fr 3fr; gap: 32px; }
  .faq dd { margin-top: 0; }
  .hero .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    column-gap: 32px;
    padding-block: clamp(48px, 9vh, 104px) clamp(48px, 8vh, 88px);
  }
  .hero__name { grid-column: 1 / -1; align-self: start; font-size: clamp(4rem, 17vw, 15rem); }
  .hero__manifesto { grid-column: 1 / span 5; align-self: end; max-width: 22ch; margin-top: 0; }
  .hero__seats { grid-column: 7 / span 6; align-self: end; margin-top: 0; padding-top: 64px; }
  .seat { width: clamp(48px, 4.4vw, 68px); }
  .app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; padding-block: 40px; }
  .app__answers { margin-top: 0; }
}