/* ============================================================
   screenplay.css — Ibu Mertua-ku (1962): The Screenplay

   One page, so far — books/ibu-mertuaku.html. Everything here is
   either the Courier Prime type system for the screenplay reader, or
   the handful of one-off blocks (dedication, credits, cast, downloads)
   that page needs and no other page shares. The sticky contents rail,
   the mobile sheet and the reading-progress line are NOT redefined
   here — they reuse .book-rail / .bk-sticky / .bk-sheet / .bk-progress
   from archive-page.css wholesale, because a reader who has met that
   furniture on a book chapter should not have to learn it twice under
   a different name.

   COURIER PRIME, SELF-HOSTED. The brief asked for "the industry
   standard screenwriting font, freely available from Google Fonts" —
   which is a request about what the font IS, not about where the byte
   are served from. Every other typeface on this site is self-hosted as
   woff2 under fonts/, and a live request to fonts.googleapis.com would
   be the one asset on the page that leaks a visitor's IP to a third
   party and the one asset that goes blank if that third party is slow
   or blocked. Same font, same license, no new request. */

@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/courier-prime-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/courier-prime-latinext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/courier-prime-latin-bold.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/courier-prime-latinext-bold.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{--mono-script:'Courier Prime','Courier New',monospace}

/* ---------- THE DEDICATION ----------
   The very first thing on the page, before the hero, before the
   eyebrow, before anything — per the brief. Quiet on purpose: no
   border, no label, no icon. A line, then the page begins. */
.im-dedication{
  max-width:34em;margin:var(--s-10) auto var(--s-6);padding:0 var(--s-3);
  text-align:center;
}
.im-dedication p{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:var(--t-lead);line-height:1.6;color:var(--dim);
}
.im-dedication p + p{margin-top:.4em}
@media(min-width:900px){.im-dedication{margin-top:var(--s-12)}}

/* ---------- CREDITS AND CAST ----------
   Same grid film.css uses for a title card's dl, reimplemented here
   rather than pulling in the whole film stylesheet for five lines. */
.im-credits{display:grid;grid-template-columns:1fr;gap:0;max-width:38em}
.im-credits > div{display:grid;grid-template-columns:1fr;gap:2px;
  padding:var(--s-2) 0;border-top:1px solid var(--platinum)}
@media(min-width:600px){.im-credits > div{grid-template-columns:14em 1fr;gap:var(--s-3);align-items:baseline}}
.im-credits dt{font-family:var(--sans);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.im-credits dd{font-family:var(--sans);font-size:.94rem;line-height:1.6;color:var(--eerie)}

.im-cast{margin-top:var(--s-6);max-width:38em}
.im-cast-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);
  padding:var(--s-2) 0;border-top:1px solid var(--platinum);align-items:baseline}
.im-cast-row:last-child{border-bottom:1px solid var(--platinum)}
.im-cast-actor{font-family:var(--sans);font-size:.94rem;font-weight:500;color:var(--eerie)}
.im-cast-char{font-family:var(--serif);font-size:.98rem;color:var(--dim)}
@media(max-width:560px){
  .im-cast-row{grid-template-columns:1fr;gap:.15em}
  .im-cast-char{font-size:.9rem}
}

/* ---------- DOWNLOADS ----------
   The one place on the page a link leaves the reading surface. Same
   .dl chip papers.js already draws for monographs and testimony. */
.im-downloads{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-4)}
.im-downloads .dl{
  font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--eerie);
  text-decoration:none;border:1px solid var(--platinum);border-radius:6px;
  padding:.7em 1.3em;display:inline-flex;align-items:baseline;gap:.6em;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.im-downloads .dl:hover{background:var(--offwhite);border-color:var(--dim)}
.im-downloads .dl-meta{font-size:.78em;color:var(--dim);font-weight:400}

/* ---------- THE SCREENPLAY PAGE'S OWN CONTENTS NAV ----------
   .erg-item is normally a child of .erg-list, which supplies the
   flex-column stacking (see archive-page.css / essay.css) — but that
   list only ever appears inside the collapsible .erg group the book
   and the essays use. This page has one flat list of nine anchors, no
   groups to fold, so js/screenplay.js writes the links straight into
   #scrRail / #scrSheet without that wrapper. Stacking them is the one
   rule those two files don't already supply. */
