/* STARS NETWORK · /apply
   An invitation, not a pitch. Centred throughout (the one page that is): a
   sealed envelope, then the card slides out and the pages spill; what we look
   for at poster scale; the terms as an invitation's fine print; and the reply
   card, the one place the site turns to ink on paper. */

/* ------------------------------------------------------------------ hero */
.a-hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; justify-items: center; align-content: end;
  grid-template-rows: auto 1fr auto auto auto; text-align: center;
  padding: calc(var(--nav-h) + 3vh) var(--pad) calc(9vh + env(safe-area-inset-bottom, 0px));
}
.a-hero__over { grid-row: 1; margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dim); }
.a-hero__title { grid-row: 3; font-size: clamp(52px, 8.2vw, 152px); line-height: .92; letter-spacing: -0.024em; margin: 0; }
.a-hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.a-hero__title .line > span { display: block; }
.a-hero__lead { grid-row: 4; margin: 22px 0 0; font-family: var(--serif); font-size: clamp(18px, 1.4vw, 24px); line-height: 1.32; color: var(--bone); max-width: 30ch; }
.a-hero__cta { grid-row: 5; margin-top: 30px; }
.js .a-hero__title .line > span { transform: translate3d(0, 108%, 0); }
.intro .a-hero__title .line > span { transform: none; transition: transform 1.15s var(--ease-out) .25s; }

/* ------------------------------------------------ opened: who it is for */
.a-open { position: relative; min-height: 150vh; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 0 var(--pad) 16vh; }
.a-open__copy { position: relative; max-width: 44rem; }
.a-open__copy::before { content: ''; position: absolute; inset: -30% -24%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 8, 10, .85), rgba(8, 8, 10, .55) 55%, rgba(8, 8, 10, 0)); }
.a-open__title { font-size: clamp(34px, 3.8vw, 64px); line-height: .98; letter-spacing: -0.016em; margin: 0 auto; max-width: 16ch; }
.a-open__body { margin: 22px auto 0; font-size: clamp(15px, 1.08vw, 17px); line-height: 1.66; color: var(--bone-dim); max-width: 46ch; }
.a-open__small { margin: 14px auto 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------- the poster */
.a-look { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 4vh) var(--pad) 8vh; }
.a-look__over { margin: 0 0 3vh; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dim); text-align: center; }
.a-words { margin: 0; display: grid; gap: clamp(8px, 1.6vh, 22px); }
.a-word { display: grid; grid-template-columns: auto minmax(0, 20rem); align-items: end; gap: 0 clamp(20px, 3vw, 56px); }
.a-word:nth-child(2) { justify-content: end; grid-template-columns: minmax(0, 20rem) auto; }
.a-word:nth-child(2) dt { order: 2; }
.a-word:nth-child(3) { padding-left: 8vw; }
.a-word dt { font-size: clamp(68px, 14.6vw, 270px); line-height: .8; letter-spacing: -0.04em; padding-bottom: .06em; }
.a-word dd { margin: 0 0 .9em; font-size: clamp(14px, 1vw, 16px); line-height: 1.55; color: var(--bone-dim); max-width: 30ch; }
.a-word:nth-child(2) dd { text-align: right; justify-self: end; }
/* each word is uncovered from below, like a proof pulled off the press */
.js .a-word[data-reveal] { opacity: 1; transform: none; }
.js .a-word[data-reveal] dt { clip-path: inset(0 0 100% 0); transform: translate3d(0, 12%, 0); }
.js .a-word[data-reveal] dd { opacity: 0; }
.js .a-word[data-reveal].is-in dt { clip-path: inset(-10% 0 -10% 0); transform: none;
  transition: clip-path 1.1s var(--ease-out) var(--d, 0ms), transform 1.1s var(--ease-out) var(--d, 0ms); }
.js .a-word[data-reveal].is-in dd { opacity: 1; transition: opacity .6s linear calc(var(--d, 0ms) + 350ms); }

