/* Fonts: self-hosted variable woff2 (Latin), from Fontsource. Licences in /fonts. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-tight.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-mono.woff2') format('woff2'); }

/* Nora site: shared styles for / and /join. Plain CSS, no build step. */

:root {
  --ink: #0F0F10;
  --muted: #5F6066;        /* secondary text, 6.4:1 on white */
  --muted-2: #6B6C72;      /* labels and indices, 5.3:1 on white */
  --rule: #E4E4E7;
  --paper: #FFFFFF;
  --film-ground: #050506;  /* behind the film before it renders */

  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(20px, 2.4vw, 32px);
  --container: 1376px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { color: var(--muted); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

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

/* ---------- header ---------- */
.site-header {
  padding-block: 26px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
}
.wordmark:hover { color: var(--ink); }
.header-meta { font-size: 14px; color: var(--muted); }
.header-link { display: inline-block; padding-block: 10px; font-size: 15px; font-weight: 500; text-decoration: underline; }

/* ---------- type ---------- */
.title {
  font-family: var(--font-display); font-weight: 600;
  line-height: 0.95; letter-spacing: -0.048em;
}
.lead-xl {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 2.4vw + 10px, 44px); line-height: 1.14; letter-spacing: -0.026em;
}
.lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 1.2vw + 16px, 27px); line-height: 1.3; letter-spacing: -0.018em;
}
.body { font-size: clamp(17px, 0.5vw + 15px, 19px); line-height: 1.62; }
.mono-label {
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted-2);
}

/* ---------- the film ---------- */
.film {
  position: relative; overflow: hidden; touch-action: pan-y;
  background: var(--film-ground) url('/assets/film-poster.jpg') center / cover no-repeat;
}
.film canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 600ms ease; }
.film.is-live canvas { opacity: 1; }

/* ---------- /join ---------- */
.join-hero { padding-block: clamp(56px, 7.5vw, 112px) clamp(44px, 6vw, 88px); }
.join-hero .title { max-width: 13ch; font-size: clamp(46px, 7.2vw, 108px); }
.join-hero .opener {
  margin-top: clamp(28px, 3vw, 44px); max-width: 24em;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 1.2vw + 16px, 32px); line-height: 1.22; letter-spacing: -0.02em;
}
/* width + min-width stop min/max-height from being transferred through the aspect ratio
   (without them the band overflows phones and stops short of full width on wide screens) */
.join-film { width: 100%; min-width: 0; aspect-ratio: 12 / 5; min-height: 360px; max-height: 640px; }

.memo {
  padding-top: clamp(80px, 9vw, 128px);
  display: flex; flex-direction: column; gap: clamp(72px, 7.5vw, 112px);
}
.memo-opening { display: flex; flex-direction: column; gap: 32px; }
.memo-opening .lead-xl { max-width: 21em; }

/* label column + text column; stacks on narrow screens */
.row { display: flex; flex-wrap: wrap; gap: 20px 64px; }
.row-label { flex: 1 1 240px; max-width: 340px; }
.row-text { flex: 999 1 520px; max-width: 680px; display: flex; flex-direction: column; gap: 22px; }

.section-heading {
  align-self: flex-start; display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
}
.chip { flex: 0 0 auto; width: 28px; height: 10px; border-radius: 5px; }
.chip-1 { background-image: var(--film-chip-1); background-size: var(--film-chip-1-size); }
.chip-2 { background-image: var(--film-chip-2); background-size: var(--film-chip-2-size); }
.chip-3 { background-image: var(--film-chip-3); background-size: var(--film-chip-3-size); }
.chip-4 { background-image: var(--film-chip-4); background-size: var(--film-chip-4-size); }
.chip-5 { background-image: var(--film-chip-5); background-size: var(--film-chip-5-size); }

.problems { margin-top: 10px; display: flex; flex-direction: column; gap: 22px; }
.problems li { display: flex; flex-direction: column; gap: 14px; }
.problems .strip { height: 3px; border-radius: 2px; }
.problems li:nth-child(1) .strip { background-image: var(--film-strip-1); background-size: var(--film-strip-1-size); }
.problems li:nth-child(2) .strip { background-image: var(--film-strip-2); background-size: var(--film-strip-2-size); }
.problems li:nth-child(3) .strip { background-image: var(--film-strip-3); background-size: var(--film-strip-3-size); }
.problems .item { display: flex; gap: 20px; align-items: baseline; }
.problems .index { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }
.problems .text {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.012em;
  font-size: clamp(19px, 0.6vw + 15px, 22px); line-height: 1.35;
}
.pull { margin-block: 18px 8px; }

.team { margin-top: 4px; border-top: 1px solid var(--rule); }
.team > div { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.team dt { flex: 0 0 112px; padding-top: 4px; }
.team dd { flex: 1 1 380px; }
.emphasis { font-weight: 500; }

.status { display: flex; flex-direction: column; gap: 16px; }
.status li { display: flex; gap: 16px; align-items: baseline; }
.dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; transform: translateY(1px); }
.status li:nth-child(1) .dot { background-image: var(--film-dot-1); background-size: var(--film-dot-1-size); }
.status li:nth-child(2) .dot { background-image: var(--film-dot-2); background-size: var(--film-dot-2-size); }
.status li:nth-child(3) .dot { background-image: var(--film-dot-3); background-size: var(--film-dot-3-size); }

.cta {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 1.6vw + 18px, 36px); line-height: 1.2; letter-spacing: -0.022em;
}
.cta a { text-decoration-thickness: 2px; text-underline-offset: 6px; }

.site-footer { margin-top: clamp(112px, 11vw, 160px); }
.wedge { height: 8px; background-image: var(--film-wedge); background-size: var(--film-wedge-size); }
.footer-row {
  padding-block: 22px 32px;
  display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted);
}
.footer-row .wordmark { font-size: 14px; }

/* Accents: hovering a section, problem, status line or the footer slides its
   accent along the film's colour sequence, as if the film there thickened.
   Pure CSS; only background-position animates, so no layout work. Skipped on
   touch screens (no hover). */
.chip, .problems .strip, .dot, .wedge {
  background-repeat: no-repeat; background-position: 0% 0;
  transition: background-position 1.6s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  .row:hover .chip,
  .problems li:hover .strip,
  .status li:hover .dot,
  .site-footer:hover .wedge { background-position: 100% 0; transition-duration: 0.9s; }
}

/* ---------- / (cover) ---------- */
.cover { height: 100vh; height: 100svh; min-height: 600px; display: flex; flex-direction: column; }
.cover-hero { padding-block: clamp(32px, 7vh, 96px) clamp(32px, 5.5vh, 64px); }
.cover-hero .title { max-width: 11.5em; font-size: clamp(44px, 5.4vw, 88px); line-height: 0.98; letter-spacing: -0.045em; }
.cover-hero .sub {
  margin-top: clamp(20px, 2.2vw, 30px); max-width: 26em;
  font-family: var(--font-display); font-weight: 500; color: var(--muted);
  font-size: clamp(19px, 0.8vw + 14px, 24px); line-height: 1.3; letter-spacing: -0.012em;
}
.cover-film { flex: 1 1 auto; min-height: 260px; }

@media (prefers-reduced-motion: reduce) {
  .film canvas { transition: none; }
}