/*
  All layout and component styles. Tokens only - no literal colours, sizes or fonts
  here that aren't a var(--token) from styles/tokens.css.
*/

/* --- reset --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

img,
canvas {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
dl,
dd,
ul,
form {
  margin: 0;
}

a {
  color: inherit;
}

ul {
  list-style: none;
  padding: 0;
}

/* --- skip link ------------------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-2);
  z-index: var(--z-skip-link);
  background: var(--bone);
  color: var(--ink);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-label);
  font-size: var(--eyebrow-size);
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-2);
}

/* --- header ---------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom, rgba(var(--ink-rgb), 0.75), rgba(var(--ink-rgb), 0));
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-label);
  text-transform: lowercase;
  letter-spacing: var(--eyebrow-tracking);
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--bone);
}

.brand-mark {
  display: block;
  height: 1.75rem;
  width: auto;
}

/* Phones only (see the max-width: 700px block): the symbol next to the wordmark, and the
   menu button that replaces the header's waitlist pill. Hidden here so desktop is
   untouched even if this rule ever loads before the media query below. */
.brand-symbol {
  display: none;
}

.menu-button {
  display: none;
}

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

/* --- buttons ----------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 0.7em 1.5em;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: var(--border-width) solid var(--bone);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
  background: transparent;
  color: var(--bone);
}

.btn-outline:hover {
  background: rgba(var(--bone-rgb), 0.12);
}

.btn-primary {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

.btn-primary:hover {
  opacity: 0.88;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- film stage -------------------------------------------------------------------- */

.film-track {
  position: relative;
}

.film {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.film-poster,
.film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The <picture> wrapper around .film-poster carries no box of its own - the img inside
   stays absolutely positioned against .film exactly as before. */
.film picture {
  display: contents;
}

.film-poster {
  z-index: var(--z-poster);
}

.film-canvas {
  z-index: var(--z-canvas);
  background: transparent;
}

/* Soft scrims for legibility of left/lower-aligned copy over the film - no boxes or cards. */
.film::before,
.film::after {
  content: '';
  position: absolute;
  z-index: var(--z-scrim);
  pointer-events: none;
}

.film::before {
  inset: 0 40% 0 0;
  background: linear-gradient(
    to right,
    rgba(var(--ink-rgb), 0.65) 0%,
    rgba(var(--ink-rgb), 0.28) 55%,
    rgba(var(--ink-rgb), 0) 100%
  );
}

.film::after {
  inset: 55% 0 0 0;
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.55) 0%, rgba(var(--ink-rgb), 0) 100%);
}

.film-chapters {
  position: absolute;
  inset: 0;
  z-index: var(--z-chapters);
  pointer-events: none;
}

.film-skip {
  position: absolute;
  bottom: var(--space-3);
  right: var(--gutter);
  z-index: var(--z-skip);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--bone);
  background: rgba(var(--ink-rgb), 0.45);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  pointer-events: auto;
}

.film-skip:hover {
  background: rgba(var(--ink-rgb), 0.7);
}

/* Phones only: small scroll-cue under the opening chapter. Hidden on desktop here so it
   stays inert even before the media query below is reached. */
.scroll-cue {
  display: none;
}

/* --- chapters ------------------------------------------------------------------------ */

.chapter {
  position: absolute;
  inset: 0;
  display: flex;
  padding: var(--gutter);
  padding-top: calc(var(--header-height) + var(--space-3));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}

.chapter-inner {
  pointer-events: auto;
  max-width: var(--chapter-max-width);
  transition: transform 160ms ease-out;
}

.chapter {
  transition: opacity 160ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .chapter,
  .chapter-inner {
    transition: none;
  }
}

.chapter[data-align='left'] {
  align-items: center;
  justify-content: flex-start;
}

.chapter[data-align='lower-left'] {
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: var(--space-6);
}

.chapter[data-align='upper-left'] {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: calc(var(--header-height) + var(--space-5));
}

.chapter[data-align='upper-left'] .chapter-inner {
  max-width: 30rem;
}

/* Sits under the subject in the bottom band so it never covers the part being described. */
.chapter[data-align='low-band'] {
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: var(--space-5);
}

.chapter[data-align='low-band'] .chapter-inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 26rem);
  column-gap: var(--space-5);
  align-items: end;
}

.chapter[data-align='low-band'] .eyebrow {
  grid-column: 1 / -1;
}

.chapter[data-align='low-band'] .chapter-heading {
  font-size: var(--subheading-size);
  margin-bottom: 0;
}

.eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  font-size: var(--eyebrow-size);
  color: var(--brass);
  margin-bottom: var(--space-2);
}

.chapter-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--heading-size);
  line-height: var(--leading-tight);
  color: var(--bone);
  margin-bottom: var(--space-2);
}

.chapter-body {
  font-size: var(--body-size);
  line-height: var(--leading-normal);
  color: var(--bone-soft);
  max-width: 32ch;
}

.chapter[data-align='low-band'] .chapter-body {
  max-width: none;
}

