/*
  terry — pre-launch.

  The deck asks for the restrained white editorial world of 90s Comme des
  Garçons and Paco Rabanne: a white field, very little in it, and type doing
  all the work. So the rules here are mostly about restraint —

    one typeface for display, one mono for anything you can click
    black on white, no greys except the footer
    no borders, no shadows, no gradients, no motion that announces itself

  The lime is the tag sewn into the product, #d2ff9b, sampled from the vector
  export of her homepage slide rather than guessed. It appears once, on focus.

  The wordmark in the deck is a heavy rounded marker face set by hand. Archivo
  stands in until the real logo file arrives — swap the .word rule for an <img>
  the moment it does.
*/

:root {
  --ink:   #000;
  --paper: #fff;
  --grey:  #8a8a8a;
  --lime:  #d2ff9b;

  /*
    Her own typefaces, read out of the PowerPoint's XML rather than guessed:
    Helvetica Neue for display, IBM Plex Mono for anything you can click.

    Helvetica Neue is licensed and cannot be served as a webfont without one,
    but it is installed on every Mac, iPhone and iPad — so her audience mostly
    gets the real thing, and we are only naming a local font, not hosting it.
    Inter is the fallback everyone else sees: same grotesque, near enough at a
    glance, and free. Arial last, which Windows always has.

    IBM Plex Mono is open licensed, so that one is exact everywhere.
  */
  --display: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- the stage */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 4rem 16px 2rem;
  text-align: center;
}

.mark .word {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

/* The full stop is part of the mark, not punctuation. */
.dot { margin-left: 0.02em; }

.season {
  margin: 0;
  font-weight: 700;
  /*
    Deliberately enormous — it should fill the width and stop. No floor, so a
    320px phone shrinks it rather than letting it run off the side: "aw27" is
    roughly 2.2em wide at this tracking, and 24vw keeps that inside the gutter
    at every width.
  */
  font-size: min(24vw, 13rem);
  letter-spacing: -0.06em;
  line-height: 0.82;
}

/* ---------------------------------------------------------------- the button */

.pill {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.6rem 1.35rem;
  cursor: pointer;
  /* Comfortably over the 44px tap target once padding is counted. */
  min-height: 44px;
  transition: background 120ms linear, color 120ms linear;
}

.pill:hover { background: var(--ink); color: var(--paper); }

.pill:focus-visible,
input:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.pill[disabled] { opacity: 0.4; cursor: default; }
.pill[disabled]:hover { background: var(--paper); color: var(--ink); }

/* ----------------------------------------------------------------- the form */

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.panel[hidden] { display: none; }

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: min(22rem, 100%);
}

input[type="email"] {
  font-family: var(--mono);
  font-size: 1rem; /* 16px — anything smaller and iOS zooms the page on focus */
  color: var(--ink);
  background: transparent;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0;
  text-align: center;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  appearance: none;
}

input::placeholder { color: var(--grey); }

/*
  What they are agreeing to, in their words rather than a tickbox.

  PECR needs consent for marketing email, and consent has to be informed and
  recorded — so the form says what it is for, and waitlist.php stores the time
  and this exact wording against the address. Without that there is a list
  nobody can lawfully send to, which is the same as no list.
*/
.consent {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--grey);
  margin: 0.25rem 0 0;
  max-width: 22rem;
}

.note {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--grey);
  margin: 0;
  max-width: 24rem;
}

.note.bad { color: var(--ink); }

.thanks {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 0;
  max-width: 24rem;
}

.thanks[hidden] { display: none; }

/* ----------------------------------------------------------------- the foot */

.foot {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--grey);
  text-align: center;
  padding: 1.5rem 16px 2rem;
}

.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .bar { margin: 0 0.5rem; }

/*
  Three links on one line is about 380px of mono. Stacked well before that,
  because a footer that overflows gives the whole page a sideways scroll.
*/
@media (max-width: 560px) {
  .foot .bar { display: none; }
  .foot a { display: block; line-height: 1.9; }
}

/* ------------------------------------------------------------------ utility */

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===========================================================================
   The site (index.html). Everything above is shared with aw27.html, the
   deck's locked one-pager.

   Same rules, more room: white field, black type, mono for anything you can
   click, photography full-bleed and uncropped wherever it can be. The deck
   runs its images edge to edge against white, so there are no cards, no
   rounded corners and no shadows anywhere below.
   ======================================================================== */

/* ---------------------------------------------------------------- the nav */

/*
  Fixed, over the content, never a bar.

  It was mix-blend-mode: difference, which is the cheap trick for staying
  readable on anything. It is also why the nav went green over the film: the
  difference of white against that dark teal is a colour, not a grey. Blending
  gives you contrast and takes away control of the hue.

  So it is two plain states instead, switched by an observer watching the film:
  white while the film is behind it, black once it is not. No blending, no
  surprises, and the colour is always exactly the one chosen.
*/
.nav {
  position: fixed;
  top: 0; left: 0;
  z-index: 20;
  padding: 1.25rem 0 0 1.25rem;
  color: #000;
  transition: color 160ms linear;
}

