/* ════════════════════════════════════════════════════════════════════════
   THE ROTOGRAVURE — the Dispatch's picture desk (pictures.html only).
   Layered on dispatch.css; adds nothing to any other page.

   The rest of the edition is a newspaper: type first, pictures inserted.
   This section is a reel. It opens on a title card, not a headline; the
   photo essays run on an ink plate; the video work is filed on slates with
   a clapper stripe; the craft counts down like academy leader. None of the
   homepage's flag/notice/ledger modules are reused — a picture desk that
   borrows the front page's furniture just reads as the front page again.
   ════════════════════════════════════════════════════════════════════════ */

.page-pictures {
  --disp: "Fraunces", "Newsreader", Georgia, "Times New Roman", serif;
  --plate: 1560px;         /* pictures print to a wider measure than text */
  --plate-ink: #17110B;
  --plate-ink-deep: #0F0A06;
  --rg-cream: #F7EDDE;
  --rg-cream-soft: #D0C1AE;
  --rg-cream-mute: #AFA08D;
  --rg-rule: #463527;
  --rg-rule-soft: rgba(229, 204, 161, 0.20);
  --rg-orange: #E08A52;
  --rg-orange-light: #F0A06F;
  --rg-modal: #0D0904;
  --rg-modal-backdrop: rgba(8, 5, 3, 0.94);
  --rg-modal-shadow: rgba(0, 0, 0, 0.72);
  --rg-scrim-top: rgba(15, 10, 6, 0.62);
  --rg-scrim-air: rgba(15, 10, 6, 0.24);
  --rg-scrim-mid: rgba(15, 10, 6, 0.70);
  --rg-scrim-base: rgba(15, 10, 6, 0.93);
  --rg-title-shadow: rgba(15, 10, 6, 0.92);
  --rg-title-shadow-tight: rgba(15, 10, 6, 0.70);
  --rg-control-wash: rgba(224, 138, 82, 0.14);
  --rg-type-micro: 10px;
  --rg-type-control: 11px;
  --rg-hover-scale: 1.012;
  --rg-interaction-glow: 12%;
  --rg-gold: #E6C25B;
  --rg-rose: #F58AA8;
  --rg-violet: #9B85F5;
  --rg-blue: #66B8FF;
  --rg-ember: #F28B3F;
  --rg-red: #D95E43;
  --rg-ochre: #D7A45C;
  --rg-sun: #E7C775;
  --rg-olive: #A6AD70;
  --rg-indigo: #7B8FE8;
  --rg-film-cinestill: #F06E58;
  --rg-film-ektar: #79B8C9;
  --rg-film-frabwelt: #C4895E;
  --rg-film-acros: #D4D2CB;
  --rg-film-gold: #D8A94D;
  --rg-film-vision3: #8DA684;
  --rg-print-paper: #FFFFFF;
  --rg-print-ink: #000000;
  --rg-print-soft: #222222;
  --rg-print-mute: #555555;
  --rg-print-rule: #BBBBBB;
  --rg-nav-offset: 58px;
  --rg-frame-edge: rgba(247, 237, 222, 0.13);   /* cream, for frames on the ink plate */
  --rg-film-base: #0B0805;                      /* the emulsion side of a cut strip */
}
.page-pictures main { padding-block-end: 0; }
.page-pictures main > [id] { scroll-margin-block-start: var(--rg-nav-offset); }
.page-pictures .skip-link { min-block-size: 44px; display: inline-flex; align-items: center; }

/* The shared shell keeps the clock through tablet widths. On this denser
   section it wraps between 701–919px and paints into the title card, so the
   page-specific layer retires it until the full label fits on one line. */
@media (min-width: 701px) and (max-width: 919px) {
  .page-pictures .d-run-clock { display: none; }
}
@media (min-width: 641px) and (max-width: 767px) {
  .page-pictures .d-runhead-in { gap: 8px; }
  .page-pictures .d-run-nav { gap: 2px; }
  .page-pictures .d-run-nav a { padding-inline: 4px; }
}

/* ════ THE INK PLATE ════════════════════════════════════════════════════
   Custom properties resolve var() against the element they are declared on,
   so `--paper: var(--stock)` inherited from body.dispatch has already been
   substituted with the warm stock by the time it reaches here. Every token
   the plate wants dark must be re-declared, not just --stock. Same trap the
   `--wash` note in dispatch.css documents. */
.rg-titlecard,
.rg-plate {
  --stock: var(--plate-ink);
  --paper: var(--stock);
  --paper-2: var(--stock);
  --paper-lift: var(--stock);
  --accent-light: var(--stock);
  --ink: var(--rg-cream);
  --ink-soft: var(--rg-cream-soft);
  --ink-mute: var(--rg-cream-mute);
  --rule: var(--rg-rule);
  --rule-soft: var(--rg-rule-soft);
  --verm: var(--rg-orange);
  --verm-dk: var(--rg-orange-light);
  --verm-bright: var(--rg-orange);
  --wash: color-mix(in srgb, var(--verm) 8%, transparent);
  background: var(--stock);
  color: var(--ink);
}

/* at night the page is already dark — the plate drops one more stop so a
   change of section still reads as a change of sheet */
html[data-theme="night"] .rg-titlecard,
html[data-theme="night"] .rg-plate { --stock: var(--plate-ink-deep); }

/* ════ TITLE CARD ═══════════════════════════════════════════════════════ */
.rg-titlecard {
  position: relative;
  min-block-size: min(88vh, 780px);
  min-block-size: min(88svh, 780px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate;
}
.rg-titlecard-plate {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 44%;
  z-index: -3;
}
/* the scrim: enough to hold cream type at AA over a bright frame, and it
   lands on the plate ink so the card dissolves into the roll below it */
.rg-titlecard::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--rg-scrim-top) 0%, var(--rg-scrim-air) 26%,
                            var(--rg-scrim-mid) 56%, var(--rg-scrim-base) 82%,
                            var(--stock) 100%);
  z-index: -2;
}

.rg-titlecard-in,
.rg-marks { position: relative; z-index: 1; max-width: var(--plate); margin-inline: auto; inline-size: 100%; padding-inline: var(--gutter); }

/* the scrim carries most of it; the shadow is the guarantee, so the card
   stays legible whichever frame is swapped in behind it */
.rg-titlecard-in {
  padding-block-end: clamp(22px, 3.5vw, 40px);
  text-shadow: 0 1px 14px var(--rg-title-shadow), 0 1px 3px var(--rg-title-shadow-tight);
}

.rg-slug {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--verm);
  margin-bottom: 14px;
}
.rg-title {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(44px, 9.6vw, 124px);
  line-height: 0.9; letter-spacing: -0.035em;
  margin: 0 0 14px; text-wrap: balance;
}
.rg-title-line {
  font-family: var(--serif); font-size: clamp(17px, 2vw, 22px);
  line-height: 1.45; color: var(--ink-soft); max-width: 34rem;
}
.rg-titlecard-cred {
  margin-block-start: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* the marks: the card's own footer strip, six counts that double as jumps */
.rg-marks {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-block-start: 1px solid var(--rule-soft);
  padding-block: clamp(14px, 2vw, 20px) clamp(18px, 2.6vw, 26px);
}
.rg-marks a {
  display: flex; flex-direction: column; gap: 4px;
  min-block-size: 44px; justify-content: center;
  padding-inline-end: var(--space-3);
  border-inline-start: 1px solid var(--rule-soft);
  padding-inline-start: clamp(10px, 1.6vw, 20px);
  transition: color var(--motion-fast) ease;
}
.rg-marks a:first-child { border-inline-start: 0; padding-inline-start: 0; }
.rg-marks b {
  font-family: var(--mono); font-size: clamp(19px, 2.4vw, 27px); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink);
  transition: color var(--motion-fast) ease;
}
.rg-marks span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.rg-marks a:hover b,
.rg-marks a:focus-visible b { color: var(--verm); }

