/* ============================================================
   P. RAMLEE DIGITAL ARCHIVE — LONG-PAGE PATTERN LAYER
   Adapted from the supplied archive.css per INTEGRATION.md.

   LOAD ORDER: main.css FIRST, then this file.

   ADAPTATION NOTE — why the :root block from the original was removed:
   the supplied file redefined seven tokens this site already owns
   (--dur-fast/base/slow, --ease, --measure, --serif, --sans). Loading it
   verbatim would have slowed every transition on the site from 160ms to
   300ms and replaced Newsreader/Inter with Georgia/Helvetica. The patterns
   below are unchanged; only the token references are mapped onto the
   existing four-ink system.

     --ink       -> --eerie     #1A1F21
     --grey      -> --dim       #61686B
     --paper     -> --white     #FFFFFF
     --hairline  -> --platinum  (already the site's hairline)
     --apparatus -> retained as the ONE semantic addition, per the guide.
   ============================================================ */

:root{
  /* The single approved addition: a register shift for apparatus bands.
     Distinct from --offwhite (#FAFBFB), which is the near-invisible zebra
     stripe inside tables. --apparatus is meant to be seen; --offwhite is not. */
  --apparatus:#EFF4F4;
  /* Aliases so the supplied patterns read as written. */
  --ink:var(--eerie);
  --grey:var(--dim);
  --paper:var(--white);
  --hairline:rgba(26,31,33,.135);
  --gutter:clamp(24px,6vw,64px);
}

/* ------------------------------------------------------------
   PATTERN ONE — CHAPTER OPENER
   ------------------------------------------------------------ */
/* Defensive: the opener is a <header> element, and the site bar is also a
   <header>. main.css scopes its rule to `body > header`, but this reset makes
   the opener immune to any future unscoped header styling. */
header.chapter-opener{
  position:static;background:transparent;border-bottom:none;
  z-index:auto;box-shadow:none;
}
/* The opener needs air beneath it — the deck must not collide with the
   chapter head that follows. */
.chapter-opener{padding:clamp(56px,10vh,112px) 0 0;margin-bottom:var(--s-8)}
.chapter-opener__head{display:flex;align-items:baseline;gap:20px}
.chapter-opener__numeral{
  font-family:var(--serif);font-size:clamp(48px,7vw,72px);line-height:1;
  font-weight:300;color:var(--ink);opacity:.12;user-select:none;
}
.dark .chapter-opener__numeral{color:var(--white);opacity:.22}
.chapter-opener__eyebrow{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);
}
.dark .chapter-opener__eyebrow{color:var(--platinum)}
.chapter-opener__deck{
  font-family:var(--serif);font-size:clamp(19px,2.4vw,23px);line-height:1.55;
  font-weight:400;color:var(--ink);max-width:34ch;
  margin:22px 0 0;padding-bottom:var(--s-4);
}
.dark .chapter-opener__deck{color:var(--white)}

/* ------------------------------------------------------------
   PATTERN TWO — KEY PARAGRAPH (max one per chapter)
   The site's existing .turn is the same device; both are supported
   so neither name has to be chased through the markup.
   ------------------------------------------------------------ */
.key-paragraph,.turn{
  border-left:2px solid var(--ink);padding-left:22px;
  margin:2.5em 0;max-width:calc(var(--measure) - 2em);
}
.dark .key-paragraph,.dark .turn{border-left-color:var(--platinum)}
.key-paragraph p,.turn p{
  font-family:var(--serif)!important;font-size:1.22em!important;
  line-height:1.72!important;color:var(--ink);margin:0!important;font-weight:300;
}
.dark .key-paragraph p,.dark .turn p{color:var(--white)}

/* PATTERN TWO-B — PULL QUOTE (documented quotations only) */
.pull-quote{
  margin:3em 0;padding:1.6em 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  max-width:var(--measure);
}
.dark .pull-quote{border-color:rgba(208,216,220,.2)}
.pull-quote blockquote{
  font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);line-height:1.5;
  font-weight:300;color:var(--ink);margin:0;
}
.dark .pull-quote blockquote{color:var(--white)}
.pull-quote figcaption{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-top:14px;
}
.dark .pull-quote figcaption{color:var(--platinum)}

/* ------------------------------------------------------------
   PATTERN THREE — APPARATUS BAND
   White = narrative. Tinted = apparatus (evidence, ledgers, tables,
   counting notes, sources). Full-bleed; content stays on the grid.
   ------------------------------------------------------------ */
