/* ==========================================================================
   datarail.org/movies

   The house palette and page shapes are the Library's, deliberately: this is
   another room in the same building, and the header, the shell width, the mono
   labels and the rails all have to read as one site.

   What is new here is the gloss. A review is a film's data -- year, director,
   runtime, format, a number out of a hundred -- set next to a person's prose,
   so the data is laid out like a readout on a monitor: mono, uppercase,
   measured, lit from behind. Magenta joins cyan because cinema has two beams.

   Loaded after /assets/circuit.css, which owns the edge rails and the
   --circuit-* tokens. Nothing here overrides one: the rails run the same
   colours on this page as on every other.
   ========================================================================== */

:root {
  --bg: #05070b;
  --bg-soft: #0b0f16;
  --bg-raised: #10151e;
  --fg: #f5f5f7;
  --muted: #9ca3af;
  --dim: #7d8694;

  --accent: #42f5ff;
  --accent-strong: #42ffb3;
  --film: #ff3d9a;          /* the other beam out of the projector */
  --warm: #e0b25c;
  --bad: #ff8098;
  --line: #1c232f;

  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --radius: 10px;
  --fast: 150ms ease-out;
  --shell: 980px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-main);
  background: radial-gradient(circle at 50% -6%, #0d1622 0, var(--bg) 58%, #03050a 100%);
  background-attachment: fixed;
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.14; font-weight: 600; letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; }
.label {
  font-family: var(--font-mono); font-size: 0.67rem;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--dim);
}
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--accent); color: #05070b; padding: 10px 16px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 7, 11, 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--shell); margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; }
.brand-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--film); box-shadow: 0 0 9px var(--film);
}
.brand-text { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.brand-text b { color: var(--film); font-weight: 600; }
.header-nav { display: flex; gap: 16px; font-size: 0.84rem; }
.header-nav a { color: var(--muted); text-decoration: none; transition: color var(--fast); }
.header-nav a:hover { color: var(--fg); }

/* ---------- Hero ----------
   The title carries a chromatic split: a magenta copy and a cyan copy a pixel
   either side, the way a cheap transfer misregisters. It is drawn with
   text-shadow rather than duplicated nodes, so the heading stays one string to
   a screen reader and to anyone selecting it. */
.hero { padding: 46px 0 10px; }
.hero h1 {
  font-size: clamp(2rem, 6vw, 3.1rem); margin: 12px 0 14px; max-width: 24ch;
  text-shadow: -2px 0 color-mix(in srgb, var(--film) 55%, transparent),
                2px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.hero p { margin: 0; color: var(--muted); max-width: 62ch; }
.hero .label { color: var(--film); }

/* ---------- The disclaimer ----------
   Top of the page, above the first review, loud on purpose. It is the claim
   the site makes about itself, so it gets the weight of a claim rather than
   the grey of small print. */
.human {
  position: relative; overflow: hidden;
  margin: 26px 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 42%, var(--line));
  border-left: 3px solid var(--accent-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--accent-strong) 9%, transparent), transparent 62%),
    var(--bg-soft);
  padding: 20px 22px;
}
.human h2 {
  font-size: 1.02rem; display: flex; align-items: center; gap: 10px;
  color: var(--accent-strong);
}
.human h2 svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.human p { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; max-width: 72ch; }
.human p strong { color: var(--fg); font-weight: 600; }

/* ---------- Review ---------- */
.reviews { padding: 10px 0 0; }
.review { padding: 40px 0 8px; border-top: 1px solid var(--line); }
.review:first-of-type { border-top: 0; }

/* The slate: the mono line above the title, the way a shot is labelled before
   it is shot. The index on it is counted by the build, never typed. */
.slate {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--dim);
}
.slate .n { color: var(--film); }
.slate .rule { flex: 1; height: 1px; min-width: 20px; background: var(--line); }

.review h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 13px 0 0; }
.review h2 a { text-decoration: none; }
.verdict-line {
  margin: 11px 0 0; font-size: 1.06rem; color: var(--fg);
  border-left: 2px solid var(--film); padding-left: 13px; max-width: 58ch;
}

/* ---------- Readout ----------
   The film as data. Fixed-width, uppercase keys, values lit. An unknown value
   is an em dash in --dim rather than a blank: a missing runtime should look
   like a missing runtime and not like a layout bug. */
.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px; margin: 22px 0 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--line); overflow: hidden;
}
.readout > div { background: var(--bg-soft); padding: 11px 13px; }
.readout dt {
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--dim);
}
.readout dd {
  margin: 5px 0 0; font-family: var(--font-mono); font-size: 0.86rem; color: var(--fg);
}
.readout dd.none { color: var(--dim); }

/* The verdict is a number out of a hundred, so it gets a bar as well as a
   figure. --w is set per review by the build. Unrated draws no bar at all,
   because an empty bar reads as a zero. */
.meter { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; }
.meter .bar {
  height: 5px; margin-top: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden;
}
.meter .bar span {
  display: block; height: 100%; width: var(--w, 0%); border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--film));
  box-shadow: 0 0 12px -2px var(--film);
}
.meter dd b { font-size: 1.15rem; font-weight: 600; }
.meter dd i { font-style: normal; color: var(--dim); font-size: 0.74rem; }
@media (max-width: 420px) { .meter { grid-column: span 1; } }

/* ---------- Body, and the slot where one is not written yet ---------- */
.body { max-width: 68ch; }
.body p { margin: 17px 0 0; }
.body p:first-child::first-letter {
  float: left; font-size: 3.1rem; line-height: 0.84; padding: 4px 10px 0 0;
  color: var(--film); font-weight: 600;
}