/* ════ PLATE FURNITURE ══════════════════════════════════════════════════ */
.rg-plate {
  position: relative; overflow: hidden;
  padding-block: clamp(2.6rem, 6vw, 5.5rem);
}
#roll-a {
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--rg-violet) 9%, transparent) 0, transparent 25%),
    radial-gradient(circle at 12% 70%, color-mix(in srgb, var(--rg-gold) 7%, transparent) 0, transparent 24%),
    var(--stock);
}
#roll-b {
  background:
    radial-gradient(circle at 8% 19%, color-mix(in srgb, var(--rg-ember) 8%, transparent) 0, transparent 25%),
    radial-gradient(circle at 87% 76%, color-mix(in srgb, var(--rg-indigo) 7%, transparent) 0, transparent 23%),
    var(--stock);
}
.rg-product {
  background:
    radial-gradient(ellipse at 11% 13%, color-mix(in srgb, var(--rg-olive) 11%, transparent) 0, transparent 30%),
    radial-gradient(ellipse at 91% 67%, color-mix(in srgb, var(--rg-ochre) 9%, transparent) 0, transparent 27%),
    linear-gradient(180deg, var(--stock) 0%, color-mix(in srgb, var(--rg-red) 4%, var(--stock)) 54%, var(--stock) 100%);
}
.rg-film {
  background:
    radial-gradient(ellipse at 8% 7%, color-mix(in srgb, var(--rg-film-cinestill) 7%, transparent) 0, transparent 25%),
    radial-gradient(ellipse at 92% 33%, color-mix(in srgb, var(--rg-film-ektar) 6%, transparent) 0, transparent 27%),
    radial-gradient(ellipse at 12% 83%, color-mix(in srgb, var(--rg-film-gold) 6%, transparent) 0, transparent 26%),
    linear-gradient(180deg, var(--stock), color-mix(in srgb, var(--rg-film-acros) 2%, var(--stock)) 48%, var(--stock));
}

/* text on a plate sets to the plate's wider measure so essay heads and
   frames share one left edge — .d-wrap would indent them by ~130px */
.rg-plate-wrap { max-width: var(--plate); margin-inline: auto; padding-inline: var(--gutter); }

.rg-essay-head { max-width: 48rem; margin-block-end: clamp(26px, 4vw, 46px); }

/* the roll slug: section label left, running count right */
.rg-roll {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-block-end: 12px; margin-bottom: 16px;
  border-block-end: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--verm);
}
.rg-roll-count { margin-inline-start: auto; font-weight: 400; letter-spacing: 0.14em; color: var(--ink-mute); }

.rg-essay-head h2,
.rg-reel-head h2,
.rg-review-head h2,
.rg-bench-head h2 {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(28px, 4.4vw, 50px); line-height: 1.04; letter-spacing: -0.02em;
  margin-bottom: 14px; text-wrap: balance;
}

/* ── the section head, set as a spread ─────────────────────────────────
   Stacked heads left the right half of a 1560px plate empty on every
   section. Set as two columns the title can run larger, the dek sits on
   the title's own baseline, and the head fills the measure the pictures
   below it use. The ceramics section proved the shape; every roll now
   shares it. */
@media (min-width: 900px) {
  /* section-scoped so these out-specify the max-width each head declares
     later in the file for its stacked, narrow-viewport form */
  .rg-plate .rg-essay-head,
  .rg-reel .rg-reel-head,
  .rg-film .rg-film-head {
    max-width: none; max-inline-size: none;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    column-gap: clamp(36px, 5.5vw, 92px);
    align-items: end;
  }
  .rg-plate .rg-essay-head > .rg-roll,
  .rg-reel .rg-reel-head > .rg-roll,
  .rg-film .rg-film-head > .rg-roll { grid-column: 1 / -1; }
  .rg-plate .rg-essay-head > h2,
  .rg-reel .rg-reel-head > h2,
  .rg-film .rg-film-head > h2 {
    margin-bottom: 0;
    font-size: clamp(38px, 4.6vw, 60px);
  }
  .rg-plate .rg-essay-head > .rg-dek,
  .rg-reel .rg-reel-head > .rg-dek,
  .rg-film .rg-film-head > .rg-dek { max-width: none; }
}

.rg-dek {
  font-family: var(--serif); font-size: var(--type-body);
  line-height: 1.58; color: var(--ink-soft); max-width: var(--measure-copy);
}

.rg-sheet-note {
  margin-top: clamp(24px, 4vw, 40px);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* ════ PART BANDS ═══════════════════════════════════════════════════════
   The desk runs in three parts — field work, table work, the negatives.
   Each band is a printed divider on the page stock between plates: the
   double rule newspapers cut between one section of the paper and the
   next. Decorative wayfinding (aria-hidden); the sections keep their own
   headings. */
.rg-part {
  max-width: var(--plate);
  margin-inline: auto;
  inline-size: 100%;
  padding-inline: var(--gutter);
  padding-block: clamp(26px, 4.2vw, 60px) clamp(22px, 3.2vw, 40px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 2.2vw, 30px);
  row-gap: 8px;
  align-items: baseline;
}
.rg-part::before {
  content: ""; grid-column: 1 / -1;
  border-block-start: 3px double var(--rule);
  margin-block-end: clamp(14px, 2vw, 22px);
}
/* the part numeral is struck the way the academy leader counts down, so a
   chapter opener and the craft countdown read as the same hand */
.rg-part-no {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(24px, 3.2vw, 42px); line-height: 0.92;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px var(--verm);
}
.rg-part-name {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(24px, 3.2vw, 42px); line-height: 1;
  letter-spacing: -0.022em; color: var(--ink);
  text-wrap: balance;
}
.rg-part-list {
  grid-column: 2;
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}

/* ════ THE CONTACT SHEET ════════════════════════════════════════════════
   A laid-out page, not a uniform tile grid: twelve columns, explicit spans,
   and a staggered baseline so the sheet reads as a picture editor's spread. */
.rg-sheet {
  max-width: var(--plate); margin-inline: auto; padding-inline: var(--gutter);
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 26px);
  row-gap: clamp(30px, 5vw, 72px);
}

/* Roll A follows the arc of a live room: company, performer, atmosphere,
   production, then the audience returning the gesture. Two edge-to-edge
   anchors hold a deliberately offset sequence of smaller editorial frames. */
.rg-sheet.rg-stage-sheet { grid-template-columns: minmax(0, 1fr); }
.rg-stage-frame { grid-column: 1 / -1; min-inline-size: 0; }

@media (min-width: 700px) {
  .rg-sheet.rg-stage-sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rg-stage-frame--ensemble,
  .rg-stage-frame--heart { grid-column: 1 / -1; }
  .rg-stage-frame--room { grid-column: 1 / 5; }
  .rg-stage-frame--solo { grid-column: 5 / -1; align-self: end; }
  .rg-stage-frame--blue { grid-column: 1 / 3; }
  .rg-stage-frame--veil { grid-column: 3 / -1; align-self: end; }
  .rg-stage-frame--dj { grid-column: 2 / 6; }
}

@media (min-width: 1100px) {
  .rg-sheet.rg-stage-sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rg-stage-frame--room { grid-column: 1 / 9; }
  .rg-stage-frame--solo { grid-column: 9 / -1; }
  .rg-stage-frame--blue { grid-column: 2 / 6; }
  .rg-stage-frame--veil { grid-column: 6 / -1; }
  .rg-stage-frame--dj { grid-column: 2 / 12; }
}

/* Roll B is paced as a photo essay rather than another contact sheet.
   Its opening diptych moves from private preparation to the public street;
   the final inset deliberately gives the children's closing frame more air. */
