/* BL Guide: the anomaly library (/anomalies) and the creature pages (/anomalies/<name>).
   Loaded after style.css and home.css, which carry the reset, the fonts, the rail, the HUD tokens and the footer.
   Assembled on 20 October 2026 from the validated mockups (library A, split stage B). */

/* ---------- shared: top bar, title block, chips, boxes ---------- */
.page { background: var(--h-bg); }
.wrap { padding: 0 clamp(1rem, 2.6vw, 2.25rem) 3.5rem; }

/* top bar: menu, breadcrumb, the date the page was checked */
.top { position: sticky; top: 0; z-index: 35; display: none; align-items: center; gap: .8rem; height: 3.25rem; padding: 0 1rem; background: oklch(0.10 0.004 250 / .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--h-line); }
/* no top bar on desktop: the rail shows where you are. On phones: menu, logo, section */
.top .burger3 { display: inline-flex; color: var(--h-ink); }
.toplogo img { display: block; height: 1.6rem; width: auto; }
.topsec { margin-left: auto; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); }
.sb .back { align-self: flex-start; font-size: .8125rem; font-weight: 600; color: var(--h-ink3); }
.sb .back:hover { color: var(--h-ink); }

/* title block: the one H1 and the short answer, first in the HTML */
.title { padding: 2rem 0 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 2rem; align-items: end; border-bottom: 1px solid var(--h-line); }
.title h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: .98; }
.title .answer { grid-column: 1; margin: .3rem 0 0; max-width: 68ch; font-size: 1.0625rem; line-height: 1.6; color: oklch(0.88 0 0); }
.stats { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(2, auto); gap: 1px; background: var(--h-line); border: 1px solid var(--h-line); }
.stats div { background: oklch(0.13 0.005 250); padding: .65rem .9rem; min-width: 9rem; }
.stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--h-ink); line-height: 1.1; }
.stats small { font-size: .75rem; color: var(--h-ink3); line-height: 1.3; display: block; }

/* chips: role and filters */
.role { display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .14rem .4rem; border: 1px solid; white-space: nowrap; }
.role--play { background: oklch(0.60 0.20 28); border-color: oklch(0.60 0.20 28); color: oklch(0.99 0 0); }
.role--ai { border-color: oklch(0.66 0.17 28); color: oklch(0.78 0.13 28); }
.role--tbd { border-color: var(--h-line-hi); color: var(--h-ink2); }
.src { font-size: .75rem; color: var(--h-ink3); }
.filters { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.filters button { padding: .45rem .8rem; border: 1px solid var(--h-line); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink2); }
.filters button:hover { color: var(--h-ink); border-color: var(--h-line-hi); }
.filters button[aria-pressed="true"] { background: var(--h-ink); border-color: var(--h-ink); color: oklch(0.12 0 0); }
.filters .n { margin-left: .35rem; opacity: .6; }
.find { display: flex; align-items: center; gap: .5rem; padding: .42rem .65rem; border: 1px solid var(--h-line); color: var(--h-ink3); min-width: 12rem; }
.find input { flex: 1; min-width: 0; background: none; border: 0; color: var(--h-ink); font: inherit; font-size: .875rem; }
.find input:focus { outline: none; }
.find:focus-within { border-color: var(--h-line-hi); }

/* no published picture: say so instead of inventing one */
.nopic { display: grid; place-items: center; background: repeating-linear-gradient(135deg, oklch(0.16 0.005 250) 0 10px, oklch(0.145 0.005 250) 10px 20px); color: var(--h-ink3); font-size: .75rem; text-align: center; }

/* section heads */
.sh2 { display: flex; align-items: baseline; gap: .8rem; margin: 3rem 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--h-line); }
.sh2 h2 { font-size: 1.35rem; letter-spacing: -0.02em; }
.sh2 p { margin: 0; font-size: .875rem; color: var(--h-ink3); }

