/*
  Touch home page: "A day, told once" (2026-11-02).
  Rationale: docs/design/public-web-design.md §2. Figma: see that document.

  The page moves through the light of one day. Colour is the time of day: each
  band sets one semantic set (--g ground, --i ink, --b body, --m muted, --l line,
  --a accent), measured AA in every band. The film and the copy set over photographs
  carry fixed colours, since they do not change with a band.

  MOTION: transform and opacity only, behind no-preference. Each beat plays once
  in time on entry (home.js); finished by default. Radius belongs to product
  surfaces only (button, Station card); photographs are square-cornered.
*/

/* ---------- Light of day ---------- */
.band-day {
  --g: #ffffff; --i: #16141c; --b: #47434f; --m: #6b6673; --l: #e6e3e8; --a: #5357b8; --q: #706c78;
}
.band-golden { --g: #ffb8a6; --i: #1b1420; --b: #3a2a30; --m: #5a3f42; --l: #e89c89; --a: #1b1420; }
.band-dusk { --g: #2b2a63; --i: #f7f5fb; --b: #d9d8f0; --m: #afbbf2; --l: #45448a; --a: #ffb8a6; }
.band-night,
.close,
.daylight .site-footer { --g: #0f0e14; --i: #f7f5fb; --b: #c4c1cd; --m: #97939f; --l: #2a2832; --a: #ffb8a6; }
@media (prefers-color-scheme: dark) {
  .band-day { --g: #17151a; --i: #f5f3f7; --b: #cfcbd4; --m: #a8a3ae; --l: #2f2c35; --a: #afbbf2; --q: #b6b1bd; }
}
.band-day, .band-golden, .band-dusk, .band-night, .close { background: var(--g); color: var(--b); overflow-x: clip; }

.daylight { background: #0f0e14; --ease: cubic-bezier(0.16, 1, 0.3, 1); --gut: clamp(20px, 3.4vw, 48px); }
.wrap { padding-inline: var(--gut); max-width: 1920px; margin-inline: auto; }

/* ---------- Type: Boska speaks, General Sans explains ---------- */
.display, .title, .heading, .crossing__statement {
  font-family: var(--f-display); font-weight: 400; color: var(--i); text-wrap: balance;
}
.display em, .title em { font-style: italic; }
.display { font-size: clamp(3.625rem, 19vw, 4.75rem); line-height: 0.98; letter-spacing: -0.022em; margin: 0; }
.title { font-size: clamp(3rem, 14.4vw, 3.625rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0; max-width: 17ch; }
.heading { font-size: clamp(2.375rem, 4.4vw, 4rem); line-height: 1.06; letter-spacing: -0.015em; margin: 0; }
.lede { font-size: clamp(1.3125rem, 2vw, 1.75rem); line-height: 1.36; letter-spacing: -0.01em; color: var(--b); margin: 0; max-width: 34ch; }
.clock { font-size: 0.9375rem; font-weight: 500; color: var(--a); margin: 0 0 clamp(16px, 2vw, 28px); font-variant-numeric: tabular-nums; }
@media (min-width: 620px) {
  .display { font-size: clamp(5.5rem, 11.4vw, 12.75rem); line-height: 0.96; letter-spacing: -0.025em; }
  .title { font-size: clamp(4.25rem, 8vw, 9rem); line-height: 1; max-width: 16ch; }
}

/* ---------- Call to action: inverts with the band, one intent ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--r-md, 14px);
  background: var(--i, #f7f5fb); color: var(--g, #16141c); font-weight: 500; font-size: 1rem; text-decoration: none; max-width: 100%; padding-block: 12px; text-align: center;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease);
}
.cta svg { width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.cta--quiet { background: transparent; color: var(--i); box-shadow: inset 0 0 0 1.25px var(--i); }
.cta:focus-visible { outline: 3px solid var(--a, #ffb8a6); outline-offset: 3px; }
.cta:active { transform: scale(0.98); }
.cta:hover { color: var(--g, #16141c); }
.cta--quiet:hover { color: var(--i); }
.film .cta:hover, .close .cta:hover { color: #16141c; }
@media (hover: hover) and (pointer: fine) { .cta:hover { opacity: 0.88; } .cta:hover svg { transform: translateX(3px); } }

/* ---------- Header over the film: not sticky here, the film is the first thing ---------- */
.daylight .site-header { position: absolute; inset: 0 0 auto; background: transparent; border: 0; box-shadow: none; animation: none; z-index: 3; backdrop-filter: none; -webkit-backdrop-filter: none; }
.daylight .site-header::after { display: none; }
.daylight .shell { max-width: 1920px; padding-inline: var(--gut); }
.daylight .site-nav a { color: #f7f5fb; }
.daylight .site-header a:focus-visible { outline: 3px solid #ffb8a6; outline-offset: 3px; }
@media (max-width: 359px) { .daylight .site-header .lockup { margin-right: -34px; } .daylight .site-nav { gap: 10px; } .daylight .site-nav a { font-size: 0.9375rem; } }

/* ---------- Footer: the page ends at night, so the chrome does too ---------- */
.daylight .site-footer { background: var(--g); color: var(--b); border-top: 0; }
.daylight .site-footer h2, .daylight .site-footer__credit, .daylight .site-footer__base { color: var(--m); }
.daylight .site-footer a { color: var(--i); }
.daylight .site-footer p { color: var(--b); }
.daylight .site-footer__credit, .daylight .site-footer__base { color: var(--m); }

/* ---------- The film ---------- */
.film { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: clip; background: #17140f; color: #f7f5fb; }
.film__media, .film__media > *, .film__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__poster, .film__video { object-fit: cover; object-position: 50% 62%; }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms linear; }
/* Portrait: lift the couple clear of the headline. Found on the S22, whose browser leaves 649 px of height. */
@media (max-aspect-ratio: 4/5) { .film__poster, .film__video { transform: scale(1.2); transform-origin: 50% 100%; } }
.film__video.is-live { opacity: 1; }
.film__scrim {
  background:
    linear-gradient(to top, rgb(12 11 16 / 0.86) 0%, rgb(12 11 16 / 0.62) 32%, rgb(12 11 16 / 0) 68%),
    linear-gradient(to bottom, rgb(12 11 16 / 0.72) 0%, rgb(12 11 16 / 0) 20%);
}
@media (min-width: 620px) and (min-aspect-ratio: 4/5) {
  .film__scrim {
    background:
      linear-gradient(to right, rgb(12 11 16 / 0.66) 0%, rgb(12 11 16 / 0.52) 40%, rgb(12 11 16 / 0) 62%),
      linear-gradient(to top, rgb(12 11 16 / 0.8) 0%, rgb(12 11 16 / 0.56) 40%, rgb(12 11 16 / 0.28) 62%, rgb(12 11 16 / 0) 80%),
      linear-gradient(to bottom, rgb(12 11 16 / 0.72) 0%, rgb(12 11 16 / 0) 20%);
  }
}
.film__copy { position: relative; z-index: 1; padding: 96px var(--gut) clamp(28px, 4.2vw, 56px); width: 100%; max-width: 1920px; margin-inline: auto; }
.film__title { color: #f7f5fb; font-size: min(19vw, 4.75rem); } /* vw-capped: the lines cannot wrap, so a larger browser text size must not clip them */
.film__line { display: block; overflow: clip; padding: 0 0.12em 0.2em 0.08em; margin: 0 -0.12em -0.2em -0.08em; }
.film__line > span { display: block; white-space: nowrap; } /* a wider fallback must not wrap and shift the hero when Boska lands */
.film__lede { font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.36; letter-spacing: -0.01em; margin: clamp(14px, 1.8vw, 24px) 0 clamp(20px, 2.2vw, 30px); max-width: 33ch; color: #f7f5fb; }
.film__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.film .cta { background: #f7f5fb; color: #16141c; }
.film__state { font-size: 1rem; color: #f7f5fb; }
.film__toggle {
  position: absolute; z-index: 2; right: var(--gut); bottom: clamp(28px, 4.2vw, 56px); width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #f7f5fb; background: rgb(12 11 16 / 0.56);
}
.film__toggle[hidden] { display: none; }
.film__toggle svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.film__toggle .i-play { display: none; }
.film__toggle:not([data-state='playing']) .i-play { display: block; }
.film__toggle:not([data-state='playing']) .i-pause { display: none; }
.film__toggle:focus-visible { outline: 3px solid #ffb8a6; outline-offset: 3px; }
@media (max-width: 619px) { .film__toggle { bottom: auto; top: 76px; } }
/* In em, so only a larger browser text size reaches it (304 px at the default): the nav wraps
   rather than leaves the screen, and the film's toggle clears the second row. */
@media (max-width: 19em) { .daylight .site-nav { flex-wrap: wrap; justify-content: flex-end; } .film__toggle { top: 7.5rem; } }

@media (min-width: 620px) { .film__title { font-size: min(14.2vw, clamp(5.5rem, 11.4vw, 12.75rem)); } }
/* Landscape phones: the film grows past the viewport rather than type meeting the header. */
@media (max-height: 520px) { .film__title { font-size: min(14.2vw, clamp(3.25rem, 15vh, 4.5rem)); } .film__lede { max-width: 48ch; } }

/* ---------- The diptych: one photograph, two lives ---------- */
.diptych { position: relative; overflow: clip; aspect-ratio: 5 / 4; --gap: clamp(22px, 4.6vw, 88px); }
.diptych__half { position: absolute; inset: 0; transition: transform 1700ms cubic-bezier(0.62, 0, 0.18, 1) 180ms; }
.diptych__half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diptych__half--a { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.diptych__half--b { clip-path: inset(0 0 0 var(--split)); }
.diptych.is-apart .diptych__half--a { transform: translateX(calc(var(--gap) * -1)); }
.diptych.is-apart .diptych__half--b { transform: translateX(var(--gap)); }

/* ---------- 8:10 AM ---------- */
.idea { padding-block: clamp(72px, 10vw, 150px) 0; }
.idea__title { max-width: 15ch; margin-bottom: clamp(32px, 6vw, 88px); }
.idea__grid .diptych { margin-inline: calc(var(--gut) * -1); }
.idea__lede { margin-top: 28px; }
@media (min-width: 1000px) {
  .idea__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
  .idea__grid .diptych { grid-column: 1 / span 8; margin-inline: calc(var(--gut) * -1) 0; aspect-ratio: 3 / 2.3; }
  .idea__lede { grid-column: 10 / -1; margin: 0; }
}

/* ---------- 12:30 PM ---------- */
.journey { padding-block: clamp(80px, 11vw, 170px); }
.journey__lede { margin-top: clamp(20px, 2.4vw, 32px); max-width: 44ch; }
.lines { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; }
.line { display: grid; gap: 2px; padding-block: 16px; border-top: 1px solid var(--l); }
.line:last-child { border-bottom: 1px solid var(--l); }
.line__time { font-size: 0.9375rem; font-weight: 500; color: var(--m); font-variant-numeric: tabular-nums; }
.line__place { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 9vw, 2.375rem); line-height: 1.1; -webkit-font-smoothing: auto; letter-spacing: -0.012em; color: var(--q); }
.line--station .line__time { color: var(--a); }
.line--station .line__place { color: var(--i); }
.line__card { margin-top: 14px; color: #16141c; max-width: 420px; }
@media (min-width: 900px) {
  .line { grid-template-columns: minmax(150px, 16%) 1fr auto; align-items: center; column-gap: 16px; padding-block: 20px; }
  .line__place { font-size: clamp(2.75rem, 5.6vw, 5.75rem); line-height: 1.04; }
  .line__card { margin: 0; width: 380px; }
}
.notes { display: grid; gap: 32px; margin-top: clamp(36px, 4.4vw, 64px); }
.notes h3 { font-family: var(--f-body); font-weight: 500; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); letter-spacing: -0.005em; line-height: 1.3; color: var(--i); margin: 0 0 8px; }
.notes p { margin: 0; color: var(--b); max-width: 46ch; }
@media (min-width: 900px) { .notes { grid-template-columns: minmax(150px, 16%) 4fr 5fr; column-gap: 16px; } .notes > :first-child { grid-column: 2; } }

.lines.is-armed .line { opacity: 0; transform: translateY(14px); }
.lines.is-playing .line { animation: line-in 700ms var(--ease) both; animation-delay: calc(var(--n) * 130ms); }
@keyframes line-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lines.is-playing .line--station .line__card { animation: card-in 800ms var(--ease) both; animation-delay: 700ms; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- 5:40 PM ---------- */
.crossing { padding-block: clamp(72px, 10vw, 150px); }
.crossing .display { margin-bottom: clamp(32px, 5vw, 72px); }
.crossing .diptych { aspect-ratio: 4 / 5; }
.crossing .diptych img { object-position: 42% 50%; }
.crossing__rule { display: grid; gap: 24px; margin-top: clamp(36px, 5vw, 72px); }
.crossing__statement { font-size: clamp(2.375rem, 4.4vw, 4rem); line-height: 1.06; letter-spacing: -0.015em; margin: 0; }
@media (min-width: 900px) {
  .crossing .diptych { aspect-ratio: 16 / 10; }
  .crossing .diptych img { object-position: 50% 50%; }
  .crossing__rule { grid-template-columns: 7fr 5fr; column-gap: 64px; align-items: end; }
}

/* ---------- 7:15 PM ---------- */
.after { padding-block: clamp(72px, 10vw, 150px) clamp(56px, 7vw, 110px); }
.after .title { margin-bottom: clamp(32px, 5vw, 72px); }
.after figure { margin: 0; }
.after img { display: block; width: 100%; height: 100%; object-fit: cover; }
.after__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.after__b { grid-column: 1 / -1; order: 1; margin-inline: calc(var(--gut) * -1) !important; }
.after__a { grid-column: 5 / -1; order: 2; }
.after__d { grid-column: 1 / 11; order: 3; }
.after__c { display: none; }
.after__note { margin: 24px 0 0; font-size: 0.875rem; color: var(--m); }
@media (min-width: 900px) {
  .after__grid { row-gap: 40px; }
  .after__a { grid-column: 1 / span 5; order: 0; margin-top: 56px; }
  .after__b { grid-column: 7 / -1; order: 0; margin-inline: 0 calc(var(--gut) * -1) !important; }
  .after__c { display: block; grid-column: 1 / span 6; order: 0; margin-top: -8%; }
  .after__d { grid-column: 8 / -1; order: 0; }
}

/* ---------- 9:00 PM ---------- */
.privacy { padding-block: clamp(80px, 11vw, 170px) clamp(72px, 9vw, 130px); }
.privacy__lede { margin-top: clamp(20px, 2.4vw, 32px); max-width: 44ch; }
.privacy .promises { display: grid; grid-template-columns: 1fr; gap: 28px; margin: clamp(40px, 5vw, 80px) 0 0; }
.privacy .promises > div { border-top: 1px solid var(--l); padding-top: 18px; margin: 0; }
.privacy .promises dt { font-family: var(--f-body); font-weight: 500; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); letter-spacing: -0.005em; line-height: 1.3; color: var(--i); margin: 0 0 8px; }
.privacy .promises dd { margin: 0; color: var(--b); max-width: 48ch; }
.privacy__after { display: grid; gap: 24px; justify-items: start; margin-top: clamp(36px, 4.4vw, 64px); }
.privacy__after p { margin: 0; max-width: 56ch; color: var(--b); }
.out { margin-top: clamp(72px, 9vw, 140px); }
.privacy .refusals { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; font-family: var(--f-display); font-size: clamp(1.625rem, 3vw, 3rem); line-height: 1.2; letter-spacing: -0.008em; font-weight: 500; color: var(--b); }
.privacy .refusals li { margin: 0 0 0.45em; padding: 0; border: 0; max-width: 34ch; }
.privacy .refusals em { font-style: italic; color: var(--i); }
@media (min-width: 900px) {
  .privacy .promises { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 48px; }
  .privacy__after { grid-template-columns: minmax(0, 56ch) auto; justify-content: space-between; align-items: center; }
}

/* ---------- Tomorrow ---------- */
.close { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; }
@media (min-width: 900px) { .close { min-height: max(100svh, 92vw); } }
.close__media, .close__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.close__media { z-index: 0; } /* its own layer, so its scrims stay under the copy */
.close__media img { object-fit: cover; object-position: 80% 100%; }
.close__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--g) 0%, rgb(15 14 20 / 0.5) 22%, rgb(15 14 20 / 0) 56%, rgb(15 14 20 / 0) 88%, var(--g) 100%); }
/* The foot is in rem: larger browser text makes the copy taller, and it must stay above the fire. */
.close__copy { position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 110px) clamp(24.375rem, 34vw, 26.25rem); }
@media (max-width: 359px) { .close__copy { padding-bottom: 32rem; } }
@media (min-width: 500px) {
  /* Large phones, tablets and small laptops: keep the copy in the sky, above the fire. */
  .close__copy { padding-bottom: clamp(26.25rem, 56vw, 45rem); }
  .close__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgb(15 14 20 / 0.62) 0%, rgb(15 14 20 / 0.48) 42%, rgb(15 14 20 / 0) 68%); }
}
.close__copy .clock, .close__copy .display { position: relative; }
.close__copy .lede { margin-top: clamp(18px, 2vw, 28px); color: #f7f5fb; }
.close__state { margin: 16px 0 10px; max-width: 46ch; color: #f7f5fb; }
.close .cta { background: #f7f5fb; color: #16141c; }
.close__note { margin: 0 0 24px; font-size: 0.875rem; color: #f7f5fb; max-width: 46ch; }

/* ---------- Motion ---------- */
.is-armed[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal] { transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.film__line > span { animation: rise 1000ms var(--ease) both; }
.film__line:nth-child(2) > span { animation-delay: 90ms; }
.film__lede, .film__act { animation: fade 700ms ease-out 200ms both; }
@keyframes rise { from { transform: translateY(125%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .film__line > span, .film__lede, .film__act, .lines .line, .line__card { animation: none !important; }
  [data-reveal], .diptych__half, .film__video, .cta, .cta svg { transition: none !important; }
  .cta:active, .cta:hover svg { transform: none; }
}

/* ---------- Print: the words on white, finished ---------- */
@media print {
  .daylight, .band-day, .band-golden, .band-dusk, .band-night, .close, .film, .daylight .site-footer {
    --g: #ffffff; --i: #000000; --b: #1a1a1a; --m: #444444; --l: #cccccc; --a: #000000; --q: #444444;
    background: #ffffff; color: #1a1a1a;
  }
  .is-armed, [data-reveal] { opacity: 1 !important; transform: none !important; }
  .lines.is-armed .line { opacity: 1 !important; transform: none !important; }
  .diptych.is-apart .diptych__half { transform: none !important; }
  .film__line > span, .film__lede, .film__act { animation: none !important; }
  .film { min-height: 0; }
  .film__media, .film__toggle, .close__media { display: none; }
  .film__title, .film__lede, .film__state, .close__copy .lede, .close__state, .close__note { color: #000000; }
  .close { min-height: 0; }
  .close__copy { padding-block: 24px; }
  .daylight .site-header { position: static; }
  .daylight .site-nav a, .daylight .site-footer a { color: #000000; }
}