/* The public website in the setlist world: black, cream ink, ember for the song on now and the one
   action, poster capitals for titles, white prints with the song written on them. The guest page
   (lobby.css) wears the same world; this file is the website's own, so neither can move the other.
   Every side below that is "start" or "end" is the reader's: Hebrew pages run right to left. */

/* -- Faces (self-hosted, each with its licence in /fonts) ---------------------------------- */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/archivoblack-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/archivo-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/spacemono-bold.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/caveat-bold.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Heebo Black, named as Archivo Black's regular: the poster face asks for weight 400. */
@font-face {
  font-family: "Aftersong Hebrew Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/heebo-black-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Aftersong Hebrew";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/heebo-var-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Aftersong Hebrew Hand";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playpen-hebrew-semibold.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* -- The world ------------------------------------------------------------------------------- */
/* One theme, chosen from the scene: a phone in a dark room at an event, or the morning after on
   the same phone. The greys are warm and pass body-text contrast on the black (muted 7.1:1,
   faint 5.6:1); ember on the black is 6.3:1, its button text 6.2:1. */
:root {
  color-scheme: dark;
  --bg: #0b0a0a;
  --film: #050404;
  --ink: #f5f0e8;
  --reading-ink: #d9d2c9;
  --muted: #a39a92;
  --faint: #8f877f;
  --line: #2a2625;
  --edge: #6f6761;
  --ember: #ff5a1f;
  --on-ember: #120c0a;
  --print: #fbf8f2;
  --print-ink: #2c2826;
  --print-faint: #6f6761;
  --display: "Archivo Black", "Aftersong Hebrew Display", "Arial Black", sans-serif;
  --sans: "Archivo", "Aftersong Hebrew", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "Aftersong Hebrew", ui-monospace, Menlo, monospace;
  --hand: "Caveat", "Aftersong Hebrew Hand", "Marker Felt", cursive;
  --gutter: clamp(1rem, 4.5vw, 2.5rem);
  --measure: 34rem;
  --page: 75rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--edge) var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  caret-color: var(--ember);
}
::selection { background: var(--ember); color: var(--on-ember); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ember); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -6rem;
  z-index: 20;
  padding: 0.7rem 1rem;
  background: var(--ember);
  color: var(--on-ember);
  font-weight: 800;
  text-decoration: none;
}
.skip:focus { top: calc(var(--safe-top) + 0.75rem); }
/* Words from outside (a song, a name) in their own direction inside a line. */
.iso { unicode-bidi: isolate; }

/* The page column. */
.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  /* Physical sides: a phone's notch is on its left or right whichever way the page reads. */
  padding-left: calc(var(--gutter) + var(--safe-left));
  padding-right: calc(var(--gutter) + var(--safe-right));
}

/* -- Type ------------------------------------------------------------------------------------ */
/* Poster capitals for titles; Hebrew has no capitals, its heavy face needs a little more air. */
.poster {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.03em;
}
:lang(he) .poster { line-height: 1.02; letter-spacing: -0.01em; }
/* Numbers that line up: track numbers, times, codes. */
.num {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* -- The one button --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: 4px;
  background: var(--ember);
  color: var(--on-ember);
  font: 800 0.95rem/1.15 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 160ms var(--ease-out), transform 160ms var(--ease-out);
}
:lang(he) .btn { letter-spacing: 0; font-size: 1.05rem; text-transform: none; }
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
/* A quiet door: words with an underline, a full tap. */
.door {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--edge);
}
.door:hover { color: var(--ink); text-decoration-color: currentColor; }

