/* Constellation of Kin - a navigable cloud of great Jewish figures.
   Illuminated Codex palette; canvas cloud + HTML chrome. No framework. */
:root{
  --vellum:#F3E9D2; --vellum-2:#EFE3C6; --ink:#2A2419; --basalt:#221E1B;
  --stone:#CBB995; --lapis:#24356E; --lapis-d:#16224C; --gold:#C9A227;
  --gold-hi:#F0DD9A; --gold-d:#8C6E1D; --vermilion:#C8401F; --coast:#B98A4B;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;color:var(--vellum);
  font-family:"Inter",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(46% 40% at 50% 46%, #2a4290 0%, #1d2f66 38%, #16234e 64%, transparent 100%),
    radial-gradient(60% 50% at 50% 112%, rgba(150,46,30,.28), transparent 60%),
    radial-gradient(125% 125% at 50% 40%, #141d44 0%, #0c1130 55%, #07071c 100%);}
canvas#sky{position:fixed;inset:0;width:100vw;height:100vh;display:block;
  touch-action:none;cursor:grab;z-index:1}
canvas#sky:active{cursor:grabbing}

body>footer{display:none}   /* immersive canvas page - the build-nav footer doesn't belong */
.hud{position:fixed;left:34px;top:100px;max-width:392px;pointer-events:none;z-index:5}
.hud::before{content:"";position:absolute;z-index:-1;inset:-1.2rem -2.5rem -1.2rem -1.2rem;
  background:linear-gradient(90deg,rgba(10,15,40,.96) 0 72%,transparent);pointer-events:none}
.hud-toggle{display:flex;position:absolute;top:0;right:0;width:44px;height:44px;min-width:44px;min-height:44px;align-items:center;justify-content:center;
  pointer-events:auto;cursor:pointer;background:rgba(13,20,48,.62);border:1px solid rgba(201,162,39,.32);
  border-radius:7px;color:var(--gold-hi);font-size:13px;line-height:1;padding:0}
/* fold affordance: the verse, body copy and back-link collapse away (title + kick stay put
   as the "still here" affordance alongside the arrow); auto-fold timer lives in constellation.js */
.hud .pasuk,.hud>p,.hud .back{transition:opacity .25s ease,max-height .3s ease,margin .25s ease,padding .25s ease,visibility 0s;
  max-height:600px;opacity:1;overflow:hidden}
.hud.folded .pasuk,.hud.folded>p,.hud.folded .back{max-height:0;opacity:0;margin:0;padding-top:0;pointer-events:none;visibility:hidden;transition:opacity .25s ease,max-height .3s ease,margin .25s ease,padding .25s ease,visibility 0s .3s}
.hud.folded .pasuk{border-top-width:0}
@media (prefers-reduced-motion:reduce){.hud .pasuk,.hud>p,.hud .back,.hud.folded .pasuk,.hud.folded>p,.hud.folded .back{transition:none}}
.hud .pasuk{margin:15px 0 4px;padding-top:14px;border-top:1px solid rgba(201,162,39,.28);max-width:40ch}
.hud .pasuk .he{font-family:"Frank Ruhl Libre",serif;font-size:21px;line-height:1.7;color:var(--gold-hi);margin:0 0 7px}
.hud .pasuk .en{font-family:"Newsreader",serif;font-style:italic;font-size:15px;line-height:1.55;color:#e2e7f5;margin:0}
.hud .pasuk .src{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.88;margin:7px 0 0}
.hud .kick{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:.92}
.hud h1{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:32px;margin:.16em 0 .2em;
  color:var(--vellum);line-height:1.05;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.hud p{font-size:15.5px;line-height:1.55;color:#dde3f5;margin:0;max-width:42ch}
.hud em{color:var(--gold-hi);font-style:normal}
.hud .back{pointer-events:auto;display:inline-block;margin-top:14px;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--coast);text-decoration:none;
  border-bottom:1px solid rgba(185,138,75,.4);padding-bottom:2px}

.constellation-instrument{position:fixed;right:18px;top:72px;z-index:30;width:244px}
.tools-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:44px;min-height:44px;
  padding:8px 13px;border:1px solid rgba(201,162,39,.3);border-radius:9px;cursor:pointer;
  font:500 10px/1 "Inter",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(20,28,58,.84),rgba(11,17,40,.88));backdrop-filter:blur(8px)}
.tools-toggle-mark{font-size:15px;transition:transform .2s ease}
.constellation-instrument.collapsed .tools-toggle-mark{transform:rotate(-90deg)}
.constellation-tools{margin-top:8px;padding:12px 14px;border:1px solid rgba(201,162,39,.25);border-radius:11px;
  background:linear-gradient(180deg,rgba(20,28,58,.88),rgba(11,17,40,.9));backdrop-filter:blur(8px);
  box-shadow:0 7px 26px rgba(0,0,0,.35);max-height:calc(100vh - 140px);overflow-y:auto}
.constellation-instrument.collapsed .constellation-tools{display:none}
.legend{text-align:right;font-size:11px;color:#d4dcf2;line-height:1.9;pointer-events:none}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:7px;vertical-align:middle}

/* gold-filament time control */
.time{position:fixed;left:9%;right:9%;bottom:46px;height:2px;z-index:6;
  background:linear-gradient(90deg,rgba(201,162,39,0),rgba(201,162,39,.7) 8%,rgba(201,162,39,.7) 92%,rgba(201,162,39,0))}
.time .bead{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--gold-d);
  transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(240,221,154,.3)}
.time .bead b{position:absolute;top:12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:10px;letter-spacing:.1em;color:#a8b4d8;opacity:.72;font-weight:400}
.time .handle{position:absolute;top:50%;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;cursor:ew-resize;z-index:7;
  background:transparent;transform:translate(-50%,-50%);touch-action:none}
.time .handle::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 38% 32%,#FFF1C2,#C9A227 60%,#8C6E1D);
  box-shadow:0 0 16px 4px rgba(240,221,154,.7)}
.time .handle.hstart::before{background:radial-gradient(circle at 38% 32%,#FFF1C2,#B98A4B 60%,#6E5512)}
.time .handle:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.time .rangeband{position:absolute;top:50%;height:4px;transform:translateY(-50%);pointer-events:none;
  background:linear-gradient(90deg,rgba(201,162,39,.35),rgba(240,221,154,.7),rgba(201,162,39,.35));
  border-radius:2px;box-shadow:0 0 9px rgba(240,221,154,.35)}
.time .yearOut{position:absolute;bottom:16px;transform:translateX(-50%);font-family:"Frank Ruhl Libre",serif;
  font-size:19px;color:var(--gold-hi);white-space:nowrap;text-shadow:0 1px 10px #000}
.time .scrubhint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:#a8b4d8;opacity:.5}
.time .lossmark{position:absolute;top:50%;width:5px;height:5px;background:#b7afc2;opacity:.4;
  transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 4px rgba(183,175,194,.5)}
.time .losslabel{position:absolute;bottom:13px;transform:translateX(-50%);white-space:nowrap;
  font-family:"Frank Ruhl Libre",serif;font-style:italic;font-size:12px;color:#cfc6d8;opacity:0;
  transition:opacity .35s ease;text-shadow:0 1px 8px #000;pointer-events:none}
.devpanel{position:fixed;right:18px;top:258px;z-index:30;width:208px;padding:9px 12px 11px;
  background:rgba(13,20,48,.72);border:1px solid rgba(201,162,39,.32);border-radius:6px;
  font-family:"Inter",sans-serif;font-size:11px;color:#cfd6ea;backdrop-filter:blur(5px)}
.devpanel .dptitle{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.85;margin-bottom:6px}
.devpanel .dprow{display:flex;align-items:center;gap:8px;margin:5px 0}
.devpanel .dprow span{width:40px;font-size:10px;letter-spacing:.06em;color:#9fb0d8}
.devpanel .dprow input[type=range]{flex:1;accent-color:#C9A227;height:3px}
.devpanel .dprow b{width:30px;text-align:right;color:var(--gold-hi);font-weight:500}
.devpanel .dphint{font-size:9px;line-height:1.5;color:#7f8cb5;margin-top:7px}
@media (max-width:760px){.devpanel{top:auto;bottom:110px;right:10px;width:180px}}
.ctl{display:flex;flex-direction:column;gap:4px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(201,162,39,.18);
  font-family:"Inter",sans-serif;color:#aeb9d8}
.ctl-row{display:flex;align-items:center;gap:10px}
.ctl .dlab{width:46px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#8b9bc4}
.ctl input[type=range]{width:112px;min-height:44px;accent-color:#C9A227;cursor:ew-resize}
.ctl .dval{min-width:46px;text-align:right;font-family:"Frank Ruhl Libre",serif;font-size:15px;
  font-weight:500;color:var(--gold-hi);letter-spacing:.02em}
.ctl .chip{font-family:inherit;font-size:10px;letter-spacing:.07em;color:#8b9bc4;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid rgba(201,162,39,.22);border-radius:11px;
  min-width:44px;min-height:44px;padding:3px 8px;transition:background .15s,color .15s,border-color .15s}
.ctl .chip:hover{border-color:rgba(201,162,39,.55);color:#d4dcf0}
.ctl .chip.on{background:rgba(201,162,39,.92);border-color:#C9A227;color:#1a1206;font-weight:600;
  box-shadow:0 0 11px rgba(201,162,39,.45)}
/* ---- guided flypaths ---- */
.tourbtn{display:block;width:100%;min-width:44px;min-height:44px;margin-top:8px;font-family:"Inter",sans-serif;
  font-size:11px;letter-spacing:.1em;color:var(--gold-hi);cursor:pointer;background:rgba(13,20,48,.66);
  border:1px solid rgba(201,162,39,.4);border-radius:18px;padding:7px 18px;transition:background .15s,border-color .15s}
.tourbtn:hover{background:rgba(201,162,39,.16);border-color:var(--gold)}
body.touring .tourbtn{display:none}
.tourmenu{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:40;width:min(440px,90vw);
  display:none;flex-direction:column;gap:8px;padding:24px;border-radius:14px;backdrop-filter:blur(9px);
  background:linear-gradient(180deg,rgba(20,28,58,.97),rgba(11,17,40,.98));border:1px solid rgba(201,162,39,.35);box-shadow:0 22px 72px rgba(0,0,0,.62)}
.tourmenu.open{display:flex}
.tourmenu .tm-head{font-family:"Frank Ruhl Libre",serif;font-size:21px;color:var(--gold-hi);margin-bottom:8px;text-align:center}
.tourmenu .tm-route{text-align:left;display:block;background:rgba(255,255,255,.04);border:1px solid rgba(201,162,39,.2);
  border-radius:9px;min-height:44px;padding:11px 15px;cursor:pointer;color:#dde3f5;font-family:"Inter",sans-serif;transition:background .15s,border-color .15s}
.tourmenu .tm-route:hover{background:rgba(201,162,39,.14);border-color:var(--gold)}
.tourmenu .tm-route b{display:block;font-family:"Frank Ruhl Libre",serif;font-size:16px;color:var(--gold-hi);font-weight:500;margin-bottom:3px}
.tourmenu .tm-route span{font-size:12px;line-height:1.45;color:#aab4d4}
.tourmenu .tm-close{min-width:44px;min-height:44px;margin-top:6px;background:none;border:none;color:#8b9bc4;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:6px}
.tourmenu .tm-close:hover{color:#cfd6ea}
.tourbar{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);z-index:25;width:min(620px,92vw);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;padding:16px 22px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,rgba(18,26,54,.88),rgba(11,17,40,.92));border:1px solid rgba(201,162,39,.3);
  backdrop-filter:blur(7px);box-shadow:0 10px 38px rgba(0,0,0,.48)}
.tourbar.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.tourbar .tb-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.tourbar .tb-title{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.tourbar .tb-count{font-size:10px;letter-spacing:.1em;color:#8b9bc4}
.tourbar .tb-beat{font-family:"Newsreader",serif;font-size:16px;line-height:1.5;color:#eef1fa;margin-bottom:13px;min-height:48px}
.tourbar .tb-ctrl{display:flex;gap:8px;justify-content:center}
.tourbar .tb-ctrl button{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.05em;cursor:pointer;border-radius:16px;
  min-width:44px;min-height:44px;padding:6px 16px;border:1px solid rgba(201,162,39,.3);background:rgba(255,255,255,.04);color:#cfd6ea;transition:background .15s,border-color .15s}
.tourbar .tb-ctrl button:hover{background:rgba(201,162,39,.15);border-color:var(--gold)}
.tourbar .tb-next{background:rgba(201,162,39,.9);color:#1a1206;border-color:#C9A227;font-weight:600}
.tourbar .tb-prev:disabled{opacity:.3;cursor:default}
body.touring .constellation-instrument,body.touring .hud{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s}
/* a figure card's close button must never sit under the instrument dock - lower the dock
   out of the way (mirrors the body.touring pattern above) whenever a card is open */
body.card-open .constellation-instrument{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s}

/* figure card - Scroll over Stone */
.card{position:fixed;top:58px;right:0;height:calc(100% - 58px);width:392px;z-index:20;transform:translateX(106%);
  transition:transform .45s cubic-bezier(.4,0,.15,1);background:#0d1430;
  box-shadow:-30px 0 60px rgba(0,0,0,.55);overflow:hidden;display:flex;flex-direction:column}
.card.open{transform:translateX(0)}
.card .media{height:230px;background-size:cover;background-position:50% 24%;position:relative;flex:none;
  filter:contrast(1.1) saturate(1.14) sepia(.1)}
.card .media.veil{filter:none;background:radial-gradient(circle at 42% 36%,#F0DD9A,#C9A227 55%,#7A5E16);
  display:flex;align-items:center;justify-content:center;font-family:"Frank Ruhl Libre",serif;
  font-size:118px;color:#6e5512}
.card .media.loss{filter:none;height:150px;background:radial-gradient(circle at 50% 30%,#46415a,#262232 72%)}
.card .media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 70% at 38% 26%,rgba(255,233,176,.18),transparent 60%),
             linear-gradient(180deg,transparent 42%,#0d1430 99%)}
.card .head{padding:0 30px;margin-top:-44px;position:relative;z-index:2;flex:none}
.card .cname{font-family:"Frank Ruhl Libre",serif;font-size:31px;color:var(--vellum);line-height:1.05}
.card .cdate{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-top:6px;color:var(--gold)}
.card .body{padding:20px 30px 26px;overflow:auto}
.reg{margin-bottom:14px;border-radius:3px;padding:14px 16px}
.reg .rl{font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:block;margin-bottom:6px}
.reg.scroll{background:var(--vellum);color:#2a2419}.reg.scroll .rl{color:#9E3B2E}
.reg.scroll p{font-family:"Newsreader",Georgia,serif;font-size:15px;line-height:1.5;margin:0}
.reg.stone{background:var(--basalt);color:var(--stone)}.reg.stone .rl{color:var(--gold)}
.reg.stone p{font-size:12.5px;line-height:1.55;margin:0}
.reg.stone .src{display:block;margin-top:8px;font-size:11px;color:#8c7f63}
.card .kin{font-size:12px;color:#a8b4d8;line-height:1.5}.card .kin b{color:var(--gold-hi);font-weight:500}
.card .pending{margin-top:14px;font-size:11px;color:#6f7aa0;font-style:italic}
.card .close{position:absolute;top:14px;right:16px;z-index:5;background:rgba(0,0,0,.4);
  color:#fff;border:none;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;font-size:18px;cursor:pointer}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .hud{left:14px;right:auto;top:calc(58px + env(safe-area-inset-top,0px) + 12px);max-width:min(72vw,290px);z-index:9;
    background:rgba(10,15,40,.82);border:1px solid rgba(201,162,39,.22);border-radius:12px;
    padding:11px 14px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .hud h1{font-size:23px}.hud p{font-size:13px}
  .hud .pasuk .he{font-size:18px}.hud .pasuk .en{font-size:13.5px}
  .constellation-instrument{top:auto;right:10px;bottom:92px;left:10px;width:auto;height:44px}
  .tools-toggle{position:absolute;right:0;bottom:0;width:min(210px,60vw)}
  .constellation-tools{position:absolute;right:0;bottom:52px;width:min(370px,calc(100vw - 20px));margin:0;
    max-height:calc(100dvh - 190px);padding:10px 12px}
  .legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 10px;text-align:left;font-size:9px;line-height:1.45}
  .legend i{margin-left:4px}
  .ctl{margin-top:7px;padding-top:5px}
  .ctl-row{min-height:44px}
  .ctl input[type=range]{width:auto;min-width:0;flex:1}
  .ctl .dval{min-width:42px}
  .time{left:6%;right:6%;bottom:40px}
  .card{width:100%;height:86%;top:auto;bottom:0;border-radius:16px 16px 0 0;transform:translateY(106%)}
  .card.open{transform:translateY(0)}
}
/* short / landscape screens: fold the HUD so the tall text doesn't overflow */
@media (max-height:560px){
  .hud{top:calc(74px + env(safe-area-inset-top,0px) + 8px);z-index:9;
    background:rgba(10,15,40,.82);border:1px solid rgba(201,162,39,.22);border-radius:12px;
    padding:11px 14px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .constellation-instrument{top:auto;right:10px;bottom:76px;left:auto;width:min(370px,44vw);height:44px}
  .tools-toggle{position:absolute;right:0;bottom:0;width:min(210px,100%)}
  .constellation-tools{position:absolute;right:0;bottom:52px;width:100%;margin:0;max-height:calc(100dvh - 202px);padding:10px 12px}
  .legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 10px;text-align:left;font-size:9px;line-height:1.45}
  .legend i{margin-left:4px}
  .ctl{margin-top:7px;padding-top:5px}
  .ctl-row{min-height:44px}
  .ctl input[type=range]{width:auto;min-width:0;flex:1}
  .ctl .dval{min-width:42px}
}
/* mobile gesture cue - lives outside the folded-HUD hide list so touch users always
   see how to drive the sky even when the intro is collapsed */
.hud .touchcue{display:none;margin-top:9px;padding-top:9px;border-top:1px solid rgba(201,162,39,.18);
  font:italic 12.5px/1.45 "Newsreader",Georgia,serif;color:#d8c074}
@media (max-width:760px){.hud.folded .touchcue{display:block}}
@media (max-height:560px){.hud.folded .touchcue{display:block}}
@media (prefers-reduced-motion:reduce){.card{transition:none}}