/* ---------------------------------------------------------- the terms */
.a-terms { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 4vh) var(--pad) 10vh; max-width: 1180px; }
.a-terms__title { font-size: clamp(36px, 3.8vw, 66px); line-height: .98; letter-spacing: -0.016em; max-width: 13ch; }
.a-terms__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: 44px; max-width: 58rem; }
.a-terms__head { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--bone); }
.a-list { list-style: none; margin: 0; padding: 0; counter-reset: term; }
.a-list li { position: relative; padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.6; color: var(--bone-dim); counter-increment: term; }
.a-list li::before { content: counter(term, decimal-leading-zero); position: absolute; left: 0; top: 19px; font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.a-list--get li::before { content: ''; top: 23px; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.7 3.1 10.3 12 12-8.9 1.7-11.4 5.3-12 12-.6-6.7-3.1-10.3-12-12 8.9-1.7 11.4-5.3 12-12z' fill='%23ece6d8'/%3E%3C/svg%3E") no-repeat center / contain; }
.a-list b { font-weight: 600; color: var(--bone); }
.a-terms__note { margin: 30px 0 0; padding: 14px 18px; max-width: 46rem; border: 1px dashed var(--line); font-size: 13.5px; line-height: 1.6; color: var(--bone); }

/* ------------------------------------------------------- the reply card */
.a-rsvp { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 4vh) var(--pad) 12vh; }
.a-card {
  --ink2: #16140f; --ink2-soft: rgba(22, 20, 15, .64); --ink2-line: rgba(22, 20, 15, .3);
  position: relative; width: min(640px, 100%); padding: 0 clamp(22px, 4vw, 56px) clamp(34px, 4vw, 52px);
  background: #ece6d8 linear-gradient(170deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .05)); color: var(--ink2);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 12px 30px -18px rgba(0, 0, 0, .7);
  transform: rotate(-0.7deg); caret-color: var(--ink2);
}
.a-card ::selection { background: var(--ink2); color: #ece6d8; }
.a-card__stub {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 calc(-1 * clamp(22px, 4vw, 56px)) 34px; padding: 15px clamp(22px, 4vw, 56px);
  border-bottom: 1.5px dashed var(--ink2-line); font-size: 9.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--ink2-soft);
}
.a-card__stub span:first-child { color: var(--ink2); }
.a-card__title { font-size: clamp(34px, 3.6vw, 56px); line-height: .98; letter-spacing: -0.016em; color: var(--ink2); }
.a-card__lead { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink2-soft); max-width: 40ch; }
.a-form { display: grid; gap: 4px; margin-top: 22px; }
.a-line { display: grid; gap: 4px; padding-top: 18px; min-width: 0; }
.a-line__label { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); }
.a-line__label small { font-size: inherit; font-weight: 500; letter-spacing: .1em; text-transform: none; color: var(--ink2-soft); }
.a-line__input {
  width: 100%; min-height: 46px; margin: 0; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink2-line); border-radius: 0;
  background: transparent; color: var(--ink2); font: 400 clamp(17px, 1.3vw, 20px)/1.35 var(--serif);
  transition: border-color .16s ease; -webkit-appearance: none; appearance: none;
}
.a-line__input--area { min-height: 90px; resize: vertical; line-height: 1.5; }
.a-line__input::placeholder { color: rgba(22, 20, 15, .38); opacity: 1; }
.a-line__input:focus { outline: none; border-bottom-color: var(--ink2); }
.a-line__input:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--ink2); }
.a-line__hint { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink2-soft); }
.a-line.is-bad .a-line__input { border-bottom: 1.5px solid var(--ink2); background: rgba(22, 20, 15, .04); }
.a-card .field__error { color: var(--ink2); }
.a-card .field__error::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.2' fill='none' stroke='%2316140f' stroke-width='1.1'/%3E%3Cpath d='M8 4.2v5' stroke='%2316140f' stroke-width='1.3'/%3E%3Ccircle cx='8' cy='11.6' r='.9' fill='%2316140f'/%3E%3C/svg%3E") no-repeat center / contain;
}
.a-card .form__alert { border-color: var(--ink2); background: rgba(22, 20, 15, .06); color: var(--ink2); }
.a-card .form__status { color: var(--ink2-soft); }
.a-form__foot { display: grid; gap: 12px; margin-top: 30px; }
.a-form__note { margin: 0; font-size: 12.5px; color: var(--ink2-soft); }
.a-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 56px; padding: 0 22px;
  border: 1px solid var(--ink2); background: var(--ink2); color: #ece6d8; cursor: pointer;
  font: 600 10px/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background-color .16s ease, transform .12s var(--ease-out);
}
.a-send svg { width: 16px; height: 10px; }
.a-send:active { transform: scale(.98); }
.a-send:focus-visible { outline: 1.5px solid var(--ink2); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .a-send:hover { background: #000; } }
.a-send--link { width: auto; margin-top: 28px; }
.a-form.is-busy .cta__spin { display: block; }
.a-form.is-busy .a-send svg { display: none; }
.a-form.is-busy .a-send { cursor: progress; }
.a-card .done__mark { border-color: var(--ink2); color: var(--ink2); }
.a-done { padding-top: 6px; }
.a-done__title { font-size: clamp(34px, 3.6vw, 56px); line-height: .98; color: var(--ink2); }
.a-done__body { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink2-soft); max-width: 40ch; }
.is-done > .a-card > .a-card__title, .is-done > .a-card > .a-card__lead { display: none; }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .a-hero__title .line > span { transform: none; opacity: 0; }
  .intro .a-hero__title .line > span { opacity: 1; transition: opacity .5s linear .1s; }
  .js .a-word[data-reveal] dt { clip-path: none; transform: none; opacity: 0; }
  .js .a-word[data-reveal].is-in dt { opacity: 1; transition: opacity .5s linear; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .a-hero { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .a-hero__title { font-size: clamp(44px, 12.4vw, 60px); }
  .a-hero__cta { width: 100%; justify-content: space-between; }
  .a-open { min-height: 130vh; padding-bottom: 10vh; }
  .a-word, .a-word:nth-child(2) { grid-template-columns: 1fr; justify-content: start; }
  .a-word:nth-child(2) dt { order: 0; }
  .a-word:nth-child(2) dd { text-align: left; justify-self: start; }
  .a-word:nth-child(3) { padding-left: 0; }
  .a-word dt { font-size: clamp(58px, 17vw, 86px); }
  .a-word dd { margin: 10px 0 16px; }
  .a-terms__cols { grid-template-columns: 1fr; gap: 30px; }
  .a-card { transform: none; }
  .a-card__stub { flex-wrap: wrap; font-size: 8.5px; }
}