.apparatus{
  /* Full-bleed BAND: breaks out of any max-width parent and runs edge to edge.
     The guide is explicit that this is a band, not a boxed panel. */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:clamp(48px,9vh,112px) var(--s-3);
  margin-top:clamp(48px,8vh,96px);
  margin-bottom:clamp(48px,8vh,96px);
  background:rgba(239,244,244,.5);   /* #EFF4F4 at 50% */
}
@media(min-width:900px){.apparatus{padding-left:var(--s-8);padding-right:var(--s-8)}}
/* Content inside the band returns to the prose grid. */
.apparatus > *{max-width:var(--page);margin-left:auto;margin-right:auto}
.apparatus > .page{padding:0}

/* DARK CHAPTERS: a light band inside a dark section reads as a hole punched in
   the page. On dark, the register shift is carried by a lighter ink rather than
   a lighter ground. */
.dark .apparatus,
.apparatus.on-dark{
  /* A couple of shades off #1A1F21, not a lift toward white.
     The register shift on dark is carried by the hairlines, not the ground. */
  background:#20262A;
  border-top:1px solid rgba(208,216,220,.10);
  border-bottom:1px solid rgba(208,216,220,.10);
}
.dark .apparatus .apparatus__title,
.apparatus.on-dark .apparatus__title{color:var(--platinum)}
.dark .apparatus .sources li,
.apparatus.on-dark .sources li{color:var(--platinum)}
.dark .apparatus .sources a,
.apparatus.on-dark .sources a{color:var(--white)}

.apparatus__title{
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin:0 0 20px;
}
/* Contrast rule from the guide: small uppercase labels inside the tint
   must be ink, not grey. */
.apparatus .evidence-label,
.apparatus [class*='label'],
.apparatus .object-label,
.apparatus .an-label{color:var(--ink)}
.dark .apparatus [class*='label']{color:var(--platinum)}
/* Zebra rows sit on the tint, so lift the alternate stripe to paper. */
.apparatus .flist > li:nth-child(even),
.apparatus .slist > li:nth-child(even){background:rgba(255,255,255,.55)}
.apparatus .archival-note{margin-top:0}
/* The sources block loses its own rule and heading inside a band —
   the band's title and edge already do that work. */
.apparatus .sources{border-top:none;margin:0;padding-top:0;max-width:var(--measure)}
/* Every direct child of a band shares one left edge. */
.apparatus > *{max-width:var(--page);margin-left:auto;margin-right:auto}
.apparatus .apparatus__title,
.apparatus .sources,
.apparatus .archival-note{margin-left:auto;margin-right:auto;max-width:var(--page)}
.apparatus .sources ul{max-width:var(--measure)}

/* Mobile: evidence panels inside the band collapse to summaries */
@media(max-width:768px){
  .apparatus details.evidence-panel{border-top:1px solid var(--hairline);padding:12px 0}
  .apparatus details.evidence-panel > summary{
    font-family:var(--sans);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);cursor:pointer;list-style:none;
  }
  .apparatus details.evidence-panel > summary::-webkit-details-marker{display:none}
  .apparatus details.evidence-panel > summary::after{content:'+';float:right;color:var(--grey)}
  .apparatus details.evidence-panel[open] > summary::after{content:'\2212'}
}

/* ------------------------------------------------------------
   PATTERN FOUR — NAVIGATION SET   (JS in js/archive-nav.js)
   ------------------------------------------------------------ */

/* 4a. Chapter footer */
.chapter-footer{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:28px 0 12px;margin-top:var(--s-8);
  border-top:1px solid var(--hairline);
}
.dark .chapter-footer{border-top-color:rgba(208,216,220,.2)}
.chapter-footer a{
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease);
}
.dark .chapter-footer a{color:var(--white)}
.chapter-footer a:hover,.chapter-footer a:focus-visible{border-bottom-color:currentColor}
.chapter-footer a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.chapter-footer .to-top{color:var(--grey)}
.dark .chapter-footer .to-top{color:var(--platinum)}

/* 4b. Chapter rail — desktop only, clickable, current marked */
.chapter-rail{
  position:fixed;left:26px;top:50%;transform:translateY(-50%);
  display:none;flex-direction:column;gap:2px;z-index:40;
}
@media(min-width:1300px){.chapter-rail{display:flex}}
.chapter-rail a{
  font-family:var(--sans);font-size:10px;letter-spacing:.1em;
  color:var(--grey);text-decoration:none;padding:5px 8px;
  border-left:1px solid var(--hairline);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
  max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chapter-rail a:hover,.chapter-rail a:focus-visible{color:var(--ink)}
.chapter-rail a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.chapter-rail a[aria-current='true']{color:var(--ink);border-left:2px solid var(--ink);padding-left:7px}
/* Rail sits over dark chapters too */
body.on-dark-chapter .chapter-rail a{color:var(--platinum);border-left-color:rgba(208,216,220,.25)}
body.on-dark-chapter .chapter-rail a[aria-current='true']{color:var(--white);border-left-color:var(--white)}

/* 4c. Mobile position pill + sheet */
.chapter-pill{
  position:fixed;bottom:20px;left:20px;z-index:50;
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  background:var(--ink);color:var(--paper);border:0;border-radius:16px;
  padding:8px 14px;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease);
}
.chapter-pill.is-visible{opacity:1;pointer-events:auto}
@media(min-width:1300px){.chapter-pill{display:none}}
.chapter-pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.chapter-sheet{
  position:fixed;bottom:64px;left:20px;right:20px;max-width:360px;z-index:50;
  background:var(--paper);border:1px solid var(--hairline);padding:8px 0;display:none;
}
.chapter-sheet.is-open{display:block}
.chapter-sheet a{
  display:block;font-family:var(--sans);font-size:12px;letter-spacing:.06em;
  color:var(--grey);text-decoration:none;padding:10px 18px;
}
.chapter-sheet a[aria-current='true'],
.chapter-sheet a:hover,
.chapter-sheet a:focus-visible{color:var(--ink);background:var(--apparatus)}

