/* atlas_library.css - the full Atlas in the house's own look (Claude for Codex, 2026-10-11).
   Load AFTER /assets/site.css. Night, vellum, one old gold (DESIGN.md). It styles:
   1. the library chrome (Codex's page(): nav, h1, .notice, .grid, .card, .point, .sources, footer);
   2. the hub dossiers' own classes, so their blocks keep their shape: .abstract, .vitals, .prose,
      .pull, .timeline, .ledger/.col, .orbit, .assess, .gloss, .fields-h/.field, table.cmp, .research-point;
   3. the deck (suits, pips, portraits, re-check stamps), the field files, the Rings and the Web.
   Nothing folds (no drop-downs). AA contrast for anything a reader must read: --ink, or --dim at the least. */

:root { --gold-dim: #8f7d55; --red: #b9715f; --hold: rgba(201,179,126,.05); }

/* ---- 1. the library chrome ------------------------------------------------------------------- */
body.lib main, main.lib { max-width: 66rem; margin: 0 auto; padding: 0 16px 40px; }
main.lib > nav[aria-label="Breadcrumb"], body.lib main > nav[aria-label="Breadcrumb"] {
  display: flex; flex-wrap: wrap; gap: 6px 18px; padding: calc(14px + env(safe-area-inset-top)) 0 14px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
main.lib > nav a, body.lib main > nav a { color: var(--dim); text-decoration: none; }
main.lib > nav a:hover, body.lib main > nav a:hover { color: var(--ink); }
main.lib > h1, body.lib main > h1 { font-weight: 300; font-size: clamp(2rem, 6.4vw, 3.1rem); line-height: 1.15; margin: 4vh 0 16px; text-align: center; text-wrap: balance; }
main.lib h2 { font-family: var(--sc); font-weight: 400; letter-spacing: .2em; font-size: 1.2rem; color: var(--gold); margin: 0 0 14px; }
main.lib section { border-top: 1px solid var(--line); padding: 30px 0 26px; scroll-margin-top: 16px; }
main.lib p { font-size: 1.12rem; line-height: 1.62; font-weight: 300; }
main.lib p + p { margin-top: 10px; }
main.lib a { text-underline-offset: 4px; text-decoration-color: var(--faint); }
main.lib a:hover { text-decoration-color: var(--gold); }
main.lib .notice { margin: 20px 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--gold);
  background: var(--hold); color: var(--ink); font-size: 1.05rem; }
main.lib .quiet { color: var(--dim); font-style: italic; }
main.lib small, main.lib .meta { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
main.lib .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 14px; margin: 18px 0; }
main.lib .card { border: 1px solid var(--faint); border-top: 2px solid var(--gold); background: var(--card); padding: 18px; overflow-wrap: anywhere; }
main.lib .card h2, main.lib .card h3 { margin: 6px 0 8px; font-family: var(--serif); letter-spacing: 0; color: var(--ink); font-weight: 400; font-size: 1.3rem; }
main.lib .card h2 a, main.lib .card h3 a { color: var(--ink); text-decoration: none; }
main.lib .card p { font-size: 1.02rem; line-height: 1.5; }
main.lib .point { margin: 18px 0; }
main.lib .point h3 { font-family: var(--sc); font-weight: 400; letter-spacing: .14em; font-size: .98rem; color: var(--gold); margin-bottom: 4px; }
main.lib .sources, main.lib .srcs { list-style: none; margin: 10px 0 0; padding: 0; font-size: .95rem; line-height: 1.45; }
main.lib .sources li, main.lib .srcs li { margin: 4px 0; padding-left: 14px; position: relative; overflow-wrap: anywhere; }
main.lib .sources li::before, main.lib .srcs li::before { content: "·"; position: absolute; left: 2px; color: var(--gold); }
main.lib .sources a, main.lib .srcs a { color: var(--dim); }
main.lib .sources a:hover, main.lib .srcs a:hover { color: var(--ink); }
main.lib input[type=search] { width: 100%; background: #0b0b0a; color: var(--ink); border: 1px solid var(--faint); padding: 12px 14px; font: 400 1.12rem/1.4 var(--serif); }
main.lib input[type=search]:focus { outline: none; border-color: var(--gold); }
main.lib label { font-family: var(--sc); letter-spacing: .2em; font-size: .85rem; color: var(--dim); display: block; margin: 18px 0 6px; }
main.lib > footer, body.lib footer.hand { margin-top: 36px; padding: 22px 0; border-top: 1px solid var(--line); text-align: center;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); line-height: 1.8; }
[hidden] { display: none !important; }

/* contents strip: every section of a dossier, laid open, numbered */
main.lib nav.contents { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 18px 0 8px; }
main.lib nav.contents a { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  text-decoration: none; border: 1px solid var(--line); padding: 7px 10px; }
main.lib nav.contents a b { color: var(--gold-dim); font-weight: 400; margin-right: 6px; }
main.lib nav.contents a:hover, main.lib nav.contents a:focus-visible { color: var(--ink); border-color: var(--gold); outline: none; }

/* ---- the dossier head (class bar, kicker, native name, creed, Executive Read) ------------------- */
.dhead { text-align: center; margin: 2vh 0 10px; }
.dhead .classbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; text-align: left;
  border: 1px solid var(--line); border-left: 2px solid var(--gold); padding: 8px 12px; margin-bottom: 22px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.dhead .classbar span + span { color: var(--dim); }
.dhead .kicker { display: block; }
.dhead .native { color: var(--dim); font-style: italic; font-size: 1.15rem; margin-top: 10px; }
.dhead .creed { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; color: var(--gold); margin-top: 10px; line-height: 1.7; text-transform: uppercase; }
.dhead .counts { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--dim); margin-top: 14px; text-transform: uppercase; }
.abstract { margin: 22px auto 0; max-width: 46rem; text-align: left; padding: 16px 18px; border: 1px solid var(--line); border-left: 2px solid var(--gold);
  background: var(--hold); font-size: 1.12rem; line-height: 1.62; font-weight: 300; }
