/* ==========================================================================
   The Shot List / Spider-Verse (2018 and 2023)
   Design system: "a comic printed on newsprint, cut into the multiverse"
   Newsprint and black ink, with cyan and magenta as process inks that only
   ever appear as misregistered plates, halftone screens and Ben-Day dots,
   never as flat fills. Process yellow is kept to the caption boxes' tint.
   Stills sit in comic panels with heavy gutters;
   page.js draws the effects that break their borders, art-a.js and
   art-b.js the big illustrations. One theme, no dark mode.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper: #f1ece0;
  --paper-2: #e8e1d1;
  --paper-3: #d9d0bc;
  --card: #f7f3ea;
  --ink: #15130f;
  --ink-2: #2f2b25;
  --ink-3: #5b554b;
  --rule: rgba(21, 19, 15, 0.22);
  --cyan: #1fa6c9;           /* plate only: offsets, screens, line */
  --magenta: #d93a6e;        /* plate only: offsets, screens, line */
  --yellow: #f0c419;         /* sparingly: caption tint */
  --cyan-ink: #0b6a84;       /* small text on paper */
  --magenta-ink: #a3234c;    /* small text on paper */

  --f-comic: "Bangers", Impact, "Arial Narrow Bold", "Arial Black", sans-serif;
  --f-letter: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
  --f-body: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-body: clamp(18px, 0.6vw + 15px, 21px);
  --measure: 64ch;
  --wide: 1080px;
  --sheet: 1280px;
  --gutter: 16px;
  --mast-h: 58px;
  --line: 5px;               /* panel border */

  /* misregistration, as text-shadow on ink type */
  --plates: -0.032em 0.02em 0 var(--cyan), 0.038em 0.04em 0 var(--magenta);
  /* newsprint: soft fibre mottling, transparent between */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .08 0 0 0 0 .06 0 0 0 -3.4 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --dots-k: radial-gradient(circle at 50% 50%, var(--ink) 0 30%, transparent 33%);
  --dots-c: radial-gradient(circle at 50% 50%, var(--cyan) 0 34%, transparent 37%);
  --dots-m: radial-gradient(circle at 50% 50%, var(--magenta) 0 34%, transparent 37%);
  --dots-y: radial-gradient(circle at 50% 50%, rgba(240, 196, 25, 0.9) 0 31%, transparent 34%);

  color-scheme: light;
}

@media (min-width: 720px) {
  :root { --gutter: clamp(24px, 4vw, 48px); --mast-h: 64px; --line: 6px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: 240px 240px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-optical-sizing: auto;
  line-height: 1.66;
  overflow-wrap: break-word;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
img, svg { max-width: 100%; }
cite { font-style: italic; }
strong { font-weight: 600; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--magenta);
  text-underline-offset: 0.18em;
}
a:hover { color: var(--magenta-ink); }

::selection { background: rgba(31, 166, 201, 0.32); color: var(--ink); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font: 600 13px/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Reading progress ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 4px;
  pointer-events: none;
}
.progress-bar {
  display: block;
  height: 100%;
  background: var(--ink);
  box-shadow: 0 2px 0 var(--magenta);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Masthead ---------- */
.masthead {
  position: relative;
  border-bottom: 3px solid var(--ink);
}
.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1.5px;
  background: var(--ink);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--sheet);
  height: var(--mast-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  position: relative;
  flex: none;
  width: 17px;
  height: 17px;
}
.brand-mark i {
  position: absolute;
  inset: 0;
}
.brand-mark i:nth-child(1) { background: var(--cyan); translate: -3px 2px; }
.brand-mark i:nth-child(2) { background: var(--magenta); translate: 3px 3px; mix-blend-mode: multiply; }
.brand-mark i:nth-child(3) { border: 3px solid var(--ink); }
.brand-name {
  font: 400 clamp(22px, 1.1vw + 17px, 29px)/1 var(--f-comic);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-top: 3px;
  text-shadow: -1px 0.5px 0 var(--cyan), 1.4px 1.4px 0 var(--magenta);
}
.masthead-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mm-kicker {
  padding: 4px 7px 3px;
  border: 1.5px solid var(--ink);
}
@media (max-width: 559px) {
  .mm-kicker { display: none; }
}

/* ---------- Draft notice ---------- */
.draft-bar {
  background: var(--ink);
  color: var(--paper);
  font: 500 13px/1.45 var(--f-mono);
}
.draft-inner {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 10px var(--gutter);
}

/* ---------- Hero ----------
   A full-screen cover set like the Across the Spider-Verse poster: a
   violet night at the top falling into a bright white glow, with the title
   in the glow. hero.js draws the title, THE SPIDER-VERSE, into a canvas:
   SPIDER-VERSE in drawn angular capitals with near-black faces, a red edge
   and a blue-violet block extrusion, the line bowed and rising to the
   right; THE and a glitched strapline of the two films' titles in small
   navy capitals. It moves the glow (--glow-a, --glow-b, --glow-y) to sit
   behind the title, glitches it every few seconds and lets small ink
   spiders crawl over it. The h1 stays in the page under the canvas;
   without script it is the lettered title itself. */
.hero {
  --f-hero: "Anton", "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --f-strap: "Big Shoulders Display", "Anton", Impact, "Arial Narrow", sans-serif;
  /* the poster's inks: violet night, black ink, Spider-Man red, one
     blue-violet (with its shade and tint), white */
  --night: #1b1244;
  --face: #150610;
  --face-hi: #2a0a17;
  --red: #e0222b;
  --red-ink: #b3141e;
  --blue: #4b40cf;
  --blue-dk: #2a1f78;
  --blue-lt: #a9a4f7;
  --navy: #1b1a52;
  --glow: #f6f4ff;
  --card: #fbfaff;
  --ink: #0c0820;
  --silk: #d9d0ff;
  --silk-dk: #3b3277;
  /* the page's tokens, recast in the same inks for anything in the cover */
  --paper: #f6f4ff;
  --paper-3: #e3dff3;
  --cyan: #4b40cf;
  --magenta: #e0222b;
  --yellow: #e0222b;
  --ink-2: #29235c;
  --ink-3: #4b4388;
  /* where the glow sits (and the height of the bloom behind the title); hero.js moves these to the title */
  --glow-a: 18%;
  --glow-b: 40%;
  --glow-y: 62%;
  --glow-ry: 24%;
  color: #17123d;
  background:
    radial-gradient(ellipse 72% var(--glow-ry) at 50% var(--glow-y), rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg,
      #110a2c 0,
      #1d1447 calc(var(--glow-a) * 0.6),
      #2b1e64 var(--glow-a),
      #5f52bd calc(var(--glow-a) * 0.6 + var(--glow-b) * 0.4),
      #c4bdf8 calc(var(--glow-a) * 0.22 + var(--glow-b) * 0.78),
      var(--glow) var(--glow-b),
      #f3f0ff 84%,
      #e7e2fb 100%);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--mast-h) - 3px);
  min-height: calc(100svh - var(--mast-h) - 3px);
  padding: 0 var(--gutter) clamp(26px, 4.4vh, 48px);
}
.hero-stage {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--sheet);
  min-height: clamp(250px, 46vh, 640px);
  margin: 0 auto;
  padding: clamp(30px, 6vh, 64px) 0 clamp(18px, 3.6vh, 40px);
}
/* the lettered title without script: near-black faces, a red edge, a
   stacked blue-violet extrusion, low in the stage where the glow is */
.hero-title {
  position: relative;
  align-self: flex-end;
  width: 100%;
  margin-bottom: 0.2em;
  font: 400 clamp(40px, 13.4vw, 184px)/0.92 var(--f-hero);
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--face);
  -webkit-text-stroke: 0.05em var(--red);
  paint-order: stroke fill;
  text-shadow:
    0.006em 0.022em 0 var(--blue-dk), 0.012em 0.044em 0 var(--blue-dk),
    0.018em 0.066em 0 var(--blue), 0.024em 0.088em 0 var(--blue), 0.03em 0.11em 0 var(--blue),
    0.036em 0.132em 0 var(--blue-lt), 0.04em 0.15em 0 var(--blue-lt);
}
.ht-the {
  display: block;
  width: max-content;
  margin: 0 0 0.16em 0.04em;
  padding: 0 0.6em 0.06em 0;
  font: 900 0.22em/1 var(--f-strap);
  letter-spacing: 0.16em;
  color: var(--navy);
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: linear-gradient(90deg, var(--navy), rgba(27, 26, 82, 0)) left bottom / 100% max(1px, 0.06em) no-repeat;
  rotate: 4deg;
}
.ht-main { display: block; white-space: nowrap; rotate: -1.5deg; }
/* once the canvas has the title, the h1 is read out but not shown */
.hero.hv-on .hero-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hv-canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}
/* the title sits on the glow as printed, so no multiply */
.hv-ink { z-index: 1; mix-blend-mode: normal; }
.hv-bugs { z-index: 4; }