/* 4d. Back to top */
.back-to-top{
  position:fixed;bottom:20px;right:20px;z-index:50;
  font-family:var(--sans);font-size:11px;letter-spacing:.12em;
  background:var(--paper);color:var(--ink);border:1px solid var(--hairline);
  border-radius:16px;padding:8px 14px;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease);
}
.back-to-top.is-visible{opacity:1;pointer-events:auto}
.back-to-top:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ------------------------------------------------------------
   QUALITY FLOOR
   ------------------------------------------------------------ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  font-family:var(--sans);font-size:12px;
  background:var(--ink);color:var(--paper);padding:10px 16px;
}
.skip-link:focus{left:0}
@media(prefers-reduced-motion:reduce){
  .chapter-pill,.back-to-top,.chapter-rail a{transition:none}
}

/* ---------- A–Z STRIP + PROGRESSIVE REVEAL (Soundstage catalogue)
   Lives here, not in song.css: song.css is loaded only by individual song
   pages, and these controls belong to the catalogue on soundstage.html. ----------
   Matches the In Memoriam index: bare letters, generous spacing, a rule
   beneath. No boxes — the buttons should read as typography, not chrome. */
.cat-note{font-size:var(--t-caption);line-height:1.7;color:var(--dim);max-width:44em;margin-top:var(--s-4)}
.az-strip{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);
  margin:var(--s-8) 0 var(--s-4);padding-bottom:var(--s-3);
  border-bottom:1px solid var(--platinum)}
.az-strip button{appearance:none;background:transparent;border:none;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-caption);font-weight:500;letter-spacing:.14em;
  color:var(--dim);padding:.25em .5em;
  transition:color var(--dur-fast) var(--ease)}
.az-strip button:hover{color:var(--eerie)}
.az-strip button.is-on{color:var(--eerie)}
.az-strip button:focus-visible{outline:2px solid var(--eerie);outline-offset:2px}

.more-wrap{display:flex;justify-content:center;margin-top:var(--s-8)}
.more-btn{appearance:none;background:transparent;cursor:pointer;border:none;
  border-bottom:1px solid var(--platinum);color:var(--dim);
  font-family:var(--sans);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:.6em .2em;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.more-btn:hover{color:var(--eerie);border-bottom-color:var(--eerie)}
.more-btn:focus-visible{outline:2px solid var(--eerie);outline-offset:3px}


/* Figure inside a Chronicle chapter. On the dark chapter the caption must
   sit on the dark ground, not a light panel. */
.chapter-fig{margin:var(--s-8) 0;max-width:var(--measure)}
.chapter-fig img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.03)}
.chapter-fig figcaption{font-family:var(--sans);font-size:var(--t-caption);line-height:1.6;
  color:var(--dim);margin-top:var(--s-2)}
.chapter.dark .chapter-fig figcaption{color:var(--platinum)}

/* ---------- TESTIMONY ----------
   A transcription of a recording, in the speaker's own language. Set as
   evidence, not as decoration: the Malay is the record, the English is a
   translation beneath it, and both are marked as such. */
.testimony{margin:var(--s-8) 0;padding-left:var(--s-4);
  border-left:2px solid var(--eerie);max-width:var(--measure)}
.tm-label{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-3)}
.testimony blockquote{font-family:var(--serif);font-size:1.12rem;line-height:1.7;
  color:var(--eerie);margin:0 0 var(--s-3)}
.tm-tr{font-size:var(--t-caption);line-height:1.7;color:var(--dim);margin-bottom:var(--s-3)}
.tm-note{font-size:var(--t-caption);line-height:1.7;color:var(--dim);
  padding-top:var(--s-3);border-top:1px solid var(--platinum)}
.chapter.dark .testimony{border-left-color:var(--platinum)}
.chapter.dark .testimony blockquote{color:var(--white)}
.chapter.dark .tm-tr,.chapter.dark .tm-note{color:var(--platinum)}