body{background:#070707;color:#f3eee6}.mast{position:sticky;top:0;z-index:20;background:#070707}#section-bar{display:flex;justify-content:center;gap:18px;background:#070707;padding:12px}#section-bar a{color:#8f8a82;text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:12px}#section-bar a.active{color:#f3eee6}.read{max-width:720px;margin:32px auto 80px;padding:0 22px;font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif;font-size:18px;line-height:1.55}.read h2{font-weight:400;font-style:italic}.read img{width:100%;height:auto}.toc{position:fixed;left:0;top:96px;bottom:0;width:240px;overflow:auto;padding:28px 22px;background:#070707}.toc a{display:block;margin:0 0 10px;color:#8f8a82;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;font-size:12px}.toc a.on{color:#f3eee6}.with-toc{margin-left:240px}.index-flow{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 26px;padding:32px 40px 72px}.index-card{width:220px;color:#f3eee6;text-decoration:none}.index-card span{display:block;min-height:2.7em;margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.index-card img{width:220px;height:300px;object-fit:cover}@media(max-width:800px){.toc{position:static;width:auto}.with-toc{margin-left:0}.wall{grid-template-columns:1fr 1fr}}

.private{display:none}body.login-devin .private{display:block}body.login-jack .private[data-owner=jack]{display:block}body.login-jon .private[data-owner=jon]{display:block}body.login-julie .private[data-owner=julie]{display:block}body.login-sawyer .private[data-owner=sawyer]{display:block}#seek{background:#070707;color:#f3eee6;border:0;border-bottom:1px solid #8f8a82;font:13px Helvetica,Arial,sans-serif;letter-spacing:.08em;opacity:0;position:absolute;left:-9999px;width:0;height:0;margin:0;padding:0}.tile.is-seek-miss,.index-card.is-seek-miss{display:none!important}.index-cat.is-seek-empty{display:none!important}.tile.is-dim{display:none!important}



.friend{display:none}
body.login-jack .friend[data-owner=jack],body.login-jon .friend[data-owner=jon],body.login-julie .friend[data-owner=julie],body.login-sawyer .friend[data-owner=sawyer]{display:inline}
.friend a{margin-left:0}






.facts{margin:0 0 16px;padding:0;list-style:none;font-family:Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#d8d0c4}
.facts li{margin:0 0 6px}
@media(max-width:800px){
  .toc{position:static;width:auto;padding:12px 18px}
  .with-toc{margin-left:0}
  .index-card{width:calc(100vw - 36px)}
  .index-card img{width:100%;height:auto;aspect-ratio:16/9}


}

.private-journal{display:none;right:0;left:auto}
body.login-devin .private-journal{display:block}
.read{padding-top:28px}

body.login-page{
  background:#070707;
  /* Login entrance uses at most two families among ELORAE / phrase / Enter / Guest. */
  --login-font-sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --login-font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
}
.login-card{min-height:calc(100vh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.login-kicker{margin:0 0 18px;font-family:var(--login-font-sans);letter-spacing:.28em;text-transform:uppercase;font-size:18px;color:#8f8a82;text-align:center;width:100%}
#login-code{width:min(420px,80vw);background:transparent;border:0;border-bottom:1px solid #8f8a82;color:#f3eee6;font-family:var(--login-font-serif);font-size:28px;text-align:center;padding:8px 0}
.login-card button{margin-top:18px;background:none;border:0;color:#f3eee6;letter-spacing:.16em;text-transform:uppercase;font-family:var(--login-font-sans)}
.filters a,.toc a,#section-bar a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}



.filters,.topbar{letter-spacing:.28em;font-size:14.3px}
#section-bar{letter-spacing:.22em;padding:0 28px 16px}
.journal-read,.read{max-width:760px;padding-top:72px;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.8)}
.with-toc.journal-read,.with-toc.read{background:#070707;padding:72px 48px 80px}



@media(max-width:800px){
  .mast .topbar{padding-top:8px;padding-left:16px;padding-right:16px}


}
.friend a{position:relative}
body.login-page.login-jack .friend[data-owner=jack] a,body.login-page.login-julie .friend[data-owner=julie] a,body.login-page.login-sawyer .friend[data-owner=sawyer] a,body.login-page.login-jon .friend[data-owner=jon] a{text-shadow:0 0 12px var(--glow),0 0 24px var(--glow)}
body.login-page.login-devin .login-name{text-shadow:0 0 14px var(--glow),0 0 28px var(--glow)}
body.login-jack{--glow:rgba(230,190,80,.55)}
body.login-julie{--glow:rgba(255,190,210,.5)}
body.login-sawyer{--glow:rgba(230,120,40,.5)}
body.login-jon{--glow:rgba(80,180,90,.5);--glow-b:rgba(230,90,40,.55);--jon-mix:0}
/* Interpolable mix 0=green (Telorin) → 1=red (Silar). Custom-property color keyframes snap; a <number> fades. */
@property --jon-mix{syntax:"<number>";inherits:true;initial-value:0}
@keyframes jon-mix{from{--jon-mix:0}to{--jon-mix:1}}
body.login-page.login-jon{
  animation:jon-mix 3.2s ease-in-out infinite alternate;
  --glow:rgba(calc(80 + 150 * var(--jon-mix)),calc(180 - 90 * var(--jon-mix)),calc(90 - 50 * var(--jon-mix)),.55);
}
/* Per-figure text glow on the login mast: Telorin green, Silar red. */
body.login-page.login-jon .friend[data-owner=jon] a[href*="telorin"]{text-shadow:0 0 12px rgba(80,180,90,.95),0 0 28px rgba(24,92,56,.85);--glow:rgba(80,180,90,.55)}
body.login-page.login-jon .friend[data-owner=jon] a[href*="silar"]{text-shadow:0 0 12px rgba(255,150,72,.95),0 0 28px rgba(168,48,18,.85);--glow:rgba(230,90,40,.55)}
body.login-devin{--glow:rgba(243,238,230,.7)}










.journal-page{background:#070707 center/cover no-repeat}

#login-form{display:flex;flex-direction:column;align-items:center}
.login-welcome{margin:0 0 6px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:#8f8a82}
.login-name{margin:0 0 14px;font-family:"Iowan Old Style",Palatino,serif;font-size:28px;color:#f3eee6}

.login-top{position:fixed;left:0;right:0;top:0;background:#070707;justify-content:flex-start}
.login-top #login-back{color:#f3eee6;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.22em}
#login-code{width:min(280px,80vw);font-size:18px;letter-spacing:.08em;padding:10px 12px}
#login-code::placeholder{color:#8f8a82;animation:phrase-pulse 2.6s ease-in-out infinite}
@keyframes phrase-pulse{0%,100%{opacity:.28}50%{opacity:.9}}
.login-card button,.login-err{font-size:11px;letter-spacing:.22em;color:#8f8a82}
.login-card{min-height:100dvh;padding:88px 24px 72px}
.login-note{margin-top:16px;max-width:36ch;line-height:1.5;color:#cfc6b8;font-size:16px}
.login-name{font-weight:400;letter-spacing:.14em;font-size:clamp(28px,4vw,40px)}

.filters{gap:0}
.filters a + a::before,.filters .seek-glyph::before,.friend a + a::before{content:"\00b7";color:#5c5852;padding:0 11px;letter-spacing:0}

@media (min-width:801px){
  .topbar,
  .filters,
  .filters a{
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:17.3px;
    letter-spacing:0.12em;
    font-weight:400;
    line-height:1;
  }
  .filters a.active{font-weight:700}
  .mast .topbar{position:relative;min-height:56px}
  .mast .topbar .filters{
    position:absolute;
    left:50%;
    top:0;
    height:56px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:0;
    z-index:4;
  }
  .mast .topbar > .mark,
  .mast .topbar > a[href$="login.html"]{
    position:absolute;
    right:36px;
    top:0;
    height:56px;
    display:flex;
    align-items:center;
    gap:14px;
    color:#8f8a82;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:17.3px;
    letter-spacing:0.12em;
    font-weight:400;
    line-height:1;
    z-index:2;
  }
  .mast .topbar > .mark a{
    color:#8f8a82;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:17.3px;
    letter-spacing:0.12em;
    font-weight:400;
    line-height:1;
  }
  #seek{position:absolute;left:-9999px;top:50%;transform:translateY(-50%);width:0;height:0;margin:0;padding:0;opacity:0;z-index:3;border:0}
  .wall{grid-template-columns:repeat(4,minmax(0,1fr))}
}
body.login-jack .mark > a[href$="login.html"],
body.login-jon .mark > a[href$="login.html"],
body.login-julie .mark > a[href$="login.html"],
body.login-sawyer .mark > a[href$="login.html"],
body.login-devin .mark > a[href$="login.html"]{display:none}


.tile .label{
  font-family:Helvetica,Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.06em;
  color:#f3eee6;
  opacity:0;
  z-index:1;
}
.tile:hover .label{opacity:1}
.tile::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:84px;
  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
  opacity:0;
  pointer-events:none;
}
.tile:hover::after{opacity:1}

/* reading column, veil, rail — journal / atlas / codex */
.with-toc { margin-left: 0; }
.with-toc.read {
  background: transparent;
  padding: 48px 64px 80px;
}
.journal-page .read {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto 72px;
  padding: 48px 64px 80px;
  background: transparent;
  text-shadow: none;
}
.journal-page:has(#section-bar) main.read {
  padding-top: 96px;
}
.journal-page .read p,
body.lore-page .read p {
  font-size: 18px;
  line-height: 1.75;
  color: #f0e9de;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.journal-page .read > h1,
.journal-page .read > h2:first-child {
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  letter-spacing: 0.03em;
  text-align: center;
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(243,238,230,.18);
}
.journal-page figure img:not(.atlas-map) {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
.journal-page img.atlas-map {
  display: block;
  width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
  border: 1px solid #000;
}
.journal-page figcaption {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #b7b0a4;
  text-align: center;
  margin-top: 8px;
}
@media (min-width: 801px) {
  .journal-page .read::before {
    display: block;
    content: "";
    position: absolute;
    top: -140px;
    bottom: -140px;
    left: -340px;
    right: -340px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(7,7,7,0) 0%,
      rgba(7,7,7,0.35) 12%,
      rgba(7,7,7,0.78) 24%,
      #070707 34%,
      #070707 66%,
      rgba(7,7,7,0.78) 76%,
      rgba(7,7,7,0.35) 88%,
      rgba(7,7,7,0) 100%
    );
  }
  /* The veil reaches 340px past the column; keep it from adding a sideways scroll (veil1). */
  body.journal-page { overflow-x: clip; }
  .journal-page .toc {
    width: 300px;
    top: 102px;
    background: none;
    padding: 28px;
    z-index: 8;
  }
  main.with-toc.index-flow { margin-left: 0; }
}
.journal-page .toc h3 {
  margin: 0 0 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8f8a82;
}
.journal-page .toc a {
  display: block;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid rgba(243,238,230,.07);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: #d2cbc0;
  text-decoration: none;
}
.journal-page .toc a.on,
.journal-page .toc a:hover { color: #f3eee6; }
#section-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 56px;
  z-index: 19;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #070707;
  padding: 0;
  letter-spacing: 0;
}
#section-bar a {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14.4px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8f8a82;
  text-decoration: none;
  padding: 8px 12px;
}
#section-bar a.active,
#section-bar a:hover { color: #f3eee6; }
body:has(#section-bar) main.index-flow { padding-top: 72px; }


/* column headers */
.journal-page .read > h1 {
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  letter-spacing: 0.03em;
  text-align: center;
  color: #f3eee6;
  margin: 0 0 28px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(243,238,230,.18);
}
/* Section heads, the old .codex-h. Centered because .journal-read h2 is centered. */
body.journal-page .read h2 {
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #f3eee6;
  margin: 8px 0 22px;
  padding: 0;
  border: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.85);
}
body.journal-page .read p + h2,
body.journal-page .read blockquote + h2,
body.journal-page .read ul + h2,
body.journal-page .read h2 + h2 {
  margin-top: 88px;
  padding-top: 40px;
  border-top: 1px solid rgba(243,238,230,0.16);
}
/* Lore book titles only, the old .codex-title. */
body.book .read h2 {
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.02em;
  margin: 96px 0 28px;
  padding-top: 40px;
  border-top: 1px solid rgba(243,238,230,0.16);
  border-bottom: 0;
}
body.book .read h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
body.book .read > h3,
body.book .read > h3 + ul { display: none; }
/* Small labels, the old .codex-h3. Season names on the calendar. */
body.journal-page .read h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cfc6b8;
  margin: 32px 0 12px;
}


/* Lore column only. Narrower than the journal and atlas columns. */
body.book .read {
  max-width: 640px;
  padding-left: 4px;
  padding-right: 4px;
}
/* Lore passages. Scoped copy of .journal-read rules in codex.css. */
body.book .read .codex-by {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a948a;
  margin: 0 0 36px;
  text-align: center;
  border: 0;
}
body.book .read h2:has(+ .codex-by) {
  margin-bottom: 8px;
}
body.book .read .codex-quote {
  margin: 0 0 32px;
  padding: 0 8px 0 0;
  border: 0;
}
body.book .read .codex-quote + .codex-quote {
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid rgba(243,238,230,0.08);
}
body.book .read .codex-quote p {
  font-family: "Iowan Old Style", Palatino, serif;
  font-style: normal;
  font-size: 20px;
  line-height: 1.7;
  color: #ece6db;
  margin: 0;
  text-shadow: none;
}
body.book .read .codex-quote cite {
  display: block;
  margin-top: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a948a;
}

/* Lore contents. Smaller than the journal rail. */
body.book .toc {
  width: 228px;
  padding: 18px 20px 32px 26px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
body.book .toc:hover {
  scrollbar-color: rgba(207,198,184,0.35) transparent;
}
body.book .toc h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8f8a82;
  margin: 0 0 12px;
}
body.book .toc a {
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-size: 13px;
  line-height: 1.35;
  padding: 4px 0;
  color: #a39c92;
  border-bottom-color: rgba(243,238,230,0.05);
}
body.book .toc a.on,
body.book .toc a:hover { color: #f3eee6; }

html, body, .sheet, .index-list, .wall, .lore-rail .codex-toc, .lore-toc-panel, .journal-read, .atlas-stage, .room-body {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
html:hover, body:hover,
.sheet:hover, .index-list:hover, .wall:hover,
.lore-rail .codex-toc:hover, .lore-toc-panel:hover,
.journal-read:hover, .atlas-stage:hover, .room-body:hover,
.sheet.show-bar, .index-list.show-bar, .wall.show-bar,
.lore-rail .codex-toc.show-bar{
  scrollbar-color: rgba(207,198,184,0.38) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sheet::-webkit-scrollbar,
.index-list::-webkit-scrollbar,
.wall::-webkit-scrollbar,
.lore-rail .codex-toc::-webkit-scrollbar,
.lore-toc-panel::-webkit-scrollbar,
.journal-read::-webkit-scrollbar,
.atlas-stage::-webkit-scrollbar,
.room-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sheet::-webkit-scrollbar-thumb,
.index-list::-webkit-scrollbar-thumb,
.wall::-webkit-scrollbar-thumb,
.lore-rail .codex-toc::-webkit-scrollbar-thumb,
.lore-toc-panel::-webkit-scrollbar-thumb,
.journal-read::-webkit-scrollbar-thumb,
.atlas-stage::-webkit-scrollbar-thumb,
.room-body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 99px;
}
html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb,
.sheet:hover::-webkit-scrollbar-thumb,
.index-list:hover::-webkit-scrollbar-thumb,
.wall:hover::-webkit-scrollbar-thumb,
.lore-rail .codex-toc:hover::-webkit-scrollbar-thumb,
.lore-toc-panel:hover::-webkit-scrollbar-thumb,
.journal-read:hover::-webkit-scrollbar-thumb,
.atlas-stage:hover::-webkit-scrollbar-thumb,
.room-body:hover::-webkit-scrollbar-thumb,
.sheet.show-bar::-webkit-scrollbar-thumb,
.index-list.show-bar::-webkit-scrollbar-thumb{
  background: rgba(207,198,184,0.4);
}

/* Index categories. Same quiet list as the lore contents. */
body:not(.journal-page) .toc {
  background: none;
  width: 220px;
  top: 56px;
  padding: 28px 22px 32px;
  z-index: 8;
}
body:not(.journal-page) .toc h3 {
  margin: 0 0 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8f8a82;
}
body:not(.journal-page) .toc a {
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid rgba(243,238,230,0.06);
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: #a39c92;
}
body:not(.journal-page) .toc a.on,
body:not(.journal-page) .toc a:hover { color: #f3eee6; }

body.index-page .toc a {
  border-bottom: 0;
  font-size: 12px;
  padding: 2px 0;
  line-height: 1.25;
}

@media (min-width: 801px) {
  body.journal-page:has(aside.toc) main.read {
    width: min(880px, calc(100vw - 348px));
    max-width: none;
    margin-left: max(300px, calc(50vw - 440px));
    margin-right: auto;
  }
  body.book:has(aside.toc) main.read {
    width: min(640px, calc(100vw - 276px));
    max-width: none;
    margin-left: max(228px, calc(50vw - 320px));
  }
}

@media (max-width: 800px) {
  .mast .topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
  }
  .mast .topbar > .mark,
  .mast .topbar > a[href$="login.html"] {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: none;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }
  .mast .topbar > .mark a {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .mast .topbar .filters {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transform: none;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.4;
  }
  .mast .topbar .filters a {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  #section-bar {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    flex-wrap: wrap;
    padding: 4px 10px 8px;
    gap: 2px 8px;
  }
  #section-bar a {
    font-size: 12px;
    padding: 6px 8px;
  }
}

@media (max-width: 800px) {
  .journal-page .mast .topbar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    gap: 8px;
    padding: 8px 8px 4px;
    background: #070707;
    text-align: center;
  }
  .journal-page .mast .topbar > .mark,
  .journal-page .mast .topbar > a[href$="login.html"] {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    margin: 0;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mast .topbar .filters {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    transform: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    column-gap: 0;
    row-gap: 0;
  }
  .journal-page .mast .topbar .filters,
  .mast .topbar .filters {
    width: 100%;
    max-width: 100%;
    gap: 0;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .mast .topbar .filters a {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .mast .topbar .filters a + a::before,
  .mast .topbar .filters .seek-glyph::before,
  .friend a + a::before {
    padding: 0 8px;
  }
  /* Secondary nav freezes flush under the fixed mast (sticky1). Sticky keeps its
     own flow space, so body padding-top (mast clearance) stays as-is and nothing
     slides under the stacked chrome. top = phone mast height: 102px, or 118px on
     journal-page (8px topbar row-gap) -- same numbers as body padding-top. */
  .journal-page #section-bar,
  #section-bar {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: auto;
    right: auto;
    z-index: 30;
    width: 100%;
    height: auto;
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 2px;
    margin: 0;
    padding: 0 6px;
    box-sizing: border-box;
    background: #070707;
    text-align: center;
  }
  body.journal-page #section-bar {
    top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
  }
  .journal-page #section-bar a,
  #section-bar a {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 6px;
    white-space: nowrap;
  }
  .journal-page:has(#section-bar) main.read {
    padding-top: 28px;
  }
}

@media (max-width: 800px) {
  .toc,
  .journal-page .toc {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    max-width: 100%;
    margin: 0;
  }
  body.journal-page main.read {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
    position: relative;
    left: 0;
    transform: none;
  }
}

/* Calendar day names. Cell padding keeps the three columns from touching. */
table.day-names {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 28px;
}
table.day-names th,
table.day-names td {
  text-align: left;
  vertical-align: top;
  padding: 4px 20px 4px 0;
}

/* Continuous Index — experimental art cards + Chromium-style category rail (i1).
   Cue arrow is a pure click toggle (art79, no hover reveal); open pushes (body.index-toc-open);
   pin sticks open. Categories keep section headers + spacing; labels sit on the art. */
body.index-page aside.toc.index-toc {
  z-index: 18;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
}
@media (min-width: 801px) {
  body.index-page aside.toc.index-toc {
    position: fixed;
    left: 0;
    top: 56px; /* flush under mast (was 72 — 16px gap) */
    bottom: 0;
    width: 12px;
    pointer-events: none;
  }
}
/* Desktop slide-rail panel layout lives under min-width:801px; shared look here. */
body.index-page .index-toc-panel {
  pointer-events: auto;
  padding: 22px 18px 32px;
  overflow: auto;
  scrollbar-width: none;
  background: rgba(7,7,7,0.92);
  z-index: 18;
}
@media (min-width: 801px) {
  body.index-page .index-toc-panel {
    position: fixed;
    left: 0;
    top: 56px; /* flush under mast */
    bottom: 0;
    width: 220px;
    max-width: 78vw;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
}
body.index-page .index-toc-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.index-page .index-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
}
body.index-page .index-toc-head > h3,
body.index-page .index-toc-panel > h3 {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3eee6;
}
/* Minimalist pin (Chromium vertical-tabs stick) — glyph only, matches cue/toc-tog. */
body.index-page .index-toc-pin {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #8f8a82;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .15s ease;
}
body.index-page .index-toc-pin:hover,
body.index-page .index-toc-pin:focus-visible { color: #f3eee6; }
body.index-page .index-toc-pin:focus-visible { outline: 1px solid rgba(243,238,230,0.35); outline-offset: 2px; }
body.index-page .index-toc-pin svg {
  display: block;
  width: 12px;
  height: 12px;
  overflow: visible;
}
body.index-page aside.toc.index-toc.pinned .index-toc-pin {
  color: rgba(243,238,230,0.9);
}
body.index-page aside.toc.index-toc.pinned .index-toc-pin svg path {
  fill: currentColor;
}

@media (min-width: 801px) {
  body.index-page aside.toc.index-toc.open {
    width: 220px;
  }
  body.index-page aside.toc.index-toc.open .index-toc-panel {
    transform: translateX(0);
  }
  body.index-page main.with-toc.index-flow {
    display: block;
    margin-left: 0;
    /* Edge-to-edge art grid (pad 6px sides, gap 6px); bigger tiles. */
    padding: 16px 6px 72px;
    transition: margin-left .2s ease;
  }
  /* Open rail pushes the column over (push1): body.index-toc-open is set by index-scroll.js,
     the grid below reflows to the narrower width instead of the panel overlaying cards. */
  body.index-page.index-toc-open main.with-toc.index-flow { margin-left: 220px; }
  body.index-page .index-cat,
  body.index-page .index-card {
    scroll-margin-top: 88px;
  }
  /* Category section heads: site chrome type (sticky nav / Categories h3) — art76. */
  body.index-page .index-cat > h2 {
    margin: 40px 0 8px;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 26px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f3eee6;
    text-shadow: none;
  }
  body.index-page .index-sub {
    margin: 28px 0 0;
    scroll-margin-top: 88px;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8f8a82;
  }
  body.index-page .index-cards {
    display: grid;
    /* Full-bleed 4-col; rail open still pushes (margin-left) and tiles shrink. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
    padding: 18px 0 48px;
    max-width: none;
    margin: 0;
  }
  body.index-page .index-empty {
    margin: 0;
    grid-column: 1 / -1;
    text-align: center;
    color: #8f8a82;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  /* Art card: name overlaid on art, always visible (bottom-left, art80). */
  body.index-page .index-card {
    position: relative;
    display: block;
    width: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #111;
    color: #f3eee6;
    text-decoration: none;
  }
  body.index-page .index-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Preview name: bottom-left, always visible (art80; was bottom-right art76); 14px inset. */
  body.index-page .index-card span {
    position: absolute;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 12px;
    z-index: 1;
    display: block;
    min-height: 0;
    margin: 0;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f3eee6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.7);
    opacity: 1;
    pointer-events: none;
  }
  body.index-page .index-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: 84px;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
    opacity: 1;
    pointer-events: none;
  }
  body.index-page .index-cat:not(:last-child) > .index-cards:last-child { padding-bottom: 96px; }
  body.index-page .index-cards + .index-sub { margin-top: 76px; }
}

@media (max-width: 800px) {
  /* Phone: Categories lives in the regular #section-bar secondary nav (same chrome
     as Atlas/Codex Calendar/Lore). Panel drops from under the bar. */
  body.index-page aside.toc.index-toc {
    position: fixed;
    top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px)); /* mast 102 + section-bar 44 */
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 29;
    width: 100%;
    max-width: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    pointer-events: none;
  }
  body.index-page aside.toc.index-toc::before { display: none; content: none; }
  body.index-page .index-toc-panel {
    pointer-events: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    z-index: 2;
    width: 100%;
    max-width: none;
    max-height: min(58vh, 520px);
    padding: 0 16px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #070707;
    border-bottom: 1px solid rgba(243,238,230,0.12);
    box-shadow: 0 20px 28px 6px rgba(7,7,7,0.88);
    transform: none;
    display: none;
  }
  body.index-page aside.toc.index-toc.open .index-toc-panel {
    display: block;
    transform: none;
  }
  body.index-page .index-toc-pin,
  body.index-page .index-toc-head { display: none; }
  body.index-page main.with-toc.index-flow {
    display: block;
    margin-left: 0;
    /* Phone: tighter sides (6px, was 12px) so art tiles read larger.
       Top clearance: mast + section-bar (handled by sticky bar in flow / fixed mast). */
    padding: 8px 6px 56px;
  }
  body.index-page .index-cat,
  body.index-page .index-card {
    scroll-margin-top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px));
  }
  body.index-page .index-cat > h2 {
    margin: 28px 6px 6px;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f3eee6;
    text-shadow: none;
  }
  body.index-page .index-sub {
    margin: 22px 6px 0;
    scroll-margin-top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px));
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8f8a82;
  }
  body.index-page .index-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    justify-content: stretch;
    padding: 12px 0 36px;
  }
  body.index-page .index-empty {
    margin: 0;
    grid-column: 1 / -1;
    text-align: center;
    color: #8f8a82;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  body.index-page .index-card {
    position: relative;
    display: block;
    width: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #111;
    color: #f3eee6;
    text-decoration: none;
  }
  body.index-page .index-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Phone: name bottom-left (art80; was bottom-right art76). */
  body.index-page .index-card span {
    position: absolute;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    z-index: 1;
    display: block;
    min-height: 0;
    margin: 0;
    text-align: left;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f3eee6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.7);
    opacity: 1;
    pointer-events: none;
  }
  body.index-page .index-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: 72px;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
    opacity: 1;
    pointer-events: none;
  }
  body.index-page .index-cat:not(:last-child) > .index-cards:last-child { padding-bottom: 72px; }
  body.index-page .index-cards + .index-sub { margin-top: 58px; }
}

/* Index nested category list. Names fold under the active (or manually opened) category. */
body.index-page .toc-cat { margin: 0; }
body.index-page .toc-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.index-page .toc-row > a { flex: 1 1 auto; min-width: 0; }
body.index-page .toc-tog {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #8f8a82;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.index-page .toc-tog:hover,
body.index-page .toc-tog:focus-visible { color: #f3eee6; }
body.index-page .toc-tog:focus-visible { outline: 1px solid rgba(243,238,230,0.35); outline-offset: 2px; }
body.index-page .toc-tog svg {
  display: block;
  width: 6px;
  height: 10px;
  overflow: visible;
  transition: transform .15s ease;
}
body.index-page .toc-cat.open .toc-tog svg { transform: rotate(90deg); }
body.index-page .toc-nest {
  display: none;
  padding: 2px 0 8px 10px;
}
body.index-page .toc-cat.open > .toc-nest { display: block; }
body.index-page .toc-name,
body.index-page .toc-sub {
  display: block;
  padding: 2px 0;
  margin: 0;
  border-bottom: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f8a82;
  text-decoration: none;
}
body.index-page .toc-sub {
  margin-top: 6px;
  letter-spacing: 0.14em;
  color: #a39c92;
}
body.index-page .toc-group:first-child .toc-sub { margin-top: 0; }
body.index-page .toc-name.on,
body.index-page .toc-name:hover,
body.index-page .toc-sub.on,
body.index-page .toc-sub:hover { color: #f3eee6; }
body.index-page .toc-group .toc-name { padding-left: 8px; }

@media (min-width: 801px) {
  body.index-page .toc-nest { padding-left: 8px; }
}

@media (max-width: 800px) {
  body.index-page .toc-nest { padding: 2px 0 10px 12px; }
  body.index-page .toc-name,
  body.index-page .toc-sub { font-size: 12px; padding: 4px 0; }
}


/* Article Index slide-in. Same nest as the Index rail; cue only while hidden. */
body.article .art-index {
  z-index: 18;
}
body.article .art-index-cue {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: rgba(243,238,230,0.45);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .15s ease;
}
@media (min-width: 801px) {
  body.article .art-index {
    position: fixed;
    left: 0;
    top: 56px; /* flush under mast (was 72 — 16px gap) */
    bottom: 0;
    width: 12px;
    pointer-events: none;
  }
  body.article .art-index-cue {
    position: fixed;
    left: 0;
    top: calc(56px + 42vh);
    z-index: 19;
    width: 18px;
    height: 36px;
  }
}
body.article .art-index-cue:hover,
body.article .art-index-cue:focus-visible { color: rgba(243,238,230,0.9); }
body.article .art-index-cue:focus-visible { outline: 1px solid rgba(243,238,230,0.35); outline-offset: 2px; }
body.article .art-index-cue svg {
  display: block;
  width: 6px;
  height: 10px;
  overflow: visible;
}
/* Desktop slide-rail panel layout lives under min-width:801px; shared look here. */
body.article .art-index-panel {
  pointer-events: auto;
  padding: 22px 18px 32px;
  overflow: auto;
  scrollbar-width: none;
  background: rgba(7,7,7,0.92);
  z-index: 18;
}
@media (min-width: 801px) {
  body.article .art-index-panel {
    position: fixed;
    left: 0;
    top: 56px; /* flush under mast */
    bottom: 0;
    width: 220px;
    max-width: 78vw;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
}
body.article .art-index-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.article .art-index-panel > h3 {
  margin: 0 0 12px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3eee6;
}
body.article .art-index .toc-cat { margin: 0; }
body.article .art-index .toc-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.article .art-index .toc-row > a {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  margin: 0;
  padding: 2px 0;
  border: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f8a82;
  text-decoration: none;
}
body.article .art-index .toc-row > a.on,
body.article .art-index .toc-row > a:hover { color: #f3eee6; }
body.article .art-index .toc-tog {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: #8f8a82;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.article .art-index .toc-tog:hover,
body.article .art-index .toc-tog:focus-visible { color: #f3eee6; }
body.article .art-index .toc-tog svg {
  display: block;
  width: 6px;
  height: 10px;
  overflow: visible;
  transition: transform .15s ease;
}
body.article .art-index .toc-cat.open .toc-tog svg { transform: rotate(90deg); }
body.article .art-index .toc-nest {
  display: none;
  padding: 2px 0 8px 8px;
}
body.article .art-index .toc-cat.open > .toc-nest { display: block; }
body.article .art-index .toc-name,
body.article .art-index .toc-sub {
  display: block;
  padding: 2px 0;
  margin: 0;
  border: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f8a82;
  text-decoration: none;
}
body.article .art-index .toc-sub {
  margin-top: 6px;
  letter-spacing: 0.14em;
  color: #a39c92;
}
body.article .art-index .toc-group:first-child .toc-sub { margin-top: 0; }
body.article .art-index .toc-name.on,
body.article .art-index .toc-name:hover,
body.article .art-index .toc-sub.on,
body.article .art-index .toc-sub:hover { color: #f3eee6; }
body.article .art-index .toc-group .toc-name { padding-left: 8px; }

@media (min-width: 801px) {
  /* JS-driven open (art74): cue click toggle via art-index.js (art79, no hover) — matches Index push1. */
  body.article .art-index.open,
  html.cats-rail-pinned body.article .art-index {
    width: 220px;
  }
  body.article .art-index.open .art-index-panel,
  html.cats-rail-pinned body.article .art-index-panel {
    transform: translateX(0);
  }
  body.article .art-index.open .art-index-cue,
  body.article .art-index.pinned .art-index-cue,
  html.cats-rail-pinned body.article .art-index-cue {
    color: rgba(243,238,230,0.85);
  }
}

@media (max-width: 800px) {
  /* Phone: article Categories in regular #section-bar; cue hidden; panel under bar. */
  body.article .art-index-cue { display: none !important; }
  body.article .art-index {
    position: fixed;
    top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 29;
    width: 100%;
    height: 0;
    pointer-events: none;
    background: none;
  }
  body.article .art-index::before { display: none; content: none; }
  body.article .art-index-panel {
    pointer-events: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    z-index: 2;
    width: 100%;
    max-width: none;
    max-height: min(58vh, 520px);
    padding: 0 16px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #070707;
    border-bottom: 1px solid rgba(243,238,230,0.12);
    box-shadow: 0 20px 28px 6px rgba(7,7,7,0.88);
    transform: none;
    display: none;
  }
  body.article .art-index.open .art-index-panel {
    display: block;
    transform: none;
  }
  body.article .art-index-panel > h3 { display: none; }
  body.article .art-index .toc-name,
  body.article .art-index .toc-sub { font-size: 12px; padding: 4px 0; }
  /* Article mast is transparent over hero; keep #section-bar hard opaque. */
  body.article #section-bar {
    position: fixed;
    top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 30;
    background: #070707;
  }
}



/* Articles (one page per subject). The hero art fills the screen and scrolls up in the
   normal flow; the dossier, lore, arts, and related rise beneath it. Pure CSS.
   Everything is scoped under body.article. */
body.article { overflow-x: hidden; background: #070707; }
body.article .art-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}
body.article .art-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center top;
}
body.article .art-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, #070707 0%, rgba(7,7,7,0.62) 26%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0) 100%);
}
body.article .art-title {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
body.article .art-title h1 {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 400;
  color: #f3eee6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.75);
}
body.article .art-title .art-epithet {
  margin: 6px 0 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: #e4ddd2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.75);
}
body.article .mast { background: #070707; background-color: #070707; }
body.article .mast .topbar { background: #070707; background-color: #070707; }
body.article .art-back {
  z-index: 21;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3eee6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.75);
}
body.article .art-body {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  color: #f3eee6;
}
body.article .art-sec { margin: 0 0 64px; }
body.article .art-sec > h2 {
  margin: 0 0 22px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(243,238,230,0.14);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8f8a82;
}
body.article .art-line { margin: 0; line-height: 1.45; color: #e4ddd2; }
body.article .art-dossier { display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; margin: 0; align-items: baseline; }
body.article .art-dossier dt,
body.article .art-facts li,
body.article .art-quote cite,
body.article .art-rel-head {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.article .art-dossier dt { font-size: 11px; color: #8f8a82; }
body.article .art-dossier dd { margin: 0; font-size: 17px; line-height: 1.45; color: #f3eee6; }
body.article .art-quote { margin: 0 0 28px; padding: 0; border: 0; text-align: center; }
body.article .art-quote p {
  margin: 0;
  font-family: "Iowan Old Style", Palatino, serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: #f3eee6;
}
body.article .art-quote cite { display: block; margin: 14px 0 0; font-style: normal; font-size: 11px; color: #9a948a; }
body.article .art-facts {
  list-style: none;
  margin: 0 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(243,238,230,0.14);
}
body.article .art-facts li { margin: 0; font-size: 12px; line-height: 1.7; color: #b7b0a4; }
body.article .art-life { margin: 0; font-size: 17px; line-height: 1.65; }
body.article .art-rel-head { margin: 0 0 14px; font-size: 12px; }
body.article .art-rel-head a { color: #f3eee6; }
body.article .art-related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
body.article .art-related a { font-size: 17px; color: #cfc6b8; }
body.article .art-related a:hover,
body.article .art-rel-head a:hover,
body.article .art-dossier a:hover { color: #f3eee6; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.article .art-hero img {
      animation: art-lift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes art-lift { to { transform: translateY(18%) scale(1.04); opacity: 0.45; } }

@media (min-width: 801px) {
  /* Previous always-visible thumbnail row (replaced by arrows, art5):
  body.article .art-swap { position: absolute; z-index: 3; display: flex; gap: 8px; }
  body.article .art-swap button { padding: 0; margin: 0; background: #000; border: 1px solid rgba(243,238,230,0.25); cursor: pointer; opacity: 0.62; transition: opacity .15s ease, border-color .15s ease; }
  body.article .art-swap button:hover { opacity: 0.9; }
  body.article .art-swap button.on { opacity: 1; border-color: #f3eee6; }
  body.article .art-swap img { position: static; inset: auto; display: block; width: 100%; height: 100%; object-fit: cover; transform: none; animation: none; opacity: 1; }
  body.article .art-swap { right: 28px; bottom: 28px; }
  body.article .art-swap button { width: 56px; height: 70px; }
  */
  body.article .art-swap { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 10px; }
  body.article .art-swap-nav { display: flex; gap: 10px; }
  body.article .art-swap-nav button { padding: 0; margin: 0; width: 32px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 0; box-shadow: none; color: rgba(243,238,230,0.55); cursor: pointer; transition: color .2s ease; text-shadow: 0 1px 2px rgba(0,0,0,0.85); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 6px rgba(0,0,0,0.5)); -webkit-appearance: none; appearance: none; }
  body.article .art-swap-nav button:hover, body.article .art-swap-nav button:focus-visible { color: rgba(243,238,230,0.95); }
  body.article .art-swap-nav button:focus-visible { outline: 1px solid rgba(243,238,230,0.4); outline-offset: 2px; }
  body.article .art-swap-nav svg { display: block; width: 8px; height: 14px; overflow: visible; }
  body.article .art-swap-thumbs { display: flex; gap: 8px; }
  body.article .art-swap-thumbs button { padding: 0; margin: 0; background: #000; border: 1px solid rgba(243,238,230,0.25); cursor: pointer; opacity: 0.62; transition: opacity .15s ease, border-color .15s ease; }
  body.article .art-swap-thumbs button:hover { opacity: 0.9; }
  body.article .art-swap-thumbs button.on { opacity: 1; border-color: #f3eee6; }
  body.article .art-swap-thumbs img { position: static; inset: auto; display: block; width: 100%; height: 100%; object-fit: cover; transform: none; animation: none; opacity: 1; }
  body.article .art-swap { right: 28px; bottom: 28px; align-items: flex-end; }
  body.article .art-swap-thumbs { opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
  body.article .art-swap:hover .art-swap-thumbs, body.article .art-swap:has(:focus-visible) .art-swap-thumbs { opacity: 1; pointer-events: auto; transform: none; }
  body.article .art-swap-thumbs button { width: 56px; height: 70px; }
  body.article .art-life + .art-life { margin-top: 1.1em; }
  body.article .art-related + .art-rel-head, body.article .art-related + .art-related, body.article .art-rel-head + .art-rel-head { margin-top: 28px; }
  body.article .mast { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-bottom: 0; background: #070707; }
  body.article .art-back { position: fixed; top: 0; left: 28px; height: 56px; display: flex; align-items: center; font-size: 16px; }
  body.article .art-title { width: min(46vw, 560px); padding: 40px 28px 28px; }
  body.article .art-title h1 { font-size: clamp(28px, 4vw, 42px); }
  body.article .art-title .art-epithet { font-size: 16px; }
  body.article .art-body { padding: 72px 28px 96px; }
  body.article .art-line { font-size: 22px; }
}
@media (max-width: 800px) {
  /* Previous always-visible thumbnail row (replaced by arrows, art5):
  body.article .art-swap { position: absolute; z-index: 3; display: flex; gap: 8px; }
  body.article .art-swap button { padding: 0; margin: 0; background: #000; border: 1px solid rgba(243,238,230,0.25); cursor: pointer; opacity: 0.62; transition: opacity .15s ease, border-color .15s ease; }
  body.article .art-swap button:hover { opacity: 0.9; }
  body.article .art-swap button.on { opacity: 1; border-color: #f3eee6; }
  body.article .art-swap img { position: static; inset: auto; display: block; width: 100%; height: 100%; object-fit: cover; transform: none; animation: none; opacity: 1; }
  body.article .art-swap { left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom)); justify-content: center; }
  body.article .art-swap button { width: 44px; height: 54px; }
  body.article .art-hero.has-swap .art-title { padding-bottom: calc(max(22px, env(safe-area-inset-bottom)) + 70px); }
  */
  body.article .art-swap { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 10px; }
  body.article .art-swap-nav { display: flex; gap: 10px; }
  body.article .art-swap-nav button { padding: 0; margin: 0; width: 32px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 0; box-shadow: none; color: rgba(243,238,230,0.55); cursor: pointer; transition: color .2s ease; text-shadow: 0 1px 2px rgba(0,0,0,0.85); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 6px rgba(0,0,0,0.5)); -webkit-appearance: none; appearance: none; }
  body.article .art-swap-nav button:hover, body.article .art-swap-nav button:focus-visible { color: rgba(243,238,230,0.95); }
  body.article .art-swap-nav button:focus-visible { outline: 1px solid rgba(243,238,230,0.4); outline-offset: 2px; }
  body.article .art-swap-nav svg { display: block; width: 8px; height: 14px; overflow: visible; }
  body.article .art-swap-thumbs { display: flex; gap: 8px; }
  body.article .art-swap-thumbs button { padding: 0; margin: 0; background: #000; border: 1px solid rgba(243,238,230,0.25); cursor: pointer; opacity: 0.62; transition: opacity .15s ease, border-color .15s ease; }
  body.article .art-swap-thumbs button:hover { opacity: 0.9; }
  body.article .art-swap-thumbs button.on { opacity: 1; border-color: #f3eee6; }
  body.article .art-swap-thumbs img { position: static; inset: auto; display: block; width: 100%; height: 100%; object-fit: cover; transform: none; animation: none; opacity: 1; }
  body.article .art-swap { left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom)); align-items: center; }
  body.article .art-swap-thumbs { display: none; }
  body.article .art-swap-nav button { width: 44px; height: 44px; -webkit-tap-highlight-color: transparent; }
  body.article .art-swap-nav button:focus:not(:focus-visible) { outline: none; }
  body.article .art-hero.has-swap .art-title { padding-bottom: calc(max(22px, env(safe-area-inset-bottom)) + 60px); }
  body.article .art-life + .art-life { margin-top: 1.1em; }
  body.article .art-related + .art-rel-head, body.article .art-related + .art-related, body.article .art-rel-head + .art-rel-head { margin-top: 28px; }
  body.article .mast { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-bottom: 0; background: #070707; background-color: #070707; }
  /* Phone: Index return is the main nav; hide leftover art-back "INDEX" label. */
  body.article .art-back { display: none !important; }
  body.article .art-title { width: 100%; padding: 36px 18px max(22px, env(safe-area-inset-bottom)); }
  body.article .art-title h1 { font-size: clamp(26px, 7.2vw, 34px); line-height: 1.12; overflow-wrap: break-word; }
  body.article .art-title .art-epithet { font-size: 15px; }
  body.article .art-body { padding: 44px 20px 72px; }
  body.article .art-sec { margin-bottom: 52px; }
  body.article .art-line { font-size: 19px; }
  body.article .art-dossier { grid-template-columns: 1fr; gap: 4px; }
  body.article .art-dossier dd { margin-bottom: 12px; }
  body.article .art-quote p { font-size: 18px; }
  body.article .art-life { font-size: 16px; }
}

/* Old JS site typography (art7). Copied from the pre-rebuild site at commit c1113ef. */
@media (min-width: 801px) {
  /* Hero name: typography carried over from the old JS site (c1113ef). */
  body.article .art-title h1{ font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; color: #f3eee6; }
  /* Hero epithet: typography carried over from the old JS site (20px @min-width 801, line-height 1.4). */
  body.article .art-title .art-epithet{ font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif !important; font-weight: 400; font-style: normal; letter-spacing: 0.01em; text-transform: none; font-size: 20px; line-height: 1.4; color: #e4ddd2; }
  /* Index: old index-sections.js #index-section-css (rail h3, rail buttons, .index-card span, .index-empty). */
  body.index-page .toc h3 { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: #f3eee6; }
  body.index-page .toc a { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #8f8a82; }
  body.index-page .toc a.on,
  body.index-page .toc a:hover { color: #f3eee6; }
  body.index-page .index-card span { font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; color: #f3eee6; }
  body.index-page .index-empty { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #8f8a82; }
  /* Lore contents: old codex.css .lore-rail .codex-h3 and .lore-rail .codex-toc li / a. */
  body.book .toc h3 { font-family: "Iowan Old Style", Palatino, serif; font-size: 24px; font-weight: 700; letter-spacing: 0.06em; text-transform: none; color: #f3eee6; }
  body.book .toc a { font-family: "Iowan Old Style", Palatino, serif; font-style: normal; font-size: 15px; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; color: #d2cbc0; }
  body.book .toc a.on,
  body.book .toc a:hover { color: #f3eee6; }
}
@media (max-width: 800px) {
  /* Hero name: typography carried over from the old JS site (c1113ef). */
  body.article .art-title h1{ font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; color: #f3eee6; }
  /* Hero epithet: typography carried over from the old JS site (15px base, line-height 1.35). */
  body.article .art-title .art-epithet{ font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif !important; font-weight: 400; font-style: normal; letter-spacing: 0.01em; text-transform: none; font-size: 15px; line-height: 1.35; color: #e4ddd2; }
  /* Index: old index-sections.js #index-section-css (rail h3, rail buttons, .index-card span, .index-empty). */
  body.index-page .toc h3 { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: #f3eee6; }
  body.index-page .toc a { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #8f8a82; }
  body.index-page .toc a.on,
  body.index-page .toc a:hover { color: #f3eee6; }
  body.index-page .index-card span { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.05em; text-transform: uppercase; color: #f3eee6; }
  body.index-page .index-empty { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #8f8a82; }
  /* Lore contents: old codex.css .lore-rail .codex-h3 and .lore-rail .codex-toc li / a (+ @max-width 980px li 16px). */
  body.book .toc h3 { font-family: "Iowan Old Style", Palatino, serif; font-size: 24px; font-weight: 700; letter-spacing: 0.06em; text-transform: none; color: #f3eee6; }
  body.book .toc a { font-family: "Iowan Old Style", Palatino, serif; font-style: normal; font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; color: #d2cbc0; }
  body.book .toc a.on,
  body.book .toc a:hover { color: #f3eee6; }
}

/* Continuous Journal. All chapters in one column; no divider under chapter heads.
   Desktop rail stays fixed (existing .journal-page .toc); phone list sits in the flow. */
@media (min-width: 801px) {
  body.journal-flow .read > h1 { border-bottom: 0; padding-bottom: 0; scroll-margin-top: 96px; }
  body.journal-flow .read > h1 ~ h1 { margin-top: 88px; }
}
@media (max-width: 800px) {
  body.journal-flow .read > h1 { border-bottom: 0; padding-bottom: 0; scroll-margin-top: 130px; }
  body.journal-flow:has(aside.toc > .toc-drop) .read > h1 {
    scroll-margin-top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px));
  }
  body.journal-flow .read > h1 ~ h1 { margin-top: 64px; }
}

/* Codex and Atlas headings land below the sticky mast (and the fixed section bar on desktop)
   when reached from the Contents rail or a link (land1). */
@media (min-width: 801px) {
  body.journal-page main.read h2[id] { scroll-margin-top: 136px; }
}
@media (max-width: 800px) {
  body.journal-page main.read h2[id] { scroll-margin-top: 130px; }
}

/* Atlas map lightbox (atlas-zoom.js). */
@media (min-width: 801px) {
  body.journal-page main.read figure img.atlas-map { cursor: zoom-in; }
  html.map-zoom-open, html.map-zoom-open body { overflow: hidden; }
  #map-zoom { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(5,5,5,0.94); overflow: hidden; touch-action: none; }
  #map-zoom[hidden] { display: none; }
  #map-zoom img { display: block; max-width: 92vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; border: 0; transform-origin: center center; cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
  #map-zoom.zoomed img { cursor: grab; }
  #map-zoom.zoomed img:active { cursor: grabbing; }
  #map-zoom .map-zoom-close { position: absolute; top: 22px; right: 26px; z-index: 2; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: rgba(243,238,230,0.6); cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)); -webkit-tap-highlight-color: transparent; }
  #map-zoom .map-zoom-close:hover, #map-zoom .map-zoom-close:focus-visible { color: rgba(243,238,230,0.95); }
  #map-zoom .map-zoom-close svg { width: 14px; height: 14px; overflow: visible; }
}
@media (max-width: 800px) {
  body.journal-page main.read figure img.atlas-map { cursor: zoom-in; }
  html.map-zoom-open, html.map-zoom-open body { overflow: hidden; }
  #map-zoom { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(5,5,5,0.94); overflow: hidden; touch-action: none; }
  #map-zoom[hidden] { display: none; }
  #map-zoom img { display: block; max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; border: 0; transform-origin: center center; cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
  #map-zoom.zoomed img { cursor: grab; }
  #map-zoom.zoomed img:active { cursor: grabbing; }
  #map-zoom .map-zoom-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 2; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: rgba(243,238,230,0.6); cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.85)); -webkit-tap-highlight-color: transparent; }
  #map-zoom .map-zoom-close:hover, #map-zoom .map-zoom-close:focus-visible { color: rgba(243,238,230,0.95); }
  #map-zoom .map-zoom-close svg { width: 14px; height: 14px; overflow: visible; }
}

/* Journal chapter dividers: a hairline above each chapter head except the first. */
@media (min-width: 801px) {
  body.journal-flow .read > h1 ~ h1 { margin-top: 64px; padding-top: 56px; border-top: 1px solid rgba(243,238,230,0.14); }
}
@media (max-width: 800px) {
  body.journal-flow .read > h1 ~ h1 { margin-top: 44px; padding-top: 40px; border-top: 1px solid rgba(243,238,230,0.14); }
}

/* Journal: breathing room around in-column art and captions. */
@media (min-width: 801px) {
  body.journal-flow .read figure { margin: 2em 0; }
  body.journal-flow .read figcaption { margin-top: 12px; }
}
@media (max-width: 800px) {
  body.journal-flow .read figure { margin: 1.5em 0; }
  body.journal-flow .read figcaption { margin-top: 10px; }
}

/* Journal background follows the column (journal-scroll.js stacks two layers and crossfades). */
@media (min-width: 801px) {
  body.journal-flow .journal-bg img { position: absolute; inset: 0; opacity: 1; transition: opacity .4s ease; }
  body.journal-flow .journal-bg img.bg-off { opacity: 0; }
}
@media (max-width: 800px) {
  body.journal-flow .journal-bg img { position: absolute; inset: 0; opacity: 1; transition: opacity .4s ease; }
  body.journal-flow .journal-bg img.bg-off { opacity: 0; }
}

/* Login page: the phrase and the welcome sit in a lifted square box over a soft ambient glow
   (login2). The glow takes the signed-in friend's --glow tone, an ember tone before entry. */
@media (min-width: 801px) {
  body.login-page { --login-glow: var(--glow, rgba(214,128,64,.34)); }
  body.login-page .login-card { position: relative; overflow: hidden; box-sizing: border-box; }
  body.login-page .login-card::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 50%;
    width: 820px; height: 820px; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, var(--login-glow), transparent);
    filter: blur(70px); opacity: .7; pointer-events: none;
  }
  body.login-page .login-box {
    position: relative; z-index: 1; box-sizing: border-box;
    width: 400px; aspect-ratio: 1 / 1; padding: 48px 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #0b0b0b; border: 1px solid rgba(243,238,230,.09); border-radius: 4px;
    box-shadow: 0 34px 70px -24px rgba(0,0,0,.9), 0 12px 28px -14px rgba(0,0,0,.75);
  }
  body.login-page #login-form { width: 100%; }
  body.login-page #login-form[hidden] { display: none; }
  body.login-page .login-box #login-code { box-sizing: border-box; width: 100%; max-width: 280px; }
  body.login-page .login-name a { color: inherit; text-decoration: none; }
  body.login-page .login-name a:hover { color: #fff; }
  body.login-page .login-box > :last-child { margin-bottom: 0; }
}
@media (max-width: 800px) {
  body.login-page { --login-glow: var(--glow, rgba(214,128,64,.34)); }
  body.login-page .login-card { position: relative; overflow: hidden; box-sizing: border-box; }
  body.login-page .login-card::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 50%;
    width: 520px; height: 520px; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, var(--login-glow), transparent);
    filter: blur(48px); opacity: .7; pointer-events: none;
  }
  body.login-page .login-box {
    position: relative; z-index: 1; box-sizing: border-box;
    width: min(330px, 100%); aspect-ratio: 1 / 1; padding: 36px 28px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #0b0b0b; border: 1px solid rgba(243,238,230,.09); border-radius: 4px;
    box-shadow: 0 26px 54px -20px rgba(0,0,0,.9), 0 10px 22px -12px rgba(0,0,0,.75);
  }
  body.login-page #login-form { width: 100%; }
  body.login-page #login-form[hidden] { display: none; }
  body.login-page .login-box #login-code { box-sizing: border-box; width: 100%; max-width: 280px; }
  body.login-page .login-name a { color: inherit; text-decoration: none; }
  body.login-page .login-box > :last-child { margin-bottom: 0; }
}

/* search-page seek3 */
body.search-page .tile .label {
  opacity: 1;
}
body.search-page .tile::after {
  opacity: 1;
}
#seek-show {
  margin: 0;
  padding: 10px 22px 0;
  text-align: center;
  font-family: "Iowan Old Style", Palatino, "Times New Roman", serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #f3eee6;
}
#search-hits {
  max-width: 720px;
  margin: 28px auto 80px;
  padding: 0 22px;
}
#search-hits h2 {
  margin: 0 0 18px;
  font-family: "Iowan Old Style", Palatino, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  color: #f3eee6;
}
#search-hits a.hit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid rgba(143,138,130,0.28);
  color: inherit;
  text-decoration: none;
}
#search-hits a.hit:last-child { border-bottom: 1px solid rgba(143,138,130,0.28); }
#search-hits .hit-art {
  flex: 0 0 72px;
  width: 72px;
  height: 96px;
  object-fit: cover;
  background: #111;
  display: block;
}
#search-hits .hit-art-empty { border: 1px solid rgba(143,138,130,0.25); }
#search-hits .hit-body { min-width: 0; flex: 1; }
#search-hits .hit-title {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3eee6;
}
#search-hits .hit-kind {
  display: inline-block;
  margin: 4px 0 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8f8a82;
}
#search-hits .hit-snip {
  margin: 8px 0 0;
  font-family: "Iowan Old Style", Palatino, serif;
  font-size: 16px;
  line-height: 1.45;
  color: #d2cbc0;
}
#search-hits mark {
  background: transparent;
  color: #f3eee6;
  font-weight: 700;
}
@media (min-width: 801px) {
  #seek-show { font-size: 28px; padding-top: 16px; }
  #search-hits .hit-art { flex-basis: 88px; width: 88px; height: 118px; }
}
@media (max-width: 800px) {
  #seek-show { font-size: 18px; padding: 8px 16px 0; }
  #search-hits { margin-top: 18px; padding: 0 16px 64px; }
  #search-hits .hit-art { flex-basis: 56px; width: 56px; height: 74px; }
  #search-hits .hit-snip { font-size: 15px; }
}

/* journal article links */
@media (min-width: 801px) {
  body.journal-page main.read p a,
  body.journal-page main.read figcaption a {
    color: #f3eee6;
    text-decoration: none;
    border-bottom: 1px solid rgba(243,238,230,0.28);
  }
  body.journal-page main.read p a:hover,
  body.journal-page main.read figcaption a:hover {
    border-bottom-color: rgba(243,238,230,0.7);
  }
}
@media (max-width: 800px) {
  body.journal-page main.read p a,
  body.journal-page main.read figcaption a {
    color: #f3eee6;
    text-decoration: none;
    border-bottom: 1px solid rgba(243,238,230,0.28);
  }
  body.journal-page main.read p a:hover,
  body.journal-page main.read figcaption a:hover {
    border-bottom-color: rgba(243,238,230,0.7);
  }
}

/* timeline first cut */
.timeline-list {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}
.timeline-list li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(143,138,130,0.22);
  align-items: baseline;
}
.timeline-list li:last-child { border-bottom: 1px solid rgba(143,138,130,0.22); }
.timeline-list .tl-when {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8f8a82;
}
.timeline-list .tl-what {
  font-family: "Iowan Old Style", Palatino, serif;
  font-size: 17px;
  line-height: 1.45;
  color: #d2cbc0;
}
.timeline-list .tl-what a { color: #f3eee6; text-decoration: none; border-bottom: 1px solid rgba(243,238,230,0.28); }
.timeline-list .tl-what a:hover { border-bottom-color: rgba(243,238,230,0.7); }
@media (min-width: 801px) {
  .timeline-list li { grid-template-columns: 8.5em 1fr; gap: 22px; padding: 12px 0; }
  .timeline-list .tl-what { font-size: 18px; }
}
@media (max-width: 800px) {
  .timeline-list li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .timeline-list .tl-when { font-size: 11px; }
  .timeline-list .tl-what { font-size: 16px; }
}

/* era-years under headers */
body.journal-page .read h2 + .era-years {
  margin: -14px 0 28px;
  padding: 0;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: none;
  color: #8f8a82;
  text-shadow: none;
  line-height: 1.4;
}
.timeline-list .era-years {
  display: block;
  margin: 4px 0 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #8f8a82;
}
@media (min-width: 801px) {
  body.journal-page .read h2 + .era-years { font-size: 14px; margin: -10px 0 32px; }
  .timeline-list .era-years { font-size: 13px; }
}
@media (max-width: 800px) {
  body.journal-page .read h2 + .era-years { font-size: 12px; margin: -8px 0 22px; }
  .timeline-list .era-years { font-size: 11px; }
}

/* Codex + Atlas article paragraph gaps, matching LegendKeeper.
   LK source (public Encyclopedia Ward CSS): .prose :where(p) {
   margin-top: 1.25em; margin-bottom: 1.25em } — consecutive p collapse to 1.25em.
   Scoped to pages with #section-bar (Codex + Atlas only; not Journal).
   Does not touch body.book column width (narrower lore rail stays). */
@media (min-width: 801px) {
  body.journal-page:has(#section-bar) main.read > p + p {
    margin-top: 1.25em;
  }
}
@media (max-width: 800px) {
  body.journal-page:has(#section-bar) main.read > p + p {
    margin-top: 1.25em;
  }
}


/* seek4: center search panel + nav glyph + hide-filter */
.seek-glyph {
  position: relative;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 4px;
  color: #8f8a82;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.seek-glyph:hover,
.seek-glyph:focus {
  color: #f3eee6;
  outline: none;
}
.seek-glyph svg { display: block; }

#seek-panel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
#seek-panel[hidden] { display: none !important; }
.seek-panel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.seek-panel-box {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(560px, 100%);
  max-height: min(72vh, 720px);
  display: flex;
  flex-direction: column;
  background: #0b0b0b;
  border: 1px solid rgba(243,238,230,.09);
  border-radius: 4px;
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.9), 0 12px 28px -14px rgba(0,0,0,.75);
  overflow: hidden;
}
.seek-panel-box::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 18%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(214,128,64,.28), transparent);
  filter: blur(60px);
  opacity: .65;
  pointer-events: none;
}
#seek-panel-input {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(143,138,130,.28);
  color: #f3eee6;
  font-family: "Iowan Old Style", Palatino, serif;
  font-size: 22px;
  letter-spacing: .04em;
  padding: 20px 48px 16px 22px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#seek-panel-input::placeholder { color: #8f8a82; }
/* Kill UA search-cancel (blue X) — panel close glyph is the only dismiss control. */
#seek-panel-input {
  -webkit-appearance: none;
  appearance: none;
}
#seek-panel-input::-webkit-search-cancel-button,
#seek-panel-input::-webkit-search-decoration,
#seek-panel-input::-ms-clear {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  width: 0;
  height: 0;
}
.seek-panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #f3eee6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}
.seek-panel-close:hover,
.seek-panel-close:focus-visible {
  color: #f3eee6;
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px rgba(243,238,230,.55));
  outline: none;
}
.seek-panel-close:active {
  transform: scale(0.92);
  filter: drop-shadow(0 0 3px rgba(243,238,230,.4));
}
.seek-panel-close svg {
  width: 11px;
  height: 11px;
  overflow: visible;
  display: block;
  color: #f3eee6;
  stroke: #f3eee6;
  fill: none;
  pointer-events: none;
}
.seek-panel-close svg path {
  stroke: #f3eee6;
  fill: none;
}
.seek-panel-card.is-seek-focus img,
.seek-panel-ment.is-seek-focus {
  outline: 1px solid rgba(243,238,230,.55);
  outline-offset: 3px;
}
.seek-panel-ment.is-seek-focus {
  background: rgba(243,238,230,.04);
}
a.index-card.is-seek-flash {
  outline: 1px solid rgba(243,238,230,.55);
  outline-offset: 3px;
  transition: outline-color .8s ease;
}
#seek-panel-results {
  position: relative;
  z-index: 1;
  overflow: auto;
  flex: 1;
  padding: 12px 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.seek-panel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.seek-panel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #f3eee6;
  text-decoration: none;
  min-width: 0;
}
.seek-panel-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #111;
  display: block;
  border: 1px solid rgba(143,138,130,.18);
}
.seek-panel-card span {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
}
.seek-panel-ments h3 {
  margin: 4px 0 10px;
  font-family: "Iowan Old Style", Palatino, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  color: #f3eee6;
}
.seek-panel-ment {
  display: block;
  padding: 12px 0;
  border-top: 1px solid rgba(143,138,130,.28);
  color: inherit;
  text-decoration: none;
}
.seek-panel-ment:last-child { border-bottom: 1px solid rgba(143,138,130,.28); }
.seek-panel-ment-title {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f3eee6;
}
.seek-panel-kind {
  display: inline-block;
  margin-top: 4px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8f8a82;
}
.seek-panel-snip {
  margin: 8px 0 0;
  font-family: "Iowan Old Style", Palatino, serif;
  font-size: 15px;
  line-height: 1.45;
  color: #d2cbc0;
}
.seek-panel-snip mark {
  background: transparent;
  color: #f3eee6;
  font-weight: 700;
}
.seek-panel-empty {
  margin: 18px 8px;
  text-align: center;
  color: #8f8a82;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.seek-panel-open { overflow: hidden; }

@media (min-width: 801px) {
  .seek-glyph { margin-left: 0; }
  .seek-glyph svg { width: 15px; height: 15px; }
  .seek-panel-box {
    width: min(640px, 92vw);
    max-height: min(74vh, 760px);
  }
  .seek-panel-box::before {
    width: 640px; height: 640px; opacity: .7; filter: blur(70px);
  }
  #seek-panel-input { font-size: 26px; padding: 24px 52px 18px 26px; }
  .seek-panel-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
  .seek-panel-snip { font-size: 16px; }
}

@media (max-width: 800px) {
  .seek-glyph { margin-left: 0; padding: 6px; }
  .seek-glyph svg { width: 13px; height: 13px; }
  #seek-panel {
    padding: 12px;
    align-items: flex-start;
    padding-top: max(12px, env(safe-area-inset-top));
    /* Keep touch scrolling on the panel, not the page behind. */
    overscroll-behavior: none;
    touch-action: none;
  }
  .seek-panel-box {
    width: 100%;
    max-height: min(86vh, 900px);
    margin-top: 8vh;
    min-height: 0;
    /* flex column already; results flex:1 + overflow:auto scrolls inside */
    overscroll-behavior: contain;
    touch-action: auto;
  }
  .seek-panel-box::before {
    width: 420px; height: 420px; filter: blur(48px);
  }
  #seek-panel-input { font-size: 18px; padding: 16px 44px 12px 16px; flex: 0 0 auto; }
  #seek-panel-results {
    padding: 10px 12px 16px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .seek-panel-cards { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
  /* iOS: overflow:hidden alone still lets the page behind rubber-band; lock with fixed. */
  html.seek-panel-lock,
  html.seek-panel-lock body {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
    height: 100%;
  }
  html.seek-panel-lock body.seek-panel-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }
}

/* Phone: flush opaque mast — no gap above bar; cards never paint through (nav2). */
@media (max-width: 800px) {
  /* Keep fixed to the visual viewport. Safe-area padding lives ON the opaque mast
     (not empty body space above it). Paint upward so iOS overscroll cannot reveal cards. */
  .mast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    background: #070707;
    background-color: #070707;
    background-clip: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
    /* No translateZ — iOS Safari detaches fixed layers with transforms while scrolling. */
    -webkit-transform: none;
    transform: none;
  }
  /* Fixed upward curtain (not absolute-to-mast) so rubber-band / toolbar collapse
     cannot reveal art above the chrome. */
  .mast::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: -100vh;
    height: 100vh; /* ends at y=0 — never covers mast title text */
    background: #070707;
    pointer-events: none;
    z-index: 39;
  }
  .mast .topbar,
  .journal-page .mast .topbar {
    position: relative;
    top: auto;
    padding-top: 8px;
    padding-bottom: 6px;
    background: #070707;
    background-color: #070707;
  }
  /* Article phone chrome matches Index: fixed hard-opaque mast (not a transparent overlay). */
  body.article .mast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
    background: #070707;
    background-color: #070707;
    -webkit-transform: none;
    transform: none;
  }
  body.article .mast::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: -100vh;
    height: 100vh;
    background: #070707;
    pointer-events: none;
    z-index: 39;
  }
  body.article .mast .topbar {
    background: #070707;
    background-color: #070707;
    padding-top: 8px;
    padding-bottom: 0;
  }
  /* Scroll content starts below the fixed mast (match measured phone heights). */
  body:not(.article):not([hidden]):not(.journal-page):not(.login-page) {
    padding-top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
  }
  body.journal-page:not(.article) {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
  }
  body.login-page {
    padding-top: calc(28px + env(safe-area-inset-top, 0px));
  }
  body.login-page .login-card {
    padding-top: 36px;
  }
}


/* Phone: larger seek glyph + filter tap targets (>=44px) (tap1). */
@media (max-width: 800px) {
  .seek-glyph {
    min-width: 44px;
    min-height: 44px;
    margin-left: 4px;
    padding: 10px;
    box-sizing: border-box;
  }
  .seek-glyph svg { width: 16px; height: 16px; }
  .mast .topbar .filters a {
    min-height: 44px;
    padding: 12px 0;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
  .mast .topbar > .mark,
  .mast .topbar > .mark a,
  .mast .topbar > a[href$="login.html"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Mast grows with 44px filter row; keep body clear. */
  body:not(.article):not([hidden]):not(.journal-page):not(.login-page) {
    padding-top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
  }
  body.journal-page:not(.article) {
    padding-top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
  }
}


/* Phone: login back + Enter tap targets; keep Back left-aligned (login-tap1). */
@media (max-width: 800px) {
  body.login-page .mast .topbar.login-top {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    background: #070707;
  }
  body.login-page .mast .topbar.login-top #login-back {
    min-width: 44px;
    min-height: 44px;
    padding: 12px 14px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
  body.login-page {
    padding-top: calc(44px + env(safe-area-inset-top, 0px));
  }
  body.login-page .login-card {
    padding-top: 28px;
  }
  body.login-page .login-card button:not(.login-guest) {
    min-height: 44px;
    min-width: 88px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  body.login-page .login-box #login-code {
    min-height: 44px;
    font-size: 18px;
  }
}


/* Phone: art-index cue + Index toc toggles/rows hit 44px (tap2). */
@media (max-width: 800px) {
  body.article .art-index-cue {
    width: 44px;
    height: 44px;
  }
  body.index-page .toc-tog,
  body.article .art-index .toc-tog {
    width: 44px;
    height: 44px;
  }
  body.index-page .toc-row > a {
    min-height: 44px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  body.index-page .toc-name,
  body.index-page .toc-sub {
    min-height: 44px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .journal-page .toc a {
    min-height: 44px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  #section-bar a {
    min-height: 44px;
    padding: 12px 8px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
}


/* Phone: keep nav filters on-screen; jump targets clear taller mast (land2). */
@media (max-width: 800px) {
  /* Clip sideways overflow on body only — setting overflow on BOTH html and body
     makes position:fixed detach from the visual viewport on iOS Safari, which
     reopened the card-bleed gap above the mast. */
  body { overflow-x: clip; }
  .mast .topbar .filters {
    max-width: calc(100% - 48px);
  }
  .seek-glyph {
    margin-left: 2px;
    padding: 14px 8px;
  }
  /* art-index phone tops handled by sticky top-dropdown block above. */
}


/* Phone: keep private friend marks on one mast row (friends1). */
@media (max-width: 800px) {
  .mast .topbar > .mark {
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    justify-content: center;
  }
  .mast .topbar > .mark::-webkit-scrollbar { display: none; height: 0; }
  .mast .topbar > .mark a {
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 0 1px;
  }
  /* Keep private marks; only reveal when owner matches (same as shared .friend). */
  body.login-jack .mast .topbar > .mark > .friend[data-owner=jack],
  body.login-jon .mast .topbar > .mark > .friend[data-owner=jon],
  body.login-julie .mast .topbar > .mark > .friend[data-owner=julie],
  body.login-sawyer .mast .topbar > .mark > .friend[data-owner=sawyer] {
    display: inline-flex;
    gap: 6px;
  }
}


/* Phone: art-back Index label retired — Categories lives in #section-bar; main nav returns to Index. */
@media (max-width: 800px) {
  body.article .art-back { display: none !important; }
}


/* Nav chrome: main nav (.mast/.topbar) and secondary nav (#section-bar) are
   HARD opaque #070707 with a crisp bottom edge -- no gradient on the bars.
   Only page content fades, via a veil hung BELOW the bottommost chrome
   (::after at top:100%). Desktop + phone; entry hero overlays untouched. */
body:not([hidden]) .mast,
body:not([hidden]) .mast .topbar,
body.journal-page .topbar,
body.journal-page .mast .topbar,
#section-bar,
#section-bar:has(a),
#section-bar.show,
body.has-section-bar #section-bar {
  background: #070707;
  background-image: none;
  background-color: #070707;
}
body.journal-page .topbar,
body.journal-page .mast .topbar {
  text-shadow: none;
}
body:not([hidden]) .mast,
#section-bar:has(a),
#section-bar.show,
body.has-section-bar #section-bar {
  overflow: visible;
}
body:not([hidden]) .mast::after,
#section-bar:has(a)::after,
#section-bar.show::after,
body.has-section-bar #section-bar::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 24px;
  pointer-events: none;
  z-index: 1;
  /* Bar stays 100% opaque to its last pixel; the veil starts a step lower
     (0.72) so the chrome edge reads crisp, then content dissolves. */
  background: linear-gradient(
    to bottom,
    rgba(7, 7, 7, 0.72) 0%,
    rgba(7, 7, 7, 0.32) 45%,
    rgba(7, 7, 7, 0) 100%
  );
}

/* Secondary bar present (Codex/Atlas): no veil on the mast (it would wash
   over the secondary bar); the veil hangs under #section-bar only. Static
   multipage (#section-bar a) and SPA (#section-bar.show / body.has-section-bar). */
body:has(#section-bar a) .mast::after,
body.has-section-bar .mast::after,
body:has(#section-bar.show) .mast::after {
  content: none;
  display: none;
}

/* Phone article: hard opaque mast like Index; veil hangs under #section-bar. */
@media (max-width: 800px) {
  body.article .mast,
  body.article .mast .topbar {
    background: #070707 !important;
    background-color: #070707 !important;
    background-image: none !important;
  }
  body.article .mast::after {
    content: none;
    display: none;
  }
}


/* Login page: after sign-in, figure name(s) sit in the top-right mark (friends2).
   Jon shows both Telorin and Silar. Back stays left. */
body.login-page .mast .topbar.login-top {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
}
body.login-page .mast .topbar.login-top > .mark {
  position: absolute;
  right: 36px;
  top: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
body.login-page .mast .topbar.login-top > .mark .friend {
  display: none;
  align-items: center;
  gap: 14px;
}
body.login-page.login-jack .mast .topbar.login-top > .mark .friend[data-owner=jack],
body.login-page.login-jon .mast .topbar.login-top > .mark .friend[data-owner=jon],
body.login-page.login-julie .mast .topbar.login-top > .mark .friend[data-owner=julie],
body.login-page.login-sawyer .mast .topbar.login-top > .mark .friend[data-owner=sawyer] {
  display: inline-flex;
}
@media (max-width: 800px) {
  body.login-page .mast .topbar.login-top > .mark {
    right: 12px;
    height: 44px;
    gap: 8px;
  }
  body.login-page .mast .topbar.login-top > .mark .friend {
    gap: 8px;
  }
  body.login-page .mast .topbar.login-top > .mark a {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}


/* Jon success ambient (nt32): continuous green↔red wash behind the welcome box.
   Dual-layer opacity crossfade (universally interpolable — no @property / gradient snap).
   Character-mark text-shadows stay fixed green/red (rules above). glow.js also writes
   concrete --login-glow each frame as a belt-and-suspenders sync. */
@keyframes jon-login-a{from{opacity:.7}to{opacity:0}}
@keyframes jon-login-b{from{opacity:0}to{opacity:.7}}
body.login-page.login-jon .login-card::before{
  animation:jon-login-a 3.2s ease-in-out infinite alternate;
  background:radial-gradient(closest-side,rgba(80,180,90,.55),transparent);
}
body.login-page.login-jon .login-card::after{
  content:"";position:absolute;z-index:0;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(230,90,40,.55),transparent);
  animation:jon-login-b 3.2s ease-in-out infinite alternate;
}
@media (min-width:801px){
  body.login-page.login-jon .login-card::after{width:820px;height:820px;filter:blur(70px)}
}
@media (max-width:800px){
  body.login-page.login-jon .login-card::after{width:520px;height:520px;filter:blur(48px)}
}


/* Devin: white glow; Log out in the mast instead of a profile name (devin1). */
.login-logout {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3eee6;
  cursor: pointer;
  text-shadow: 0 0 12px var(--glow), 0 0 24px var(--glow);
}
body.login-devin #login-logout:not([hidden]) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Enter shares .login-logout styles but must stay hidden whenever a player session is active. */
#login-guest-exit[hidden],
#login-logout[hidden],
body:not(.login-guest) #login-guest-exit {
  display: none !important;
}
body.login-guest #login-guest-exit:not([hidden]) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.login-logout:hover,
.login-logout:focus-visible {
  color: #fff;
  text-shadow: 0 0 16px rgba(243,238,230,.95), 0 0 32px rgba(243,238,230,.55);
}
body.login-devin .friend { display: none !important; }


/* Codex Contents: <details class="toc-drop"> inside aside.toc (tocdrop1).
   Desktop: always open (codex-scroll.js), summary hidden -> the fixed side rail is unchanged.
   Phone: a compact "Contents" row frozen under the secondary nav; the list drops over the page. */
.toc-drop > summary { list-style: none; }
.toc-drop > summary::-webkit-details-marker { display: none; }
@media (min-width: 801px) {
  .toc-drop > summary { display: none; }
}
@media (max-width: 800px) {
  body.journal-page aside.toc:has(> .toc-drop) {
    position: -webkit-sticky;
    position: sticky;
    /* Journal continuous (no section-bar): under mast only.
       Codex/Atlas with #section-bar: under mast + secondary row (override below). */
    top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: auto;
    right: auto;
    z-index: 29;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: #070707;
  }
  body.journal-page:has(#section-bar) aside.toc:has(> .toc-drop) {
    /* mast (118px journal-page) + one-row #section-bar (44px) */
    top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px));
  }
  /* Contents row sits at a fixed offset under the nav, so the nav must stay one row:
     no wrap; on the narrowest phones it scrolls sideways instead (its veil is off here). */
  body:has(aside.toc > .toc-drop) #section-bar {
    flex-wrap: nowrap;
    justify-content: safe center;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body:has(aside.toc > .toc-drop) #section-bar::-webkit-scrollbar { display: none; }
  /* The content veil hangs under the lowest chrome: the Contents row, not the nav above it. */
  body:has(aside.toc > .toc-drop) #section-bar::after { content: none; display: none; }
  body.journal-page aside.toc:has(> .toc-drop)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(7,7,7,0.72) 0%, rgba(7,7,7,0.32) 45%, rgba(7,7,7,0) 100%);
  }
  body.journal-page aside.toc:has(> .toc-drop[open])::after { display: none; }
  .toc-drop > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b7b0a4;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }
  .toc-drop > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: 0.7;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .toc-drop[open] > summary { color: #f3eee6; }
  .toc-drop[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .toc-drop > summary:focus-visible { outline: 1px solid rgba(243,238,230,0.35); outline-offset: -4px; }
  .toc-drop > .toc-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: min(58vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0 22px 14px;
    box-sizing: border-box;
    background: #070707;
    border-bottom: 1px solid rgba(243,238,230,0.12);
    box-shadow: 0 20px 28px 6px rgba(7,7,7,0.88);
  }
  .toc-drop > .toc-list > h3 { display: none; }
  body.journal-page .toc-drop > .toc-list a {
    font-family: "Iowan Old Style", Palatino, "Palatino Linotype", serif;
    font-size: 16px;
    line-height: 1.35;
    color: #d2cbc0;
    text-align: left;
  }
  body.journal-page .toc-drop > .toc-list a:last-child { border-bottom: 0; }
  body.journal-page .toc-drop > .toc-list a.on { color: #f3eee6; }
  /* Headings reached from Contents / links land below mast + nav + Contents row. */
  body.journal-page:has(#section-bar) main.read h2[id] {
    scroll-margin-top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px) + 12px);
  }
  body.journal-page:has(#section-bar):has(aside.toc > .toc-drop) main.read h2[id] {
    scroll-margin-top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px) + 12px);
  }
  /* Journal chapters list stays in the flow but must paint above the fixed art bg. */
  body.journal-page aside.toc:not(:has(> .toc-drop)) {
    position: relative;
    top: auto;
    bottom: auto;
    z-index: 2;
  }
}

/* Narrow phones (<=380px, e.g. iPhone SE / mini): keep the secondary nav on one row (sticky1). */
@media (max-width: 380px) {
  #section-bar a,
  .journal-page #section-bar a {
    padding-left: 4px;
    padding-right: 4px;
    letter-spacing: 0.04em;
  }
}
@media (max-width: 340px) {
  #section-bar,
  .journal-page #section-bar { gap: 0; padding-left: 4px; padding-right: 4px; }
  #section-bar a,
  .journal-page #section-bar a { padding-left: 3px; padding-right: 3px; font-size: 10.5px; }
}


/* ---- Phone audit fixes (audit1) ---- */

/* Login: the phone mast rule made the figure mark full-width (left -12px), so it sat on top of
   Back and swallowed taps; names also centered instead of top-right. Right-align, auto width,
   same 56px row as Back. */
@media (max-width: 800px) {
  body.login-page .mast .topbar.login-top > .mark {
    left: auto;
    right: 12px;
    width: auto;
    max-width: calc(100% - 110px);
    height: 56px;
    min-height: 0;
    justify-content: flex-end;
  }
}

/* Phone side-rail audit overrides retired: Index/article Categories now use the sticky
   top-dropdown under the mast (see phone blocks above). Keep 44px rows + map close. */
@media (max-width: 800px) {
  body.article .art-index .toc-row > a,
  body.article .art-index .toc-name,
  body.article .art-index .toc-sub,
  body.index-page .index-toc-panel .toc-row > a,
  body.index-page .index-toc-panel .toc-name,
  body.index-page .index-toc-panel .toc-sub {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  body.article .art-index-panel,
  body.index-page .index-toc-panel { background: #070707; }
  /* Atlas map lightbox close: 40px -> 44px target. */
  #map-zoom .map-zoom-close { width: 44px; height: 44px; }
}









/* ---- Phone: secondary dropdowns use regular #section-bar chrome (secbar1) ----
   Categories / Chapters / Lore match Atlas-Codex secondary links (type, spacing, height).
   Desktop Chromium rails / docks unchanged. */
@media (min-width: 801px) {
  body.index-page #section-bar,
  body.article #section-bar,
  body.journal-flow #section-bar { display: none; }
}
@media (max-width: 800px) {
  /* sec-toggle: same row language as #section-bar a */
  #section-bar .sec-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 6px;
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8f8a82;
    line-height: 1;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  #section-bar .sec-toggle::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: 0.65;
    transform: translateY(-1px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  #section-bar .sec-toggle[aria-expanded="true"],
  body.index-toc-open #section-bar .sec-toggle[data-sec-for="index-toc"],
  body.article:has(.art-index.open) #section-bar .sec-toggle[data-sec-for="art-index"],
  body.journal-flow:has(.toc-drop[open]) #section-bar .sec-toggle[data-sec-for="toc-drop"] {
    color: #f3eee6;
  }
  #section-bar .sec-toggle[aria-expanded="true"]::after,
  body.index-toc-open #section-bar .sec-toggle[data-sec-for="index-toc"]::after,
  body.article:has(.art-index.open) #section-bar .sec-toggle[data-sec-for="art-index"]::after,
  body.journal-flow:has(.toc-drop[open]) #section-bar .sec-toggle[data-sec-for="toc-drop"]::after {
    transform: translateY(1px) rotate(-135deg);
  }
  #section-bar .sec-toggle:focus-visible {
    outline: 1px solid rgba(243,238,230,0.35);
    outline-offset: -4px;
  }

  /* Index / article / journal-flow: section-bar is the only secondary chrome row.
     Hard opaque; veil under the bar (not under a custom strip). */
  body.index-page #section-bar,
  body.article #section-bar,
  body.journal-flow #section-bar {
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
    z-index: 30;
    width: 100%;
    min-height: 44px;
    height: 44px;
    margin: 0;
    padding: 0 6px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 0 2px;
    background: #070707;
    background-image: none;
    overflow: visible;
  }
  body.journal-flow #section-bar,
  body.journal-page.journal-flow #section-bar {
    top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px));
  }
  body.index-page #section-bar::after,
  body.article #section-bar::after,
  body.journal-flow #section-bar::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(7,7,7,0.72) 0%, rgba(7,7,7,0.32) 45%, rgba(7,7,7,0) 100%);
  }
  body.index-page:has(aside.toc.index-toc.open) #section-bar::after,
  body.article:has(.art-index.open) #section-bar::after,
  body.journal-flow:has(.toc-drop[open]) #section-bar::after {
    display: none;
    content: none;
  }
  body.index-page:has(#section-bar) .mast::after,
  body.article:has(#section-bar) .mast::after,
  body.journal-flow:has(#section-bar) .mast::after {
    content: none;
    display: none;
  }

  /* Journal Chapters: control is #section-bar; hide the old toc-drop summary strip. */
  body.journal-flow aside.toc:has(> .toc-drop) {
    position: fixed;
    top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px)); /* journal mast 118 + bar 44 */
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 29;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    pointer-events: none;
  }
  body.journal-flow .toc-drop > summary { display: none !important; }
  body.journal-flow .toc-drop > .toc-list {
    pointer-events: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  body.journal-flow aside.toc:has(> .toc-drop)::after { display: none; content: none; }

  /* Codex/Atlas Contents (and any remaining toc-drop summary): match section-bar a, not custom strip. */
  .toc-drop > summary {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #8f8a82;
    gap: 8px;
  }
  .toc-drop[open] > summary { color: #f3eee6; }
  .toc-drop > summary::after {
    width: 5px;
    height: 5px;
    transform: translateY(-1px) rotate(45deg);
  }
  .toc-drop[open] > summary::after { transform: translateY(1px) rotate(-135deg); }





}

/* ---- Phone hard-kill: never a left full-height Categories panel (railkill1) ----
   Base Index/article rail still uses fixed+translateX for desktop; phone must not
   inherit bottom:0 / translateX slide-in even if an earlier rule races. */
@media (max-width: 800px) {
  body.index-page aside.toc.index-toc,
  body.article .art-index {
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
  body.article .art-index-cue {
    display: none !important;
  }
  body.index-page .index-toc-panel,
  body.article .art-index-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(58vh, 520px) !important;
    transform: none !important;
  }
  body.index-page aside.toc.index-toc.open .index-toc-panel,
  body.article .art-index.open .art-index-panel,
  body.article .art-index:focus-within .art-index-panel {
    transform: none !important;
  }
}

/* ---- Phone chrome stack art67 (articles + safe-area flush) ----
   - Hard opaque #070707 mast flush to screen top (safe-area padding ON the mast).
   - Page-name mark (JS sets login link text).
   - Three equidistant rows.
   - Desktop untouched. */
html, body {
  background: #070707;
  background-color: #070707;
}
@media (max-width: 800px) {
  html, body {
    background: #070707 !important;
    background-color: #070707 !important;
  }

  /* Shared: every mast paints safe-area + curtain; nothing above the chrome. */
  .mast {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    margin: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    background: #070707 !important;
    background-color: #070707 !important;
    background-image: none !important;
    background-clip: border-box !important;
    box-sizing: border-box !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
  .mast::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: -100vh !important;
    bottom: auto !important;
    height: 100vh !important;
    background: #070707 !important;
    pointer-events: none !important;
    z-index: 39 !important;
  }
  .mast .topbar {
    background: #070707 !important;
    background-color: #070707 !important;
    background-image: none !important;
  }



  /* ----- Articles ----- */
  body.article .mast {
    padding-bottom: 0 !important;
    overflow: visible;
  }
  body.article .mast .topbar {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.article .mast .topbar > .mark {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  /* Page-name mark: login link is the title (JS sets text); friends stay login-gated. */
  body.article .mast .topbar > .mark > a[href$="login.html"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #f3eee6 !important;
  }
  /* Phone article: page name only in the title row (not login friend chips). */
  body.article .mast .topbar > .mark > .friend{
    display: none !important;
  }
  body.article .mast .topbar > .mark > #login-guest-exit{
    display: none !important;
  }
  body.article:not(.login-devin) .mast .topbar > .mark > #login-logout{
    display: none !important;
  }
  body.article .mast .topbar .filters {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    background: #070707 !important;
  }
  body.article .mast .topbar .filters a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  body.article .mast .topbar > form {
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }
  body.article #section-bar {
    position: fixed !important;
    top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 40 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    background: #070707 !important;
    background-color: #070707 !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  body.article .art-back,
  body.article .art-index-cue,
  body.article .art-index-panel > h3 {
    display: none !important;
  }
  body.article .art-index {
    top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px)) !important;
  }
  body.article #description > .art-line {
    display: none !important;
  }






















}


/* ---- Phone chrome pin lock (art69) ----
   Keep mast + secondary bar flush at top:0 for the whole scroll.
   Root cause: translateZ(0) on .mast made iOS promote a compositor layer that
   lagged / left a gap when the Safari toolbar collapsed; absolute ::before
   moved with that layer. Also overflow-x on html+body detaches fixed.
   Fix: no transform on chrome; fixed upward #070707 curtain; article
   secondary bars stay fixed; Index/journal secondary stays sticky in-flow. */
@media (max-width: 800px) {
  html {
    background: #070707 !important;
    background-color: #070707 !important;
    overflow-x: visible !important;
  }
  body {
    background: #070707 !important;
    background-color: #070707 !important;
  }
  body.article,
  body.index-page,
  body.journal-page,
  body.journal-flow,
  body.atlas-page,
  body.lore-page,
  body.book {
    overflow-x: clip;
  }

  .mast,
  body.article .mast,
  body.index-page .mast,
  body.journal-page .mast,
  body.atlas-page .mast,
  body.lore-page .mast,
  body.book .mast,
  body.login-page .mast {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    background: #070707 !important;
    background-color: #070707 !important;
    background-image: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    will-change: auto !important;
    box-shadow: none !important;
    z-index: 40 !important;
  }
  .mast::before,
  body.article .mast::before{
    content: "" !important;
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: -100vh !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100vh !important; /* bottom edge at viewport y=0 */
    background: #070707 !important;
    pointer-events: none !important;
    z-index: 39 !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
  .mast .topbar,
  body.article .mast .topbar{
    -webkit-transform: none !important;
    transform: none !important;
    background: #070707 !important;
    background-color: #070707 !important;
  }

  /* Article Categories: fixed under mast (hero underlays chrome). */
  body.article #section-bar {
    position: fixed !important;
    top: calc(var(--phone-mast-h, 80px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    background: #070707 !important;
    background-color: #070707 !important;
    background-image: none !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* Index / Journal / Atlas-Codex: keep sticky/in-flow secondary; just harden paint. */
  body.index-page #section-bar,
  body.journal-flow #section-bar,
  body.journal-page #section-bar,
  body.has-section-bar #section-bar,
  #section-bar.show {
    background: #070707 !important;
    background-color: #070707 !important;
    background-image: none !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
}

/* ---- Phone thinner chrome stack (art70) ----
   Mast ~80px (6+34+34+6), secondary 36px, stack 116px.
   Equidistant rows; ~34px hit areas; art69 pin (no transform, fixed curtain).
   Desktop untouched. */
@media (max-width: 800px) {
  :root {
    --phone-mast-pad-y: 0px;
    --phone-mast-row: 40px;
    --phone-mast-h: 80px;   /* 40 + 40 — art71 equidistant */
    --phone-sec-h: 36px;
    --phone-stack-h: 116px; /* 80 + 36 */
  }

  /* Mast paddings + row heights (all pages with phone mast). */
  .mast .topbar,
  body.article .mast .topbar,
  body.journal-page .mast .topbar,
  body.index-page .mast .topbar {
    padding-top: var(--phone-mast-pad-y) !important;
    padding-bottom: var(--phone-mast-pad-y) !important;
    gap: 0 !important;
  }
  body.journal-page .mast .topbar {
    gap: 0 !important; /* was 8px — unify with other pages */
    padding: var(--phone-mast-pad-y) 8px !important;
  }
  .mast .topbar > .mark,
  .mast .topbar > a[href$="login.html"],
  body.article .mast .topbar > .mark,
  body.journal-page .mast .topbar > .mark {
    min-height: var(--phone-mast-row) !important;
    height: var(--phone-mast-row) !important;
  }
  .mast .topbar .filters,
  body.article .mast .topbar .filters,
  body.journal-page .mast .topbar .filters {
    min-height: var(--phone-mast-row) !important;
    height: var(--phone-mast-row) !important;
  }
  .mast .topbar .filters a,
  body.article .mast .topbar .filters a,
  .seek-glyph {
    min-height: var(--phone-mast-row) !important;
    height: var(--phone-mast-row) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .mast .topbar > .mark,
  .mast .topbar > .mark a,
  .mast .topbar > a[href$="login.html"] {
    min-height: var(--phone-mast-row) !important;
  }
  /* Keep type quiet (art68); don't grow glyph beyond the row. */
  .seek-glyph {
    min-width: var(--phone-mast-row) !important;
    margin-left: 2px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .seek-glyph svg { width: 14px !important; height: 14px !important; }

  /* Body clearance under fixed mast (Index / Atlas / Codex / Journal). */
  body:not(.article):not([hidden]):not(.journal-page):not(.login-page) {
    padding-top: calc(var(--phone-mast-h) + env(safe-area-inset-top, 0px)) !important;
  }
  body.journal-page:not(.article) {
    padding-top: calc(var(--phone-mast-h) + env(safe-area-inset-top, 0px)) !important;
  }

  /* Secondary bar height + sticky/fixed tops. */
  #section-bar,
  body.index-page #section-bar,
  body.article #section-bar,
  body.journal-flow #section-bar,
  body.journal-page #section-bar,
  .journal-page #section-bar {
    min-height: var(--phone-sec-h) !important;
    height: var(--phone-sec-h) !important;
  }
  #section-bar a,
  #section-bar .sec-toggle {
    min-height: var(--phone-sec-h) !important;
    height: var(--phone-sec-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Sticky secondary under mast (Index / Journal / Atlas-Codex). */
  .journal-page #section-bar,
  #section-bar,
  body.index-page #section-bar,
  body.journal-flow #section-bar {
    top: calc(var(--phone-mast-h) + env(safe-area-inset-top, 0px)) !important;
  }
  body.journal-page #section-bar,
  body.journal-flow #section-bar,
  body.journal-page.journal-flow #section-bar {
    top: calc(var(--phone-mast-h) + env(safe-area-inset-top, 0px)) !important;
  }
  /* Article Categories: fixed under mast. */
  body.article #section-bar {
    top: calc(var(--phone-mast-h) + env(safe-area-inset-top, 0px)) !important;
    height: var(--phone-sec-h) !important;
    min-height: var(--phone-sec-h) !important;
  }




  /* Dropdown panels under stack. */
  body.article .art-index {
    top: calc(var(--phone-stack-h) + env(safe-area-inset-top, 0px)) !important;
  }
  body.index-page aside.toc.index-toc {
    top: calc(var(--phone-stack-h) + env(safe-area-inset-top, 0px)) !important;
  }
  body.journal-flow aside.toc:has(> .toc-drop) {
    top: calc(var(--phone-stack-h) + env(safe-area-inset-top, 0px)) !important;
  }

  /* Scroll / anchor offsets clear the full stack. */
  body.index-page .index-cat,
  body.index-page .index-flow .index-cat {
    scroll-margin-top: calc(var(--phone-stack-h) + env(safe-area-inset-top, 0px)) !important;
  }
  body.journal-flow .read > h1,
  body.journal-flow:has(aside.toc > .toc-drop) .read > h1,
  body.journal-page main.read h2[id],
  body.book .read h2[id],
  body.lore-page .read h2[id],
  .journal-read h2[id],
  .read h2[id] {
    scroll-margin-top: calc(var(--phone-stack-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }

  /* Login page shorter mast clearance if present. */
  body.login-page {
    padding-top: calc(var(--phone-mast-row) + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ---- Phone title visible + equidistant rows (art71) ----
   Root cause: mast::before curtain height included safe-area+24px past y=0,
   painting over the VAEREK title. Curtain now ends at viewport top.
   Mast: two equal 40px rows (centers 20 & 60); secondary 36px (center ~98);
   near-even text-center spacing (~40px). Title fully in-row, below safe-area pad. */
@media (max-width: 800px) {
  :root {
    --phone-mast-pad-y: 0px;
    --phone-mast-row: 40px;
    --phone-mast-h: 80px;   /* 40 + 40 */
    --phone-sec-h: 36px;
    --phone-stack-h: 116px; /* 80 + 36 */
  }

  /* Curtain: only ABOVE the screen. Never cover title glyphs. */
  .mast::before,
  body.article .mast::before,
  body.index-page .mast::before,
  body.journal-page .mast::before {
    top: -100vh !important;
    height: 100vh !important;
    bottom: auto !important;
    z-index: 0 !important; /* behind mast content */
  }
  .mast .topbar,
  .mast .topbar > .mark,
  .mast .topbar .filters,
  .mast .topbar > .mark > a[href$="login.html"] {
    position: relative !important;
    z-index: 2 !important;
  }

  .mast .topbar,
  body.article .mast .topbar,
  body.journal-page .mast .topbar,
  body.index-page .mast .topbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
    min-height: var(--phone-mast-h) !important;
    height: auto !important;
  }
  body.journal-page .mast .topbar {
    padding: 0 8px !important;
    gap: 0 !important;
  }

  /* Two equal mast rows — text vertically centered in each. */
  .mast .topbar > .mark,
  .mast .topbar > a[href$="login.html"],
  body.article .mast .topbar > .mark,
  body.journal-page .mast .topbar > .mark {
    min-height: var(--phone-mast-row) !important;
    height: var(--phone-mast-row) !important;
    max-height: var(--phone-mast-row) !important;
    overflow: visible !important;
    overflow-x: auto !important; /* keep friends scroll if private */
    overflow-y: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
  .mast .topbar > .mark > a[href$="login.html"],
  body.article .mast .topbar > .mark > a[href$="login.html"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    -webkit-transform: none !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
  }
  .mast .topbar .filters,
  body.article .mast .topbar .filters,
  body.journal-page .mast .topbar .filters {
    min-height: var(--phone-mast-row) !important;
    height: var(--phone-mast-row) !important;
    max-height: var(--phone-mast-row) !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }
  .mast .topbar .filters a,
  .seek-glyph {
    min-height: var(--phone-mast-row) !important;
    height: var(--phone-mast-row) !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .seek-glyph {
    min-width: var(--phone-mast-row) !important;
  }

  /* Secondary stays 36px; centers ~20 / 60 / 98 ≈ equal steps. */
  #section-bar,
  body.article #section-bar,
  body.index-page #section-bar,
  body.journal-flow #section-bar{
    min-height: var(--phone-sec-h) !important;
    height: var(--phone-sec-h) !important;
  }
  #section-bar a,
  #section-bar .sec-toggle{
    min-height: var(--phone-sec-h) !important;
    height: var(--phone-sec-h) !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ---- Phone chrome static from load (art72) ----
   Flash on first scroll: iOS Safari toolbar collapse recalculated env(safe-area)
   / 100vh and repainted the fixed mast + curtain. Lock --sat-lock once via JS;
   use vmax curtain (not vh); kill chrome transitions; never rewrite on scroll. */
@media (max-width: 800px) {
  /* Prefer locked sat; fall back to env before JS runs. */
  .mast,
  body.article .mast,
  body.index-page .mast,
  body.journal-page .mast,
  body.atlas-page .mast,
  body.lore-page .mast,
  body.book .mast,
  body.login-page .mast {
    padding-top: var(--sat-lock, env(safe-area-inset-top, 0px)) !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
  .mast .topbar,
  body.article .mast .topbar,
  #section-bar,
  body.article #section-bar,
  body.index-page #section-bar,
  body.journal-flow #section-bar,
  .mast::before,
  .mast::after,
  #section-bar::after,
  body.article #section-bar::after,
  body.index-page #section-bar::after,
  body.journal-flow #section-bar::after {
    transition: none !important;
    animation: none !important;
  }

  /* Curtain: huge fixed plate above y=0 — not tied to vh (toolbar collapse). */
  .mast::before,
  body.article .mast::before,
  body.index-page .mast::before,
  body.journal-page .mast::before {
    top: -200vmax !important;
    height: 200vmax !important;
    bottom: auto !important;
    transition: none !important;
    animation: none !important;
  }

  /* Geometry uses locked sat so first-scroll toolbar hide cannot jump the bar. */
  body.article #section-bar,
  body.index-page #section-bar,
  body.journal-flow #section-bar,
  body.journal-page #section-bar,
  .journal-page #section-bar,
  #section-bar {
    top: calc(var(--phone-mast-h, 80px) + var(--sat-lock, env(safe-area-inset-top, 0px))) !important;
  }
  body.article .art-index,
  body.index-page aside.toc.index-toc,
  body.journal-flow aside.toc:has(> .toc-drop){
    top: calc(var(--phone-stack-h, 116px) + var(--sat-lock, env(safe-area-inset-top, 0px))) !important;
  }
  body:not(.article):not([hidden]):not(.journal-page):not(.login-page),
  body.journal-page:not(.article) {
    padding-top: calc(var(--phone-mast-h, 80px) + var(--sat-lock, env(safe-area-inset-top, 0px))) !important;
  }
  body.login-page {
    padding-top: calc(var(--phone-mast-row, 40px) + var(--sat-lock, env(safe-area-inset-top, 0px))) !important;
  }

  /* Veil stays under chrome only — never animate onto the bar. */
  body:not([hidden]) .mast::after,
  #section-bar:has(a)::after,
  #section-bar.show::after,
  body.has-section-bar #section-bar::after,
  body.index-page #section-bar::after,
  body.article #section-bar::after,
  body.journal-flow #section-bar::after {
    transition: none !important;
    opacity: 1 !important;
  }
}

/* ---- Phone: kill first-scroll chrome flash (art73) ----
   MutationObserver on html/body/mast/#section-bar during first 1000ms of scroll
   found NO class/style mutations on chrome (art72 sat-lock held). Real cause is
   compositor: styles.css body::after is a fixed full-viewport film grain with
   mix-blend-mode:overlay + opacity:.18 + z-index:80 (above mast z:40). iOS
   re-blends that layer over the opaque bar for ~1s when scrolling starts, then
   settles. Also neutralize root :hover scrollbar cascade (no phone scrollbar)
   and freeze dvh/hero heights that shift when the Safari toolbar collapses. */
@media (max-width: 800px) {
  /* Film grain must not sit on / blend over chrome. */
  body::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    mix-blend-mode: normal !important;
    background: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* Chrome: plain opaque; isolate so ancestors/overlays cannot re-blend it. */
  .mast,
  body.article .mast,
  body.index-page .mast,
  body.journal-page .mast,
  .mast .topbar,
  body.article .mast .topbar,
  #section-bar,
  body.article #section-bar,
  body.index-page #section-bar,
  body.journal-flow #section-bar{
    isolation: isolate !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    background: #070707 !important;
    background-color: #070707 !important;
    background-image: none !important;
  }

  /* Content veil (::after under chrome) stays, but never blends/filters and
     never covers the bar (still top:100% of the bar box). */
  body:not([hidden]) .mast::after,
  #section-bar:has(a)::after,
  #section-bar.show::after,
  body.has-section-bar #section-bar::after,
  body.index-page #section-bar::after,
  body.article #section-bar::after,
  body.journal-flow #section-bar::after {
    mix-blend-mode: normal !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
  }

  /* Root scrollbar-fade / :hover cascade — phone has no visible scrollbar;
     toggling scrollbar-color on html/body still forces a full style recalc. */
  html,
  body,
  html:hover,
  body:hover {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  html:hover::-webkit-scrollbar-thumb,
  body:hover::-webkit-scrollbar-thumb,
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    display: none !important;
  }
  .sheet.show-bar,
  .index-list.show-bar,
  .wall.show-bar,
  .lore-rail .codex-toc.show-bar{
    scrollbar-color: transparent transparent !important;
  }
  .sheet.show-bar::-webkit-scrollbar-thumb,
  .index-list.show-bar::-webkit-scrollbar-thumb{
    background: transparent !important;
  }

  /* Don't let dynamic viewport units resize the page when the toolbar collapses. */
  html,
  body {
    min-height: 100% !important;
  }
  body.article .art-hero {
    height: 100svh !important;
    max-height: 100svh !important;
  }
}


/* ---- art74: Categories rail persist, flush under mast, right-edge fade, article push ---- */
/* Boot: no transition flicker while restoring localStorage state (cats-rail-boot.js). */
html.cats-rail-boot body.index-page .index-toc-panel,
html.cats-rail-boot body.index-page main.with-toc.index-flow,
html.cats-rail-boot body.article .art-index-panel,
html.cats-rail-boot body.article .art-hero,
html.cats-rail-boot body.article .art-body,
html.cats-rail-boot body.article .art-index,
html.cats-rail-boot body.index-page aside.toc.index-toc {
  transition: none !important;
}

/* Early paint from html.cats-rail-pinned (set in <head> before CSS paints content). */
@media (min-width: 801px) {
  html.cats-rail-pinned body.index-page aside.toc.index-toc {
    width: 220px;
  }
  html.cats-rail-pinned body.index-page .index-toc-panel {
    transform: translateX(0);
  }
  html.cats-rail-pinned body.index-page main.with-toc.index-flow {
    margin-left: 220px;
  }

  /* Article push: hero + body reflow beside open rail (same 220px / .2s ease as Index). */
  body.article .art-hero,
  body.article .art-body {
    transition: margin-left .2s ease, width .2s ease;
    box-sizing: border-box;
  }
  body.article.art-index-open .art-hero,
  html.cats-rail-pinned body.article .art-hero {
    margin-left: 220px;
    width: calc(100% - 220px);
  }
  body.article.art-index-open .art-hero img,
  html.cats-rail-pinned body.article .art-hero img {
    /* object-fit:cover already — recrops into the narrower hero */
    object-fit: cover;
  }
  body.article.art-index-open .art-body,
  html.cats-rail-pinned body.article .art-body {
    margin-left: 220px;
    width: calc(100% - 220px);
    max-width: none;
  }

  /* Soft right-edge fade on the Categories rail panel (desktop only, art77).
     Wide eased taper; overlaps panel edge so there is no hard line; pointer-events none. */
  body.index-page aside.toc.index-toc.open::after,
  html.cats-rail-pinned body.index-page aside.toc.index-toc::after,
  body.article .art-index.open::after,
  html.cats-rail-pinned body.article .art-index::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 220px;
    width: 120px;
    /* Overlap solid panel so #070707 start meets the edge with no visible step (art77). */
    margin-left: -2px;
    pointer-events: none;
    z-index: 19;
    border: 0;
    box-shadow: none;
    background: linear-gradient(
      to right,
      #070707 0%,
      rgba(7, 7, 7, 0.85) 20%,
      rgba(7, 7, 7, 0.6) 40%,
      rgba(7, 7, 7, 0.35) 60%,
      rgba(7, 7, 7, 0.15) 80%,
      rgba(7, 7, 7, 0) 100%
    );
  }
}

/* Phone: restore open dropdown before paint; leave full-width (no right-edge fade). */
@media (max-width: 800px) {
  html.cats-rail-phone-open body.index-page aside.toc.index-toc .index-toc-panel,
  html.cats-rail-phone-open body.article .art-index-panel {
    display: block;
    transform: none;
  }
  /* When dropdown is open, jump targets clear mast + section-bar + dropdown area. */
  html.cats-rail-phone-open body.index-page .index-cat,
  html.cats-rail-phone-open body.index-page .index-card,
  html.cats-rail-phone-open body.index-page .index-sub {
    scroll-margin-top: calc(var(--phone-stack-h, 116px) + env(safe-area-inset-top, 0px) + min(58vh, 520px));
  }
}


/* ---- art75: Codex/Journal Contents rails match Index Categories font + veil ----
   Exact Index sticky-nav type (Helvetica 12px / 400 / 0.14em uppercase, #8f8a82→#f3eee6,
   h3 0.16em #f3eee6, no text-shadow). Black #070707 panel + soft right-edge fade.
   Desktop only for the veil; phone dropdowns get the Index phone Categories font. */
@media (min-width: 801px) {
  body.journal-page aside.toc,
  body.book aside.toc,
  body.lore-page aside.toc {
    background: #070707;
    background-color: #070707;
    background-image: none;
    text-shadow: none;
  }
  /* Width tokens for the fixed fade (journal 300 / book 228 — do not change layout widths). */
  body.journal-page:not(.book) aside.toc { --cats-toc-fade-left: 300px; }
  body.book aside.toc { --cats-toc-fade-left: 228px; }
  body.journal-page aside.toc::after,
  body.book aside.toc::after,
  body.lore-page aside.toc::after {
    content: "";
    display: block;
    position: fixed;
    top: 102px;
    bottom: 0;
    left: var(--cats-toc-fade-left, 300px);
    width: 120px;
    margin-left: -2px;
    pointer-events: none;
    z-index: 8;
    border: 0;
    box-shadow: none;
    background: linear-gradient(
      to right,
      #070707 0%,
      rgba(7, 7, 7, 0.85) 20%,
      rgba(7, 7, 7, 0.6) 40%,
      rgba(7, 7, 7, 0.35) 60%,
      rgba(7, 7, 7, 0.15) 80%,
      rgba(7, 7, 7, 0) 100%
    );
  }
  /* Match Index Categories h3 exactly. */
  body.journal-page aside.toc h3,
  body.book aside.toc h3,
  body.lore-page aside.toc h3,
  body.journal-page .toc-list > h3,
  body.book .toc-list > h3 {
    margin: 0 0 12px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f3eee6;
    text-shadow: none;
  }
  /* Match Index Categories links exactly. */
  body.journal-page aside.toc a,
  body.book aside.toc a,
  body.lore-page aside.toc a,
  body.journal-page .toc-list a,
  body.book .toc-list a {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8f8a82;
    text-shadow: none;
  }
  body.journal-page aside.toc a.on,
  body.journal-page aside.toc a:hover,
  body.book aside.toc a.on,
  body.book aside.toc a:hover,
  body.lore-page aside.toc a.on,
  body.lore-page aside.toc a:hover,
  body.journal-page .toc-list a.on,
  body.journal-page .toc-list a:hover,
  body.book .toc-list a.on,
  body.book .toc-list a:hover {
    color: #f3eee6;
    text-shadow: none;
  }
}

@media (max-width: 800px) {
  /* Phone Contents/Chapters dropdown: same type as Index phone Categories. */
  body.journal-page .toc-drop > .toc-list a,
  body.book .toc-drop > .toc-list a,
  body.lore-page .toc-drop > .toc-list a,
  body.journal-page aside.toc .toc-list a,
  body.book aside.toc .toc-list a {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8f8a82;
    text-shadow: none;
  }
  body.journal-page .toc-drop > .toc-list a.on,
  body.journal-page .toc-drop > .toc-list a:hover,
  body.book .toc-drop > .toc-list a.on,
  body.book .toc-drop > .toc-list a:hover,
  body.lore-page .toc-drop > .toc-list a.on,
  body.lore-page .toc-drop > .toc-list a:hover {
    color: #f3eee6;
    text-shadow: none;
  }
}


/* ---- art78: rail fade sits under text (desktop) ----
   Keep the wide art77 taper, but raise article title/epithet/controls/body and
   Codex/Journal reading column above the fade so only artwork is veiled. */
@media (min-width: 801px) {
  /* Article: title + swap + dossier above Categories fade (rail/fade stack at z-18) but
     below the fixed mast (z-20) and art-back (z-21) — art84: was 21, drew over the nav.
     Stack top→bottom: mast/art-back (20-21) > article text (19) > rail+fade (18) > art. */
  body.article .art-title {
    position: absolute;
    z-index: 19;
  }
  body.article .art-swap {
    z-index: 19;
  }
  body.article .art-body {
    position: relative;
    z-index: 19;
  }
  /* Codex / Journal: reading column above Contents fade (toc/fade at z-8). */
  body.journal-page main.read,
  body.book main.read,
  body.lore-page main.read {
    position: relative;
    z-index: 9;
  }
}


/* ---- art81: Index card names above the Categories rail fade (desktop) ----
   Same approach as art78: the rail + its art77 fade stack at z-18 (fixed aside); lift the
   card name labels (already position:absolute) to z-19 while the rail is open so names in
   the first column stay full brightness and the fade only veils card art. Still below the
   mast (z-20). Labels never overlap the panel/cue (grid is pushed 220px). Phone untouched. */
@media (min-width: 801px) {
  body.index-page.index-toc-open .index-card span,
  html.cats-rail-pinned body.index-page .index-card span {
    z-index: 19;
  }
}


/* ---- art86: Index card lore flip (art90: click-to-reveal, no glyph; text fills the card) ----
   art91: a click/tap/Enter on a card reveals this face (no navigation), a click on the face
   flips it back; only the dossier name and the "ARTICLE ->" line navigate. art90: card-lore.js fit() picks the largest --ls type scale that fits so
   the text fills the card, and the face spreads its blocks with space-between.
   The card glyph flips the card face itself (crossfade) to a dossier back face that lives
   inside the card's own box: same width/height, overflow hidden, grid untouched. Backdrop =
   the article's main hero art (tiny copy, card-lore-palette.js) blurred under a dark frosted
   veil; labels take a subtle accent from the hero palette (neutral without one). Type scales
   with the card (container query units); card-lore.js fit() line-clamps / drops the summary,
   quote, facts and dossier rows until nothing overflows. No overlay, no page lock. */
body.index-page .index-card { container-type: inline-size; }
body.index-page .index-card .card-lore-back {
  position: absolute;
  inset: 0;
  z-index: 2; /* over the name label (1) and bottom veil; glyph (2) follows it in the DOM */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
  cursor: default;
}
body.index-page .index-card.is-lore-flipped .card-lore-back {
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility 0s;
}
body.index-page .index-card.is-lore-flipped > span { opacity: 0; transition: opacity .2s ease; }
body.index-page .index-card .card-lore-bg {
  position: absolute;
  inset: 0;
  background: #111 center / cover no-repeat;
  filter: blur(30px) saturate(1.05);
  transform: scale(1.15); /* hide the blur's soft edges */
}
body.index-page .index-card.is-lore-flipped .card-lore-bg { will-change: transform; }
body.index-page .index-card .card-lore-veil {
  position: absolute;
  inset: 0;
  background: rgba(7,7,7,.64);
}
body.index-page .index-card .card-lore-face {
  --lore-label: #a59f95;
  --lore-cite: #9a948a;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between; /* art90: content spreads over the whole card */
  text-align: left;
  color: #f3eee6;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
body.index-page .index-card .card-lore-face.is-fitting { justify-content: flex-start; }
body.index-page .index-card.is-lore-flipped,
body.index-page .index-card .card-lore-back { cursor: pointer; } /* click on the face flips back */
/* art91: the face's two links (name, ARTICLE line) - the only way to the article. */
body.index-page .index-card .card-lore-link { color: inherit; text-decoration: none; cursor: pointer; }
body.index-page .index-card .card-lore-name-link:hover,
body.index-page .index-card .card-lore-name-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(243,238,230,.45);
}
body.index-page .index-card .card-lore-article {
  flex: 0 0 auto;
  align-self: flex-end;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1;
  white-space: nowrap;
  color: #8f8a82;
  text-shadow: none;
  transition: color .2s ease;
}
body.index-page .index-card .card-lore-article:hover,
body.index-page .index-card .card-lore-article:focus-visible { color: #f3eee6; }
body.index-page .index-card .card-lore-link:focus-visible { outline: 1px solid rgba(243,238,230,.5); outline-offset: 2px; }
body.index-page .index-card .card-lore-back.has-art-palette .card-lore-face {
  /* subtle: the palette label tone, softened toward the neutral grey */
  --lore-label: rgba(var(--lore-label-rgb), .78);
  --lore-cite: rgba(var(--lore-label-rgb), .66);
}
body.index-page .index-card .card-lore-face p,
body.index-page .index-card .card-lore-face blockquote,
body.index-page .index-card .card-lore-face dl,
body.index-page .index-card .card-lore-face dd { margin: 0; padding: 0; border: 0; }
body.index-page .index-card .card-lore-name {
  flex: 0 0 auto;
  font-family: "Iowan Old Style", Palatino, serif;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.index-page .index-card .card-lore-epithet,
body.index-page .index-card .card-lore-dossier dt,
body.index-page .index-card .card-lore-facts,
body.index-page .index-card .card-lore-quote cite,
body.index-page .index-card .card-lore-note {
  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  text-transform: uppercase;
  color: var(--lore-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.index-page .index-card .card-lore-epithet { flex: 0 0 auto; letter-spacing: .14em; }
body.index-page .index-card .card-lore-quote { flex: 0 0 auto; }
body.index-page .index-card .card-lore-quote p {
  font-family: "Iowan Old Style", Palatino, serif;
  font-style: italic;
  line-height: 1.35;
  color: #f3eee6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--quote-lines, 3);
  overflow: hidden;
}
body.index-page .index-card .card-lore-quote cite { display: block; letter-spacing: .12em; color: var(--lore-cite); }
body.index-page .index-card .card-lore-dossier { flex: 0 0 auto; display: flex; flex-direction: column; }
body.index-page .index-card .card-lore-row { display: flex; align-items: baseline; min-width: 0; }
body.index-page .index-card .card-lore-row[hidden] { display: none; }
body.index-page .index-card .card-lore-dossier dt { flex: 0 0 auto; letter-spacing: .14em; }
body.index-page .index-card .card-lore-dossier dd {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Iowan Old Style", Palatino, serif;
  line-height: 1.3;
  color: #f3eee6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.index-page .index-card .card-lore-facts { flex: 0 0 auto; letter-spacing: .12em; color: #cfc6b8; }
body.index-page .index-card .card-lore-desc {
  flex: 0 0 auto;
  font-family: "Iowan Old Style", Palatino, serif;
  line-height: 1.38;
  color: #e4ddd2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--sum-lines, 4);
  overflow: hidden;
}
body.index-page .index-card .card-lore-face.no-cite .card-lore-quote cite,
body.index-page .index-card .card-lore-face.no-facts .card-lore-facts,
body.index-page .index-card .card-lore-face.no-epithet .card-lore-epithet,
body.index-page .index-card .card-lore-face.no-desc .card-lore-desc,
body.index-page .index-card .card-lore-face.no-quote .card-lore-quote { display: none; }
/* art90: wrap instead of ellipsis so no words are lost when the type scales up to fill. */
body.index-page .index-card .card-lore-name,
body.index-page .index-card .card-lore-epithet,
body.index-page .index-card .card-lore-facts,
body.index-page .index-card .card-lore-quote cite,
body.index-page .index-card .card-lore-dossier dd {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  body.index-page .index-card .card-lore-back,
  body.index-page .index-card.is-lore-flipped .card-lore-back,
  body.index-page .index-card.is-lore-flipped > span { transition: none; }
}

@media (min-width: 801px) {
  /* Above the Categories rail fade like the names (art81). */
  body.index-page.index-toc-open .index-card .card-lore-back,
  html.cats-rail-pinned body.index-page .index-card .card-lore-back { z-index: 19; }
  body.index-page .index-card .card-lore-face {
    padding: clamp(10px, 5cqw, 18px) clamp(12px, 5.5cqw, 20px);
    gap: calc(var(--ls, 1) * clamp(3px, 1.6cqw, 6px));
  }
  body.index-page .index-card .card-lore-name { font-size: calc(var(--ls, 1) * clamp(13px, 5.6cqw, 20px)); }
  body.index-page .index-card .card-lore-epithet { font-size: calc(var(--ls, 1) * clamp(7.5px, 2.7cqw, 10px)); margin-top: -2px; }
  body.index-page .index-card .card-lore-quote p { font-size: calc(var(--ls, 1) * clamp(9.5px, 3.8cqw, 13.5px)); }
  body.index-page .index-card .card-lore-quote cite { font-size: calc(var(--ls, 1) * clamp(7px, 2.4cqw, 9px)); margin-top: 2px; }
  body.index-page .index-card .card-lore-dossier { gap: 1px; }
  body.index-page .index-card .card-lore-row { gap: clamp(6px, 2.6cqw, 10px); }
  body.index-page .index-card .card-lore-dossier dt { font-size: calc(var(--ls, 1) * clamp(7px, 2.4cqw, 9px)); }
  body.index-page .index-card .card-lore-dossier dd { font-size: calc(var(--ls, 1) * clamp(9.5px, 3.6cqw, 13px)); }
  body.index-page .index-card .card-lore-facts { font-size: calc(var(--ls, 1) * clamp(7px, 2.4cqw, 9px)); }
  body.index-page .index-card .card-lore-desc { font-size: calc(var(--ls, 1) * clamp(9.5px, 3.7cqw, 13px)); }
  body.index-page .index-card .card-lore-note { font-size: calc(var(--ls, 1) * 10px); letter-spacing: .14em; }
  body.index-page .index-card .card-lore-article { font-size: clamp(9px, 3.4cqw, 11px); padding: 4px 0 0 8px; margin-bottom: -2px; }
}

@media (max-width: 800px) {
  body.index-page .index-card .card-lore-face {
    padding: 8px 9px;
    gap: calc(var(--ls, 1) * 2px);
  }
  body.index-page .index-card .card-lore-name { font-size: calc(var(--ls, 1) * clamp(11.5px, 6.6cqw, 17px)); }
  body.index-page .index-card .card-lore-epithet { font-size: calc(var(--ls, 1) * clamp(6.5px, 3.3cqw, 9px)); letter-spacing: .1em; }
  body.index-page .index-card .card-lore-quote p { font-size: calc(var(--ls, 1) * clamp(8.5px, 4.6cqw, 12px)); line-height: 1.3; }
  body.index-page .index-card .card-lore-quote cite { font-size: calc(var(--ls, 1) * clamp(6.5px, 3cqw, 8px)); letter-spacing: .08em; }
  body.index-page .index-card .card-lore-row { gap: 6px; }
  body.index-page .index-card .card-lore-dossier dt { font-size: calc(var(--ls, 1) * clamp(6.5px, 3cqw, 8px)); letter-spacing: .1em; }
  body.index-page .index-card .card-lore-dossier dd { font-size: calc(var(--ls, 1) * clamp(8.5px, 4.4cqw, 11.5px)); }
  body.index-page .index-card .card-lore-facts { font-size: calc(var(--ls, 1) * clamp(6.5px, 3cqw, 8px)); letter-spacing: .08em; }
  body.index-page .index-card .card-lore-desc { font-size: calc(var(--ls, 1) * clamp(8.5px, 4.5cqw, 12px)); line-height: 1.32; }
  body.index-page .index-card .card-lore-note { font-size: calc(var(--ls, 1) * 9px); letter-spacing: .12em; }
  body.index-page .index-card .card-lore-article { font-size: 8px; letter-spacing: .14em; padding: 6px 0 0 10px; margin: -4px 0 -2px; }
}

/* ---- art92: Index card front name label takes the dossier name's font-family ----
   Only the family changes (computed from .card-lore-name: "Iowan Old Style", Palatino, serif);
   size, weight, case, letter-spacing, colour and position stay as set at lines ~1759 / ~1779. */
body.index-page .index-card > span { font-family: "Iowan Old Style", Palatino, serif; }

/* ---- art83: article body reading measure ----
   Desktop: .art-body (description, dossier, lore, related) becomes the Codex lore column —
   640px box with 4px side padding (body.book .read) and lore paragraph type 18px / 1.75
   (body.lore-page .read p) — centered with equal margins; with the Categories rail open it
   centers in the space right of the 220px rail (same 28px minimum gutter either way).
   Explicit calc() margins (not auto) so the art74 .2s push still animates.
   Phone: edge to edge (no max-width / side margins), 12px text inset only. Hero untouched. */
@media (min-width: 801px) {
  body.article .art-body {
    max-width: none;
    width: min(640px, calc(100% - 56px));
    margin-left: calc((100% - min(640px, calc(100% - 56px))) / 2);
    margin-right: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  body.article.art-index-open .art-body,
  html.cats-rail-pinned body.article .art-body {
    max-width: none;
    width: min(640px, calc(100% - 276px));
    margin-left: calc(220px + (100% - 220px - min(640px, calc(100% - 276px))) / 2);
  }
  body.article .art-life { font-size: 18px; line-height: 1.75; }
}
@media (max-width: 800px) {
  body.article .art-body {
    max-width: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- art87: flush desktop rails + top-left nav sidebar glyph ----
   rail-toggle.js (in <head> on every page) adds .rail-toggle to the .topbar only when the page
   has a sidebar (aside.toc / aside.art-index), and sets --rail-top = measured bottom of the
   nav chrome (mast + visible fixed #section-bar). Index + articles toggle the shared
   elorae-cats-rail pinned state; Codex/Journal TOCs get html.toc-rail-collapsed
   (elorae-toc-rail, restored before first paint). Phone: unchanged, no glyph. */
@media (min-width: 801px) {
  .topbar .rail-toggle {
    position: absolute;
    left: 22px;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #8f8a82;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
  }
  .topbar .rail-toggle svg { display: block; width: 16px; height: 12px; overflow: visible; pointer-events: none; }
  .topbar .rail-toggle:hover,
  .topbar .rail-toggle:focus-visible { color: #f3eee6; outline: none; }
  /* Articles: INDEX back label sits just right of the glyph, same baseline/height. */
  html.has-rail-toggle body.article .art-back,
  body.article:has(aside.art-index) .art-back { left: 60px; }
  /* Codex (mast + section bar) and Journal (mast only): rail flush under the chrome. */
  body.journal-page aside.toc,
  body.lore-page aside.toc,
  body.book aside.toc { top: var(--rail-top, 96px) !important; }
  body.journal-flow aside.toc { top: var(--rail-top, 56px) !important; }
  body.journal-page aside.toc::after,
  body.lore-page aside.toc::after,
  body.book aside.toc::after { top: var(--rail-top, 96px) !important; }
  body.journal-flow aside.toc::after { top: var(--rail-top, 56px) !important; }
  /* Collapsed Codex/Journal TOC: rail (and its fade) hidden; the reading column centres. */
  html.toc-rail-collapsed body.journal-page aside.toc,
  html.toc-rail-collapsed body.lore-page aside.toc { display: none !important; }
  html.toc-rail-collapsed body.journal-page:not(.book) main.with-toc.read {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 800px) {
  .topbar .rail-toggle { display: none !important; }
}

/* ---- art88: Codex / Lore / Timeline / Journal rails use the Index rail type ----
   Source of truth: the Index Categories rail. Header (page section name, e.g. LORE,
   JOURNAL CHAPTERS) = 'CATEGORIES'; every entry = an Index top-level item (flat lists, no
   nesting). Panel 220px, padding 22px 18px 32px, rgba(7,7,7,.92), no per-item dividers.
   Phone dropdowns mirror the Index phone Categories rows. Scroll highlight / .on unchanged. */
@media (min-width: 801px) {
  body.journal-page aside.toc,
  body.lore-page aside.toc,
  body.book aside.toc {
    box-sizing: border-box !important;
    width: 220px !important;
    padding: 22px 18px 32px !important;
    background: rgba(7,7,7,.92) !important;
    background-image: none !important;
    border: 0 !important;
    overflow-y: auto;
    --cats-toc-fade-left: 220px;
  }
  body.journal-page aside.toc .toc-list,
  body.lore-page aside.toc .toc-list { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  body.journal-page aside.toc > h3,
  body.journal-page aside.toc .toc-list > h3,
  body.lore-page aside.toc .toc-list > h3 {
    margin: 2px 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: normal !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #f3eee6 !important;
    text-shadow: none !important;
  }
  body.journal-page aside.toc > a,
  body.journal-page aside.toc .toc-list > a,
  body.lore-page aside.toc .toc-list > a {
    display: block !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 15px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-indent: 0 !important;
    text-shadow: none !important;
  }
}
@media (max-width: 800px) {
  body.journal-page aside.toc .toc-list,
  body.lore-page aside.toc .toc-list {
    margin: 0 !important;
    padding: 0 16px 14px !important;
    border: 0 !important;
  }
  body.journal-page aside.toc .toc-list > a,
  body.lore-page aside.toc .toc-list > a,
  body.journal-page aside.toc > a {
    display: flex !important;
    align-items: center;
    box-sizing: border-box !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-indent: 0 !important;
  }
}

/* ---- art89/nt26: hard nav edge, content fades under it ----
   No gradient / veil strip hangs below the main nav, the secondary bar or the phone Contents
   row any more. Instead rail-toggle.js marks the scrolling CONTENT (.nav-fade: children of
   main.read / main.art-body, plus article hero art / title / swap; Index still masks main)
   and feeds --nf (nav bottom, relative to the mask image) and --nfl (ramp length): text goes
   transparent -> opaque over 48px (phone 40px) starting exactly at the nav line. The column
   veil (main.read::before) is NOT masked — it stays fully opaque at every scroll position.
   Fixed page backdrops (.journal-bg) and the sidebars are not masked. Mask image is oversized
   340px / 140px per side with mask-clip:no-clip. */
.mast::after,
body .mast::after,
body:not([hidden]) .mast::after,
#section-bar::after,
#section-bar:has(a)::after,
#section-bar.show::after,
body.has-section-bar #section-bar::after,
body.index-page #section-bar::after,
body.article #section-bar::after,
body.journal-flow #section-bar::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
@media (max-width: 800px) {
  body.journal-page aside.toc:has(> .toc-drop)::after { content: none !important; display: none !important; background: none !important; }
}
html.nav-fade-on .nav-fade {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--nf, -9999px), #000 calc(var(--nf, -9999px) + var(--nfl, 0px)));
  mask-image: linear-gradient(to bottom, transparent 0, transparent var(--nf, -9999px), #000 calc(var(--nf, -9999px) + var(--nfl, 0px)));
  -webkit-mask-size: calc(100% + 680px) calc(100% + 280px);
  mask-size: calc(100% + 680px) calc(100% + 280px);
  -webkit-mask-position: -340px -140px;
  mask-position: -340px -140px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
  -webkit-mask-clip: no-clip;
  mask-clip: no-clip;
}
@media (min-width: 801px) {
  /* Index: the mask makes the grid a stacking context. Lift it above the rail (18) so card
     names / glyph / flipped backs keep drawing above the art77 fade (art81), and redraw that
     fade inside the grid at z-18 (above card art, below the z-19 labels), exactly as before. */
  html.nav-fade-on body.index-page main.index-flow.nav-fade { position: relative; z-index: 19; }
  html.nav-fade-on body.index-page.index-toc-open main.index-flow.nav-fade::before {
    content: "";
    position: fixed;
    top: var(--rail-top, 56px);
    bottom: 0;
    left: 218px;
    width: 120px;
    z-index: 18;
    pointer-events: none;
    background: linear-gradient(
      to right,
      #070707 0%,
      rgba(7, 7, 7, 0.85) 20%,
      rgba(7, 7, 7, 0.6) 40%,
      rgba(7, 7, 7, 0.35) 60%,
      rgba(7, 7, 7, 0.15) 80%,
      rgba(7, 7, 7, 0) 100%
    );
  }
}

/* ---- art95: private articles + Index entries (owner-gated) ----
   Same login gate as the old wall: login.js sets body.login-<owner> from the phrase (localStorage
   elorae-login); devin sees every private piece, other owners only their own. Unlike .private
   (whose unlock forces display:block and cannot reach <body>), this gate only hides, so an
   unlocked element keeps its own display (flex rails, grid cards, article hero/body). */
body:not(.login-devin) .private[data-owner="devin"],
body:not(.login-devin):not(.login-jack) .private[data-owner="jack"],
body:not(.login-devin):not(.login-jon) .private[data-owner="jon"],
body:not(.login-devin):not(.login-julie) .private[data-owner="julie"],
body:not(.login-devin):not(.login-sawyer) .private[data-owner="sawyer"],
body:not(.login-devin):not(.login-jack) .private-group { display: none !important; }
/* Articles without art yet (Telorin): shorter, plain hero; Index card shows the name only. */
body.article .art-hero.no-art { height: 52vh !important; height: 52svh !important; }
body.article .art-hero.no-art::after { display: none; }
body.index-page .index-card.no-art { background: #111; }

/* ---- nt27: Codex TOC short inset dividers ----
   Between each section link on Lore / Magics / Souls / Calendar / Timeline.
   Not on Index or Journal. Replaces the shared full-width border on those rails with a
   short, left-inset hairline. */
@media (min-width: 801px) {
  body.lore-page aside.toc .toc-list > a {
    border-bottom: 0;
  }
  body.lore-page aside.toc .toc-list > a + a::before {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin: 0 0 8px;
    background: rgba(243, 238, 230, 0.22);
    pointer-events: none;
  }
}
@media (max-width: 800px) {
  body.lore-page aside.toc .toc-list > a {
    border-bottom: 0;
  }
  body.lore-page aside.toc .toc-list > a + a::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    margin: 0 0 6px;
    background: rgba(243, 238, 230, 0.2);
    pointer-events: none;
  }
}

/* ---- nt29/nt30: Timeline Eras summary — era name is a section header bar, not a list item.
   Specificity must beat body.journal-page .read h3 (small uppercase Helvetica). */
body.journal-page main.read .tl-era-block {
  margin: 0 0 22px;
  padding: 0;
}
body.journal-page main.read h3.tl-era-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(143, 138, 130, 0.22);
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: #f3eee6;
  text-shadow: none;
}
body.journal-page main.read h3.tl-era-bar .tl-when {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8f8a82;
  min-width: 1.6em;
}
body.journal-page main.read h3.tl-era-bar .tl-era-name {
  text-transform: none;
  letter-spacing: 0;
  color: #f3eee6;
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 238, 230, 0.28);
}
body.journal-page main.read h3.tl-era-bar .tl-era-name:hover {
  border-bottom-color: rgba(243, 238, 230, 0.7);
}
body.journal-page main.read h3.tl-era-bar .era-years {
  display: inline;
  margin: 0 0 0 auto;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: #8f8a82;
}
body.journal-page main.read .tl-era-blurb {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.45;
  color: #d2cbc0;
}
body.journal-page .read h2 + .era-years .tl-when {
  margin-right: 10px;
  letter-spacing: 0.12em;
}
@media (min-width: 801px) {
  body.journal-page main.read h3.tl-era-bar { font-size: 19px; padding: 12px 0; gap: 10px 18px; }
  body.journal-page main.read h3.tl-era-bar .tl-when { min-width: 2em; }
  body.journal-page main.read .tl-era-blurb { font-size: 18px; }
}
@media (max-width: 800px) {
  body.journal-page main.read h3.tl-era-bar {
    font-size: 17px;
    padding: 10px 0;
    gap: 4px 10px;
  }
  body.journal-page main.read h3.tl-era-bar .era-years {
    flex: 1 0 100%;
    margin-left: 0;
    font-size: 11px;
  }
  body.journal-page main.read .tl-era-blurb { font-size: 16px; }
}



/* ---- nt36: player profile dashboard — all-black, no column veil ----
   Player pages keep journal/lore body classes for mast/nav, but drop the
   reading-column veil and journal artwork. Dashboard chrome on pure black. */
body.player-page {
  background: #000 !important;
  background-color: #000 !important;
}
body.player-page .journal-bg {
  display: none !important;
}
/* Kill the desktop reading-column veil (main.read::before gradient). */
@media (min-width: 801px) {
  body.player-page.journal-page main.read::before,
  body.player-page main.read::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }
}
body.player-page main.read {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 48px 96px;
  background: transparent;
  text-shadow: none;
  box-sizing: border-box;
}
body.player-page main.read > h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: left;
  color: #f3eee6;
  margin: 0 0 28px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(243, 238, 230, 0.09);
}
body.player-page #nt-player {
  margin: 0;
}
@media (max-width: 800px) {
  body.player-page main.read {
    max-width: 100%;
    margin: 0;
    padding: 24px 16px 72px;
  }
  body.player-page main.read > h1 {
    font-size: 11px;
    letter-spacing: 0.22em;
    margin-bottom: 20px;
    padding-bottom: 14px;
  }
}


/* Phrase-page: .login-actions {display:flex} must not override HTML [hidden]
   (same specificity as UA [hidden]; author rule wins and leaked Connect on login prompt). */
body.login-page #login-gh-actions[hidden],
body.login-page #login-welcome[hidden],
body.login-page #login-name[hidden],
body.login-page #login-gh-status[hidden],
body.login-page #login-guest[hidden],
body.login-page #login-err[hidden],
body.login-page #login-connect[hidden],
body.login-page #login-welcome-stage[hidden],
body.login-page .login-actions[hidden] {
  display: none !important;
}

/* Login chrome: phrase + enter only — no friend/player names in the mast. */
body.login-page .mast .friend{display:none!important}
body.login-page .mast .nt-pmark{display:none!important}
body.login-page .login-gh-status{margin-top:14px;font-size:12px;letter-spacing:.08em;color:#8f8a82;text-align:center}
body.login-page .login-gh-status[data-kind=ok]{color:#c8e0c0}
body.login-page .login-gh-status[data-kind=err]{color:#e0a8a0}
body.login-page #login-welcome{text-align:center;letter-spacing:.12em}
body.login-page #login-name{text-align:center;margin:0 0 18px}
body.login-page #login-elorae{flex:0 0 auto;margin:0;align-self:center}

/* Login: Guest sits center-bottom of the square box (not beside Enter). */
body.login-page .login-box #login-guest{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  margin:0;
  z-index:2;
}
@media (max-width:800px){
  body.login-page .login-box #login-guest{bottom:22px}
}



/* Login entrance: only two families — sans (ELORAE, Enter, Guest) + serif (phrase). */
body.login-page .login-kicker,
body.login-page #login-submit,
body.login-page #login-guest,
body.login-page .login-guest,
body.login-page .login-actions button{
  font-family: var(--login-font-sans);
}
body.login-page #login-code{
  font-family: var(--login-font-serif);
}
/* Login actions: Enter (primary) + Guest (secondary). */
.login-actions{display:flex;flex-wrap:wrap;gap:12px 18px;justify-content:center;align-items:center;margin-top:18px}
.login-actions button,.login-copy{background:none;border:0;color:#f3eee6;letter-spacing:.16em;text-transform:uppercase;font-family:var(--login-font-sans,"Helvetica Neue",Helvetica,Arial,sans-serif);font-size:11px;cursor:pointer}
.login-actions button.login-guest,button.login-guest{
  color:#8f8a82;
  font-size:10px;
  letter-spacing:.2em;
  font-weight:400;
  opacity:.72;
  margin-top:0;
  padding:4px 8px;
  min-height:0;
  min-width:0;
  background:none;border:0;text-transform:uppercase;font-family:var(--login-font-sans,"Helvetica Neue",Helvetica,Arial,sans-serif);cursor:pointer;
}
.login-who{margin:10px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8f8a82}
.profile-gh-actions{justify-content:flex-start;margin:0 0 18px}
.profile-gh-actions + .login-gh-status{text-align:left;margin-top:0;margin-bottom:18px}
body.login-guest .login-guest-exit{display:inline-flex;align-items:center;min-height:44px;font-weight:400;color:#f3eee6}
body.login-guest .login-guest-exit:hover,body.login-guest .login-guest-exit:focus-visible{color:#f3eee6}
@media (min-width:801px){
  .login-actions button:hover,.login-copy:hover{color:#fff}
  .login-actions button.login-guest:hover,button.login-guest:hover{color:#cfc6b8;opacity:1}
}
@media (max-width:800px){
  .login-actions button:not(.login-guest),.login-copy{min-height:44px;min-width:88px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  .login-actions button.login-guest,button.login-guest{min-height:36px;padding:8px 12px}
}


/* Login: static centered box; Welcome ↔ Connect crossfade in one window. */
body.login-page .login-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
body.login-page .login-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
body.login-page .login-swap{
  position:relative;width:100%;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
body.login-page .login-stage{
  width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .42s ease;
}
body.login-page .login-stage.login-stage-abs{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
}
body.login-page.login-connecting .login-box{
  position:relative;
  aspect-ratio:auto;min-height:400px;height:auto;padding-top:36px;padding-bottom:56px;
}
body.login-page #login-connect{
  display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;
}
body.login-page .login-connect-steps{
  list-style:none;margin:0 auto;padding:0;width:100%;max-width:280px;text-align:center;
  font-family:var(--login-font-sans,"Helvetica Neue",Helvetica,Arial,sans-serif);font-size:12px;line-height:1.5;color:#8f8a82;
}
body.login-page .login-connect-steps li{margin:0 0 16px}
body.login-page .login-connect-steps li > span{display:block;margin:8px 0 0;letter-spacing:.02em}
body.login-page .login-connect-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:100%;max-width:280px;margin:8px auto 22px;text-align:center;
}
body.login-page .login-connect-primary{
  display:inline-block;margin:0;padding:4px 8px;
  font-family:var(--login-font-sans,"Helvetica Neue",Helvetica,Arial,sans-serif);
  font-size:13px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  text-shadow:0 0 14px rgba(255,255,255,.55),0 0 28px rgba(243,238,230,.35);
}
body.login-page .login-connect-primary:hover,
body.login-page .login-connect-primary:focus-visible{
  color:#fff;outline:none;
  text-shadow:0 0 18px rgba(255,255,255,.85),0 0 36px rgba(243,238,230,.55);
}
body.login-page .login-connect-hint{
  margin:12px 0 0;max-width:240px;
  font-family:var(--login-font-sans,"Helvetica Neue",Helvetica,Arial,sans-serif);
  font-size:11px;font-weight:400;line-height:1.45;letter-spacing:.04em;
  color:#8f8a82;text-align:center;text-transform:none;
}
body.login-page .login-connect-form{width:100%;max-width:280px;margin:0 auto;}
body.login-page #login-connect .login-actions[hidden]{display:none!important;}
body.login-page .login-connect-btn,
body.login-page .login-connect-submit,
body.login-page .login-connect-back{
  appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font-family:var(--login-font-sans,"Helvetica Neue",Helvetica,Arial,sans-serif);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#f3eee6;text-decoration:none;
}
body.login-page .login-box #login-connect-back{
  position:absolute;
  left:50%;
  bottom:28px; /* match ELORAE top inset / Guest bottom inset */
  transform:translateX(-50%);
  margin:0;
  z-index:2;
  color:#8f8a82;
}
@media (max-width:800px){
  body.login-page .login-box #login-connect-back{bottom:22px}
}
body.login-page .login-connect-back{color:#8f8a82;margin-top:8px}
body.login-page .login-connect-submit:hover,
body.login-page .login-connect-back:hover{color:#fff;text-shadow:0 0 12px rgba(243,238,230,.45)}
body.login-page #login-connect-token{
  box-sizing:border-box;width:100%;background:transparent;border:0;border-bottom:1px solid rgba(143,138,130,.28);
  color:#f3eee6;font-family:"Iowan Old Style",Palatino,serif;font-size:18px;letter-spacing:.04em;
  padding:10px 0;outline:none;text-align:center;margin-top:8px;
}
body.login-page #login-connect-token:focus{border-bottom-color:rgba(243,238,230,.55)}
body.login-page #login-connect .login-actions{margin-top:14px;justify-content:center}
body.login-page #login-connect #login-connect-err{margin-top:10px}

/* ---- login-elorae-18px: no page scrollbar; ELORAE 18px; top inset = Guest bottom; phrase+Enter box-center ---- */
html:has(body.login-page),
body.login-page {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body.login-page {
  box-sizing: border-box;
  padding-top: 0 !important; /* mast is fixed; don't grow past 100dvh */
}
body.login-page .login-card {
  min-height: 0;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body.login-page .login-box {
  justify-content: flex-start; /* ELORAE at top; form centered absolutely */
}
body.login-page #login-elorae {
  flex: 0 0 auto;
  margin: 0;
  align-self: center;
  width: 100%;
  position: absolute;
  top: 28px; /* match Guest bottom inset (desktop) */
  left: 0;
  right: 0;
  z-index: 2;
  font-size: 18px;
}
@media (max-width: 800px) {
  body.login-page #login-elorae { top: 22px; } /* match Guest bottom inset (phone) */
}
body.login-page #login-form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.login-page #login-form[hidden] {
  display: none;
}
/* Welcome/connect stage fills remaining box and stays centered when form is gone */
body.login-page .login-swap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Rich edit spans (paste/toolbar); safe in articles + journal */
body.article .art-body .ee-h2, body.book .read .ee-h2, body.journal-page .read .ee-h2, body.lore-page .read .ee-h2 {
  display: block; margin: 0.85em 0 0.35em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: #8f8a82;
}
body.article .art-body .ee-h3, body.book .read .ee-h3, body.journal-page .read .ee-h3, body.lore-page .read .ee-h3 {
  display: block; margin: 0.7em 0 0.3em;
  font-family: "Iowan Old Style", Palatino, serif;
  font-size: 1.05em; font-style: italic; font-weight: 400; color: #f3eee6;
}
body.article .art-body .ee-caption, body.book .read .ee-caption, body.journal-page .read .ee-caption, body.lore-page .read .ee-caption {
  display: block; margin: 0.35em 0 0.6em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; letter-spacing: 0.08em; color: #8f8a82;
}
body.article .art-body .ee-quote, .read .ee-quote { display: block; margin: 0.5em 0; font-style: italic; color: #e4ddd2; }
body.article .art-body .ee-serif, .read .ee-serif { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; }
body.article .art-body .ee-sans, .read .ee-sans { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body.article .art-body .ee-size-sm, .read .ee-size-sm { font-size: 0.9em; }
body.article .art-body .ee-size-lg, .read .ee-size-lg { font-size: 1.3em; }
body.article .art-body img, body.book .read img, body.journal-page .read img { max-width: 100%; height: auto; }

/* Nav Enter: soft white glow (gentle; not sharp). */
.mast .topbar > .mark > a[href$="login.html"],
.mast .topbar > a[href$="login.html"],
body.article .mast .topbar > .mark > a[href$="login.html"],
#login-guest-exit,
.login-guest-exit {
  color: #ebe6de;
  text-shadow: 0 0 6px rgba(255,255,255,.14), 0 0 14px rgba(243,238,230,.08);
  transition: color .2s ease, text-shadow .2s ease;
}
.mast .topbar > .mark > a[href$="login.html"]:hover,
.mast .topbar > .mark > a[href$="login.html"]:focus-visible,
.mast .topbar > a[href$="login.html"]:hover,
.mast .topbar > a[href$="login.html"]:focus-visible,
body.article .mast .topbar > .mark > a[href$="login.html"]:hover,
body.article .mast .topbar > .mark > a[href$="login.html"]:focus-visible,
#login-guest-exit:hover,
#login-guest-exit:focus-visible,
.login-guest-exit:hover,
.login-guest-exit:focus-visible {
  color: #f7f3ec;
  outline: none;
  text-shadow: 0 0 8px rgba(255,255,255,.22), 0 0 18px rgba(243,238,230,.12);
}
body.login-guest .login-guest-exit:hover,
body.login-guest .login-guest-exit:focus-visible {
  color: #f7f3ec;
  text-shadow: 0 0 8px rgba(255,255,255,.22), 0 0 18px rgba(243,238,230,.12);
}

/* Phrase field stays fixed; Try again above it, Enter below it (both absolute). */
body.login-page #login-form > #login-err {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin: 0 0 12px;
  width: max-content;
  max-width: 90%;
  text-align: center;
  letter-spacing: .22em;
  font-size: 11px;
  color: #cfc6b8;
  z-index: 2;
  pointer-events: none;
}
body.login-page #login-form > #login-enter-actions {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin: 16px 0 0;
  z-index: 2;
}
body.login-page #login-form > #login-enter-actions[hidden] {
  display: none !important;
}
body.login-page #login-form > #login-code {
  position: relative;
  z-index: 1;
}

/* Welcome: hide Connect entirely when this browser already has their GitHub edit session. */
body.login-page.login-gh-connected #login-gh-actions,
body.login-page.login-gh-connected #login-github {
  display: none !important;
}

/* Article body text base = reading size (Medium), so typed/pasted lines without a class
   read the same as Lore; empty Lore paragraph keeps a line so the caret can land in it. */
body.article .art-sec { font-size: 17px; line-height: 1.65; }
body.article .art-life:empty { min-height: 1.65em; }
@media (min-width: 801px) { body.article .art-sec, body.article .art-sec .art-life { font-size: 14pt; line-height: 1.75; } }
@media (max-width: 800px) { body.article .art-sec { font-size: 16px; } }

/* Editor point sizes (toolbar Size menu). Work on inline spans AND whole paragraphs
   (p.ee-pt-*), so the line box shrinks too; the repeated class out-ranks the article,
   journal and lore paragraph rules (e.g. body.article .art-sec .art-life). */
.ee-pt-10, html body .ee-pt-10.ee-pt-10.ee-pt-10 { font-size: 10pt; }
.ee-pt-11, html body .ee-pt-11.ee-pt-11.ee-pt-11 { font-size: 11pt; }
.ee-pt-12, html body .ee-pt-12.ee-pt-12.ee-pt-12 { font-size: 12pt; }
.ee-pt-14, html body .ee-pt-14.ee-pt-14.ee-pt-14 { font-size: 14pt; }
.ee-pt-16, html body .ee-pt-16.ee-pt-16.ee-pt-16 { font-size: 16pt; }
.ee-pt-18, html body .ee-pt-18.ee-pt-18.ee-pt-18 { font-size: 18pt; }
.ee-pt-20, html body .ee-pt-20.ee-pt-20.ee-pt-20 { font-size: 20pt; }
.ee-pt-24, html body .ee-pt-24.ee-pt-24.ee-pt-24 { font-size: 24pt; }
html body .ee-serif.ee-serif.ee-serif { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; }
html body .ee-sans.ee-sans.ee-sans { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Editor Block menu: a Heading added inside a section reads like the section's own heading
   (spaced from the text above); a Subheading is a quiet serif line in the body face. */
body.article .art-sec > * + h2 { margin-top: 2.6em; }
body.article .art-sec h3 {
  margin: 1.6em 0 0.5em;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-size: 1.2em; font-weight: 400; line-height: 1.35; letter-spacing: 0.01em; color: #f3eee6;
}
body.article .art-sec > h3:first-child { margin-top: 0; }

/* Editor alignment (style bar left / center / right): whole-block classes on paragraphs,
   headings and captions; the repeated class out-ranks article, journal and lore rules. */
.ee-al-left, html body .ee-al-left.ee-al-left.ee-al-left { text-align: left; }
.ee-al-center, html body .ee-al-center.ee-al-center.ee-al-center { text-align: center; }
.ee-al-right, html body .ee-al-right.ee-al-right.ee-al-right { text-align: right; }