.hero-foot {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 clamp(4px, 2.6vw, 40px);
}
.hero-sub {
  max-width: 34em;
  font: 500 clamp(1.16rem, 0.86rem + 1.2vw, 1.75rem)/1.28 var(--f-body);
  text-wrap: balance;
}
.hs-film { white-space: nowrap; }
.hs-year {
  font: 500 0.56em/1 var(--f-mono);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  vertical-align: 0.24em;
}
.hs-and { font-style: italic; color: var(--ink-3); }
@media (max-width: 479px) {
  .hs-film { white-space: normal; }
}
.hero-dek {
  max-width: 58ch;
  font-size: 1.02em;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font: 500 11.5px/1.3 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero-by { color: var(--red-ink); font-weight: 600; }
/* a swatch strip of the cover's inks, as on the trim of a printed sheet */
.colorbar {
  display: flex;
  justify-self: start;
  margin-top: 4px;
  border: 1.5px solid var(--ink);
}
.colorbar i {
  width: 14px;
  height: 14px;
  background-size: 4px 4px;
}
.colorbar i + i { border-left: 1.5px solid var(--ink); }
.colorbar i:nth-child(1) { background-color: var(--night); }
.colorbar i:nth-child(2) { background-color: var(--blue); }
.colorbar i:nth-child(3) { background-color: var(--red); }
.colorbar i:nth-child(4) { background-color: var(--face); }
.colorbar i:nth-child(5) { background-color: var(--card); background-image: radial-gradient(circle at 50% 50%, var(--blue) 0 34%, transparent 37%); }
.colorbar i:nth-child(6) { background-color: var(--card); background-image: radial-gradient(circle at 50% 50%, var(--red) 0 34%, transparent 37%); }
.colorbar i:nth-child(7) { background-color: var(--card); background-image: radial-gradient(circle at 50% 50%, var(--blue-lt) 0 36%, transparent 39%); }
.colorbar i:nth-child(8) { background-color: var(--card); background-image: radial-gradient(circle at 50% 50%, var(--ink) 0 30%, transparent 33%); }
/* wide: the subtitle and byline beside the dek, under a rule the swatch
   strip sits on, so the title can have the height */
@media (min-width: 1000px) {
  .hero-foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(36px, 5vw, 88px);
    row-gap: 12px;
    align-items: start;
    padding-top: 20px;
    border-top: 1.5px solid var(--navy);
  }
  .hero-sub { grid-column: 1; grid-row: 1; }
  .hero-meta { grid-column: 1; grid-row: 2; }
  .hero-dek { grid-column: 2; grid-row: 1 / span 2; max-width: 60ch; }
  .colorbar { position: absolute; right: 0; top: -8px; margin: 0; background: var(--paper); }
}

/* ---------- The flow grid ---------- */
.entry { overflow-x: clip; }
.flow {
  --wide-extra: calc((var(--wide) - var(--measure)) / 2);
  position: relative;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--wide-extra))
    [text-start] min(var(--measure), 100% - 2 * var(--gutter))
    [text-end] minmax(0, var(--wide-extra))
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.flow > * { grid-column: text; min-width: 0; }
.flow > * + * { margin-top: 1.15em; }