@media(min-width:1300px){
  #scrRail.book-rail{display:flex;flex-direction:column}
}
#scrSheet:not([hidden]){display:flex;flex-direction:column}
#scrRail .erg-item,
#scrSheet .erg-item{display:block}

/* ---------- THE TABLE OF CONTENTS ----------
   Reuses .bk-part / .bk-row wholesale (defined in archive-page.css for
   the book), because the shape — a labelled group, then a row per
   item — is exactly the shape this needs too, and a reader who has
   seen it once on books.html should not have to learn a second
   version of the same idea here. The only addition is a small note
   under the "Screenplay" group explaining what "on this page" means. */
.im-toc-note{
  font-family:var(--sans);font-size:.86rem;line-height:1.6;color:var(--dim);
  max-width:42em;margin:calc(var(--s-2) * -1) 0 var(--s-4);
}

/* ---------- THE READER ----------
   Courier Prime, a fixed measure roughly the width of a bound page,
   and margins that echo — without literally reproducing — the
   conventions of a shooting script: the scene heading picked out in
   small caps and bold, the character's name centred over the
   dialogue, the parenthetical smaller and indented further. This is a
   reading page, not a production document, so nothing here is paced
   to the physical 55-lines-per-page rule real screenplay formatting
   uses; it is paced to what is comfortable on a screen. */
.im-script-wrap{
  background:var(--offwhite);border:1px solid var(--platinum);border-radius:10px;
  padding:var(--s-6) var(--s-4);margin-bottom:var(--s-8);
}
@media(min-width:700px){.im-script-wrap{padding:var(--s-10) var(--s-10)}}

.im-script{
  font-family:var(--mono-script);font-size:.92rem;line-height:1.7;color:var(--eerie);
  max-width:40em;margin:0 auto;
}
.im-script h3{
  font-family:var(--mono-script);font-weight:700;font-size:.92rem;
  text-transform:uppercase;letter-spacing:.03em;
  margin:2em 0 1em;padding-bottom:.3em;border-bottom:1px solid var(--platinum);
}
.im-script h3:first-child{margin-top:0}
.im-script h2{ /* transitions, e.g. CUT TO:, FADE OUT. */
  font-family:var(--mono-script);font-weight:700;font-size:.92rem;
  text-transform:uppercase;text-align:right;margin:1.6em 0;
}
.im-script > p{margin:0 0 1.2em}
.im-script .dialogue{max-width:29em;margin:0 auto 1.4em}
.im-script .dialogue h4{
  font-family:var(--mono-script);font-weight:700;font-size:.92rem;
  text-transform:uppercase;text-align:center;margin:0 0 .2em;
}
.im-script .dialogue p{margin:0 0 .6em}
.im-script .dialogue p.parenthetical{
  text-align:center;font-style:italic;color:var(--dim);
  max-width:20em;margin-left:auto;margin-right:auto;
}
.im-script p.centered{text-align:center}
.im-script p.lyrics{font-style:italic;padding-left:1.5em}
.im-script hr{border:0;border-top:1px dashed var(--platinum);margin:2.4em 0}
.im-script br{content:'';display:block;margin:.15em 0}

/* WHILE THE SCRIPT IS STILL LOADING, or if Fountain.js failed to
   initialise for some reason, the mount holds nothing rather than a
   half-built page. This is the state a member sees for a fraction of
   a second before js/screenplay.js fills it in, and the state a
   member keeps seeing if the library never loads at all — quiet,
   not broken. */
.im-script:empty::before{
  content:'';
}
.im-script-note{
  font-family:var(--sans);font-size:.84rem;color:var(--dim);
  margin-bottom:var(--s-3);
}

/* ---------- PART DIVIDERS ----------
   Editorial framing, drawn deliberately in the site's own sans, not in
   Courier Prime — so it is never mistaken for something that is
   printed on the original document. The five parts are a reading aid
   this site added; the scenes inside each are not. */
