/* NYVREE pre-launch. The first screen is a poster: one photograph with the
   type layered on it in a single colour (a script line, a heavy caps line, a
   spaced subline, outlined pills, a pill field and button). Then an index of
   the three pieces, one composed section per piece and a closing line. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* The italic carries the poster's script line. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Measured against the archive: the old cream (L 0.889) was brighter than
     the brightest ivory satin in the photographs (L 0.868). This ground is
     cooler and darker than the satin, so the garment is the brightest thing
     on the page. Contrast on it: ink 14.07, muted 5.70, oxblood 10.77. */
  --ground: #e4e4e0;
  --ink: #1b1613;
  --ink-soft: #3a322c;
  --muted: #5b564f;
  --rule: #6f6a62;       /* 4.21:1, above the 3:1 a field boundary needs */
  --hairline: rgb(27 22 19 / 0.16);
  --ox: #5a1212;
  /* The poster's one colour for type, pills and rules: a saturated plum in
     the dress's own hue. On the photograph's sky (about #c1d9e9) it reads at
     8.6:1, on the promenade grey (#969696) at 4.0:1. */
  --accent: #4a1259;
  --paper: #f8f5eb;
  --error: #8f1d22;
  --frame: #cfcdc8;

  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;

  --gutter: 20px;
  --gap: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 16px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ox); }
:focus-visible { outline: 2px solid var(--ox); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 20;
  padding: 12px 16px; background: var(--ink); color: var(--ground); text-decoration: none;
}
.skip-link:focus { top: 16px; color: var(--ground); }

/* ── Masthead: three columns across the top of the poster ──────── */
.mast {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  min-height: 60px; padding: 14px var(--gutter) 0;
}
.mast__logo { line-height: 0; }
.wordmark__mark {
  display: block; inline-size: 104px; aspect-ratio: 715 / 200; background: var(--accent);
  -webkit-mask: url("/img/lockup-bone.png") no-repeat center / contain; mask: url("/img/lockup-bone.png") no-repeat center / contain;
}
.mast__side { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; mix-blend-mode: multiply; }
.mast__side--end { text-align: right; }
@media (min-width: 900px) {
  .mast { min-height: 72px; padding-top: 20px; }
  .wordmark__mark { inline-size: 132px; }
  .mast__side { font-size: 0.6875rem; }
}

/* ── The poster ───────────────────────────────────── */
/* The photograph fills the first screen on a phone (its sides are cropped,
   the dress stays whole in the middle). The type sits in the pale upper part,
   the pills under it, and the sign-up card at the foot over the pavement. */
.poster {
  position: relative; isolation: isolate; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto auto; row-gap: 14px;
  padding: 84px var(--gutter) 16px;
}
.poster__photo { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--frame); }
.poster__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.poster__type { position: relative; text-align: center; color: var(--accent); }
/* The script line prints onto the photograph (multiply). Its descenders clear
   the caps by about a fifth of the cap height: close, never touching. */
.poster__script {
  position: relative; z-index: 2; mix-blend-mode: multiply;
  font: italic 400 clamp(2.4rem, 11vw, 5.25rem)/1 var(--serif); letter-spacing: -0.01em; text-wrap: balance;
  text-shadow: 0 0 28px rgb(248 245 235 / 0.75);
}
/* The caps: "Join" solid, "the list" hollow so the photograph shows through
   the letters, and one soft cast shadow under both for depth. */
.poster__shout {
  position: relative; z-index: 1; margin-top: 0.1em;
  font: 800 clamp(2.1rem, 10.4vw, 5.5rem)/0.95 var(--sans); letter-spacing: -0.02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px var(--accent);
  text-shadow: 0 0.16em 0.4em rgb(74 18 89 / 0.34);
}
.poster__solid { color: var(--accent); -webkit-text-stroke: 0; }
.poster__sub { margin: 20px auto 0; max-width: none; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.6; mix-blend-mode: multiply; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Frosted glass pills. */
.tag {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--accent); border: 1px solid rgb(74 18 89 / 0.9); border-radius: 999px;
  background: rgb(248 245 235 / 0.42); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 6px 18px rgb(27 22 19 / 0.12);
}
.tag:hover { background: var(--accent); color: var(--paper); }

/* The sign-up sits on a translucent paper card so the consent line stays
   legible whatever the photograph does behind it. */