.chapter { scroll-margin-top: 24px; }
.chapter--intro { margin-top: clamp(3.25rem, 7vw, 5.5rem); }
.chapter + .chapter { margin-top: clamp(4.75rem, 9vw, 7.5rem); }

.flow > p {
  text-wrap: pretty;
  hanging-punctuation: first;
}
@media (max-width: 559px) {
  .flow > p { hyphens: auto; -webkit-hyphens: auto; }
}

.flow > :is(figure, aside, section, .panel-row) { margin-top: clamp(2.75rem, 6vw, 4rem); }
.flow > :is(figure, aside, section, .panel-row) + * { margin-top: clamp(2.75rem, 6vw, 4rem); }
/* a still that is not on the page leaves no gap behind it */
html:not(.show-placeholders) .flow > .is-missing + :not(figure, aside, section, .panel-row) { margin-top: 1.15em; }
html:not(.show-placeholders) .flow > .panel-row.is-empty + :not(figure, aside, section, .panel-row) { margin-top: 1.15em; }
.flow > .ch-title + * { margin-top: 1.25em; }
/* panels whose drawn effects rise above them get more air */
.flow > :is(.still[data-fx], .still[data-sfx], .panel-row) { margin-top: clamp(3.4rem, 7vw, 5rem); }

/* ---------- Chapter headings ---------- */
.ch-title {
  position: relative;
  isolation: isolate;
  padding-top: 26px;
  border-top: 5px solid var(--ink);
  font: 400 clamp(2.7rem, 1.85rem + 3.5vw, 4.9rem)/0.9 var(--f-comic);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.ch-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 1.5px;
  background: var(--ink);
}
/* a magenta dot screen, fading in behind the heading */
.ch-title::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: 22px;
  bottom: -6px;
  width: min(52%, 340px);
  background-image: var(--dots-m);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%);
  mask-image: linear-gradient(90deg, transparent, #000 75%);
  opacity: 0.4;
}
.ch-idx {
  position: absolute;
  top: -5px;
  right: 0;
  padding: 8px 10px 5px;
  background: var(--ink);
  color: var(--paper);
  font: 400 21px/1 var(--f-comic);
  letter-spacing: 0.08em;
}
.ch-idx::before {
  content: "No.";
  margin-right: 5px;
  font: 600 9.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  vertical-align: 0.4em;
  color: #cbc4b4;
}
.ch-text {
  display: block;
  padding-right: 4.2rem;
  text-shadow: var(--plates);
}

/* ---------- Drop cap ---------- */
.dropcap::first-letter {
  float: left;
  margin: 0.04em 0.1em 0 0;
  font-family: var(--f-comic);
  font-style: normal;
  font-weight: 400;
  font-size: 5.4em;
  line-height: 0.8;
  color: var(--ink);
  text-shadow: -0.035em 0.022em 0 var(--cyan), 0.042em 0.042em 0 var(--magenta);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .dropcap::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0.12em 0 0;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

/* ---------- Caption boxes ---------- */
.cbox-in {
  display: inline-block;
  padding: 0.55em 0.85em 0.48em;
  border: 2.5px solid var(--ink);
  background-color: var(--card);
  background-image: var(--dots-y);
  background-size: 5px 5px;
  box-shadow: 4px 4px 0 var(--ink);
  font: 700 0.8em/1.32 var(--f-letter);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.flow > .cbox {
  justify-self: start;
  max-width: 100%;
}
.flow > .ch-title + .cbox { margin-top: 1.6em; }
.flow > .cbox + p { margin-top: 1.35em; }
.cbox--1 { rotate: -1.4deg; }
.cbox--2 { rotate: 0.9deg; }
.cbox--3 { rotate: -0.6deg; }
@media (min-width: 1100px) {
  .flow > .cbox { margin-left: -2.2rem; }
}

/* ---------- Sidenotes ---------- */
.sn { white-space: normal; }
.sn-ref {
  position: relative;
  top: -0.45em;
  margin: 0 0.02em 0 0.08em;
  padding: 0.12em 0.32em 0.08em;
  border: 0;
  border-radius: 1px;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.58em/1 var(--f-mono);
  cursor: pointer;
  vertical-align: baseline;
  box-shadow: 1.5px 1.5px 0 var(--magenta);
  transition: background-color 160ms ease, color 160ms ease;
}
.sn-ref::after {
  content: "";
  position: absolute;
  inset: -10px -7px;
}
.sn-ref:hover,
:root:not(.sn-margin) .sn-ref[aria-expanded="true"],
.sn.is-hot .sn-ref { background: var(--magenta-ink); color: var(--paper); }

.sn-note {
  display: none;
  font-size: 0.8em;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
  hyphens: manual;
}
.sn-num {
  margin-right: 0.6em;
  font: 600 0.82em/1 var(--f-mono);
  color: var(--magenta-ink);
}

/* inline (narrow) mode: tap to expand */
.no-js .sn-note,
.sn.is-open .sn-note {
  display: block;
  margin: 0.85em 0 0.95em;
  padding: 0.15em 0 0.15em 1.05em;
  border-left: 3px solid var(--ink);
  box-shadow: -3px 0 0 var(--cyan);
  color: var(--ink-2);
}

/* margin mode (wide screens), positioned by page.js */
.sn-margin .sn-note {
  display: block;
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid var(--rule);
  font-size: 0.74em;
  line-height: 1.5;
  transition: color 200ms ease, border-color 200ms ease;
}
.sn-margin .sn.sn-inline .sn-note {
  position: static;
  width: auto;
  margin: 0.85em 0 0.95em;
  padding: 0.15em 0 0.15em 1.05em;
  border-left: 3px solid var(--ink);
  box-shadow: -3px 0 0 var(--cyan);
  font-size: 0.8em;
  line-height: 1.55;
  color: var(--ink-2);
}
.sn-margin .sn.is-hot .sn-note { color: var(--ink); border-left-color: var(--magenta); }

/* ---------- Panels (stills) ----------
   Each still is a comic panel: an outline (an SVG polygon, so a gutter can
   lean) over a frame clipped to the same shape. Two stills in a row share
   a tier with one slanted gutter; on phones they stack. */
.flow > .still,
.flow > .panel-row { grid-column: wide; }
.flow > .panel--splash {
  grid-column: full;
  justify-self: center;
  width: min(100% - 2 * var(--gutter), 1240px);
}
.still { container-type: inline-size; }
.panel-box {
  position: relative;
  isolation: isolate;
  rotate: var(--tilt, 0deg);
}
.panel-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--paper-2);
  clip-path: var(--clip-n);
}
@media (min-width: 720px) {
  .panel-frame { aspect-ratio: 2.39 / 1; clip-path: var(--clip-w); }
}
.panel-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}
/* a light dot screen and grain over every printed still */
.panel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grain), var(--dots-k);
  background-size: 240px 240px, 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.still.is-loaded .panel-frame img { opacity: 1; }