.chapter-cta {
  margin-top: var(--space-3);
}

/* --- fallback (prefers-reduced-motion / Save-Data): stacked sections, no pin --------- */

.film-track--fallback {
  height: auto !important;
}

.film--fallback {
  position: relative;
  height: auto;
  display: block;
}

.film--fallback::before,
.film--fallback::after {
  display: none;
}

.film--fallback .film-chapters {
  position: static;
}

.chapter--static {
  position: relative;
  inset: auto;
  min-height: 100vh;
  min-height: 100svh;
  background-size: cover;
  background-position: 62% center;
  background-color: var(--ink-3);
  opacity: 1 !important;
  visibility: visible !important;
}

.chapter--static::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--ink-rgb), 0.75) 0%,
    rgba(var(--ink-rgb), 0.35) 55%,
    rgba(var(--ink-rgb), 0.1) 100%
  );
}

.chapter--static .chapter-inner {
  position: relative;
}

/* --- generic page sections ------------------------------------------------------------ */

.section {
  padding: var(--space-7) 0;
  border-top: var(--border-width) solid var(--line);
}

.section-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--subheading-size);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  max-width: 26ch;
}

/* --- about --------------------------------------------------------------------------- */

.about-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.about-list h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.375rem;
  margin-bottom: var(--space-1);
  color: var(--bone);
}

.about-list p {
  color: var(--bone-dim);
}

/* --- details --------------------------------------------------------------------------- */

.details-list {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  row-gap: var(--space-2);
  column-gap: var(--space-4);
  max-width: 40rem;
}

.details-list dt {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  font-size: var(--eyebrow-size);
  color: var(--brass);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--line);
}

.details-list dd {
  margin: 0;
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--line);
  color: var(--bone);
}

.details-list dt:first-of-type,
.details-list dd:first-of-type {
  border-top: none;
}

/* --- waitlist ----------------------------------------------------------------------------- */

.waitlist-body {
  color: var(--bone-dim);
  max-width: 34rem;
  margin-bottom: var(--space-4);
}

#waitlist-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  max-width: 40rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 14rem;
}

.field label {
  font-family: var(--font-label);
  font-size: var(--eyebrow-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.field input {
  background: var(--ink-2);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--body-size);
  padding: 0.75em 0.9em;
}

.field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#wl-submit {
  flex: 0 0 auto;
}

.demo-note {
  flex-basis: 100%;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  color: var(--brass);
}

.form-status {
  flex-basis: 100%;
  font-size: var(--body-size);
}

.form-status.is-error {
  color: var(--accent);
}

.form-status-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.75rem;
  margin-bottom: var(--space-1);
  color: var(--bone);
}

.form-status-body {
  color: var(--bone-dim);
  max-width: 34rem;
}

/* The hidden attribute must win over component display rules (form fields after success). */
[hidden] {
  display: none !important;
}

/* --- section polish: same material as the film ------------------------------------------------ */

.section h2 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  letter-spacing: -0.015em;
}

.about-list {
  counter-reset: about;
  gap: 0 var(--space-4);
}

.about-list li {
  counter-increment: about;
  border-top: var(--border-width) solid var(--line);
  padding: var(--space-3) 0 var(--space-4);
}

.about-list li::before {
  content: '0' counter(about);
  display: block;
  font-family: var(--font-label);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.about-list h3 {
  font-size: 1.75rem;
  line-height: var(--leading-snug);
}

.about-list p {
  color: var(--bone-soft);
  max-width: 30ch;
}

.details-list {
  max-width: 52rem;
  row-gap: 0;
}

.details-list dd {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.375rem;
}

.details-list dt {
  padding-top: calc(var(--space-2) + 0.45rem);
}

.section-waitlist {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  border-top: var(--border-width) solid var(--line);
  background-color: var(--ink);
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), 0.96) 0%, rgba(var(--ink-rgb), 0.8) 42%, rgba(var(--ink-rgb), 0.22) 100%),
    var(--waitlist-backdrop, none);
  background-size: cover;
  background-position: 70% center;
}

.section-waitlist .section-inner {
  width: 100%;
}

.section-waitlist h2 {
  font-size: var(--heading-size);
  line-height: var(--leading-tight);
}

.waitlist-body {
  color: var(--bone-soft);
}

.field input {
  background: rgba(var(--ink-rgb), 0.6);
  border-color: rgba(var(--bone-rgb), 0.28);
  backdrop-filter: blur(6px);
}

.field input:hover {
  border-color: rgba(var(--bone-rgb), 0.5);
}

.form-status-heading {
  font-size: var(--subheading-size);
}

.form-status-body {
  color: var(--bone-soft);
}

/* --- footer ---------------------------------------------------------------------------------- */

.site-footer {
  border-top: var(--border-width) solid var(--line);
  padding: var(--space-5) 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
}

.footer-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.25rem;
}