.poster__card {
  inline-size: 100%; max-inline-size: 26rem; margin-inline: auto;
  padding: 14px 16px 12px; border-radius: 22px;
  background: rgb(248 245 235 / 0.7); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / 0.55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 18px 40px rgb(27 22 19 / 0.18);
}
.poster__card .signup { margin-top: 0; }
.poster__card .signup__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.poster__card .signup__input {
  min-height: 46px; padding: 0 18px; border: 1px solid var(--accent); border-radius: 999px; color: var(--ink);
  background: rgb(255 255 255 / 0.45);
}
.poster__card .btn { box-shadow: 0 8px 20px rgb(74 18 89 / 0.28); }
.poster__card .signup__input:focus-visible { border: 2px solid var(--accent); }
.poster__card .signup__input:-webkit-autofill,
.poster__card .signup__input:-webkit-autofill:hover,
.poster__card .signup__input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #f2efe6 inset; }
.poster__card .btn { background: var(--accent); }
.poster__card .btn:hover { background: var(--ox); }
.poster__card .check { min-height: 36px; margin-top: 6px; font-size: 0.8125rem; }
.poster__card .consent { margin-top: 4px; font-size: 0.6875rem; line-height: 1.45; max-width: none; color: var(--ink-soft); }
.poster__card .signup__msg:not(:empty) { margin-top: 6px; }
@container (max-width: 330px) {
  .poster__card .signup__row { flex-direction: row; align-items: flex-end; gap: 10px; }
  .poster__card .btn { inline-size: auto; }
}
@container (max-width: 250px) {
  .poster__card .signup__row { flex-direction: column; align-items: stretch; }
  .poster__card .btn { inline-size: 100%; }
}

/* Wide screens: the photograph stands at full height in the middle, the page
   ground either side, and everything in the poster stays inside its width. */
@media (min-width: 900px) {
  :root { --gutter: 40px; }
  .poster { padding: 104px 0 24px; row-gap: 18px; }
  /* The corner labels sit at the photograph's corners, not the window's. */
  .mast { inset: 0 auto auto 50%; inline-size: calc(100svh * 0.75); transform: translateX(-50%); padding-inline: 24px; }
  .poster__photo { inset: 0 auto 0 50%; inline-size: calc(100svh * 0.75); transform: translateX(-50%); }
  .poster__type, .poster__card { inline-size: calc(100svh * 0.75 - 64px); max-inline-size: 30rem; margin-inline: auto; }
  .poster__type { max-inline-size: none; }
  .poster__script { font-size: clamp(2.5rem, min(5.5vw, 6.4vh), 5.25rem); }
  .poster__shout { font-size: clamp(2.2rem, min(6.8vw, 8vh), 6.5rem); margin-top: 0.08em; -webkit-text-stroke-width: 2.5px; }
  .poster__sub { font-size: 0.75rem; margin-top: 22px; }
  .tags { gap: 10px; }
  .tag { min-height: 36px; font-size: 0.6875rem; }
}

/* Load: the photograph settles, the lines rise one after another. Pure CSS,
   so the page is complete without JavaScript. */
