/* ═══════════════════════════════════════════════════════════════
   ABRAHAMIC TIMELINES — shared design system
   Faithful to the printed reference chart: warm parchment, Cinzel
   Roman caps, vertical era colour-zones, a central axis, numbered
   branching events, radiating "waves", and a gold ROME track.
   Section-agnostic — the engine draws any registered section with it.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* parchment surfaces */
  --parch:#f2e8cf; --parch-2:#f7f0df; --parch-3:#fcf8ee; --panel:#fbf6ea;
  /* ink */
  --ink:#2c2116; --ink-2:#5c4a33; --ink-3:#8a7454; --ink-4:#a8946f;
  --ink-soft:#8a7454;
  /* hairlines / leaders */
  --line:#c8b184; --line-2:#d9c8a3; --line-soft:#e4d7ba;
  /* era colours */
  --macc-deep:#a8322a; --macc:#c34a2c; --macc-warm:#df7d38;
  --gold:#c99a2e; --gold-lite:#e8c760; --gold-deep:#a87c1f;
  --church:#efe7cf; --church-line:#d8c48a;
  /* waves */
  --wave-1:#c0392b; --wave-2:#e0872c; --wave-3:#e2ba39;
  /* rome */
  --rome-a:#cba24f; --rome-b:#a67f2b;
  /* type */
  --caps:"Cinzel","Trajan Pro",Georgia,serif;
  --serif:"EB Garamond","Iowan Old Style",Georgia,serif;
  --sans:"Inter Tight","Inter",-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--parch)}
body{
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,250,235,.6), transparent 60%),
    var(--parch);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
/* faint paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(160,130,80,.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(160,130,80,.03) 0 1px, transparent 1.5px);
  background-size:7px 7px, 11px 11px;
}
a{color:inherit;text-decoration:none}

/* ── chrome ── */
.tl-chrome{position:sticky;top:0;z-index:60;
  background:rgba(247,240,223,.86);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid var(--line-2)}
.tl-chrome-inner{max-width:1180px;margin:0 auto;padding:12px clamp(18px,4vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.tl-back{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color .2s var(--ease)}
.tl-back:hover{color:var(--ink)}
.tl-back .ar{transition:transform .25s var(--ease)}
.tl-back:hover .ar{transform:translateX(-3px)}
.tl-chrome .mark{font-family:var(--caps);font-size:12px;letter-spacing:.18em;color:var(--ink-3)}

/* ── hero ── */
.tl-hero{position:relative;z-index:1;text-align:center;padding:clamp(26px,4vh,52px) 20px clamp(20px,3vh,36px);max-width:1000px;margin:0 auto}
.tl-hero .kicker{font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--macc);display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
.tl-hero .kicker::before,.tl-hero .kicker::after{content:"";width:26px;height:1px;background:var(--line)}
.tl-hero h1{font-family:var(--caps);font-weight:600;font-size:clamp(34px,6vw,68px);line-height:1.05;letter-spacing:.01em;color:var(--ink)}
.tl-hero .sub{font-family:var(--serif);font-style:italic;font-size:clamp(16px,2vw,21px);color:var(--ink-2);max-width:60ch;margin:16px auto 0;line-height:1.5}
.tl-hero .section-of{margin-top:18px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tl-hero .section-of b{color:var(--macc);font-weight:600}

/* ── legend / colour key ── */
.tl-key{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin:22px auto 0;max-width:900px;padding:0 20px}
.tl-key .k{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:14px;color:var(--ink-2)}
.tl-key .k i{width:15px;height:15px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tl-key .k b{font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600}

/* ── stage (horizontal scroll) ── */
.tl-stage-wrap{position:relative;z-index:1;margin-top:clamp(20px,4vh,40px)}
.tl-stage{position:relative;overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;cursor:grab;
  /* pinch must reach the engine, not the browser's page zoom */
  touch-action:pan-x pan-y;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,252,244,.5),rgba(238,228,204,.25))}
.tl-stage.grabbing{cursor:grabbing;scroll-behavior:auto}
/* while a zoom gesture or a snap is in flight, scrolling must be instant */
.tl-stage.tl-zooming{scroll-behavior:auto}
.tl-stage:focus-visible{outline:2px solid var(--macc);outline-offset:-3px}
.tl-stage::-webkit-scrollbar{height:11px}
.tl-stage::-webkit-scrollbar-track{background:rgba(180,150,100,.12)}
.tl-stage::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid transparent;background-clip:content-box}
.tl-stage::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}

.tl-scrollhint{position:absolute;right:16px;top:14px;z-index:40;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;pointer-events:none;transition:opacity .4s var(--ease)}
.tl-scrollhint .sweep{display:inline-block;animation:sweep 2.4s var(--ease-io) infinite}
@keyframes sweep{0%,100%{transform:translateX(-2px);opacity:.55}50%{transform:translateX(3px);opacity:1}}

/* ── canvas ── */
.tl-canvas{position:relative;height:var(--tl-h,1070px);transform-origin:0 0}
/* mid-gesture the canvas takes a temporary scaleX for instant feedback; the
   real layout(z) lands ~120ms after the gesture goes quiet */
.tl-canvas.tl-zooming{will-change:transform}
/* …and during that snap nothing may tween its GEOMETRY, or the re-layout
   would visibly slide. Opacity is the one property allowed through: it is
   what the dense-era cross-fade and the level-of-detail fades are made of,
   and neither of those can slide anything. */
.tl-canvas.no-anim,
.tl-canvas.no-anim *,
.tl-canvas.no-anim *::before,
.tl-canvas.no-anim *::after{transition-property:opacity!important}
/* one shared vector overlay: lineage, wave-block leaders, column ties */
.tl-vec{position:absolute;left:0;top:0;z-index:9;pointer-events:none;overflow:visible}

/* ── semantic-zoom control cluster ──
   Sticky at the bottom-right of the stage: a small parchment plate on a
   hairline, Cinzel small caps, gold on hover. */
.tl-zoomdock{position:sticky;bottom:20px;z-index:45;
  display:flex;justify-content:flex-end;padding:0 20px;
  margin-top:-62px;pointer-events:none}
.tl-zoomctl{pointer-events:auto;display:inline-flex;align-items:center;gap:2px;
  padding:4px 5px;border-radius:7px;
  background:linear-gradient(180deg,rgba(252,248,238,.97),rgba(244,236,216,.95));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px var(--line),0 6px 18px -10px rgba(70,45,10,.55),inset 0 1px 0 rgba(255,255,255,.7)}
.tl-zoomctl .zb{width:29px;height:29px;border:0;border-radius:5px;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:17px;font-weight:500;line-height:1;color:var(--ink-2);
  display:grid;place-items:center;transition:background .18s var(--ease),color .18s var(--ease)}
.tl-zoomctl .zb:hover{background:rgba(201,154,46,.18);color:var(--gold-deep)}
.tl-zoomctl .zb:active{background:rgba(201,154,46,.3)}
/* hard against a stop: the button goes quiet rather than pretending */
.tl-zoomctl .zb:disabled{opacity:.3;cursor:default}
.tl-zoomctl .zb:disabled:hover{background:transparent;color:var(--ink-2)}
.tl-zoomctl .zrw{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:54px;user-select:none}
.tl-zoomctl .zr{text-align:center;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;user-select:none;line-height:1.1}
/* which of the three tiers the reader is standing in */
.tl-zoomctl .ztier{font-family:var(--caps);font-weight:600;font-size:7.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);line-height:1;margin-top:2px}
.tl-zoomctl .zsep{width:1px;height:18px;background:var(--line-2);margin:0 3px}
.tl-zoomctl .zf{border:0;background:transparent;cursor:pointer;padding:0 10px;height:29px;border-radius:5px;
  font-family:var(--caps);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);transition:background .18s var(--ease),color .18s var(--ease)}
.tl-zoomctl .zf:hover{background:rgba(201,154,46,.18);color:var(--gold-deep)}
.tl-zoomctl :focus-visible{outline:2px solid var(--macc);outline-offset:1px}

/* ═══════════════════════════════════════════════════════════════
   LEVEL OF DETAIL — three tiers of the same drawing
   .lod-far   the poster: what reads across a room
   .lod-mid   the chart as designed
   .lod-near  the study view: summaries, citations, reign spans
   Only INK changes between tiers; geometry is the zoom's business, so
   every rule here is a fade. The engine measures each tier before the
   collision pass runs, so nothing revealed here can land on anything.
   ═══════════════════════════════════════════════════════════════ */

