/* Entry, category and codex pages: the hero, the file card, the sheet, the rail, previous and next, the chips and the grid.
   DESIGN-truemage sections 6 to 8. The chrome stays dark; the sheet follows the visitor's light or dark setting.
   Quiet pass: hairlines, no fills. The one rough element: a crooked stamp, on the file card of an entry and on the crumb of an index. */
.ehero{position:relative;background:var(--art-black);overflow:hidden;border-bottom:1px solid var(--rule-d);display:flex;flex-direction:column}
.ehero .bg{order:-1;height:88px;overflow:hidden}
.ehero .bg img{width:100%;height:100%;object-fit:cover}
.ehero .bg .plate{height:100%;aspect-ratio:auto}
.ehero .bg .plate svg{width:30%;max-width:200px}
.ehero .in{position:relative;z-index:1;padding:var(--s-2) var(--pad-x) var(--s-5)}
.crumb{display:flex;flex-wrap:wrap;gap:0 var(--s-2);align-items:center}
.crumb a,.crumb span{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.crumb a{color:var(--ash);text-decoration:none}
.crumb a:hover{color:var(--bone);text-decoration:underline}
.crumb span[aria-hidden]{color:var(--line);min-width:0}
.crumb [aria-current]{color:var(--bone)}
/* an index page has no file card, so its stamp is the crumb's last word */
.ehero:not(:has(+ .wrap > .filecard)) .crumb [aria-current]{justify-content:center;padding:0 .7em;border:1px solid var(--bone-dim);border-bottom-width:3px;transform:rotate(-1deg);text-transform:uppercase;letter-spacing:.14em;min-height:32px;margin-block:6px}
.ehero h1{margin:var(--s-1) 0 0;font:600 var(--fs-h1)/1.08 var(--disp);letter-spacing:0}
.ehero .lede{margin:var(--s-3) 0 0;font:400 var(--fs-lede)/1.5 var(--serif);color:var(--bone-dim)}
@media (min-width:48rem){
  .ehero{min-height:18rem;flex-direction:row;align-items:flex-end}
  .ehero .bg{position:absolute;right:0;top:0;bottom:0;width:54%;height:auto;order:0}
  .ehero .in{width:100%;padding-block:var(--s-5) var(--s-6)}
  .ehero .in>*{max-width:min(44%, 34rem)}
  .ehero .in>.crumb{max-width:none}
}
/* the file card: the in-world form at the top of every entry, as ruled lines on the page */
.filecard{position:relative;margin-top:var(--s-6);color:var(--bone);display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-5);border-top:1px solid var(--line)}
.filecard::before{content:attr(data-tab);grid-column:1/-1;justify-self:start;margin:var(--s-3) 0 var(--s-2);font:700 var(--fs-micro)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);border:1px solid var(--bone-dim);border-bottom-width:3px;padding:.5em .8em;transform:rotate(-1.2deg);transform-origin:left center}
.filecard>div{padding:var(--s-2) 0;border-bottom:1px solid var(--rule-d)}
.filecard dt{font:700 var(--fs-micro)/1.2 var(--mono);letter-spacing:.06em;color:var(--ash)}
.filecard dd{margin:2px 0 0;font:500 1.0625rem/1.25 var(--disp);letter-spacing:.01em;display:flex;align-items:center;gap:var(--s-2)}
.filecard dd.st{font-style:italic;font-family:var(--serif);font-weight:400}
.filecard .w2{grid-column:1/-1}
@media (min-width:48rem){
  .filecard{grid-template-columns:repeat(3, 1fr)}
  .filecard .w2{grid-column:auto}
  .filecard .w3{grid-column:span 2}
  .filecard>div{padding:var(--s-3) 0}
}
/* the page: the sheet, and a rail */
.epage{display:grid;gap:var(--s-6);margin-top:var(--s-6)}
@media (min-width:64rem){.epage{grid-template-columns:var(--sheet) var(--rail);gap:var(--s-7);justify-content:start;align-items:start}.rail{position:sticky;top:calc(var(--mast-h) + 20px)}}
@media (min-width:118.75rem){.epage{grid-template-columns:14rem var(--sheet) var(--rail)}.rail{display:contents}.rail section{position:sticky;top:calc(var(--mast-h) + 20px);align-self:start;grid-row:1}.rail section+section{margin-top:0}.rail .rel-s{grid-column:3}.rail .toc-s{grid-column:1}.epage .sheet{grid-column:2;grid-row:1}}
.sheet{background:var(--paper);color:var(--ink);padding:var(--s-5) var(--pad-x) var(--s-6);position:relative}
.sheet .body{position:relative;max-width:var(--measure);font:400 var(--fs-read)/1.6 var(--serif)}
.sheet p{margin:0 0 1.2em}
.sheet h2{margin:1.8em 0 .5em;font:600 var(--fs-h2)/1.15 var(--disp);letter-spacing:0}
.sheet h2:first-child{margin-top:0}
.sheet h3{margin:1.5em 0 .4em;font:600 var(--fs-h3)/1.2 var(--disp);letter-spacing:0}
.sheet a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-paper);text-decoration-thickness:1px;text-underline-offset:.2em}
.sheet a:hover{text-decoration-color:currentColor}
.sheet blockquote{margin:1.5em 0;padding:var(--s-1) 0 var(--s-1) var(--s-4);border-left:1px solid var(--line-paper);font-style:italic}
.sheet blockquote p:last-child{margin-bottom:0}
.sheet blockquote cite{display:block;margin-top:.5em;font:700 var(--fs-micro)/1.3 var(--mono);letter-spacing:.06em;font-style:normal;color:var(--muted)}
.sheet ul,.sheet ol{margin:0 0 1.2em;padding-left:1.4em}
.sheet li{margin-bottom:.4em}
.sheet figure{margin:1.6em 0}
.sheet figure img{width:100%;height:auto;border:1px solid var(--line-paper)}
.sheet figcaption{margin-top:.5em;font:700 var(--fs-micro)/1.4 var(--mono);letter-spacing:.04em;color:var(--muted)}
.sheet .src{margin-top:2em;padding-top:var(--s-3);border-top:1px solid var(--line-paper);font:700 var(--fs-micro)/1.6 var(--mono);letter-spacing:.04em;color:var(--muted)}
.rail h2{margin:0 0 var(--s-2);font:700 var(--fs-micro)/1.2 var(--mono);letter-spacing:.06em;color:var(--ash)}
.rail .card.row{grid-template-columns:84px 1fr;padding-block:var(--s-2)}
.rail .card.row h3{font-size:1rem;margin-bottom:0}
.rail .card.row p{display:none}
.rail section+section{margin-top:var(--s-6)}
.toc a{display:flex;align-items:center;min-height:44px;min-width:44px;color:var(--bone-dim);text-decoration:none;font:700 var(--fs-micro)/1.3 var(--mono);letter-spacing:.04em;border-left:1px solid var(--line);padding-left:var(--s-3)}
.toc a:hover{color:var(--bone);border-color:var(--bone)}
.pn{display:grid;gap:0;margin-top:var(--s-6);border-top:1px solid var(--line)}
.pn a{display:grid;gap:2px;min-height:72px;padding:var(--s-3) 0;border-bottom:1px solid var(--rule-d);text-decoration:none;color:var(--bone)}
.pn a:hover b,.pn a:focus-visible b{text-decoration:underline;text-underline-offset:.2em}
.pn b{font:500 1.1875rem/1.2 var(--disp);letter-spacing:.01em}
.pn .nx{text-align:right}
@media (min-width:48rem){.pn{grid-template-columns:1fr 1fr;column-gap:var(--s-5)}.pn a:only-child.nx{grid-column:2}}

