:root{
  --bg:#0d0b10;
  --bg-1:#121016;
  --panel:#17141e;
  --panel-2:#1e1a28;
  --line:#272233;
  --line-2:#382f47;
  --ink:#f3eff7;
  --ink-1:#b7aec6;
  --ink-2:#7d7490;
  --gold:#e3a94a;         /* text + UI accent */
  --s1:#c98500;           /* data: first word of a rhyme */
  --s2:#d55181;           /* data: second word */
  --radius:12px;
  --display:"EB Garamond", Georgia, "Times New Roman", serif;
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--bg);}
body{color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;}
::selection{background:#e3a94a3d;}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
.col{max-width:672px;margin:0 auto;}

/* ---------- chrome ---------- */
.home-link,.lang-switch{
  position:fixed;top:16px;z-index:40;font-family:var(--sans);font-size:12.5px;
  text-decoration:none;color:var(--ink-2);
  background:#0d0b10cc;backdrop-filter:blur(6px);padding:7px 11px;border-radius:8px;
}
.home-link{left:18px;}
.lang-switch{right:18px;}
.home-link:hover,.lang-switch a:hover{color:var(--ink);}
.lang-switch a{text-decoration:none;color:var(--ink-2);}
.lang-switch a.active{color:var(--gold);}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .7s ease,visibility .7s ease;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
#loader .mark{font-family:var(--display);font-size:22px;color:var(--ink-2);letter-spacing:.03em;}
#loader .bar{width:190px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;}
#loader .bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .3s ease;}
#loader .count{font-family:var(--sans);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;}

/* ---------- hero ---------- */
.hero{position:relative;min-height:94vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hero .veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 62% at 24% 78%, #0d0b10f5 0%, #0d0b10cc 46%, #0d0b1000 100%),
    linear-gradient(180deg,#0d0b10cc 0%,#0d0b1000 20%,#0d0b1000 46%,#0d0b1090 82%,#0d0b10 100%);
}
.hero .inner{position:relative;width:100%;padding:0 24px 54px;}
.eyebrow{
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 18px;
}
.hero h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(44px,9vw,104px);line-height:.97;letter-spacing:-.018em;
  margin:0 0 22px;max-width:14ch;text-shadow:0 4px 44px #0d0b10;
}
.hero h1 em{font-style:italic;color:var(--gold);}
.hero .lede{max-width:54ch;margin:0;font-size:clamp(16px,2.1vw,19px);line-height:1.66;color:var(--ink-1);}
.hero .scrollcue{
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-top:32px;display:inline-block;text-decoration:none;
}
.hero .scrollcue:hover{color:var(--gold);}

/* ---------- article ---------- */
article{padding:0 0 40px;}
section{padding:80px 0 8px;}
.marker{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.01em;margin:0 0 20px;}
h3{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin:34px 0 14px;}
p{font-size:17.5px;line-height:1.75;color:var(--ink-1);margin:0 0 20px;}
p strong{color:var(--ink);font-weight:600;}
p em{color:var(--ink);}
.col p:first-of-type{color:var(--ink);}
.w{font-family:var(--sans);font-size:.93em;color:var(--ink);}
.num{font-variant-numeric:tabular-nums;}

/* ---------- verse ---------- */
.verse{
  font-family:var(--display);font-size:20px;line-height:1.5;color:var(--ink);
  margin:0;white-space:pre-line;
}
.verse .r1{color:var(--s1);font-style:italic;}
.verse .r2{color:var(--s2);font-style:italic;}
.credit{font-family:var(--sans);font-size:12px;color:var(--ink-2);margin-top:10px;}
blockquote.pull{
  margin:38px 0;padding:22px 26px;border-left:2px solid var(--gold);
  background:linear-gradient(90deg,#e3a94a0f,transparent 70%);
}
blockquote.pull .verse{font-size:22px;}

/* ---------- figures ---------- */
figure{margin:42px 0;}
figcaption{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink-2);margin-top:12px;max-width:66ch;}
.chart{width:100%;overflow-x:auto;}
.chart svg{display:block;max-width:100%;height:auto;}
.axis text{font-family:var(--sans);font-size:11px;fill:var(--ink-2);}
.axis line,.axis path{stroke:var(--line);}
.grid line{stroke:var(--line);stroke-dasharray:2 4;}
.lbl{font-family:var(--sans);font-size:12px;fill:var(--ink-1);}
.lbl-word{font-family:var(--display);font-size:15px;fill:var(--ink);}
.val{font-family:var(--sans);font-size:11.5px;fill:var(--ink-2);font-variant-numeric:tabular-nums;}

/* ---------- top pairs ---------- */
.pairlist{display:flex;flex-direction:column;gap:2px;}
.pairrow{
  display:grid;grid-template-columns:minmax(150px,190px) 1fr auto;gap:14px;align-items:center;
  padding:7px 10px;border-radius:8px;cursor:pointer;background:none;border:0;width:100%;text-align:left;
  font:inherit;color:inherit;transition:background .15s ease;
}
.pairrow:hover,.pairrow[aria-expanded="true"]{background:var(--panel);}
.pairrow .pw{font-family:var(--display);font-size:19px;white-space:nowrap;}
.pairrow .pw i{font-style:normal;color:var(--ink-2);margin:0 4px;}
.pairrow .pw b:first-of-type{font-weight:600;color:var(--s1);}
.pairrow .pw b:last-of-type{font-weight:600;color:var(--s2);}
.pairrow .track{height:9px;background:var(--line);border-radius:0 4px 4px 0;position:relative;min-width:20px;}
.pairrow .track span{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0;}
.pairrow .n{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:34px;text-align:right;}
.pairquote{padding:4px 10px 18px 10px;}
.pairquote .verse{font-size:18px;}

/* ---------- vein cards ---------- */
.veins{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:30px 0;}
.vein{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 17px;}
.vein h4{margin:0 0 4px;font-family:var(--display);font-size:26px;font-weight:600;color:var(--gold);}
.vein .meta{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);margin:0 0 12px;font-variant-numeric:tabular-nums;}
.vein .words{display:flex;flex-wrap:wrap;gap:5px;}
.vein .words span{
  font-family:var(--display);font-size:15.5px;color:var(--ink-1);
  background:var(--panel-2);border-radius:5px;padding:2px 7px;
}
.vein .words span.big{color:var(--ink);background:#c9850026;}

/* ---------- explorer ---------- */
.explorer{background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0 72px;margin-top:60px;}
.searchbox{position:relative;max-width:520px;margin:0 0 8px;}
.searchbox input{
  width:100%;padding:16px 18px;font-family:var(--display);font-size:24px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line-2);border-radius:10px;outline:none;
}
.searchbox input:focus{border-color:var(--gold);}
.searchbox input::placeholder{color:var(--ink-2);}
.suggest{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--panel);
  border:1px solid var(--line-2);border-radius:10px;overflow:hidden;box-shadow:0 18px 40px #00000070;
}
.suggest button{
  display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:0;
  font-family:var(--display);font-size:18px;color:var(--ink-1);padding:9px 14px;cursor:pointer;
}
.suggest button:hover,.suggest button.on{background:var(--panel-2);color:var(--ink);}
.suggest button small{font-family:var(--sans);font-size:11px;color:var(--ink-2);}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;}
.chips button{
  font-family:var(--display);font-size:16px;background:var(--panel);color:var(--ink-1);
  border:1px solid var(--line);border-radius:20px;padding:4px 13px;cursor:pointer;
}
.chips button:hover{border-color:var(--gold);color:var(--ink);}
.result{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:34px;align-items:start;}
@media(max-width:900px){.result{grid-template-columns:1fr;}}
.constellation{position:relative;}
.constellation svg{width:100%;height:auto;display:block;overflow:visible;}
.constellation .node{cursor:pointer;}
.constellation .node text{font-family:var(--display);fill:var(--ink-1);}
.constellation .node:hover text,.constellation .node.on text{fill:var(--ink);}
.constellation .hub{font-family:var(--display);fill:var(--ink);}
.constellation .edge{stroke:var(--line-2);fill:none;}
.constellation .node:hover .edge,.constellation .node.on .edge{stroke:var(--s1);}
.panelcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;}
.panelcard .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;}
.panelcard .head h3{margin:0;font-family:var(--display);font-size:27px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);}
.panelcard .head .fam{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);}
.panelcard .sum{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);margin:0 0 16px;}
.plist{max-height:430px;overflow-y:auto;margin:0 -6px;}
.pitem{
  width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  padding:8px 10px;border-radius:8px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;
}
.pitem:hover,.pitem.on{background:var(--panel-2);}
.pitem b{font-family:var(--display);font-size:19px;font-weight:600;color:var(--s2);}
.pitem span{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.quotebox{margin:6px 0 14px;padding-bottom:15px;border-bottom:1px solid var(--line);min-height:92px;}
.empty{color:var(--ink-2);font-family:var(--sans);font-size:13.5px;line-height:1.6;}

/* ---------- gems ---------- */
.gems{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin:32px 0;}
.gem{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;}
.gem .verse{font-size:17px;line-height:1.55;}
.gem .credit{margin-top:9px;}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13.5px;margin:24px 0;}
.tbl th{text-align:left;font-weight:600;color:var(--ink-2);font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:0 10px 9px;border-bottom:1px solid var(--line);}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink-1);}
.tbl td:first-child{color:var(--ink);font-family:var(--serif);font-size:15.5px;}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;}
.tbl tr.me td{color:var(--ink);}

/* ---------- method / footer ---------- */
.method{background:var(--bg-1);border-top:1px solid var(--line);margin-top:70px;padding:64px 0 20px;}
.method p{font-size:15.5px;line-height:1.72;}
.method h2{font-size:clamp(24px,3.4vw,32px);}
footer{padding:44px 0 60px;color:var(--ink-2);font-family:var(--sans);font-size:12.5px;line-height:1.7;}
footer a{color:var(--ink-1);}
.totop{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:12px;color:var(--ink-2);text-decoration:none;}
.totop:hover{color:var(--gold);}

@media(max-width:640px){
  section{padding:58px 0 6px;}
  p{font-size:16.5px;}
  .pairrow{grid-template-columns:minmax(120px,150px) 1fr auto;gap:9px;}
  .pairrow .pw{font-size:16px;}
  .verse{font-size:17.5px;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  #loader{transition:none;}
}
