/* ══════════════════════════════════════════════════════════════════════
   TOLKIEN ILLUMINATIONS · page register

   Loaded AFTER content.css on /illuminations/ and its film pages only. The
   room, band, eyebrow, title, gilt frame, wall label and cards are the
   site's own and are not restated here. This sheet adds one thing: the
   LEAF, a parchment sheet laid on the dark ground below the film, which
   carries everything illumination-specific in the film's own hand.

   Palette from the film code (film/lib/Parchment.tsx tone "leaf",
   film/lib/Hatch.tsx, inkLaws): parchment base/centre/edge, iron-gall ink,
   pencil + halo for the reconstructed, gold as the single restrained accent.
   Design record: experiments/illuminations_site/ (plan.md, review.html).
   ══════════════════════════════════════════════════════════════════════ */

/* ── The film's faces, self-hosted ───────────────────────────────
   Subsets (Latin, Latin-1, Latin Extended-A, typographic punctuation) of
   the film's own Cinzel (variable, instanced to 500–600) and Cormorant
   Garamond Medium Italic, cut from the Remotion package's fonts. */
@font-face{
  font-family:'Cinzel';
  font-style:normal; font-weight:500 600; font-display:swap;
  src:url('/fonts/cinzel-500.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic; font-weight:500; font-display:swap;
  src:url('/fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}

:root{
  --leaf-base:#efdfbf;
  --leaf-centre:#f7ead0;
  --leaf-edge:rgba(96,62,26,.46);
  --ink:#241f18;
  --ink-2:#2b271f;
  --pencil:#4e483e;
  --pencil-halo:#f3e6c8;
  --leaf-gold:#a8823a;
  --font-stamp:'Cinzel', 'Trajan Pro', 'Georgia', serif;
  --font-note:'Cormorant Garamond', 'EB Garamond', 'Georgia', serif;
}

/* ── The wall label ──────────────────────────────────────────────
   The site's facts grid (content.css) is sized for short episode values;
   a film's "Drawn from" is a sentence, so here the value takes the rest of
   the row and wraps. Page-scoped: this sheet loads on film pages only. */
.workSaid .facts > div{ grid-template-columns:max-content minmax(0,1fr); }
.workSaid .facts dd{ min-width:0; white-space:normal; overflow-wrap:break-word; }

/* ── The leaf ────────────────────────────────────────────────────
   Paper built in CSS, the way the film builds it (Parchment.tsx is
   procedural too): a warm base, a lighter centre, low-frequency mottle,
   a fine tooth, and darker edges. No raster. The two SVG noises tile
   (stitchTiles) so a leaf of any height carries them without a seam. */
.leaf{
  position:relative;
  max-width:1040px; margin:clamp(44px,6.5vh,80px) auto 0;
  border-radius:7px;
  color:var(--ink);
  background-color:var(--leaf-base);
  background-image:
    /* tooth */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E"),
    /* mottle: foxing and uneven sizing */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.00625' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .58 0 0 0 0 .37 0 0 0 0 .13 0 0 -1.6 0 .78'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23m)' opacity='.34'/%3E%3C/svg%3E"),
    /* the lighter centre, as a long lamp down the sheet */
    radial-gradient(70% 46% at 50% 22%, var(--leaf-centre) 0%, rgba(247,234,208,0) 100%),
    radial-gradient(64% 40% at 50% 74%, var(--leaf-centre) 0%, rgba(247,234,208,0) 100%);
  background-size:220px 220px, 640px 640px, 100% 100%, 100% 100%;
  box-shadow:
    /* darkened deckle: a tight burnt line, then a soft edge-band */
    inset 0 0 0 1px rgba(96,62,26,.42),
    inset 0 0 6px 1px rgba(96,62,26,.30),
    inset 0 0 72px 6px var(--leaf-edge),
    /* laid on the desk */
    0 1px 0 rgba(255,244,220,.06),
    0 46px 90px -34px rgba(0,0,0,.95),
    0 10px 26px rgba(0,0,0,.5);
}
.leaf ::selection{ background:rgba(168,130,58,.32); color:var(--ink); }
.leafSheet{
  position:relative;
  padding:clamp(40px,6vw,76px) clamp(28px,6.4vw,80px) clamp(36px,5vw,64px);
}
.leafSec{ scroll-margin-top:24px; }
.leafSec + .leafSec{ margin-top:clamp(52px,7.5vw,92px); }

/* ── Stamps and the manuscript rule ──────────────────────────────── */
.leafHead{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--font-stamp); font-weight:600;
  font-size:15px; line-height:1.2; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink);
}
.leafNum{
  font-family:var(--font-stamp); font-weight:500; font-size:12.5px;
  letter-spacing:.12em; color:var(--leaf-gold);
  min-width:1.8em;
}
/* The series mark: hairline, end ticks, centre lozenge (film/lib Ink.tsx
   RuleLine). Drawn once as an SVG symbol; the lozenge is an element so it
   keeps its shape however wide the rule runs. */