.footer-tagline {
  color: var(--bone-dim);
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.footer-cta {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- narrow viewports: the film holds the whole stage, chapters sit in the bottom third,
   persistent header with a menu dialog replaces the desktop pill --------------------------- */

@media (max-width: 700px) {
  body {
    /* Guard against accidental horizontal overflow; real causes are fixed above, not
       papered over here. */
    overflow-x: clip;
  }

  /* Anchor targets land below the fixed header instead of underneath it. */
  main [id] {
    scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-3));
  }

  /* --- header: symbol + wordmark, menu button, solid blurred bar ------------------------ */

  .site-header {
    height: calc(var(--header-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    background: rgba(var(--ink-rgb), 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border-width) solid var(--line);
  }

  .brand-symbol {
    display: block;
    height: 28px;
    width: 28px;
  }

  .nav-cta {
    display: none;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--bone);
    cursor: pointer;
  }

  .menu-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
  }

  .menu-icon::before,
  .menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
  }

  .menu-icon::before {
    top: 0;
  }

  .menu-icon::after {
    bottom: 0;
  }

  .menu-icon-close {
    height: 20px;
  }

  .menu-icon-close::before,
  .menu-icon-close::after {
    top: 50%;
    bottom: auto;
  }

  .menu-icon-close::before {
    transform: rotate(45deg);
  }

  .menu-icon-close::after {
    transform: rotate(-45deg);
  }

  /* --- menu dialog: full-screen ink panel ------------------------------------------------ */

  .site-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--ink);
    color: var(--bone);
  }

  .site-menu::backdrop {
    background: rgba(var(--ink-rgb), 0.6);
  }

  .site-menu-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  .site-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
  }

  .site-menu-wordmark {
    display: block;
    height: 1.75rem;
    width: auto;
  }

  .site-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
    overflow-y: auto;
  }

  .site-menu-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 2rem;
    line-height: var(--leading-snug);
    color: var(--bone);
    text-decoration: none;
  }

  .site-menu-link-primary {
    min-height: 44px;
    margin-top: var(--space-2);
  }

  /* --- film stage: the film fills the whole stage, chapters sit low, bottom scrim only --- */

  .film::before {
    display: none;
  }

  .film::after {
    background: linear-gradient(to top, rgba(var(--ink-rgb), 0.9) 0%, rgba(var(--ink-rgb), 0) 100%);
  }

  .film-poster {
    /* Matches the portrait variant's own focal point (see content.js film.variants.portrait). */
    object-position: 50% 42%;
  }

  .chapter,
  .chapter[data-align='left'],
  .chapter[data-align='lower-left'],
  .chapter[data-align='upper-left'],
  .chapter[data-align='low-band'] {
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    text-align: left;
  }

  .chapter[data-align='low-band'] .chapter-inner {
    display: block;
  }

  .chapter[data-align='low-band'] .chapter-heading {
    margin-bottom: var(--space-2);
  }

  .chapter-inner,
  .chapter[data-align='upper-left'] .chapter-inner {
    max-width: none;
  }

  .chapter-heading {
    font-size: clamp(2rem, 1.2rem + 4.4vw, 2.75rem);
  }

  /* Middle chapters let the imagery lead: a smaller heading, no full-bleed headline. */
  .chapter[data-chapter='nothing-to-hide'] .chapter-heading,
  .chapter[data-chapter='look-closer'] .chapter-heading {
    font-size: 1.5rem;
  }

  /* Leave room for the skip pill so it never sits on the copy. */
  .film-skip {
    top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-2));
    bottom: auto;
    right: max(var(--gutter), env(safe-area-inset-right));
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* --- scroll cue: opening screen only, fades out as soon as scrolling starts ----------- */

  .scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    position: absolute;
    right: calc(var(--gutter) * 2);
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    z-index: var(--z-chapters);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--duration-standard) var(--ease-standard);
  }

  .scroll-cue.is-hidden {
    opacity: 0;
  }

  .scroll-cue-label {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking);
    font-size: 0.6875rem;
    color: var(--bone-dim);
  }

  .scroll-cue-line {
    width: 1px;
    height: 1.75rem;
    background: var(--bone-dim);
    animation: scroll-cue-pulse 1.8s ease-in-out infinite;
  }

  .details-list {
    grid-template-columns: 1fr;
  }

  .details-list dt {
    border-top: var(--border-width) solid var(--line);
    padding-bottom: 0;
  }

  .details-list dd {
    border-top: none;
    padding-top: 0.25rem;
  }
}

@keyframes scroll-cue-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scaleY(0.7);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .skip-link {
    transition: none;
  }

  .scroll-cue-line {
    animation: none;
  }
}

/* Short phones (for example 320x568): tighter type so copy stays below the subject. */
@media (max-width: 700px) and (max-height: 620px) {
  /* The label line would land on the watch here; headline, body and button all stay. */
  .chapter .eyebrow {
    display: none;
  }

  .chapter-heading {
    font-size: 1.625rem;
    margin-bottom: var(--space-1);
  }

  .chapter-body {
    font-size: 0.9375rem;
  }

  .chapter-cta {
    margin-top: var(--space-2);
  }

  .chapter {
    padding-bottom: var(--space-3);
  }
}