.im-part-head{
  max-width:40em;margin:0 auto var(--s-4);padding-top:var(--s-6);
  border-top:1px solid var(--platinum);
}
.im-part-head:first-child{padding-top:0;border-top:0}
.im-part-head .object-label{margin-bottom:.3em}
.im-part-head h3{
  font-family:var(--serif);font-weight:400;font-size:var(--t-h3);
  letter-spacing:-.005em;
}

/* ---------- ANNOTATION MARKERS, IN THE SCRIPT ----------
   Dropped by js/screenplay.js right after the scene heading each note
   belongs to. Same reasoning as the part dividers above: this is
   editorial apparatus the site added, not the document, so it is set
   in the sans, never in Courier Prime — a mark that could be mistaken
   for something typed onto the original page would defeat the whole
   point of the mono typeface signalling "this part is the primary
   source." Sits flush against the scene heading's own bottom border so
   it reads as *about* the scene just named, not as part of the action
   that follows it. */
.im-annote-marks{
  margin:-.6em 0 1.4em;display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5em;
  scroll-margin-top:calc(var(--bk-top,0px) + var(--s-4));
}
.im-annote-marks .im-annote-panel{flex:0 0 100%}
.im-annote-mark{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--dim);
  background:none;border:1px solid var(--platinum);border-radius:99px;
  padding:.3em .8em;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.im-annote-mark:hover{border-color:var(--dim);color:var(--eerie)}
.im-annote-mark.is-open{background:var(--eerie);border-color:var(--eerie);color:var(--offwhite)}

.im-annote-panel{
  font-family:var(--sans);font-size:.88rem;line-height:1.65;color:var(--eerie);
  max-width:34em;margin:0 auto 1.4em;background:var(--offwhite);
  border:1px solid var(--platinum);border-radius:8px;padding:var(--s-4);
}
.im-annote-panel-h{
  font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--eerie);
  margin-bottom:.6em;
}
.im-annote-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.6em;height:1.6em;padding:0 .3em;border-radius:99px;
  background:var(--eerie);color:var(--offwhite);
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  vertical-align:middle;
}
.im-annote-panel p.en,.im-annote-panel p.bm{margin:0 0 .8em}
.im-annote-full{
  font-family:var(--sans);font-size:.82rem;font-weight:500;
  color:var(--dim);text-decoration:none;
}
.im-annote-full:hover{color:var(--eerie);text-decoration:underline}

/* ---------- CONSOLIDATED ANNOTATIONS ----------
   Reuses .bk-part for the five group headings (same component the
   Table of Contents uses), so this reads as one more grouped list on
   a page that already has one, not a second visual language. */
.im-annote-list{max-width:42em}
.im-annote-item{
  padding:var(--s-4) 0;border-top:1px solid var(--platinum);
  font-family:var(--sans);font-size:.92rem;line-height:1.7;color:var(--eerie);
  scroll-margin-top:calc(var(--bk-top,0px) + var(--s-4));
}
.im-annote-group:last-child .im-annote-item:last-child{border-bottom:1px solid var(--platinum)}
.im-annote-item-h{
  font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--eerie);
  margin-bottom:.6em;
}
.im-annote-item p.en,.im-annote-item p.bm{margin:0 0 .9em}

/* the quick-jump index: sticks just under the header while the reader
   scrolls the 22 entries, the same offset .bk-sticky already uses on
   mobile — so this is the desktop/anywhere counterpart of that idea,
   scoped to one section instead of the whole page. */
.im-annote-index{
  position:sticky;top:var(--bk-top,0px);z-index:2;
  background:var(--offwhite);border:1px solid var(--platinum);border-radius:8px;
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);
}
.im-annote-index-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em}
.im-annote-index-h{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim);margin-right:.3em;flex-basis:100%;
}
.im-annote-index a{
  font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--eerie);
  text-decoration:none;border:1px solid var(--platinum);border-radius:99px;
  width:1.9em;height:1.9em;display:inline-flex;align-items:center;justify-content:center;
}
.im-annote-index a:hover{border-color:var(--eerie);background:var(--eerie);color:var(--offwhite)}
@media(max-width:560px){.im-annote-index{gap:var(--s-3) var(--s-4)}}