.rg-sheet.rg-street-sheet { grid-template-columns: minmax(0, 1fr); }
.rg-street-frame { grid-column: 1 / -1; min-inline-size: 0; }
.rg-street-frame .rg-open { aspect-ratio: 3 / 2; }
.rg-street-frame .rg-open img {
  block-size: 100%;
  object-fit: cover;
}
.rg-street-frame--makeup .rg-open { aspect-ratio: 2 / 3; }

@media (min-width: 700px) {
  .rg-sheet.rg-street-sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rg-street-frame--makeup { grid-column: 1 / 3; }
  .rg-street-frame--audience { grid-column: 3 / -1; }
  .rg-street-frame--orchestra { grid-column: 1 / -1; }
  .rg-street-frame--fan { grid-column: 1 / 4; }
  .rg-street-frame--fire { grid-column: 4 / -1; }
  .rg-street-frame--viewfinder { grid-column: 1 / 3; align-self: start; }
  .rg-street-frame--front-row { grid-column: 3 / -1; }
}

@media (min-width: 1100px) {
  .rg-sheet.rg-street-sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rg-street-frame--makeup { grid-column: 1 / 5; }
  .rg-street-frame--audience { grid-column: 5 / -1; }
  .rg-street-frame--orchestra { grid-column: 2 / 12; }
  .rg-street-frame--fan { grid-column: 1 / 7; }
  .rg-street-frame--fire { grid-column: 7 / -1; }
  .rg-street-frame--viewfinder { grid-column: 2 / 6; }
  .rg-street-frame--front-row { grid-column: 6 / -1; }
}

/* The product studio reads like an object folio. A full collection opens the
   set; three portrait studies establish touch and scale; the final two rows
   widen back out to use and an overhead inventory. Native ratios remain
   visible, so none of the glaze or hand positions are invented by a crop. */
.rg-sheet.rg-product-sheet { grid-template-columns: minmax(0, 1fr); }
.rg-product-frame { grid-column: 1 / -1; min-inline-size: 0; }

/* The object folio can become a diptych before the full editorial grid has
   room. This removes a 3.8k-pixel layout jump at 700px while keeping every
   portrait large enough to inspect on smaller phones. */
@media (min-width: 540px) and (max-width: 699px) {
  .rg-sheet.rg-product-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-product-frame--collection,
  .rg-product-frame--tea { grid-column: 1 / -1; }
  .rg-product-frame--lift,
  .rg-product-frame--spoon,
  .rg-product-frame--plates,
  .rg-product-frame--overhead { grid-column: auto; }
  .rg-product-frame--held { grid-column: 1 / -1; inline-size: calc(50% - 6px); justify-self: center; }
  .rg-product-frame--overhead { align-self: end; }
}

@media (min-width: 700px) {
  .rg-sheet.rg-product-sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rg-product-frame--collection { grid-column: 1 / -1; }
  .rg-product-frame--lift { grid-column: 1 / 3; }
  .rg-product-frame--spoon { grid-column: 3 / 5; }
  .rg-product-frame--held { grid-column: 5 / -1; }
  .rg-product-frame--tea { grid-column: 1 / -1; }
  .rg-product-frame--plates { grid-column: 1 / 3; }
  .rg-product-frame--overhead { grid-column: 3 / -1; align-self: end; }
}

@media (min-width: 1100px) {
  .rg-sheet.rg-product-sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rg-product-frame--lift { grid-column: 1 / 5; }
  .rg-product-frame--spoon { grid-column: 5 / 9; }
  .rg-product-frame--held { grid-column: 9 / -1; }
  .rg-product-frame--tea { grid-column: 2 / 12; }
  .rg-product-frame--plates { grid-column: 1 / 5; }
  .rg-product-frame--overhead { grid-column: 5 / -1; }
}

/* The film archive is a stock rack feeding one light table. The controls
   remain ordinary anchors until JavaScript upgrades them, so no-script and
   print readers still receive all six complete chapters. */
.rg-film {
  --rg-film-load-duration: 220ms;
  --rg-film-tab-preview: clamp(3.5rem, 7vw, 5.5rem);
  --rg-film-picker-gap: 1px;
}
.rg-film-head { max-inline-size: 54rem; }
.rg-film-picker {
  margin-block: clamp(2.125rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
  scroll-margin-block-start: var(--rg-nav-offset);
}
.rg-film-picker-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-2);
  font-family: var(--mono);
  font-size: var(--rg-type-micro);
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.rg-film-picker-label span:first-child { color: var(--rg-cream); font-weight: 600; }
.rg-film-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rg-film-picker-gap);
  padding: var(--rg-film-picker-gap);
  border: 1px solid var(--rule);
  background: var(--rule);
}
.rg-film-tab {
  --film-tab-accent: var(--verm);
  position: relative;
  display: grid;
  grid-template-rows: var(--rg-film-tab-preview) minmax(4.25rem, auto);
  min-inline-size: 0;
  min-block-size: 7.75rem;
  overflow: hidden;
  color: var(--rg-cream);
  background: color-mix(in srgb, var(--film-tab-accent) 5%, var(--rg-film-base));
  box-shadow: inset 0 0 0 1px transparent;
  transition:
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease);
}
.rg-film-tab--cinestill { --film-tab-accent: var(--rg-film-cinestill); }
.rg-film-tab--ektar { --film-tab-accent: var(--rg-film-ektar); }
.rg-film-tab--frabwelt { --film-tab-accent: var(--rg-film-frabwelt); }
.rg-film-tab--acros { --film-tab-accent: var(--rg-film-acros); }
.rg-film-tab--gold { --film-tab-accent: var(--rg-film-gold); }
.rg-film-tab--vision3 { --film-tab-accent: var(--rg-film-vision3); }
.rg-film-tab::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: calc(50% - 0.625rem);
  inline-size: 1.25rem;
  block-size: 0.625rem;
  border-radius: 0 0 999px 999px;
  background: var(--stock);
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}
.rg-film-tab-preview {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--rg-film-base);
}
.rg-film-tab-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--rg-film-base) 78%, transparent));
  pointer-events: none;
}
.rg-film-tab-preview img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.68;
  transform: scale(1.015);
  transition: opacity var(--motion-fast) ease, transform var(--motion-settle) var(--ease);
}
.rg-film-tab-copy {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  padding: var(--space-2) 0.75rem 0.75rem;
}
.rg-film-tab-no {
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-size: var(--rg-type-micro);
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--film-tab-accent);
}
.rg-film-tab b {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.rg-film-tab small {
  font-family: var(--mono);
  font-size: 0.5625rem;
  line-height: 1.45;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rg-cream-mute);
}
.rg-film-tab-state {
  display: none;
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--film-tab-accent);
  background: color-mix(in srgb, var(--rg-film-base) 88%, transparent);
  color: var(--rg-cream);
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rg-film-tab:hover { background: color-mix(in srgb, var(--film-tab-accent) 10%, var(--rg-film-base)); }
.rg-film-tab:hover .rg-film-tab-preview img { opacity: 0.88; transform: scale(1.04); }
.rg-film-tab:focus-visible {
  z-index: 2;
  outline: 2px solid var(--rg-cream);
  outline-offset: -0.25rem;
}
.rg-film-tab[aria-selected="true"] {
  z-index: 1;
  background: color-mix(in srgb, var(--film-tab-accent) 13%, var(--rg-film-base));
  box-shadow: inset 0 0 0 2px var(--film-tab-accent);
  transform: translateY(-0.125rem);
}
.rg-film-tab[aria-selected="true"]::after { opacity: 1; }
.rg-film-tab[aria-selected="true"] .rg-film-tab-preview img { opacity: 1; transform: none; }
.rg-film-tab[aria-selected="true"] .rg-film-tab-state { display: block; }

.rg-film-guide {
  margin-block: var(--space-3) 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-inline-size: 58rem;
  font-family: var(--mono);
  font-size: var(--rg-type-micro);
  line-height: 1.55;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.rg-film-guide::before {
  content: "↧";
  flex: 0 0 auto;
  color: var(--verm);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.rg-film-footer {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
}
.rg-film-footer .rg-sheet-note { margin-block-start: 0; line-height: 1.55; }
.rg-film-return {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 2.75rem;
  padding-block: var(--space-2);
  border-block: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--rg-type-micro);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rg-cream);
}
.rg-film-return::after { content: "↑"; color: var(--verm); font-size: 1rem; }
.rg-film-return:hover { color: var(--verm); }
.rg-film-return:focus-visible { outline: 2px solid var(--rg-cream); outline-offset: 0.25rem; }

.rg-film-stage { position: relative; }
.rg-film-ready .rg-film-stage {
  margin-inline: var(--gutter);
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--rg-film-base) 42%, transparent);
  box-shadow: inset 0 0 4rem color-mix(in srgb, var(--rg-cream) 2%, transparent);
}
.rg-film-roll {
  --film-accent: var(--verm);
  position: relative;
  padding-block: clamp(2rem, 4.6vw, 3.75rem);
  scroll-margin-block-start: var(--rg-nav-offset);
  border-block-start: 1px solid var(--rule-soft);
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--film-accent) 7%, transparent), transparent 44%),
    transparent;
}
.rg-film-ready .rg-film-roll { border-block-start: 0; }
.rg-film-roll::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: var(--gutter);
  block-size: 3px;
  background: repeating-linear-gradient(90deg, var(--film-accent) 0 14px, transparent 14px 48px);
  opacity: 0.48;
}
.rg-film-roll--cinestill { --film-accent: var(--rg-film-cinestill); }
.rg-film-roll--ektar { --film-accent: var(--rg-film-ektar); }
.rg-film-roll--frabwelt { --film-accent: var(--rg-film-frabwelt); }
.rg-film-roll--acros { --film-accent: var(--rg-film-acros); }
.rg-film-roll--gold { --film-accent: var(--rg-film-gold); }
.rg-film-roll--vision3 { --film-accent: var(--rg-film-vision3); }
.rg-film-stock-head {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
}
.rg-film-stock-no {
  padding-block-start: 0.4375rem;
  font-family: var(--mono);
  font-size: var(--rg-type-micro);
  letter-spacing: 0.14em;
  color: var(--film-accent);
}
.rg-film-stock-head h3 {
  margin-block-end: 0.375rem;
  font-family: var(--disp);
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.rg-film-stock-head div p {
  max-inline-size: 41rem;
  font-family: var(--serif);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.rg-film-stock-meta {
  grid-column: 2;
  font-family: var(--mono);
  font-size: var(--rg-type-micro);
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: var(--film-accent);
}

/* One loaded roll prints as a complete contact sheet. Every frame is visible
   at once; native aspect ratios and film edges remain untouched. */
.rg-sheet.rg-film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem) clamp(0.625rem, 1.5vw, 1.25rem);
  overflow: visible;
  padding-block-start: 0.5rem;
}
.rg-film-frame {
  min-inline-size: 0;
  --frame-accent: var(--film-accent);
}
.rg-film-frame--landscape { grid-column: 1 / -1; }
.rg-film-frame--portrait { grid-column: span 1; }
.rg-film-frame .rg-open {
  inline-size: 100%;
  block-size: auto;
  padding-block: 0.5625rem;
  background: var(--rg-film-base);
}
.rg-film-frame .rg-open img {
  inline-size: 100%;
  block-size: auto;
}
.rg-film-frame .rg-open::before,
.rg-film-frame .rg-open::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 0.5625rem;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle 2px at 8px 4.5px, var(--stock) 1.9px, transparent 2.3px);
  background-size: 16px 9px;
  background-repeat: repeat-x;
}
.rg-film-frame .rg-open::before { inset-block-start: 0; }
.rg-film-frame .rg-open::after { inset-block-end: 0; }
.rg-film-frame .rg-rebate { flex-wrap: nowrap; contain: inline-size; }
.rg-film-frame .rg-cap { display: none; }
.rg-film-frame .rg-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 700px) {
  .rg-film-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-film-stock-head {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(9.375rem, 0.28fr);
    gap: clamp(1.125rem, 3vw, 2.5rem);
  }
  .rg-film-stock-meta { grid-column: 3; grid-row: 1; justify-self: end; text-align: end; }
  .rg-sheet.rg-film-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rg-film-frame--portrait { grid-column: span 3; }
  .rg-film-frame--landscape { grid-column: span 6; }
  .rg-film-footer { grid-template-columns: minmax(12rem, 0.28fr) minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  .rg-film-index { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.rg-frame {
  --frame-accent: var(--rg-orange);
  --rg-image-scale: 1;
  --rg-image-hover-scale: var(--rg-hover-scale);
  position: relative; isolation: isolate; margin: 0;
}

/* An anchor frame runs to the edge of the plate while its rebate stays on
   the text measure. Declared after `.rg-frame` on purpose: the two rules
   carry equal specificity, so the reset above would otherwise cancel the
   bleed. Add the class to any frame that should open or close a sequence. */
.rg-frame--bleed { margin-inline: calc(var(--gutter) * -1); }
.rg-frame--bleed .rg-rebate { margin-inline: var(--gutter); }

.rg-tone--gold { --frame-accent: var(--rg-gold); }
.rg-tone--rose { --frame-accent: var(--rg-rose); }
.rg-tone--violet { --frame-accent: var(--rg-violet); }
.rg-tone--blue { --frame-accent: var(--rg-blue); }
.rg-tone--ember { --frame-accent: var(--rg-ember); }
.rg-tone--red { --frame-accent: var(--rg-red); }
.rg-tone--ochre { --frame-accent: var(--rg-ochre); }
.rg-tone--sun { --frame-accent: var(--rg-sun); }
.rg-tone--olive { --frame-accent: var(--rg-olive); }
.rg-tone--indigo { --frame-accent: var(--rg-indigo); }

.rg-frame::before {
  content: "";
  position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--frame-accent) var(--rg-interaction-glow), transparent) 0, transparent 68%);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
}
.rg-frame[data-current]::before,
.rg-frame:hover::before,
.rg-frame:focus-within::before { opacity: 0.42; transform: scale(1); }

/* A hairline inside the picture, not around it: a night frame whose corners
   go to black would otherwise dissolve into the plate and lose its edges. */
.rg-open {
  position: relative; display: block; inline-size: 100%;
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: zoom-in; overflow: hidden;
  /* the mat a lazily-loaded frame rests on. Mixed here rather than stored on
     .page-pictures so --ink/--stock resolve in the plate's scope, not body's */
  background: color-mix(in srgb, var(--ink) 7%, var(--stock));
  box-shadow: inset 0 0 0 1px var(--rg-frame-edge);
  transition: box-shadow 520ms var(--ease), clip-path 720ms var(--ease), opacity 520ms var(--ease), transform 720ms var(--ease);
}
/* the photographs are the work — they print at full strength at rest, and
   hover only lifts them a little rather than correcting them back up */
.rg-open img {
  display: block; inline-size: 100%; block-size: auto;
  transform: scale(var(--rg-image-scale)); transform-origin: center;
  transition: transform 900ms var(--ease), filter 520ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .rg-frame:hover .rg-open img,
  .rg-frame:focus-within .rg-open img {
    transform: scale(var(--rg-image-hover-scale));
    filter: saturate(1.035) contrast(1.015);
  }
}
.rg-frame[data-current] .rg-open {
  box-shadow: inset 0 0 0 1px var(--rg-frame-edge),
              0 0 0 1px color-mix(in srgb, var(--frame-accent) 28%, transparent),
              0 24px 76px color-mix(in srgb, var(--frame-accent) 8%, transparent);
}
.rg-open:focus-visible { outline: 2px solid var(--verm); outline-offset: 4px; }

/* the rebate — frame data printed in the film margin. Hover inks the rule
   left to right: the same single red proofing stroke the archive rows use,
   so the picture desk marks a select the way the edition marks copy. */
.rg-rebate {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 16px;
  margin-block-start: 11px; padding-block-start: 9px;
  border-block-start: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.rg-rebate::before {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0;
  inline-size: 100%; block-size: 2px; background: var(--verm-bright);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ease);
}
.rg-frame:hover .rg-rebate::before,
.rg-frame:focus-within .rg-rebate::before { transform: scaleX(1); }
.rg-frame:hover .rg-no,
.rg-frame:focus-within .rg-no { color: var(--verm-dk); }

.rg-no { color: var(--verm); font-weight: 600; font-variant-numeric: tabular-nums; transition: color 220ms ease; }
.rg-cap { color: var(--ink); letter-spacing: 0.1em; }
/* the caption is part of the work — give it room everywhere the strip
   scale does not forbid it */
@media (min-width: 700px) {
  .rg-frame:not(.rg-film-frame) > .rg-rebate { font-size: 10.5px; gap: 5px 18px; }
  .rg-frame:not(.rg-film-frame) > .rg-rebate .rg-cap { font-size: 11.5px; letter-spacing: 0.06em; }
}

/* ── the editor's selects ──────────────────────────────────────────────
   The strongest frame on a sheet gets the grease pencil: a quick red ring
   around its number, drawn once the frame has developed. Lopsided radii and
   a small rotation keep it a pencil mark, not a UI badge. Mark a frame by
   adding .rg-select to its <figure>. */
.rg-select .rg-rebate .rg-no { position: relative; }
.rg-select .rg-open {
  box-shadow:
    inset 0 0 0 1px var(--rg-frame-edge),
    0 0 0 1px color-mix(in srgb, var(--frame-accent) 34%, transparent);
}
.rg-select .rg-rebate { border-block-start-color: color-mix(in srgb, var(--frame-accent) 58%, var(--rule)); }
.rg-select .rg-rebate .rg-no::after {
  content: ""; position: absolute; inset: -6px -9px -4px -8px;
  border: 1.5px solid var(--verm-bright);
  border-radius: 53% 47% 52% 48% / 46% 58% 42% 54%;
  transform: rotate(-7deg);
  opacity: 0.9;
  pointer-events: none;
}
.page-pictures.rg-cinema .rg-frame.rg-select:not(.rg-seen) .rg-no::after {
  opacity: 0; transform: rotate(-7deg) scale(1.5);
}
.page-pictures.rg-cinema .rg-select .rg-no::after {
  transition: opacity 360ms ease 700ms, transform 460ms var(--ease) 700ms;
}
.rg-loc { margin-inline-start: auto; }

/* ════ THE REVIEW DESK — one object, six pieces of evidence ════════════
   A restrained editorial sequence: the object first, then its controls,
   then the situations that make a review useful. The pictures do the
   styling; the page contributes only measure, rules, and pacing. */
.rg-review {
  --rg-frame-edge: rgba(23, 17, 11, 0.15);   /* the one section that prints on paper */
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6.5vw, 6rem);
  border-block-end: 1px solid var(--rule);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--verm) 3%, var(--paper)) 0,
    var(--paper) clamp(18rem, 34vw, 30rem)
  );
}
.rg-review-head { margin-block-end: clamp(28px, 4.5vw, 56px); }
.rg-review-intro {
  display: grid;
  gap: 16px;
  align-items: end;
}
.rg-review-head h2 {
  margin: 0;
  max-inline-size: 14ch;
}
.rg-review-intro .rg-dek { max-inline-size: 40rem; }

.rg-review-grid {
  max-inline-size: var(--plate);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 30px);
  row-gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.rg-review-frame { min-inline-size: 0; }
/* 3:2 is the native ratio of this shoot, so the review desk crops nothing
   and the row heights still agree. Only the camera close-up came off the
   card at 16:9 and takes a centred trim. */
.rg-review-frame .rg-open { aspect-ratio: 3 / 2; }
.rg-review-frame .rg-open img {
  block-size: 100%;
  object-fit: cover;
}
@media (min-width: 700px) {
  .rg-review-intro {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(32px, 6vw, 88px);
  }
  .rg-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-review-frame--finish,
  .rg-review-frame--pen { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .rg-review-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rg-review-frame--finish { grid-column: 1 / -1; }
  .rg-review-frame--camera { grid-column: 1 / 5; }
  .rg-review-frame--audio { grid-column: 5 / 9; }
  .rg-review-frame--pen { grid-column: 9 / -1; }
  .rg-review-frame--night { grid-column: 1 / 7; }
  .rg-review-frame--gaming { grid-column: 7 / -1; }
}

/* ════ THE REEL — video work on slates ═════════════════════════════════ */
.rg-reel { position: relative; overflow: hidden; padding-block: clamp(3rem, 6.5vw, 6rem); border-block-end: 1px solid var(--rule); }
.rg-reel-head { max-width: 48rem; margin-block-end: clamp(28px, 4vw, 48px); }

.rg-reel-strip { list-style: none; display: grid; gap: clamp(18px, 2.4vw, 30px); }

.rg-slate {
  position: relative;
  display: grid; grid-template-columns: 116px minmax(0, 1fr);
  column-gap: clamp(18px, 2.6vw, 36px);
  padding-block: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px);
  border-block-start: 1px solid var(--rule);
  isolation: isolate;
}
.rg-slate--lead { border-block-start: 2px solid var(--verm); }

.rg-slate-rail { padding-block-start: 4px; }
.rg-slate-no {
  font-family: var(--mono); font-size: clamp(30px, 3.4vw, 44px); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 0.9; color: var(--verm);
}
.rg-slate-year {
  margin-block-start: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-mute);
}

.rg-slate-body { max-width: 56rem; }
.rg-slate-title {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.08; letter-spacing: -0.012em;
  text-wrap: balance;
}
.rg-slate-role {
  margin-block-start: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verm-dk);
}

/* the slate data block: mono keys over values, the way a slate is chalked */
.rg-slate-data {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);
  margin-block: clamp(16px, 2vw, 22px);
  padding-block: 14px;
  border-block: 1px solid var(--rule);
}
.rg-slate-data dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); margin-block-end: 5px;
}
.rg-slate-data dd {
  margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--ink);
}

.rg-slate-note {
  margin-block-start: 12px;
  color: var(--ink-soft); font-size: var(--type-support); line-height: 1.55;
  max-width: var(--measure-copy);
}

/* the shipped strip — what actually left the desk, chalked at the foot of
   each slate the way a can is labelled before it goes on the shelf */
.rg-slate-cans {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0;
  margin-block-start: 14px; padding-block-start: 10px;
  border-block-start: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.rg-cans-label {
  color: var(--verm); font-weight: 600; letter-spacing: 0.18em;
  margin-inline-end: 16px;
}
/* label is child one, the first can child two; separators start at three */
.rg-slate-cans span:nth-child(n + 3) { padding-inline-start: 12px; }
.rg-slate-cans span:nth-child(n + 3)::before {
  content: "·"; margin-inline-end: 12px; color: var(--ink-mute);
}

/* ── the screening room ────────────────────────────────────────────────
   The section's closing movement: the films themselves on a bank of
   monitors, then the deck link as the last rule. Each screen is a facade —
   a local poster over the desk's own play cue — and only becomes a YouTube
   player once someone asks for one. */
.rg-screening {
  margin-block-start: clamp(26px, 4vw, 44px);
  padding-block-start: clamp(18px, 2.6vw, 28px);
  border-block-start: 2px solid var(--verm);
  display: grid; gap: 10px 32px;
  grid-template-columns: minmax(0, 1fr);
}
.rg-screening-slug {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--verm);
}
.rg-screening-line {
  font-family: var(--serif); font-size: var(--type-support);
  line-height: 1.55; color: var(--ink-soft);
  max-width: var(--measure-copy);
}
.rg-screening .d-jump { margin-top: 0; justify-self: start; }

