/* ══════════════════════════════════════════════════════════════════════
   BEFORE THE HOBBIT  ·  page-scoped

   A picture-book of the history before Bilbo, thirty plates down the left,
   the chart that follows them pinned on the right. The plates and the chart
   are WORKS (the kit's gilt); everything else is FURNITURE (hairline, the
   room's ground). The only pigments minted here are the four era inks, and
   they arrive from story.json as --ink on each beat, era head, pin and
   spine segment. On the dark ground an ink is lifted toward paper so a
   number can be read; on the chart's paper it is used straight.
   ══════════════════════════════════════════════════════════════════════ */
.bh{
  max-width:1240px; margin-inline:auto;
  --paper:#faf4e8; --ink-dark:#2a2018;
}
.bh .pageTitle{ font-size:clamp(40px,5vw,78px); letter-spacing:-.01em; }
.bh .pageLede{ max-width:64ch; }
.bhHead{ max-width:780px; }

/* ── The stage: the book, and the rail beside it ─────────────────── */
.bhStage{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);
  gap:clamp(28px,3.4vw,56px); align-items:start;
  margin-top:clamp(40px,7vh,84px);
}
.bhBook{ grid-column:1; grid-row:1; min-width:0; }
.bhRail{
  grid-column:2; grid-row:1; align-self:start;
  position:sticky; top:clamp(14px,3vh,28px);
}
.bhRailSpacer{ display:none; }
.bhClose{ display:none; }