@keyframes settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.poster__photo img { animation: settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.poster__type > *, .tags, .poster__card { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.poster__type > :nth-child(1) { animation-delay: 0.3s; }
.poster__type > :nth-child(2) { animation-delay: 0.42s; }
.poster__type > :nth-child(3) { animation-delay: 0.54s; }
.tags { animation-delay: 0.66s; }
.poster__card { animation-delay: 0.8s; }

/* ── The index ────────────────────────────────────── */
.index { margin: 56px var(--gutter) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.index ol { display: flex; flex-wrap: wrap; gap: 0 32px; }
.index a { display: inline-flex; align-items: baseline; gap: 10px; padding-block: 16px; font-size: 0.875rem; text-decoration: none; color: var(--ink-soft); }
.index a:hover { color: var(--ox); }
.index__n { font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--accent); }
@media (min-width: 900px) { .index { margin-top: 64px; } .index ol { gap: 0 56px; } }

/* ── The pieces ───────────────────────────────────── */
.piece { padding: 96px var(--gutter) 0; scroll-margin-top: 24px; }
.piece__photo { aspect-ratio: 3 / 4; background: var(--frame); }
.piece__photo img, .piece__detail img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.piece__side { margin-top: 24px; }
.piece__detail { inline-size: 50%; aspect-ratio: 3 / 4; background: var(--frame); margin-bottom: 28px; }
.piece__name { font: 400 2.25rem/1.05 var(--serif); margin-top: 10px; }
.piece__note { margin-top: 14px; color: var(--ink-soft); max-width: 34ch; }

@media (min-width: 900px) {
  .piece {
    --piece-h: min(84svh, 1000px);
    display: grid; grid-template-columns: calc(var(--piece-h) * 0.75) minmax(0, 1fr);
    column-gap: 64px; align-items: end; padding-top: 140px;
  }
  .piece--flip { grid-template-columns: minmax(0, 1fr) calc(var(--piece-h) * 0.75); }
  .piece--flip .piece__photo { order: 2; }
  .piece--flip .piece__side { justify-self: end; text-align: right; }
  .piece--flip .piece__note { margin-inline-start: auto; }
  .piece--flip .piece__detail { margin-inline-start: auto; }
  .piece__photo { block-size: var(--piece-h); inline-size: calc(var(--piece-h) * 0.75); }
  .piece__side { margin-top: 0; max-width: 32rem; padding-bottom: 6px; }
  .piece__detail { block-size: calc(var(--piece-h) * 0.42); inline-size: calc(var(--piece-h) * 0.315); margin-bottom: 40px; }
  .piece__name { font-size: 2.75rem; }
}

/* Scroll: a piece rises into place once it enters the viewport. Only when
   JavaScript is running, so nothing is ever hidden without it. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── The close ────────────────────────────────────── */
.close { padding: 140px var(--gutter) 96px; }
.close__line { font: 400 2.5rem/1.05 var(--serif); letter-spacing: -0.01em; max-width: 12ch; text-wrap: balance; }
.close .signup { margin-top: 28px; max-width: 30rem; }
@media (min-width: 900px) {
  .close { padding: 200px var(--gutter) 140px; }
  .close__line { font-size: clamp(3rem, 5vw, 4.75rem); }
}

/* ── Sign-up ──────────────────────────────────────── */
.signup { margin-top: 16px; container-type: inline-size; }
.signup__label { display: block; margin-bottom: 2px; font-size: 0.8125rem; color: var(--ink-soft); }
.signup__row { display: flex; align-items: flex-end; gap: 12px; }
.signup__input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0;
  font: 400 1.0625rem/1.2 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  appearance: none;
  transition: border-color 0.12s;
}
.signup__input::placeholder { color: var(--muted); opacity: 1; }
.signup__input:hover { border-bottom-color: var(--ink); }
/* A thicker oxblood rule is the focus indicator; an outline box around a
   borderless field would read as a different control. */
.signup__input:focus-visible { outline: none; border-bottom: 2px solid var(--ox); }
.signup__input[aria-invalid="true"] { border-bottom: 2px solid var(--error); }
/* Chrome paints autofilled fields a pale blue that the transparent field
   would expose; repaint them the ground colour. */
.signup__input:-webkit-autofill,
.signup__input:-webkit-autofill:hover,
.signup__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px var(--ground) inset;
}

.btn {
  flex: none; min-height: 44px; padding: 0 22px;
  font: 500 0.75rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ground);
  background: var(--ink); border: 0; border-radius: 999px;
  cursor: pointer;
}
.btn:hover { background: var(--ox); }
.btn[aria-disabled="true"] { background: var(--ink-soft); cursor: progress; }
/* The first column can be under 300px on a short laptop screen; the button
   drops under the field rather than squeezing the address out of sight. */
@container (max-width: 330px) {
  .signup__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn { inline-size: 100%; }
}