/* -- Navigation ------------------------------------------------------------------------------- */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: calc(var(--safe-top) + 0.9rem) 0.9rem;
}
.nav__mark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
:lang(he) .nav__mark { letter-spacing: 0.14em; }
.nav__links { display: flex; align-items: center; gap: 0.25rem 1.1rem; flex-wrap: wrap; justify-content: flex-end; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[lang] { font-weight: 700; color: var(--ink); }
/* The smallest phones keep the header on one line: the in-page link goes (the footer keeps it). */
@media (max-width: 22.5rem) { .nav__links a[href$="#credits"] { display: none; } }

/* ============================================================================================ */
/* -- The opening: the film, between its songs and its promise -------------------------------- */
/* The title sits over the film like a poster's, the film plays in the middle, its songs run beside
   it on a wide screen (each lights as the film reaches it), and the promise and the one action
   sit on the other side. On a phone: title, film, its song strip, the promise, the action. */
.open { padding-block: 0.5rem clamp(1.5rem, 4vw, 2.5rem); }
.open__title {
  font-size: min(6rem, 11.5vw, calc((100vw - 2 * var(--gutter)) / 9.4));
  text-align: center;
}
:lang(he) .open__title { font-size: clamp(2.6rem, 11.5vw, 6rem); }
.open__title span { display: block; }
.open__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.5rem;
  margin-top: clamp(1.25rem, 3.5vw, 2.25rem);
}
.open__copy { display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 26rem; }
/* On a phone the one action comes straight after the film, inside the first screen; the promise
   follows it. */
.open__copy .btn, .open__copy .open__follow { order: -1; }
.open__stage { row-gap: 1.1rem; }
.open__lede { color: var(--ink); font-size: 1.1rem; line-height: 1.5; }
.open__note { color: var(--faint); font-size: 0.85rem; }
.open__note a { color: var(--muted); }

@media (min-width: 60rem) {
  .open__stage {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .open__songs { justify-self: stretch; }
  /* Both sides start on the film's top edge, each under a 2px rule, as the rows of a setlist do. */
  .open__copy {
    justify-items: start;
    text-align: start;
    justify-self: stretch;
    gap: 1.25rem;
    padding-top: 1.1rem;
    border-top: 2px solid var(--ink);
  }
  .open__copy .btn { order: 0; }
  .open__copy .open__follow { order: 1; }
}

/* -- The film --------------------------------------------------------------------------------- */
.film { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.film__frame {
  position: relative;
  width: min(62vw, 17.5rem, calc((100svh - 25rem) * 9 / 16));
  min-width: min(12.5rem, 70vw);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 6px;
  background: var(--film);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(245, 240, 232, 0.07);
  isolation: isolate;
}
@media (min-width: 60rem) {
  .film__frame { width: min(19rem, calc((100svh - 25rem) * 9 / 16)); }
}
/* Each shot fills the frame; the one playing is opaque. A cut, as a film edits on the beat: no
   slow dissolve, a short flash of the next shot's light. */
.shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 120ms linear;
}
.shot.is-on { opacity: 1; }
.shot__scene { position: absolute; top: -6%; left: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; transform: scale(1.06); }
.shot.is-on .shot__scene { animation: drift 2.6s linear both; }
@keyframes drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
/* The song, as the film captions it: its number large in ember, the title and artist beside it. */
.shot__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 3.5rem 0.9rem 0.95rem;
  background: linear-gradient(to top, rgba(5, 4, 4, 0.92), rgba(5, 4, 4, 0.55) 55%, rgba(5, 4, 4, 0));
  text-align: start;
}
.shot__n { font-family: var(--display); font-size: 2.6rem; line-height: 0.8; color: var(--ember); letter-spacing: -0.04em; }
.shot__song { display: grid; min-width: 0; }
.shot__title { font-weight: 800; font-size: 0.95rem; line-height: 1.15; }
.shot__artist { color: var(--muted); font-size: 0.78rem; line-height: 1.3; }
/* The title card: the event's name, as the film opens on it. */
.shot--title { display: grid; place-content: center; text-align: center; padding: 1.5rem; background: var(--bg); }
.shot--title .shot__scene { opacity: 0.35; }
.shot__event { position: relative; font-size: 2.35rem; }
.shot__when { position: relative; margin-top: 0.7rem; color: var(--muted); font-size: 0.75rem; }

