/* ============================================================
   HYPERBOREA WIKI — shared stylesheet
   A province of the Hypogean domain. The ledger remembers.
   Link into every page:  <link rel="stylesheet" href="wiki.css">
   ============================================================ */

:root{
  --papyrus:#EDECE3;
  --raised:#F4F3EB;
  --ink:#242219;
  --faded:#6B675A;
  --murex:#5C2751;
  --kingfisher:#176F8F;
  --gilt:#8F6F1C;
  --rule:#CBC7B4;
  --rule-strong:#A9A48D;
  --postbg:#F6F5EE;
  --sealbg:#1E1A21;
}
@media (prefers-color-scheme: dark){
  :root{
    --papyrus:#17161B;
    --raised:#1E1D23;
    --ink:#D9D4C2;
    --faded:#8E897A;
    --murex:#B07BA5;
    --kingfisher:#6FB6CE;
    --gilt:#C4A34A;
    --rule:#3A3833;
    --rule-strong:#55524A;
    --postbg:#1C1B21;
    --sealbg:#0F0E13;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--papyrus);
  color:var(--ink);
  font-family:'Cardo', Georgia, serif;
  font-size:19px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--kingfisher)}
a:visited{color:var(--murex)}
a:focus-visible, .wl:focus-visible{outline:2px solid var(--gilt);outline-offset:2px}

/* ————— Domain bar ————— */
.domainbar{
  background:var(--sealbg);
  color:#B9B2A0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.04em;
  padding:7px 16px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.domainbar a{color:#B9B2A0;text-decoration:none}
.domainbar a:hover{text-decoration:underline}
.domainbar b{color:#D8CFB8;font-weight:500}
.domainbar .rt{color:#7E7768}
@media(max-width:560px){ .domainbar .rt{display:none} }

/* ————— Masthead ————— */
header.masthead{
  border-bottom:3px double var(--rule-strong);
  padding:26px 16px 20px;
  text-align:center;
}
.masthead-inner{max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:20px}
.seal{flex:0 0 auto}
.wordmark{ text-align:left }
.wordmark h1{
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:clamp(22px, 4.4vw, 34px);
  letter-spacing:.14em;
  color:var(--ink);
}
.wordmark h1 a{color:inherit;text-decoration:none}
.wordmark h1 .wm-gilt{color:var(--gilt)}
.wordmark .motto{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--faded);
  letter-spacing:.05em;
  margin-top:4px;
}
@media(max-width:560px){
  .masthead-inner{flex-direction:column;gap:10px}
  .wordmark{text-align:center}
}

/* ————— Page frame ————— */
main{max-width:1060px;margin:0 auto;padding:26px 18px 60px}

.hatnote{
  font-style:italic;
  color:var(--faded);
  font-size:16px;
  padding:2px 0 2px 22px;
  margin-bottom:14px;
}
.protection{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--faded);
  border:1px solid var(--rule);
  border-left:4px solid var(--murex);
  background:var(--raised);
  padding:9px 14px;
  margin-bottom:22px;
}
.protection .lock{color:var(--murex);font-weight:500}

h1.title{
  font-family:'Cardo', serif;
  font-weight:700;
  font-size:clamp(34px, 6vw, 48px);
  line-height:1.1;
  letter-spacing:.005em;
}
.fromline{
  font-size:15px;
  color:var(--faded);
  font-style:italic;
  margin:6px 0 4px;
}
.titlerule{border:0;border-bottom:1px solid var(--rule-strong);margin:12px 0 20px}

/* ————— Infobox ————— */
.infobox{
  border:1px solid var(--rule-strong);
  background:var(--raised);
  font-size:15px;
  line-height:1.5;
  width:100%;
  margin:0 0 26px;
}
@media(min-width:900px){
  .infobox{float:right;width:315px;margin:4px 0 20px 28px}
}
.infobox .ib-title{
  font-family:'Cinzel', serif;
  font-weight:600;
  letter-spacing:.1em;
  text-align:center;
  font-size:16px;
  background:var(--sealbg);
  color:#E4DCC6;
  padding:10px 8px;
}
.infobox .ib-fig{
  padding:18px 12px 8px;
  text-align:center;
  border-bottom:1px solid var(--rule);
}
.infobox .ib-cap{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--faded);
  padding:0 14px 12px;
  text-align:center;
  border-bottom:1px solid var(--rule);
}
.infobox table{width:100%;border-collapse:collapse}
.infobox th,.infobox td{
  padding:7px 12px;
  vertical-align:top;
  border-bottom:1px solid var(--rule);
  text-align:left;
}
.infobox th{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gilt);
  width:36%;
  white-space:nowrap;
}
.infobox td{font-size:14.5px}
.infobox tr:last-child th,.infobox tr:last-child td{border-bottom:0}
.infobox .ib-quote{
  font-style:italic;
  font-size:14px;
  color:var(--faded);
  padding:10px 14px 12px;
  border-top:1px solid var(--rule);
}
.handle{font-family:'IBM Plex Mono', monospace;font-size:.86em;background:var(--postbg);border:1px solid var(--rule);padding:0 4px;border-radius:2px}

