/* ══════════════════ THE INTRODUCTION ══════════════════
   Version 9 · last updated 2026-10-19 21:05 PDT
   Served as assets/intro/intro.css?v=9 — keep the two numbers equal.

   WHY 8 WAS SKIPPED. Version 8 of this file was written but never uploaded,
   while the index.html that asked for ?v=8 did go up. For a day the address
   assets/intro/intro.css?v=8 returned Version 6 — the stylesheet without the
   rule at the foot of this file — so the Farsi hand came back, and every
   browser that loaded the page in that window now holds Version 6 cached
   against ?v=8. Re-uploading at 8 would never reach them. Hence 9: a new
   address nothing has cached. The rules below are unchanged from 8.

   Styles for the small link in the About panel and the player it opens.

   Everything here is namespaced .rvi (the link) and .rvp (the player) with
   ONE exception, at the foot of this file: .ab-marg, the Farsi hand in the
   left margin, which the card collided with and which is switched off there.
   That is the only selector in this file that exists elsewhere on the site,
   and removing this file brings the hand straight back.

   Colours come from the variables already on :root in style.css, with a
   literal fallback beside each one so this file still looks right if it is
   ever loaded on its own.
   ──────────────────────────────────────────────────────────────────── */

/* ─────────────────────────── the link ──────────────────────────── */

/* Built on the same shape as the mood headers (.ab-gh): a rule down the
   left, a large serif line, a quiet line under it. The heading is that
   header's own computed value rather than an approximation of it — 2rem,
   weight 500, #e3c88e — so the card reads as another section of About
   instead of a widget dropped into it.

   The rule itself is NOT the mood headers' flat 2px border. See the
   stroke, below.

   No box: the frame is gone on purpose. The old card was small and
   bordered; this one is large and open, and the stroke alone is what
   marks it off, exactly as a rule does for Noir, Transgressive and
   Plausible. */

#royaLibrary .rvi {
  margin: 2.2rem 0 2.6rem;
}

#royaLibrary .rvi-link {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ── the stroke ──
   Not a CSS border. The 116 is ringed by a drawn ellipse — library/art/
   ring.webp, used as a mask and filled with --paper-dust — so a flat
   2px border beside it looked like a different hand entirely.

   What is below IS that ellipse: the straight run along its top edge,
   between x 560 and 900, with the curve taken out and the whole thing
   stood on end. Same ink, same thickness variation, same ragged edge.
   It is inlined as a data URI rather than shipped as a file, so this
   stylesheet stays self-contained and nothing new has to be uploaded.

   It runs beside the WORDS only. The still sets the height of the row,
   and a rule drawn down the whole card bracketed the picture too. */

#royaLibrary .rvi-text {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0 0.55rem 1.15rem;
}

#royaLibrary .rvi-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--paper-dust, #c8ae78);
  mask: url("data:image/webp;base64,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") center center / 100% 100% no-repeat;
  opacity: 0.9;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

#royaLibrary .rvi-link:hover .rvi-text::before,
#royaLibrary .rvi-link:focus-visible .rvi-text::before { opacity: 1; }

#royaLibrary .rvi-link:focus-visible {
  outline: 2px solid var(--ember, #d8a65f);
  outline-offset: 4px;
}

#royaLibrary .rvi-kicker {
  display: block;
  font-family: var(--sans, "Jost", sans-serif);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember, #d8a65f);
}

/* The mood headers' own h3 is 2rem, weight 500, #e3c88e, line-height 1.1.
   This sits a step below it on purpose. The card is not a mood header —
   it is one item above them — and at 2rem the three lines were taller
   than the still needs to be, which is what made the block expensive. */
#royaLibrary .rvi-head {
  display: block;
  font-size: 1.62rem;
  font-weight: 500;
  line-height: 1.12;
  color: #e3c88e;
  margin-top: 0.5rem;
  text-wrap: balance;
}

#royaLibrary .rvi-meta {
  display: block;
  font-family: var(--sans, "Jost", sans-serif);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faded, #9c9280);
  margin-top: 0.75rem;
}