/* ── FAR: everything that only reads up close retires ── */
.tl-canvas.lod-far .tl-bookline,
.tl-canvas.lod-far .tl-bookband,
.tl-canvas.lod-far .tl-bookbox,
.tl-canvas.lod-far .tl-tagbox,
.tl-canvas.lod-far .tl-waveblock,
.tl-canvas.lod-far .tl-linlab,
.tl-canvas.lod-far .tl-annot .an-lines,
.tl-canvas.lod-far .tl-annot .an-arrow,
.tl-canvas.lod-far .tl-pen .plab,
.tl-canvas.lod-far .tl-fanlab,
.tl-canvas.lod-far .tl-kingline .kl-name,
.tl-canvas.lod-far .tl-kingline .kl-proph,
.tl-canvas.lod-far .tl-kingline .kl-bnlab,
.tl-canvas.lod-far .tl-kingline .kl-tick,
.tl-canvas.lod-far .tl-vec .br-line,
.tl-canvas.lod-far .tl-evt .tl-label,
.tl-canvas.lod-far .tl-evt .tl-leader,
.tl-canvas.lod-far .tl-clrow,
.tl-canvas.lod-far .tl-reign .rn,
.tl-canvas.lod-far .tl-romeevt{
  opacity:0!important;pointer-events:none!important;
  transition:opacity .2s var(--ease)!important}
/* nothing retired may catch a click — the poster itself is the target */
.tl-canvas.lod-far .tl-node,
.tl-canvas.lod-far .tl-reign{pointer-events:none}
/* a narrow strip keeps its title alone; date + gloss would only be a smear */
.tl-canvas.lod-far .tl-era-head.narrow .ed,
.tl-canvas.lod-far .tl-era-head.narrow .eg{display:none}
/* and a strip too narrow even for its title stands as pure colour */
.tl-canvas.lod-far .tl-era-head.tiny .en{opacity:0;transition:opacity .2s var(--ease)}
/* the dynasty wedges stay, but as texture — unlabelled, they are not objects */
.tl-canvas.lod-far .tl-pen.in{opacity:.5}
/* the arrow groups and the king rule are poster shapes: they stay, quieter */
.tl-canvas.lod-far .tl-fan.in{opacity:.66}
.tl-canvas.lod-far .tl-kingline.in{opacity:.72}
/* the events become small dots on the axis, and crowded ones drop out */
.tl-canvas.lod-far .tl-node{width:8px;height:8px;border-width:1.5px;
  transition:opacity .2s var(--ease)}
.tl-canvas.lod-far .tl-evt.dot-off .tl-node{opacity:0}
/* clicking the section lands you on the chart */
.tl-canvas.lod-far .tl-era-field{cursor:zoom-in}

/* ── NEAR: the extra annotation, dark until the study tier ── */
.tl-xtra,.tl-pspan{display:none}
.tl-canvas.lod-near .tl-evt.xtra-on .tl-label{max-width:200px}
.tl-canvas.lod-near .tl-xtra{display:block;margin-top:4px;animation:lodReveal .2s var(--ease) both}
.tl-canvas.lod-near .tl-pspan{display:inline;animation:lodReveal .2s var(--ease) both}
@keyframes lodReveal{from{opacity:0}to{opacity:1}}
.tl-xtra .tl-sum{display:block;font-family:var(--serif);font-style:italic;font-size:11.5px;
  line-height:1.34;color:var(--ink-3);max-width:200px;
  text-shadow:0 1px 0 rgba(255,252,244,.85),0 0 4px var(--parch-3)}
.tl-xtra .tl-ref{display:block;margin-top:2px;font-family:var(--serif);font-variant:small-caps;
  font-size:10.5px;letter-spacing:.07em;color:var(--ink-4);
  text-shadow:0 1px 0 rgba(255,252,244,.85)}
.tl-pen .plab .tl-pspan{color:var(--ink-3);font-size:10.5px}

/* era vertical zones */
.tl-era-field{position:absolute;top:0;bottom:0;opacity:0;transition:opacity 1s var(--ease)}
.tl-era-field.in{opacity:1}
.tl-era-head{position:absolute;top:0;height:var(--head-h,104px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 14px;
  border-right:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.16);
  transform:translateY(-14px);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.tl-era-head.in{transform:none;opacity:1}
/* the title block: a full-width box inside the strip, so the type keeps the
   exact centred layout it has always had — and so the sticky-within-era pass
   can slide the whole block with ONE transform, never a re-layout. No
   transition: the block tracks the scroll, it does not animate to it. */
.tl-era-head .eh-in{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;transition:none}
.tl-era-head .en{font-family:var(--caps);font-weight:600;line-height:1.02;letter-spacing:.04em}
.tl-era-head .ed{font-family:var(--serif);font-style:italic;font-size:13.5px;margin-top:7px;opacity:.92;letter-spacing:.01em}
.tl-era-head .eg{font-family:var(--serif);font-style:italic;font-size:12.5px;margin-top:7px;opacity:.84;max-width:56ch;line-height:1.4}
/* a narrow strip keeps its type centred but shrinks so nothing is clipped */
.tl-era-head.narrow{padding:0 8px}
.tl-era-head.narrow .ed{font-size:11px;margin-top:4px}
.tl-era-head.narrow .eg{font-size:10.5px;margin-top:4px;line-height:1.25}

/* central axis — the warm lineage line of the printed chart */
.tl-axis{position:absolute;left:0;height:1.5px;background:#6b3a2a;
  top:var(--axis-y,470px);transform-origin:left center;transform:scaleX(0);transition:transform 1.3s var(--ease)}
.tl-axis.in{transform:scaleX(1)}
.tl-axis .tip{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:34px;height:11px;
  background:#6b3a2a;clip-path:polygon(0 0,100% 50%,0 100%,19% 50%)}
.tl-axis-label{position:absolute;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);background:var(--parch-3);padding:3px 10px;border:1px solid var(--line-2);border-radius:3px;transform:translate(-50%,-50%);white-space:nowrap;top:var(--axis-y,570px);z-index:5}

/* OLD TESTAMENT ◆ NEW TESTAMENT — set at the era seam, on a parchment plate
   so the era boundary and any rule behind it breaks cleanly */
.tl-testament-tag{position:absolute;z-index:11;transform:translate(-50%,-50%);white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--caps);font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);
  background:linear-gradient(180deg,var(--parch-3),var(--parch-2));padding:5px 15px;border-radius:3px;
  box-shadow:0 0 0 1px rgba(200,177,132,.55),0 0 10px 4px rgba(252,248,238,.75);
  opacity:0;transition:opacity .8s var(--ease)}
.tl-testament-tag.in{opacity:1}
.tl-testament-tag .dia{font-style:normal;font-size:8px;color:var(--macc);letter-spacing:0}

/* ── lineage: Mary + Joseph converging into the nativity point ── */
.tl-lineage .lin-line{fill:none;stroke:#7a2e20;stroke-width:1.1;stroke-linejoin:round;
  opacity:.9;stroke-dasharray:280;stroke-dashoffset:280;animation:linDraw 1.4s var(--ease) .35s forwards}
@keyframes linDraw{to{stroke-dashoffset:0}}
.tl-lineage .lin-dot{fill:#7a2e20}
.tl-linlab{position:absolute;z-index:11;white-space:nowrap;
  font-family:var(--caps);font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#7a2e20;
  text-shadow:0 1px 0 rgba(255,252,244,.92),0 0 6px var(--parch-3);
  opacity:0;transition:opacity .7s var(--ease) .5s}
.tl-linlab.in{opacity:1}

/* time markers (167 BC, AD 1, AD 33) */
.tl-marker{position:absolute;top:var(--head-h,104px);bottom:calc(var(--rome-h,92px) + 4px);width:1px;
  background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 11px);opacity:0;transition:opacity .8s var(--ease)}
.tl-marker.in{opacity:.9}
/* the tag sits astride the top edge of the ROME band, as in the print — so it
   has to out-rank the band, which is painted at z-index 9 */
.tl-marker .lab{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);z-index:10;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--ink);
  background:var(--parch-3);border:1px solid var(--ink-3);border-radius:4px;padding:3px 8px;white-space:nowrap}

/* ── events: chart typography (no boxes) ──
   Each event is text set straight onto the parchment, tied to the axis by a
   hairline leader that ends in a small dot — as in the printed chart. */
.tl-evt{position:absolute;transform:translateX(-50%);z-index:10;
  transition:opacity .3s var(--ease)}
/* ── dense-era representation swap ──
   A switchable era carries BOTH a spread-label set and a column list; the
   zoom level decides which is live and the two cross-fade. The dormant one
   stays in the DOM (so its type can still be measured) but is inert. */
