/* Film kit — shared styles for the course's animated films.
   Page chrome (masthead, screen, controls, chapters, transcript, colophon) and
   the stage pieces every film uses (type faces, the sea, chapter wipes).
   Tokens follow the constructive-alignment playground. Elements whose opacity or
   size a film animates get those values as SVG attributes, so these rules never
   set `opacity` or `font-size` on them. */

:root {
  --text-ochre: #855c15; --text-green: #4c6a3a; --text-brown: #8e4f22;
  --paper: #f5f2ea;
  --card: #fcfaf4;
  --inset: #efeadd;
  --ink: #23261f;
  --ink-soft: #474b40;
  --muted: #6b6557;
  --hair: #ddd6c4;
  --hair-strong: #c9c1ab;
  --danger: #a8442c;
  --c-ilo: #34708b;
  --c-tla: #5d7b49;
  --c-assess: #a25e2e;
  --font-ui: "Schibsted Grotesk", system-ui, sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
  flex-wrap: wrap;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 44px 20px 44px;
}

.masthead-eyebrow {
  margin: 0 0 4px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.masthead-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.masthead-intro {
  margin: 10px 0 0 0;
  max-width: 44em;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.masthead-back {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: 2px;
  margin-bottom: 4px;
}
.masthead-back:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- the screen ---------- */

.film {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 44px 48px 44px;
  flex: 1;
}

.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  overflow: hidden;
  /* paper grain, static so it costs nothing per frame */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14  0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0.07 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  cursor: pointer;
}

.stage { display: block; width: 100%; height: 100%; }

/* The frame, its caption and its controls: one player, as wide as the window's height allows. The
   player sets --film-w where the page's width would push the controls under the course bar (a 13-inch
   screen); the chapters keep to the same width. */
.player, .chapters { max-width: var(--film-w, none); margin-left: auto; margin-right: auto; }

/* in the middle band of the frame, so it shows above the course bar before the page is scrolled; each
   film moves it (--play-x, --play-y) to a free place on its opening frame */
.big-play {
  position: absolute;
  left: var(--play-x, 50%);
  top: var(--play-y, 50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(35, 38, 31, 0.12);
  transition: transform 0.15s ease, background 0.15s ease;
}
.big-play:hover { transform: translate(-50%, calc(-50% - 2px)); background: #fff; }
.big-play[hidden] { display: none; }
.big-play-icon {
  width: 0; height: 0;
  border-left: 13px solid var(--c-assess);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.end-card {
  position: absolute;
  left: 67%;
  top: 64%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 30%;
  cursor: default;
}
.end-card[hidden] { display: none; }
.end-replay,
.end-link {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
}
.end-link { background: var(--ink); color: var(--paper); }
.end-replay:hover { background: #fff; }
.end-link:hover { background: var(--ink-soft); }
.end-note { margin: 2px 0 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }

/* ---------- caption and controls ---------- */

.caption {
  margin: 0;
  min-height: calc(2.9em + 20px);   /* two lines, so the controls stay put under a caption of two lines */
  padding: 14px 8% 6px 8%;
  text-align: center;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}

.controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0 4px 0;
}

.ctl-play {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--card);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ctl-play:hover { background: #fff; }
.ctl-play-icon {
  width: 0; height: 0;
  margin-left: 3px;
  border-left: 12px solid var(--ink);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.ctl-play.is-playing .ctl-play-icon {
  margin-left: 0;
  width: 12px;
  height: 14px;
  border: 0;
  border-left: 4px solid var(--ink);
  border-right: 4px solid var(--ink);
}

.scrub-wrap { position: relative; flex: 1; height: 28px; display: flex; align-items: center; }

.scrub {
  --p: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ink) 0, var(--ink) var(--p), var(--hair-strong) var(--p), var(--hair-strong) 100%);
  cursor: pointer;
}
.scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink);
}
.scrub::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink);
}
.scrub:focus-visible { outline: 2px solid var(--c-ilo); outline-offset: 6px; }

.ticks { position: absolute; inset: 0; pointer-events: none; }
.tick {
  position: absolute;
  top: 6px;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  background: var(--paper);
  border-left: 1px solid var(--muted);
  border-right: 1px solid var(--muted);
}

.time {
  flex: none;
  min-width: 88px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.ctl-toggle {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--hair-strong);
  border-radius: 4px;
  padding: 6px 9px;
  cursor: pointer;
}
.ctl-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--card); }