/* ── the still ──
   The poster is now the film's own end card — the crest, CHEWZFICTION.COM
   and the line under it, on black. Two things follow from that.

   One: it no longer has to be big. A cover render needed size to be read
   as a picture; a wordmark reads at any size, so the still comes down to
   about a fifth of the column and stops setting the height of the row.

   Two: it no longer has to be dimmed. The 0.82 below was there to stop a
   bright cover render shouting; against this it only took the gold off
   the wordmark, so it goes.

   The frame's own ground is rgb(8,1,0). The file shipped here is lifted
   to a true #000 so the panel disappears into --night instead of drawing
   a faint rectangle on it — do that again for any replacement. */

#royaLibrary .rvi-thumb {
  position: relative;
  flex: 0 0 clamp(9.5rem, 20.6%, 14rem);
  width: clamp(9.5rem, 20.6%, 14rem);
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}

@supports not (aspect-ratio: 16 / 9) {
  #royaLibrary .rvi-thumb { height: 0; padding-bottom: 56.25%; }
}

#royaLibrary .rvi-thumb img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
}

/* ── the play mark ──
   A hairline, and nothing behind it. The old mark was a 3.1rem disc with
   a 45%-black fill, which was right over a photograph and wrong over a
   wordmark: at the centre of this poster it covered the crest. At 1.95rem
   and with no fill the crest reads straight through it, and the mark is
   still unmistakably a play mark.

   1.95rem is a ceiling, not a preference. The wordmark's cap line sits
   about 12px below the centre of the panel at a desktop width, so a ring
   much past this one stops clearing the type and its lower arc starts
   cutting through CHEWZFICTION.COM. 2.12rem was tried and does exactly
   that. If the mark ever has to be bigger than this, the poster has to
   move, not the ring.

   It is deliberately quiet at rest and comes up on hover and on keyboard
   focus, so it never competes with the serif line beside it. */

#royaLibrary .rvi-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(227, 200, 142, 0.78);
  transition: color 0.18s ease;
}

#royaLibrary .rvi-play::before {
  content: "";
  position: absolute;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 999px;
  border: 1px solid rgba(216, 166, 95, 0.43);
  background: none;
  transition: border-color 0.18s ease;
}

#royaLibrary .rvi-link:hover .rvi-play,
#royaLibrary .rvi-link:focus-visible .rvi-play {
  color: var(--ember-lit, #f0c47e);
}

#royaLibrary .rvi-link:hover .rvi-play::before,
#royaLibrary .rvi-link:focus-visible .rvi-play::before {
  border-color: rgba(216, 166, 95, 0.78);
}

#royaLibrary .rvi-play svg {
  position: relative;
  width: 0.68rem;
  height: 0.68rem;
  margin-left: 0.08rem;
}

/* On a phone the card keeps the shape it has on a desktop: words on the
   left, still on the right, one row. It used to stack — the still went
   under the words and took the whole column — and that cost 344px of a
   414px-wide screen, which is most of what a reader sees at once. One
   row costs about a quarter of that, and there is now only one layout to
   reason about rather than two.

   Nothing is hidden to get there. The eyebrow, the title and the
   duration all stay; they are a step smaller, and the still is sized to
   the words rather than the other way round. The title may run to two
   lines at this size — that is fine, the row grows with it; no height is
   fixed anywhere in this block, on purpose. */
@media (max-width: 34rem) {
  #royaLibrary .rvi { margin: 1.8rem 0 2.2rem; }
  #royaLibrary .rvi-link { gap: 0.9rem; }
  #royaLibrary .rvi-text { padding: 0.35rem 0 0.35rem 1rem; }
  #royaLibrary .rvi-kicker { font-size: 0.6rem; letter-spacing: 0.22em; }
  #royaLibrary .rvi-head { font-size: 1.18rem; margin-top: 0.4rem; }
  #royaLibrary .rvi-meta { font-size: 0.6rem; margin-top: 0.45rem; }
  #royaLibrary .rvi-thumb { flex: 0 0 9.4rem; width: 9.4rem; }
  #royaLibrary .rvi-play::before { width: 1.66rem; height: 1.66rem; }
  #royaLibrary .rvi-play svg { width: 0.58rem; height: 0.58rem; }
}

/* ────────────────────────── the player ─────────────────────────── */

html.rvp-on, html.rvp-on body { overflow: hidden; }

.rvp {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rvp[hidden] { display: none; }

.rvp-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

/* A window over the darkened page, not the whole screen. Big enough to
   read the reader's text in the film, small enough that the page is
   still visibly behind it. */
.rvp-stage {
  position: relative;
  width: min(86vw, calc(76vh * 16 / 9), 1280px);
  background: #000;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(216, 166, 95, 0.22);
}

.rvp-v,
.rvp-wait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* while the file is still being uploaded */
.rvp-wait { position: relative; }
.rvp-wait img { opacity: 0.35; }
.rvp-waitline {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  text-align: center;
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--parchment, #e4dcc9);
}

.rvp-x {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 4, 3, 0.6);
  border: 1px solid rgba(216, 208, 192, 0.18);
  color: #c4bba8;
  cursor: pointer;
  padding: 0;
}

.rvp-x svg { width: 1.1rem; height: 1.1rem; }
.rvp-x:hover { color: var(--ember-lit, #f0c47e); }
.rvp-x:focus-visible {
  outline: 2px solid var(--ember, #d8a65f);
  outline-offset: 2px;
}

/* No room above the frame on a short screen or a phone, so the button
   comes inside the picture. */
@media (max-height: 34rem), (max-width: 34rem) {
  .rvp-stage { width: 100vw; border: 0; box-shadow: none; }
  .rvp-x { top: 0.5rem; right: 0.5rem; }
}

/* The browser's own full-screen view puts the stage edge to edge, so the
   width cap has to come off or the picture sits in a box inside a box. */
.rvp-stage:fullscreen,
.rvp-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rvp-stage:fullscreen .rvp-v,
.rvp-stage:-webkit-full-screen .rvp-v {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
}

/* Full screen makes the stage the whole window, so the close button's
   usual place — just above the frame — is off the top of the screen.
   Bring it inside. Escape and the player's own controls still work, but
   the button has to be reachable too. */
.rvp-stage:fullscreen .rvp-x,
.rvp-stage:-webkit-full-screen .rvp-x {
  top: 1rem;
  right: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  #royaLibrary .rvi-link,
  #royaLibrary .rvi-thumb img { transition: none; }
}

/* ══════════════ THE FARSI HAND, AND WHY IT IS OFF ══════════════
   .ab-marg is the three rows in the left margin — یکی بود / یکی نبود / و هیچ
   فرقی نداشت. It belongs to library/roya-library.css, which is GENERATED by
   build-integration.py and must not be hand-edited, so the one line it needs
   is set here instead: this stylesheet loads after that one, and deleting
   this file brings the hand back exactly as it was.

   WHY IT IS OFF RATHER THAN SMALLER. The hand is not type — it is
   art/marg.webp used as a mask on a box sized by width × aspect-ratio
   536/659, rotated -30deg about its LEFT CENTRE at top:5.5rem. Rotating
   about the left edge swings the box's lower-left corner down and to the
   right, so its reach below its own top is about 1.4× its width. At the
   11.85rem it was drawn at, that is 265px, and the card sits inside that
   band: measured at 1700, 1920 and 2560 it ran 102px down into the card and
   183px into the text column, across INTRODUCTION and the gold stroke.

   Nothing but width could move it. top cannot rise — .abt clips at its
   border box and the hand already starts 9px below it. left cannot go
   further out — it is already negative and is clipped the same way. The
   rotation and the origin are the drawing. Narrowing it to 5.8rem did clear
   the card by 8px, and that version is in this file's history; it was taken
   off because half the hand bought a watermark nobody asked to be smaller.

   WHAT THIS ACTUALLY TURNS OFF. roya-library.css already hides .ab-marg
   below 1700px and again inside .mob-sec, so 1700-and-up is the only place
   it has ever appeared. This therefore takes it off the site, not merely off
   one breakpoint. The query is kept so the rule says where it acts.

   It does NOT touch .ab-gh-marg, the separate hand the phone draws on the
   first mood header. That is a different element and is untouched. */
@media (min-width: 1700px) {
  #royaLibrary .ab-marg { display: none; }
}