/* The codex (site/codex/): on top of main.css and guides.css, the same paper cards, ink sections and red stamps. */
.cx-hero .lede{max-width:62ch}
.cx-quick{margin-top:6px}
.cx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-file{font-family:var(--f-type);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--red-d);margin:0}
.cx-file b{color:var(--ink);background:var(--yellow);padding:0 6px}
.cx-tag{font-family:var(--f-slab);font-size:clamp(17px,.5vw + 14px,21px);line-height:1.3;margin:0}
.cx-q{margin:0;padding:10px 14px;border-left:5px solid var(--red-d);background:rgba(26,20,16,.06)}
.cx-q p{margin:0;font-family:var(--f-type);font-size:15px;line-height:1.5}
.cx-q footer{margin-top:6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.cx-stamp{justify-self:start;margin:4px 0 0;font-family:var(--f-stencil);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-d);border:3px solid var(--red-d);padding:3px 10px;transform:rotate(-3deg);opacity:.9}

/* foe cards: the home page's 256 px portraits */
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,26px)}
.cx-card{display:grid;grid-template-rows:auto 1fr;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:var(--hard);min-width:0}
.cx-card.is-boss{border-color:var(--red-d);box-shadow:8px 8px 0 var(--red-d)}
.cx-card__pic{width:100%;aspect-ratio:1;object-fit:contain;background:radial-gradient(circle at 50% 40%,#fbefd3,var(--paper) 70%);border-bottom:4px solid var(--ink)}
.cx-card__text{display:grid;gap:10px;align-content:start;padding:clamp(14px,1.6vw,20px);min-width:0}
.cx-card h3{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2vw,34px);letter-spacing:.04em;line-height:1;text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.cx-card p{margin:0;font-size:16px;line-height:1.55}
.cx-chapter-foes{display:grid;gap:16px;margin-bottom:clamp(28px,4vh,44px)}
.cx-chhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.cx-chhead a{color:var(--red-d);text-decoration-thickness:2px;text-underline-offset:3px}
.cx-chhead span{font-family:var(--f-body);font-size:16px;letter-spacing:.04em;text-transform:none;opacity:.8}

/* the guns */
.cx-guns{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:clamp(16px,2vw,26px)}
.cx-gun{display:grid;gap:12px;align-content:start;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:var(--hard);padding:clamp(16px,2vw,26px);min-width:0}
.cx-gun header{display:grid;gap:6px}
.cx-gun h3{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,2.6vw,44px);letter-spacing:.04em;line-height:1;text-transform:uppercase;margin:0}
.cx-gun p{margin:0;font-size:16px;line-height:1.6}

/* the loop and the gear */
.cx-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px;margin-bottom:16px}
.cx-tool{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;border:3px solid var(--paper-3);padding:14px;background:rgba(243,231,204,.06)}
.cx-tools--paper .cx-tool{border-color:var(--ink);background:var(--cream);color:var(--ink)}
.cx-tool img{width:64px;height:64px;object-fit:contain}
.cx-tool h3{font-family:var(--f-display);font-weight:400;font-size:26px;letter-spacing:.04em;line-height:1.05;text-transform:uppercase;margin:0 0 6px}
.cx-tool h3 small{display:block;font-family:var(--f-type);font-size:13px;letter-spacing:.06em;opacity:.8}
.cx-tool p{margin:0;font-size:16px;line-height:1.55}
.cx-key{display:grid;place-items:center;width:64px;height:64px;font-family:var(--f-slab);font-size:30px;color:var(--ink);background:var(--yellow);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}

/* the chapters: the home page's posters */
.cx-chs{display:grid;gap:clamp(18px,2.4vw,30px)}
.cx-ch{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(16px,2.4vw,30px);align-items:start;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:var(--hard);padding:clamp(14px,1.8vw,22px)}
.cx-ch img{width:100%;height:auto;border:3px solid var(--ink)}
.cx-ch__text{display:grid;gap:10px;min-width:0}
.cx-ch h3{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,2.6vw,46px);letter-spacing:.04em;line-height:1;text-transform:uppercase;margin:0}
.cx-ch p{margin:0;font-size:16px;line-height:1.6;max-width:70ch}
.cx-boss{font-family:var(--f-slab)}
.cx-boss a{color:var(--red-d);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:640px){.cx-ch{grid-template-columns:minmax(0,1fr)}.cx-ch img{max-width:260px}}

/* the cast: the press kit's cards */
.cx-casts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:clamp(16px,2vw,26px)}
.cx-cast{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:16px;align-items:start;background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:var(--hard);padding:clamp(14px,1.6vw,20px);min-width:0}
.cx-cast img{width:100%;height:auto;border:3px solid var(--ink)}
.cx-cast__text{display:grid;gap:10px;min-width:0}
.cx-cast h3{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,2.2vw,38px);letter-spacing:.04em;line-height:1;text-transform:uppercase;margin:0}
.cx-cast p{margin:0;font-size:16px;line-height:1.55}
.cx-cast a{color:var(--red-d)}
@media (max-width:520px){.cx-cast{grid-template-columns:minmax(0,1fr)}.cx-cast img{max-width:200px}}

/* the codex nav: many links, so it scrolls sideways on small screens instead of wrapping */
.cx-page .nav__links a[aria-current="page"]{color:var(--yellow)}