.abstract .lbl { display: block; font-family: var(--sc); letter-spacing: .2em; color: var(--gold); font-size: .9rem; margin-bottom: 6px; }
.abstract b { font-weight: 500; }

/* ---- 2. the hub dossiers' own classes ----------------------------------------------------------- */
main.lib b, main.lib strong { font-weight: 500; color: var(--ink); }
main.lib em { font-style: italic; }
main.lib code { font-family: var(--mono); font-size: .85em; color: var(--dim); }
main.lib ul, main.lib ol { margin: 8px 0 14px; padding-left: 1.2em; }
main.lib li { font-size: 1.08rem; line-height: 1.55; font-weight: 300; margin: 6px 0; }
main.lib section h3 { font-family: var(--sc); font-weight: 400; letter-spacing: .14em; font-size: 1.02rem; color: var(--gold); margin: 22px 0 8px; }
main.lib section h4 { font-family: var(--mono); font-weight: 400; letter-spacing: .14em; font-size: .72rem; color: var(--gold); text-transform: uppercase; margin: 18px 0 6px; }
.prose p.lead::first-letter, p.lead::first-letter { float: left; font-size: 3.1rem; line-height: .82; color: var(--gold); padding: 6px 8px 0 0; font-weight: 400; }

.vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 10px; margin: 6px 0; }
.vitals.tally { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
.vitals.tally .vital { padding: 10px 8px; }
.vital { border: 1px solid var(--line); background: var(--card); padding: 12px 14px; }
.vital .k { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.vital .v { font-size: 1.06rem; line-height: 1.45; margin-top: 4px; }
.vital .v small { display: block; font-family: var(--serif); letter-spacing: 0; text-transform: none; font-size: .95rem; color: var(--dim); margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 4px 8px; }

.pull, main.lib blockquote { margin: 18px 0; padding: 14px 18px; border-left: 2px solid var(--gold); background: var(--hold); font-style: italic; font-size: 1.15rem; line-height: 1.6; }
.pull cite, main.lib blockquote cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.timeline { margin: 8px 0; border-left: 1px solid var(--faint); }
.tl { position: relative; padding: 2px 0 14px 20px; }
.tl::before { content: ""; position: absolute; left: -4px; top: 9px; width: 7px; height: 7px; background: var(--faint); transform: rotate(45deg); }
.tl.g::before { background: var(--gold); }
.tl.b::before { background: var(--red); }
.tl .yr { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; color: var(--gold); }
.tl .ev { font-size: 1.06rem; line-height: 1.5; margin-top: 2px; }

.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
.col { border: 1px solid var(--line); background: var(--card); padding: 14px 16px; border-top: 2px solid var(--faint); }
.col.help, .col.us { border-top-color: var(--gold); }
.col.hurt { border-top-color: var(--red); }
.col.them { border-top-color: var(--gold-dim); }
.col .ch { font-family: var(--sc); letter-spacing: .16em; font-size: .95rem; margin-bottom: 8px; color: var(--gold); }
.col.hurt .ch { color: var(--red); }
.col ul { list-style: none; padding: 0; margin: 0; }
.col li { position: relative; padding-left: 16px; font-size: 1.04rem; }
.col.help li::before, .col.us li::before { content: "+"; position: absolute; left: 0; color: var(--gold); }
.col.hurt li::before { content: "\2212"; position: absolute; left: 0; color: var(--red); }
.col.them li::before { content: "\00b7"; position: absolute; left: 2px; color: var(--gold-dim); }

.orbit { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.orbit-row { border: 1px solid var(--line); border-left: 2px solid var(--faint); background: var(--card); padding: 12px 16px; }
.orbit-row.up { border-left-color: var(--gold); } .orbit-row.mid { border-left-color: var(--gold-dim); }
.orbit-row .lvl { font-family: var(--sc); letter-spacing: .16em; font-size: .92rem; color: var(--gold); margin-bottom: 6px; }
.orbit-row.down .lvl { color: var(--dim); }

.assess { margin: 14px 0; border: 1px solid var(--gold-dim); background: var(--hold); padding: 14px 16px; }
.assess.warn { border-color: #5a2a22; background: rgba(122,52,40,.08); }
.assess .h { font-family: var(--sc); letter-spacing: .16em; font-size: .95rem; color: var(--gold); margin-bottom: 6px; }
.assess.warn .h { color: var(--red); }

.gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 10px 22px; margin: 8px 0; }
.gloss dl { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 0; }
.gloss dt { font-family: var(--sc); letter-spacing: .08em; color: var(--gold); font-size: 1.02rem; }
.gloss dd { font-size: 1.02rem; line-height: 1.5; margin: 2px 0 0; font-weight: 300; }

.fields-h { text-align: center; border-top: 1px solid var(--gold-dim); padding-top: 18px; margin: 6px 0 10px; }
.fields-h .ft { font-family: var(--sc); letter-spacing: .3em; color: var(--gold); font-size: 1.05rem; }
.fields-h .fd { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
.field { border: 1px solid var(--line); background: var(--card); padding: 16px 18px; margin: 14px 0; }
.field .fh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.field .fi { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; color: var(--gold); }
.field .fn { font-family: var(--sc); letter-spacing: .08em; font-size: 1.15rem; }
.field .fs { color: var(--dim); font-style: italic; }
.field .take { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--gold); background: var(--hold); }

.cmp-wrap { overflow-x: auto; margin: 10px 0; }
main.lib table { border-collapse: collapse; font-size: 1rem; min-width: 32rem; }
main.lib th, main.lib td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; line-height: 1.4; }
main.lib th { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.cmp-note, .cmp-hint { color: var(--dim); font-style: italic; font-size: 1rem; }

.research-point { padding: 12px 0 14px; border-bottom: 1px dashed var(--line); }
.research-point h3 { margin-top: 4px !important; }
.source, .source.muted, p.muted { color: var(--dim); font-size: .95rem !important; overflow-wrap: anywhere; }
.badge { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 4px 8px; }
.rules { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--hold); font-size: 1.04rem; line-height: 1.6; }
.rules .lbl { display: block; font-family: var(--sc); letter-spacing: .18em; color: var(--gold); margin-bottom: 6px; }
.rules .stamp, .stamp { color: var(--dim); }
.deck-title { font-family: var(--serif) !important; font-weight: 300 !important; font-size: 1.8rem !important; letter-spacing: 0 !important; color: var(--ink) !important; margin: 6px 0 2px !important; }
.sub { color: var(--dim); font-style: italic; }
.amen { display: block; margin-top: 8px; font-family: var(--sc); letter-spacing: .2em; color: var(--gold); }
.mk-star { color: var(--gold); } .mk-warn { color: var(--red); }

/* ---- 3. the deck --------------------------------------------------------------------------------- */
.deck-head { text-align: center; margin-bottom: 10px; }
.suit-h { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 12px; border-bottom: 1px solid var(--faint); padding-bottom: 8px; flex-wrap: wrap; }
.suit-h .g { font-size: 1.4rem; color: var(--ink); } .suit-h .g.red { color: var(--red); }
.suit-h .t { font-family: var(--sc); letter-spacing: .22em; color: var(--gold); font-size: 1.1rem; }
.suit-h .d { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 14px; }
.lcard { position: relative; border: 1px solid var(--faint); background: var(--card); padding: 16px 16px 14px; overflow-wrap: anywhere; scroll-margin-top: 16px; }
.lcard:target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.lcard .pip { position: absolute; top: 12px; right: 14px; font-family: var(--mono); font-size: .9rem; color: var(--ink); }
.lcard.red .pip { color: var(--red); }
.lcard figure { margin: 0 0 12px; display: flex; gap: 12px; align-items: flex-end; }
.lcard figure img { width: 84px; height: 104px; object-fit: cover; border: 1px solid var(--faint); filter: grayscale(.25) contrast(1.02); flex: none; background: #111; }
.lcard figure figcaption { font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; color: var(--dim); line-height: 1.5; }
.lcard figure figcaption a { color: var(--dim); }
.lcard .mono { width: 84px; height: 104px; display: grid; place-items: center; border: 1px solid var(--line); font-family: var(--sc); font-size: 1.6rem; color: var(--gold-dim); flex: none; }
.lcard h3 { font-family: var(--serif) !important; font-size: 1.3rem !important; letter-spacing: 0 !important; color: var(--ink) !important; margin: 0 40px 4px 0 !important; font-weight: 400 !important; }
.lcard .meta { display: block; margin-bottom: 8px; line-height: 1.5; }
.lcard .txt { font-size: 1.02rem !important; line-height: 1.55 !important; }
.lcard .stamp { display: block; margin-top: 10px; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.lcard .stamp.changed { color: var(--gold); } .lcard .stamp.unconfirmed { color: var(--red); }
.lcard .recheck { margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--red); background: rgba(122,52,40,.07); font-size: .98rem; line-height: 1.5; }
.lcard .file { display: inline-block; margin-top: 10px; font-family: var(--sc); letter-spacing: .14em; font-size: .9rem; color: var(--gold); text-decoration: none; }
.lcard .file:hover { text-decoration: underline; }
.deck-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); text-align: center; font-size: 1.02rem; line-height: 1.6; }

/* ---- the field files ------------------------------------------------------------------------------ */
.pf-head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; margin: 2vh 0 12px; }
.pf-head figure { margin: 0; width: 160px; }
.pf-head figure img { width: 160px; height: 200px; object-fit: cover; border: 1px solid var(--faint); }
.pf-head figcaption { font-family: var(--mono); font-size: .58rem; letter-spacing: .06em; color: var(--dim); margin-top: 6px; line-height: 1.5; }
.pf-head figcaption a { color: var(--dim); }
.pf-head .legal { color: var(--dim); font-style: italic; }
.pf-head .standing { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--gold); margin-top: 10px; line-height: 1.6; }
.pf-sec dl { margin: 0; }
.pf-sec .pt { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 4px 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pf-sec .pt dt { font-family: var(--sc); letter-spacing: .08em; color: var(--gold); font-size: 1rem; }
.pf-sec .pt dd { margin: 0; font-size: 1.06rem; line-height: 1.55; font-weight: 300; }
.flag { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 1px 6px; vertical-align: middle; }
.flag.unverified { color: var(--red); border-color: #5a2a22; } .flag.star { color: var(--gold); }
.pins { list-style: none; padding: 0; counter-reset: pin; }
.pins li { counter-increment: pin; padding: 8px 0 8px 34px; position: relative; border-bottom: 1px solid var(--line); }
.pins li::before { content: counter(pin); position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--mono); font-size: .7rem; display: grid; place-items: center; }
.pins .pl { font-family: var(--sc); letter-spacing: .08em; } .pins .yrs { font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-left: 8px; }

/* ---- the Rings and the Web ---------------------------------------------------------------------- */
.ringmap { margin: 10px 0 20px; }
.ringmap svg { width: 100%; height: auto; max-height: 80vh; }
.ringmap .orbit-c { fill: none; stroke: var(--faint); } .ringmap .orbit-c.faint { stroke: var(--line); }
.ringmap .tie { fill: none; stroke: var(--gold-dim); stroke-width: 1; opacity: .45; }
.ringmap a circle { fill: var(--card); stroke: var(--dim); stroke-width: 1.2; }
.ringmap a.housed circle { stroke: var(--gold); }
.ringmap a:hover circle, .ringmap a:focus circle { fill: #1a1813; stroke: var(--ink); }
.ringmap .num { font-family: var(--mono); font-size: 11px; fill: var(--ink); }
.ringmap .lab { font-family: var(--serif); font-size: 15px; fill: var(--dim); }
.ringmap .core { font-size: 30px; fill: var(--gold); } .ringmap .core-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; fill: var(--dim); }
.ringmap figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.body-fields .pt { grid-template-columns: minmax(9rem, 13rem) 1fr; }
.tierow { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tierow a, .tierow span { font-size: 1rem; border: 1px solid var(--line); padding: 4px 10px; text-decoration: none; color: var(--ink); }
.tierow a:hover { border-color: var(--gold); }
.tierow .file-mark { color: var(--gold); margin-left: 4px; }

@media (max-width: 640px) {
  .ledger { grid-template-columns: 1fr; }
  .pf-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pf-sec .pt { grid-template-columns: 1fr; }
  .lcard figure img, .lcard .mono { width: 72px; height: 90px; }
}
@media print {
  .grain, nav.contents, main.lib > nav, .topbar { display: none !important; }
  body, main.lib { background: #fff !important; color: #000 !important; }
}

/* 10-11 David: "it won't open when I click on the tiles" -- the whole tile is the link, not only its title */
main.lib .card { position: relative; cursor: pointer; transition: border-color .3s, background .3s; }
main.lib .card h3 a::after, main.lib .card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
main.lib .card:hover, main.lib .card:focus-within { border-color: var(--gold); background: #13120f; }
main.lib .card a:focus-visible { outline: none; }