:root{
  --bg:#070a18; --bg2:#0c1128; --panel:rgba(20,26,54,.72);
  --gold:#e8c46a; --gold2:#b98f2e; --ink:#e9e4d8; --dim:#9aa0bf;
  /* category colors (also read by app.js) */
  /* --cat-intro:#8fb8ff;
  --cat-john-rev:#e8c46a;
  --cat-paul:#7ee0c3;
  --cat-peter:#f2a3c0;
  --cat-john-bapt:#b3a1ff;
  --cat-bitter-sweet:#ff9d6b;
  --cat-addendum:#8ce06b;
  --cat-judgments:#ff6b6b; */

  --cat-intro: #bdbdbd;
  --cat-john-rev: #47da4e;
  --cat-paul: #39f5ff;
  --cat-paul: #37e2d4;
  --cat-peter: #ff665c;
  --cat-john-bapt: #3da1ff;
  --cat-bitter-sweet: #ecd44a;
  --cat-addendum: #e9802b;
  --cat-judgments: #e168ff;

  --c1:var(--cat-intro); --c2:var(--cat-john-rev); --c3:var(--cat-paul); --c4:var(--cat-peter);
  --c5:var(--cat-john-bapt); --c6:var(--cat-bitter-sweet); --c7:var(--cat-addendum); --c8:var(--cat-judgments);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@font-face {
  font-display: block;
  font-family: 'Source Serif';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/source-serif-4-v13-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/figtree-v9-latin_latin-ext-regular.woff2') format('woff2');
}
body{
  background:radial-gradient(1200px 800px at 70% -10%,#1a1440 0%,var(--bg) 55%) fixed,var(--bg);
  color:var(--ink); font-family:'Source Serif',Georgia,'Times New Roman',serif; line-height:1.55;
  overflow-x:hidden;
}
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%,#fff8,transparent),
    radial-gradient(1px 1px at 30% 70%,#fff6,transparent),
    radial-gradient(2px 2px at 55% 15%,#ffd77a88,transparent),
    radial-gradient(1px 1px at 75% 45%,#fff7,transparent),
    radial-gradient(1.5px 1.5px at 90% 80%,#cfe0ff88,transparent),
    radial-gradient(1px 1px at 15% 90%,#fff5,transparent),
    radial-gradient(2px 2px at 42% 40%,#ffffff66,transparent),
    radial-gradient(1px 1px at 63% 88%,#fff6,transparent),
    radial-gradient(1px 1px at 85% 10%,#ffd77a66,transparent),
    radial-gradient(1.5px 1.5px at 25% 35%,#fff8,transparent);
  background-size:900px 900px; animation:twinkle 9s ease-in-out infinite alternate;}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}

/* HERO */
.tlblogo{transition: .25s ease-in-out;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -16px 0px inset; filter: grayscale(.61)}
.tlblogo:hover{filter: drop-shadow(0px 4px 7px grey);}
.hero{min-height:92vh;display:flex;flex-flow:column;gap:20px;align-items:center;justify-content:center;text-align:center;/* padding:4rem 1rem; */padding: 1rem 1rem 8rem;position:relative;
  background:radial-gradient(600px 340px at 50% 30%,rgba(232,196,106,.10),transparent 70%);}
.hero-kicker{letter-spacing:.45em;text-transform:uppercase;font-size:.8rem;color:var(--gold);opacity:.85}
.hero h1{font-size:clamp(3rem,9vw,6.5rem);font-weight:400;letter-spacing:.06em;margin:.4rem 0 .2rem;
  background:linear-gradient(180deg,#fff6dd 10%,var(--gold) 55%,var(--gold2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(232,196,106,.25);}
.hero-sub{font-size: 1.2rem;color:var(--dim);font-style:italic;margin-bottom:2.2rem}
.stat-cards{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2.4rem}
.stat{background:var(--panel);border:1px solid rgba(232,196,106,.22);border-radius:12px;padding:1rem 1.6rem;min-width:130px;
  backdrop-filter:blur(6px);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.stat b{display:block;font-size:2rem;color:var(--gold);font-weight:400}
.stat span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.toc{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.toc a{color:var(--ink);text-decoration:none;font-size:.85rem;letter-spacing:.08em;padding:.45rem .95rem;
  border:1px solid rgba(232,196,106,.3);border-radius:999px;/* transition:.25s */}
.toc a:hover{background:rgba(232,196,106,.14);border-color:var(--gold)}

/* scroll-down cue */
.scroll-down{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.3rem;color:var(--gold);text-decoration:none;
  animation:bob 2.2s ease-in-out infinite}
.scroll-down-txt{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;opacity:.75}
.scroll-down svg{filter:drop-shadow(0 0 8px rgba(232,196,106,.6))}
.scroll-down:hover{animation-play-state:paused;color:#fff0cf}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(12px)}}

/* PANELS */
main{max-width:1200px;margin:0 auto;padding:0 1.2rem 4rem}
.panel{background:var(--panel);border:1px solid rgba(140,150,200,.15);border-radius:18px;
  padding:2.4rem clamp(1.2rem,4vw,3rem);margin:3rem 0;backdrop-filter:blur(8px);
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.panel h2{font-weight:400;font-size:clamp(1.6rem,3.5vw,2.3rem);color:var(--gold);margin-bottom:.6rem;letter-spacing:.03em}
.panel h2 .num{color:var(--dim);font-size:.6em;vertical-align:.35em;margin-right:.6rem;letter-spacing:.2em}
.panel h3{color:var(--ink);font-weight:400;font-size:1.15rem;margin:1.6rem 0 .8rem;letter-spacing:.05em}
.lede{color:var(--dim);max-width:70ch;margin-bottom:1.8rem;font-style:italic}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}
.chart{width:100%;overflow-x:auto}
.tip{display:none}
#timeline-chart{position:relative}
.tl-dot{cursor:pointer}

/* bars */
.bar-row{display:grid;grid-template-columns:minmax(120px,220px) 1fr 54px;align-items:center;gap:.7rem;margin:.32rem 0;font-size:.9rem}
.bar-row .lbl{text-align:right;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{background:rgba(255,255,255,.05);border-radius:4px;height:16px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold2),var(--gold));
  transform-origin:left;animation:grow 1s ease both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar-row .val{color:var(--dim);font-size:.8rem}

/* network */
#net-canvas{width:100%;height:auto;display:block;border-radius:12px;cursor:grab;
  background:radial-gradient(600px 400px at 50% 50%,rgba(232,196,106,.05),transparent 70%)}
.legend{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1rem;font-size:.82rem;color:var(--dim)}
.legend span::before{content:"●";margin-right:.35em}

/* network info panel */
#net-info{margin-top:1.2rem;border-top:1px solid rgba(232,196,106,.2);padding-top:1.1rem;min-height:3.5rem}
.net-info-head{padding:.4rem .9rem;margin-bottom:.7rem}
.net-info-head b{display:block;font-weight:400;font-size:1.05rem}
.net-info-head small{color:var(--dim);font-size:.78rem}
.net-conn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.5rem}
.net-conn{padding:.45rem .8rem;background:rgba(255,255,255,.03);border-radius:0 8px 8px 0;cursor:pointer;transition:.15s}
.net-conn:hover{background:rgba(232,196,106,.1)}
.net-conn b{display:block;font-weight:400;font-size:.9rem}
.net-conn small{color:var(--dim);font-size:.72rem}
.net-conn .kind{color:var(--gold);letter-spacing:.05em}

/* word cloud */
#word-cloud{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline;justify-content:center;padding:1.4rem 0}
#word-cloud span{cursor:default;transition:.2s;color:var(--ink)}
#word-cloud span:hover{color:var(--gold);text-shadow:0 0 18px rgba(232,196,106,.6)}

/* sentences */
.sent{border-left:2px solid rgba(232,196,106,.4);padding:.7rem 1.1rem;margin:.8rem 0;background:rgba(255,255,255,.025);border-radius:0 10px 10px 0}
.sent q{font-style:italic}
.sent .meta{font-size:.78rem;color:var(--dim);margin-top:.3rem;letter-spacing:.05em}
.sent .meta b{color:var(--gold)}

/* inclusions */
.incl{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem 1rem;align-items:center;
  padding:.85rem 1rem;margin:.6rem 0;background:rgba(255,255,255,.03);border-radius:12px;border:1px solid rgba(140,150,200,.12)}
.incl .p-title{font-size:.92rem}
.incl .p-title small{display:block;color:var(--dim);font-size:.72rem}
.incl .mid{text-align:center;min-width:190px}
.incl .mid .shared{color:var(--gold);font-size:1.05rem}
.incl .mid .cov{font-size:.75rem;color:var(--dim)}
.incl .bar-track{height:8px;margin-top:.3rem}
.incl .right{text-align:right}
@media(max-width:760px){.incl{grid-template-columns:1fr}.incl .right{text-align:left}.incl .mid{text-align:left}}

/* categories */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;padding-top: 3px;}
.cat-card{border:1px solid rgba(140,150,200,.15);border-radius:14px;padding:1.2rem 1.3rem;background:rgba(255,255,255,.025)}
.cat-card h4{font-weight:400;font-size:1.02rem;margin-bottom:.4rem}
.cat-card .big{font-size:1.9rem;margin:.2rem 0}
.cat-card small{color:var(--dim)}
.cat-card .bar-track{margin-top:.7rem}
.cat-toggle{font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:.25s;width:100%}
.cat-toggle:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.cat-toggle.off{opacity:.38;filter:grayscale(.7)}
.cat-toggle.off:hover{opacity:.6}
.cat-state{margin-top:.6rem;font-size:.72rem;letter-spacing:.06em;color:var(--dim)}
.cat-toggle.on .cat-state{color:var(--gold)}

/* explorer */
#search{width:100%;padding:.8rem 1.1rem;font:inherit;background:rgba(255,255,255,.05);color:var(--ink);
  border:1px solid rgba(232,196,106,.3);border-radius:10px;margin-bottom:1.4rem;outline:none}
#search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,196,106,.15)}
#explorer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.pcard{border:1px solid rgba(140,150,200,.15);border-radius:12px;padding:1rem 1.1rem;background:rgba(255,255,255,.025);transition:.2s}
.pcard:hover{border-color:rgba(232,196,106,.5);transform:translateY(-2px)}
.pcard h4{font-weight:400;font-size:.98rem;margin-bottom:.3rem}
.pcard .pmeta{font-size:.75rem;color:var(--dim);margin-bottom:.5rem}
.pcard .excerpt{font-size:.82rem;color:#c6c0b0;font-style:italic}
.chip{display:inline-block;font-size:.68rem;padding:.15rem .55rem;border-radius:999px;margin:.12rem .2rem .12rem 0;
  border:1px solid rgba(232,196,106,.35);color:var(--gold);letter-spacing:.03em}
.chip.aud{border-color:rgba(143,184,255,.4);color:var(--c1)}

.plink{text-decoration:none;border-bottom:1px dotted rgba(232,196,106,.5);transition:.2s}
.plink:hover{text-shadow:0 0 14px rgba(232,196,106,.5);border-bottom-style:solid}
.pread{color:var(--gold);text-decoration:none}
.pread:hover{text-decoration:underline}
.toggle-btn{font:inherit;letter-spacing:.06em;color:var(--gold);background:rgba(232,196,106,.08);
  border:1px solid rgba(232,196,106,.4);border-radius:999px;padding:.6rem 1.6rem;cursor:pointer;transition:.2s}
.toggle-btn:hover{background:rgba(232,196,106,.18);box-shadow:0 0 20px rgba(232,196,106,.25)}

/* floating side navigation */
#side-nav{position:fixed;right:1.1rem;top:50%;transform:translateY(-50%) translateX(20px);z-index:40;
  display:flex;flex-direction:column;gap:.85rem;opacity:0;pointer-events:none;transition:.35s}
#side-nav.show{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
#side-nav a{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;text-decoration:none}
.sn-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--gold);background:transparent;transition:.25s;flex:none}
#side-nav a:hover .sn-dot{background:rgba(232,196,106,.5);box-shadow:0 0 10px rgba(232,196,106,.5)}
#side-nav a.active .sn-dot{background:var(--gold);box-shadow:0 0 12px rgba(232,196,106,.8)}
.sn-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  background:rgba(12,17,40,.92);border:1px solid rgba(232,196,106,.35);border-radius:6px;padding:.2rem .55rem;
  opacity:0;transform:translateX(6px);transition:.2s;pointer-events:none;white-space:nowrap}
#side-nav a:hover .sn-label{opacity:1;transform:translateX(0)}
@media(max-width:1100px){#side-nav{display:none}}

footer{text-align:center;color:var(--dim);font-size:.8rem;padding:2.5rem 1rem;font-style:italic}
::selection{background:rgba(232,196,106,.35)}
@media(max-width:500px) {.scroll-down{display:none;} .tlblogo{width: 50px; height:auto;}}