/* twoman.us home and /joined/: the night edition.

   The home page's job is the waitlist, and its subject is the night out, so
   it runs on the app's ink with bone type: the paper-white app screens become
   the brightest things on the page, which is the app's own hierarchy (real
   people first, chrome never competes with member media). Every colour is an
   app token (ink, bone, coral, danger) or a mix of two of them; ink on coral
   measures 5.60:1 and bone on ink 16.92:1 (DESIGN_SYSTEM.md "Color").

   This sheet loads before tokens.css and twoman.css (sync-chrome appends the
   shared head last), so every rule is scoped under body.night and wins on
   specificity, never on order. Subpages keep Editorial Daylight.

   Kept out on purpose: pill buttons (actions use the 14pt input radius), mono
   or numbered labels, italic accent words, glow blobs, glass headers. Coral
   is spent once per screen: the match band, and the success heart. */

html:has(> body.night) { background: var(--color-text-primary); color-scheme: dark; }

.night {
  --n-ground: var(--color-text-primary);
  --n-text: var(--color-on-inverse);
  --n-text-2: color-mix(in srgb, var(--color-on-inverse) 76%, var(--color-text-primary));
  --n-text-3: color-mix(in srgb, var(--color-on-inverse) 64%, var(--color-text-primary));
  --n-raised: color-mix(in srgb, var(--color-on-inverse) 5%, var(--color-text-primary));
  --n-hairline: color-mix(in srgb, var(--color-on-inverse) 13%, var(--color-text-primary));
  --n-edge: color-mix(in srgb, var(--color-on-inverse) 26%, var(--color-text-primary));
  --n-coral: var(--color-accent-emotion);
  --n-danger: color-mix(in srgb, var(--color-semantic-danger) 42%, var(--color-on-inverse));
  background: var(--n-ground);
  color: var(--n-text);
  color-scheme: dark;
}
.night ::selection { background: var(--n-coral); color: var(--n-ground); }
.night a { text-decoration-color: var(--n-edge); }
.night a:hover { text-decoration-color: currentColor; }
.night :focus-visible { outline-color: var(--n-text); }
.night .skip { background: var(--n-text); color: var(--n-ground); }
.night .rule { border-top-color: var(--n-hairline); }
.night .muted { color: var(--n-text-2); }

/* Labels are Epilogue in sentence case: the app's mono proof labels stay in
   the app. */
.night .eyebrow { font: 600 14px/1.4 var(--font-sans); letter-spacing: 0.01em; text-transform: none; color: var(--n-text-2); }

/* ---------- Chrome ---------- */
.night .site-header { border-bottom-color: var(--n-hairline); }
.night .brand { color: var(--n-text); }
.night .brand svg circle { stroke: var(--n-text); }
.night .site-footer .brand svg path { fill: var(--n-text); }
.night .nav a { color: var(--n-text-2); }
.night .nav a:hover { color: var(--n-text); }
.night .nav .btn { background: var(--n-text); color: var(--n-ground); border-radius: var(--radius-input); box-shadow: none; }
.night .site-footer { margin-top: 0; border-top-color: var(--n-hairline); }
.night .footer-brand p, .night .footer-bottom { color: var(--n-text-3); }
.night .footer-col h2 { font: 600 14px/1.4 var(--font-sans); letter-spacing: 0.01em; text-transform: none; color: var(--n-text-3); }
.night .footer-col a { color: var(--n-text); }
.night .footer-bottom { border-top-color: var(--n-hairline); }

/* ---------- Actions: one solid, one quiet, both on the input radius ---------- */
.night .n-btn, .night .n-btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--cta-height); padding: 0 var(--space-xl);
  border-radius: var(--radius-input); border: 1px solid transparent;
  font: 600 17px/1 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: transform var(--motion-tap) var(--motion-ease), background-color var(--motion-tap) var(--motion-ease), border-color var(--motion-tap) var(--motion-ease), opacity var(--motion-tap) var(--motion-ease);
}
.night .n-btn { width: 100%; background: var(--n-text); color: var(--n-ground); }
.night .n-btn:hover { background: var(--color-surface-elevated); }
.night .n-btn-quiet { min-height: 48px; background: transparent; color: var(--n-text); border-color: var(--n-edge); }
.night .n-btn-quiet:hover { border-color: var(--n-text); }
.night .n-btn:active, .night .n-btn-quiet:active { transform: scale(0.97); opacity: 0.9; }
.night .n-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.night .n-btn-inline { width: auto; padding: 0 32px; }

/* ---------- Hero ---------- */
.night .n-hero { padding: clamp(32px, 6vw, 88px) 0 clamp(72px, 10vw, 136px); overflow: clip; }
.night .n-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.night .n-hero h1 { margin: 0 0 var(--space-xl); }
.night .h1-name { display: block; margin-bottom: var(--space-lg); font: 600 15px/1.4 var(--font-sans); letter-spacing: 0.01em; text-transform: none; color: var(--n-text-2); }
.night .n-hero .h1-sub { display: block; font-weight: var(--type-hero-weight); font-size: clamp(56px, 7.4vw, 104px); line-height: 0.9; letter-spacing: -0.04em; }
/* "third-wheel" holds a line of its own at every width, so the h1 is three
   lines in the fallback face and in Fraunces alike and the swap moves nothing. */
