:root{
  --bg:#F3EAD3;
  --surface:#FAF4E4;
  --ink:#2E2418;
  --ink-soft:#6B5B45;
  --rule:rgba(94,70,36,.18);
  --gold:#8A6214;
  --gold-strong:#6E4C0C;
  --gold-wash:rgba(138,98,20,.14);
  --faience:#6E7F4F;
  --faience-wash:rgba(110,127,79,.22);
  --faience-ink:#3D4A26;
  --world:#6A5A42;
  --world-wash:rgba(106,90,66,.10);
  --era-a:#E9DCBC;
  --era-b:#E0D1AB;
  --lane-alt:rgba(94,70,36,.035);
  --map-land:#EFE3C4;
  --map-sea:#9DB5B8;
  --map-ink:#2E2418;
  --map-ink-soft:#7A6A50;
  --page:#F4EBD5;
  --jesus:#8C2F1E;
  --accent:#8C2F1E;
  --judah:#8C2F1E;
  --israel:#3E5F73;
  --rome:#6A3D7A;
  --herod:#2D6A5F;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.353 0 0 0 0 0.243 0 0 0 0 0.102 0.26 0 0 0 -0.109'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.478 0 0 0 0 0.329 0 0 0 0 0.141 0.16 0 0 0 -0.067'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --vignette:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120,84,36,.10) 100%);
  color-scheme:light;
  --serif:"Alegreya", Georgia, "Times New Roman", serif;
  --sans:"Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Automatic: parchment by day, lamplight when the device or viewer is in dark mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1F1912;
    --surface:#2A221A;
    --ink:#E9DDC4;
    --ink-soft:#B3A488;
    --rule:rgba(233,221,196,.13);
    --gold:#D9A94E;
    --gold-strong:#EDC56E;
    --gold-wash:rgba(217,169,78,.17);
    --faience:#9DB077;
    --faience-wash:rgba(157,176,119,.20);
    --faience-ink:#DDE8C6;
    --world:#BFAE8E;
    --world-wash:rgba(191,174,142,.09);
    --era-a:#2A2219;
    --era-b:#332A20;
    --lane-alt:rgba(233,221,196,.025);
    --map-land:#2E261C;
    --map-sea:#3F5A5E;
    --map-ink:#E9DDC4;
    --map-ink-soft:#B3A488;
    --page:#221B14;
    --jesus:#E8A085;
    --accent:#D9A94E;
    --judah:#E8A085;
    --israel:#8FB4CC;
    --rome:#C9A3D6;
    --herod:#86C2B4;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.941 0 0 0 0 0.867 0 0 0 0 0.722 0.1 0 0 0 -0.042'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
    --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.000 0 0 0 0 0.000 0 0 0 0 0.000 0.2 0 0 0 -0.084'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
    --vignette:radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.28) 100%);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1F1912;
  --surface:#2A221A;
  --ink:#E9DDC4;
  --ink-soft:#B3A488;
  --rule:rgba(233,221,196,.13);
  --gold:#D9A94E;
  --gold-strong:#EDC56E;
  --gold-wash:rgba(217,169,78,.17);
  --faience:#9DB077;
  --faience-wash:rgba(157,176,119,.20);
  --faience-ink:#DDE8C6;
  --world:#BFAE8E;
  --world-wash:rgba(191,174,142,.09);
  --era-a:#2A2219;
  --era-b:#332A20;
  --lane-alt:rgba(233,221,196,.025);
  --map-land:#2E261C;
  --map-sea:#3F5A5E;
  --map-ink:#E9DDC4;
  --map-ink-soft:#B3A488;
  --page:#221B14;
  --jesus:#E8A085;
  --accent:#D9A94E;
  --judah:#E8A085;
  --israel:#8FB4CC;
  --rome:#C9A3D6;
  --herod:#86C2B4;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.941 0 0 0 0 0.867 0 0 0 0 0.722 0.1 0 0 0 -0.042'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.000 0 0 0 0 0.000 0 0 0 0 0.000 0.2 0 0 0 -0.084'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --vignette:radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.28) 100%);
  color-scheme:dark;
}
/* A theme the reader picked always wins */
:root[data-palette="parchment"]{
  --bg:#F3EAD3;
  --surface:#FAF4E4;
  --ink:#2E2418;
  --ink-soft:#6B5B45;
  --rule:rgba(94,70,36,.18);
  --gold:#8A6214;
  --gold-strong:#6E4C0C;
  --gold-wash:rgba(138,98,20,.14);
  --faience:#6E7F4F;
  --faience-wash:rgba(110,127,79,.22);
  --faience-ink:#3D4A26;
  --world:#6A5A42;
  --world-wash:rgba(106,90,66,.10);
  --era-a:#E9DCBC;
  --era-b:#E0D1AB;
  --lane-alt:rgba(94,70,36,.035);
  --map-land:#EFE3C4;
  --map-sea:#9DB5B8;
  --map-ink:#2E2418;
  --map-ink-soft:#7A6A50;
  --page:#F4EBD5;
  --jesus:#8C2F1E;
  --accent:#8C2F1E;
  --judah:#8C2F1E;
  --israel:#3E5F73;
  --rome:#6A3D7A;
  --herod:#2D6A5F;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.353 0 0 0 0 0.243 0 0 0 0 0.102 0.26 0 0 0 -0.109'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.478 0 0 0 0 0.329 0 0 0 0 0.141 0.16 0 0 0 -0.067'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --vignette:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120,84,36,.10) 100%);
  color-scheme:light;
}
:root[data-palette="vellum"]{
  --bg:#F6F1E6;
  --surface:#FCF9F2;
  --ink:#1F2A44;
  --ink-soft:#5A6178;
  --rule:rgba(31,42,68,.13);
  --gold:#9A7217;
  --gold-strong:#7A580B;
  --gold-wash:rgba(154,114,23,.14);
  --faience:#2B776B;
  --faience-wash:rgba(43,119,107,.17);
  --faience-ink:#15463F;
  --world:#5A5E6E;
  --world-wash:rgba(90,94,110,.09);
  --era-a:#ECE4D3;
  --era-b:#E2D8C3;
  --lane-alt:rgba(31,42,68,.025);
  --map-land:#F1EAD9;
  --map-sea:#93B6CC;
  --map-ink:#1F2638;
  --map-ink-soft:#6A7085;
  --page:#FAF7EF;
  --jesus:#9E2F28;
  --accent:#2B4A8B;
  --judah:#9E2F28;
  --israel:#2B4A8B;
  --rome:#5B3480;
  --herod:#1F6B5E;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.290 0 0 0 0 0.251 0 0 0 0 0.188 0.14 0 0 0 -0.059'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:none;
  --vignette:none;
  color-scheme:light;
}
:root[data-palette="lamplight"]{
  --bg:#1F1912;
  --surface:#2A221A;
  --ink:#E9DDC4;
  --ink-soft:#B3A488;
  --rule:rgba(233,221,196,.13);
  --gold:#D9A94E;
  --gold-strong:#EDC56E;
  --gold-wash:rgba(217,169,78,.17);
  --faience:#9DB077;
  --faience-wash:rgba(157,176,119,.20);
  --faience-ink:#DDE8C6;
  --world:#BFAE8E;
  --world-wash:rgba(191,174,142,.09);
  --era-a:#2A2219;
  --era-b:#332A20;
  --lane-alt:rgba(233,221,196,.025);
  --map-land:#2E261C;
  --map-sea:#3F5A5E;
  --map-ink:#E9DDC4;
  --map-ink-soft:#B3A488;
  --page:#221B14;
  --jesus:#E8A085;
  --accent:#D9A94E;
  --judah:#E8A085;
  --israel:#8FB4CC;
  --rome:#C9A3D6;
  --herod:#86C2B4;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.941 0 0 0 0 0.867 0 0 0 0 0.722 0.1 0 0 0 -0.042'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.000 0 0 0 0 0.000 0 0 0 0 0.000 0.2 0 0 0 -0.084'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --vignette:radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.28) 100%);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%; margin:0; background:var(--vignette), var(--grain), var(--mottle), var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px;
  display:flex; flex-direction:column; overflow:hidden; -webkit-text-size-adjust:100%}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* Header */
.top{display:flex; align-items:center; gap:12px 24px; flex-wrap:wrap; padding:12px 18px 10px; border-bottom:1px solid var(--rule)}
/* the logo fills the space beside the controls: up to 497 px wide (50 px tall), down to 240 px before the controls wrap */
.brand{margin-right:auto; flex:1 1 240px; max-width:497px; min-width:0}
.brand h1{margin:0; line-height:0}
/* a lighter copy of the logo (dark tones lightened, same hues) for the dark theme */
.brand .logo{display:block; width:100%; height:auto}
.brand .logo-dark{display:none}
:root[data-palette="lamplight"] .brand .logo-light{display:none}
:root[data-palette="lamplight"] .brand .logo-dark{display:block}
@media (prefers-color-scheme: dark){ :root:not([data-palette]) .brand .logo-light{display:none} :root:not([data-palette]) .brand .logo-dark{display:block} }
.controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.controls input,.controls select{height:36px; border:1px solid var(--rule); background:var(--surface); border-radius:6px; padding:0 10px}
.controls input{width:220px}
.controls select{max-width:210px}
.zoomgrp{display:flex; border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:var(--surface)}
.zoomgrp button{height:34px; min-width:38px; border:0; background:none; cursor:pointer; padding:0 10px; font-size:18px; line-height:1}
.zoomgrp button+button{border-left:1px solid var(--rule)}
.zoomgrp button.fit{font-size:14px}
.zoomgrp button:hover{background:var(--gold-wash)}

/* Stage */
#stage{position:relative; flex:1; min-height:0; display:flex; flex-direction:column; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab}
#stage.dragging{cursor:grabbing}
#axis{position:relative; height:30px; flex:none; overflow:hidden; border-bottom:1px solid var(--rule)}
.tick{position:absolute; top:7px; left:0; font-size:12.5px; color:var(--ink-soft); white-space:nowrap; transform-origin:left; font-variant-numeric:tabular-nums}
#eraband{position:relative; height:34px; flex:none; overflow:hidden; border-bottom:1px solid var(--rule)}
.era{position:absolute; top:0; height:100%; left:0; overflow:hidden; border:0; padding:0; margin:0; cursor:pointer; text-align:left;
  background:var(--era-a); border-right:1px solid var(--rule)}
.era.alt{background:var(--era-b)}
.era span{position:absolute; top:7px; left:0; white-space:nowrap; font-family:var(--serif); font-style:italic; font-size:15px}
.era.planned span{color:var(--ink-soft)}
.era:hover{filter:brightness(1.04)}
#body{position:relative; flex:1; min-height:0; overflow:hidden}
#grid{position:absolute; inset:0; pointer-events:none}
.gl{position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--rule)}
.gl.era-edge{background:var(--ink-soft); opacity:.28}
#lanes{position:absolute; left:0; right:0; top:0}
.lane{position:relative; border-bottom:1px solid var(--rule)}
.lane:nth-child(even){background:var(--lane-alt)}
.lane-label{position:absolute; left:10px; top:5px; font-size:13px; font-weight:500; color:var(--ink-soft); pointer-events:none; z-index:3;
  background:linear-gradient(90deg,var(--bg) 70%,transparent); padding-right:14px}
.lane.world .lane-label{font-weight:400}

/* Scripture events */
.ev{position:absolute; left:0; top:0; height:26px; display:flex; align-items:center; gap:7px; padding:0 6px 0 0; border:0; background:none; cursor:pointer; white-space:nowrap; color:var(--ink)}
.ev .mk{width:11px; height:11px; background:var(--gold); transform:rotate(45deg); flex:none; margin-left:-5px; border:1.5px solid var(--bg); box-sizing:content-box}
.ev.p1 .mk{width:13px; height:13px; margin-left:-6px}
.ev .lb{font-size:14px; font-weight:500}
.ev.p1 .lb{font-family:var(--serif); font-size:16px; font-weight:700}
.ev .rg{position:absolute; left:0; top:22px; height:3px; background:var(--gold); opacity:.7; border-radius:2px}
.ev:hover .lb{color:var(--gold-strong); text-decoration:underline; text-underline-offset:3px}
.ev.approx .mk{background:transparent; border:2px solid var(--gold); width:9px; height:9px}

/* People */
.pp{position:absolute; left:0; top:0; height:18px; border:0; padding:0; background:none; cursor:pointer; color:var(--faience-ink)}
.pp .bar{position:absolute; left:0; top:0; height:18px; border-radius:3px; background:var(--faience-wash); border-left:3px solid var(--faience)}
.pp.taken .bar{background:linear-gradient(90deg,var(--faience-wash) 75%,transparent)}
.pp.risen .bar{background:linear-gradient(90deg,var(--faience-wash) 70%,var(--gold-wash)); border-right:3px solid var(--gold)}
.pp .nm{position:absolute; top:0; left:0; line-height:18px; font-size:13.5px; font-weight:500; white-space:nowrap; color:var(--ink)}
.pp .nm small{font-weight:400; color:var(--ink-soft); font-size:12.5px; margin-left:5px}
.pp.approx .bar{background:repeating-linear-gradient(90deg,var(--faience-wash) 0 12px,transparent 12px 17px); border-left-style:dashed}
.pp:hover .bar{background:var(--faience); opacity:.55}
.pp.p1 .nm{font-weight:700}

/* World */
.wb{position:absolute; left:0; top:0; height:22px; pointer-events:none}
.wb .tx{position:absolute; top:0; left:0; line-height:20px; font-size:12.5px; color:var(--world); white-space:nowrap; background:color-mix(in srgb, var(--world) 11%, var(--bg));
  border:1px solid var(--rule); border-radius:11px; padding:0 9px}
.wb .rl{position:absolute; left:0; top:10px; height:1px; background:var(--world); opacity:.5}
.wb .dot{position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--world); margin-left:-3.5px}

#empty{position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); max-width:min(440px,86%); text-align:center; font-family:var(--serif); font-style:italic;
  color:var(--ink-soft); font-size:17px; line-height:1.45; pointer-events:none; display:none}
#vbar{position:absolute; right:3px; top:0; width:6px; border-radius:3px; background:var(--ink-soft); opacity:.35; display:none; cursor:pointer; z-index:4}

/* Overview */
.foot{flex:none; border-top:1px solid var(--rule); padding:8px 18px 10px; display:flex; flex-direction:column; gap:6px}
#mini{position:relative; height:22px; border-radius:4px; overflow:hidden; cursor:pointer; touch-action:none; background:var(--era-a)}
#mini .seg{position:absolute; top:0; bottom:0; background:var(--era-a); border-right:1px solid var(--rule)}
#mini .seg.alt{background:var(--era-b)}
#mini .mt{position:absolute; top:4px; bottom:4px; width:2px; background:var(--gold); margin-left:-1px}
#mini .win{position:absolute; top:0; bottom:0; border:2px solid var(--gold); border-radius:4px; background:var(--gold-wash); min-width:4px}
.kg{position:absolute; left:0; top:0; height:18px; border:0; padding:0; background:none; cursor:pointer; color:var(--ink)}
.kg .bar{position:absolute; left:0; top:0; height:100%; border-radius:3px; border-left:3px solid var(--kc); background:color-mix(in srgb, var(--kc) 17%, transparent)}
.kg.judah{--kc:var(--judah)} .kg.israel{--kc:var(--israel)} .kg.united{--kc:var(--gold); height:40px}
.kg.h-rome{--kc:var(--rome)} .kg.h-herod{--kc:var(--herod)} .kg.span .nm{font-weight:700}
.kg .nm{position:absolute; left:0; top:0; line-height:18px; font-size:12.5px; font-weight:500; white-space:nowrap}
.kg.united .nm{line-height:40px; font-weight:700}
.kg:hover .bar{background:color-mix(in srgb, var(--kc) 34%, transparent)}
.krow{position:absolute; left:10px; font-size:11.5px; color:var(--ink-soft); pointer-events:none; z-index:3; background:linear-gradient(90deg, var(--bg) 70%, transparent); padding-right:12px; line-height:18px}
.lg-kg{width:22px; height:10px; border-radius:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--judah) 30%, transparent) 50%, color-mix(in srgb, var(--israel) 30%, transparent) 50%)}
.verdict{font-family:var(--serif); font-size:17px; margin:0 0 14px}
.legend{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:13px; color:var(--ink-soft); align-items:center}
.legend i{display:inline-block; vertical-align:-1px; margin-right:6px}
.lg-ev{width:9px; height:9px; background:var(--gold); transform:rotate(45deg)}
.lg-ap{width:7px; height:7px; border:2px solid var(--gold); transform:rotate(45deg)}
.lg-pp{width:22px; height:10px; background:var(--faience-wash); border-left:3px solid var(--faience); border-radius:2px}
.lg-wb{width:22px; height:11px; border-radius:6px; background:var(--world-wash); border:1px solid var(--rule)}
.legend .hint{margin-left:auto}

/* Popup */
dialog{border:0; padding:0; background:var(--grain), var(--surface); color:var(--ink); border-radius:10px; width:min(680px,calc(100vw - 24px)); max-height:calc(100dvh - 32px);
  box-shadow:0 18px 60px rgba(40,26,10,.35)}
dialog::backdrop{background:rgba(30,20,8,.5)}
dialog[open]{animation:pop .18s ease-out}
@keyframes pop{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.pop{padding:26px 30px 28px; overflow:auto; max-height:calc(100dvh - 32px)}
.pop .close{position:sticky; float:right; top:0; margin:-12px -14px 0 12px; width:38px; height:38px; border-radius:50%; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-size:20px; line-height:1}
.pop .kicker{margin:0 0 4px; color:var(--ink-soft); font-size:14px}
.pop h2{font-family:var(--serif); font-weight:700; font-size:30px; line-height:1.12; margin:0 0 10px}
.pop .meta{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; margin:0 0 4px}
.pop .date{font-family:var(--serif); font-size:20px; font-variant-numeric:lining-nums}
.pop .cert{font-size:13px; padding:1px 8px; border-radius:10px; background:var(--gold-wash); color:var(--gold-strong)}
.pop .ref{margin:0 0 16px; font-size:15px; color:var(--ink-soft)}
.pop .sum{font-family:var(--serif); font-size:19px; line-height:1.45; margin:0 0 16px}
.pop blockquote{margin:0 0 18px; padding:2px 0 2px 16px; border-left:3px solid var(--gold); font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.5}
.pop blockquote cite{display:block; font-style:normal; font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); margin-top:4px}
.pop figure{margin:0 0 18px}
.pop figure svg{display:block; width:100%; height:auto; border-radius:6px; border:1px solid var(--rule)}
.pop figcaption{font-size:13.5px; color:var(--ink-soft); margin-top:6px}
.pop .text p{font-family:var(--serif); font-size:17px; line-height:1.6; margin:0 0 12px; max-width:62ch}
.pop details{margin-top:14px; border-top:1px solid var(--rule); padding-top:10px}
.pop summary{cursor:pointer; font-weight:500; font-size:15px}
.pop details p{font-size:15px; line-height:1.55; color:var(--ink-soft); margin:8px 0 0}
.pop .overlaps{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; padding:0; list-style:none}
.pop .overlaps button{border:1px solid var(--rule); background:var(--faience-wash); border-radius:14px; padding:3px 10px; cursor:pointer; font-size:14px}
.pop .overlaps button:hover{border-color:var(--faience)}
.pop h3{font-size:15px; font-weight:500; margin:18px 0 0}
.pop .actions{margin-top:18px}
.pop .actions button{border:1px solid var(--rule); background:none; border-radius:6px; padding:6px 12px; cursor:pointer}
.pop .actions button:hover{background:var(--gold-wash)}


/* ===== Theme picker ===== */
.top{position:relative}
.iconbtn{width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--rule); border-radius:6px; background:var(--surface); cursor:pointer; color:var(--ink)}
.iconbtn:hover{background:var(--gold-wash)}
.iconbtn svg{width:19px; height:19px}
.themepop{position:absolute; right:18px; top:calc(100% - 6px); z-index:30; width:300px; background:var(--grain), var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:0 16px 48px rgba(40,26,10,.28); padding:12px}
.themepop h3, .rsettings .thead{margin:4px 6px 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500}
.topts{display:grid; gap:4px}
.topt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid transparent; background:none; border-radius:10px; padding:8px 10px; cursor:pointer; color:var(--ink)}
.topt:hover{background:var(--gold-wash)}
.topt[aria-checked="true"]{border-color:var(--gold); background:var(--gold-wash)}
.tsw{flex:none; display:flex; width:46px; height:30px; border-radius:7px; overflow:hidden; border:1px solid var(--rule)}
.tsw i{flex:1}
.tname{display:block; font-family:var(--serif); font-size:17px; line-height:1.2}
.tdesc{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.3}
.rsettings .topts{margin-bottom:16px}
.rsettings .topt{padding:6px 8px}
.rsettings .tdesc{display:none}

/* ===== Bible: links, passage popup, reader ===== */
.sref{color:var(--gold-strong); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--gold) 55%, transparent); cursor:pointer}
.sref:hover{text-decoration-color:currentColor}
.biblebtn{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 12px; border-radius:6px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); cursor:pointer; font-weight:500}
.biblebtn:hover{opacity:.9}
.biblebtn svg{width:18px; height:18px}
.pop .actions button.primary{background:var(--ink); color:var(--surface); border-color:var(--ink)}
#passage{--rs:18px}
#passage .pch{font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:16px 0 6px; font-weight:500}
#passage .scripture{margin-top:10px}
.more{font-style:italic; color:var(--ink-soft); font-size:15px}
.loading{color:var(--ink-soft); font-style:italic; font-family:var(--serif); text-align:center; padding:40px 0}

dialog.reader{--rs:20px; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:var(--vignette), var(--grain), var(--mottle), var(--page); color:var(--ink); box-shadow:none}
dialog.reader[data-size="s"]{--rs:17.5px}
dialog.reader[data-size="l"]{--rs:23px}
dialog.reader[open]{display:flex; flex-direction:column; animation:readerIn .22s ease-out}
dialog.reader::backdrop{background:var(--page)}
@keyframes readerIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.rbar{flex:none; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom:1px solid var(--rule); background:color-mix(in srgb, var(--page) 70%, transparent)}
.rclose{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px 0 10px; border:1px solid var(--rule); border-radius:19px; background:none; cursor:pointer; font-size:14px; color:var(--ink-soft)}
.rclose:hover{color:var(--ink); border-color:var(--ink-soft)}
.rclose svg{width:16px; height:16px}
.rnav{display:flex; align-items:center; gap:2px; margin:0 auto}
.rarrow{width:40px; height:40px; border-radius:50%; border:0; background:none; font-size:26px; line-height:1; cursor:pointer; color:var(--ink-soft)}
.rarrow:hover:not(:disabled){background:var(--gold-wash); color:var(--ink)}
.rarrow:disabled{opacity:.25; cursor:default}
.rtitle{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px 0 18px; border:0; border-radius:21px; background:none; cursor:pointer; font-family:var(--serif); font-size:22px; font-weight:500; color:var(--ink); white-space:nowrap}
.rtitle svg{width:14px; height:14px; color:var(--gold-strong); transition:transform .15s}
.rtitle:hover, .rtitle[aria-expanded="true"]{background:var(--gold-wash)}
.rtitle[aria-expanded="true"] svg{transform:rotate(180deg)}
.rsearch{display:flex; align-items:center; height:40px; border:1px solid var(--rule); border-radius:20px; background:var(--surface); padding:0 4px 0 16px; width:min(360px, 32vw)}
.rsearch:focus-within{outline:2px solid var(--gold); outline-offset:1px}
.rsearch input{flex:1; min-width:0; border:0; background:none; height:100%; font-size:15px; outline:none}
.rsearch input::-webkit-search-cancel-button{display:none}
.rsearch button{width:34px; height:34px; border:0; border-radius:50%; background:none; cursor:pointer; color:var(--ink-soft); display:grid; place-items:center}
.rsearch button:hover{background:var(--gold-wash); color:var(--ink)}
.rsearch svg{width:17px; height:17px}
.rset{width:40px; height:40px; border-radius:50%; border:1px solid var(--rule); background:none; cursor:pointer; font-family:var(--serif); font-size:17px; color:var(--ink)}
.rset:hover{background:var(--gold-wash)}
.rbody{position:relative; flex:1; min-height:0}
.rmain{position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; outline:none}
.rgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,38rem) minmax(0,1fr); gap:0 56px; padding:52px 28px calc(90px + env(safe-area-inset-bottom, 0px))}
.rcol{grid-column:2; min-width:0}
.rside{grid-column:3; align-self:start; position:sticky; top:52px; max-width:270px}
.rside h3{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:8px 0 12px; font-weight:500}
.rside ul{list-style:none; margin:0; padding:0; border-left:2px solid color-mix(in srgb, var(--gold) 45%, transparent)}
.rside button{display:block; width:100%; text-align:left; border:0; background:none; padding:8px 12px 9px 14px; cursor:pointer; border-radius:0 8px 8px 0; color:var(--ink)}
.rside button:hover{background:var(--gold-wash)}
.sdate{display:block; font-size:12.5px; color:var(--gold-strong); font-variant-numeric:tabular-nums; margin-bottom:1px}
.stitle{display:block; font-family:var(--serif); font-size:16px; line-height:1.3}

.chead{margin:0 0 30px; text-align:center}
.chead::after{content:""; display:block; width:56px; height:1px; background:var(--gold); margin:20px auto 0; opacity:.7}
.cbook{font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-strong); margin:0}
.cgroup{font-family:var(--serif); font-style:italic; color:var(--ink-soft); margin:6px 0 0; font-size:15.5px}
.scripture{font-family:var(--serif); font-size:var(--rs); line-height:1.74; color:var(--ink); hyphens:auto; -webkit-hyphens:auto; font-variant-numeric:oldstyle-nums}
.scripture .bp{margin:0 0 .8em; text-indent:1.4em}
.scripture .bp:first-child, .scripture .bsec + .bp, .scripture .ptitle + .bp, .scripture .pch + .bp{text-indent:0}
.cnum.cnum-poem{float:none; display:block; text-align:center; font-size:3.2em; line-height:1; margin:0 0 .15em}
.bsec + .cnum.cnum-poem{margin-top:-.2em}
.cnum{float:left; font-family:var(--serif); font-weight:500; font-size:3.9em; line-height:.8; margin:.07em .14em 0 -.03em; color:var(--accent); font-variant-numeric:lining-nums}
.vn{font-family:var(--sans); font-size:.56em; font-weight:700; color:var(--gold-strong); vertical-align:.65em; line-height:0; margin:0 .24em 0 .12em; cursor:pointer; user-select:none; -webkit-user-select:none; font-variant-numeric:lining-nums}
.bpoem{margin:.1em 0 .9em}
.bl{display:block; padding-left:2.2em; text-indent:-1.4em}
.bl.l2{padding-left:3.5em}
.bl.l3{padding-left:4.8em}
.bstz{display:block; height:.75em}
.selah{font-style:italic; color:var(--ink-soft); font-size:.9em; margin-left:.3em}
.ptitle{font-style:italic; color:var(--ink-soft); font-size:.88em; margin:0 0 1em; text-align:center; line-height:1.5}
.bsec{font-family:var(--sans); font-size:.6em; font-weight:500; letter-spacing:.26em; text-transform:uppercase; text-align:center; color:var(--ink-soft); margin:0 0 1.2em}
.vt.hl{background:linear-gradient(to bottom, transparent 12%, var(--gold-wash) 12%, var(--gold-wash) 90%, transparent 90%)}
.redletter .wj, #passage.redletter .wj{color:var(--jesus)}
.vomit{font-style:italic; color:var(--ink-soft); font-size:.82em}
.cfoot{display:flex; justify-content:space-between; gap:16px; margin:60px 0 0; padding-top:24px; border-top:1px solid var(--rule)}
.cnav{display:flex; flex-direction:column; gap:3px; border:0; background:none; cursor:pointer; font-family:var(--serif); font-size:19px; color:var(--ink); padding:8px 4px; text-align:left}
.cnav.next{text-align:right; margin-left:auto}
.cnav small{font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.cnav:hover{color:var(--gold-strong)}
.rcredit{text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:36px}

.rpicker{position:absolute; inset:0; overflow:auto; background:var(--grain), var(--page); z-index:5; animation:readerIn .16s ease-out}
.pinner{max-width:1060px; margin:0 auto; padding:30px 28px 70px; display:grid; grid-template-columns:1fr 1fr; gap:12px 64px}
.pinner.chapters{grid-template-columns:1fr; max-width:820px}
.ptest h3{font-family:var(--serif); font-size:28px; font-weight:500; margin:0 0 2px}
.ptest h4{font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-strong); margin:20px 0 6px; font-weight:500}
.pbooks{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1px 8px}
.pbooks button{text-align:left; border:0; background:none; padding:7px 10px; border-radius:7px; font-family:var(--serif); font-size:17px; cursor:pointer; color:var(--ink)}
.pbooks button:hover, .pbooks button[aria-current="true"]{background:var(--gold-wash)}
.pbooks button[aria-current="true"]{color:var(--gold-strong); font-weight:700}
.pchead{display:flex; align-items:baseline; gap:18px; margin-bottom:10px}
.pchead h3{font-family:var(--serif); font-size:30px; font-weight:500; margin:0}
.pback{border:0; background:none; cursor:pointer; color:var(--ink-soft); font-size:14px; padding:6px 0}
.pback:hover{color:var(--ink)}
.pchaps{display:grid; grid-template-columns:repeat(auto-fill, minmax(54px, 1fr)); gap:8px}
.pchaps button{aspect-ratio:1; border:1px solid var(--rule); background:var(--surface); border-radius:10px; font-family:var(--serif); font-size:18px; cursor:pointer; color:var(--ink); font-variant-numeric:lining-nums}
.pchaps button:hover{border-color:var(--gold); color:var(--gold-strong)}
.pchaps button[aria-current="true"]{background:var(--ink); color:var(--page); border-color:var(--ink)}
.rsettings{position:absolute; right:16px; top:10px; z-index:6; background:var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:0 16px 48px rgba(40,26,10,.28); padding:16px 18px 18px; width:260px; animation:readerIn .14s ease-out}
.rsettings p{margin:0 0 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.seg{display:flex; border:1px solid var(--rule); border-radius:10px; overflow:hidden; margin-bottom:16px}
.seg button{flex:1; height:42px; border:0; background:none; cursor:pointer; font-family:var(--serif); color:var(--ink)}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--gold-wash); color:var(--gold-strong); font-weight:700}
.seg [data-size="s"]{font-size:15px}
.seg [data-size="m"]{font-size:19px}
.seg [data-size="l"]{font-size:24px}
.rsettings label{display:flex; gap:10px; align-items:center; font-size:15px; cursor:pointer}
.rsettings input{width:18px; height:18px; accent-color:var(--gold-strong)}

.sq{font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.2; margin:10px 0 6px}
.scount{color:var(--ink-soft); margin:0}
.shelp{color:var(--ink-soft); font-family:var(--serif); font-size:17px; line-height:1.6; text-align:center}
.sfilters{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; justify-content:center}
.sfilters button{border:1px solid var(--rule); background:var(--surface); border-radius:16px; padding:5px 12px; font-size:13.5px; cursor:pointer; color:var(--ink)}
.sfilters button b{font-weight:500; color:var(--ink-soft); margin-left:4px; font-variant-numeric:tabular-nums}
.sfilters button[aria-pressed="true"]{background:var(--ink); color:var(--page); border-color:var(--ink)}
.sfilters button[aria-pressed="true"] b{color:inherit; opacity:.75}
.sresults{list-style:none; margin:0; padding:0}
.sresults li{padding:15px 0 16px; border-bottom:1px solid var(--rule); font-family:var(--serif); font-size:calc(var(--rs) * .9); line-height:1.6}
.sref-go{display:block; border:0; background:none; padding:0; margin:0 0 3px; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--gold-strong); cursor:pointer}
.sref-go:hover{text-decoration:underline; text-underline-offset:3px}
mark{background:var(--gold-wash); color:inherit; border-radius:2px; box-shadow:0 0 0 1px var(--gold-wash); font-weight:600}
.smore{display:block; margin:26px auto 0; border:1px solid var(--rule); background:var(--surface); border-radius:20px; padding:9px 20px; cursor:pointer; color:var(--ink)}
.smore:hover{border-color:var(--gold)}

@media (max-width:1100px){
  .rgrid{grid-template-columns:minmax(0,1fr); max-width:44rem; margin:0 auto; padding:36px 24px calc(90px + env(safe-area-inset-bottom, 0px))}
  .rcol{grid-column:1}
  .rside{grid-column:1; grid-row:1; position:static; max-width:none; margin:0 0 28px}
  .rside ul{display:flex; gap:8px; overflow-x:auto; border:0; padding-bottom:4px; scrollbar-width:thin}
  .rside li{flex:none}
  .rside button{border:1px solid var(--rule); border-radius:10px; padding:7px 12px; max-width:240px; background:var(--surface)}
  .rside h3{text-align:center}
}
@media (max-width:720px){
  .controls .biblebtn span{display:none}
  .controls .biblebtn{padding:0 10px}
  .rbar{flex-wrap:wrap; gap:8px; padding:calc(8px + env(safe-area-inset-top, 0px)) 10px 10px}
  .rclose{padding:0 10px}
  .rclose span{display:none}
  .rtitle{font-size:19px; padding:0 12px}
  .rarrow{width:36px; height:36px}
  .rsearch{order:5; width:100%}
  .rgrid{padding:26px 20px calc(80px + env(safe-area-inset-bottom, 0px))}
  .pinner{grid-template-columns:1fr; padding:22px 16px 60px; gap:6px}
  .pbooks{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rsettings{right:10px}
  .sq{font-size:27px}
  .cfoot .cnav{font-size:17px}
}

@media (max-width:720px){
  .top{padding:10px 12px 8px; gap:8px}
  .brand{max-width:300px}
  .controls{width:100%}
  .controls input{flex:1 1 220px; width:auto; min-width:0}
  .controls select{flex:1 1 140px; min-width:120px; max-width:none}
  .foot{padding:6px 12px 8px}
  .legend .hint{display:none}
  .pop{padding:22px 18px 22px}
  .pop h2{font-size:25px}
}
@media (prefers-reduced-motion: reduce){ dialog[open]{animation:none} }

/* ===== Word study (site edition): translation switch, BSB word links, Hebrew and Greek, word panel ===== */
[lang="he"], [lang="arc"]{font-family:"Noto Serif Hebrew", "SBL Hebrew", "Times New Roman", serif}
[lang="grc"]{font-family:var(--serif)}
.linkbtn{border:0; background:none; padding:0; font:inherit; color:var(--gold-strong); cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--gold) 45%, transparent); text-underline-offset:3px}
.linkbtn:hover{text-decoration-color:currentColor}
.legend .credlink{font-size:inherit; line-height:inherit; color:var(--ink-soft)}
.rtrans{display:flex; border:1px solid var(--rule); border-radius:20px; overflow:hidden; height:40px; flex:none}
.rtrans[hidden]{display:none}
.rtrans button{border:0; background:none; padding:0 13px; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--ink-soft)}
.rtrans button + button{border-left:1px solid var(--rule)}
.rtrans button[aria-pressed="true"]{background:var(--gold-wash); color:var(--gold-strong)}
.rtrans button:hover{color:var(--ink)}
.rsettings .rsp{margin-top:18px}
.rsettings #rwordset label{margin-bottom:10px; align-items:flex-start; line-height:1.3}
.rsettings #rwordset input{flex:none; margin-top:1px}
.rbtn{display:block; width:100%; margin-top:6px; border:1px solid var(--rule); background:none; border-radius:9px; padding:8px 10px; cursor:pointer; font-size:14px; color:var(--ink)}
.rbtn:hover:not(:disabled){border-color:var(--gold)}
.rbtn:disabled{opacity:.7; cursor:default}

/* BSB: each English phrase opens the word it translates */
.bw{cursor:pointer; border-radius:3px}
.bw:hover{background:var(--gold-wash); box-shadow:0 0 0 2px var(--gold-wash)}
.bw.wsel, .wc.wsel{background:color-mix(in srgb, var(--gold) 28%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 28%, transparent)}
.fn{font-family:var(--sans); font-size:.56em; font-weight:700; font-style:italic; color:var(--accent); vertical-align:.65em; line-height:0; margin:0 .1em 0 .05em; cursor:pointer; user-select:none; -webkit-user-select:none}
.fnpop{position:absolute; z-index:4; width:min(330px, calc(100% - 16px)); background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:0 12px 36px rgba(40,26,10,.22); padding:10px 14px; font-family:var(--serif); font-size:16px; line-height:1.45}
.fnpop p{margin:0}
.bhead{font-family:var(--sans); font-size:.68em; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); margin:1.5em 0 .5em}
.bhead:first-child{margin-top:0}
.bhead.bsub{font-weight:500; font-style:italic; letter-spacing:0}
.bspk{font-family:var(--sans); font-size:.62em; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-strong); margin:1.2em 0 .3em}
.bacro{font-family:var(--sans); font-size:.66em; font-weight:700; letter-spacing:.12em; color:var(--gold-strong); margin:1.4em 0 .4em; text-align:center}

/* Hebrew and Greek under each verse */
.scripture.study .sv{padding:0 0 14px; margin:0 0 16px; border-bottom:1px solid var(--rule)}
.scripture.study .svt .bp, .scripture.study .svt .bpoem{margin:0 0 .5em}
.scripture.study .svt .bp{text-indent:0}
.il{display:flex; flex-wrap:wrap; gap:6px 4px; margin:4px 0 0}
.wc{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:44px; padding:5px 7px 6px; border:1px solid transparent; border-radius:8px; background:none; cursor:pointer; color:var(--ink); line-height:1.25}
.wc:hover{border-color:var(--rule); background:var(--surface)}
.wo{font-size:calc(var(--rs) * 1.12); line-height:1.5}
.wt{font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); font-style:italic}
.we{font-family:var(--sans); font-size:12.5px; color:var(--gold-strong); max-width:12em; text-align:center}
.ilnone, .ilnote{font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); font-style:italic; line-height:1.45; margin:6px 0 0}
.ilnote{margin-top:24px; text-align:center}

/* The word panel */
.wpanel{position:absolute; top:0; right:0; bottom:0; z-index:4; width:min(420px, 100%); overflow:auto; background:var(--grain), var(--surface); border-left:1px solid var(--rule); box-shadow:-18px 0 40px rgba(40,26,10,.14); animation:wpIn .16s ease-out}
.wpanel[hidden]{display:none}
@keyframes wpIn{from{opacity:0; transform:translateX(16px)}to{opacity:1; transform:none}}
.wclose{position:sticky; top:10px; float:right; margin:10px 12px 0 0; width:36px; height:36px; border-radius:50%; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-size:20px; line-height:1; color:var(--ink); z-index:1}
.wbody{padding:22px 26px 40px}
.wkick{margin:0 0 6px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.wform{font-size:46px; line-height:1.35; margin:6px 0 0; text-align:left}
.wform[dir="rtl"]{text-align:right}
.wxl{font-style:italic; font-size:18px; color:var(--ink-soft); margin:2px 0 10px}
.wbsb{font-family:var(--serif); font-size:18px; margin:0 0 6px}
.wbsb q{color:var(--gold-strong)}
.wbody h4{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin:22px 0 8px; padding-top:14px; border-top:1px solid var(--rule)}
.wnum{letter-spacing:.04em; color:var(--gold-strong); margin-left:6px}
.wg{font-weight:500; margin:0 0 8px; line-height:1.45}
.wnotes{margin:0; font-size:14.5px; line-height:1.45}
.wnotes dt{font-weight:700; margin-top:6px}
.wnotes dd{margin:0; color:var(--ink-soft)}
.wlemma{margin:0 0 4px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline}
.wlf{font-size:28px}
.wlx{font-style:italic; color:var(--ink-soft)}
.wgloss{font-weight:700; margin:0 0 8px}
.wdef, .wdef p{font-family:var(--serif); font-size:16px; line-height:1.5; margin:0 0 6px}
.wety, .wuse{font-size:14.5px; line-height:1.45; margin:6px 0 0}
.wety span, .wuse span{color:var(--ink-soft)}
.wsrc{font-size:12.5px; color:var(--ink-soft); margin:12px 0 0; line-height:1.4}
.wx{border:1px solid var(--rule); background:none; border-radius:10px; padding:0 6px; cursor:pointer; font-size:.9em; color:var(--gold-strong)}
.wx:hover{border-color:var(--gold)}
.wcount{margin:0 0 10px}
.wall{border:1px solid var(--rule); background:var(--surface); border-radius:18px; padding:7px 16px; cursor:pointer; color:var(--ink); margin-top:10px}
.wall:hover{border-color:var(--gold)}

/* Word search results and suggestions */
.wtitle{border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer}
.wtitle[lang="he"], .wtitle[lang="arc"]{font-size:1.2em}
.wtitle:hover{color:var(--gold-strong)}
.wchips{display:flex; flex-wrap:wrap; gap:4px 6px; margin:2px 0 4px}
.wchip{font-family:var(--sans); font-size:13px; color:var(--ink-soft); border:1px solid var(--rule); border-radius:10px; padding:1px 8px}
.wchip [lang]{font-size:16px; color:var(--ink)}
.wsuggest{margin:-10px 0 22px; text-align:center}
.wsuggest p{margin:0 0 8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.wsuggest button{margin:3px; border:1px solid var(--rule); background:var(--surface); border-radius:16px; padding:5px 12px; cursor:pointer; color:var(--ink); font-size:14px}
.wsuggest button:hover{border-color:var(--gold)}
.wsuggest .wsl{font-size:18px}
.wsuggest b{font-weight:500; color:var(--gold-strong)}

/* Credits dialog */
.creditsdlg .credits{list-style:none; margin:0; padding:0}
.creditsdlg .credits li{border-top:1px solid var(--rule); padding:14px 0}
.creditsdlg .credits h3{font-family:var(--serif); font-size:19px; font-weight:700; margin:0 0 3px}
.creditsdlg .credits p{margin:0 0 4px; font-size:15px; line-height:1.5}
.creditsdlg .credits .by, .creditsdlg .credits .lic{color:var(--ink-soft)}
.creditsdlg .credits .lic{font-weight:500}
.creditsdlg a{color:var(--gold-strong)}

@media (max-width:720px){
  .rtrans{order:4; height:36px}
  .wpanel{top:auto; height:66%; width:100%; border-left:0; border-top:1px solid var(--rule); border-radius:16px 16px 0 0; box-shadow:0 -14px 40px rgba(40,26,10,.2)}
  .wbody{padding:18px 18px 40px}
  .wform{font-size:38px}
}

/* Words on the timeline: the strip in the word panel and on a word's page */
.wstripbox{margin:6px 0 4px}
.wstripbox.big{max-width:38rem; margin:0 auto 22px}
.wslabel{margin:0 0 4px; font-size:12.5px; color:var(--ink-soft)}
.wshelp{margin:2px 0 0; font-size:12px; color:var(--ink-soft); min-height:1em}
.wstrip{display:block; max-width:100%; height:auto; overflow:visible}
.wstrip text{font-family:var(--sans); font-size:11.5px; fill:var(--ink-soft)}
.wsb{fill:var(--gold)}
.wsb:hover{fill:var(--gold-strong)}
.wsb.on{fill:var(--accent)}
.wse0{fill:var(--era-a)}
.wse1{fill:var(--era-b)}
.wdate{margin-left:8px; font-size:12.5px; color:var(--ink-soft); font-variant-numeric:lining-nums}
.sresults .sref-go{display:inline-block}
.wperiod{text-align:center; color:var(--ink-soft); margin:-8px 0 16px}
/* Psalm headings sit above the centered chapter number */
.bhead:has(+ .cnum-poem){text-align:center}
/* On a wide screen the text moves over to make room for the word panel */
@media (min-width:1101px){
  dialog.reader.wopen .rmain{right:420px}
  dialog.reader.wopen .rgrid{grid-template-columns:minmax(0,1fr) minmax(0,38rem) minmax(0,.6fr); gap:0 36px}
  dialog.reader.wopen .rside{display:none}
}

/* ===== The live map (website): a pane below the timeline ===== */
.mapbtn{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 11px; border-radius:6px; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-weight:500; color:var(--ink)}
.mapbtn[hidden]{display:none}
.mapbtn svg{width:18px; height:18px}
.mapbtn:hover{border-color:var(--gold)}
.mapbtn[aria-pressed="true"]{background:var(--gold-wash); border-color:var(--gold); color:var(--gold-strong)}
.mappane{flex:none; position:relative; height:var(--maph, 42vh); display:flex; flex-direction:column; border-top:1px solid var(--rule); background:var(--map-sea)}
.mappane[hidden]{display:none}
.mapgrip{position:absolute; left:0; right:0; top:-5px; height:10px; cursor:ns-resize; z-index:3; touch-action:none}
.mapgrip::after{content:""; position:absolute; left:50%; top:3px; width:44px; height:4px; margin-left:-22px; border-radius:2px; background:var(--rule)}
.mapgrip:hover::after{background:var(--gold)}
.mapbar{flex:none; display:flex; align-items:center; gap:6px; padding:5px 10px 5px 16px; background:var(--surface); border-bottom:1px solid var(--rule)}
.mapnote{flex:1; min-width:0; margin:0; font-size:13.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mapctl{height:28px; min-width:32px; padding:0 10px; border:1px solid var(--rule); border-radius:6px; background:none; cursor:pointer; font-size:13px; color:var(--ink)}
.mapctl[hidden]{display:none}
.mapctl:hover:not(:disabled){border-color:var(--gold)}
.mapctl[aria-pressed="true"]{background:var(--gold-wash); color:var(--gold-strong); border-color:var(--gold)}
.mapwrap{position:relative; flex:1; min-height:0}
.mapview, .mapwrap > .mapview.maplibregl-map{position:absolute; inset:0}   /* MapLibre's own stylesheet, loaded later, makes the container relative */
.mapview .maplibregl-ctrl-group{background:var(--surface); border:1px solid var(--rule); box-shadow:none}
.mapview .maplibregl-ctrl-group button + button{border-top:1px solid var(--rule)}
.mapview .maplibregl-ctrl-attrib{background:color-mix(in srgb, var(--surface) 80%, transparent); color:var(--ink-soft); font-family:var(--sans); font-size:11px}
.mapview .maplibregl-ctrl-attrib a{color:var(--ink-soft)}
:root[data-palette="lamplight"] .mapview .maplibregl-ctrl-icon{filter:invert(.85)}
@media (prefers-color-scheme: dark){ :root:not([data-palette]) .mapview .maplibregl-ctrl-icon{filter:invert(.85)} }
/* labels: HTML over the map, positioned by the map module */
.maplabels{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.ml{position:absolute; left:0; top:0; white-space:nowrap; line-height:1; transform-origin:0 0; color:var(--map-ink); font-family:var(--sans); font-size:12.5px;
    text-shadow:0 0 3px var(--map-land), 0 0 3px var(--map-land), 0 0 2px var(--map-land); margin:-.5em 0 0 0}
.ml:not(.ml-left){translate:-50% 0}
.ml-left{margin-left:7px}
button.ml{pointer-events:auto; border:0; background:none; padding:1px 2px; cursor:pointer}
button.ml:hover{color:var(--gold-strong); text-decoration:underline; text-underline-offset:2px}
.ml-place.hi{font-weight:700; font-size:13.5px}
.ml-place.sel{color:var(--accent); font-weight:700; font-size:14.5px}
.ml-place.pass{font-style:italic; color:var(--map-ink-soft)}
.ml-area{font-style:italic; color:var(--map-ink-soft)}
.ml-sea{font-family:var(--serif); font-style:italic; font-size:15px; color:color-mix(in srgb, var(--map-ink) 60%, var(--map-sea)); text-shadow:none; letter-spacing:.04em}
.ml-river{font-family:var(--serif); font-style:italic; font-size:13px; color:color-mix(in srgb, var(--map-ink) 55%, var(--map-sea))}
.ml-land, .ml-region{font-size:12px; letter-spacing:.2em; color:var(--map-ink-soft); font-weight:500; opacity:.8; z-index:-1}
.ml-land{font-size:13.5px; letter-spacing:.28em}
.ml-route{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--gold-strong); font-weight:700}
.ml-region.ml-terr{font-family:var(--serif); font-style:italic; font-size:13.5px; letter-spacing:.02em; font-weight:500; color:var(--map-ink-soft); opacity:.9}
.ml-city{font-family:var(--serif); font-style:italic; font-size:13px; color:var(--map-ink)}
/* a place's card */
.mapcard{position:absolute; left:12px; top:12px; z-index:2; width:min(320px, calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto;
         background:var(--grain), var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:0 12px 34px rgba(40,26,10,.22); padding:14px 16px 16px}
.mapcard[hidden]{display:none}
.mcclose{float:right; width:30px; height:30px; margin:-4px -6px 0 8px; border-radius:50%; border:1px solid var(--rule); background:var(--surface); cursor:pointer; font-size:18px; line-height:1}
.mckick{margin:0 0 2px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.mapcard h3{font-family:var(--serif); font-size:24px; margin:0 0 6px}
.mapcard h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin:14px 0 6px}
.mcalso{margin:-2px 0 6px; font-style:italic; color:var(--ink-soft); font-size:14px}
.mcid{margin:0 0 2px; font-size:14.5px}
.mcsrc{display:block; margin:4px 0 0; font-size:12px; color:var(--ink-soft)}
a.mcsrc{color:var(--gold-strong)}
.mcbtn{display:block; margin:10px 0 0; border:1px solid var(--rule); background:none; border-radius:16px; padding:5px 12px; cursor:pointer; font-size:13.5px; color:var(--ink)}
.mcbtn:hover{border-color:var(--gold)}
.mcev{list-style:none; margin:0; padding:0; border-left:2px solid color-mix(in srgb, var(--gold) 45%, transparent)}
.mcev button{display:block; width:100%; text-align:left; border:0; background:none; padding:5px 8px 6px 10px; cursor:pointer; border-radius:0 8px 8px 0; color:var(--ink)}
.mcev button:hover{background:var(--gold-wash)}
.mcev .stitle{font-size:14.5px}
.mcpass{border-left-style:dashed}
.mcpass .stitle{color:var(--ink-soft)}
/* events marked on the timeline from a place (fainter: those that name it only in passing) */
.ev.maphit .mk{background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)}
.ev.maphit .lb{color:var(--accent)}
.ev.maphit-pass .mk{background:color-mix(in srgb, var(--accent) 40%, var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent)}
.ev.maphit-pass .lb{color:color-mix(in srgb, var(--accent) 65%, var(--ink-soft))}
.markbar{position:absolute; left:50%; bottom:12px; translate:-50% 0; z-index:5; display:flex; align-items:center; gap:10px; padding:6px 8px 6px 14px;
         background:var(--surface); border:1px solid var(--accent); border-radius:18px; box-shadow:0 8px 24px rgba(40,26,10,.2); font-size:14px}
.markbar[hidden]{display:none}
.markbar button{border:1px solid var(--rule); background:none; border-radius:12px; padding:2px 10px; cursor:pointer}
.pop .meta .maplink{margin:-2px 0 -2px auto; border:1px solid var(--rule); background:none; border-radius:14px; padding:2px 11px; cursor:pointer; font-size:13.5px; color:var(--ink)}
.pop .meta .maplink:hover{border-color:var(--gold); color:var(--gold-strong)}
@media (max-width:720px){ .mapbtn span{display:none} .mapbtn{padding:0 10px} }
/* the legend of routes and territories on the map */
.maplegend{position:absolute; left:12px; bottom:12px; z-index:1; display:flex; flex-direction:column; gap:2px; max-width:min(340px, calc(100% - 140px)); max-height:calc(100% - 24px); overflow:auto;
           background:color-mix(in srgb, var(--surface) 92%, transparent); border:1px solid var(--rule); border-radius:8px; padding:6px 8px}
.maplegend[hidden]{display:none}
.mlg{display:flex; align-items:center; gap:8px; border:0; background:none; padding:2px 4px; cursor:pointer; text-align:left; font-size:13px; color:var(--ink); border-radius:5px}
.mlg:hover{background:var(--gold-wash)}
.mlg-sw{flex:none; width:26px; height:0; border-top:3px solid var(--gold)}
.mlg-dashed{border-top-style:dashed}
.mlg-dotted{border-top:3px dotted var(--map-ink)}
.mlg-border{border-top:2px dashed var(--map-ink)}
.mlg-empire{height:12px; border:1.6px dashed var(--map-ink-soft); background:none; border-radius:2px}
.mlg-area{height:12px; border:1.5px solid color-mix(in srgb, var(--herod) 60%, transparent); background:color-mix(in srgb, var(--herod) 18%, transparent); border-radius:2px}
.mapcard:not([hidden]) ~ .maplegend{display:none}
/* ===== The Library (06-library.js): historical sources, set apart from Scripture ===== */
.libmark{display:inline-block; margin:0 0 14px; padding:3px 11px; border:1px solid var(--rule); border-radius:12px; font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface)}
.lpickmark{grid-column:1 / -1; justify-self:start}
.lhead{font-family:var(--serif); font-size:30px; font-weight:500; line-height:1.2; margin:8px 0 0}
.lbooksub{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-soft); margin:6px 0 0}
.lhome{padding:0 14px}
.lgroup{margin:0 0 34px}
.lgroup h3{font-family:var(--serif); font-size:26px; font-weight:500; margin:0 0 6px}
.labout, .lintro{font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--ink-soft); margin:0 0 14px}
.lintro{text-align:center; margin:-8px 0 26px}
.lworks{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.lworks button{display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--rule); background:none; padding:11px 8px 12px; cursor:pointer; color:var(--ink)}
.lworks button:hover{background:var(--gold-wash)}
.lwt{display:block; font-family:var(--serif); font-size:19px; font-weight:500}
.lwa{display:block; font-size:14.5px; line-height:1.45; color:var(--ink-soft); margin-top:2px}
.loff{text-align:center}
.lbook{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-strong); margin:26px 0 2px}
.lbook + .lbooksub{margin:0 0 8px}
.lchlist{list-style:none; margin:4px 0 0; padding:0}
.lchlist button{display:flex; gap:12px; width:100%; text-align:left; border:0; background:none; padding:6px 8px; border-radius:7px; cursor:pointer; color:var(--ink); font-size:15px; line-height:1.4}
.lchlist button:hover{background:var(--gold-wash)}
.lchlist b{flex:none; min-width:3.2em; font-weight:500; color:var(--gold-strong); font-variant-numeric:tabular-nums}
.lranges, .lpchaps{display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; margin:8px 0 0}
.lranges button{border:1px solid var(--rule); background:var(--surface); border-radius:10px; padding:10px 4px; font-family:var(--serif); font-size:17px; cursor:pointer; color:var(--ink); font-variant-numeric:lining-nums}
.lranges button:hover{border-color:var(--gold); color:var(--gold-strong)}
.lpchaps button{aspect-ratio:auto; padding:12px 4px}
.lchaps{margin-top:8px}
.libtext.josephus .lsec{text-indent:0; margin:0 0 .9em}
.lsideabout{font-size:14.5px; line-height:1.5; margin:0 0 6px}
.lsideby{font-size:13px; color:var(--ink-soft); margin:0 0 22px}
/* in an event's popup: the Library's witnesses */
.pop .witn{margin-top:14px; border-top:1px solid var(--rule); padding-top:10px}
.pop .witn h3{margin:0}
.pop .witn-sub{font-size:13.5px; color:var(--ink-soft); margin:2px 0 8px}
.pop .witn ul{list-style:none; margin:0; padding:0}
.pop .witn li{margin:0 0 6px; font-size:15px; line-height:1.45}
.witn-go{border:1px solid var(--rule); background:none; border-radius:14px; padding:1px 10px; margin-right:8px; cursor:pointer; font-size:14px; font-weight:500; color:var(--gold-strong)}
.witn-go:hover{border-color:var(--gold)}
.witn-note{color:var(--ink-soft)}
@media (max-width:720px){ .lhome{display:none} }
.libres .stext{display:block}
@media (max-width:1000px){ .controls .mapbtn span{display:none} .controls .mapbtn{padding:0 10px} }   /* Map and Library as icons, so the controls keep to one row */
.lkey{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:0 0 22px; font-size:13.5px; line-height:1.4}
.lkey dt{font-family:var(--serif); color:var(--gold-strong); white-space:nowrap}
.lkey dd{margin:0; color:var(--ink-soft)}