/* how anomalies play, AI layer, unknowns, sources */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--h-line); border: 1px solid var(--h-line); }
.how div { background: var(--h-panel); padding: 1rem 1.1rem 1.1rem; }
.how b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.1rem; color: var(--h-ink); margin-bottom: .35rem; }
.how p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--h-ink3); }
.notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.box { border: 1px solid var(--h-line); background: var(--h-panel); padding: 1rem 1.1rem; }
.box h3 { font-size: .95rem; margin-bottom: .6rem; }
.box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.box li { font-size: .875rem; line-height: 1.5; color: var(--h-ink2); padding-left: 1rem; position: relative; }
.box li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; background: var(--h-ink3); }
.unk li { display: flex; justify-content: space-between; gap: 1rem; padding-left: 0; }
.unk li::before { display: none; }
.unk li i { flex: none; width: 5.5rem; height: .9rem; margin-top: .2rem; background: oklch(0.06 0 0); border: 1px solid var(--h-line); }
.srcs { margin-top: 1.25rem; font-size: .8125rem; color: var(--h-ink3); line-height: 1.6; }
.srcs b { color: var(--h-ink2); font-weight: 600; }

/* video link, thumbnail and play mark, opens YouTube */
.vid { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .5rem; border: 1px solid var(--h-line); position: relative; }
.vid img { width: 7.5rem; aspect-ratio: 16 / 9; object-fit: cover; }
.vid__play { position: absolute; left: calc(.5rem + 3.75rem - .8rem); top: 50%; translate: 0 -50%; width: 1.6rem; height: 1.6rem; background: oklch(0.10 0 0 / .8); clip-path: polygon(30% 22%, 30% 78%, 78% 50%); }
.vid__t b { display: block; font-size: .8125rem; color: var(--h-ink); font-weight: 600; line-height: 1.35; }
.vid__t small { font-size: .75rem; color: var(--h-ink3); }
.vid:hover { border-color: var(--h-line-hi); }

@media (max-width: 64rem) { .top { display: flex; } }
@media (max-width: 56rem) {
  .title { grid-template-columns: 1fr; }
  .stats { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div { min-width: 0; }
  .how, .notes { grid-template-columns: 1fr; }
}
@media (max-width: 46rem) {
  .title .answer { font-size: 1rem; }
  .wrap { padding: 0 1rem 3rem; }
}

/* ---------- the library ---------- */
/* A · BESTIARY: every creature is a picture first. Playable ones take twice the room. Every card is a link to the creature's own page, so every look is a page view */
.bar2 { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin: 1.4rem 0 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); grid-auto-flow: dense; gap: .6rem; }
.beast2 { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--h-line); background: var(--h-tile); text-align: left; color: var(--h-ink); transition: border-color 160ms ease; }
.beast2.big { grid-column: span 2; aspect-ratio: auto; }
.beast2 > img, .beast2 > .nopic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 600ms cubic-bezier(.16,1,.3,1); }
.beast2 > .nopic span { position: absolute; top: .8rem; left: .8rem; }
.beast2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, oklch(0.08 0.004 250 / .95)); pointer-events: none; }
.beast2:hover { border-color: var(--h-line-hi); }
.beast2:hover > img { scale: 1.04; }
.beast2 .b { position: relative; z-index: 2; padding: .9rem; display: grid; gap: .3rem; justify-items: start; }
.beast2 h3 { font-size: 1.2rem; line-height: 1; }
.beast2.big h3 { font-size: 1.8rem; }
.beast2 p { margin: 0; font-size: .8125rem; line-height: 1.45; color: oklch(0.85 0 0); }
.beast2 .m { font-size: .75rem; color: var(--h-ink3); }
.legend2 { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--h-ink3); margin: -.4rem 0 .9rem; }
.empty { padding: 2rem; border: 1px dashed var(--h-line-hi); color: var(--h-ink3); text-align: center; }

@media (max-width: 46rem) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .beast2.big { aspect-ratio: 16 / 11; }
  .beast2 p { display: none; }
  .beast2.big p { display: block; }
  .beast2 h3 { font-size: 1rem; }
  .bar2 .find { width: 100%; }
  .filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .filters button { flex: none; }
}