.mRule{
  position:relative; height:14px; margin:12px 0 clamp(22px,3vw,32px);
  color:rgba(36,31,24,.78);
}
.mRule svg{ display:block; width:100%; height:14px; overflow:visible; }
.mRule i{
  position:absolute; left:50%; top:50%;
  width:8px; height:8px; margin:-4px 0 0 -4px;
  background:var(--ink); transform:rotate(45deg) scaleX(1.25);
  box-shadow:0 0 0 3px var(--leaf-centre);
}

/* ── Notes: the film's italic hand ───────────────────────────────── */
.leafNote{
  font-family:var(--font-note); font-style:italic; font-weight:500;
  font-size:22px; line-height:1.38; color:var(--ink-2);
  text-wrap:pretty;
}
.leafNote i, .leafNote em{ font-style:normal; }

/* ── I · The drawing ─────────────────────────────────────────────
   Shown as INK ONLY: web/leaf-ink.jpg is the still divided by the film's
   own paper, so it is white where the film shows paper and multiplies onto
   this sheet as the film's ink on the page's paper. The lightbox opens the
   true frame (web/leaf.jpg). */
.leafPlate{ margin:0; }
.leafPlateBtn{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; -webkit-tap-highlight-color:transparent;
}
.leafPlateBtn img{
  display:block; width:100%; height:auto;
  box-shadow:0 0 0 1px rgba(36,31,24,.28), 0 14px 30px -16px rgba(60,38,12,.55);
  transition:box-shadow .4s ease, filter .4s ease;
}
.leafPlateBtn img.leafInk{
  box-shadow:none; mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect;
}
.leafPlateBtn:hover img.leafInk{ filter:contrast(1.06); }
.leafPlateBtn:focus-visible{ outline:1px solid var(--leaf-gold); outline-offset:4px; }
.leafPlate figcaption{ margin-top:16px; }

.leafVerb{
  display:inline-flex; align-items:center; gap:.55em;
  margin-top:10px; padding:8px 0; min-height:36px;
  border:0; background:none; cursor:pointer;
  font-family:var(--font-stamp); font-weight:600; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  transition:color .3s ease;
}
.leafVerb em{ font-style:normal; transition:transform .3s ease; }
.leafVerb:hover{ color:var(--leaf-gold); }
.leafVerb:hover em{ transform:translateX(3px); }
.leafVerb:focus-visible{ outline:1px solid var(--leaf-gold); outline-offset:3px; }

/* ── II · Chapters ───────────────────────────────────────────────
   Read down the first column, then the second: chronological. */
