/* Meaning: the film edge to edge under the navigation, then a short page in the institute's screen style
   (paper and ink, Inter at two sizes, mono labels). */
body.meaning-body[data-rpi-page="meaning"] {
  --m-paper: #faf8f3; --m-ink: #1d1d1b; --m-body: #2a2926; --m-soft: #3c3a36; --m-hair: #8a8a8a;
  --m-cyan: #009fe3; --m-rule: color-mix(in srgb, var(--m-ink) 16%, var(--m-paper));
  --m-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --m-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --m-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--m-paper); color: var(--m-body);
}
@media (prefers-color-scheme: dark) {
  body.meaning-body[data-rpi-page="meaning"] { --m-paper: #141413; --m-ink: #faf8f3; --m-body: #e9e6df; --m-soft: #c9c5bc; --m-cyan: #2bb3f0; }
}
.meaning-page { width: min(calc(100% - 4rem), 75rem); margin: 0 auto; padding: 0 0 5rem;
  font-family: var(--m-text); font-weight: 420; line-height: 1.42; font-optical-sizing: auto; }
.meaning-label { margin: 0 0 1rem; font: 700 .75rem/1.3 var(--m-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-soft); }
.meaning-label a { color: inherit; text-decoration: none; }
.meaning-label a:hover { text-decoration: underline; }
.meaning-opening { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--m-ink); }
.meaning-opening h1 { max-width: 15ch; margin: 0 0 1.75rem; font-family: var(--m-display); font-weight: 820;
  font-size: clamp(2.7rem, 6.4vw, 6rem); line-height: .94; letter-spacing: -.038em; color: var(--m-ink);
  text-shadow: 0 0 .5px color-mix(in srgb, var(--m-ink) 55%, transparent); }
.meaning-lede { max-width: 40rem; margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 450; line-height: 1.32;
  letter-spacing: -.008em; color: var(--m-ink); }
.meaning-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0; border-bottom: 1px solid var(--m-rule); }
.meaning-section h2 { margin: 0; max-width: 14ch; font-family: var(--m-display); font-weight: 780; font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.05; letter-spacing: -.02em; color: var(--m-ink); }
.meaning-copy p { max-width: 38rem; margin: 0 0 1rem; font-size: 1.12rem; }
.meaning-copy p:last-child { margin-bottom: 0; }
.meaning-copy em { font-style: italic; }
.meaning-next { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding-top: 2.25rem; }
.meaning-next a { font: 700 .78rem/1.3 var(--m-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--m-ink);
  text-decoration: none; border-bottom: 2px solid var(--m-cyan); padding-bottom: .2rem; }
.meaning-next a:hover { color: var(--m-cyan); }
@media (max-width: 760px) {
  .meaning-page { width: calc(100% - 2rem); }
  .meaning-section { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* The film. It opens the page edge to edge, directly under the navigation, as the homepage film does: the picture
   fills the width of the window (and at most the screen's height under the header), and its controls sit over its
   lower right corner, in line with the page's content edge. On phones they sit under the picture. */
.me-film { position: relative; }
.me-film-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 9.75rem);
  max-height: calc(100svh - 9.75rem);
  object-fit: cover;
  background: #faf8f3;
}
.me-film-video::cue { font: 500 1rem/1.4 "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; color: #faf8f3; background: rgb(29 29 27 / 78%); }
.me-film-ui {
  position: absolute;
  right: max(2rem, calc((100% - 75rem) / 2));
  bottom: 1.5rem;
  z-index: 1;
  display: flex;
  gap: 8px;
}
.me-film-ui[hidden] { display: none; }
.me-film-ui button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: rgb(29 29 27 / 62%);
  color: #faf8f3;
  font: 500 .82rem/1 "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .15s linear, transform .2s ease;
}
.me-film-ui button:hover { background: rgb(29 29 27 / 78%); }
.me-film-ui button:active { transform: scale(.95); }
.me-film-ui button:focus-visible { outline: 2px solid #faf8f3; outline-offset: 2px; box-shadow: 0 0 0 4px rgb(29 29 27 / 80%); }
.me-film-sound { padding: 0 14px 0 11px !important; }
.me-film-sound.is-round { width: 36px; padding: 0 !important; }
.me-film-sound.is-round span { display: none; }
.me-film-round span { font: 700 .66rem/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .04em; }
[data-film-cc][aria-pressed="true"] { background: rgb(29 29 27 / 88%); box-shadow: inset 0 0 0 1.5px #faf8f3; }
.me-film-sound .mute, [data-sound="off"] .me-film-sound.is-round .wave { display: none; }
[data-sound="off"] .me-film-sound.is-round .mute { display: inline; }
[data-film-play] :is(.i-pause, .i-replay) { display: none; }
[data-state="playing"] [data-film-play] .i-play { display: none; }
[data-state="playing"] [data-film-play] .i-pause { display: inline; }
[data-state="ended"] [data-film-play] .i-play { display: none; }
[data-state="ended"] [data-film-play] .i-replay { display: inline; }
@media (max-width: 760px) {
  .me-film-ui { position: static; justify-content: flex-end; padding: 10px 1rem 0; }
}
@media print { .me-film { display: none; } }

/* The skip link stays off screen until it has keyboard focus (8 Nov 2026: it was showing at the top left). */
.skip { position: absolute; left: 1rem; top: -10rem; z-index: 50; padding: .8rem 1rem; background: var(--m-paper, #faf8f3); color: var(--m-ink, #1d1d1b); border: 1px solid currentColor; }
.skip:focus { top: 1rem; }