/* The scenes are drawn files (web/scenes/, made by scripts/site-scenes.ts): rooms at night as a
   guest's phone sees them, people backlit, never a face. They stand in for real photos until there
   is a real event, and the page says so under the film. */
/* The film's own controls under it: the songs as a strip (the one playing fills in ember) and
   pause. A segment is a button: it plays the film from that song. */
.film__bar { display: flex; align-items: center; gap: 0.6rem; width: min(100%, 22rem); }
.film__strip { display: flex; flex: 1; gap: 3px; min-width: 0; }
.film__seg {
  flex: 1;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.film__seg::before {
  content: "";
  position: absolute;
  inset: auto 0 50% 0;
  height: 3px;
  transform: translateY(50%);
  border-radius: 2px;
  background: var(--edge);
}
.film__seg::after {
  content: "";
  position: absolute;
  inset: auto 0 50% 0;
  height: 3px;
  transform: translateY(50%) scaleX(var(--p, 0));
  transform-origin: left center;
  border-radius: 2px;
  background: var(--ember);
}
:root[dir="rtl"] .film__seg::after { transform-origin: right center; }
.film__seg.is-done::after { --p: 1; background: var(--muted); }
.film__seg:focus-visible { outline-offset: -8px; }
.film__play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.film__play svg { width: 16px; height: 16px; }
.film__play:hover { border-color: var(--ink); }
.film__play .i-play { display: none; }
.film__play[aria-pressed="true"] .i-play { display: block; }
.film__play[aria-pressed="true"] .i-pause { display: none; }
.film__label { color: var(--faint); font-family: var(--mono); font-size: 0.7rem; text-align: center; }
/* Space Mono has no Hebrew letters, and its wide space would double every Hebrew word gap: Hebrew
   lines that are mono in English take the Hebrew body face. */
:lang(he) .film__label { font-family: var(--sans); font-size: 0.8rem; }

/* -- The songs beside the film (wide screens) ------------------------------------------------- */
/* The film's setlist: the song on now carries a ring drawn by hand around its number. */
.songs-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.songs-list li {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  transition: color 200ms var(--ease-out);
}
.songs-list .num { color: var(--faint); font-size: 0.8rem; transition: color 200ms var(--ease-out); }
.songs-list b { display: block; font-weight: 800; font-size: 1rem; line-height: 1.2; color: var(--muted); transition: color 200ms var(--ease-out); }
.songs-list small { font-size: 0.82rem; }
.songs-list li.is-on { color: var(--muted); }
.songs-list li.is-on .num { color: var(--ember); }
.songs-list li.is-on b { color: var(--ink); }
.songs-list li.is-done b { text-decoration: line-through; text-decoration-color: var(--edge); }
.ring {
  position: absolute;
  inset-inline-start: -0.85rem;
  top: 0.15rem;
  width: 3.1rem;
  height: 2.3rem;
  transform: rotate(-4deg);
  color: var(--ember);
  pointer-events: none;
  opacity: 0;
}
.songs-list li.is-on .ring { opacity: 1; }
.songs-list li.is-on .ring path { animation: draw 520ms var(--ease-out) both; }
@keyframes draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
.open__songs { display: none; }
@media (min-width: 60rem) { .open__songs { display: block; } }

/* ============================================================================================ */
/* -- The sections below: rhythm, rules, no cards ---------------------------------------------- */
.part { padding-block: clamp(3rem, 7vw, 5.5rem); }
.part--follows { padding-top: clamp(2rem, 4vw, 3rem); }
.part--aside { padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 5rem); }
.part__title { font-size: clamp(2.1rem, 6.5vw, 4.25rem); max-width: 14ch; }
.part__lede { margin-top: 1.25rem; max-width: var(--measure); color: var(--muted); font-size: 1.1rem; }