/* ————— TOC ————— */
details.toc{
  border:1px solid var(--rule-strong);
  background:var(--raised);
  display:inline-block;
  min-width:min(340px, 100%);
  margin:2px 0 28px;
  font-size:15.5px;
}
details.toc summary{
  font-family:'Cinzel', serif;
  font-size:13.5px;
  letter-spacing:.16em;
  padding:9px 16px;
  cursor:pointer;
  list-style:none;
  color:var(--ink);
  border-bottom:1px solid var(--rule);
}
details.toc summary::before{content:"▸ ";color:var(--gilt)}
details.toc[open] summary::before{content:"▾ "}
details.toc ol{
  padding:12px 22px 14px 40px;
  line-height:1.75;
}
details.toc ol ol{padding:0 0 0 22px}
details.toc a{text-decoration:none}
details.toc a:hover{text-decoration:underline}

/* ————— Sections ————— */
section{clear:none}
h2{
  font-family:'Cardo', serif;
  font-weight:700;
  font-size:29px;
  margin:44px 0 4px;
  padding-bottom:5px;
  border-bottom:1px solid var(--rule-strong);
  clear:left;
}
h2 .secno, h3 .secno{color:var(--gilt);font-weight:400;margin-right:10px;font-size:.8em}
h3{
  font-family:'Cardo', serif;
  font-weight:700;
  font-size:22.5px;
  margin:30px 0 4px;
}
p{margin:13px 0}
em{font-style:italic}
section ul, section ol{margin:13px 0 13px 30px}
section li{margin:7px 0}
.lede p:first-of-type::first-letter{
  font-family:'Cinzel', serif;
  font-size:2.6em;
  line-height:.85;
  float:left;
  padding:4px 8px 0 0;
  color:var(--murex);
}

/* wikilinks — blue exist / purple visited / red missing */
.wl{color:var(--kingfisher);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.wl:visited{color:var(--murex)}
.rl{color:#A33B2E;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;cursor:help}
@media (prefers-color-scheme: dark){ .rl{color:#D96A5B} }

/* ————— Archived-post artifact (signature element) ————— */
figure.post{
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  line-height:1.6;
  background:var(--postbg);
  border:1px solid var(--rule-strong);
  margin:24px 0;
  max-width:640px;
}
figure.post .post-top{
  border-bottom:1px solid var(--rule);
  padding:8px 14px;
  color:var(--faded);
  font-size:12px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
figure.post .post-top b{color:var(--ink);font-weight:500}
figure.post .post-top .mod{color:var(--gilt)}
figure.post .post-body{padding:14px 16px 6px;white-space:normal}
figure.post .post-body p{margin:0 0 12px}
figure.post .post-sig{padding:0 16px 14px;color:var(--murex)}
figure.post figcaption{
  font-family:'Cardo', serif;
  font-size:14px;
  font-style:italic;
  color:var(--faded);
  padding:8px 14px;
  border-top:1px solid var(--rule);
}
figure.post.sys .post-body{ color:var(--ink); letter-spacing:.02em; }
figure.post.sys .post-body p{text-transform:uppercase;font-size:12.5px}
.corner{color:var(--rule-strong);font-family:'IBM Plex Mono',monospace;font-size:12px;user-select:none;display:block;padding:4px 10px 0}
.corner.bot{padding:0 10px 4px;text-align:right}

/* ————— Tables ————— */
.tscroll{overflow-x:auto;margin:18px 0;border:1px solid var(--rule-strong)}
table.wt{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px;background:var(--raised)}
table.wt caption{
  caption-side:top;text-align:left;
  font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gilt);padding:8px 12px;background:var(--raised);border-bottom:1px solid var(--rule);
}
table.wt th{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  text-align:left;color:var(--faded);
  padding:9px 12px;border-bottom:1px solid var(--rule-strong);
  background:var(--postbg);
}
table.wt td{padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
table.wt tr:last-child td{border-bottom:0}

blockquote.creed{
  margin:22px 0;
  padding:6px 24px;
  border-left:4px solid var(--gilt);
  font-style:italic;
  font-size:20px;
  color:var(--ink);
}
blockquote.creed .attr{display:block;font-style:normal;font-size:14px;color:var(--faded);margin-top:6px;font-family:'IBM Plex Mono',monospace}

/* pull-quote used at the head of satellite pages */
blockquote.epigraph{
  margin:0 0 22px;
  padding:6px 22px;
  border-left:4px solid var(--murex);
  font-style:italic;
  font-size:18px;
  color:var(--faded);
}
blockquote.epigraph .attr{display:block;font-style:normal;font-size:13px;margin-top:5px;font-family:'IBM Plex Mono',monospace}

.expunged{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--faded);
}
.expunged .tomb{color:var(--murex);font-weight:500}
.expunged li{margin:8px 0;list-style:none}
.expunged ul{margin-left:8px}

/* ————— Footer ————— */
footer.catbar{
  border-top:3px double var(--rule-strong);
  margin-top:56px;
  padding:18px 18px 40px;
}
.cat-inner{max-width:1060px;margin:0 auto}
.cats{ font-size:15px; }
.cats .cl{color:var(--kingfisher);text-decoration:underline;text-decoration-thickness:1px;cursor:help}
.cats .sep{color:var(--rule-strong);padding:0 8px}
.ledgerline{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--faded);
  margin-top:16px;
  letter-spacing:.04em;
}
.ledgerline .lp{color:var(--murex)}

/* ————— See-also nav grid ————— */
.seealso{margin:16px 0 8px}
.seealso ul{margin:12px 0 0 0;list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:2px}
@media(min-width:640px){ .seealso ul{grid-template-columns:1fr 1fr} }
.seealso li{margin:0;padding:8px 0;border-bottom:1px solid var(--rule)}

/* ————— Hovercards (Wikipedia-style page previews) ————— */
.hovercard{
  position:absolute;
  z-index:60;
  width:330px;
  max-width:calc(100vw - 24px);
  background:var(--raised);
  border:1px solid var(--rule-strong);
  box-shadow:0 10px 34px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.12);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
  font-family:'Cardo', Georgia, serif;
}
@media (prefers-color-scheme: dark){
  .hovercard{ box-shadow:0 10px 34px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); }
}
.hovercard.show{ opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .hovercard{ transition:none; transform:none; }
  .hovercard.show{ transform:none; }
}
.hovercard .hc-head{
  display:flex; gap:12px; align-items:center;
  padding:13px 16px 11px;
  border-bottom:1px solid var(--rule);
}
.hovercard .hc-seal{ flex:0 0 auto; line-height:0; }
.hovercard .hc-headtext{ min-width:0; }
.hovercard .hc-title{
  font-family:'Cardo', serif; font-weight:700;
  font-size:20px; line-height:1.12; color:var(--ink);
}
.hovercard .hc-kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gilt); margin-top:4px; line-height:1.3;
}
.hovercard.missing .hc-kicker{ color:var(--murex); }
.hovercard .hc-body{
  padding:11px 16px 12px;
  font-size:15px; line-height:1.5; color:var(--ink);
}
.hovercard .hc-foot{
  padding:0 16px 11px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:.05em; color:var(--faded);
}