.awaiting {
  margin: 22px 0 0; max-width: 68ch;
  border: 1px dashed color-mix(in srgb, var(--warm) 50%, var(--line));
  border-radius: var(--radius); background: var(--bg-soft);
  padding: 18px 20px; color: var(--muted); font-size: 0.89rem;
}
.awaiting strong { color: var(--warm); font-weight: 600; }
.awaiting p { margin: 0; }
.awaiting p + p { margin-top: 9px; }

.byline {
  margin: 20px 0 0; font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--dim);
}
.byline b { color: var(--accent); font-weight: 500; }

/* ---------- Sponsor ----------
   Asked to be prevalent, and it is: full width under every review, its own
   frame, its own glow. It is still marked up as an aside and still says the
   word Sponsored, because a reader is owed the difference between a review and
   the money sitting next to it. */
.sponsor {
  position: relative; overflow: hidden;
  margin: 26px 0 0;
  border: 1px solid color-mix(in srgb, var(--film) 40%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--film) 13%, transparent), transparent 58%),
    var(--bg-raised);
  padding: 17px 20px;
  display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap;
}
.sponsor::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 34px -14px var(--film);
}
.sponsor .k {
  font-family: var(--font-mono); font-size: 0.63rem;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--film);
}
.sponsor .v { font-size: 1.04rem; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Calendar ----------
   Small, as asked. A date block, a listing, and the reel if one is posted. */
.cal { padding: 46px 0 0; }
.cal-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.cal-head h2 { font-size: 1.14rem; }
.cal-head .n {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--dim);
  margin-left: auto; white-space: nowrap;
}
.cal-note { margin: 0 0 18px; color: var(--dim); font-size: 0.87rem; max-width: 62ch; }

.event {
  display: grid; grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px; align-items: start;
  border-top: 1px solid var(--line); padding: 18px 0;
}
.events .event:last-of-type { border-bottom: 1px solid var(--line); }

.date {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px; background: var(--bg-soft);
  text-align: center; padding: 7px 4px; font-family: var(--font-mono);
}
.date .dow { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.date .dd { display: block; font-size: 1.32rem; line-height: 1.2; color: var(--fg); }
.date .mon { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }

.event h3 { font-size: 1.04rem; }
.event .kind {
  display: inline-block; margin-left: 9px; vertical-align: 2px;
  font-family: var(--font-mono); font-size: 0.56rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; color: var(--film);
}
.event .where {
  margin: 6px 0 0; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted);
}
.event .where .tbc { color: var(--dim); }
.event .note { margin: 7px 0 0; color: var(--muted); font-size: 0.89rem; max-width: 60ch; }
.event .jump {
  display: inline-block; margin: 10px 0 0;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  text-decoration: none; transition: border-color var(--fast), color var(--fast);
}
.event .jump:hover { border-color: var(--film); color: var(--film); }
.event.past { opacity: 0.62; }
.event.past .date { border-color: var(--line); }
.event.past .date .dow { color: var(--dim); }

/* ---------- The reel ----------
   Sprocket holes down both edges and a scanline wash over the frame. Both are
   pseudo-elements on the frame, so the video element itself is untouched and
   full-screen playback is clean. */
.reel { margin: 14px 0 0; max-width: 620px; }
.frame {
  position: relative; border: 1px solid var(--line); border-radius: 8px;
  background: #000; padding: 0 11px; overflow: hidden;
}
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.45) 100%);
  mix-blend-mode: screen;
}
/* The perforations: one repeating gradient per edge, inside the 11px gutters. */
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, var(--dim) 0 7px, transparent 7px 17px) left  / 5px 100% repeat-y,
    repeating-linear-gradient(to bottom, var(--dim) 0 7px, transparent 7px 17px) right / 5px 100% repeat-y;
  opacity: 0.3;
}
/* max-height because a reel shot on a phone is portrait, and a portrait video
   at full width is taller than the screen: the controls end up below the fold
   and the listing above it scrolls away. contain, so the cap letterboxes
   rather than crops. */
.frame video, .frame img {
  display: block; width: 100%; height: auto; max-height: 72vh;
  object-fit: contain; background: #000;
}

/* A still or a poster from the film, in the same frame as a reel: same
   perforations, same scanlines, no controls. */
.still { margin: 22px 0 0; max-width: 620px; }
.reel figcaption {
  margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim);
}

/* No file yet. Drawn as a frame with nothing in it rather than hidden, because
   the reel is part of the listing and its absence is information. */
.reel-empty {
  display: flex; align-items: center; gap: 11px;
  border: 1px dashed var(--line); border-radius: 8px;
  background: var(--bg-soft); padding: 15px 17px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim);
}
.reel-empty svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 26px 0 34px; margin-top: 52px;
}
.footer-inner { display: flex; gap: 14px 24px; flex-wrap: wrap; align-items: baseline; }
.footer-inner a { color: var(--muted); text-decoration: none; }
.footer-inner a:hover { color: var(--film); }
.footer-note { width: 100%; margin: 10px 0 0; font-size: 0.79rem; color: var(--dim); max-width: 78ch; }
.footer-note code { font-family: var(--font-mono); font-size: 0.9em; }

@media (max-width: 620px) {
  .event { grid-template-columns: 54px minmax(0, 1fr); gap: 13px; }
  .body p:first-child::first-letter { font-size: 2.6rem; }
}

/* The split title and the sponsor glow are decoration; the scanlines over a
   playing video are not motion exactly, but they do flicker against moving
   pixels for anyone sensitive to it. All three come off together. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero h1 { text-shadow: none; }
  .frame::before { background: none; }
}