.still.is-loaded .panel-frame::after { opacity: 0.14; }
.still.is-loaded .ph { visibility: hidden; }

.panel-line {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.panel-line polygon {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--line);
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.pl-w,
.pl-r { display: none; }
@media (min-width: 720px) {
  .pl-n { display: none; }
  .pl-w { display: inline; }
}

/* a tier of two */
.panel-row { position: relative; --pg: 18px; }
.panel-row > .still + .still { margin-top: 30px; }
@media (min-width: 720px) {
  .panel-row {
    --pg: clamp(18px, 2vw, 26px);
    display: flex;
    align-items: flex-start;
  }
  .panel-row > .still {
    flex: none;
    width: calc((100% - var(--pg)) / 1.92);
  }
  /* the second panel tucks under the first's slant, so the gutter is even */
  .panel-row > .still + .still {
    margin-top: 0;
    margin-left: calc(var(--pg) - (100% - var(--pg)) * 0.0416667);
  }
  .panel-row .panel-frame { aspect-ratio: 16 / 10; }
  .panel-row > .still:first-child figcaption { padding-right: 9%; }
  .panel-row--back > .still + .still figcaption { padding-left: 8%; }
}
/* published, with one of the pair missing: the other takes the tier */
.panel-row.is-broken .panel-frame { clip-path: none; }
.panel-row.is-broken :is(.pl-w, .pl-n) { display: none; }
.panel-row.is-broken .pl-r { display: inline; }
.panel-row.is-broken .row-badge { display: none; }
html:not(.show-placeholders) .panel-row.is-empty { display: none; }
@media (min-width: 720px) {
  .panel-row.is-broken > .still { width: 100%; margin-left: 0; }
  .panel-row.is-broken .panel-frame { aspect-ratio: 2.39 / 1; }
  .panel-row.is-broken > .still figcaption { padding: 0; }
}

/* lettered across the shared gutter */
.row-badge {
  position: absolute;
  z-index: 6;
  right: 10px;
  top: -18px;
  rotate: 4deg;
  pointer-events: none;
}
@media (min-width: 720px) {
  .row-badge {
    right: auto;
    top: 0;
    left: calc((100% - var(--pg)) / 1.92 * 0.96 + var(--pg) / 2);
    margin-top: calc((100% - var(--pg)) / 1.92 / 1.6 / 2);
    translate: -50% -50%;
    rotate: -7deg;
  }
}
.rb-in {
  display: block;
  padding: 7px 12px 4px;
  border: 3px solid var(--ink);
  background: var(--card);
  box-shadow: -4px 3px 0 var(--cyan), 4px 4px 0 var(--magenta);
  font: 400 clamp(22px, 1.6vw + 12px, 34px)/1 var(--f-comic);
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* placeholder panel (draft): screens of three inks, the still's number and
   the scene to grab */
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: clamp(10px, 3.2cqi, 26px);
  background: var(--paper-2);
}
.ph::before,
.ph::after,
.ph-dots {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ph-dots {
  background-image: var(--dots-k);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(ellipse 80% 95% at 74% 38%, transparent 22%, #000 96%);
  mask-image: radial-gradient(ellipse 80% 95% at 74% 38%, transparent 22%, #000 96%);
  opacity: 0.4;
}
.ph::before {
  background-image: var(--dots-c);
  background-size: 10px 10px;
  background-position: 2px 1px;
  -webkit-mask-image: linear-gradient(168deg, #000 8%, transparent 62%);
  mask-image: linear-gradient(168deg, #000 8%, transparent 62%);
  mix-blend-mode: multiply;
  opacity: 0.7;
}
.ph::after {
  background-image: var(--dots-m);
  background-size: 9px 9px;
  background-position: 5px 4px;
  -webkit-mask-image: linear-gradient(-16deg, #000 4%, transparent 52%);
  mask-image: linear-gradient(-16deg, #000 4%, transparent 52%);
  mix-blend-mode: multiply;
  opacity: 0.6;
}
.still[data-film="across"] .ph::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 24% 70%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 24% 70%, #000 10%, transparent 70%);
}
.still[data-film="across"] .ph::after {
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 82% 24%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 70% at 82% 24%, #000 10%, transparent 72%);
}
.ph-no {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font: 400 clamp(38px, 12cqi, 116px)/0.8 var(--f-comic);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-shadow: -0.035em 0.022em 0 var(--cyan), 0.042em 0.042em 0 var(--magenta);
}
.ph-body {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: min(100%, 62ch);
  padding: 8px 11px 9px;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
}
.panel-row .ph-body { max-width: 88%; }
@media (min-width: 720px) {
  .panel-row > .still + .still .ph { padding-left: calc(8% + clamp(10px, 3.2cqi, 26px)); }
}
@media (max-width: 719px) {
  .panel-row--fwd > .still + .still .ph { padding-top: calc(5% + 12px); }
  .panel-row--back > .still:first-child .ph { padding-bottom: calc(5% + 12px); }
}
.ph-when {
  font: 600 10.5px/1.2 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta-ink);
}
.ph-sep { color: var(--ink-3); }
.ph-desc {
  font: 700 clamp(12.5px, 1.4cqi + 8px, 15px)/1.34 var(--f-letter);
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.ph-file {
  font: 500 10.5px/1.2 var(--f-mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
@container (max-width: 560px) {
  .ph-desc { -webkit-line-clamp: 3; }
  .ph-body { padding: 6px 9px 7px; gap: 3px; }
}
@container (max-width: 420px) {
  .ph-desc { -webkit-line-clamp: 2; }
  .ph-no { font-size: 34px; }
}

/* captions under panels and plates */
:is(.still, .universe, .art, .widget) figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 68ch;
  margin-top: 14px;
  font-size: 0.84em;
  line-height: 1.5;
  color: var(--ink-2);
}
/* a tilted panel drops one bottom corner by up to half its width x sin(tilt),
   so its caption sits a little lower to stay clear of the border */
.still[style*="--tilt"] figcaption { margin-top: calc(14px + 1.2cqi); }
.panel-tag {
  flex: none;
  display: inline-flex;
  position: relative;
  top: -0.12em;
  font: 600 10.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pt-film { padding: 4px 6px 3px; background: var(--ink); color: var(--paper); }
.pt-no { padding: 2.5px 6px 1.5px; border: 1.5px solid var(--ink); color: var(--ink); }
.plate-tag {
  flex: none;
  position: relative;
  top: -0.12em;
  padding: 4px 7px 3px;
  background: var(--ink);
  color: var(--paper);
  font: 600 10.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cap { font-style: italic; text-wrap: pretty; }

/* probing: undrawn until its file is known; when not a draft, a still with
   no file is left off the page entirely */
html.stills-probing:not(.show-placeholders) .still:not(.is-found):not(.is-missing) { visibility: hidden; }
html:not(.show-placeholders) .still.is-missing { display: none; }
.no-js .panel-frame img { display: none; }

/* ---------- Panel effects (drawn by page.js) ---------- */
.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fx {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.fx > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx :is(.a-pop, .a-fly, .a-open, .a-fade, .a-bleed, .a-spin, .a-grow-y, .a-grow-x, .a-grow-x-r, .a-fall) {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.fx .a-grow-y { transform-origin: 50% 0; }
.fx .a-grow-x { transform-origin: 100% 50%; }
.fx .a-grow-x-r { transform-origin: 100% 50%; }
.fx .a-draw { stroke-dasharray: 1 1; }

/* onomatopoeia */
.fx--sfx { width: clamp(104px, 22%, 230px); }
.sfx--tr { right: 0; top: 0; translate: 14% -46%; rotate: -8deg; }
.sfx--tl { left: 0; top: 0; translate: -10% -62%; rotate: -7deg; }
.sfx--web { left: 66%; top: 0; translate: -104% -60%; rotate: -10deg; }
.sfx--krak { right: 0; top: 0; width: clamp(136px, 29%, 300px); translate: 12% -40%; rotate: 7deg; }
@media (min-width: 720px) {
  .sfx--tr { translate: 22% -46%; }
  .sfx--tl { translate: -34% -66%; }
  .sfx--krak { translate: 22% -42%; }
}
.sx text { font-family: var(--f-comic); }
.sx-c { fill: var(--cyan); stroke: var(--cyan); stroke-width: 10px; stroke-linejoin: round; }
.sx-m { fill: var(--magenta); stroke: var(--magenta); stroke-width: 10px; stroke-linejoin: round; }
.sx-o { fill: var(--ink); stroke: var(--ink); stroke-width: 10px; stroke-linejoin: round; }
.sx-k { fill: var(--card); }

/* web lines */
.fx :is(.w-k, .w-k2, .w-c) { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fx .w-k { stroke: var(--ink); stroke-width: 2.4px; }
.fx .w-k2 { stroke: var(--ink); stroke-width: 1px; }
.fx .w-c { stroke: var(--cyan); stroke-width: 2px; }
.fx--web { left: 66%; top: 0; width: 34px; height: calc(38px + 48%); translate: -50% -38px; }
.fx--splat { left: calc(66% + 6px); top: 48%; width: 58px; translate: -50% -50%; }
.splat-k path { fill: none; stroke: var(--ink); stroke-width: 1.8px; stroke-linecap: round; }
.splat-c path { fill: none; stroke: var(--cyan); stroke-width: 1.8px; stroke-linecap: round; }
.fx--hang { left: 38%; top: 0; width: 18px; height: calc(38px + 36%); translate: -50% -38px; }
.fx--knot { left: 38%; top: 36%; width: 30px; translate: -50% -50%; }
.fx--webs { right: 0; top: 12%; width: clamp(150px, 46%, 520px); height: 66%; translate: 10% 0; }

/* glass, holes, spray */
.fx--shards { left: 0; top: 0; width: clamp(150px, 27%, 320px); translate: -12% -25%; }
.fx--shards .cracks path { fill: none; stroke: var(--ink); stroke-width: 1.6px; stroke-linecap: round; }
.fx--holes { right: 0; top: 14%; width: clamp(88px, 19%, 210px); translate: 22% 0; }
@media (min-width: 720px) {
  .fx--shards { translate: -15% -25%; }
  .fx--holes { translate: 38% 0; }
}
.fx--drips { left: 4%; top: 0; width: clamp(130px, 36%, 330px); translate: 0 -30.6%; }
.fx--spray { right: 4%; top: 0; width: clamp(130px, 34%, 320px); translate: 0 -30.6%; }
.spray-k circle { fill: var(--ink); }
.spray-m circle { fill: var(--magenta); opacity: 0.85; }
.drips-k path { fill: none; stroke: var(--ink); stroke-linecap: round; }
.drips-k circle { fill: var(--ink); }
.drips-m path { fill: none; stroke: var(--magenta); stroke-linecap: round; }
.drips-m circle { fill: var(--magenta); }

/* speed and rain */
.fx--speed { left: 0; top: 16%; width: clamp(150px, 40%, 460px); height: 60%; translate: -18% 0; }
@media (min-width: 720px) {
  .fx--speed { translate: -30% 0; }
}
.fx :is(.rn-k, .rn-c) { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fx .sp-k { fill: var(--ink); }
.fx .sp-c { fill: var(--cyan); }
.fx--rain {
  left: 0;
  right: 0;
  top: 0;
  height: calc(34px + 30%);
  translate: 0 -34px;
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
}
.fx .rn-k { stroke: var(--ink); stroke-width: 1.2px; }
.fx .rn-c { stroke: var(--cyan); stroke-width: 1.5px; }
.fx :is(.sf-k, .sf-c, .sf-m) { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-width: 3.2px; }
.fx .sf-big { stroke-width: 5px; }
.fx .sf-k { stroke: var(--ink); }
.fx .sf-c { stroke: var(--cyan); }
.fx .sf-m { stroke: var(--magenta); }

/* sketch and wash */
.fx--sketch { right: 0; top: 0; width: clamp(140px, 32%, 340px); translate: 14% -30%; }
@media (min-width: 720px) {
  .fx--sketch { translate: 22% -30%; }
}
.fx .sk-c { fill: none; stroke: var(--cyan); stroke-width: 1.3px; stroke-linecap: round; }
.fx .sk-k { fill: none; stroke: var(--ink); stroke-width: 1.2px; stroke-linecap: round; }
.fx .sk-t { font: 500 11px var(--f-mono); fill: var(--cyan-ink); letter-spacing: 0.1em; }
.fx--wash { right: 0; top: 0; width: clamp(130px, 30%, 320px); translate: 16% -32%; mix-blend-mode: multiply; }
.fx--wash-l { right: auto; left: 0; translate: -16% -32%; }
@media (min-width: 720px) {
  .fx--wash { translate: 26% -32%; }
  .fx--wash-l { translate: -26% -32%; }
}

/* misregistered plates of the panel itself */
.fx--echo { inset: 0; z-index: -1; }
.fx--echo span { position: absolute; inset: 0; border: 3px solid var(--cyan); }
.fx--echo .ec-c { translate: -10px -9px; }
.fx--echo .ec-m { border-color: var(--magenta); translate: 10px 10px; }

/* Ben-Day burst and Kirby dots */
.fx--burst { right: 0; top: 0; z-index: -1; width: clamp(110px, 32%, 250px); translate: 26% -36%; }
.bd-c circle { fill: var(--cyan); }
.bd-m circle { fill: var(--magenta); }
.fx--burst svg { mix-blend-mode: multiply; }
.fx--krackle { left: 0; top: 0; width: clamp(130px, 30%, 300px); translate: -12% -30%; }
@media (min-width: 720px) {
  .fx--krackle { translate: -20% -30%; }
}

/* rosettes, tape, crop marks */
.fx--orn { top: 0; width: clamp(56px, 12%, 128px); }
.fx--orn-l { left: 0; translate: -30% -50%; }
.fx--orn-r { right: 0; translate: 30% -50%; }
@media (min-width: 720px) {
  .fx--orn-l { translate: -50% -50%; }
  .fx--orn-r { translate: 50% -50%; }
}
.ro-petals path { fill: var(--card); stroke: var(--ink); stroke-width: 2.2px; stroke-linejoin: round; }
.fx--tape { top: 0; width: clamp(64px, 15%, 130px); height: clamp(20px, 2.6vw, 30px); }
.fx--tape-l { left: 0; translate: -22% -20%; rotate: -32deg; }
.fx--tape-r { right: 0; translate: 22% -20%; rotate: 30deg; }
.fx--tape span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(210, 199, 172, 0.84);
  background-image: var(--grain);
  background-size: 120px 120px;
  box-shadow: 0 1px 1px rgba(21, 19, 15, 0.14);
  clip-path: polygon(0 10%, 4% 0, 8% 12%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 12%, 100% 90%, 96% 100%, 92% 88%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 88%);
}
.fx--staple { left: 50%; top: 0; width: 46px; translate: -50% -42%; }
.fx--staple span { display: block; }
.fx--crop { width: 14px; height: 14px; }
.fx--crop path { fill: none; stroke: var(--ink); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.fx--crop-tl { left: 0; top: 0; translate: -100% -100%; }
.fx--crop-tr { right: 0; top: 0; translate: 100% -100%; scale: -1 1; }
.fx--crop-bl { left: 0; top: 100%; translate: -100% 0; }
.fx--crop-br { right: 0; top: 100%; translate: 100% 0; scale: -1 1; }
@media (min-width: 720px) {
  .fx--crop { width: 26px; height: 26px; }
}
.fx--reg { left: 50%; top: 0; width: 30px; translate: -50% -135%; }
.fx--reg :is(circle, path) { fill: none; stroke-width: 1.3px; }
.rg-c :is(circle, path) { stroke: var(--cyan); }
.rg-m :is(circle, path) { stroke: var(--magenta); }
.rg-k :is(circle, path) { stroke: var(--ink); }

/* ---------- Universe plates (drawn by art-a.js) ----------
   Each world gets its own frame and lettering, in the same inks. */
.flow > .universe { grid-column: wide; }
.uni-head {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 16px;
}
.uni-count {
  flex-basis: 100%;
  font: 600 10.5px/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.uni-name {
  position: relative;
  font: 400 clamp(2.3rem, 1.6rem + 3vw, 4.3rem)/0.9 var(--f-comic);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: var(--plates);
}
.uni-sub {
  font: italic 400 1.02em/1.3 var(--f-body);
  color: var(--ink-2);
}
.art-canvas { position: relative; width: 100%; }
:where(.art-canvas) > :where(svg, canvas) {
  display: block;
  width: 100%;
  height: auto;
}
/* the plate's own panel: art-a.js draws into it at 3 : 2 */
.universe > .art-canvas {
  aspect-ratio: 3 / 2;
  border: var(--line) solid var(--ink);
  background-color: var(--paper-2);
}
.universe > .art-canvas:empty,
.art:has(> .art-canvas:empty)::before,
.widget--twos:has(> .twos:empty)::before {
  background-image: var(--dots-k), linear-gradient(var(--paper-2), var(--paper-2));
  background-size: 8px 8px, auto;
}
/* art-b.js plates size themselves; until they are drawn the panel is a
   dot field (made by the figure, so the empty box itself stays 0 high) */
.art > .art-canvas {
  border: var(--line) solid var(--ink);
  background-color: var(--paper-2);
}
.art > .art-canvas:empty { border-top: 0; }
.art:has(> .art-canvas:empty)::before,
.widget--twos:has(> .twos:empty)::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 9;
  border: var(--line) solid var(--ink);
  border-bottom: 0;
}
.widget--twos:has(> .twos:empty)::before { border-bottom: var(--line) solid var(--ink); }

/* Earth-1610: halftone and graffiti, plates out of register */
.universe[data-universe="earth1610"] > .art-canvas {
  box-shadow: -8px -7px 0 -2px var(--cyan), 8px 8px 0 -2px var(--magenta);
}
.universe[data-universe="earth1610"] .uni-name::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4%;
  right: -10%;
  bottom: -0.16em;
  height: 0.42em;
  background-image: var(--dots-m);
  background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 72%);
  opacity: 0.8;
}

/* Earth-65: a wash behind the name, the plate set in a paper mount */
.universe[data-universe="earth65"] .uni-name {
  font: italic 500 clamp(2.5rem, 1.7rem + 3.2vw, 4.6rem)/0.95 var(--f-body);
  letter-spacing: -0.01em;
  text-transform: none;
  text-shadow: none;
}
.universe[data-universe="earth65"] .uni-name::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% -18% -14% -12%;
  background:
    radial-gradient(ellipse 52% 60% at 34% 58%, rgba(31, 166, 201, 0.42), transparent 70%),
    radial-gradient(ellipse 46% 56% at 72% 42%, rgba(217, 58, 110, 0.34), transparent 70%);
  filter: blur(5px);
}
.universe[data-universe="earth65"] > .art-canvas {
  border-width: 3px;
  box-shadow: 0 0 0 9px var(--card), 0 0 0 10.5px rgba(21, 19, 15, 0.45);
}

/* Mumbattan: a printed cartouche and a double rule */
.universe[data-universe="mumbattan"] .uni-name {
  padding: 0.14em 0.75em 0.04em;
  background: var(--ink);
  color: var(--card);
  text-shadow: 0.04em 0.04em 0 var(--magenta);
  clip-path: polygon(0 50%, 0.42em 0, calc(100% - 0.42em) 0, 100% 50%, calc(100% - 0.42em) 100%, 0.42em 100%);
}
.universe[data-universe="mumbattan"] .uni-sub {
  font: 600 11px/1 var(--f-mono);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.universe[data-universe="mumbattan"] > .art-canvas {
  border: 8px double var(--ink);
  outline: 2px dotted var(--ink);
  outline-offset: 5px;
}

/* Earth-138: a name cut from magazines, the plate taped down */
.universe[data-universe="earth138"] .uni-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.5rem);
  text-shadow: none;
}
.rn {
  display: inline-block;
  rotate: var(--r, 0deg);
  padding: 0.08em 0.16em 0.02em;
  line-height: 1;
  box-shadow: 1px 1.5px 0 rgba(21, 19, 15, 0.3);
}
.rn1 { font: 400 1em/1 var(--f-comic); background: var(--ink); color: var(--card); }
.rn2 { font: italic 600 0.92em/1 var(--f-body); background: var(--paper-3); color: var(--ink); }
.rn3 { font: 600 0.74em/1.1 var(--f-mono); background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); }
.rn4 { font: 700 0.84em/1.1 var(--f-letter); background-color: var(--card); background-image: var(--dots-m); background-size: 5px 5px; color: var(--ink); }
.rn5 { font: 400 1.06em/1 var(--f-comic); background-color: #cfc7b5; background-image: var(--grain); background-size: 90px 90px; color: var(--ink); }
.rn-gap { display: inline-block; width: 0.28em; }
.universe[data-universe="earth138"] > .art-canvas { rotate: -0.5deg; }
.universe[data-universe="earth138"] > .art-canvas::before,
.universe[data-universe="earth138"] > .art-canvas::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -14px;
  width: clamp(64px, 12vw, 120px);
  height: 26px;
  background-color: rgba(210, 199, 172, 0.84);
  background-image: var(--grain);
  background-size: 120px 120px;
  clip-path: polygon(0 10%, 4% 0, 8% 12%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 12%, 100% 90%, 96% 100%, 92% 88%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 88%);
  pointer-events: none;
}
.universe[data-universe="earth138"] > .art-canvas::before { left: 14px; rotate: -5deg; }
.universe[data-universe="earth138"] > .art-canvas::after { right: 18px; rotate: 4deg; }

/* Nueva York: clean technical line, a gradient screen and crop marks */
.universe[data-universe="nueva2099"] .uni-name {
  font: 500 clamp(1.45rem, 0.95rem + 2.3vw, 2.8rem)/1.05 var(--f-mono);
  letter-spacing: 0.3em;
  text-shadow: none;
}
.universe[data-universe="nueva2099"] .uni-sub {
  font: 500 11px/1 var(--f-mono);
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-ink);
}
.universe[data-universe="nueva2099"] .uni-head::after {
  content: "";
  flex-basis: 100%;
  height: 9px;
  background-image: var(--dots-k);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 88%);
  mask-image: linear-gradient(90deg, #000, transparent 88%);
}
.universe[data-universe="nueva2099"] > .art-canvas { border-width: 2px; }
.universe[data-universe="nueva2099"] > .art-canvas::before {
  content: "";
  position: absolute;
  inset: -14px;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left 0 top 13px / 9px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 13px top 0 / 1px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 0 top 13px / 9px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 13px top 0 / 1px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 0 bottom 13px / 9px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 13px bottom 0 / 1px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 0 bottom 13px / 9px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 13px bottom 0 / 1px 9px no-repeat;
}
@media (min-width: 720px) {
  .universe[data-universe="nueva2099"] > .art-canvas::before {
    inset: -22px;
    background:
      linear-gradient(var(--ink), var(--ink)) left 0 top 21px / 15px 1px no-repeat,
      linear-gradient(var(--ink), var(--ink)) left 21px top 0 / 1px 15px no-repeat,
      linear-gradient(var(--ink), var(--ink)) right 0 top 21px / 15px 1px no-repeat,
      linear-gradient(var(--ink), var(--ink)) right 21px top 0 / 1px 15px no-repeat,
      linear-gradient(var(--ink), var(--ink)) left 0 bottom 21px / 15px 1px no-repeat,
      linear-gradient(var(--ink), var(--ink)) left 21px bottom 0 / 1px 15px no-repeat,
      linear-gradient(var(--ink), var(--ink)) right 0 bottom 21px / 15px 1px no-repeat,
      linear-gradient(var(--ink), var(--ink)) right 21px bottom 0 / 1px 15px no-repeat;
  }
}

/* ---------- Plates and interactives (art-a.js, art-b.js) ---------- */
.flow > .art,
.flow > .widget {
  grid-column: wide;
  justify-self: center;
  width: 100%;
  max-width: 940px;
}
.twos,
.spot,
.signoff { position: relative; width: 100%; }
/* art-a.js fills the Spot's box, cover-cropped, at its own 3 : 2 */
.spot { aspect-ratio: 3 / 2; }
.spot:empty {
  border: var(--line) solid var(--ink);
  background-color: var(--card);
  background-image: var(--dots-k);
  background-size: 9px 9px;
}

/* ---------- Sign-off (art-b.js) ---------- */
.signoff-sec {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: clamp(4.5rem, 10vw, 7.5rem) auto 0;
  padding: 0 var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}
/* until art-b.js has drawn it (or if it never does), the name is lettered
   plainly, by the section, so the empty mount itself stays 0 high */
.signoff-sec:has(> .signoff:empty)::before {
  content: "REZA";
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  font: 400 clamp(84px, 22vw, 240px)/0.8 var(--f-comic);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: -0.035em 0.022em 0 var(--cyan), 0.042em 0.042em 0 var(--magenta);
}
.signoff-line {
  margin-top: 18px;
  font: 500 11.5px/1 var(--f-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
}
.footer-inner {
  display: grid;
  gap: 18px;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 34px var(--gutter) calc(34px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
  }
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .brand-mark i:nth-child(2) { mix-blend-mode: normal; }
.footer-brand .brand-mark i:nth-child(3) { border-color: var(--paper); }
.footer-name {
  font: 400 24px/1 var(--f-comic);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-top: 3px;
}
.colophon {
  max-width: 64ch;
  font: 400 13px/1.55 var(--f-mono);
  color: #c9c3b7;
}
.back-top {
  justify-self: start;
  font: 600 12px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--magenta);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  padding: 8px 0;
}
.back-top:hover { color: #fff; }
.back-top:focus-visible { outline-color: var(--paper); }

/* ---------- Motion ----------
   Panel effects play once, the first time their panel is seen (page.js
   sets html.fx-anim only when motion is welcome). Nothing here touches
   body text. */
@media (prefers-reduced-motion: no-preference) {
  html.fx-anim :is(.still, .panel-row):not(.is-seen) .fx :is(.a-pop, .a-fly, .a-open, .a-fade, .a-bleed, .a-slap, .a-spin, .a-fall) { opacity: 0; }
  html.fx-anim .still:not(.is-seen) .fx .a-grow-y { transform: scaleY(0); }
  html.fx-anim .still:not(.is-seen) .fx :is(.a-grow-x, .a-grow-x-r) { transform: scaleX(0); }
  html.fx-anim .still:not(.is-seen) .fx .a-draw { stroke-dashoffset: 1; }
  html.fx-anim .still:not(.is-seen) .fx--echo span { opacity: 0; }
  html.fx-anim .panel-row:not(.is-seen) .row-badge { opacity: 0; }

  html.fx-anim .is-seen .fx .a-pop { animation: fx-pop 560ms cubic-bezier(0.2, 1.45, 0.4, 1) var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-open { animation: fx-open 520ms cubic-bezier(0.25, 1.3, 0.45, 1) var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-fly { animation: fx-fly 680ms cubic-bezier(0.2, 0.9, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-fade { animation: fx-fade 700ms ease-out var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-bleed { animation: fx-bleed 1300ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-slap { animation: fx-slap 380ms cubic-bezier(0.3, 1.4, 0.5, 1) var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-spin { animation: fx-spin 900ms cubic-bezier(0.2, 0.9, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-fall { animation: fx-fall 900ms ease-out var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-grow-y { animation: fx-grow-y 520ms cubic-bezier(0.3, 0.8, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx :is(.a-grow-x, .a-grow-x-r) { animation: fx-grow-x 460ms cubic-bezier(0.3, 0.8, 0.3, 1) var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx .a-draw { animation: fx-draw 760ms ease-out var(--d, 0ms) both; }
  html.fx-anim .is-seen .fx--echo span { animation: fx-drift 1000ms cubic-bezier(0.3, 0.8, 0.3, 1) 120ms both; }
  html.fx-anim .panel-row.is-seen .row-badge { animation: fx-pop 560ms cubic-bezier(0.2, 1.45, 0.4, 1) 350ms both; }
}
@keyframes fx-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-14deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fx-open {
  from { opacity: 0; transform: scale(0.05); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-fly {
  from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.3) rotate(var(--tr, 0deg)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fx-bleed {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-slap {
  from { opacity: 0; transform: scale(1.4) rotate(var(--sr, 6deg)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-spin {
  from { opacity: 0; transform: scale(0.4) rotate(-120deg); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-fall {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-grow-y {
  from { transform: scaleY(0); }
  to { transform: none; }
}
@keyframes fx-grow-x {
  from { transform: scaleX(0); }
  to { transform: none; }
}
@keyframes fx-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes fx-drift {
  from { opacity: 0; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-frame img,
  .panel-frame::after { transition: none; }
  .sn-ref { transition: none; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; font-size: 11.5pt; }
  .progress, .skip-link, .draft-bar, .back-top, .fx, .hv-canvas, .signoff { display: none; }
  .hero { min-height: 0; }
  .hero.hv-on .hero-title { position: relative; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .sn-note { display: block; }
}