:root {
  --bg: #000;
  --ink: #f1f0ec;
  --dim: rgba(241, 240, 236, .5);
  --faint: rgba(241, 240, 236, .22);
  --p: 0;                 /* hold progress 0..1, set by main.js */
  --gut: clamp(16px, 2.6vw, 34px);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --slow: cubic-bezier(.7, 0, .2, 1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #fdfdfd;          /* matches the white film's backdrop exactly (measured 253) */
  --ink: #0d0d0d;
  --dim: rgba(13, 13, 13, .5);
  --faint: rgba(13, 13, 13, .2);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; background: var(--bg); overflow: hidden; }

body {
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- the film ---------- */
.stage {
  position: fixed; inset: 0;
  overflow: hidden;       /* the film may run past the screen edge; the page must never grow with it */
  cursor: pointer;
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  outline: none;
}
.film { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
:root[data-theme="dark"] .film[data-film="dark"],
:root[data-theme="light"] .film[data-film="light"] { visibility: visible; }

/* Wide screens: the film covers edge to edge. Narrower windows: it keeps a sane scale
   (never zoomed past 1.35x the height) and melts into the page top and bottom,
   because the page colour is the film's own backdrop. */
.film video {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 135vh);
  height: auto;
  aspect-ratio: 2560 / 1428;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}
.film video.on { opacity: 1; }
@media (max-aspect-ratio: 1793/1000) {
  .film video {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
}

/* phones: a dedicated crop, wider than the screen, centred on the palm */
@media (max-aspect-ratio: 4/5) {
  .film video {
    top: 44%;
    width: 158vw;
    aspect-ratio: 1440 / 1004;
    transform: translate(-48%, -50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  }
}

/* ---------- corners ---------- */
.corner {
  position: fixed; z-index: 5;
  font-size: 11px; font-stretch: 112%;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.tl { top: calc(var(--gut) + env(safe-area-inset-top)); left: var(--gut); }
.tr { top: calc(var(--gut) + env(safe-area-inset-top) - 8px); right: calc(var(--gut) - 8px); display: flex; }
.bl { bottom: calc(var(--gut) + env(safe-area-inset-bottom)); left: var(--gut); color: var(--dim); transition: color .5s ease; }
.bl:hover, .bl:focus-visible { color: var(--ink); }
.br { bottom: calc(var(--gut) + env(safe-area-inset-bottom)); right: var(--gut); color: var(--dim); }

.mark { font-size: 12px; font-weight: 650; font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; }
.mark .amp { font-weight: 300; padding: 0 .1em; }

/* X = dark, O = white. Drawn, not typed: a true circle and a square X at cap height,
   same stroke as the wordmark. They also lean into each other while you hold. */
.xo {
  display: grid; place-items: center;
  padding: 8px;
  color: var(--faint);
  transition: color .6s ease;
}
.xo svg { width: 8.25px; height: 8.25px; display: block; overflow: visible; }   /* = Archivo cap height at 12px */
.o svg { width: 8.6px; height: 8.6px; }   /* optical overshoot: round letters sit slightly past the cap line */
.xo path, .xo circle { fill: none; stroke: currentColor; stroke-width: 1.75px; vector-effect: non-scaling-stroke; }
.xo path { stroke-linecap: butt; }
.xo:hover, .xo:focus-visible { color: var(--dim); outline: none; }
:root[data-theme="dark"] .x, :root[data-theme="light"] .o { color: var(--ink); cursor: default; }
.o { margin-left: calc(4px - var(--p) * 8px); }

/* ---------- copy ---------- */
.copy {
  position: fixed; z-index: 6;
  left: 50%; bottom: calc(var(--gut) + 64px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(520px, calc(100vw - var(--gut) * 2));
  display: grid;
  text-align: center;
  pointer-events: none;
}
.lines, .letter, .sent { grid-area: 1 / 1; align-self: end; }
.lines { position: relative; height: 3.6em; }

.line {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; font-stretch: 62%; letter-spacing: .01em;
  opacity: 0; transform: translateY(6px);
  transition: opacity 1.2s var(--slow), transform 1.2s var(--slow);
}
.line.on { opacity: 1; transform: none; }
.line small { font-size: 10px; font-weight: 400; font-stretch: 112%; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }

.letter, .sent {
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 1.3s var(--slow), transform 1.3s var(--slow), visibility 0s linear 1.3s;
}
.letter.on, .sent.on {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 1.3s var(--slow) .15s, transform 1.3s var(--slow) .15s, visibility 0s;
}
.done .lines { opacity: 0; transition: opacity .7s ease; }

.letter-lead { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; font-stretch: 62%; margin-bottom: 20px; }
.fields {
  display: grid; grid-template-columns: 1fr 1.4fr auto;
  border-bottom: 1px solid var(--faint);
  transition: border-color .5s ease;
}
.fields:focus-within { border-color: var(--dim); }
.f input {
  width: 100%; background: transparent; border: 0; outline: none; border-radius: 0;
  color: var(--ink); font: inherit; font-size: 16px; padding: 12px 4px;
}
.f input::placeholder { color: var(--dim); }
.send {
  font-size: 11px; font-weight: 650; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 4px 12px 16px;
}
.send:disabled { color: var(--dim); cursor: default; }
.err { min-height: 1.3em; margin-top: 10px; font-size: 12px; color: var(--ink); }
.fine { margin-top: 2px; font-size: 10px; letter-spacing: .08em; color: var(--dim); }
.fine a { text-decoration: underline; text-underline-offset: 2px; }

.sent-big { font-size: clamp(28px, 3vw, 40px); font-weight: 300; font-stretch: 62%; }
.sent-small { margin-top: 10px; font-size: 10px; font-stretch: 112%; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .fields { grid-template-columns: 1fr auto; }
  .fields .f:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--faint); }
  .bl { left: 0; right: 0; text-align: center; bottom: calc(var(--gut) + 20px + env(safe-area-inset-bottom)); font-size: 10px; letter-spacing: .1em; }
  .br { left: 0; right: 0; text-align: center; font-size: 10px; }
}

/* ---------- mode switch: the new mode opens as a circle from the letter you pressed ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* ---------- privacy page ---------- */
html.doc-page, html.doc-page body { overflow: auto; }
.doc { max-width: 620px; margin: 0 auto; padding: 120px var(--gut) 100px; font-size: 14px; line-height: 1.7; color: var(--dim); }
.doc h2 { color: var(--ink); font-weight: 300; font-stretch: 62%; font-size: 30px; margin-bottom: 26px; }
.doc p { margin-bottom: 16px; }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }