/* After known.com: a full-bleed film, warm ivory type, short lines.
   Schibsted Grotesk throughout. No mono labels, no accent grid. */

:root {
  --bg: #000000;
  --ink: #F3EFE6;
  --muted: rgba(243, 239, 230, 0.72);
  --faint: rgba(243, 239, 230, 0.48);
  --line: rgba(243, 239, 230, 0.16);
  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --measure: 1120px;
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 12px;
  z-index: 50;
}
.skip:focus { top: 12px; }

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

.wrap {
  width: min(var(--measure), calc(100% - 96px));
  margin-inline: auto;
}

h1, h2, p { margin: 0; }

h2 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.prose p { margin-top: 18px; color: var(--muted); max-width: 38rem; }
.prose strong { color: var(--ink); font-weight: 500; }

/* header, over the film until the page moves */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
}

.site-header.is-scrolled {
  background: rgba(0, 0, 0, 0.88);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 76px;
}

.brand { display: flex; align-items: center; }
.brand img { width: 112px; height: auto; }

.nav-toggle {
  display: none;
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.nav-links a { opacity: 0.82; }
.nav-links a:hover { opacity: 1; }

/* film */

.film {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

.film.is-hero {
  background: #000 url("assets/football-poster.jpg") center bottom / cover no-repeat;
}

.reel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.film-video.is-current { opacity: 1; }

.is-legs .film-video {
  filter: sepia(0.28) saturate(0.58) contrast(0.92) brightness(0.7);
}

.wash,
.grain,
.marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wash {
  z-index: 1;
  background: rgba(168, 122, 74, 0.18);
  mix-blend-mode: soft-light;
}

.grain {
  z-index: 2;
  inset: -30px;
  background-image: url("assets/grain.png");
  background-size: 180px 180px;
  opacity: 0.2;
  mix-blend-mode: overlay;
  animation: grain 0.9s steps(2) infinite;
}

.marks { z-index: 4; }

.marks .pose {
  position: absolute;
  display: block;
  width: var(--w);
  height: auto;
  aspect-ratio: 200 / 336;
  left: var(--x, auto);
  right: var(--r, auto);
  top: var(--y, auto);
  bottom: var(--b, auto);
  overflow: visible;
}

/* Beside the note on the right, and along the black below it. */
.marks .pose[data-pose="raised"] { --x: 4%;  --r: auto; --y: auto; --b: 7%;  --w: min(115px, 8.5vw); --d: 0.15s; }
.marks .pose[data-pose="stand"]  { --x: auto; --r: 4%;  --y: 8%;   --b: auto; --w: min(75px, 6vw);    --d: 1.7s; }
.marks .pose[data-pose="hip"]    { --x: 24%; --r: auto; --y: auto; --b: 9%;  --w: min(84px, 6.5vw);  --d: 0.85s; }
.marks .pose[data-pose="lean"]   { --x: 44%; --r: auto; --y: auto; --b: 6%;  --w: min(95px, 7.5vw);  --d: 2.5s; }
.marks .pose[data-pose="stool"]  { --x: 64%; --r: auto; --y: auto; --b: 10%; --w: min(70px, 5.5vw);  --d: 3.3s; }
.marks .pose[data-pose="crouch"] { --x: auto; --r: 4%;  --y: auto; --b: 8%;  --w: min(78px, 6vw);    --d: 1.15s; }
.marks .pose[data-pose="cross"]  { --x: auto; --r: 4%;  --y: 36%;  --b: auto; --w: min(62px, 5vw);    --d: 4.0s; }

.marks .pose .draw {
  fill: none;
  stroke: rgba(214, 206, 190, 0.42);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.marks.is-drawn .pose .draw {
  animation: draw 2.8s ease forwards;
  animation-delay: var(--d, 0s);
}

.film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.02) 36%, rgba(0, 0, 0, 0.18) 68%, rgba(0, 0, 0, 0.55) 100%);
}

.film.is-hero::after {
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.16) 52%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 28%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0.5) 100%);
}

.film-copy {
  position: relative;
  z-index: 5;
  padding-bottom: 0;
  text-align: center;
}

.stack {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.stack p,
.stack h1 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  min-height: 1.35em;
}

.stack .stanza { margin-top: 1.15em; }

/* page */

.section { padding: 128px 0; }

#station {
  position: relative;
  overflow: hidden;
  min-height: 640px;
}

#station .wrap { position: relative; z-index: 2; }

.station {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}

.still { margin: 0; }
.still figcaption {
  margin-top: 12px;
  color: var(--faint);
  font-size: 15px;
}

.blanks {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.blanks li { margin-top: 10px; }
.ph { color: var(--ink); }

#who .prose p { max-width: 34rem; }

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
}
.field.wide { grid-column: 1 / -1; }

label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--faint);
}

input, textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 0 10px;
  outline: none;
}

textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus { border-bottom-color: var(--ink); }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
}
.choices input { width: auto; accent-color: var(--ink); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.btn:hover { background: #fff; }

.fine { margin: 0; color: var(--faint); font-size: 15px; }
.fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.page { padding: 120px 0 96px; }
.narrow { width: min(720px, calc(100% - 96px)); margin-inline: auto; }
.page h1 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.lede { margin-top: 16px; color: var(--muted); max-width: 38rem; }
.kicker { display: none; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 40px;
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
}
.site-footer p { margin: 0; color: var(--muted); }
.site-footer p + p { margin-top: 8px; }
.site-footer a { color: var(--ink); }
.foot-brand {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.legal {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--faint);
}

@media (max-width: 860px) {
  .wrap, .narrow { width: min(100% - 40px, var(--measure)); }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 20px 24px;
    background: #000;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 18px; opacity: 1; }
  .film-copy { width: min(100% - 48px, 26rem); }
  .stack p, .stack h1 { font-size: 22px; }
  .section { padding: 80px 0; }
  .station, .contact, .fields, .site-footer .wrap { grid-template-columns: 1fr; }
  h2, .page h1 { font-size: 32px; }
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { to { opacity: 1; } }
@keyframes grain {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-18px, 10px); }
}

@media (max-width: 600px) {
  .film-copy { width: min(100% - 28px, 26rem); }
}

@media (max-width: 860px) {
  #station {
    min-height: 0;
    padding-top: 132px;
    padding-bottom: 148px;
  }

  #station .marks .pose { --w: min(44px, 11vw); }

  #station .marks .pose[data-pose="raised"] { --x: 4%;  --r: auto; --y: 18px; --b: auto; }
  #station .marks .pose[data-pose="stand"]  { --x: auto; --r: 4%;  --y: 22px; --b: auto; }
  #station .marks .pose[data-pose="cross"]  { --x: 40%; --r: auto; --y: 16px; --b: auto; }
  #station .marks .pose[data-pose="hip"]    { --x: 3%;  --r: auto; --y: auto; --b: 18px; }
  #station .marks .pose[data-pose="lean"]   { --x: auto; --r: 3%;  --y: auto; --b: 22px; }
  #station .marks .pose[data-pose="stool"]  { --x: 30%; --r: auto; --y: auto; --b: 16px; }
  #station .marks .pose[data-pose="crouch"] { --x: auto; --r: 30%; --y: auto; --b: 16px; }
}

@media (max-width: 360px) {
  .film.is-hero { justify-content: safe center; padding-top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .film-video { display: none; }
  .grain { animation: none; }
  .marks .pose .draw,
  .marks.is-drawn .pose .draw { animation: none; stroke-dashoffset: 0; }
}