.night .n-hero .h1-sub .nowrap { display: block; }
.night .n-lede { margin: 0; max-width: 31em; font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; color: var(--n-text-2); }
.night .n-phones { position: sticky; top: 32px; margin: clamp(8px, 4vw, 48px) 0 0; }
.night .n-phones figcaption { color: var(--n-text-3); }

/* The app's phones, rimmed so the ink frame reads on an ink page. */
.night .phone { box-shadow: 0 0 0 1px var(--n-edge), 0 36px 90px rgb(0 0 0 / 0.5); }

/* ---------- The waitlist card ---------- */
.night .n-form, .night .n-done {
  max-width: 560px; margin-top: var(--space-2xl); padding: clamp(20px, 3vw, 28px);
  background: var(--n-raised); border: 1px solid var(--n-hairline); border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.35);
}
.night #waitlist { scroll-margin-top: 24px; }
.night .n-form-head { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-sm); }
.night .n-form-title { margin: 0; font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--font-serif); letter-spacing: -0.015em; }
.night .n-form-sub { margin: var(--space-xs) 0 0; color: var(--n-text-2); }

/* The seats: the app's AvatarPair with the friend's seat open. It fills the
   moment the twoman's address is a real one, with no script. */
.night .n-seats { --size: 52px; flex: none; }
.night .n-seats > * + * { margin-left: calc(var(--size) * -0.22); }
.night .n-seat { display: grid; place-items: center; font: 600 13px/1 var(--font-sans); background: var(--n-text); color: var(--n-ground); border-color: var(--n-raised); box-shadow: none; transition: background-color var(--motion-snap) var(--motion-ease), color var(--motion-snap) var(--motion-ease), border-color var(--motion-snap) var(--motion-ease); }
.night .n-open { background: var(--n-raised); color: var(--n-text-2); border: 2px dashed var(--n-edge); }
.night .n-form:has(#wl-twoman:valid:not(:placeholder-shown)) .n-open { background: var(--n-text); color: var(--n-ground); border: calc(var(--size) * 0.05) solid var(--n-raised); }

.night .n-field { margin-top: 20px; }
.night .n-field label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: 0 0 var(--space-sm); font: 600 15px/1.3 var(--font-sans); }
.night .n-opt { font-weight: 400; font-size: 13px; color: var(--n-text-3); }
.night .n-field input, .night .n-link {
  width: 100%; min-height: 52px; padding: 0 16px;
  font: 400 17px/1.2 var(--font-sans); color: var(--n-text);
  background: var(--n-ground); border: 1px solid var(--n-edge); border-radius: var(--radius-input);
  transition: border-color var(--motion-tap) var(--motion-ease), box-shadow var(--motion-tap) var(--motion-ease);
}
.night .n-field input::placeholder { color: var(--n-text-3); opacity: 1; }
.night .n-field input:focus, .night .n-link:focus { outline: none; border-color: var(--n-text); box-shadow: 0 0 0 3px var(--n-hairline); }
.night .n-field input:user-invalid { border-color: var(--n-danger); }
.night .n-hint { margin: var(--space-sm) 0 0; font-size: 14px; line-height: 1.45; color: var(--n-text-3); }
.night .n-form .n-btn { margin-top: var(--space-xl); }
.night .n-error { margin: var(--space-md) 0 0; font-weight: 500; color: var(--n-danger); }
.night .n-fine { margin: var(--space-md) 0 0; font-size: 13px; line-height: 1.5; color: var(--n-text-3); }
.night .n-fine:empty { display: none; }
.night .n-honey { display: none; }

/* Success: both seats full, and the page's one coral beat. */
.night .n-done:focus { outline: none; }
.night .n-done-seats { display: flex; align-items: center; margin-bottom: var(--space-lg); }
.night .n-filled { background: var(--n-text); }
.night .n-heart { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; background: var(--n-coral); border: 3px solid var(--n-raised); }
.night .n-heart svg { width: 52%; height: 52%; fill: var(--n-ground); }
.night .n-link-label { display: block; margin: var(--space-lg) 0 var(--space-sm); font: 600 15px/1.3 var(--font-sans); }
.night .n-share { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); }
.night .n-share .n-btn { flex: 1 1 100%; }
.night .n-share .n-btn-quiet { flex: 1 1 auto; }
.night .n-share [hidden] { display: none; }

/* ---------- One line, said plainly ---------- */
.night .n-statement { padding: clamp(72px, 11vw, 148px) 0; border-top: 1px solid var(--n-hairline); }
.night .n-statement p { margin: 0; max-width: 17ch; font: 700 clamp(38px, 6vw, 92px)/1 var(--font-serif); letter-spacing: -0.035em; text-wrap: balance; }
.night .n-statement span { color: var(--n-text-3); }