.rg-screen-strip {
  list-style: none;
  margin-block: clamp(20px, 3vw, 32px) 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px) clamp(14px, 1.8vw, 26px);
}
.rg-screen { min-inline-size: 0; }

/* the monitor: a 16:9 well on film base, the poster inside it */
.rg-screen-play {
  position: relative; display: block; inline-size: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: 0;
  background: var(--rg-film-base);
  box-shadow: inset 0 0 0 1px var(--rg-frame-edge);
  color: inherit; font: inherit; cursor: pointer; overflow: hidden;
  transition: box-shadow 420ms var(--ease);
}
.rg-screen-play img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 900ms var(--ease), filter 420ms ease;
}
.rg-screen-play:hover img,
.rg-screen-play:focus-visible img { transform: scale(1.03); filter: saturate(1.05); }
.rg-screen-play:focus-visible { outline: 2px solid var(--verm); outline-offset: 4px; }

/* the cue: a projectionist's start mark, not a platform badge */
.rg-screen-cue {
  position: absolute; inset-block-end: 12px; inset-inline-start: 12px;
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  border: 1.5px solid var(--rg-cream);
  background: color-mix(in srgb, var(--rg-modal) 52%, transparent);
  display: grid; place-items: center;
  transition: background 300ms ease, border-color 300ms ease, transform 420ms var(--ease);
}
.rg-screen-cue::before {
  content: ""; inline-size: 0; block-size: 0;
  border-inline-start: 11px solid var(--rg-cream);
  border-block: 7px solid transparent;
  margin-inline-start: 3px;   /* optical centring of a triangle in a circle */
}
.rg-screen-play:hover .rg-screen-cue,
.rg-screen-play:focus-visible .rg-screen-cue {
  background: var(--verm); border-color: var(--verm); transform: scale(1.06);
}
.rg-screen-play:hover .rg-screen-cue::before,
.rg-screen-play:focus-visible .rg-screen-cue::before { border-inline-start-color: var(--rg-cream); }

/* once playing, the well holds the player instead of the facade */
.rg-screen-frame { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; background: var(--rg-film-base); }
.rg-screen-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

.rg-screen-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-block-start: 11px; padding-block-start: 9px;
  border-block-start: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.rg-screen-no { color: var(--verm); font-weight: 600; font-variant-numeric: tabular-nums; }
.rg-screen-title { color: var(--ink); letter-spacing: 0.08em; }
.rg-screen-tag { margin-inline-start: auto; }
.rg-screen-tag--jump {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--verm); border-block-end: 1px solid currentColor;
  transition: color 200ms ease;
}
.rg-screen-tag--jump:hover { color: var(--verm-dk); }

.rg-screen-note {
  margin-block-start: clamp(14px, 2vw, 22px);
  padding-block-start: clamp(12px, 1.6vw, 18px);
  border-block-start: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}

@media (min-width: 700px) {
  .rg-screen-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .rg-screen-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ════ THE BENCH — academy leader, counting down to the cut ═════════════ */
.rg-bench { padding-block: clamp(3rem, 6.5vw, 6rem); border-block-end: 1px solid var(--rule); }
.rg-bench-head { max-width: 44rem; margin-block-end: clamp(24px, 3.4vw, 38px); }

.rg-leader { list-style: none; display: grid; gap: 0; }
.rg-leader li {
  display: grid; grid-template-columns: clamp(76px, 9vw, 128px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(20px, 2.6vw, 30px);
  border-block-start: 1px solid var(--rule);
  align-items: start;
}
.rg-leader-no {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(42px, 6vw, 82px); line-height: 0.82;
  font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px var(--verm);
  letter-spacing: -0.07em;
}
.rg-leader h3 {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 8px;
}
.rg-leader-line {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.14; letter-spacing: -0.012em;
  margin-bottom: 10px; text-wrap: balance;
}
.rg-leader li > div > p:last-child {
  color: var(--ink-soft); font-size: var(--type-support); line-height: 1.55;
  max-width: var(--measure-copy);
}
.rg-leader-cue {
  padding-block: clamp(18px, 2.4vw, 26px);
  border-block-start: 1px solid var(--rule);
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-mute);
}

.rg-kit {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule);
}
.rg-kit dt {
  display: block; margin-block-end: var(--space-2); color: var(--verm);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
}
.rg-kit dd { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.45; }

/* ════ COMMISSIONS ══════════════════════════════════════════════════════ */
.rg-commissions { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.rg-commissions-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(24px, 4vw, 52px); align-items: start;
}
.rg-commissions h2 {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.04; letter-spacing: -0.02em;
  margin-bottom: 16px; text-wrap: balance;
}
.rg-commissions .d-chips {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  max-inline-size: 58rem;
  border-block: 1px solid var(--rule);
}
.rg-commissions .d-chips span {
  min-block-size: 44px;
  padding-block: 10px; padding-inline: 12px;
  border: 0; border-inline-end: 1px solid var(--rule); border-radius: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
}
.rg-commissions .d-chips span:last-child { border-inline-end: 0; }
.rg-commissions .d-chips span::before {
  content: none;
}
.rg-elsewhere {
  display: grid; gap: 2px; justify-items: start;
  padding-inline-start: clamp(18px, 2.4vw, 30px);
  border-inline-start: 1px solid var(--rule);
}

/* ════ FRAME COUNTER — typographic readout, mirrors the current frame
   Read-only and aria-hidden: it duplicates navigation the frames already
   provide, so it stays out of the accessibility tree entirely. ═════════ */
.rg-counter {
  position: fixed; inset-inline-end: clamp(10px, 1.6vw, 22px); inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 60; pointer-events: none;
  display: flex; gap: 8px; align-items: baseline;
  color: var(--rg-cream);   /* ink plates by default; the review desk switches to page ink */
  opacity: 0; transition: opacity 320ms var(--ease);
  min-block-size: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(247, 237, 222, 0.12);
  background: rgba(15, 10, 6, 0.62);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}
.rg-counter[data-live] { opacity: 1; }
.rg-counter[data-paper] { color: var(--rg-cream); }
.rg-counter-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.62;
}
.rg-counter-no {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; line-height: 1;
}
/* the readout borrows the tone of whichever photograph it is level with */
.rg-counter-no [data-counter-now] { font-size: 22px; font-weight: 600; transition: color 420ms ease; }
.rg-counter-of { font-size: 10px; opacity: 0.62; }

/* ════ THE LIGHT TABLE ══════════════════════════════════════════════════ */
.rg-lighttable {
  --rg-light-image: none;
  inline-size: 100%; max-inline-size: 100%;
  block-size: 100%; max-block-size: 100%;
  block-size: 100dvh; max-block-size: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: var(--rg-modal); color: var(--rg-cream);
  --ink: var(--rg-cream); --ink-mute: var(--rg-cream-mute); --verm: var(--rg-orange); --verm-dk: var(--rg-orange-light);
  --rule: var(--rg-rule-soft);
  isolation: isolate; overflow: hidden; overscroll-behavior: contain;
}
.rg-lighttable[open] { display: flex; flex-direction: column; }
.rg-lighttable::backdrop { background: var(--rg-modal-backdrop); }
.rg-lighttable::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--rg-light-image);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(52px) saturate(1.22);
  opacity: 0.28; transform: scale(1.14);
}
.rg-lighttable::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 10%, color-mix(in srgb, var(--rg-modal) 78%, transparent) 78%);
}
.rg-lock, .rg-lock body { overflow: hidden; }