/* The credits: how an Aftersong event is made, set as a film's closing credits. Each row is a
   role and who filled it, on one line; what that means sits under it in plain words. */
.credits { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 2px solid var(--ink); }
.credit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem 2rem;
  padding-block: 1.5rem 1.6rem;
  border-bottom: 1px solid var(--line);
}
/* "Produced by  YOU, THE HOST": the role runs into the name on one line, as on a film's credits. */
.credit__line { font-size: clamp(1.55rem, 4.6vw, 2.5rem); line-height: 1.05; }
.credit__role {
  margin-inline-end: 0.6em;
  color: var(--muted);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.4em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.42em;
}
:lang(he) .credit__role { font-family: var(--sans); font-weight: 600; letter-spacing: 0; font-size: 0.5em; }
.credit__what { max-width: var(--measure); color: var(--muted); }
@media (min-width: 56rem) {
  .credit { grid-template-columns: 9.5rem minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline; }
  .credit__line { display: contents; }
  .credit__role { margin: 0; font-size: 0.85rem; text-align: end; vertical-align: baseline; }
  :lang(he) .credit__role { font-size: 1rem; }
  .credit__who { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
}

/* The soundtrack: the example event's album, every photo filed under its song. */
.album { margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.track {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.track__n { color: var(--ember); font-size: 0.9rem; padding-top: 0.2rem; }
.track__song b { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.track__song small { color: var(--muted); font-size: 0.9rem; }
/* On a phone the prints take the row's whole width, two to a line, so a photo is big enough to see. */
.track__prints { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.9rem; }
.track__prints .print { width: min(11rem, calc(50% - 0.45rem)); }
@media (min-width: 48rem) {
  .track { grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
  .track__prints { grid-column: 3; margin-top: 0; }
  .track__prints .print { width: 9rem; }
}
/* A print: white paper around the photo, the song written on its foot by hand. */
.print {
  width: 9rem;
  margin: 0;
  padding: 0.35rem 0.35rem 0;
  background: var(--print);
  border-radius: 1px;
  box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.35);
}
.print:nth-child(3n + 1) { transform: rotate(-2deg); }
.print:nth-child(3n + 2) { transform: rotate(1.4deg); }
.print:nth-child(3n + 3) { transform: rotate(-0.6deg); }
.print__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.print__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.print__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 1.9rem;
  padding: 0.15rem 0.1rem 0.25rem;
  color: var(--print-ink);
}
.print__song { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.05rem/1.2 var(--hand); }
.print__time { flex: none; color: var(--print-faint); font-size: 0.58rem; }
.album__note { margin-top: 1.25rem; color: var(--faint); font-size: 0.85rem; }

/* For whom: two kinds of event, side by side on a wide screen, one rule over each. */
.uses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 48rem) {
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 0 3rem; }
  .use { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.9rem; }
}
.use { border-top: 2px solid var(--ink); padding-top: 1.25rem; display: grid; gap: 0.9rem; align-content: start; }
.use__title { font-size: clamp(1.6rem, 4.2vw, 2.25rem); }
.use p { color: var(--muted); max-width: var(--measure); }
.use ul { margin: 0.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.use li { padding-block: 0.7rem; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }

/* The fine print: what this is and is not, as plain rows. */
.facts { margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.facts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 2rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) { .facts li { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.facts b { font-weight: 800; }
.facts span { color: var(--muted); }

/* For a guest who scanned a poster: a note to one reader, set smaller under its own rule. */
.guest { display: grid; gap: 0.9rem; max-width: 40rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.guest__title { font-size: clamp(1.6rem, 4.2vw, 2.25rem); }
.guest p { color: var(--muted); }

/* The close: the release line, as a film poster's bottom. */
.close { padding-block: clamp(4rem, 11vw, 8rem) clamp(3rem, 8vw, 5rem); text-align: center; }
.close__title { font-size: clamp(2.6rem, 10vw, 6rem); line-height: 1; }
.close__act { display: grid; justify-items: center; gap: 1rem; margin-top: 2rem; }
.close__note { color: var(--faint); font-size: 0.9rem; }

/* -- Footer ------------------------------------------------------------------------------------ */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  position: relative;
  padding-block: 1.5rem calc(var(--safe-bottom) + 1.75rem);
  color: var(--faint);
  font-size: 0.88rem;
}
/* Its rule spans the page column, not the gutters. */
.foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--gutter) + var(--safe-left));
  right: calc(var(--gutter) + var(--safe-right));
  border-top: 1px solid var(--line);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ============================================================================================ */
/* -- Reading pages: support, privacy, terms ---------------------------------------------------- */
.read { padding-block: clamp(2rem, 6vw, 4rem) clamp(4rem, 10vw, 6rem); }
.read__title { font-size: clamp(2.4rem, 8vw, 4.5rem); }
.read__meta { margin-top: 1rem; color: var(--faint); font-size: 0.9rem; }
.read__notice {
  margin-top: 1.75rem;
  max-width: var(--measure);
  padding: 1rem 1.15rem;
  border: 1px solid var(--edge);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.95rem;
}
.prose { margin-top: clamp(2rem, 5vw, 3rem); max-width: 42rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  margin-top: 2.75rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.prose h3 { margin-top: 1.75rem; font-weight: 800; font-size: 1.08rem; line-height: 1.3; }
.prose p, .prose li { color: var(--reading-ink); }
.prose ul, .prose ol { padding-inline-start: 1.25rem; }
.prose ul { list-style-type: "–  "; }
.prose li::marker { color: var(--edge); font-weight: 700; }
.prose ol li::marker { font-family: var(--mono); font-size: 0.85em; }
.prose li + li { margin-top: 0.45rem; }
.prose strong { color: var(--ink); font-weight: 800; }
.prose a { color: var(--ink); text-decoration-color: var(--edge); }
.prose a:hover { text-decoration-color: var(--ember); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.prose th { color: var(--ink); font-weight: 800; }
.prose code { font-family: var(--mono); font-size: 0.9em; }

/* Support: questions as rows; each answer opens under its question. */

/* -- Small pages: not found, a friend's link ----------------------------------------------------- */
.small { min-height: calc(100svh - 10rem); display: grid; align-content: center; gap: 1.5rem; padding-block: 3rem 5rem; }
.small .small__n { color: var(--ember); font-family: var(--display); font-size: clamp(5rem, 24vw, 6rem); line-height: 0.8; letter-spacing: -0.05em; }
.small__title { font-size: clamp(2.2rem, 9vw, 4rem); max-width: 16ch; }
.small p { max-width: var(--measure); color: var(--muted); }
.small__acts { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.small__code { color: var(--faint); font-size: 0.9rem; }

/* -- Motion, contrast, forced colours ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .shot { transition: none; }
  .shot.is-on .shot__scene { animation: none; }
  .songs-list li.is-on .ring path { animation: none; }
  .btn, .songs-list li { transition: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #c9c1b8; --faint: #b3aaa1; --line: #4a4542; }
}
@media (forced-colors: active) {
  .btn, .film__play { border: 2px solid ButtonText; }
  .film__seg::before, .film__seg::after { background: CanvasText; }
}

/* -- Pages with one address for everyone carry both languages; site-pick.js picks one. ---------- */
html:not([lang="he"]) [data-lang="he"],
html[lang="he"] [data-lang="en"] { display: none !important; }
/* A friend's link: which line shows depends on the link (site-friend.js sets data-friend). */
[data-friend="ok"] [data-state]:not([data-state~="ok"]),
[data-friend="bad"] [data-state]:not([data-state~="bad"]),
[data-friend="failed"] [data-state]:not([data-state~="failed"]),
[data-friend="opening"] [data-state]:not([data-state~="opening"]) { display: none !important; }