/* category and codex index: filter chips and the modular grid */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-5)}
.chips .mono{width:100%}
.chip{min-height:44px;min-width:44px;padding:0 var(--s-4);background:none;color:var(--bone-dim);border:1px solid var(--rule-d);font:700 var(--fs-micro)/1 var(--mono);letter-spacing:.06em;cursor:pointer;border-radius:0}
.chip:hover{border-color:var(--line);color:var(--bone)}
.chip[aria-pressed=true]{color:var(--bone);border-color:var(--bone);text-decoration:underline;text-underline-offset:.35em}
.cgrid{display:grid;gap:var(--s-5);margin-top:var(--s-4);grid-template-columns:repeat(auto-fill, minmax(min(20rem, 100%), 1fr))}
@media (max-width:47.99rem){.cgrid{gap:0}.cgrid .card{display:grid;grid-template-columns:96px 1fr;gap:var(--s-3);align-items:center;border-bottom:1px solid var(--rule-d);padding-block:var(--s-3)}
  .cgrid .card .im,.cgrid .card .plate{aspect-ratio:4/3}.cgrid .card .plate svg{width:46%;min-width:0}.cgrid .card .plate .w{font-size:1rem;padding:0 var(--s-1)}
  .cgrid .card .tx{padding:0;border:0}.cgrid .card h3{font-size:1.0625rem}
  .cgrid .card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9375rem}}
@media (min-width:48rem){.cgrid .card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
.finder{margin-top:var(--s-5);max-width:40rem}
.pages{display:flex;gap:var(--s-3);margin-top:var(--s-5)}
.pages a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 var(--s-3);color:var(--bone-dim);border:1px solid var(--rule-d);text-decoration:none;font:700 var(--fs-micro)/1 var(--mono);letter-spacing:.06em}
.pages a:hover{border-color:var(--line);color:var(--bone)}
.pages a[aria-current=page]{color:var(--bone);border-color:var(--bone);text-decoration:underline;text-underline-offset:.35em}
.elsewhere{padding-top:var(--s-6)}
.lat.three{grid-template-columns:1fr 1fr}
.lat.three .card:first-child{grid-column:auto}
.lat.three .card p{display:block}
@media (min-width:56rem){.lat.three{grid-template-columns:repeat(3, 1fr)}.lat.three .card,.lat.three .card:first-child{grid-column:auto}}
/* plain pages: letter, colophon, 404 */
.plain{padding-block:var(--s-6) var(--s-6);max-width:48rem}
.plain h2{margin:var(--s-6) 0 var(--s-2);font:500 var(--fs-h2)/1.2 var(--disp);letter-spacing:0}
.plain p{margin:0 0 var(--s-3);color:var(--bone-dim);font-size:1rem;max-width:60ch}
.plain .cred p{color:var(--bone)}
.plain a{color:var(--bone)}
.plain a:hover{color:var(--crimson-2)}
.nf{padding-block:var(--s-8);max-width:40rem}
.nf h1{margin:0;font:600 var(--fs-h1)/1.08 var(--disp)}
.nf p{color:var(--bone-dim);font-size:1.0625rem}
@media print{.ehero .bg,.ehero .in .lede{display:none}.ehero{border:0;background:#fff}.ehero h1{color:#000}.epage{display:block}.sheet{background:#fff;color:#000;padding:0}.filecard{border:2px solid #000;background:#fff;color:#000}.sheet a{color:#000}}
/* object-position classes: the CSP forbids inline style, so art data names one of these */
.op-lt{object-position:left top}.op-r{object-position:right center}.op-c12{object-position:50% 12%}.op-c18{object-position:50% 18%}.op-c20{object-position:50% 20%}.op-c25{object-position:50% 25%}