/* ---------- a creature page ---------- */
.k { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); }
.lead2 { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: oklch(0.88 0 0); max-width: 62ch; }
.btn-play { display: inline-flex; align-items: center; gap: .65rem; padding: .85rem 1.2rem; background: var(--h-ink); color: oklch(0.12 0 0); font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
.btn-play:hover { background: oklch(0.88 0 0); }
.btn-play i { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.btn-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; border: 1px solid oklch(1 0 0 / .45); color: var(--h-ink); font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.btn-ghost:hover { background: oklch(1 0 0 / .1); }
.capkeys { display: flex; flex-wrap: wrap; gap: .5rem; }
.capkeys div { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem .45rem .45rem; border: 1px solid var(--h-line); background: oklch(0.13 0.005 250); font-size: .8125rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--h-ink); }
.capkeys kbd { display: grid; place-items: center; min-width: 2.4rem; height: 2rem; padding: 0 .4rem; border: 1px solid oklch(1 0 0 / .5); border-bottom-width: 3px; font-family: var(--body); font-size: .8125rem; font-weight: 700; color: var(--h-ink); background: oklch(0.08 0 0 / .6); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips span { padding: .25rem .55rem; border: 1px solid var(--h-line); font-size: .8125rem; color: var(--h-ink2); }
.redact { display: grid; gap: .45rem; }
.redact div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .8125rem; color: var(--h-ink2); }
.redact i { width: 6rem; height: .9rem; background: oklch(0.06 0 0); border: 1px solid var(--h-line); }
.tlh { margin: 0; padding: 0 0 0 1rem; list-style: none; display: grid; gap: .5rem; border-left: 1px solid var(--h-line-hi); }
.tlh li { position: relative; font-size: .875rem; color: var(--h-ink2); line-height: 1.45; }
.tlh li::before { content: ""; position: absolute; left: calc(-1rem - 4px); top: .45em; width: 7px; height: 7px; background: var(--h-bg); border: 1.5px solid var(--h-ink3); }
.tlh li:last-child::before { background: var(--mark); border-color: var(--mark); }
.tlh b { display: block; font-size: .75rem; color: var(--h-ink3); font-weight: 600; }
.box2 { border: 1px solid var(--h-line); background: var(--h-panel); padding: 1rem 1.1rem; }
.box2 > .k { display: block; margin-bottom: .6rem; }
.dl2 { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .8125rem; }
.dl2 dt { color: var(--h-ink3); }
.dl2 dd { margin: 0; text-align: right; color: var(--h-ink); font-weight: 600; }
.h2b { font-size: 1.15rem; margin: 2.2rem 0 .8rem; padding-bottom: .55rem; border-bottom: 1px solid var(--h-line); }
.nextrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 2.5rem; }
.nextrow a { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border: 1px solid var(--h-line-hi); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--h-ink); }
.nextrow a:hover { background: var(--h-ink); color: oklch(0.12 0 0); }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drift { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { scale: 1.02; } to { scale: 1.1; translate: -1.5% -1%; } }