.nav.is-light { color: #fff; }

.nav-mark { display: block; }

.nav-mark img {
  display: block;
  width: 104px;
  height: auto;
  transition: filter 160ms linear;
}

/* The logomark is black artwork, so it is inverted only while over the film. */
.nav.is-light .nav-mark img { filter: invert(1); }

.nav nav {
  display: flex;
  flex-direction: column;
  margin-top: 0.4rem;
}

.nav nav a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: inherit;
  text-decoration: none;
}

.nav nav a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- the film */

.film {
  position: relative;
  background: #000;
  line-height: 0;
}

/*
  A scrim under the nav, only over the film.

  The nav is difference-blended, which keeps it readable on black and on
  white but washes out against the film's mid-tone greens. Darkening the top
  of the frame is cheaper and less intrusive than giving the nav a background
  the rest of the page would then have to carry.
*/
.film::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0));
  pointer-events: none;
}

.film video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100svh;
  object-fit: cover;
}

.film-toggle {
  position: absolute;
  /* Left, because the deck's film carries a watermark bottom-right. */
  left: 1rem; bottom: 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  min-height: 32px;
  cursor: pointer;
  opacity: 0.6;
}

.film-toggle:hover { opacity: 1; }

/*
  Everything below the film is inset past the nav, which is fixed and would
  otherwise sit on the text as you scroll. Her design does the same: the nav
  owns a column on the left and the content starts to the right of it.
*/
@media (min-width: 761px) {
  .meet, .spec, .detail, .science, .turnaround, .about, .waitlist, .site .foot {
    padding-left: 10.5rem;
  }
}

/* ------------------------------------------------------------------ meet */

.meet {
  display: grid;
  grid-template-columns: 1fr;
  padding: 4.5rem 16px 2rem;
}

.meet-copy {
  justify-self: end;
  text-align: right;
  max-width: 46rem;
}

.meet h1 {
  margin: 0 0 1.25rem;
  font-weight: 700;
  font-size: clamp(1.75rem, 4.4vw, 3.1rem);
  letter-spacing: -0.045em;
  /* Her lines very nearly touch. Measured off the vector, not guessed. */
  line-height: 0.99;
}

.meet-figure {
  position: relative;
  width: 100%;
  max-width: 62rem;
  justify-self: center;
  margin-top: -1rem;
}

.meet-shot { display: block; width: 100%; height: auto; }

/*
  The tag. In her mockup it sits on his hip, slightly askew, the one piece of
  colour on the page — the lime is #d2ff9b, sampled from her own file.
*/
.tag {
  position: absolute;
  right: 18%;
  bottom: 22%;
  width: 7.5%;
  min-width: 46px;
  height: auto;
  padding: 0.45em 0.5em;
  background: var(--lime);
  transform: rotate(-9deg);
}

/* ------------------------------------------------------------------ spec */

.spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 16px 5rem;
}

.spec-shot { width: 100%; height: auto; }

.spec-list { margin: 0; }

/*
  Read as a column of values, not a table — the deck lists them bare, one per
  line, with the label doing nothing but sit quietly beside it.
*/
.spec-list > div {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.1rem 0;
}

.spec-list dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--grey);
  width: 4.5rem;
  flex: none;
}

.spec-list dd {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.4vw, 3.1rem);
  letter-spacing: -0.05em;
  line-height: 1.12;
}

/* ---------------------------------------------------------------- detail */

.detail, .turnaround { margin: 0; padding: 0 16px 5rem; }

.detail img, .turnaround img {
  display: block;
  width: 100%;
  max-width: 70rem;
  height: auto;
  margin: 0 auto;
}

figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--grey);
  text-align: center;
  margin-top: 0.9rem;
}

/* --------------------------------------------------------------- science */

.science {
  padding: 1rem 16px 5rem;
  text-align: center;
}

.science h2, .about h2 {
  margin: 0 0 2.25rem;
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.benefits {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 54rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem 1rem;
}

.benefits li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.benefits img { width: auto; height: 54px; }

.benefits span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  max-width: 11rem;
}

.science-note {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--grey);
  max-width: 28rem;
  margin: 3rem auto 0;
}

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

.about {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 0 16px 5rem;
}

.about-shot { width: 100%; height: auto; }

.about-copy p {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.8;
  max-width: 28rem;
}

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

.waitlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 16px 5rem;
  text-align: center;
}

/* The giant aw27 is the same type as the one-pager, so .season is shared. */
.waitlist .season { margin: 0; }

.waitlist-line {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grey);
  margin: 0 0 0.5rem;
}

/* The in-page link is styled as the button it replaces. */
a.pill {
  display: inline-block;
  text-decoration: none;
  line-height: 1.5;
  padding: 0.7rem 1.35rem;
}

/* ----------------------------------------------------------------- foot */

.site .foot { padding-top: 3rem; }

.legal {
  margin: 1rem 0 0;
  font-size: 0.625rem;
  color: var(--grey);
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 760px) {
  .spec, .about { grid-template-columns: 1fr; gap: 1.5rem; }
  .meet-copy { justify-self: start; text-align: left; }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .nav { padding: 1rem 0 0 1rem; }
  .nav-mark img { width: 80px; }
  .spec-list dt { width: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* A film that starts on its own is motion the visitor asked not to have. */
  .film video { animation: none; }
}