/* flex, not grid: an auto-sized grid track takes its height from the image,
   so `max-block-size: 100%` on the image resolves against itself and never
   clamps. A flex line's cross size is the container's, which does. */
.rg-lt-stage {
  flex: 1 1 auto; min-block-size: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  position: relative; z-index: 1; overflow: hidden; cursor: zoom-out;
  touch-action: pan-y pinch-zoom;
}
.rg-lt-stage img {
  max-inline-size: 100%; max-block-size: 100%;
  inline-size: auto; block-size: auto; object-fit: contain;
  outline: 1px solid color-mix(in srgb, var(--rg-cream) 24%, transparent);
  box-shadow: 0 24px 90px var(--rg-modal-shadow);
  cursor: default;
}
.rg-lt-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px;
  padding: 14px clamp(14px, 3vw, 40px);
  padding-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--rule);
  position: relative; z-index: 1;
}
.rg-lt-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 16px; margin: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.rg-lt-frame-label { color: var(--ink-mute); }
.rg-lt-meta .rg-loc { margin-inline-start: 0; }
/* the SELECT stamp — the light table repeats the grease-pencil verdict */
.rg-lt-select {
  color: var(--verm-dk);
  border: 1px solid var(--verm-dk);
  border-radius: 2px;
  padding: 2px 7px 1px;
  font-weight: 600; letter-spacing: 0.2em;
  transform: rotate(-3deg);
  opacity: 0.92;
}
.rg-lt-hint {
  margin-inline-start: auto;
  color: var(--ink-mute);
  font-family: var(--mono); font-size: var(--rg-type-micro); line-height: 1.45; letter-spacing: 0.12em; text-transform: uppercase;
}

.rg-lt-controls {
  display: grid; grid-template-columns: auto auto auto auto; align-items: stretch;
  border: 1px solid var(--rule);
}
.rg-lt-count {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-mute); font-variant-numeric: tabular-nums;
  min-inline-size: 72px; min-block-size: 44px; padding-inline: 10px; text-align: center;
  border-inline: 1px solid var(--rule);
}
.rg-lt-btn {
  min-inline-size: 72px; min-block-size: 44px; padding-inline: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: var(--rg-type-control); line-height: 1; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.rg-lt-btn:hover,
.rg-lt-btn:focus-visible { background: var(--rg-control-wash); color: var(--verm-dk); }
.rg-lt-close { border-inline-start: 1px solid var(--rule); }

/* ════ LIVING CONTACT SHEET ════════════════════════════════════════════
   One photographic entrance establishes the pace. After that, frames
   develop only once; the ambient colour belongs to each photograph. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rg-film-load {
    from { opacity: 0.36; transform: translateX(0.75rem); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rg-photo-reveal {
    0% { clip-path: inset(0 49%); transform: scale(1.12); filter: saturate(0.45) brightness(0.72); }
    42% { clip-path: inset(0 13%); filter: saturate(0.72) brightness(0.84); }
    100% { clip-path: inset(0); transform: scale(1); filter: none; }
  }
  @keyframes rg-type-set {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rg-light-arrive {
    from { opacity: 0.4; filter: blur(3px) saturate(0.82); }
    to { opacity: 1; filter: none; }
  }

  .rg-titlecard-plate { animation: rg-photo-reveal 1150ms var(--ease) both; }
  .rg-film-ready .rg-film-roll:not([hidden]) {
    animation: rg-film-load var(--rg-film-load-duration) var(--ease) both;
  }
  .rg-titlecard-in > * { animation: rg-type-set 660ms var(--ease) both; }
  .rg-titlecard-in > :nth-child(1) { animation-delay: 480ms; }
  .rg-titlecard-in > :nth-child(2) { animation-delay: 560ms; }
  .rg-titlecard-in > :nth-child(3) { animation-delay: 650ms; }
  .rg-titlecard-in > :nth-child(4) { animation-delay: 720ms; }
  /* A frame arrives out of the developer, not out of the dark: enough of a
     change to read as an entrance, never so little picture that a
     half-scrolled page looks broken or the photograph looks badly exposed. */
  .page-pictures.rg-cinema .rg-frame:not(.rg-seen) .rg-open {
    opacity: 0.72; transform: translateY(10px);
  }
  .page-pictures.rg-cinema .rg-frame:focus-within .rg-open {
    opacity: 1; transform: none; clip-path: none;
  }
  .page-pictures.rg-cinema .rg-frame:not(.rg-seen) .rg-open img {
    filter: saturate(0.82) contrast(0.97) brightness(0.94);
  }
  .page-pictures.rg-cinema .rg-frame:not(.rg-seen) .rg-rebate {
    opacity: 0; transform: translateY(8px);
  }
  .page-pictures.rg-cinema .rg-rebate {
    transition: opacity 440ms ease 180ms, transform 560ms var(--ease) 180ms;
  }
  .page-pictures.rg-cinema .rg-slate,
  .page-pictures.rg-cinema .rg-screen,
  .page-pictures.rg-cinema .rg-leader li,
  .page-pictures.rg-cinema .rg-kit,
  .page-pictures.rg-cinema .rg-commissions-grid {
    transition: opacity 560ms ease, transform 660ms var(--ease);
  }
  .page-pictures.rg-cinema .rg-slate:not(.rg-seen),
  .page-pictures.rg-cinema .rg-screen:not(.rg-seen),
  .page-pictures.rg-cinema .rg-leader li:not(.rg-seen),
  .page-pictures.rg-cinema .rg-kit:not(.rg-seen),
  .page-pictures.rg-cinema .rg-commissions-grid:not(.rg-seen) {
    opacity: 0; transform: translateY(20px);
  }
  .rg-lt-stage img.rg-lt-arrive { animation: rg-light-arrive 300ms var(--ease) both; }
}

/* ════ RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width: 1180px) { .rg-counter { display: none; } }

@media (min-width: 1100px) {
  .rg-reel-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(22px, 2.6vw, 40px);
  }
  .rg-slate--lead { grid-column: 1 / -1; }
  .rg-slate:not(.rg-slate--lead) {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
  .rg-slate:not(.rg-slate--lead) .rg-slate-rail {
    display: flex; align-items: baseline; gap: 12px;
    margin-block-end: 14px;
  }
  .rg-slate:not(.rg-slate--lead) .rg-slate-year { margin-block-start: 0; }
  .rg-slate:not(.rg-slate--lead) .rg-slate-title { font-size: clamp(21px, 2vw, 27px); }
}

@media (max-width: 1000px) {
  .rg-commissions-grid { grid-template-columns: minmax(0, 1fr); }
  .rg-elsewhere {
    padding-inline-start: 0; border-inline-start: 0;
    border-block-start: 1px solid var(--rule); padding-block-start: var(--space-3);
  }
  .rg-kit, .rg-slate-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .rg-titlecard {
    min-block-size: min(76vh, 620px);
    min-block-size: min(76svh, 620px);
  }
  .rg-slate { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .rg-slate-rail { display: flex; align-items: baseline; gap: 12px; }
  .rg-slate-no { font-size: 26px; }
  .rg-slate-year { margin-block-start: 0; }
}

@media (min-width: 720px) and (max-width: 1099px) {
  .rg-marks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-marks a { padding-block: 10px; }
  .rg-marks a:nth-child(n + 4) { border-block-start: 1px solid var(--rule-soft); }
  .rg-marks a:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
}

/* six-across is too tight below ~712px — "PRODUCTIONS" is one unbreakable
   mono word and paints across the next mark's divider — so the marks
   collapse on the same beat as the sheets' own 700px break */