/* screenshot figures */
figure.shot{margin:22px 0;border:1px solid var(--gilt);background:var(--sealbg);padding:8px}
figure.shot img{width:100%;height:auto;display:block}
figure.shot figcaption{font-size:.85em;color:var(--ink);opacity:.85;padding:9px 4px 2px;font-style:italic;line-height:1.45}
.infobox .ib-fig img{max-width:180px;width:100%;height:auto;border:1px solid var(--rule);display:inline-block}
figure.shot.portrait{max-width:300px;margin-left:auto;margin-right:auto}

/* ————— Infobox audio sample (replaces ib-cap where present) ————— */
.infobox .ib-audio{
  padding:12px 14px 13px;
  border-bottom:1px solid var(--rule);
  text-align:center;
}
.infobox .ib-audio .ib-audio-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gilt);
  display:block;
  margin-bottom:9px;
}
.infobox .ib-audio audio{
  width:100%;
  height:32px;
  display:block;
  filter:sepia(.12) saturate(.75);
}
.infobox .ib-audio .ib-audio-cap{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  font-style:italic;
  color:var(--faded);
  margin-top:9px;
  line-height:1.4;
}

/* ————— Stub notice ————— */
.stub-notice{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--faded);
  border:1px dashed var(--gilt);
  background:var(--postbg);
  padding:11px 14px;
  margin:32px 0 8px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.stub-notice .pen{color:var(--gilt);font-weight:500;flex:0 0 auto}

/* ————— Lightbox (click any figure for a full-resolution view) ————— */
.ib-fig img, figure.shot img{cursor:zoom-in}
.lightbox-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(10,9,12,.92);
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
.lightbox-overlay.show{opacity:1;pointer-events:auto}
.lightbox-figure{
  display:flex;flex-direction:column;align-items:center;
  max-width:100%;max-height:100%;
  margin:0;
}
.lightbox-figure img{
  display:block;
  max-width:100%;max-height:calc(100vh - 64px);
  width:auto;height:auto;
  object-fit:contain;
  box-shadow:0 12px 60px rgba(0,0,0,.55);
  cursor:zoom-out;
}
.lightbox-cap{
  font-family:'Cardo', serif;font-style:italic;font-size:14.5px;
  color:#E4DCC6;opacity:.9;text-align:center;
  margin-top:14px;max-width:70ch;padding:0 8px;
}
.lightbox-close{
  position:fixed;top:16px;right:18px;z-index:501;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(228,220,198,.4);
  background:rgba(0,0,0,.4);color:#E4DCC6;
  font-family:'IBM Plex Mono', monospace;font-size:20px;line-height:1;
  cursor:pointer;
}
.lightbox-close:hover{background:rgba(0,0,0,.7)}
.lightbox-hint{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:.05em;
  color:rgba(228,220,198,.55);z-index:501;pointer-events:none;
}
@media(max-width:560px){ .lightbox-hint{display:none} }
@media (prefers-reduced-motion: reduce){ .lightbox-overlay{transition:none} }