.tl-canvas .tl-evt.tl-off,
.tl-canvas .tl-clrow.tl-off{opacity:0!important;pointer-events:none!important}
.tl-node{position:absolute;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;
  background:var(--parch-3);border:2px solid var(--ec,var(--ink-2));z-index:3;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}

/* leader hairline — draws outward from the node */
.tl-leader{position:absolute;left:calc(50% - .5px);width:1px;background:rgba(138,116,84,.45);
  transform:scaleY(0);transition:transform .7s var(--ease),background .25s var(--ease)}
.tl-evt.above .tl-leader{transform-origin:bottom center}
.tl-evt.below .tl-leader{transform-origin:top center}
.tl-evt.in .tl-leader{transform:scaleY(1)}
.tl-leader::after{content:"";position:absolute;left:50%;width:3px;height:3px;border-radius:50%;
  background:rgba(138,116,84,.7);transition:background .25s var(--ease)}
.tl-evt.above .tl-leader::after{top:0;transform:translate(-50%,-50%)}
.tl-evt.below .tl-leader::after{bottom:0;transform:translate(-50%,50%)}
.tl-evt:hover .tl-leader,.tl-evt.active .tl-leader{background:rgba(92,74,51,.8)}
.tl-evt:hover .tl-leader::after,.tl-evt.active .tl-leader::after{background:var(--ec,var(--ink-2))}

/* the label itself */
.tl-label{position:absolute;left:50%;width:max-content;max-width:170px;text-align:center;
  cursor:pointer;outline:none;opacity:0;transform:translateX(-50%) translateY(8px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.tl-evt.in .tl-label{opacity:1;transform:translateX(-50%)}
.tl-l1{font-family:var(--serif);font-weight:600;font-size:15.5px;line-height:1.22;color:var(--ink);
  transition:color .2s var(--ease)}
/* faint parchment halo so hairlines passing behind never cut the type */
.tl-l1,.tl-d{text-shadow:0 1px 0 rgba(255,252,244,.85),0 0 4px var(--parch-3),0 0 9px var(--parch-3)}
.tl-n{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.01em;
  color:color-mix(in srgb,var(--ec,var(--ink-2)) 80%,var(--ink))}
.tl-t{transition:color .2s var(--ease)}
.tl-d{font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1.3;color:var(--ink-3);margin-top:2px}
.tl-plus{margin-left:5px;font-style:normal;font-size:11px;color:var(--ec,var(--ink-2));opacity:0;transition:opacity .2s var(--ease)}
.tl-label:hover .tl-t,.tl-label:focus-visible .tl-t{color:var(--ec,var(--ink-2))}
.tl-label:hover .tl-plus,.tl-label:focus-visible .tl-plus{opacity:.85}
.tl-label:focus-visible{outline:2px solid var(--ec,var(--macc));outline-offset:4px;border-radius:3px}
.tl-evt.active .tl-t,.tl-evt.active .tl-l1{color:var(--ec,var(--ink-2))}
.tl-evt:hover .tl-node,.tl-evt.active .tl-node{transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 0 5px color-mix(in srgb,var(--ec) 24%,transparent)}
.tl-evt.active .tl-node{background:var(--ec)}
.tl-evt.dim{opacity:.24;filter:saturate(.4)}

/* special: nativity centre marker — radiant eight-point star on the axis */
.tl-nativity{position:absolute;transform:translateX(-50%);z-index:12;text-align:center;
  width:190px;pointer-events:none}
.tl-nativity .nstar{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);line-height:0}
.tl-nativity .nstar svg{overflow:visible}
.tl-nativity .nat-glow{transform-box:fill-box;transform-origin:center;
  animation:natglow 6s var(--ease-io) infinite}
@keyframes natglow{0%,100%{transform:scale(.94);opacity:.72}50%{transform:scale(1.07);opacity:1}}
.tl-nativity .nat-star{transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 4px rgba(255,250,235,.85));animation:twinkle 6s var(--ease-io) infinite}
@keyframes twinkle{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.08);opacity:1}}
.tl-nativity .nat-rays{opacity:.45;animation:natrays 6s var(--ease-io) infinite}
@keyframes natrays{0%,100%{opacity:.3}50%{opacity:.72}}
.tl-nativity .nlabel{font-family:var(--caps);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  color:var(--ink);margin-top:38px;text-shadow:0 1px 0 rgba(255,252,244,.9),0 0 7px var(--parch-3)}

/* ── the wave fan (radiating witness) ──
   A soft rose halo on the nativity point, a burst of small red arrows just
   inside its rim, then three filled annular bands turning about the SAME
   centre: red innermost, orange, gold outermost, arrowheads riding each rim. */
.tl-waves{position:absolute;z-index:6;pointer-events:none}
.tl-waves svg{overflow:visible;display:block}
.tl-wave-band{opacity:0}
.tl-waves.in .tl-wave-band{animation:waveBloom 1.5s var(--ease) backwards,waveBreathe 6s var(--ease-io) 1.5s infinite}
@keyframes waveBloom{from{transform:scale(.22);opacity:0}55%{opacity:1}to{transform:scale(1);opacity:1}}
@keyframes waveBreathe{0%,100%{opacity:.75}50%{opacity:1}}
.tl-wave-glow{opacity:0}
.tl-waves.in .tl-wave-glow{animation:glowBloom 1.6s var(--ease) backwards,glowBreathe 6s var(--ease-io) 1.6s infinite}
@keyframes glowBloom{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes glowBreathe{0%,100%{transform:scale(.97);opacity:.8}50%{transform:scale(1.04);opacity:1}}
.tl-wave-burst{opacity:0}
.tl-waves.in .tl-wave-burst{animation:burstIn 1s var(--ease) .5s backwards,burstBreathe 6s var(--ease-io) 1.5s infinite}
@keyframes burstIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes burstBreathe{0%,100%{transform:scale(.96);opacity:.82}50%{transform:scale(1.05);opacity:1}}

/* ── dynasty pennants (durations) ──
   A long, slender tapered wedge: needle-thin at the first year, opening to a
   dozen pixels at the last, with a small italic label floating clear of it. */
.tl-pen{position:absolute;z-index:6;opacity:0;transition:opacity .7s var(--ease)}
.tl-pen.in{opacity:1}
.tl-pen .pshape{display:block;overflow:visible;
  transform:scaleX(.03);transform-origin:left center;transition:transform 1.2s var(--ease)}
.tl-pen.in .pshape{transform:scaleX(1)}
.tl-pen .plab{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-size:11.5px;line-height:14px;letter-spacing:.005em;
  color:var(--ink-2);text-shadow:0 1px 0 rgba(255,252,244,.92),0 0 5px var(--parch-3),0 0 9px var(--parch-3);
  opacity:0;transition:opacity .6s var(--ease) .3s}
.tl-pen.in .plab{opacity:1}

/* ── book tracks ──
   Directly beneath the era strips, as in the print: an italic label at the
   left, then a thin rule running the book's span. Key books get a filled
   box; the Acts of the Apostles gets a wide cream band. */
.tl-bookline{position:absolute;z-index:7;height:16px;display:flex;align-items:center;
  opacity:0;transition:opacity .8s var(--ease)}
.tl-bookline.in{opacity:1}
.tl-bookline .bl-lab{position:absolute;right:100%;margin-right:8px;white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-size:12px;line-height:16px;color:var(--ink-2);
  text-shadow:0 1px 0 rgba(255,252,244,.92),0 0 5px var(--parch-3)}
.tl-bookline .bl-rule{flex:1;height:1px;background:rgba(120,98,66,.62);
  transform:scaleX(.06);transform-origin:left center;transition:transform 1.1s var(--ease) .15s}
.tl-bookline.in .bl-rule{transform:none}

.tl-bookband{position:absolute;z-index:7;height:26px;border-radius:2px;
  background:linear-gradient(180deg,#eee6cd,#e6dcbe);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  opacity:0;transform:scaleX(.9);transform-origin:left center;
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
.tl-bookband.in{opacity:1;transform:none}
.tl-bookband .bb-lab{font-family:var(--serif);font-size:14px;letter-spacing:.02em;color:#4a3a22;white-space:nowrap}

.tl-bookbox{position:absolute;z-index:7;height:20px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  opacity:0;transform:scaleX(.9);transform-origin:left center;
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
.tl-bookbox.in{opacity:1;transform:none}
.tl-bookbox .bx-lab{font-family:var(--serif);font-size:12.5px;letter-spacing:.02em;color:#fff5ec;white-space:nowrap}

/* ── annotations (chalice &c.) ── */
.tl-annot{position:absolute;z-index:11;display:flex;align-items:flex-start;gap:9px;white-space:nowrap;
  transform:translateX(-8px);opacity:0;transition:opacity .9s var(--ease)}
.tl-annot.in{opacity:1}
.tl-annot .an-medal{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#fdf2cf,#e8c760 62%,#c99a2e);
  color:var(--gold-deep);box-shadow:0 1px 4px rgba(120,84,20,.3),inset 0 0 0 1px rgba(255,255,255,.5)}
.tl-annot .an-lines{display:flex;flex-direction:column;padding-top:1px}
.tl-annot .an-l1{font-family:var(--serif);font-style:italic;font-size:12px;line-height:16px;color:var(--ink);
  text-shadow:0 1px 0 rgba(255,252,244,.9),0 0 6px var(--parch-3)}
.tl-annot .an-l2{font-family:var(--serif);font-size:11px;line-height:15px;color:var(--ink-3);
  text-shadow:0 1px 0 rgba(255,252,244,.9)}
.tl-annot .an-arrow{align-self:center;font-size:17px;line-height:1;color:var(--gold);opacity:.85;margin-left:4px;
  text-shadow:0 1px 0 rgba(255,252,244,.9)}

/* ── the print's left-margin ROW LEGEND ──
   A column of row names in the blank margin left of the leftmost section,
   each with a small arrow pointing into the chart. Pure decoration: it never
   takes a pointer, never takes focus, and it is set right-aligned so every
   arrow-head lands on the same rule. */
.tl-legend{position:absolute;top:0;z-index:9;pointer-events:none;
  opacity:0;transition:opacity .9s var(--ease)}
.tl-legend.in{opacity:1}
.tl-legend.lg-off{opacity:0!important;transition:opacity .2s var(--ease)!important}
.tl-lgd{position:absolute;right:0;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.045em;
  line-height:13px;color:var(--ink-3);white-space:nowrap}
.tl-lgd .lg-t{text-align:right;
  text-shadow:0 1px 0 rgba(255,252,244,.9),0 0 6px var(--parch-3)}
.tl-lgd .lg-a{flex:none;color:var(--ink-2);opacity:.72}
.tl-lgd.lg-caps .lg-t{text-transform:uppercase;font-weight:700;letter-spacing:.085em;
  color:var(--ink-2)}
.tl-lgd.lg-it .lg-t{font-style:italic;letter-spacing:.03em}
.tl-canvas.tl-compact .tl-lgd{font-size:9px;line-height:11px;gap:6px}
.tl-canvas.tl-compact .tl-lgd .lg-a{width:22px}

/* ── grey caption plate (the print's small tags) ── */
.tl-tagbox{position:absolute;z-index:11;transform:translateX(-50%);text-align:center;white-space:nowrap;
  display:flex;flex-direction:column;padding:6px 13px;border-radius:4px;
  background:rgba(178,190,200,.42);box-shadow:inset 0 0 0 1px rgba(120,140,160,.28);
  opacity:0;transition:opacity .8s var(--ease)}
.tl-tagbox.in{opacity:1}
.tl-tagbox .tg-1{font-family:var(--serif);font-weight:600;font-size:13px;line-height:17px;color:var(--ink)}
.tl-tagbox .tg-2{font-family:var(--serif);font-size:12px;line-height:16px;color:var(--ink-2)}

/* ── the tagbox's bracket ──
   A horizontal rule with turned-down ends spanning two years, set just
   above the plate: the print's "Babylonian Captivity (70 Years Exile)". */
.tl-vec .br-line{fill:none;stroke:rgba(107,36,54,.7);stroke-width:1.2;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:brDraw 1.3s var(--ease) .4s forwards}
@keyframes brDraw{to{stroke-dashoffset:0}}

/* ── arrow fans (Exile / Return) ──
   Long tapered shafts, gently bowed, faded to nothing at the tail and full
   strength at a solid head. The plate is fixed geometry parked on the axis
   and scaled by the profile — like the wave fan, it never re-draws. */
.tl-fan{position:absolute;z-index:6;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease)}
.tl-fan.in{opacity:1}
.tl-fan svg{display:block;overflow:visible}
.tl-fan .fa-arrow{transform-box:fill-box;transform-origin:50% 100%;
  opacity:0;animation:faGrow 1s var(--ease) backwards}
.tl-fan.in .fa-arrow{opacity:1}
@keyframes faGrow{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
/* the caption at each shaft's tail */
.tl-fanlab{position:absolute;z-index:11;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--serif);font-size:11.5px;line-height:14px;color:var(--ink-2);
  text-shadow:0 1px 0 rgba(255,252,244,.92),0 0 5px var(--parch-3),0 0 9px var(--parch-3);
  opacity:0;transition:opacity .7s var(--ease) .35s}
.tl-fanlab.in{opacity:1}
/* the grey plate laid ACROSS the shafts — a tagbox, so everything a tagbox
   already knows how to do (hide at poster scale, warm, open) it does too */
.tl-tagbox.tl-fantag{transform:translate(-50%,-50%)}

/* ── the king line ──
   A thin rule slightly below the axis: boundary dots, a tick dropped to each
   caption, and the names in Cinzel — whose lowercase sets as small capitals,
   so 'Jehoahaz' and 'JOSIAH' print exactly as the chart distinguishes them. */
.tl-kingline{position:absolute;z-index:8;height:0;opacity:0;transition:opacity .9s var(--ease)}
.tl-kingline.in{opacity:1}
.tl-kingline .kl-rule{position:absolute;left:0;right:0;top:0;height:1.6px;border-radius:1px;
  background:var(--kc,#6b2436);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.2s var(--ease) .1s}
.tl-kingline.in .kl-rule{transform:none}
.tl-kingline .kl-dot{position:absolute;top:.8px;width:5px;height:5px;border-radius:50%;
  background:var(--kc,#6b2436);transform:translate(-50%,-50%);
  opacity:0;transition:opacity .5s var(--ease) .7s}
.tl-kingline.in .kl-dot{opacity:1}
.tl-kingline .kl-tick{position:absolute;top:1.6px;width:1px;
  background:color-mix(in srgb,var(--kc,#6b2436) 62%,transparent);
  opacity:0;transition:opacity .5s var(--ease) .8s}
.tl-kingline.in .kl-tick{opacity:1}
.tl-kingline .kl-name{position:absolute;white-space:nowrap;
  font-family:var(--caps);font-weight:600;font-size:10.5px;letter-spacing:.055em;
  color:#57202f;line-height:13px;
  text-shadow:0 1px 0 rgba(255,252,244,.92),0 0 5px var(--parch-3);
  opacity:0;transition:opacity .6s var(--ease) .55s,color .2s var(--ease)}
.tl-kingline.in .kl-name{opacity:1}
/* a king and his CONSORT: two captions in one block, a hairline between them,
   exactly as the sheet sets BATHSHEBA under DAVID. The block is one object to
   the row packer and two objects to the reader. */
.tl-kingline .kl-name.kl-pair{display:flex;flex-direction:column;align-items:flex-start}
.tl-kingline .kl-name .kl-n1,
.tl-kingline .kl-name .kl-n2{display:block}
.tl-kingline .kl-name .kl-n2{margin-top:1px;padding-top:1px;
  border-top:1px solid rgba(107,36,54,.5);align-self:stretch;
  transition:color .2s var(--ease)}

/* ── two parallel lines: a kingdom banner and its prophets ──
   The upper line carries its captions ABOVE the rule (`kl-up`) and needs no
   hairline of its own, because the filled strip IS the rule (`kl-norule`).
   The strip's tapers are cut in JS with a clip-path, so a kingdom can open
   from a point where it divides and close to one where it ends. */
.tl-kingline.kl-norule .kl-rule,
.tl-kingline.kl-norule .kl-dot{display:none}
.tl-kingline .kl-banner{position:absolute;left:0;top:0;display:flex;align-items:center;
  overflow:hidden;background:#1f1f24;
  opacity:0;transition:opacity .9s var(--ease) .15s}
.tl-kingline.in .kl-banner{opacity:1}
.tl-kingline .kl-banner.tl-hit{cursor:pointer}
/* the print centres some banner captions in their strip (DAVIDIC DYNASTY) and
   sets others hard left (the two divided kingdoms) — the data says which */
.tl-kingline .kl-banner.kl-bncentre{justify-content:center}
.tl-kingline .kl-bnlab{white-space:nowrap;color:currentColor;
  font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.045em;
  text-transform:uppercase;line-height:1;
  transition:color .2s var(--ease),opacity .2s var(--ease)}
.tl-kingline .kl-banner:hover .kl-bnlab,
.tl-kingline .kl-banner:focus-visible .kl-bnlab{opacity:.72}
.tl-kingline .kl-banner:focus-visible{outline:2px solid var(--ec,#fffdf8);outline-offset:2px}
/* the prophets: italic, centred on their year, set clear of the rule */
.tl-kingline .kl-proph{position:absolute;white-space:nowrap;transform:translateX(-50%);
  font-family:var(--serif);font-style:italic;font-size:11.5px;line-height:13px;
  color:var(--ink-2);
  text-shadow:0 1px 0 rgba(255,252,244,.92),0 0 5px var(--parch-3);
  opacity:0;transition:opacity .6s var(--ease) .6s,color .2s var(--ease)}
.tl-kingline.in .kl-proph{opacity:1}

/* ── ruler band: the seam between two named segments ── */
.tl-rseam{position:absolute;top:0;bottom:0;width:0;z-index:5;pointer-events:none}
.tl-rseam .rsv{position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(255,252,244,.75),rgba(255,252,244,.25))}
.tl-rseam .rsc{position:absolute;left:4px;top:5px;font-size:9px;line-height:1;
  color:rgba(255,248,232,.85);text-shadow:0 1px 2px rgba(90,50,10,.5)}

/* ── wave blocks: chip header, caps title, bullet list ── */
.tl-waveblock{position:absolute;z-index:12;cursor:pointer;outline:none;
  padding:0 0 4px;border-radius:3px;
  background:linear-gradient(180deg,rgba(252,248,238,.985),rgba(250,245,232,.955));
  box-shadow:0 0 12px 9px rgba(252,248,238,.6);
  opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.tl-waveblock.in{opacity:1;transform:none}
.tl-waveblock .wb-chip{display:block;padding:4px 12px;border-radius:1px;
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fffaf2;
  width:82%}
.tl-waveblock .wb-title{margin:8px 2px 3px;font-family:var(--sans);font-weight:600;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.24;color:var(--ink);transition:color .2s var(--ease)}
.tl-waveblock .wb-list{list-style:none;margin:0 2px;padding:0}
.tl-waveblock .wb-list li{position:relative;padding-left:14px;
  font-family:var(--serif);font-size:12.5px;line-height:1.42;color:var(--ink-2)}
.tl-waveblock .wb-list li::before{content:"•";position:absolute;left:3px;color:var(--wc,var(--ink-3))}
.tl-waveblock .wb-list em{font-style:normal;font-variant:small-caps;letter-spacing:.03em;color:var(--ink-3)}
.tl-waveblock:hover .wb-title,.tl-waveblock:focus-visible .wb-title{color:var(--wc,var(--macc))}
.tl-waveblock:focus-visible{outline:2px solid var(--wc,var(--macc));outline-offset:4px}
.tl-waveblock.active{box-shadow:0 0 14px 12px rgba(252,248,238,.8),0 0 0 2px var(--wc)}
.tl-waveblock.dim{opacity:.24;filter:saturate(.4)}
.tl-vec .wl-line{fill:none;stroke:var(--ink-3);stroke-width:1;opacity:.55}
.tl-vec .wl-dot{fill:var(--ink-3);opacity:.75}
.tl-vec .ct-line{fill:none;stroke:rgba(138,116,84,.42);stroke-width:1}
.tl-vec .ct-dot{fill:rgba(138,116,84,.7)}

/* ── dense-era column list (the numbered list IS the annotation) ── */
.tl-clrow{position:absolute;z-index:11;height:18px;display:flex;align-items:baseline;gap:5px;white-space:nowrap;
  cursor:pointer;outline:none;padding-bottom:2px;border-bottom:1px solid rgba(180,155,110,.42);
  opacity:0;transform:translateY(5px);transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .2s var(--ease)}
.tl-clrow.in{opacity:1;transform:none}
.tl-clrow .cl-n{font-family:var(--sans);font-weight:600;font-size:12px;
  color:color-mix(in srgb,var(--ec,var(--ink-2)) 80%,var(--ink))}
.tl-clrow .cl-t{font-family:var(--serif);font-weight:600;font-size:13px;color:var(--ink);
  text-shadow:0 1px 0 rgba(255,252,244,.9),0 0 6px var(--parch-3);transition:color .2s var(--ease)}
.tl-clrow .cl-d{font-family:var(--serif);font-size:12px;color:var(--ink-3);
  text-shadow:0 1px 0 rgba(255,252,244,.9)}
.tl-clrow .cl-plus{font-size:10px;color:var(--ec,var(--ink-2));opacity:0;transition:opacity .2s var(--ease)}
.tl-clrow:hover .cl-t,.tl-clrow:focus-visible .cl-t,.tl-clrow.active .cl-t{color:var(--ec,var(--macc))}
.tl-clrow:hover,.tl-clrow:focus-visible,.tl-clrow.active{border-bottom-color:var(--ec,var(--macc))}
.tl-clrow:hover .cl-plus,.tl-clrow:focus-visible .cl-plus{opacity:.85}
.tl-clrow:focus-visible{outline:2px solid var(--ec,var(--macc));outline-offset:3px;border-radius:2px}
.tl-clrow.dim{opacity:.24;filter:saturate(.4)}

/* ── ROME track ── */
/* The band spans the whole canvas so its fills can be placed in canvas
   coordinates; once there is more than one section on the axis that means
   two bands overlapping each other's empty stretches, so the band itself is
   transparent to the pointer and only its own objects catch anything. */
.tl-rome{position:absolute;left:0;bottom:0;height:var(--rome-h,92px);z-index:9;
  pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
.tl-rome.in{opacity:1}
.tl-rome .tl-reign,.tl-rome .tl-romeevt{pointer-events:auto}
.tl-rome-fill{position:absolute;top:0;bottom:0;pointer-events:none;background:linear-gradient(180deg,var(--rome-a),var(--rome-b));
  border-top:2px solid rgba(255,255,255,.35);box-shadow:0 -6px 18px -12px rgba(80,50,10,.5)}
.tl-rome-fill::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.tl-rome-title{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--caps);font-weight:600;font-size:17px;letter-spacing:.14em;color:#fff5e4;text-shadow:0 1px 2px rgba(90,50,10,.5);z-index:3}
.tl-rome-title .rar{font-size:15px}
/* the band is one continuous rule, so its title rides the visible slice the
   same way an era title does. Once it has left home it carries a soft gold
   plate, fading out to the right, so it never sits ON the reign type it
   passes over — it reads as the label of the band, held in view. */
.tl-rome-title.stuck{z-index:6}
.tl-rome-title.stuck::before{content:"";position:absolute;z-index:-1;
  left:-14px;right:-36px;top:-5px;bottom:-5px;border-radius:3px;
  background:linear-gradient(90deg,var(--rt-plate,rgba(140,105,32,.98)) 0 78%,transparent)}
/* reign boundaries — fine ticks straight on the gold */
.tl-rtick{position:absolute;top:14px;height:55px;width:1px;background:var(--rome-line,rgba(58,34,6,.32));
  z-index:3;pointer-events:none;opacity:0;transition:opacity .7s var(--ease) .2s}
.tl-rome.in .tl-rtick{opacity:1}
/* reigns: no pills — the name and dates are typeset on the band itself */
/* A reign's region starts BELOW the strip of band that the year chips
   straddle (--rn-clear, stamped per profile by the engine). The chip is meant
   to sit astride the band's top edge — that is how the sheet prints it — and
   a region running to the band's top would have made every chip a measured
   collision with a reign caption it never touches. The hover wash is painted
   by ::before, which reaches back up over the strip, so the drawing is
   unchanged: only the box the geometry sees has moved. */
.tl-reign{position:absolute;top:var(--rn-clear,11px);bottom:0;z-index:2;cursor:pointer}
.tl-reign::before{content:"";position:absolute;left:0;right:0;
  top:calc(-1 * var(--rn-clear,11px));bottom:0;pointer-events:none;
  transition:background .25s var(--ease)}
.tl-reign:hover::before,.tl-reign:focus-visible::before{background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.03))}
/* top is restated inline by the layout (RN_TOP, measured from the region) */
.tl-reign .rn{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--serif);font-variant:small-caps;font-weight:600;font-size:11.5px;line-height:16px;
  letter-spacing:.05em;color:var(--rome-ink,#3a2810);padding:0 5px;border-radius:3px;opacity:0;
  /* --rd staggers only the reveal; hover stays instant */
  transition:opacity .6s var(--ease) var(--rd,0s),color .2s var(--ease),background .2s var(--ease),text-shadow .2s var(--ease)}
.tl-rome.in .tl-reign .rn{opacity:1}
.tl-reign:hover .rn,.tl-reign:focus-visible .rn{color:#fff8ea;background:rgba(52,28,6,.62);
  text-shadow:0 1px 3px rgba(28,14,0,.55)}
/* one-off events: a small diamond on the upper band, label just below */
.tl-romeevt{position:absolute;top:0;width:0;height:var(--rome-h,92px);z-index:4;cursor:pointer;
  opacity:0;transition:opacity .6s var(--ease)}
.tl-rome.in .tl-romeevt{opacity:1}
.tl-romeevt .rdia{position:absolute;top:34px;left:-4px;width:8px;height:8px;background:var(--rome-ink,#3a2810);
  transform:rotate(45deg);transition:transform .2s var(--ease),background .2s var(--ease)}
.tl-romeevt .rstem{position:absolute;left:-.5px;width:1px;background:var(--rome-line,rgba(58,34,6,.42))}
.tl-romeevt .rlab{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-size:11px;line-height:14px;color:var(--rome-ink,#3a2810);
  padding:0 4px;border-radius:3px;transition:color .2s var(--ease),background .2s var(--ease)}
/* a one-off whose caption found no row: the diamond keeps its place on the
   band, the words retire until there is room for them again. `visibility`
   rather than `display`, so the label is still measurable next layout. */
.tl-rome .tl-romeevt.re-off,
.tl-rome .tl-romeevt.re-veiled{pointer-events:none;cursor:default}
.tl-romeevt.re-off .rlab,
.tl-romeevt.re-veiled .rlab{visibility:hidden;opacity:0}
.tl-romeevt.re-off .rstem,
.tl-romeevt.re-veiled .rstem{display:none}
.tl-romeevt .ry{font-style:normal;font-variant:small-caps;letter-spacing:.04em;opacity:.86}
.tl-romeevt .ry::before{content:", "}
.tl-romeevt:hover .rdia,.tl-romeevt:focus-visible .rdia{transform:rotate(45deg) scale(1.3);background:#1e1204}
.tl-romeevt:hover .rlab,.tl-romeevt:focus-visible .rlab{color:#fff8ea;background:rgba(52,28,6,.62)}

/* ═══════════════════════════════════════════════════════════════
   DATA-DRIVEN TARGETS — anything the data gives a `detail`
   A book, a dynasty pennant, a caption plate, the chalice, the star,
   a year tag: give it a `detail` in the section data and the engine
   makes it open the same drawer an event opens, stamping
   .tl-openable on the object and .tl-hit on each of its targets.
   Give it no `detail` and not one rule below can match — the object
   stays exactly as inert as it has always been.

   Everything here is ink or hit-testing. Every tap pad is an
   absolutely-positioned overlay grown about the type's own centre,
   so not a single measured box moves.
   ═══════════════════════════════════════════════════════════════ */
.tl-hit{cursor:pointer}
/* THE TAP PADS. Each is grown about its object's own centre to 24px (40 on
   the phone) and parked in the canvas's own layer, UNDER every drawn object:
   an object's box is therefore never swallowed by the pad of the object next
   to it — a pad only claims space nothing else has a claim on. The engine
   sizes and places them at the end of every collision pass. */
.tl-hitpad{position:absolute;z-index:5;cursor:pointer}

/* the type warms to the object's own accent, exactly as an event label does.
   .tl-hover is how a detached pad hands its hover back to its object. */
.tl-openable:hover .tl-warm,.tl-openable.tl-hover .tl-warm,
.tl-openable.tl-warm:hover,.tl-openable.tl-warm.tl-hover,
.tl-hit:focus-visible .tl-warm,.tl-hit.tl-warm:focus-visible,
.tl-openable.active .tl-warm,.tl-openable.tl-warm.active{color:var(--ec,var(--gold-deep))}
.tl-hit:focus-visible{outline:2px solid var(--ec,var(--macc));outline-offset:3px;border-radius:3px}
/* label and rule are one target, so the rule warms with the label */
.tl-bookline.tl-openable:hover .bl-rule,.tl-bookline.tl-openable.tl-hover .bl-rule,
.tl-bookline.tl-openable.active .bl-rule{background:var(--ec,var(--gold-deep))}
.tl-bookbox.tl-openable:hover,.tl-bookbox.tl-openable.tl-hover,.tl-bookbox.tl-openable.active,
.tl-bookband.tl-openable:hover,.tl-bookband.tl-openable.tl-hover,.tl-bookband.tl-openable.active{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ec,#a87c1f) 55%,transparent)}
.tl-tagbox.tl-openable:hover,.tl-tagbox.tl-openable.tl-hover,.tl-tagbox.tl-openable.active{
  box-shadow:inset 0 0 0 1px rgba(120,140,160,.28),
             0 0 0 2px color-mix(in srgb,var(--ec,#a87c1f) 45%,transparent)}
.tl-annot.tl-openable:hover .an-medal,.tl-annot.tl-openable.tl-hover .an-medal,
.tl-annot.tl-openable.active .an-medal{
  box-shadow:0 1px 4px rgba(120,84,20,.3),inset 0 0 0 1px rgba(255,255,255,.5),
             0 0 0 3px rgba(201,154,46,.3)}

/* ── the pennant: caption + wedge, one target. The wedge's own SVG is never
      a target — its pad lies under it — so the pennant's ink can still be
      dragged through, and the caption is the single tab stop. ── */
.tl-pen.tl-openable{pointer-events:none}
.tl-pen.tl-openable .plab{pointer-events:auto}
.tl-pen.tl-openable:hover .pshape,.tl-pen.tl-openable.tl-hover .pshape,
.tl-pen.tl-openable.active .pshape{filter:saturate(1.3) brightness(1.06)}

/* ── the nativity: star + label, one target. The halo and its rays stay
      transparent to the pointer, so a drag can still start on them. ── */
.tl-nativity .nhit{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;pointer-events:auto}
.tl-canvas.tl-compact .tl-nativity .nhit{width:44px;height:44px}
/* the label is the focusable half: it is given a position so it can carry a
   tap pad, and a negative index so the star's rays keep printing over it —
   exactly as they did when it was a plain block in flow */
.tl-nativity .nlabel.tl-hit{pointer-events:auto;position:relative;z-index:-1}
.tl-nativity:hover .nat-star,
.tl-nativity:has(.nlabel.tl-hover) .nat-star{filter:drop-shadow(0 0 7px rgba(255,244,205,.95))}

/* a cross-link landing on one of these — the same flash the list rows use */
.tl-openable.flash{animation:flashbox 1.3s var(--ease)}

/* at poster scale the SECTION is the one target: nothing data-driven catches
   a click there, and the engine drops their tab stops in the same breath */
.tl-canvas.lod-far .tl-hit{pointer-events:none;cursor:inherit}

/* ── detail drawer ── */
.tl-scrim{position:fixed;inset:0;z-index:80;background:rgba(50,35,15,.28);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.tl-scrim.open{opacity:1;pointer-events:auto}
.tl-drawer{position:fixed;left:0;right:0;bottom:0;z-index:90;
  transform:translateY(102%);transition:transform .5s var(--ease);
  background:linear-gradient(180deg,var(--parch-3),var(--parch-2));
  border-top:3px solid var(--dc,var(--gold));box-shadow:0 -18px 50px -20px rgba(60,40,10,.55);
  max-height:52vh;overflow-y:auto}
.tl-drawer.open{transform:translateY(0)}
.tl-drawer-inner{max-width:820px;margin:0 auto;padding:26px clamp(20px,5vw,44px) 40px;position:relative}
/* zero-height sticky rail: it takes no space in the flow and pulls out to the
   inner's padding box, so the × keeps its exact old spot — but now it rides the
   top of the scrollport instead of scrolling away with a 400-word account. */
.tl-dw-bar{position:sticky;top:0;z-index:6;height:0;margin:0 calc(-1 * clamp(20px,5vw,44px))}
/* No paper fade here: it masked the drawer's top line of text. Type may pass
   behind the × button; the button's own plate keeps it legible. */
.tl-dw-close{position:absolute;top:16px;right:clamp(16px,4vw,32px);width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font-size:18px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:all .2s var(--ease)}
.tl-dw-close:hover{background:#fff;color:var(--ink);transform:rotate(90deg)}
.tl-dw-eyebrow{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.tl-dw-eyebrow .num{color:#fff;background:var(--dc,var(--gold));border-radius:5px;padding:2px 8px;font-weight:700}
.tl-dw-eyebrow .era{color:var(--dc,var(--gold-deep));font-weight:600}
.tl-dw h2{font-family:var(--caps);font-weight:600;font-size:clamp(24px,3.4vw,36px);line-height:1.08;color:var(--ink)}
.tl-dw .date{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);margin-top:4px}
.tl-dw .detail{font-family:var(--serif);font-size:17px;line-height:1.62;color:var(--ink);margin-top:16px}
.tl-dw .detail p{margin:0 0 .8em}
.tl-dw .detail strong{font-weight:700}
.tl-dw .detail em{font-style:italic}
.tl-dw .sub{margin-top:14px;display:grid;gap:8px}
.tl-dw .sub .si{display:flex;gap:11px;align-items:baseline;font-family:var(--serif);font-size:15px;color:var(--ink-2);
  padding:8px 12px;background:rgba(200,177,132,.14);border-left:2px solid var(--dc,var(--gold));border-radius:0 5px 5px 0}
.tl-dw .sub .si b{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;min-width:64px}
.tl-dw .refs{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.tl-dw .ref{font-family:var(--sans);font-size:11px;letter-spacing:.02em;color:var(--ink-2);background:rgba(200,177,132,.2);border:1px solid var(--line-2);border-radius:5px;padding:5px 10px}
.tl-dw .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:14px}
.tl-dw .tag{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.tl-dw .tag i{width:8px;height:8px;border-radius:50%}
.tl-dw .links{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.tl-dw .links-l{font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.tl-linkchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--serif);font-size:14px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:6px 14px;margin:0 7px 7px 0;cursor:pointer;transition:all .2s var(--ease)}
.tl-linkchip::before{content:"→";color:var(--dc,var(--gold-deep))}
.tl-linkchip:hover{background:#fff;border-color:var(--ink-3);transform:translateY(-1px)}

/* flash on cross-link */
@keyframes flash{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ec) 45%,transparent)}}
.tl-evt.flash .tl-node{animation:flash 1.3s var(--ease)}
@keyframes flashbox{0%,100%{background-color:transparent}30%{background-color:rgba(232,199,96,.35)}}
.tl-clrow.flash,.tl-waveblock.flash{animation:flashbox 1.3s var(--ease)}

/* ── footer ── */
.tl-foot{position:relative;z-index:1;text-align:center;padding:clamp(40px,7vh,80px) 20px;border-top:1px solid var(--line-2);margin-top:40px}
.tl-foot p{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,28px);color:var(--ink-2);max-width:24ch;margin:0 auto;line-height:1.4}
.tl-foot .note{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:18px}
.tl-colophon{max-width:1180px;margin:0 auto;padding:22px clamp(18px,4vw,44px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--line-2)}
.tl-colophon a{color:var(--ink-2)} .tl-colophon a:hover{color:var(--ink)}

:focus-visible{outline:2px solid var(--macc);outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .tl-evt .tl-label,.tl-era-field,.tl-era-head,.tl-axis,.tl-rome,.tl-marker,
  .tl-pen,.tl-pen .plab,.tl-rtick,.tl-reign .rn,.tl-romeevt,
  .tl-bookline,.tl-bookband,.tl-bookbox,.tl-annot,.tl-tagbox,.tl-waveblock,.tl-clrow,
  .tl-testament-tag,.tl-linlab,.tl-xtra,.tl-pspan,
  .tl-fan,.tl-fan .fa-arrow,.tl-fanlab,
  .tl-kingline,.tl-kingline .kl-dot,.tl-kingline .kl-tick,.tl-kingline .kl-name,
  .tl-kingline .kl-banner,.tl-kingline .kl-proph{opacity:1!important}
  .tl-kingline .kl-proph{transform:translateX(-50%)!important}
  .tl-fan .fa-arrow{transform:none!important}
  .tl-kingline .kl-rule{transform:none!important}
  .tl-vec .br-line{stroke-dashoffset:0!important;animation:none!important}
  .tl-fanlab{transform:translate(-50%,-50%)!important}
  .tl-tagbox.tl-fantag{transform:translate(-50%,-50%)!important}
  .tl-evt .tl-label,.tl-era-field,.tl-era-head,.tl-axis,.tl-rome,.tl-marker,
  .tl-bookband,.tl-bookbox,.tl-waveblock,.tl-clrow{transform:none!important}
  .tl-evt .tl-label{transform:translateX(-50%)!important}
  .tl-tagbox{transform:translateX(-50%)!important}
  .tl-testament-tag{transform:translate(-50%,-50%)!important}
  .tl-annot{transform:translateX(-8px)!important}
  .tl-evt .tl-leader{transform:scaleY(1)!important}
  .tl-axis{transform:scaleX(1)!important}
  /* pennants grow from their thin end, book rules draw outward — pin them open */
  .tl-pen .pshape,.tl-bookline .bl-rule{transform:scaleX(1)!important}
  .tl-pen .plab,.tl-reign .rn,.tl-romeevt .rlab{transform:translateX(-50%)!important}
  .tl-romeevt .rdia{transform:rotate(45deg)!important}
  /* the fan, the star and the lineage are drawn by animation — pin them open */
  .tl-wave-band,.tl-wave-glow,.tl-wave-burst,.tl-nativity .nat-star,.tl-nativity .nat-glow{opacity:1!important;transform:none!important}
  .tl-lineage .lin-line{stroke-dashoffset:0!important;animation:none!important}
  .tl-nativity .nat-rays{opacity:.45!important}}

/* ── responsive ── */
@media(max-width:760px){
  body{font-size:16px}
  .tl-key{font-size:13px}
  .tl-drawer{max-height:66vh}
}

/* ═══════════════════════════════════════════════════════════════
   COMPACT PROFILE — the phone
   Every rule below is gated behind .tl-compact (on the canvas) or
   .tl-wrap-compact (on the stage wrap), classes the engine only ever
   sets when the viewport is BOTH short and narrow. Nothing here can
   reach the desktop drawing.

   The engine supplies the vertical geometry; this file supplies the
   matching INK — type sized so the condensed zones still read, and
   so every measured box the collision pass sees is the true one.
   ═══════════════════════════════════════════════════════════════ */

/* era strips: shorter, and the gloss line retires — a phone strip has
   room for the name and its dates, and nothing else */
.tl-canvas.tl-compact .tl-era-head{padding:0 10px}
.tl-canvas.tl-compact .tl-era-head .ed{font-size:10.5px;margin-top:3px}
.tl-canvas.tl-compact .tl-era-head .eg{display:none}
.tl-canvas.tl-compact .tl-era-head.narrow{padding:0 6px}
.tl-canvas.tl-compact .tl-era-head.narrow .ed{font-size:9px;margin-top:2px}

.tl-canvas.tl-compact .tl-marker .lab{font-size:9px;padding:2px 6px;bottom:-12px}
/* a year tag that would print into its neighbour stands down; the rule stays */
.tl-canvas.tl-compact .tl-marker.mk-off .lab{opacity:0;pointer-events:none}
.tl-canvas.tl-compact .tl-testament-tag{font-size:8.5px;letter-spacing:.12em;padding:3px 10px;gap:6px}
.tl-canvas.tl-compact .tl-testament-tag .dia{font-size:7px}
.tl-canvas.tl-compact .tl-linlab{font-size:8px;letter-spacing:.15em}

/* book tracks */
.tl-canvas.tl-compact .tl-bookline{height:14px}
.tl-canvas.tl-compact .tl-bookline .bl-lab{font-size:9.5px;line-height:14px;margin-right:5px}
.tl-canvas.tl-compact .tl-bookband{height:18px}
.tl-canvas.tl-compact .tl-bookband .bb-lab{font-size:10.5px}
.tl-canvas.tl-compact .tl-bookbox{height:15px}
.tl-canvas.tl-compact .tl-bookbox .bx-lab{font-size:9.5px}

/* annotations */
.tl-canvas.tl-compact .tl-annot{gap:6px}
.tl-canvas.tl-compact .tl-annot .an-medal{width:24px;height:24px}
.tl-canvas.tl-compact .tl-annot .an-medal svg{width:15px;height:15px}
.tl-canvas.tl-compact .tl-annot .an-l1{font-size:9.5px;line-height:13px}
.tl-canvas.tl-compact .tl-annot .an-l2{font-size:8.5px;line-height:12px}
.tl-canvas.tl-compact .tl-annot .an-arrow{font-size:13px}

.tl-canvas.tl-compact .tl-tagbox{padding:4px 9px}
.tl-canvas.tl-compact .tl-tagbox .tg-1{font-size:10.5px;line-height:14px}
.tl-canvas.tl-compact .tl-tagbox .tg-2{font-size:9.5px;line-height:13px}
.tl-canvas.tl-compact .tl-pen .plab{font-size:9.5px;line-height:12px}

/* arrow fans + king line: the plates shrink with the composition, the type
   does not — it is set at a size a phone can still read */
.tl-canvas.tl-compact .tl-fanlab{font-size:9px;line-height:12px}
.tl-canvas.tl-compact .tl-kingline .kl-name{font-size:8.5px;letter-spacing:.04em;line-height:11px}
.tl-canvas.tl-compact .tl-kingline .kl-dot{width:4px;height:4px}
.tl-canvas.tl-compact .tl-rseam .rsc{font-size:8px;top:3px;left:3px}

/* the nativity star shrinks with the fan it anchors */
.tl-canvas.tl-compact .tl-nativity{width:130px}
.tl-canvas.tl-compact .tl-nativity .nstar svg{width:64px;height:64px}
.tl-canvas.tl-compact .tl-nativity .nlabel{font-size:9.5px;letter-spacing:.08em;margin-top:27px}

/* event labels: narrower and tighter, so a two-line title still fits the
   shortened leader lanes between the pennant band and the ROME band */
.tl-canvas.tl-compact .tl-label{max-width:132px}
.tl-canvas.tl-compact .tl-l1{font-size:12.5px;line-height:1.2}
.tl-canvas.tl-compact .tl-n{font-size:10.5px}
.tl-canvas.tl-compact .tl-d{font-size:10.5px;line-height:1.25}
.tl-canvas.tl-compact .tl-plus{font-size:10px}
/* NEAR on a phone keeps the pennant year-spans and the bigger reign hints,
   but not the per-label summary: a summary costs a label ~45px, and the
   compact profile has exactly two leader lanes a side to spend. Hiding it
   with display:none (not opacity) means the collision pass measures the
   label at its true height, so nothing is placed against a phantom box. */
.tl-canvas.tl-compact.lod-near .tl-xtra{display:none}

/* dense-era column list */
.tl-canvas.tl-compact .tl-clrow{height:16px;gap:4px}
.tl-canvas.tl-compact .tl-clrow .cl-n{font-size:10px}
.tl-canvas.tl-compact .tl-clrow .cl-t{font-size:11px}
.tl-canvas.tl-compact .tl-clrow .cl-d{font-size:10px}

/* wave blocks — three of them stack inside the compact wave zone */
.tl-canvas.tl-compact .tl-waveblock{padding:0 0 3px}
.tl-canvas.tl-compact .tl-waveblock .wb-chip{font-size:9px;padding:2px 8px}
.tl-canvas.tl-compact .tl-waveblock .wb-title{font-size:10px;margin:5px 2px 2px;line-height:1.2}
.tl-canvas.tl-compact .tl-waveblock .wb-list li{font-size:10px;line-height:1.3;padding-left:11px}

/* ROME: a slim band, its type scaled to match */
.tl-canvas.tl-compact .tl-rome-title{font-size:12px;letter-spacing:.1em;gap:5px}
.tl-canvas.tl-compact .tl-rome-title .rar{font-size:11px}
.tl-canvas.tl-compact .tl-rtick{top:8px;height:36px}
.tl-canvas.tl-compact .tl-reign .rn{font-size:9.5px;line-height:13px}
.tl-canvas.tl-compact .tl-romeevt .rdia{top:22px;left:-3.5px;width:7px;height:7px}
.tl-canvas.tl-compact .tl-romeevt .rlab{font-size:9px;line-height:12px}

/* ── the dock, on a phone ──
   No longer a plate floating over the chart: a slim static bar in normal
   flow directly under the stage, so it can never cover the drawing. The
   parchment plate is kept; the targets grow to a thumb. */
.tl-stage-wrap.tl-wrap-compact .tl-zoomdock{
  position:static;margin-top:0;pointer-events:auto;
  display:flex;justify-content:stretch;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(250,244,230,.98),rgba(242,232,207,.98))}
.tl-stage-wrap.tl-wrap-compact .tl-zoomctl{
  display:flex;width:100%;gap:4px;padding:3px 6px;border-radius:9px;
  align-items:center;justify-content:space-between}
.tl-stage-wrap.tl-wrap-compact .tl-zoomctl .zb{width:48px;height:44px;font-size:20px;border-radius:7px}
.tl-stage-wrap.tl-wrap-compact .tl-zoomctl .zrw{flex:1 1 auto;min-width:62px}
.tl-stage-wrap.tl-wrap-compact .tl-zoomctl .zr{font-size:12.5px}
.tl-stage-wrap.tl-wrap-compact .tl-zoomctl .ztier{font-size:8px;margin-top:3px}
.tl-stage-wrap.tl-wrap-compact .tl-zoomctl .zsep{height:26px;margin:0 2px}
.tl-stage-wrap.tl-wrap-compact .tl-zoomctl .zf{
  height:44px;min-width:66px;padding:0 14px;font-size:11.5px;border-radius:7px}
/* the drag hint would sit on top of the poster — the bar says it better */
.tl-stage-wrap.tl-wrap-compact .tl-scrollhint{display:none}

/* ═══════════════════════════════════════════════════════════════
   COMPACT — the PAGE around the canvas
   `.tl-compact-page` is stamped on the root element by the same
   wantProfile() call that picks the compact canvas, so these rules and
   the engine's geometry can never disagree (a media query cannot see
   visualViewport, which is what makes a phone a phone). A desktop window
   never carries the class, so nothing below can reach the desktop page.
   ═══════════════════════════════════════════════════════════════ */

/* the sticky header would hang over the top of the chart the moment the
   reader scrolls; on a phone the chart is the whole point, so the header
   scrolls away with everything else and hands the screen over */
:root.tl-compact-page .tl-chrome{position:static}
:root.tl-compact-page .tl-chrome-inner{padding:9px 14px}

/* hero: the same words, a tighter rhythm, so the chart arrives sooner */
:root.tl-compact-page .tl-hero{padding:14px 16px 10px}
:root.tl-compact-page .tl-hero .kicker{margin-bottom:8px;font-size:10px;letter-spacing:.2em}
:root.tl-compact-page .tl-hero .kicker::before,
:root.tl-compact-page .tl-hero .kicker::after{width:18px}
:root.tl-compact-page .tl-hero h1{font-size:clamp(27px,8.2vw,40px)}
:root.tl-compact-page .tl-hero .sub{font-size:14px;line-height:1.42;margin-top:9px;max-width:44ch}
:root.tl-compact-page .tl-key{margin-top:11px;padding:0;gap:5px 16px}
:root.tl-compact-page .tl-key .k{font-size:12px;gap:7px}
:root.tl-compact-page .tl-key .k i{width:12px;height:12px;border-radius:2px}
:root.tl-compact-page .tl-key .k b{font-size:9.5px;letter-spacing:.07em}
:root.tl-compact-page .tl-stage-wrap{margin-top:14px}
/* upright, there is no room for three keys across: they stack as three
   compact rows instead of wrapping into a ragged two-and-one */
@media(max-width:560px){
  :root.tl-compact-page .tl-key{flex-direction:column;align-items:center;gap:5px}
}
/* a phone on its SIDE is 390px of height for everything: the hero gives back
   every pixel it can, and the key — with width to spare — stays on one line */
@media(max-height:470px){
  :root.tl-compact-page .tl-hero{padding:9px 16px 7px}
  :root.tl-compact-page .tl-hero .kicker{margin-bottom:5px}
  :root.tl-compact-page .tl-hero h1{font-size:25px}
  :root.tl-compact-page .tl-hero .sub{font-size:12.5px;line-height:1.34;margin-top:6px;max-width:78ch}
  :root.tl-compact-page .tl-key{margin-top:8px;gap:4px 18px}
  :root.tl-compact-page .tl-key .k{font-size:11px}
  :root.tl-compact-page .tl-key .k i{width:10px;height:10px}
  :root.tl-compact-page .tl-stage-wrap{margin-top:9px}
  :root.tl-compact-page .tl-chrome-inner{padding:6px 14px}
}

/* drawer: it may take the lower part of the screen, never the whole chart —
   the top of the drawing stays in view behind it — and the close button is a
   full 44px thumb target clear of the type it sits beside */
:root.tl-compact-page .tl-drawer{max-height:58vh}
:root.tl-compact-page .tl-drawer-inner{padding:18px 16px 26px}
:root.tl-compact-page .tl-dw-bar{margin:0 -16px}
:root.tl-compact-page .tl-dw-close{top:9px;right:9px;width:44px;height:44px;font-size:20px}
:root.tl-compact-page .tl-dw-eyebrow{padding-right:54px;margin-bottom:8px}
:root.tl-compact-page .tl-dw h2{padding-right:54px;font-size:23px}
:root.tl-compact-page .tl-dw .date{font-size:14px}
:root.tl-compact-page .tl-dw .detail{font-size:15px;line-height:1.55;margin-top:12px}
:root.tl-compact-page .tl-colophon{padding:16px 14px}