/* ── An age begins ───────────────────────────────────────────────── */
.bhEraHead{
  margin:clamp(70px,13vh,150px) 0 clamp(26px,4vh,40px);
  scroll-margin-top:6vh;
}
.bhEraHead:first-child{ margin-top:0; }
.bhEraLabel{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,2.6vw,40px); line-height:1.1; color:var(--warm-gold);
}
.bhEraSub{
  margin-top:6px;
  font-family:var(--font-display); font-style:italic;
  font-size:19px; color:rgba(232,228,221,.6);
}
.bhEraHead i{
  display:block; height:1px; margin-top:clamp(14px,2vh,20px);
  background:linear-gradient(90deg, color-mix(in srgb, var(--ink) 70%, #f3e8d6) 0%,
    color-mix(in srgb, var(--ink) 40%, transparent) 46%, transparent 100%);
}

/* ── A beat: the plate, then its words ───────────────────────────── */
.bhBeat{ scroll-margin-top:6vh; }
.bhBeat + .bhBeat{ margin-top:clamp(70px,14vh,160px); }
.bhCanvas.plateCanvas{
  aspect-ratio:4 / 3; container-type:inline-size;
  /* Paper, for a plate not yet drawn: the frame stands ready, not broken. */
  background:radial-gradient(120% 100% at 50% 40%, #ece3d1 0%, #e2d6bf 64%, #d5c6a8 100%);
}
.bhGhost{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:400; font-size:44cqw; line-height:1;
  color:var(--ink); opacity:.16; user-select:none;
}
.bhCanvas > img{ z-index:1; }
.bhBody{ margin-top:clamp(18px,2.6vh,26px); max-width:62ch; }
.bhHeadRow{ display:flex; align-items:baseline; gap:clamp(12px,1.4vw,18px); }
.bhNum{
  flex:0 0 auto; min-width:1.4em;
  font-family:var(--font-display); font-size:clamp(30px,2.6vw,40px); line-height:1;
  color:color-mix(in srgb, var(--ink) 62%, #f3e8d6);
}
.bhTitle{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(25px,2.1vw,33px); line-height:1.15; color:var(--warm-gold);
  text-wrap:balance;
}
.bhYear{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  margin-top:12px;
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em; color:rgba(232,200,154,.86);
}
.bhYear::before{
  content:''; width:22px; height:2px;
  background:color-mix(in srgb, var(--ink) 62%, #f3e8d6);
}
.bhInferred{
  font-family:var(--font-display); font-style:italic; font-size:15px;
  text-transform:none; letter-spacing:.02em; color:rgba(139,155,180,.95);
  text-decoration:underline dotted rgba(139,155,180,.7); text-underline-offset:3px;
}
.bhInferred:hover{ color:var(--warm-gold); }
.bhCaption{
  margin-top:16px;
  font-family:var(--font-display); font-size:20.5px; line-height:1.62;
  color:rgba(232,228,221,.84); text-wrap:pretty;
}
.bhQuote{
  margin-top:18px; padding:.15em 0 .15em 1.15em;
  border-left:1px solid rgba(201,168,117,.4);
}
.bhQuote p{
  font-family:var(--font-display); font-style:italic; font-size:21px; line-height:1.5;
  color:rgba(232,200,154,.86);
}
.bhQuote cite{
  display:block; margin-top:.6em;
  font-family:var(--font-serif); font-style:normal; font-size:10px;
  text-transform:uppercase; letter-spacing:.2em; color:rgba(139,155,180,.86);
}
.bhPlace{
  display:flex; align-items:center; gap:9px; margin-top:18px;
  font-family:var(--font-serif); font-size:10px;
  text-transform:uppercase; letter-spacing:.2em; color:rgba(139,155,180,.92);
}
.bhGlyph{ flex:0 0 auto; width:14px; height:14px; overflow:visible; }
.bhGlyph circle{ fill:color-mix(in srgb, var(--ink) 62%, #f3e8d6); }
.bhGlyph.is-off circle, .bhGlyph.is-off path{
  fill:none; stroke:color-mix(in srgb, var(--ink) 62%, #f3e8d6); stroke-width:1.6; stroke-linecap:round;
}
.bhBody .quietVerb{ margin-top:8px; }

/* ── The rail: the chart is a work ───────────────────────────────── */
.bhFrame{ padding:2px; }
.bhChart{
  position:relative; overflow:hidden; aspect-ratio:4 / 3;
  background:var(--paper);
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.bhChart.is-dragging{ cursor:grabbing; }
.bhChart:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }
.bhLayer{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.bhLayer.is-on{ opacity:1; }
.bhLayer.is-faded{ opacity:.45; }
.bhLayer.is-ghost{ opacity:.12; }
.bhWorld{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.bhWorld img{ position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none; }
.bhSvg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

.bhPinHalo{ fill:var(--ink); opacity:.16; }
.bhPinRing{ fill:var(--paper); stroke:var(--ink); stroke-width:3.4; }
.bhPinDot{ fill:var(--ink); }
.bhPinLabel, .bhStripLabel b, .bhStripLabel span{
  /* A letterform-fitted paper clearing, never a scrim. */
  paint-order:stroke fill; stroke-linejoin:round;
}
.bhPinLabel{
  font-family:var(--font-display); font-style:italic; font-size:17px; letter-spacing:.03em;
  fill:var(--ink-dark); dominant-baseline:middle;
  stroke:var(--paper); stroke-width:5px;
}
.bhTrailLine{ fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.bhTrailDot circle{ opacity:.8; }

/* Off the chart: a hollow ring at the edge, pointing the way. */
.bhEdge{ position:absolute; width:44px; height:44px; pointer-events:none; z-index:1; }
.bhEdge[hidden]{ display:none; }
.bhEdge svg{ width:100%; height:100%; overflow:visible; }
.bhEdge circle, .bhEdge path{ fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.bhEdge circle{ fill:var(--paper); }
.bhEdge[data-off="west"]{ left:6px; top:calc(50% - 22px); }
.bhEdge[data-off="east"]{ right:6px; top:calc(50% - 22px); }
.bhEdge[data-off="north"]{ top:6px; left:calc(50% - 22px); }

.bhZoom{ position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:3px; z-index:2; }
.bhZoom button{
  appearance:none; cursor:pointer; width:28px; height:28px; padding:0;
  border:1px solid rgba(60,40,20,.4); background:rgba(250,244,232,.92); color:#3a2a1a;
  font-family:var(--font-serif); font-size:16px; line-height:1;
}
.bhZoom button:hover{ background:#fffaf0; }
.bhZoom button:focus-visible{ outline:1px solid #3a2a1a; outline-offset:2px; }
.bhStripLabel{ display:none; }

/* ── Under the chart: furniture ──────────────────────────────────── */
.bhNote{
  margin-top:10px;
  font-family:var(--font-display); font-style:italic; font-size:16.5px; line-height:1.4;
  color:rgba(232,228,221,.7);
}
.bhRailRow{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(201,168,117,.18);
}
.bhNow{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0; }
.bhNowN{
  font-family:var(--font-display); font-size:22px; line-height:1;
  color:color-mix(in srgb, var(--ink) 62%, #f3e8d6);
}
.bhNowPlace{ font-family:var(--font-display); font-size:18px; color:var(--warm-gold); }
.bhNowYear{
  font-family:var(--font-serif); font-size:10px;
  text-transform:uppercase; letter-spacing:.2em; color:rgba(139,155,180,.9);
}
.bhBtn, .bhClose{
  appearance:none; cursor:pointer; flex:0 0 auto;
  padding:8px 13px; background:none;
  border:1px solid rgba(201,168,117,.32); color:var(--warm-gold);
  font-family:var(--font-serif); font-size:10px;
  text-transform:uppercase; letter-spacing:.18em;
  transition:border-color .3s ease, background .3s ease;
}
.bhBtn:hover{ border-color:rgba(232,200,154,.7); }
.bhBtn.is-on{ background:rgba(201,168,117,.14); border-color:rgba(232,200,154,.6); }
.bhBtn:focus-visible, .bhClose:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }

/* The age spine: four inks, each as long as its share of the thirty. */
.bhSpine{ position:relative; display:flex; gap:3px; margin-top:16px; }
.bhSeg{
  appearance:none; background:none; border:0; padding:0 0 4px; margin:0;
  flex:1 1 0; min-width:0; cursor:pointer; text-align:left; color:inherit;
}
.bhSegBar{ display:block; height:5px; background:var(--ink); opacity:.5; transition:opacity .35s ease; }
.bhSeg.is-on .bhSegBar, .bhSeg:hover .bhSegBar{ opacity:1; }
.bhSegLabel{
  display:block; margin-top:8px;
  font-family:var(--font-serif); font-size:9px; line-height:1.35;
  text-transform:uppercase; letter-spacing:.14em; color:rgba(139,155,180,.8);
  white-space:nowrap;
}
.bhSeg:last-child .bhSegLabel{ text-align:right; }
.bhSeg.is-on .bhSegLabel{ color:var(--warm-gold); }
.bhSeg:focus-visible{ outline:1px solid var(--warm-gold); outline-offset:3px; }
.bhSpineMark{
  position:absolute; top:-4px; width:3px; height:13px; margin-left:-1.5px;
  box-shadow:0 0 0 1.5px var(--room-lo, #04060a);
  transition:left .45s ease, background .45s ease; pointer-events:none;
}
.bhKeys{
  margin-top:12px;
  font-family:var(--font-display); font-style:italic; font-size:14px; color:rgba(139,155,180,.7);
}

/* Without the script there is no rail to drive: the book stands alone. */
.bh:not(.has-rail) .bhRail{ display:none; }
.bh:not(.has-rail) .bhStage{ grid-template-columns:minmax(0,1fr); }

/* ── After the book ──────────────────────────────────────────────── */
.bhAfter{ margin-top:clamp(80px,14vh,160px); scroll-margin-top:6vh; }
.bhText{ margin-top:clamp(36px,5vh,56px); border-top:1px solid rgba(201,168,117,.2); }
.bhText summary{
  cursor:pointer; padding:16px 0;
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em; color:var(--warm-gold);
}
.bhTextBody{
  max-width:68ch; padding-bottom:20px;
  font-family:var(--font-display); font-size:18px; line-height:1.6; color:rgba(232,228,221,.8);
}
.bhTextBody h3{ margin:1.6em 0 .6em; font-weight:400; font-size:22px; color:var(--warm-gold); }
.bhTextBody p + p{ margin-top:.9em; }
.bhTextBody strong{ font-weight:400; color:var(--warm-gold); }
.bhTextBody em{ color:rgba(139,155,180,.95); }
.bhTextBody a{ color:var(--gold); border-bottom:1px solid rgba(201,168,117,.35); }

/* ── The phone: the rail becomes a strip, and the strip a sheet ──── */
@media (max-width:959px){
  .bhStage{ display:block; margin-top:clamp(28px,5vh,44px); }
  .bhRail{
    position:sticky; top:0; z-index:30;
    margin:0 calc(-1 * var(--edge)) 26px;
    background:var(--room-lo, #04060a);
  }
  .bhFrame{ padding:0 0 1px; box-shadow:0 14px 26px -18px rgba(0,0,0,.9); }
  .bhChart{ aspect-ratio:auto; height:104px; cursor:pointer; touch-action:manipulation; }
  .bhRail:not(.is-open) .bhNote,
  .bhRail:not(.is-open) .bhRailRow,
  .bhRail:not(.is-open) .bhKeys,
  .bhRail:not(.is-open) .bhZoom,
  .bhRail:not(.is-open) .bhPinLabel{ display:none; }
  .bhRail:not(.is-open) .bhEdge{ transform:scale(.8); }
  .bhRail:not(.is-open) .bhEdge[data-off="west"],
  .bhRail:not(.is-open) .bhEdge[data-off="east"]{ top:calc(50% - 22px); }
  .bhRail:not(.is-open) .bhSpine{
    position:absolute; left:0; right:0; bottom:1px; margin:0; gap:2px; pointer-events:none;
  }
  .bhRail:not(.is-open) .bhSeg{ padding:0; }
  .bhRail:not(.is-open) .bhSegBar{ height:3px; opacity:.75; }
  .bhRail:not(.is-open) .bhSegLabel{ display:none; }
  .bhRail:not(.is-open) .bhSpineMark{ top:-3px; height:9px; }
  .bhStripLabel{
    display:flex; flex-direction:column; gap:1px;
    position:absolute; left:calc(var(--edge) - 4px); bottom:12px; z-index:1; max-width:70%;
    pointer-events:none;
  }
  .bhStripLabel b{
    font-family:var(--font-display); font-style:italic; font-weight:400; font-size:17px; line-height:1.15;
    color:var(--ink-dark); -webkit-text-stroke:4px var(--paper);
  }
  .bhStripLabel span{
    font-family:var(--font-serif); font-size:9px; text-transform:uppercase; letter-spacing:.18em;
    color:var(--ink-dark); -webkit-text-stroke:3px var(--paper);
  }
  .bhRail.is-open .bhStripLabel{ display:none; }
  .bhRailSpacer:not([hidden]){ display:block; }
  .bhRail.is-open{
    position:fixed; left:0; right:0; top:0; height:60vh; margin:0; z-index:300;
    display:flex; flex-direction:column;
    padding:46px var(--edge) 14px;
    border-bottom:1px solid rgba(201,168,117,.3);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.95);
  }
  .bhRail.is-open .bhFrame{ flex:1 1 auto; min-height:0; padding:2px; }
  .bhRail.is-open .bhChart{ height:100%; cursor:grab; touch-action:none; }
  .bhRail.is-open .bhKeys{ display:none; }
  .bhRail.is-open .bhClose{
    display:block; position:absolute; top:8px; right:var(--edge);
    padding:4px 11px; font-size:18px; letter-spacing:0;
  }
  .bhBeat, .bhEraHead, .bhAfter{ scroll-margin-top:124px; }
  .bhCaption{ font-size:19px; }
}
@media (prefers-reduced-motion: reduce){
  .bhLayer, .bhSpineMark, .bhSegBar, .bhBtn{ transition:none; }
}