.chapters{ list-style:none; margin:0; padding:0; columns:2; column-gap:clamp(32px,5vw,64px); }
.chapters li{ break-inside:avoid; }
.chap{
  display:grid; grid-template-columns:3.6em 1fr; align-items:baseline;
  padding:9px 0 8px;
  border-bottom:1px solid rgba(36,31,24,.14);
  color:var(--ink); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.chT{
  position:relative;
  font-family:var(--font-stamp); font-weight:600; font-size:14.5px;
  letter-spacing:.06em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.chN{
  font-family:var(--font-display); font-size:19px; line-height:1.3; color:var(--ink-2);
}
.chap:hover .chT, .chap.now .chT{ color:var(--leaf-gold); }
.chap:hover .chN{ color:#000; }
.chap.now .chT::before{
  content:''; position:absolute; left:-14px; top:.45em;
  width:6px; height:6px; background:var(--leaf-gold); transform:rotate(45deg);
}
.chap:focus-visible{ outline:1px solid var(--leaf-gold); outline-offset:2px; }

/* ── III · The ledger ────────────────────────────────────────────
   A real table, generic over web/ledger.json. It may be tall; that is the
   point of it. From a tablet up it fits the leaf: long cells wrap, nothing
   clips. Below 700px the source column (.ledgerMinor) yields, and only
   there may the table scroll sideways — inside the leaf, never the page. */
.ledgerScroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%; min-width:0;
  padding-bottom:4px;
}
.leaf, .leafSheet, .leafSec{ min-width:0; }
.ledgerScroll:focus-visible{ outline:1px solid var(--leaf-gold); outline-offset:4px; }
.ledger{
  width:100%; border-collapse:collapse;
  font-family:var(--font-display); color:var(--ink-2);
}
.ledger caption{
  caption-side:top; text-align:left; padding-bottom:14px;
  font-family:var(--font-stamp); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.ledger caption span{
  display:block; margin-top:4px;
  font-family:var(--font-note); font-style:italic; font-weight:500;
  font-size:18px; letter-spacing:0; text-transform:none; color:var(--pencil);
}
.ledger thead th{
  padding:0 12px 8px 0; text-align:left; vertical-align:bottom;
  font-family:var(--font-stamp); font-weight:600; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  border-bottom:1.5px solid var(--ink);
}
.ledger td, .ledger tbody th{
  padding:7px 12px 6px 0; vertical-align:baseline; text-align:left;
  border-bottom:1px solid rgba(36,31,24,.11);
  font-size:16px; line-height:1.3;
}
.ledger td:empty::after{ content:"\2014"; color:rgba(78,72,62,.6); }
.ledger tbody th[scope="row"]{
  font-family:var(--font-stamp); font-weight:500; font-size:14px;
  letter-spacing:.05em; color:var(--ink);
}
.ledger .num{
  width:3.2em; padding-right:16px; text-align:right; white-space:nowrap;
  font-family:var(--font-stamp); font-weight:600; font-size:13.5px;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.ledger thead th.num{ font-size:10.5px; }
.ledger .ledgerMinor{ font-size:15px; color:var(--pencil); }
.ledger thead th.ledgerMinor{ font-size:10.5px; color:var(--ink); }
.ledger tr.ledgerGroup th{
  padding:24px 0 6px; border-bottom:1px solid rgba(36,31,24,.42);
  font-family:var(--font-note); font-style:italic; font-weight:500;
  font-size:20px; letter-spacing:0; text-transform:none; color:var(--ink);
}
.ledger tbody:first-of-type tr.ledgerGroup th{ padding-top:10px; }
/* The landmarks the film counts to: gold figure, heavier name. */
.ledger tr.key th[scope="row"]{ font-weight:600; }
.ledger tr.key .num{ color:var(--leaf-gold); }

/* Pencil: counted, not named — the film's confidence doctrine. */
.ledger tr.pencil td, .ledger tr.pencil th{ color:var(--pencil); }
.ledger tr.pencil .num{ font-weight:500; color:var(--pencil); }
.ledger tr.pencil th[scope="row"]{ font-family:var(--font-note); font-style:italic; font-weight:500; font-size:17px; letter-spacing:0; }
/* A folded run of pencil rows (span > 1): one row standing for many, so it
   sits on a faint hatch of its own. */
.ledger tr.ledgerSpan > *{
  background:repeating-linear-gradient(-45deg, rgba(78,72,62,.07) 0 1px, transparent 1px 6px);
}
.unnamed{ text-shadow:0 0 3px var(--pencil-halo); white-space:nowrap; }
.hatch{
  display:inline-block; vertical-align:-1px;
  width:22px; height:11px; margin-right:9px;
  background:repeating-linear-gradient(-45deg,
    var(--pencil) 0 1.15px, transparent 1.15px 4.8px);
  box-shadow:inset 0 0 0 1px rgba(78,72,62,.75);
}
.legInk{
  display:inline-block; vertical-align:-1px;
  width:22px; height:11px; margin-right:9px; background:var(--ink);
}
.legend{
  margin-top:16px;
  font-family:var(--font-note); font-style:italic; font-weight:500;
  font-size:18.5px; line-height:1.5; color:var(--ink-2);
}
.legItem{ white-space:nowrap; }
.legItem + .legItem{ margin-left:1.4em; }
@media (max-width: 1040px){
  .legItem{ display:block; white-space:normal; }
  .legItem + .legItem{ margin-left:0; margin-top:4px; }
}
@media (max-width: 699px){
  .ledger{ min-width:500px; }
  .ledger .ledgerMinor{ display:none; }
}

/* ── IV · What was said ──────────────────────────────────────────
   The transcript at the site's own prose measure and size, in ink. */
.leafProse{
  max-width:64ch;
  font-family:var(--font-display); font-size:20.5px; line-height:1.62;
  color:var(--ink-2); text-wrap:pretty;
}
.leafProse > * + *{ margin-top:1.05em; }
.leafProse h3{
  margin-top:2.1em;
  font-family:var(--font-stamp); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.leafProse > h3:first-child{ margin-top:0; }
.leafProse h3 + p{ margin-top:.55em; }
.leafProse a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid rgba(36,31,24,.45); padding-bottom:1px;
  transition:color .3s ease, border-color .3s ease;
}
.leafProse a:hover{ color:var(--leaf-gold); border-bottom-color:var(--leaf-gold); }
.leafProse a em{ font-style:normal; }
.leafProse .leafNote{ font-size:19.5px; }
.madeLine{ font-size:17.5px; color:var(--pencil); }

/* ── The leaf's colophon ─────────────────────────────────────────── */
.leafColophon{ margin-top:clamp(56px,8vw,96px); text-align:center; }
.leafColophon .mRule{ max-width:280px; margin:0 auto 12px; }
.leafColophon p{
  font-family:var(--font-note); font-style:italic; font-weight:500;
  font-size:19px; color:var(--pencil);
}

/* ── Series index ────────────────────────────────────────────────── */
.nextLine{
  display:block; margin-top:clamp(11px,2vh,22px);
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.18em;
  color:rgba(139,155,180,.86);
}

/* ── The phone ───────────────────────────────────────────────────
   Same query as the site's own narrow block. The leaf keeps a 16px inner
   gutter. */
@media (max-width: 860px), (hover: none){
  .leaf{ border-radius:5px;
    box-shadow:
      inset 0 0 0 1px rgba(96,62,26,.42),
      inset 0 0 5px 1px rgba(96,62,26,.30),
      inset 0 0 38px 3px var(--leaf-edge),
      0 30px 60px -26px rgba(0,0,0,.95);
  }
  .leafSheet{ padding:30px 16px 28px; }
  .leafHead{ font-size:13.5px; gap:10px; letter-spacing:.18em; }
  .leafNote{ font-size:20px; }
  .chapters{ columns:1; }
  .chN{ font-size:18px; }
  .leafProse{ font-size:18px; max-width:none; }
  .legend{ font-size:17.5px; }
}