@media (max-width: 719px) {
  .rg-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .rg-marks a { padding-block: 10px; }
  .rg-marks a:nth-child(n + 3) { border-block-start: 1px solid var(--rule-soft); }
  .rg-marks a:nth-child(3),
  .rg-marks a:nth-child(5) { border-inline-start: 0; padding-inline-start: 0; }
}

@media (max-width: 640px) {
  .rg-loc { margin-inline-start: 0; }
  .rg-review-frame .rg-loc { margin-inline-start: auto; }
  .rg-lt-meta { flex: 1 1 100%; }
  .rg-lt-hint { display: none; }
  .rg-lt-controls { margin-inline: auto; }
  .rg-leader li { grid-template-columns: 68px minmax(0, 1fr); gap: 16px; }
  .rg-leader-no { font-size: 42px; }
  .rg-commissions .d-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-commissions .d-chips span:nth-child(2) { border-inline-end: 0; }
  .rg-commissions .d-chips span:nth-child(-n + 2) { border-block-end: 1px solid var(--rule); }
}

@media (max-width: 460px) {
  .rg-sheet { row-gap: 36px; }
  .rg-rebate { letter-spacing: 0.12em; }
  .rg-part-list { grid-column: 1 / -1; margin-inline-start: 0; padding-inline-start: 0; }
  .rg-kit { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 359px) {
  .rg-slate-data { grid-template-columns: minmax(0, 1fr); }
}

/* ════ MOTION, CONTRAST, PRINT ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .page-pictures *,
  .page-pictures *::before,
  .page-pictures *::after {
    animation: none !important;
    transition: none !important;
  }
  .rg-rebate::before { transition: none; transform: scaleX(1); opacity: 0; }
  .rg-frame:hover .rg-rebate::before,
  .rg-frame:focus-within .rg-rebate::before { opacity: 1; }
  .rg-no, .rg-lt-btn, .rg-counter { transition: none; }
}

@media (forced-colors: active) {
  .rg-titlecard, .rg-plate, .rg-lighttable {
    forced-color-adjust: auto;
    --stock: Canvas;
    --paper: Canvas;
    --ink: CanvasText;
    --ink-soft: CanvasText;
    --ink-mute: CanvasText;
    --rule: CanvasText;
    --rule-soft: CanvasText;
    --verm: LinkText;
    --verm-dk: LinkText;
    background: Canvas; color: CanvasText;
  }
  .rg-titlecard-plate,
  .rg-titlecard::after,
  .rg-film-tab::after,
  .rg-film-roll::before,
  .rg-frame::before,
  .rg-film-frame .rg-open::before,
  .rg-film-frame .rg-open::after,
  .rg-select .rg-rebate .rg-no::after,
  .rg-lighttable::before,
  .rg-lighttable::after { display: none; }
  .rg-film-frame .rg-open { padding-block: 0; background: Canvas; }
  .rg-film-tab,
  .rg-film-tab-state {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
  .rg-film-tab[aria-selected="true"] { box-shadow: inset 0 0 0 3px Highlight; }
  .rg-rebate::before { background: Highlight; }
  .rg-leader-no, .rg-part-no { color: CanvasText; -webkit-text-stroke: 0; }
  .rg-counter { display: none; }
}

@media print {
  body.dispatch.page-pictures,
  html[data-theme="night"] body.dispatch.page-pictures,
  body.dispatch.page-pictures[data-theme="night"] {
    --stock: var(--rg-print-paper);
    --paper: var(--rg-print-paper);
    --ink: var(--rg-print-ink);
    --ink-soft: var(--rg-print-soft);
    --ink-mute: var(--rg-print-mute);
    --rule: var(--rg-print-rule);
    --rule-soft: var(--rg-print-rule);
    --verm: var(--rg-print-ink);
    --verm-dk: var(--rg-print-ink);
    --rg-frame-edge: var(--rg-print-rule);
    background: var(--rg-print-paper); color: var(--rg-print-ink);
  }
  .rg-titlecard, .rg-plate { background: var(--rg-print-paper); color: var(--rg-print-ink); }
  #roll-a, #roll-b, .rg-film, .rg-film-roll { background: var(--rg-print-paper); }
  .rg-titlecard, .rg-plate {
    /* --stock too: the plates re-declare it at #17110B with higher
       precedence than the body remap, and the lazy-load mat mixes from it —
       without this, an undecoded frame prints as a near-black rectangle */
    --stock: var(--rg-print-paper);
    --ink: var(--rg-print-ink); --ink-soft: var(--rg-print-soft); --ink-mute: var(--rg-print-mute);
    --rule: var(--rg-print-rule); --verm: var(--rg-print-ink); --verm-dk: var(--rg-print-ink);
  }
  .rg-film-roll { --film-accent: var(--rg-print-ink); }
  .rg-screen-cue, .rg-screen-note { display: none; }
  .rg-screen-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-screen, .rg-screen-play { break-inside: avoid; }
  /* the night token swap out-specifies the plain print remap above */
  html[data-theme="night"] .rg-titlecard,
  html[data-theme="night"] .rg-plate { --stock: var(--rg-print-paper); }
  .rg-titlecard { min-block-size: auto; margin-block-start: 0; padding-block-start: 0; }
  .rg-titlecard::after, .rg-sheet-note, .rg-lighttable, .rg-counter, .rg-marks { display: none; }
  .rg-titlecard-plate { position: static; block-size: auto; }
  .rg-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .rg-sheet.rg-stage-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-stage-frame { grid-column: auto; align-self: start; }
  .rg-frame--bleed { grid-column: 1 / -1; margin-inline: 0; }
  .rg-frame--bleed .rg-rebate { margin-inline: 0; }
  .rg-sheet.rg-street-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-street-frame { grid-column: auto; align-self: start; }
  .rg-review { background: var(--rg-print-paper); }
  .rg-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .rg-review-frame--finish { grid-column: 1 / -1; }
  .rg-review-frame--camera,
  .rg-review-frame--audio,
  .rg-review-frame--pen,
  .rg-review-frame--night,
  .rg-review-frame--gaming { grid-column: auto; }
  .rg-sheet.rg-product-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-product-frame { grid-column: auto; align-self: start; }
  .rg-product-frame--collection { grid-column: 1 / -1; }
  .rg-film-picker,
  .rg-film-return { display: none; }
  .rg-film-roll[hidden] { display: block !important; }
  .rg-film-ready .rg-film-stage {
    margin-inline: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .rg-film-stock-head { break-inside: avoid; }
  .rg-sheet.rg-film-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
  }
  .rg-film-frame--portrait,
  .rg-film-frame--landscape { grid-column: auto; }
  .rg-film-frame .rg-open { padding-block: 0; background: var(--rg-print-paper); }
  .rg-film-frame .rg-open::before,
  .rg-film-frame .rg-open::after { display: none; }
  .rg-titlecard, .rg-plate { --verm-bright: var(--rg-print-ink); }
  .rg-frame, .rg-slate, .rg-leader li { break-inside: avoid; }
  .rg-leader-no, .rg-part-no { color: var(--rg-print-ink); -webkit-text-stroke: 0; }
  .page-pictures.rg-cinema .rg-frame .rg-open,
  .page-pictures.rg-cinema .rg-frame .rg-open img,
  .page-pictures.rg-cinema .rg-frame .rg-rebate,
  .page-pictures.rg-cinema .rg-slate,
  .page-pictures.rg-cinema .rg-screen,
  .page-pictures.rg-cinema .rg-leader li,
  .page-pictures.rg-cinema .rg-kit,
  .page-pictures.rg-cinema .rg-commissions-grid {
    opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important;
  }
}