/* full screen, added by the player where the browser can show one part of a page full screen */
.ctl-fs {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  padding: 0;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--hair-strong);
  border-radius: 4px;
  cursor: pointer;
}
.ctl-fs:hover { color: var(--ink); border-color: var(--ink); background: var(--card); }
.ctl-fs svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.ctl-fs .fs-out, .ctl-fs.is-full .fs-in { display: none; }
.ctl-fs.is-full .fs-out { display: inline; }
.ctl-fs[hidden] { display: none; }

.chapters { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 0 0 56px; }
.chap {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px 10px 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-ui);
}
.chap:hover { color: var(--ink-soft); }
.chap.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.chap-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
.chap-name { font-size: 15px; font-weight: 600; }

.transcript {
  margin-top: 26px;
  border-top: 1px solid var(--hair-strong);
  padding-top: 14px;
}
.transcript summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.transcript-body { max-width: 46em; padding: 6px 0 0 0; }
.transcript-body h3 {
  margin: 22px 0 6px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
}
.transcript-body p { margin: 0 0 8px 0; font-size: 16px; line-height: 1.55; }
.transcript-body .transcript-note {
  margin: -2px 0 12px 0;
  padding-left: 14px;
  border-left: 2px solid var(--hair-strong);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- colophon ---------- */

.colophon {
  border-top: 1px solid var(--hair-strong);
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 44px 26px 44px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.colophon p { margin: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--muted); }

/* ================================ shared stage pieces ================================ */

.f-disp { font-family: var(--font-display); }
.f-mono { font-family: var(--font-mono); }
.w-font { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.hi { font-style: italic; font-weight: 600; }

.sea-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.sea-hatch { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 22 6 3 6; }
.sea-ripple { fill: none; stroke: var(--ink); stroke-width: 1.3; }

.wipe-num { font-size: 300px; font-weight: 500; fill: none; stroke: var(--paper); stroke-width: 2; }
.wipe-name { font-size: 20px; letter-spacing: 0.32em; fill: var(--paper); }

/* ---------- language switch ---------- */

.lang-switch { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 999px; padding: 2px; margin-bottom: 4px; }
.lang-switch button {
  appearance: none;
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 4px 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.masthead-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .masthead { padding: 22px 24px 16px 24px; }
  .film { padding: 0 24px 40px 24px; }
  .colophon { padding: 16px 24px 22px 24px; }
  .chapters { padding-left: 0; }
  .end-card { left: 50%; top: auto; bottom: 8%; transform: translateX(-50%); max-width: 70%; align-items: center; }
  .end-note { display: none; }
}

@media (max-width: 640px) {
  .masthead { padding: 18px 16px 14px 16px; }
  .masthead-title { font-size: 27px; }
  .film { padding: 0 16px 32px 16px; }
  .colophon { padding: 14px 16px 20px 16px; }
  .caption { font-size: 16px; padding: 12px 0 4px 0; min-height: calc(2.9em + 16px); }
  .controls { flex-wrap: wrap; gap: 10px; }
  .scrub-wrap { order: 5; flex: 1 1 calc(100% - 42px); }   /* a row of its own, shared with full screen */
  .ctl-fs { order: 6; }
  .time { min-width: 0; margin-right: auto; }
  /* a phone shows the whole frame: the button goes back over the sea, clear of every title */
  .big-play { padding: 10px 16px 10px 14px; font-size: 14px; left: 50%; top: auto; bottom: 8%; transform: translateX(-50%); }
  .big-play:hover { transform: translateX(-50%) translateY(-2px); }
  .end-replay, .end-link { font-size: 13px; padding: 6px 12px; }
}

/* the Sound switch, added by the player once a film has a recorded voice */
.ctl-toggle[hidden] { display: none; }

/* ---------- full screen ---------- */

/* the player alone, on the paper, with the frame as large as the screen allows above its caption and
   controls (the player works out --film-w for the screen). Two rules, as a browser that does not know one
   of the two names would drop a rule that has both. */
.player:fullscreen {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  max-width: none; padding: 16px 28px; background: var(--paper);
}
.player:-webkit-full-screen {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  max-width: none; padding: 16px 28px; background: var(--paper);
}
.player:fullscreen > * { width: var(--film-w, 100%); flex: none; }
.player:-webkit-full-screen > * { width: var(--film-w, 100%); flex: none; }