/* =========== B · SPLIT STAGE: the words on solid ground, the footage framed beside them, clips underneath =========== */
.sb .stage2 { display: grid; grid-template-columns: minmax(20rem, 2fr) minmax(0, 3fr); min-height: min(76vh, 42rem); border-bottom: 1px solid var(--h-line); }
.sb .words { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 2rem clamp(1rem, 3vw, 2.5rem); background: oklch(0.105 0.004 250); border-right: 1px solid var(--h-line); }
.sb .words h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .9; }
.sb .words .acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.sb .screen2 { position: relative; display: flex; flex-direction: column; background: #000; }
.sb .view { position: relative; flex: 1; min-height: 20rem; overflow: hidden; }
.sb .view .lab2 { position: absolute; z-index: 2; left: 1rem; top: 1rem; padding: .25rem .55rem; background: oklch(0.08 0 0 / .8); border: 1px solid var(--h-line-hi); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink); }
.sb .thumbs2 { display: flex; gap: 1px; background: var(--h-line); border-top: 1px solid var(--h-line); }
.sb .thumbs2 button { flex: 1; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .6rem; align-items: center; padding: .5rem; background: oklch(0.11 0.004 250); text-align: left; color: var(--h-ink3); font-size: .75rem; line-height: 1.35; }
.sb .thumbs2 button img { width: 5rem; aspect-ratio: 16 / 9; object-fit: cover; }
.sb .thumbs2 button b { display: block; color: var(--h-ink2); font-weight: 600; font-size: .8125rem; }
.sb .thumbs2 button[aria-pressed="true"] { background: oklch(0.17 0.005 250); }
.sb .thumbs2 button[aria-pressed="true"] b { color: var(--h-ink); }
.sb .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
/* the dates as one quiet line under the name: enough to tell fresh from old */
.sb .meta2 { margin: -.3rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; font-size: .8125rem; color: var(--h-ink3); }
.sb .meta2 b { color: var(--h-ink); font-weight: 600; }
.sb .meta2 span { color: oklch(1 0 0 / .25); }
.sb .need { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding-top: 1.75rem; align-items: start; }
.sb .bigvid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 1px solid var(--h-line); background: #000; text-align: left; }
.sb .bigvid.tall { aspect-ratio: 16 / 9; }
.sb .bigvid img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity 200ms ease; }
.sb .bigvid:hover img { opacity: 1; }
.sb .bigvid .pl { position: absolute; left: 50%; top: 45%; translate: -50% -50%; width: 4rem; height: 4rem; display: grid; place-items: center; background: oklch(0.10 0 0 / .8); border: 1px solid oklch(1 0 0 / .55); }
.sb .bigvid .pl::after { content: ""; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.sb .bigvid:hover .pl { background: var(--h-ink); }
.sb .bigvid:hover .pl::after { border-left-color: #000; }
.sb .bigvid .vt { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem; background: linear-gradient(transparent, oklch(0.05 0 0 / .92)); font-size: .8125rem; color: var(--h-ink3); }
.sb .bigvid .vt b { display: block; color: var(--h-ink); font-size: .9375rem; font-weight: 600; }
.sb .nofoot { margin: 0; padding: 1.2rem; border: 1px dashed var(--h-line-hi); font-size: .9375rem; line-height: 1.6; color: var(--h-ink3); }
.sb .unk2 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; margin-top: 2rem; padding: .9rem 1.1rem; border: 1px solid var(--h-line); background: var(--h-panel); }
.sb .unk2 > div { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.sb .unk2 span:not(.k) { display: inline-flex; align-items: center; gap: .55rem; font-size: .8125rem; color: var(--h-ink2); }
.sb .unk2 i { width: 4.5rem; height: .85rem; background: oklch(0.06 0 0); border: 1px solid var(--h-line); }
.sb .hist { margin-top: 1rem; border: 1px solid var(--h-line); }
.sb .hist summary { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink2); }
.sb .hist summary::-webkit-details-marker { display: none; }
.sb .hist summary span { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--h-ink3); }
.sb .hist summary::after { content: "+"; font-size: 1.1rem; line-height: 1; color: var(--h-ink3); }
.sb .hist[open] summary::after { content: "−"; }
.sb .hist summary:hover { color: var(--h-ink); }
.sb .hist__b { padding: .2rem 1.1rem 1.1rem; display: grid; gap: .9rem; }
.sb .hist__b p { margin: 0; font-size: .8125rem; color: var(--h-ink3); line-height: 1.55; }
.sb .hist__b a { color: var(--h-ink); text-decoration: underline; text-underline-offset: 3px; }
.sb .ingame { margin: 0; border: 1px solid var(--h-line); background: #000; }
.sb .ingame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sb .ingame figcaption { padding: .55rem .75rem; font-size: .8125rem; color: var(--h-ink3); border-top: 1px solid var(--h-line); }
.sb .ingame figcaption b { color: var(--h-ink2); font-weight: 600; }
.sb .bigvid iframe, .sb .view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.sb .view .lab2 { z-index: 3; }

@media (max-width: 64rem) {
  .sb .grid3, .sb .need { grid-template-columns: minmax(0, 1fr); }
  .sb .need { gap: 1rem; }
  .sb .stage2 { grid-template-columns: minmax(0, 1fr); }
  .sb .words { border-right: 0; border-bottom: 1px solid var(--h-line); order: 2; }
  .sb .view { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
}
@media (max-width: 46rem) { .sb .thumbs2 { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .drift, .beast2 > img { animation: none; transition: none; } }

/* ---------- variants, on a parent's page (the Reaver) ---------- */
.var4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .6rem; }
.var4 article { border: 1px solid var(--h-line); background: var(--h-panel); scroll-margin-top: 4.5rem; }
.var4 img, .var4 .nopic { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--h-line); }
.var4 div { padding: .8rem .9rem .9rem; }
.var4 h3 { font-size: 1rem; margin: .45rem 0 .3rem; }
.var4 p { margin: 0 0 .4rem; font-size: .875rem; line-height: 1.5; color: var(--h-ink2); }
.var4 small { font-size: .75rem; color: var(--h-ink3); }
.var4 article:target { border-color: var(--mark); }