.signup__msg { font-size: 0.875rem; line-height: 1.45; color: var(--error); }
.signup__msg:not(:empty) { margin-top: 8px; }
.signup__msg button {
  font: inherit; color: inherit; background: none; border: 0; padding: 4px 0; min-height: 24px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.signup__turnstile:empty { display: none; }
.signup__turnstile { margin-top: 10px; }

.check {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px;
  font-size: 0.875rem; color: var(--ink-soft); cursor: pointer;
}
.check input {
  flex: none; width: 1.125rem; height: 1.125rem; margin: 0;
  appearance: none; background: transparent;
  border: 1px solid var(--rule); border-radius: 0;
  display: grid; place-content: center; cursor: pointer;
}
.check input::before {
  content: ""; width: 0.55rem; height: 0.3rem;
  border: 1.5px solid var(--ground); border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(0.03rem, -0.06rem) scale(0);
}
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::before { transform: rotate(-45deg) translate(0.03rem, -0.06rem) scale(1); }
.check:hover input { border-color: var(--ink); }
.check__opt { color: var(--muted); }

.signup__phone { margin-top: 8px; }
.signup__phone[hidden] { display: none; }
.signup__phone .signup__input { max-width: 18rem; }
.fineprint { margin-top: 8px; font-size: 0.75rem; line-height: 1.5; color: var(--muted); max-width: 44ch; }

.consent { margin-top: 10px; font-size: 0.75rem; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.consent a { display: inline-block; padding-block: 4px; margin-block: -4px; }

/* Honeypot: off-screen rather than display:none, which many bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── After joining: the band swaps its own contents ─ */
.signup__done:focus { outline: none; }
.signup__done h3 { font: 500 1.0625rem/1.35 var(--sans); }
.signup__done p { margin-top: 6px; font-size: 0.9375rem; color: var(--ink-soft); max-width: 40ch; }
.done__email { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.done__next { font-size: 0.875rem; }
.done__next a { display: inline-block; padding-block: 4px; }

.share { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.share__intro { font-size: 0.875rem; color: var(--ink-soft); max-width: 38ch; }
.share__link { display: flex; gap: 12px; margin-top: 8px; align-items: flex-end; }
.share__url {
  flex: 1; min-width: 0; min-height: 44px; padding: 0;
  font: 400 0.875rem/1.2 var(--sans); color: var(--ink-soft);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  appearance: none; text-overflow: ellipsis;
}
.share__url:focus-visible { outline: none; border-bottom: 2px solid var(--ox); }
.share__copy {
  flex: none; min-height: 44px; padding: 0 16px;
  font: 500 0.75rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ground); background: var(--ink);
  border: 0; border-radius: 999px; cursor: pointer;
}
.share__copy:hover { background: var(--ox); }
.share__targets { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 6px; }
.share__targets a { display: inline-block; padding-block: 10px; font-size: 0.875rem; color: var(--ink-soft); }
.ladder__head { margin-top: 16px; font-size: 0.8125rem; color: var(--muted); }
.ladder { margin-top: 4px; }
.ladder__step { display: flex; gap: 12px; padding-block: 8px; border-top: 1px solid var(--hairline); font-size: 0.875rem; }
.ladder__step:last-child { border-bottom: 1px solid var(--hairline); }
.ladder__count { flex: none; inline-size: 7rem; color: var(--ox); }
.ladder__reward { color: var(--ink-soft); }

/* ── Footer ───────────────────────────────────────── */
.footer {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px;
  padding: 40px var(--gutter) 40px; border-top: 1px solid var(--hairline);
}
.logomark__art {
  display: block; block-size: 64px; aspect-ratio: 555 / 781;
  background: url("/img/logo-ink.png") no-repeat left bottom / contain;
}
.footer__meta { display: grid; gap: 6px; }
.footer ul { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 0.875rem; }
.footer a { display: inline-block; padding-block: 8px; }
.footer__legal { font-size: 0.75rem; color: var(--muted); }

/* ── Privacy and 404 pages ────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px; border-bottom: 1px solid var(--hairline);
}
.eyebrow { font-size: 0.875rem; color: var(--muted); }
.doc { max-width: 44rem; margin-inline: auto; padding: 0 var(--gutter) 96px; }
.doc .masthead { margin-bottom: 48px; }
.doc h1 { font: 400 2.25rem/1.1 var(--serif); }
.doc h2 { font: 400 1.5rem/1.2 var(--serif); margin-top: 40px; scroll-margin-top: 24px; }
.doc p, .doc ul, .doc table { margin-top: 14px; color: var(--ink-soft); }
.doc ul { list-style: disc; padding-left: 20px; display: grid; gap: 8px; }
.doc .doc__meta { color: var(--muted); font-size: 0.875rem; }
.doc a { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-top: 1px solid var(--hairline); }
.doc th { font-weight: 500; color: var(--ink); }
.doc .table-wrap { overflow-x: auto; }
.btn-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; margin-top: 8px;
  background: var(--ink); color: var(--ground); text-decoration: none; font-weight: 500;
}
.btn-link:hover { background: var(--ox); color: var(--ground); }
.notfound { min-height: 70svh; display: grid; align-content: center; gap: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .btn, .share__copy, .btn-link { border: 1px solid ButtonText; }
  .signup__input, .share__url { border-bottom-color: CanvasText; }
}