/* ---------- How a night goes ---------- */
.night .story { border-top: 1px solid var(--n-hairline); }
.night .story h2 { font-size: clamp(36px, 5vw, 64px); font-weight: var(--type-hero-weight); letter-spacing: -0.03em; }
.night .beats li { border-color: var(--n-hairline); }
.night .beats .eyebrow { color: var(--n-text); }
.night .beats p { color: var(--n-text-2); }
.night .edition i { border-color: var(--n-text); }
.night .edition i.seen { background: var(--n-text); }

/* ---------- The match: the coral climax ---------- */
.night .match-band { background: var(--n-coral); color: var(--n-ground); }
.night .match-band .eyebrow, .night .match-band p { color: var(--n-ground); }
.night .match-band :focus-visible { outline-color: var(--n-ground); }
.night .handoff .pair > * { border-color: var(--n-coral); }
.night .handoff .spark { background: var(--n-ground); }
.night .handoff .spark svg { fill: var(--n-coral); }
.night .match-phone .phone { box-shadow: 0 0 0 1px rgb(20 20 18 / 0.2), 0 36px 90px rgb(20 20 18 / 0.42); }

/* ---------- Openers, facts, closing ---------- */
.night .ribbon { border-top: 0; }
.night .ribbon-row.reverse li { color: var(--n-text-3); }
/* Still rows sit on the page grid; drifting rows (twoman.css) start at the gutter. */
.night .ribbon-row { padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) { .night .ribbon-row { padding-inline: var(--gutter); } }
}
.night .split h2 { font-weight: var(--type-hero-weight); letter-spacing: -0.025em; }
.night .facts div { border-color: var(--n-hairline); }
.night .facts dd { color: var(--n-text-2); }
.night .facts code { background: var(--n-raised); color: var(--n-text); }

.night .n-closing { padding: clamp(88px, 13vw, 176px) 0; border-top: 1px solid var(--n-hairline); }
.night .n-closing-grid { display: grid; justify-items: start; gap: var(--space-xl); }
.night .n-closing-pair { --size: 88px; }
.night .n-closing-pair > * { border-color: var(--n-ground); }
.night .n-closing h2 { max-width: 11ch; font-size: clamp(48px, 7.6vw, 116px); font-weight: var(--type-hero-weight); line-height: 0.92; letter-spacing: -0.04em; }
.night .n-closing p { margin: 0; max-width: 30em; font-size: clamp(18px, 1.9vw, 21px); color: var(--n-text-2); }

/* ---------- /joined/ (the no-script landing) ---------- */
.night .n-joined { padding: clamp(48px, 8vw, 112px) 0 clamp(88px, 11vw, 148px); }
.night .n-joined .wrap { max-width: 760px; }
.night .n-joined h1 { margin: 0 0 var(--space-lg); font-size: clamp(48px, 8vw, 104px); font-weight: var(--type-hero-weight); line-height: 0.92; letter-spacing: -0.04em; }
.night .n-joined .n-heart { border-color: var(--n-ground); }
.night .n-joined .n-seats .n-seat { border-color: var(--n-ground); }
.night .n-link-static { margin: var(--space-xl) 0 0; font: 600 20px/1.3 var(--font-sans); }
.night .n-joined .n-share { max-width: 560px; }

/* ---------- Motion ----------
   Entrances move, never fade, so nothing waits to paint; the global
   reduce-motion rule in twoman.css stops all of it. */
@keyframes n-rise { from { translate: 0 22px; } }
/* The match pop, as twoman.css draws it: Motion.bouncy's one overshoot. */
@keyframes n-pop { 0% { scale: 0.6; } 60% { scale: 1.12; } 100% { scale: 1; } }
.night .n-hero-copy > * { animation: n-rise var(--motion-stage) var(--motion-ease) both; }
.night .n-hero-copy > :nth-child(2) { animation-delay: 60ms; }
.night .n-hero-copy > :nth-child(n + 3) { animation-delay: 120ms; }
.night .n-done:not([hidden]) { animation: n-rise var(--motion-reveal) var(--motion-ease) both; }
.night .n-done:not([hidden]) .n-heart, .night .n-joined .n-heart { animation: n-pop var(--motion-celebrate) var(--motion-ease) 120ms both; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .night .story-rail { font: 600 14px/1.4 var(--font-sans); letter-spacing: 0.01em; text-transform: none; color: var(--n-text-3); }
    .night .story-rail::before { background: var(--n-hairline); }
    .night .story-rail::after { background: var(--n-text); }
    @keyframes n-rail-on { 0%, 100% { color: var(--n-text-3); } 10%, 90% { color: var(--n-text); } }
    .night .story-rail li { animation-name: n-rail-on; }
  }
}

@media (max-width: 900px) {
  .night .n-hero-grid { grid-template-columns: 1fr; }
  .night .n-phones { position: static; justify-self: center; width: min(100%, 440px); }
}
@media (max-width: 600px) {
  .night .n-hero .h1-sub { font-size: clamp(48px, 14.4vw, 64px); }
  .night .n-form, .night .n-done { margin-top: var(--space-xl); }
  .night .n-form-head { align-items: flex-start; }
  .night .n-btn-inline { width: 100%; }
  .night .nav .btn { padding: 0 14px; }
}