@charset "UTF-8";
:root {
  --color-parchment: oklch(94% 0.015 80);
  --color-parchment-2: oklch(91% 0.018 75);
  --color-parchment-3: oklch(88% 0.022 70);
  --color-ink: oklch(20% 0.02 40);
  --color-ink-2: oklch(32% 0.02 40);
  --color-ink-3: oklch(45% 0.018 45);
  --color-sepia: oklch(75% 0.04 60);
  --color-sepia-soft: oklch(83% 0.03 65);
  --color-oxblood: oklch(42% 0.14 25);
  --color-oxblood-strong: oklch(36% 0.16 22);
  --color-oxblood-soft: oklch(55% 0.10 28);
  --color-holy-gold: oklch(68% 0.12 80);
  --color-holy-gold-strong: oklch(55% 0.14 75);
  --color-holy-gold-soft: oklch(80% 0.08 82);
  --color-holy-bg: oklch(92% 0.025 78);
  --color-holy-accent: var(--color-holy-gold-strong);
  --color-redaction: oklch(14% 0.01 40);
  --color-unholy-bg: oklch(12% 0.012 35);
  --color-bone: oklch(85% 0.02 80);
  --color-bone-soft: oklch(75% 0.02 75);
  --color-unholy-accent: oklch(38% 0.16 22);
  --color-iron: oklch(38% 0.04 240);
  --color-iron-soft: oklch(55% 0.03 240);
  --color-page-bg: var(--color-parchment);
  --color-page-fg: var(--color-ink);
  --color-page-dim: var(--color-ink-2);
  --color-rule: color-mix(in oklch, var(--color-ink) 25%, transparent);
  --color-rule-strong: color-mix(in oklch, var(--color-ink) 45%, transparent);
  --color-accent: var(--color-oxblood);
  --color-accent-strong: var(--color-oxblood-strong);
  --color-selection-bg: color-mix(in oklch, var(--color-oxblood) 35%, transparent);
  --color-selection-fg: var(--color-ink);
  --color-surface-raised: var(--color-parchment-2);
  --color-surface-sunken: var(--color-parchment-3);
  --color-link: var(--color-oxblood);
  --color-link-hover: var(--color-oxblood-strong);
  --color-link-unregistered: var(--color-ink-3);
}

.is-holy {
  --color-page-bg: var(--color-holy-bg);
  --color-accent: var(--color-holy-accent);
  --color-accent-strong: var(--color-holy-gold-strong);
  --color-link: var(--color-holy-gold-strong);
  --color-link-hover: var(--color-oxblood-strong);
}

.is-unholy, .frame--thorn-gothic {
  --color-page-bg: var(--color-unholy-bg);
  --color-page-fg: var(--color-bone);
  --color-page-dim: var(--color-bone-soft);
  --color-rule: color-mix(in oklch, var(--color-bone) 28%, transparent);
  --color-rule-strong: color-mix(in oklch, var(--color-bone) 48%, transparent);
  --color-accent: var(--color-unholy-accent);
  --color-accent-strong: var(--color-oxblood-strong);
  --color-link: var(--color-bone);
  --color-link-hover: var(--color-oxblood-soft);
  --color-selection-bg: color-mix(in oklch, var(--color-bone) 30%, transparent);
  --color-selection-fg: var(--color-redaction);
}

.is-bureau {
  --color-page-bg: var(--color-parchment);
  --color-page-fg: var(--color-ink);
  --color-accent: var(--color-oxblood);
  --color-accent-strong: var(--color-oxblood-strong);
  --color-link: var(--color-oxblood);
  --color-link-hover: var(--color-oxblood-strong);
}

:root {
  --font-holy-display: "IM Fell DW Pica", "Old Standard TT", Georgia, serif;
  --font-banner: "Rye", "IM Fell DW Pica", Georgia, serif;
  --font-unholy-display: "UnifrakturCook", "IM Fell DW Pica", Georgia, serif;
  --font-inscription: "Cinzel", "IM Fell DW Pica", Georgia, serif;
  --font-stamp: "Redaction", "IM Fell DW Pica", Georgia, serif;
  --font-stamp-degraded: "Redaction 35", "Redaction", Georgia, serif;
  --font-script: "Homemade Apple", "Caveat", cursive;
  --font-body: "Old Standard TT", Georgia, "Times New Roman", serif;
  --font-mono: "Courier Prime", "Courier New", Courier, monospace;
  --font-display-holy: var(--font-holy-display);
  --font-display-bureau: var(--font-stamp);
  --font-display-unholy: var(--font-unholy-display);
  --font-display: var(--font-holy-display);
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fs-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.875rem);
  --fs-4xl: clamp(2.75rem, 1.6rem + 4vw, 4.25rem);
  --fs-5xl: clamp(3.5rem, 2rem + 6vw, 6rem);
  --fs-6xl: clamp(4rem, 2rem + 8vw, 7.5rem);
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.55;
  --lh-loose: 1.75;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;
  --ls-widest: 0.18em;
  --measure-body: 68ch;
  --measure-narrow: 48ch;
  --measure-wide: 84ch;
  --measure-column: 34ch;
}

:root {
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);
  --space-section-lg: clamp(4rem, 2.5rem + 7vw, 8rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --container-prose: 40rem;
  --container-wide: 68rem;
  --container-bleed: 90rem;
}

:root {
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --dur-slow: 420ms;
  --dur-slower: 680ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-out-soft: cubic-bezier(.25, .9, .3, 1);
  --ease-stamp: cubic-bezier(.2, .7, .3, 1);
  --ease-out-back: cubic-bezier(.2, .8, .25, 1.1);
  --transition-opacity: opacity var(--dur-normal) var(--ease-out);
  --transition-transform: transform var(--dur-normal) var(--ease-out);
  --transition-color: color var(--dur-fast) var(--ease-out);
  --transition-bg: background-color var(--dur-normal) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "onum";
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  padding: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 3px;
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-fg);
}

:root {
  font-display: swap;
}

html {
  font-size: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--color-page-fg);
  background-color: var(--color-page-bg);
  font-variant-numeric: oldstyle-nums;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--color-ink);
  letter-spacing: var(--ls-normal);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-4xl);
}

h2 {
  font-size: var(--fs-3xl);
}

h3 {
  font-size: var(--fs-2xl);
}

h4 {
  font-size: var(--fs-xl);
}

h5 {
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

h6 {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

p {
  max-width: var(--measure-body);
  text-wrap: pretty;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: 700;
}

small, .text-sm {
  font-size: var(--fs-sm);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-link) 45%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

blockquote {
  margin-block: var(--space-md);
  padding-inline-start: var(--space-md);
  font-style: italic;
  color: var(--color-ink-2);
  border-inline-start: 1px solid var(--color-rule);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: var(--ls-wide);
}

code {
  padding: 0.1em 0.3em;
  background: color-mix(in oklch, var(--color-ink) 5%, transparent);
  border-radius: 2px;
}

hr {
  border: none;
  margin: var(--space-xl) auto;
  block-size: 1px;
  max-width: 60%;
  background: var(--color-rule);
}

ul, ol {
  padding-inline-start: 1.25em;
}

ul li, ol li {
  margin-block: var(--space-3xs);
}

body {
  background-image: radial-gradient(circle at 20% 30%, color-mix(in oklch, var(--color-sepia) 18%, transparent) 0%, transparent 40%), radial-gradient(circle at 78% 72%, color-mix(in oklch, var(--color-sepia) 14%, transparent) 0%, transparent 45%), radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--color-sepia) 6%, transparent) 0%, transparent 70%);
  background-attachment: fixed;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  min-block-size: 100dvh;
}

body {
  overscroll-behavior-y: none;
}

.site-main {
  padding-inline: var(--gutter);
  padding-block: var(--space-xl);
  overflow-x: clip;
}
.site-main:has(.codex-article), .site-main:has(.zone-velvet) {
  padding-block-start: 0;
}

.prose {
  max-inline-size: var(--measure-body);
  margin-inline: auto;
}
.prose > * + * {
  margin-block-start: var(--space-md);
}

.bureau-stamp {
  display: inline-block;
  padding: 0.35em 0.8em 0.3em;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
  background: transparent;
  border: 2px solid var(--color-oxblood);
  border-radius: 2px;
  transform: rotate(-1.2deg);
  filter: contrast(0.92) saturate(0.9);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-oxblood) 30%, transparent);
  margin-block: 2px;
}

.bureau-stamp--sm {
  padding: 0.25em 0.55em 0.2em;
  font-size: 0.6875rem;
  border-width: 1.5px;
}

.bureau-stamp--lg {
  padding: 0.5em 1em 0.45em;
  font-size: var(--fs-sm);
}

.bureau-stamp:nth-of-type(2n) {
  transform: rotate(0.8deg);
}

.bureau-stamp:nth-of-type(3n) {
  transform: rotate(-0.5deg);
}

.bureau-stamp:nth-of-type(4n+1) {
  transform: rotate(1.4deg);
}

.bureau-stamp--dim {
  color: var(--color-oxblood-soft);
  border-color: var(--color-oxblood-soft);
  filter: contrast(0.85) saturate(0.75);
}

@keyframes bureau-stamp-descend {
  0% {
    transform: scale(1.5) translateY(-10px) rotate(-3deg);
    opacity: 0;
  }
  65% {
    transform: scale(1.05) translateY(2px) rotate(-0.5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0) rotate(-1.2deg);
    opacity: 1;
  }
}
.bureau-stamp--descending {
  animation: bureau-stamp-descend var(--dur-slow) var(--ease-stamp) both;
}

.codex-stamp {
  display: flex;
  justify-content: center;
  margin-block: var(--space-lg);
}

.codex-stamp__mark {
  padding: 0.6em 1.5em 0.55em;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood-strong);
  border: 3px double var(--color-oxblood-strong);
  border-radius: 2px;
  transform: rotate(-2deg);
  filter: contrast(0.9) saturate(0.88);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-oxblood-strong) 25%, transparent), inset 0 0 12px -6px color-mix(in oklch, var(--color-oxblood-strong) 40%, transparent);
}

.ornament-rule {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-xl);
  color: var(--color-rule-strong);
  inline-size: 100%;
  max-inline-size: var(--measure-body);
  margin-inline: auto;
}

.ornament-rule::before,
.ornament-rule::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(to right, transparent, currentColor 25%, currentColor 75%, transparent);
}

.ornament-rule__mark {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-oxblood);
}
.ornament-rule__mark::before {
  content: "✠";
}

.rule-thin {
  block-size: 1px;
  background: var(--color-rule);
  margin-block: var(--space-sm);
}

.rule-strong {
  block-size: 1px;
  background: var(--color-rule-strong);
}

.rule-double {
  border-block: 1px solid var(--color-rule-strong);
  padding-block: 3px;
}
.rule-double::before {
  content: "";
  display: block;
  block-size: 1px;
  background: var(--color-rule-strong);
}

.drop-cap,
.has-drop-cap::first-letter {
  float: inline-start;
  margin-inline-end: var(--space-2xs);
  margin-block-start: 0.08em;
  padding: 0 0.1em;
  font-family: var(--font-display);
  font-size: 4.5em;
  line-height: 0.85;
  color: var(--color-oxblood-strong);
  border: 1.5px solid var(--color-rule-strong);
  padding: 0.08em 0.14em 0.02em;
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-sepia) 8%, transparent) 0%, transparent 70%);
}

.panel-bureau {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-sepia) 10%, var(--color-parchment));
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule);
}
.panel-bureau::before, .panel-bureau::after {
  content: "";
  position: absolute;
  inline-size: 6px;
  block-size: 6px;
  background: var(--color-oxblood);
  border-radius: 1px;
}
.panel-bureau::before {
  top: 6px;
  left: 6px;
}
.panel-bureau::after {
  bottom: 6px;
  right: 6px;
}

.panel-bureau--heavy {
  padding: var(--space-xl) var(--space-lg);
  border-width: 2px;
  box-shadow: inset 0 0 0 2px var(--color-parchment), inset 0 0 0 3px var(--color-rule-strong), inset 0 0 0 5px var(--color-parchment), inset 0 0 0 6px var(--color-rule);
}

.redaction-bar {
  display: inline-block;
  block-size: 0.85em;
  vertical-align: -0.1em;
  background: var(--color-redaction);
  border-radius: 1px;
}

.wiki-link {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-oxblood) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: var(--transition-color);
  font-style: normal;
}

.wiki-link:hover {
  color: var(--color-oxblood-strong);
  text-decoration-color: currentColor;
}

.wiki-link--unregistered {
  color: var(--color-link-unregistered);
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}

.wiki-link--self {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

.wiki-link__tag {
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-style: normal;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-3);
  margin-inline-start: 0.2em;
  white-space: nowrap;
  opacity: 0.85;
}

.wax-seal {
  --seal-size: 4.5rem;
  display: inline-block;
  inline-size: var(--seal-size);
  block-size: var(--seal-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(-4deg);
  filter: drop-shadow(0 2px 4px color-mix(in oklch, var(--color-ink) 30%, transparent)) drop-shadow(0 6px 14px color-mix(in oklch, var(--color-ink) 18%, transparent));
  user-select: none;
}

.wax-seal--sm {
  --seal-size: 3rem;
}

.wax-seal--lg {
  --seal-size: 6.5rem;
}

.wax-seal--xl {
  --seal-size: 9rem;
}

.wax-seal--doctrine {
  background-image: url("/assets/images/ornaments/seals/doctrine.png");
}

.wax-seal--records {
  background-image: url("/assets/images/ornaments/seals/records.png");
}

.wax-seal--bells {
  background-image: url("/assets/images/ornaments/seals/bells.png");
}

.wax-seal--tithes {
  background-image: url("/assets/images/ornaments/seals/tithes.png");
}

.wax-seal--purity {
  background-image: url("/assets/images/ornaments/seals/purity.png");
}

.wax-seal--hearsay {
  background-image: url("/assets/images/ornaments/seals/hearsay.png");
}

.seal-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  margin-block: var(--space-xl);
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seal-divider::before,
.seal-divider::after {
  content: "";
  block-size: 1px;
  background: linear-gradient(to right, transparent, var(--color-rule-strong) 50%, transparent);
}

.signature {
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  color: var(--color-ink);
  line-height: 1;
  padding-block-end: 0.08em;
  letter-spacing: var(--ls-normal);
  user-select: text;
}

.signature--lg {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.signature--sm {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
}

.signature--r-jecker {
  transform: rotate(-2deg);
  letter-spacing: 0.02em;
}

.signature--m-dolven {
  transform: rotate(1deg);
  letter-spacing: -0.02em;
  font-weight: 500;
}

.signature--a-hollis {
  transform: rotate(-3deg);
  letter-spacing: 0.06em;
  font-style: italic;
}

.signature--t-vienn {
  transform: rotate(0deg);
  letter-spacing: -0.03em;
  font-size: 0.9em;
}

.signature--g-otterburn {
  transform: rotate(-1.5deg);
  letter-spacing: 0.04em;
}

.signature--s-karsky {
  transform: rotate(2deg);
  letter-spacing: 0.01em;
}

.signature--drax {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  transform: rotate(-2deg);
  letter-spacing: 0.03em;
  color: var(--color-oxblood-strong);
}

.signature-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-block-start: var(--space-lg);
}

.signature-block__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
  max-inline-size: none;
  line-height: 1.4;
}

.signature-block--end {
  align-items: flex-end;
}
.signature-block--end .signature-block__title {
  text-align: end;
}

body {
  background-color: var(--color-parchment);
  background-image: linear-gradient(to bottom, color-mix(in oklch, var(--color-parchment) 75%, transparent) 0%, color-mix(in oklch, var(--color-parchment) 92%, transparent) 100%), url("/assets/images/ornaments/textures/paper-aged.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
}

.is-unholy body, .frame--thorn-gothic body,
body.is-unholy,
body.frame--thorn-gothic {
  background-image: linear-gradient(to bottom, color-mix(in oklch, var(--color-unholy-bg) 82%, transparent) 0%, color-mix(in oklch, var(--color-unholy-bg) 94%, transparent) 100%), url("/assets/images/ornaments/textures/paper-stained-heavy.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}

.has-paper-texture {
  position: relative;
  background-color: var(--color-parchment);
  background-image: url("/assets/images/ornaments/textures/paper-aged.jpg");
  background-size: cover;
  background-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-ink) 10%, transparent), 0 8px 24px color-mix(in oklch, var(--color-ink) 22%, transparent);
}

.has-torn-corner::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 6rem;
  block-size: 6rem;
  background-image: url("/assets/images/ornaments/textures/paper-torn-corner.png");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.has-bloodspot::before {
  content: "";
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  background-image: url("/assets/images/ornaments/textures/paper-bloodspot.png");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.85;
}

.frame {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: clamp(2rem, 7vw, 5rem);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  max-inline-size: 46rem;
  margin-inline: auto;
}
.frame > * {
  position: relative;
  z-index: 1;
}

.frame--caryatid {
  background-image: url("/assets/images/ornaments/frames/caryatid-pair.png");
  aspect-ratio: 3/4;
  max-inline-size: 40rem;
  padding-inline: clamp(3rem, 9vw, 6rem);
  padding-block: clamp(4rem, 12vw, 8rem);
}

.frame--cherub-crest {
  background-image: url("/assets/images/ornaments/frames/cherub-crest.png");
  aspect-ratio: 3/4;
  padding-block-start: clamp(4.5rem, 13vw, 9rem);
  padding-block-end: clamp(2.5rem, 6vw, 4rem);
}

.frame--thorn-gothic {
  background-image: url("/assets/images/ornaments/frames/thorn-gothic.png");
  aspect-ratio: 3/4;
  color: var(--color-bone);
  background-color: var(--color-unholy-bg);
  padding-block: clamp(4rem, 10vw, 7rem);
  padding-inline: clamp(2.5rem, 8vw, 5rem);
}

.frame--skull-vine {
  background-image: url("/assets/images/ornaments/frames/skull-and-vine.png");
  aspect-ratio: 3/4;
  padding-block-start: clamp(4.5rem, 12vw, 8rem);
}

.frame--bone-border {
  background-image: url("/assets/images/ornaments/frames/bone-border.png");
  aspect-ratio: 3/4;
  color: var(--color-bone);
  background-color: var(--color-unholy-bg);
  padding-block: clamp(5rem, 14vw, 9rem);
  padding-inline: clamp(3rem, 10vw, 6rem);
}

@media (max-width: 640px) {
  .frame {
    padding-block: clamp(2.5rem, 12vw, 4rem);
    padding-inline: clamp(1.5rem, 10vw, 3rem);
    aspect-ratio: auto !important;
    background-size: 100% 100%;
  }
}
.banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 44rem;
  margin-inline: auto;
  min-block-size: 6rem;
  padding-inline: clamp(5rem, 15vw, 9rem);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  text-align: center;
  isolation: isolate;
}

.banner__title {
  font-family: var(--font-banner);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
  max-inline-size: 18ch;
}

.banner__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  margin-block-start: var(--space-2xs);
  max-inline-size: 36ch;
}

.banner--cherub {
  background-image: url("/assets/images/ornaments/banners/cherub-pair.png");
  background-size: contain;
  aspect-ratio: 4.5/1;
  min-block-size: 7rem;
  padding-inline: clamp(7rem, 20vw, 13rem);
  padding-block: 0;
}
.banner--cherub .banner__title {
  font-family: var(--font-holy-display);
  color: var(--color-holy-gold-strong);
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
}

.banner--laurel {
  background-image: url("/assets/images/ornaments/banners/laurel-scroll.png");
  background-size: contain;
  aspect-ratio: 5/1;
  min-block-size: 6rem;
  padding-inline: clamp(7rem, 18vw, 11rem);
  padding-block: 0;
}
.banner--laurel .banner__title {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.2vw, 1.625rem);
}

.banner--scroll {
  background-image: url("/assets/images/ornaments/banners/plain-scroll.png");
  min-block-size: 6rem;
}

.banner--tattered {
  background-image: url("/assets/images/ornaments/banners/ribbon-tattered.png");
  min-block-size: 6rem;
}
.banner--tattered .banner__title {
  font-family: var(--font-stamp);
}

.banner--ecclesiastical {
  background-image: url("/assets/images/ornaments/banners/ecclesiastical.png");
  min-block-size: 7rem;
}
.banner--ecclesiastical .banner__title {
  font-family: var(--font-unholy-display);
  color: var(--color-ink);
}

@media (max-width: 640px) {
  .banner {
    padding-inline: clamp(3rem, 10vw, 5rem);
    min-block-size: 5rem;
  }
  .banner__title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
}
.seam {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  margin-block: var(--space-xl);
  margin-inline: auto;
  max-inline-size: var(--container-wide);
  padding-inline: var(--gutter);
  border: none;
  color: var(--color-rule-strong);
}
.seam::before, .seam::after {
  content: "";
  block-size: 1px;
  background: linear-gradient(to right, transparent, currentColor 25%, currentColor 75%, transparent);
}

.seam__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-inscription);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--color-oxblood);
  padding-inline: var(--space-sm);
  user-select: none;
}

.seam--cross .seam__mark::before {
  content: "❦  ✠  ❦";
  letter-spacing: 0.3em;
}

.seam--fleuron .seam__mark::before {
  content: "✦  ❦  ✦";
  letter-spacing: 0.3em;
}

.seam--lozenge .seam__mark::before {
  content: "◆  ◆  ◆";
  letter-spacing: 0.3em;
  font-size: 0.7em;
}

.seam--crown .seam__mark::before {
  content: "⚜";
}

.seam--star .seam__mark::before {
  content: "✦  ✦  ✦";
  letter-spacing: 0.3em;
  font-size: 0.8em;
}

.seam--skull .seam__mark {
  color: var(--color-redaction);
}

.seam--skull .seam__mark::before {
  content: "✦  ☠  ✦";
  letter-spacing: 0.3em;
  font-size: 1.1em;
}

.seam--heavy {
  margin-block: var(--space-2xl);
}
.seam--heavy::before, .seam--heavy::after {
  block-size: 3px;
  background: linear-gradient(to bottom, currentColor 0 1px, transparent 1px 2px, currentColor 2px 3px);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.seam--narrow {
  max-inline-size: 32rem;
  margin-block: var(--space-lg);
}

.seam--trefoil .seam__mark {
  display: inline-flex;
  gap: 0.5rem;
  color: var(--color-oxblood);
}
.seam--trefoil .seam__mark::before {
  content: "✠  ❦  ✠";
}

.ornament-vignette,
.bureau-masthead__flank img,
.landing-masthead__flank img {
  mix-blend-mode: multiply;
  filter: contrast(1.1);
}

.zone-velvet {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
  padding-inline: var(--gutter);
  color: var(--color-bone) !important;
  background-color: #0a0706 !important;
  background-image: url("/assets/images/ornaments/textures/velvet-dark.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-block: none !important;
  isolation: isolate;
  margin-inline: calc(var(--gutter) * -1);
  --color-page-bg: #0a0706;
  --color-page-fg: var(--color-bone);
  --color-page-dim: var(--color-bone-soft);
  --color-accent: var(--color-oxblood);
  --color-accent-strong: var(--color-oxblood-strong);
  --color-link: var(--color-bone);
  --color-link-hover: var(--color-oxblood-soft);
}
.zone-velvet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%), linear-gradient(135deg, rgba(58, 14, 14, 0.22) 0%, rgba(0, 0, 0, 0.28) 70%);
  pointer-events: none;
  z-index: 0;
}
.zone-velvet > * {
  position: relative;
  z-index: 1;
}

.zone-velvet--filigree::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("/assets/images/ornaments/filigree/corner-silver-tl.png"), url("/assets/images/ornaments/filigree/corner-silver-tr.png"), url("/assets/images/ornaments/filigree/corner-silver-bl.png"), url("/assets/images/ornaments/filigree/corner-silver-br.png");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: clamp(7rem, 15vw, 11rem) clamp(7rem, 15vw, 11rem);
  mix-blend-mode: screen;
  opacity: 0.92;
}

.zone-velvet--flanked {
  overflow: hidden;
}

.zone-velvet__flank {
  position: absolute;
  inset-block: 0;
  inline-size: clamp(9rem, 22vw, 20rem);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.62;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  filter: contrast(1.1);
}

.zone-velvet__flank--left {
  inset-inline-start: 0;
  background-image: url("/assets/images/ornaments/cultists/flank-left.png");
  background-position: right center;
  mask-image: linear-gradient(to right, black 40%, transparent 95%);
  -webkit-mask-image: linear-gradient(to right, black 40%, transparent 95%);
}

.zone-velvet__flank--right {
  inset-inline-end: 0;
  background-image: url("/assets/images/ornaments/cultists/flank-right.png");
  background-position: left center;
  mask-image: linear-gradient(to left, black 40%, transparent 95%);
  -webkit-mask-image: linear-gradient(to left, black 40%, transparent 95%);
}

@media (max-width: 640px) {
  .zone-velvet__flank {
    opacity: 0.35;
  }
}
.display-distressed {
  font-family: var(--font-unholy-display);
  font-size: clamp(3.5rem, 10vw, 8rem);
  color: #e84848;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.9), 4px 4px 0 rgba(20, 5, 5, 0.65), 0 0 28px rgba(232, 72, 72, 0.35);
  margin: 0;
  padding: 0.1em 0.3em;
}
.display-distressed .display-distressed__word {
  display: inline-block;
  white-space: nowrap;
}
.display-distressed .display-distressed__word + .display-distressed__word {
  margin-inline-start: 0.35em;
}
.display-distressed .char {
  display: inline-block;
  transform-origin: 50% 100%;
  color: #e84848;
}
.display-distressed .char--alt {
  font-family: var(--font-holy-display);
  font-style: italic;
  font-weight: 400;
  vertical-align: -0.04em;
  letter-spacing: -0.05em;
  color: #fffdf5;
}
.display-distressed .char--tall {
  font-size: 1.15em;
  letter-spacing: -0.03em;
  color: #f25a5a;
}
.display-distressed .char--tilt {
  transform: rotate(-3deg);
  color: #fffdf5;
}

.zone-velvet__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  margin-inline: auto;
  margin-block-end: var(--space-xl);
  max-inline-size: 44rem;
}

.zone-velvet__pretitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #e8dcc2;
  margin: 0;
}
.zone-velvet__pretitle::before, .zone-velvet__pretitle::after {
  content: "✦ ✦";
  color: #b32020;
  letter-spacing: 0.25em;
  font-size: 0.85em;
}

.zone-velvet__deck {
  margin: var(--space-lg) auto 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: #e8dcc2;
  max-inline-size: 62ch;
  text-wrap: pretty;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid rgba(232, 220, 194, 0.25);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.zone-velvet__deck strong {
  color: #fff;
}
.zone-velvet__deck em {
  color: #e8dcc2;
}

.zone-velvet__footnote {
  margin-block-start: var(--space-xl);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: #b8a890;
  max-inline-size: none;
  position: relative;
  z-index: 2;
}
.zone-velvet__footnote::before, .zone-velvet__footnote::after {
  content: "✦";
  margin-inline: 0.6em;
  color: #b32020;
  font-size: 0.7em;
  vertical-align: 0.2em;
}

.tile-velvet {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: var(--color-bone) !important;
  background-color: #150a0a !important;
  background-image: url("/assets/images/ornaments/textures/scratched-metal.jpg") !important;
  background-size: cover !important;
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  border: 1px solid rgba(232, 220, 194, 0.25) !important;
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  padding: 0.65rem 0.65rem 1.1rem !important;
}
.tile-velvet:hover {
  transform: translateY(-3px) rotate(-0.25deg);
  box-shadow: inset 0 0 0 1px rgba(232, 220, 194, 0.4), 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(179, 32, 32, 0.5) !important;
}
.tile-velvet::before, .tile-velvet::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: screen;
  opacity: 0.95;
  pointer-events: none;
  z-index: 2;
}
.tile-velvet::before {
  inset-inline-start: 0;
  background-image: url("/assets/images/ornaments/filigree/corner-silver-tl.png");
}
.tile-velvet::after {
  inset-inline-end: 0;
  background-image: url("/assets/images/ornaments/filigree/corner-silver-tr.png");
}

.tile-velvet__portrait {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: contrast(1.1) saturate(0.92) sepia(0.08);
  border: 1px solid rgba(232, 220, 194, 0.3);
}

.tile-velvet__sin {
  margin-block: 0.55rem 0;
  padding: 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #c95151;
  text-align: center;
}

.tile-velvet__name {
  padding: 0 0.4rem;
  font-family: var(--font-unholy-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 0.95;
  color: #d23a3a;
  margin: 0.1rem 0;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
  text-align: center;
}

.tile-velvet__epithet {
  padding: 0.35em 0.6em 0.3em;
  margin: 0.35rem 0.4rem 0;
  font-family: var(--font-stamp);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #e8dcc2;
  border: 1px solid rgba(232, 220, 194, 0.4);
  border-radius: 2px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.tile-velvet__interpretation {
  padding: 0 0.4rem;
  margin: 0.35rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(232, 220, 194, 0.5);
  text-align: center;
  font-style: normal;
}

.seam--torn-down {
  position: relative;
  block-size: clamp(3rem, 6vw, 5rem);
  margin-block: calc(var(--space-lg) * -1) 0;
  background-image: url("/assets/images/ornaments/torn/edge-down.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: top center;
  pointer-events: none;
  z-index: 3;
}

.seam--torn-up {
  position: relative;
  block-size: clamp(3rem, 6vw, 5rem);
  margin-block: 0 calc(var(--space-lg) * -1);
  background-image: url("/assets/images/ornaments/torn/edge-up.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  pointer-events: none;
  z-index: 3;
}

.bureau-masthead {
  position: relative;
  background: color-mix(in oklch, var(--color-ink) 3%, var(--color-parchment));
  border-block-end: 3px double var(--color-rule-strong);
}
.bureau-masthead::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -7px;
  block-size: 1px;
  background: var(--color-rule);
}

.bureau-masthead__topband {
  background: color-mix(in oklch, var(--color-ink) 7%, var(--color-parchment));
  border-block-end: 1px solid var(--color-rule-strong);
  padding: 0.3rem 0;
}

.bureau-masthead__topband-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding-inline: var(--gutter);
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
}

.bureau-masthead__stamps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.bureau-masthead__serial {
  margin: auto;
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bureau-masthead__mainband {
  position: relative;
  background: color-mix(in oklch, var(--color-ink) 2%, var(--color-parchment));
  background-image: repeating-linear-gradient(90deg, transparent 0 20px, color-mix(in oklch, var(--color-ink) 3%, transparent) 20px 21px);
}

.bureau-masthead__mainband-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding-inline: var(--gutter);
  padding-block: 66px 0;
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
}

.bureau-masthead__flank {
  margin: 0;
  inline-size: clamp(3.5rem, 6vw, 5rem);
  block-size: clamp(3.5rem, 6vw, 5rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bureau-masthead__flank img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.12);
}

.bureau-masthead__flank--left {
  justify-self: start;
}

.bureau-masthead__flank--right {
  justify-self: end;
}

.bureau-masthead__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.bureau-masthead__crest {
  position: absolute;
  top: -19px;
  width: 136px;
  text-decoration: none;
  line-height: 1;
}
.bureau-masthead__crest img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

.bureau-masthead__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  flex-wrap: wrap;
  justify-content: center;
}
.bureau-masthead__nav a {
  color: var(--color-ink);
  text-decoration: none;
  padding-block: 0.15rem;
  padding-inline: 0.4rem;
  border-block-end: 2px solid transparent;
  transition: var(--transition-color), border-color var(--dur-fast) var(--ease-out);
}
.bureau-masthead__nav a:hover,
.bureau-masthead__nav a[aria-current=page] {
  color: var(--color-oxblood);
  border-block-end-color: currentColor;
}

.bureau-masthead__nav-sep {
  color: var(--color-oxblood);
  font-family: var(--font-inscription);
  font-size: 0.7em;
  opacity: 0.6;
  user-select: none;
}

@media (max-width: 820px) {
  .bureau-masthead__topband-inner {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    justify-items: center;
  }
  .bureau-masthead__stamps {
    flex-wrap: wrap;
    justify-content: center;
  }
  .bureau-masthead__serial {
    font-size: 0.6rem;
  }
  .bureau-masthead__mainband-inner {
    gap: 0.35rem;
  }
}
.bureau-footer {
  position: relative;
  background: color-mix(in oklch, var(--color-ink) 6%, var(--color-parchment));
  background-image: repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in oklch, var(--color-ink) 4%, transparent) 18px 19px);
  border-block-start: 3px double var(--color-rule-strong);
  padding-block: var(--space-md) var(--space-lg);
  padding-inline: var(--gutter);
  color: var(--color-ink);
}
.bureau-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -7px;
  block-size: 1px;
  background: var(--color-rule);
}

.bureau-footer__crest {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  margin-block-end: var(--space-lg);
}

.bureau-footer__crest-rule {
  block-size: 1px;
  background: linear-gradient(to right, transparent, var(--color-rule-strong) 25%, var(--color-rule-strong) 75%, transparent);
}

.bureau-footer__crest-mark {
  font-family: var(--font-inscription);
  font-size: var(--fs-2xl);
  color: var(--color-oxblood);
  line-height: 1;
  padding-inline: var(--space-sm);
}

.bureau-footer__inner {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
}

.bureau-footer__heading {
  font-family: var(--font-banner);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-rule);
}

.bureau-footer__seals {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  max-inline-size: none;
}
.bureau-footer__seals li {
  margin: 0;
  line-height: 0;
}
.bureau-footer__seals .wax-seal--sm {
  --seal-size: 3.5rem;
}

.bureau-footer__nav {
  margin-block-end: var(--space-xl);
  padding-block: var(--space-md);
  border-block: 1px solid var(--color-rule);
}
.bureau-footer__nav ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-md) var(--space-xl);
  max-inline-size: none;
}
.bureau-footer__nav li {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  position: relative;
  padding-inline-start: 1.25rem;
}
.bureau-footer__nav li::before {
  content: "§";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.05em;
  color: var(--color-oxblood);
  font-family: var(--font-inscription);
  font-weight: 700;
}
.bureau-footer__nav a {
  font-family: var(--font-banner);
  font-size: var(--fs-md);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: var(--ls-wide);
  transition: var(--transition-color);
}
.bureau-footer__nav a:hover {
  color: var(--color-oxblood);
}

.bureau-footer__tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  max-inline-size: 26ch;
}

.bureau-footer__signed {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  margin-block-end: var(--space-lg);
  padding-block: var(--space-md);
  border-block: 1px solid var(--color-rule-strong);
}
@media (max-width: 640px) {
  .bureau-footer__signed {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-md);
  }
}

.bureau-footer__signed-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.bureau-footer__signed-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-ink-2);
  line-height: 1.4;
  max-inline-size: 50ch;
  margin: 0;
}

.bureau-footer__dated-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5em 1em;
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood-strong);
  border: 2.5px double var(--color-oxblood-strong);
  transform: rotate(-3deg);
}
.bureau-footer__dated-stamp span:last-child {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: var(--ls-widest);
}

.bureau-footer__serial {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 var(--space-sm);
  max-inline-size: none;
}

.bureau-footer__clerical {
  margin-block-start: var(--space-sm);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--color-ink-3);
  max-inline-size: none;
}
.bureau-footer__clerical a {
  color: inherit;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
}
.bureau-footer__clerical a:hover {
  color: var(--color-oxblood);
}

.codex-article img:not([data-no-zoom]) {
  cursor: zoom-in;
}

.codex-article {
  --measure-body: 68ch;
  --measure-header: 44rem;
  --margin-column: 12rem;
  --margin-gap: 2rem;
  --measure-article: var(--measure-header);
}

.codex-article__inner {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.codex-breadcrumbs {
  margin-inline: auto;
  margin-block-end: 0;
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--color-rule);
  position: relative;
  z-index: 3;
}
.codex-breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  max-inline-size: none;
}
.codex-breadcrumbs li {
  margin: 0;
  color: var(--color-ink-2);
}
.codex-breadcrumbs li[aria-current=page] {
  color: var(--color-oxblood);
}
.codex-breadcrumbs a {
  color: var(--color-ink-2);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  padding-block: 2px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
}
.codex-breadcrumbs a:hover {
  color: var(--color-oxblood);
  border-block-end-color: currentColor;
}

.codex-breadcrumbs__sep {
  color: var(--color-oxblood);
  font-size: 1.1em;
  line-height: 1;
  user-select: none;
}

.codex-article__header {
  max-inline-size: var(--measure-article);
  margin-inline: auto;
  margin-block-end: var(--space-xl);
  text-align: center;
}

.codex-article__stamps {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-block-end: var(--space-md);
  max-inline-size: none;
}

.codex-article__stamp {
  display: inline-block;
  padding: 0.35em 0.8em 0.3em;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
  border: 2px solid var(--color-oxblood);
  border-radius: 2px;
  transform: rotate(-1.2deg);
  filter: contrast(0.92) saturate(0.9);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-oxblood) 30%, transparent);
}

.codex-article__stamp:nth-child(2n) {
  transform: rotate(0.8deg);
}

.codex-article__stamp:nth-child(3n) {
  transform: rotate(-0.5deg);
}

.codex-article__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-block-end: var(--space-sm);
}

.codex-article__title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin-block-end: var(--space-2xs);
  letter-spacing: var(--ls-tight);
}

.codex-article__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--color-ink-2);
  margin-block-end: var(--space-md);
  max-inline-size: none;
}

.codex-article__dateline {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-block-end: var(--space-lg);
  max-inline-size: none;
}

.codex-article__hero {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  margin-block: var(--space-lg) var(--space-md);
  text-align: center;
}

.codex-article__summary {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--color-ink-2);
  text-align: left;
  margin-inline: auto;
  margin-block-end: var(--space-lg);
  padding-block: var(--space-md);
  border-block: 1px solid var(--color-rule);
  max-inline-size: var(--measure-article);
  font-style: italic;
  text-wrap: pretty;
}

.codex-article__body {
  position: relative;
  max-inline-size: var(--measure-body);
  margin-inline: auto;
  min-inline-size: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
.codex-article__body > * + * {
  margin-block-start: var(--space-md);
}
.codex-article__body p {
  max-inline-size: none;
  text-wrap: pretty;
  hyphens: auto;
}
.codex-article__body > h2 + p:not(:has(> em:first-child))::first-letter,
.codex-article__body > h2 + p:has(> em:first-child) + p::first-letter,
.codex-article__body > p:first-child:not(:has(> em:first-child))::first-letter,
.codex-article__body > p:first-child:has(> em:first-child) + p::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  line-height: 0.82;
  float: inline-start;
  margin-inline-end: 0.12em;
  margin-block-start: 0.1em;
  padding: 0.05em 0.14em 0.02em;
  color: var(--color-oxblood-strong);
  border: 1.5px solid var(--color-rule-strong);
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-sepia) 10%, transparent) 0%, transparent 70%);
}
.codex-article__body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  margin-block-start: var(--space-2xl);
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--color-rule);
  text-align: start;
}
.codex-article__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-xs);
  color: var(--color-ink-2);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.codex-article__body hr {
  position: relative;
  display: flex;
  align-items: center;
  border: none;
  block-size: 1em;
  background: transparent;
  margin-block: var(--space-2xl);
  max-inline-size: none;
  overflow: visible;
}
.codex-article__body hr::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 1px;
  background: linear-gradient(to right, transparent, var(--color-rule-strong) 25%, var(--color-rule-strong) 75%, transparent);
}
.codex-article__body hr::after {
  content: "✠";
  position: relative;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding-inline: var(--space-sm);
  background: var(--color-parchment);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-oxblood);
  line-height: 0.8;
}
.codex-article__body ul, .codex-article__body ol {
  max-inline-size: none;
  padding-inline-start: 1.5em;
}
.codex-article__body ol li::marker {
  font-family: var(--font-mono);
  color: var(--color-oxblood);
}

.codex-margin {
  font-family: "Homemade Apple", var(--font-body), cursive;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.5;
  color: color-mix(in oklch, var(--color-oxblood) 55%, var(--color-ink));
  padding-block: var(--space-2xs);
  padding-inline-end: var(--space-sm);
  padding-inline-start: var(--space-sm);
  position: relative;
  left: 36px;
}
.codex-margin em, .codex-margin i {
  font-style: normal;
}

.codex-article__body .codex-margin:nth-of-type(5n + 1) {
  transform: rotate(-1.6deg) translateX(0.15em);
}

.codex-article__body .codex-margin:nth-of-type(5n + 2) {
  transform: rotate(0.9deg) translateX(-0.2em);
}

.codex-article__body .codex-margin:nth-of-type(5n + 3) {
  transform: rotate(-0.6deg) translateX(0.3em);
}

.codex-article__body .codex-margin:nth-of-type(5n + 4) {
  transform: rotate(1.3deg) translateX(-0.1em);
}

.codex-article__body .codex-margin:nth-of-type(5n + 5) {
  transform: rotate(-1.1deg) translateX(0.05em);
}

@media (min-width: 80rem) {
  .codex-margin {
    float: inline-start;
    clear: both;
    inline-size: var(--margin-column);
    margin-inline-start: calc(-1 * (var(--margin-column) + var(--margin-gap)));
    margin-inline-end: 0;
    margin-block-start: 0.2em;
    padding-inline: var(--space-sm);
    border-inline-start: 0;
    text-align: end;
  }
}
.codex-errata {
  margin-block: var(--space-lg);
  padding: var(--space-md) var(--space-md);
  background: color-mix(in oklch, var(--color-sepia) 10%, var(--color-parchment));
  border: 1px solid var(--color-rule-strong);
  position: relative;
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule);
}

.codex-errata__superseded {
  color: var(--color-ink-3);
  font-size: var(--fs-sm);
}
.codex-errata__superseded del, .codex-errata__superseded s {
  color: var(--color-ink-3);
  text-decoration-color: var(--color-ink-3);
}
.codex-errata__superseded p {
  margin: 0;
}

.codex-errata__correction {
  position: relative;
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: 1px dashed var(--color-rule-strong);
}
.codex-errata__correction p {
  margin: 0;
}
.codex-errata__correction p + p {
  margin-block-start: var(--space-sm);
}

.codex-errata__stamp {
  display: inline-block;
  margin-block-end: var(--space-xs);
  padding: 0.3em 0.7em 0.25em;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood-strong);
  border: 2px solid var(--color-oxblood-strong);
  border-radius: 2px;
  transform: rotate(-2deg);
  filter: contrast(0.9) saturate(0.88);
}

.codex-redacted {
  position: relative;
  margin-block: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-parchment);
  border: 1px solid var(--color-rule);
}
.codex-redacted p {
  position: relative;
  margin: 0;
  padding: 0.1em 0.2em;
  color: var(--color-ink);
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
  background-color: var(--color-redaction);
  color: transparent;
}
.codex-redacted p + p {
  margin-block-start: var(--space-xs);
}
.codex-redacted:hover p, .codex-redacted:focus-within p {
  background-color: transparent;
  color: var(--color-ink);
}
@media (prefers-reduced-motion: reduce) {
  .codex-redacted p {
    transition: none;
  }
}
.codex-redacted::before {
  content: "REDACTED BY ORDER OF THE BUREAU OF DOCTRINE";
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px dashed var(--color-oxblood-soft);
}

.codex-figure {
  margin-block: var(--space-lg);
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  text-align: center;
}
.codex-figure img {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 70vh;
  object-fit: contain;
  background: var(--color-parchment-3);
  padding: var(--space-sm);
  border: 1px solid var(--color-rule-strong);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule), 0 4px 12px color-mix(in oklch, var(--color-ink) 10%, transparent);
}

.codex-figure__caption {
  margin-block-start: var(--space-sm);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  max-inline-size: 54ch;
  margin-inline: auto;
}
.codex-figure__caption::before {
  content: "☙ ";
  color: var(--color-oxblood);
  font-style: normal;
}

.codex-figure--woodcut img {
  filter: contrast(1.05);
}

.codex-figure--charcoal img {
  filter: contrast(0.95) brightness(0.98);
}

.codex-figure--engraving img {
  filter: contrast(1.08);
}

.codex-figure--diagram img {
  padding: var(--space-md);
  background: var(--color-parchment-2);
}

.codex-figure--photograph img {
  padding: var(--space-xs);
}

.codex-figure--illumination img {
  padding: var(--space-sm);
  background: color-mix(in oklch, var(--color-oxblood) 6%, var(--color-parchment-2));
}

.codex-figure--hero {
  margin-block: var(--space-xl);
}

.codex-article__footer {
  max-width: 25%;
  margin-inline: auto;
  margin-block-start: 0;
  padding-block-start: var(--space-xl);
  border-block-start: 1px solid var(--color-rule-strong);
  display: grid;
  gap: var(--space-xl);
}

.codex-article__related h2,
.codex-article__backlinks h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid var(--color-oxblood-soft);
}
.codex-article__related ul,
.codex-article__backlinks ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  max-inline-size: none;
}
.codex-article__related li,
.codex-article__backlinks li {
  margin: 0;
}
.codex-article__related a,
.codex-article__backlinks a {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--color-ink);
  text-decoration: none;
  padding-inline-start: 1em;
  position: relative;
}
.codex-article__related a::before,
.codex-article__backlinks a::before {
  content: "§";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-oxblood);
  font-family: var(--font-display);
}
.codex-article__related a:hover,
.codex-article__backlinks a:hover {
  color: var(--color-oxblood);
}

.codex-article__footer-stamps {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
  max-inline-size: none;
}

.codex-article__novel-cards h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block-end: var(--space-2xs);
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid var(--color-oxblood-soft);
}
.codex-article__novel-cards .landing-recent__list--books {
  grid-template-columns: 1fr;
  max-inline-size: min(100%, 33vw);
}

.codex-article__novel-cards-deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-md);
  max-inline-size: 60ch;
}

@media (max-width: 640px) {
  .codex-article__title {
    font-size: var(--fs-3xl);
  }
  .codex-article__stamps {
    gap: var(--space-2xs);
  }
  .codex-article__body .codex-margin {
    font-size: var(--fs-sm);
  }
  .codex-article__body > h2 + p:not(:has(> em:first-child))::first-letter,
  .codex-article__body > h2 + p:has(> em:first-child) + p::first-letter,
  .codex-article__body > p:first-child:not(:has(> em:first-child))::first-letter,
  .codex-article__body > p:first-child:has(> em:first-child) + p::first-letter {
    font-size: 3.2em;
  }
}
.codex-article--bestiary {
  max-inline-size: none;
  padding-inline: 0;
  margin-block-end: calc(-1 * var(--space-xl));
}

.bureau-footer__seals .wax-seal--sm {
  --seal-size: 5.5rem;
}

.codex-root {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.codex-root > header {
  text-align: center;
  margin-block-end: var(--space-2xl);
  padding-block-end: var(--space-lg);
  border-block-end: 1px solid var(--color-rule-strong);
  position: relative;
}
.codex-root > header::after {
  content: "";
  position: absolute;
  inset-block-end: -3px;
  inset-inline: 20% 20%;
  block-size: 1px;
  background: var(--color-rule);
}
.codex-root > header h1 {
  font-family: var(--font-holy-display);
  font-size: var(--fs-4xl);
  color: var(--color-ink);
  margin-block-end: var(--space-xs);
  letter-spacing: var(--ls-normal);
}

.codex-root__kicker {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: auto;
  margin-block-end: var(--space-xs);
}

.codex-root__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-ink-2);
  margin-inline: auto;
  max-inline-size: 60ch;
}

.codex-root__rollups {
  max-inline-size: 48rem;
  margin: var(--space-xl) auto;
  padding: var(--space-lg);
  border: 1px solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-sepia) 6%, var(--color-parchment));
  text-align: center;
}
.codex-root__rollups h2 {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block: var(--space-sm) var(--space-xs);
}
.codex-root__rollups h2:first-child {
  margin-block-start: 0;
}
.codex-root__rollups ul {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  justify-content: center;
}
.codex-root__rollups li {
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.codex-root__rollups li::after {
  content: "·";
  color: var(--color-rule-strong);
  margin-inline-start: 0.75rem;
}
.codex-root__rollups li:last-child::after {
  content: none;
}
.codex-root__rollups li a {
  color: var(--color-ink);
  text-decoration: none;
  border-block-end: 1px dotted transparent;
}
.codex-root__rollups li a:hover {
  color: var(--color-oxblood);
  border-block-end-color: currentColor;
}

.codex-root__recent h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  margin-block-end: var(--space-xs);
  letter-spacing: var(--ls-wide);
}

.codex-root__recent-note {
  margin: 0 auto var(--space-lg);
  max-inline-size: 32rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-widest);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.codex-root__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-lg);
  max-inline-size: none;
}

.codex-root__item {
  margin: 0;
}
.codex-root__item > a {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
  border: 1px solid var(--color-rule);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), background-color var(--dur-normal) var(--ease-out);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule);
}
.codex-root__item > a:hover {
  background: color-mix(in oklch, var(--color-sepia) 14%, var(--color-parchment));
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-oxblood-soft), 0 6px 16px color-mix(in oklch, var(--color-ink) 10%, transparent);
}
.codex-root__item img {
  inline-size: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--color-parchment-3);
  filter: contrast(1.05);
}
.codex-root__item h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  margin: 0;
}

.codex-root__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  margin: 0;
  max-inline-size: none;
}

.codex-root__summary {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-ink-2);
  margin: 0;
  max-inline-size: none;
}

.codex-root__ref {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
  padding-block-start: var(--space-2xs);
  border-block-start: 1px dashed var(--color-rule);
}

.codex-root__empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  border: 1px dashed var(--color-rule-strong);
  max-inline-size: 42rem;
  margin-inline: auto;
}
.codex-root__empty h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-oxblood);
  margin-block-end: var(--space-sm);
}
.codex-root__empty p {
  font-style: italic;
  color: var(--color-ink-2);
  margin-inline: auto;
  max-inline-size: 50ch;
}

.codex-listing {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-lg) var(--space-3xl);
}
.codex-listing.is-unholy, .codex-listing.frame--thorn-gothic {
  --color-ink: var(--color-bone, #e8dcc2);
  --color-ink-2: color-mix(in oklch, var(--color-bone, #e8dcc2) 80%, transparent);
}

.codex-listing__header {
  text-align: center;
  margin-block-end: var(--space-2xl);
  padding-block-end: var(--space-lg);
  border-block-end: 1px solid var(--color-rule-strong);
  position: relative;
}
.codex-listing__header::after {
  content: "";
  position: absolute;
  inset-block-end: -3px;
  inset-inline: 20% 20%;
  block-size: 1px;
  background: var(--color-rule);
}
.codex-listing__header h1 {
  font-family: var(--font-holy-display);
  font-size: var(--fs-4xl);
  color: var(--color-ink);
  margin-block-end: var(--space-xs);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
}

.codex-listing__kicker {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block-end: var(--space-xs);
}

.codex-listing__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-ink-2);
  margin-inline: auto;
  max-inline-size: 60ch;
}

.codex-listing__backparent {
  margin-block-start: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.codex-listing__backparent a {
  color: var(--color-oxblood);
  text-decoration: none;
  border-block-end: 1px dotted currentColor;
}
.codex-listing__backparent a:hover {
  color: var(--color-ink);
}

.codex-search {
  display: grid;
  gap: 0.35rem;
  max-inline-size: 36rem;
  margin: var(--space-md) auto 0;
  text-align: start;
}

.codex-search__label {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  text-align: center;
}

.codex-search__field {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule);
}

.codex-search__input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  background: transparent;
  border: 0;
  color: var(--color-ink);
}
.codex-search__input:focus {
  outline: none;
  background: color-mix(in oklch, var(--color-sepia) 10%, var(--color-parchment));
}
.codex-search__input::placeholder {
  color: color-mix(in oklch, var(--color-ink) 40%, transparent);
  font-style: italic;
}

.codex-search__submit {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-parchment);
  background: var(--color-oxblood);
  border: 0;
  padding: 0 1.1rem;
  cursor: pointer;
  transition: background-color var(--dur-normal) var(--ease-out);
}
.codex-search__submit:hover {
  background: color-mix(in oklch, var(--color-oxblood) 80%, black);
}

.codex-listing__group {
  margin-block-end: var(--space-2xl);
}
.codex-listing__group + .codex-listing__group {
  padding-block-start: var(--space-lg);
  border-block-start: 1px dashed var(--color-rule);
}

.codex-listing__group-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-oxblood);
  letter-spacing: var(--ls-wide);
  margin-block: var(--space-lg);
  text-transform: uppercase;
}
.codex-listing__group-label::before, .codex-listing__group-label::after {
  content: "✠";
  display: inline-block;
  margin-inline: 0.6em;
  color: var(--color-rule-strong);
  font-size: 0.8em;
  vertical-align: middle;
}

.codex-listing__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-lg);
  max-inline-size: none;
}

.codex-listing__item {
  margin: 0;
}
.codex-listing__item > a {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  block-size: 100%;
  background: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
  border: 1px solid var(--color-rule);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), background-color var(--dur-normal) var(--ease-out);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule);
}
.codex-listing__item > a:hover {
  background: color-mix(in oklch, var(--color-sepia) 14%, var(--color-parchment));
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-oxblood-soft), 0 6px 16px color-mix(in oklch, var(--color-ink) 10%, transparent);
}
.codex-listing__item img {
  inline-size: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--color-parchment-3);
  filter: contrast(1.05);
}
.codex-listing__item h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  margin: 0;
}

.codex-listing__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  margin: 0;
}

.codex-listing__summary {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-ink-2);
  margin: 0;
}

.codex-listing__ref {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
  padding-block-start: var(--space-2xs);
  border-block-start: 1px dashed var(--color-rule);
}

.codex-listing__empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  border: 1px dashed var(--color-rule-strong);
  max-inline-size: 42rem;
  margin-inline: auto;
}
.codex-listing__empty h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-oxblood);
  margin-block-end: var(--space-sm);
}
.codex-listing__empty p {
  font-style: italic;
  color: var(--color-ink-2);
  margin-inline: auto;
  max-inline-size: 50ch;
}

.codex-toc {
  max-inline-size: none;
  margin-block-end: 0;
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in oklch, var(--color-sepia) 10%, var(--color-parchment));
  border: 1px solid var(--color-rule-strong);
  position: relative;
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule);
}
.codex-toc::before, .codex-toc::after {
  content: "✠";
  position: absolute;
  color: var(--color-rule-strong);
  font-size: 0.9rem;
  inset-block-start: 4px;
}
.codex-toc::before {
  inset-inline-start: 6px;
}
.codex-toc::after {
  inset-inline-end: 6px;
}

.codex-toc__heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-xs);
  border-block-end: 1px dashed var(--color-rule);
}

.codex-toc__stamp {
  display: inline-block;
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  padding: 0.15em 0.5em;
  border: 1px solid currentColor;
  transform: rotate(-1.5deg);
}

.codex-toc__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
}

.codex-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

.codex-toc__list > * + * {
  margin-block-start: 0.35rem;
}

.codex-toc__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: var(--lh-snug);
}
.codex-toc__item--h3 {
  padding-inline-start: var(--space-md);
  font-size: 0.85rem;
  color: var(--color-ink-2);
}
.codex-toc__item a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px dotted transparent;
  transition: border-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}
.codex-toc__item a:hover {
  color: var(--color-oxblood);
  border-block-end-color: currentColor;
}

.codex-toc__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-oxblood);
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
}

.codex-article__heading {
  scroll-margin-block-start: 5rem;
  position: relative;
}

.codex-article__anchor {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.codex-article--bestiary .codex-toc {
  background: color-mix(in oklch, #1a0f0c 85%, transparent);
  border-color: color-mix(in oklch, #7a6a4a 50%, transparent);
  box-shadow: none;
  color: var(--color-bone, #e8dcc2);
}
.codex-article--bestiary .codex-toc::before, .codex-article--bestiary .codex-toc::after {
  color: color-mix(in oklch, #7a6a4a 70%, transparent);
}
.codex-article--bestiary .codex-toc__title,
.codex-article--bestiary .codex-toc__item {
  color: color-mix(in oklch, #e8dcc2 90%, transparent);
}
.codex-article--bestiary .codex-toc__item--h3 {
  color: color-mix(in oklch, #e8dcc2 70%, transparent);
}
.codex-article--bestiary .codex-toc__stamp {
  color: #e84848;
}
.codex-article--bestiary .codex-toc__num {
  color: #e84848;
}
.codex-article--bestiary .codex-toc__item a:hover {
  color: #ffdca8;
}

.codex-article__layout {
  display: grid;
  gap: var(--space-xl);
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding-inline: 0;
}
@media (min-width: 960px) {
  .codex-article__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .codex-article__layout:has(.codex-infobox), .codex-article__layout:has(.codex-article__sidebar) {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-md);
  }
}

@media (min-width: 960px) {
  .codex-article__layout:has(.codex-article__sidebar) .codex-article__body,
  .codex-article__layout:has(.codex-infobox) .codex-article__body {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
}
@media (min-width: 960px) {
  .codex-article__sidebar {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-inline-size: 0;
  }
}

.codex-article__main {
  min-inline-size: 0;
}

.codex-infobox {
  background: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
  border: 1px solid var(--color-rule-strong);
  padding: var(--space-md);
  position: relative;
  max-inline-size: none;
  block-size: fit-content;
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule), 0 2px 6px color-mix(in oklch, var(--color-ink) 6%, transparent);
}
.codex-infobox::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  background: linear-gradient(135deg, transparent 50%, color-mix(in oklch, var(--color-sepia) 20%, var(--color-parchment)) 50%);
  border-inline-start: 1px solid var(--color-rule);
  border-block-end: 1px solid var(--color-rule);
}
@media (min-width: 960px) {
  .codex-infobox {
    order: 2;
  }
}

.codex-infobox__header {
  text-align: center;
  padding-block-end: var(--space-sm);
  margin-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-rule-strong);
  position: relative;
}
.codex-infobox__header::after {
  content: "";
  position: absolute;
  inset-block-end: -3px;
  inset-inline: 15% 15%;
  block-size: 1px;
  background: var(--color-rule);
}

.codex-infobox__kicker {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 var(--space-2xs);
}

.codex-infobox__title {
  font-family: var(--font-holy-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  margin: 0;
  letter-spacing: var(--ls-normal);
}

.codex-infobox__figure {
  margin: 0 0 var(--space-sm);
  padding: 4px;
  background: var(--color-parchment);
  border: 1px solid var(--color-rule);
}
.codex-infobox__figure img {
  inline-size: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) sepia(0.1);
}

.codex-infobox__caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.75rem;
  color: var(--color-ink-2);
  text-align: center;
  margin-block-start: 0.35rem;
}

.codex-infobox__fields {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem var(--space-sm);
  font-size: 0.85rem;
  line-height: var(--lh-snug);
}

.codex-infobox__label {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
  padding-block-start: 0.1rem;
  max-width: 100px;
}

.codex-infobox__value {
  font-family: var(--font-body);
  color: var(--color-ink);
  margin: 0;
  word-break: break-word;
}

.codex-infobox__figure {
  position: relative;
}

.codex-infobox__figure-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  inline-size: 100%;
  cursor: zoom-in;
  position: relative;
}
.codex-infobox__figure-trigger img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  transition: filter var(--dur-normal) var(--ease-out);
}
.codex-infobox__figure-trigger:hover img, .codex-infobox__figure-trigger:focus-visible img {
  filter: brightness(1.05);
}
.codex-infobox__figure-trigger:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 3px;
}

.codex-infobox__figure-zoom {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: var(--color-parchment);
  border: 1px solid var(--color-parchment);
  box-shadow: 0 3px 10px color-mix(in oklch, var(--color-ink) 40%, transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
  pointer-events: none;
}
.codex-infobox__figure-zoom svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.codex-infobox__figure-trigger:hover .codex-infobox__figure-zoom,
.codex-infobox__figure-trigger:focus-visible .codex-infobox__figure-zoom {
  opacity: 1;
  transform: translateY(0);
}

.codex-infobox__timeline {
  margin: var(--space-sm) 0 0;
  padding-block-start: var(--space-sm);
  border-block-start: 1px dashed var(--color-rule);
  display: grid;
  gap: 0.15rem;
}

.codex-infobox__timeline-kicker {
  margin: 0 0 0.25rem;
  font-family: var(--font-inscription);
  font-size: 0.62rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  text-align: center;
}

.codex-infobox__timeline-label {
  margin: 0.3rem 0 0.1rem;
  font-family: var(--font-inscription);
  font-size: 0.66rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.codex-infobox__timeline-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.3rem;
  display: grid;
  gap: 0.2rem;
}
.codex-infobox__timeline-list li {
  margin: 0;
}
.codex-infobox__timeline-list a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-ink);
  padding: 0.2rem 0;
  border-block-end: 1px dotted color-mix(in oklch, var(--color-rule) 50%, transparent);
}
.codex-infobox__timeline-list a:hover, .codex-infobox__timeline-list a:focus-visible {
  background: color-mix(in oklch, var(--color-oxblood) 5%, var(--color-parchment));
}

.codex-infobox__timeline-year {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  color: var(--color-oxblood);
  white-space: nowrap;
}

.codex-infobox__timeline-title {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.codex-infobox__timeline-empty {
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-ink-2);
  font-style: italic;
  text-align: center;
  opacity: 0.7;
}

.codex-infobox__serial {
  margin: var(--space-sm) 0 0;
  padding-block-start: var(--space-xs);
  border-block-start: 1px dashed var(--color-rule);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  text-align: center;
}

.codex-article--bestiary .codex-infobox {
  background: color-mix(in oklch, #1a0f0c 88%, transparent);
  border-color: color-mix(in oklch, #7a6a4a 50%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  color: var(--color-bone, #e8dcc2);
}
.codex-article--bestiary .codex-infobox::after {
  display: none;
}
.codex-article--bestiary .codex-infobox__kicker {
  color: #e84848;
}
.codex-article--bestiary .codex-infobox__title {
  color: #fffdf5;
}
.codex-article--bestiary .codex-infobox__label {
  color: #e84848;
}
.codex-article--bestiary .codex-infobox__value {
  color: color-mix(in oklch, #f2e6cc 95%, transparent);
}
.codex-article--bestiary .codex-infobox__serial {
  color: #e84848;
  border-block-start-color: color-mix(in oklch, #7a6a4a 40%, transparent);
}
.codex-article--bestiary .codex-infobox__figure {
  background: #0f0a08;
  border-color: color-mix(in oklch, #7a6a4a 40%, transparent);
}
.codex-article--bestiary .codex-infobox__caption {
  color: color-mix(in oklch, #e8dcc2 60%, transparent);
}

.codex-gallery {
  margin-block: var(--space-xl);
  padding: var(--space-md);
  background: color-mix(in oklch, var(--color-sepia) 6%, var(--color-parchment));
  border: 1px solid var(--color-rule);
  position: relative;
}
.codex-gallery::before {
  content: "PLATES · RATIFIED";
  position: absolute;
  inset-block-start: -0.6rem;
  inset-inline-start: var(--space-md);
  padding: 0.15em 0.6em;
  background: var(--color-parchment);
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: var(--ls-widest);
  color: var(--color-oxblood);
  border: 1px solid currentColor;
  transform: rotate(-1deg);
}

.codex-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
}

.codex-gallery__item {
  margin: 0;
  padding: 6px;
  background: var(--color-parchment);
  border: 1px solid var(--color-rule);
}
.codex-gallery__item img {
  inline-size: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) sepia(0.06);
}

.codex-gallery__caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--color-ink-2);
  text-align: center;
  margin-block-start: 0.4rem;
  padding-inline: 0.2rem;
}

.codex-article--bestiary .codex-gallery {
  background: color-mix(in oklch, #1a0f0c 90%, transparent);
  border-color: color-mix(in oklch, #7a6a4a 40%, transparent);
}
.codex-article--bestiary .codex-gallery::before {
  background: #0f0a08;
  color: #e84848;
  border-color: currentColor;
}
.codex-article--bestiary .codex-gallery__item {
  background: #0f0a08;
  border-color: color-mix(in oklch, #7a6a4a 40%, transparent);
}
.codex-article--bestiary .codex-gallery__caption {
  color: color-mix(in oklch, #e8dcc2 70%, transparent);
}

.codex-not-found {
  padding-block: clamp(5rem, 10vw, 8rem) clamp(4rem, 8vw, 6rem);
  min-block-size: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.codex-not-found .zone-velvet__flank {
  background-size: auto 100%;
  background-position: center;
}

.codex-not-found__inner {
  max-inline-size: 48rem;
  margin-inline: auto;
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
}

.codex-not-found__title {
  font-size: clamp(4rem, 13vw, 11rem) !important;
  margin-block: var(--space-md) var(--space-lg) !important;
  color: #b32020 !important;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.75), 6px 6px 0 rgba(20, 5, 5, 0.5), 0 0 40px rgba(179, 32, 32, 0.3) !important;
}

.codex-not-found__deck {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: #e8dcc2;
  margin-inline: auto;
  margin-block-end: var(--space-xl);
  max-inline-size: 56ch;
  text-wrap: pretty;
}
.codex-not-found__deck code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.12em 0.45em;
  background: rgba(0, 0, 0, 0.6);
  color: #fffdf5;
  border: 1px solid rgba(232, 220, 194, 0.45);
  border-radius: 2px;
  letter-spacing: var(--ls-wide);
}

.codex-not-found__nav {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid rgba(232, 220, 194, 0.35);
}
.codex-not-found__nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  max-inline-size: none;
}
.codex-not-found__nav li {
  margin: 0;
}
.codex-not-found__nav a {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #e8dcc2;
  text-decoration: none;
  padding: 0.5em 1em;
  border: 1.5px solid rgba(232, 220, 194, 0.45);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
}
.codex-not-found__nav a:hover {
  color: #b32020;
  background: rgba(232, 220, 194, 0.9);
  border-color: #b32020;
}

.codex-document {
  position: relative;
  margin-block: var(--space-xl);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  background-color: color-mix(in oklch, var(--color-sepia) 14%, var(--color-parchment));
  background-image: url("/assets/images/ornaments/textures/paper-aged.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  border: 1px solid color-mix(in oklch, var(--color-ink) 28%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px color-mix(in oklch, var(--color-ink) 14%, transparent), 0 6px 24px color-mix(in oklch, var(--color-ink) 16%, transparent);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
}
.codex-document > * + * {
  margin-block-start: var(--space-sm);
}
.codex-document h2 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block: var(--space-lg) var(--space-sm);
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid color-mix(in oklch, var(--color-oxblood) 35%, transparent);
  text-align: center;
}
.codex-document h2:first-child {
  margin-block-start: 0;
}
.codex-document h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-block: var(--space-md) var(--space-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.codex-document p {
  max-inline-size: none;
  text-wrap: pretty;
  hyphens: auto;
}
.codex-document strong {
  color: var(--color-oxblood-strong);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}
.codex-document ul {
  list-style: none;
  padding-inline-start: 1.4em;
  margin-block: var(--space-2xs);
}
.codex-document ul li {
  position: relative;
  padding-inline-start: 0.4em;
  margin-block: 0.2em;
}
.codex-document ul li::before {
  content: "—";
  position: absolute;
  inset-inline-start: -1.2em;
  color: var(--color-oxblood);
}
.codex-document hr {
  display: none;
}
.codex-document em {
  color: color-mix(in oklch, var(--color-ink) 90%, var(--color-oxblood));
}
.codex-document .codex-margin {
  color: color-mix(in oklch, var(--color-oxblood) 55%, var(--color-ink));
}
@media (min-width: 80rem) {
  .codex-document .codex-margin {
    margin-inline-start: calc(-1 * (var(--margin-column) + var(--margin-gap) + 4rem));
  }
}

.dossier {
  position: relative;
  max-inline-size: 32rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  padding-block-end: clamp(2rem, 5vw, 3rem);
  background-color: var(--color-parchment);
  background-image: url("/assets/images/ornaments/textures/paper-aged.jpg");
  background-size: cover;
  background-blend-mode: multiply;
  border: 1px solid color-mix(in oklch, var(--color-ink) 25%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px color-mix(in oklch, var(--color-ink) 12%, transparent), 0 10px 28px color-mix(in oklch, var(--color-ink) 24%, transparent);
  isolation: isolate;
}
@media (min-width: 720px) {
  .dossier {
    max-inline-size: 52rem;
    display: grid;
    grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
    grid-template-areas: "portrait name" "portrait fields" "foot     foot";
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
    row-gap: 0;
    align-items: start;
  }
  .dossier .dossier__portraits {
    grid-area: portrait;
    align-self: start;
    margin-block-end: 0;
  }
  .dossier .dossier__name {
    grid-area: name;
    margin-block-end: var(--space-sm);
    text-align: start;
  }
  .dossier .dossier__fields {
    grid-area: fields;
    margin-block-end: 0;
  }
  .dossier .dossier__foot {
    grid-area: foot;
    margin-block-start: var(--space-lg);
  }
}

.dossier__portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}

.dossier__portrait {
  aspect-ratio: 3/4;
  margin: 0;
  padding: 0.35rem;
  background-color: var(--color-parchment-2);
  border: 1px solid color-mix(in oklch, var(--color-ink) 22%, transparent);
  box-shadow: 0 2px 6px color-mix(in oklch, var(--color-ink) 20%, transparent);
}
.dossier__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: sepia(0.25) contrast(1.05) brightness(0.96);
}

.dossier__portraits--single {
  grid-template-columns: 1fr;
  max-inline-size: 20rem;
  margin-inline: auto;
}

.dossier__station {
  text-align: center;
  font-family: var(--font-inscription);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-ink);
  padding-block-end: var(--space-2xs);
  margin-block-end: var(--space-sm);
  border-block-end: 1px solid color-mix(in oklch, var(--color-ink) 45%, transparent);
}

.dossier__name {
  font-family: var(--font-holy-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-align: center;
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid color-mix(in oklch, var(--color-ink) 25%, transparent);
  letter-spacing: var(--ls-normal);
}

.dossier__fields {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  margin-block-end: var(--space-lg);
}

.dossier__field {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: var(--space-xs);
  align-items: baseline;
  border-block-end: 1px solid color-mix(in oklch, var(--color-ink) 30%, transparent);
  padding-block-end: var(--space-3xs);
}

.dossier__label {
  font-family: var(--font-inscription);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}
.dossier__label::after {
  content: ":";
}

.dossier__value {
  font-family: var(--font-script);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: color-mix(in oklch, var(--color-ink) 88%, transparent);
  line-height: 1.2;
  min-block-size: 1.4em;
  padding-block-end: 0.1em;
}
.dossier__value:empty::before {
  content: "";
  display: inline-block;
}

.dossier__foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid color-mix(in oklch, var(--color-ink) 25%, transparent);
}

.dossier__stamp {
  display: inline-block;
  padding: 0.45em 0.9em 0.4em;
  font-family: var(--font-stamp);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: 2px;
  transform: rotate(-2deg);
  filter: contrast(0.85) saturate(0.7);
}

.dossier__ref {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.dossier__ref strong {
  display: block;
  font-family: var(--font-inscription);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
}

.dossier__signature {
  justify-self: end;
  display: grid;
  gap: var(--space-3xs);
}
.dossier__signature .signature {
  justify-self: end;
}
.dossier__signature figcaption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-ink-3);
  text-align: end;
}

@media (max-width: 560px) {
  .dossier__foot {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-md);
  }
  .dossier__signature {
    justify-self: center;
  }
  .dossier__stamp {
    justify-self: center;
  }
}
.plate-hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-bone);
  isolation: isolate;
  margin-block-end: var(--space-xl);
  margin-inline: calc(var(--gutter) * -1);
}
.plate-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/ornaments/textures/paper-aged.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

.plate-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.plate-hero__content {
  text-align: left;
}

.plate-hero__stamps {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
  flex-wrap: wrap;
  max-inline-size: none;
}
.plate-hero__stamps li {
  font-family: var(--font-stamp);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 0.35em 0.75em;
  color: var(--color-bone);
  border: 2px solid var(--color-bone-soft);
  background: color-mix(in oklch, var(--color-redaction) 70%, transparent);
  transform: rotate(-1.5deg);
}

.plate-hero__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-bone-soft);
  margin-block-end: var(--space-sm);
}

.plate-hero__title {
  font-family: var(--font-holy-display);
  font-size: clamp(2.75rem, 6.5vw, 4.75rem);
  line-height: 0.98;
  color: var(--color-parchment);
  margin: 0;
  text-wrap: balance;
  letter-spacing: var(--ls-tight);
  max-inline-size: 18ch;
}

.plate-hero__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-bone);
  margin-block-start: var(--space-xs);
  max-inline-size: 40ch;
}

.plate-hero__deck {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-bone);
  margin-block-start: var(--space-md);
  max-inline-size: 48ch;
  text-wrap: pretty;
}

.plate-hero__fields {
  margin-block-start: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, auto));
  gap: var(--space-md);
  max-inline-size: none;
}

.plate-hero__field dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-bone-soft);
  margin-block-end: var(--space-3xs);
}
.plate-hero__field dd {
  font-family: var(--font-holy-display);
  font-size: var(--fs-lg);
  color: var(--color-parchment);
  margin: 0;
}

.plate-hero__companion {
  position: relative;
  margin: 0;
  padding: 0.5rem;
  background: var(--color-parchment-3);
  border: 1px solid color-mix(in oklch, var(--color-ink) 30%, transparent);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--color-ink) 30%, transparent);
  transform: rotate(1.5deg);
  max-inline-size: 18rem;
  margin-inline-start: auto;
  align-self: end;
}
.plate-hero__companion img {
  inline-size: 100%;
  block-size: auto;
  filter: sepia(0.15) contrast(1.05);
}
.plate-hero__companion figcaption {
  margin-block-start: var(--space-xs);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-xs);
  color: var(--color-ink-2);
  background: var(--color-parchment);
  padding: 0.2em 0.4em;
  max-inline-size: none;
}

.plate-hero__stamp-approved {
  position: absolute;
  inset-block-end: clamp(0.75rem, 2vw, 1.5rem);
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  padding: 0.6em 1.2em;
  font-family: var(--font-stamp);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--color-oxblood-strong) 90%, black);
  border: 3px double color-mix(in oklch, var(--color-oxblood-strong) 90%, black);
  border-radius: 6px;
  transform: rotate(-8deg);
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 900px) {
  .plate-hero__inner {
    grid-template-columns: 1fr;
  }
  .plate-hero__companion {
    margin-inline: auto;
    max-inline-size: 16rem;
  }
  .plate-hero__title {
    font-size: clamp(2.25rem, 9vw, 3rem);
  }
}
.codex-article--bestiary {
  padding-top: 5px;
}

.codex-article--bestiary__zone {
  padding-block-start: var(--space-sm) !important;
  background-color: #0a0706 !important;
  background-image: url("/assets/images/bestiary_background.jpg") !important;
  background-size: auto !important;
  background-position: top left !important;
  background-repeat: repeat !important;
}

.bestiary-hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-bone);
  isolation: isolate;
  margin-block-end: var(--space-xl);
  margin-inline: calc(var(--gutter) * -1);
}
.bestiary-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 5, 4, 0.92) 0%, rgba(8, 5, 4, 0.65) 45%, rgba(8, 5, 4, 0.25) 100%);
  pointer-events: none;
  z-index: 0;
}

.bestiary-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 900px) {
  .bestiary-hero__inner {
    grid-template-columns: 1fr;
  }
}

.bestiary-hero__content {
  text-align: start;
  color: #f2e6cc;
}

.bestiary-hero__pretitle {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #c95151;
  margin: 0 0 var(--space-sm);
}

.bestiary-hero__title.display-distressed {
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  line-height: 0.95;
  margin: 0;
  color: #fffdf5;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  letter-spacing: var(--ls-tight);
  max-inline-size: 18ch;
}

.bestiary-hero__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: #e8dcc2;
  margin-block-start: var(--space-sm);
  text-wrap: balance;
  max-inline-size: 42ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.bestiary-hero__stamps {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  max-inline-size: none;
}
.bestiary-hero__stamps li {
  font-family: var(--font-stamp);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 0.35em 0.75em;
  color: #e8dcc2;
  border: 2px solid rgba(201, 81, 81, 0.75);
  background: rgba(58, 14, 14, 0.55);
  transform: rotate(-1.5deg);
}

.bestiary-hero__deck {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: #e8dcc2;
  margin-block-start: var(--space-md);
  max-inline-size: 48ch;
  text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.bestiary-hero__companion {
  position: relative;
  margin: 0;
  max-inline-size: 44rem;
  margin-inline-start: auto;
  align-self: center;
  transform: rotate(-2deg);
  transform-origin: top center;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.7));
}
@media (max-width: 900px) {
  .bestiary-hero__companion {
    margin-inline: auto;
    max-inline-size: 36rem;
    transform: rotate(-1deg);
  }
}

.bestiary-hero__companion-frame {
  position: relative;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(232, 220, 194, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.55);
}
.bestiary-hero__companion-frame img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  filter: contrast(1.08) brightness(1.02);
  border: 1px solid rgba(232, 220, 194, 0.22);
}
.bestiary-hero__companion-frame::before, .bestiary-hero__companion-frame::after {
  content: "";
  position: absolute;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.95;
  pointer-events: none;
  z-index: 3;
}
.bestiary-hero__companion-frame::before {
  top: -0.6rem;
  left: -0.6rem;
  background-image: url("/assets/images/ornaments/filigree/corner-silver-tl.png");
}
.bestiary-hero__companion-frame::after {
  top: -0.6rem;
  right: -0.6rem;
  background-image: url("/assets/images/ornaments/filigree/corner-silver-tr.png");
}

.codex-article--bestiary__advisory {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-block: var(--space-xl);
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #c95151;
  position: relative;
  z-index: 2;
}

.codex-article--bestiary__advisory-mark {
  font-size: 1.2em;
  color: #b32020;
}

.codex-article--bestiary__body {
  color: #f2e6cc;
  position: relative;
  z-index: 2;
}
.codex-article--bestiary__body p {
  max-inline-size: none;
  text-wrap: pretty;
  color: #f2e6cc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.codex-article--bestiary__body p + p, .codex-article--bestiary__body h2 + p, .codex-article--bestiary__body h3 + p {
  margin-block-start: var(--space-md);
}
.codex-article--bestiary__body > p:first-child::first-letter,
.codex-article--bestiary__body h2 + p::first-letter {
  font-family: var(--font-unholy-display);
  font-size: 4.5em;
  line-height: 0.8;
  float: inline-start;
  margin-inline-end: 0.12em;
  margin-block-start: 0.1em;
  padding: 0.05em 0.16em 0.02em;
  color: #d23a3a;
  border: 1.5px solid rgba(232, 220, 194, 0.35);
  background: linear-gradient(135deg, rgba(58, 14, 14, 0.7) 0%, rgba(0, 0, 0, 0.6) 70%);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}
.codex-article--bestiary__body h2 {
  font-family: var(--font-unholy-display);
  font-size: var(--fs-2xl);
  color: #fffdf5;
  margin-block-start: var(--space-2xl);
  margin-block-end: var(--space-sm);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid rgba(232, 220, 194, 0.4);
  letter-spacing: var(--ls-normal);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.codex-article--bestiary__body h3 {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: #e8dcc2;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-block-start: var(--space-xl);
}
.codex-article--bestiary__body a, .codex-article--bestiary__body .wiki-link {
  color: #e8dcc2;
  text-decoration-color: rgba(232, 220, 194, 0.45);
}
.codex-article--bestiary__body a:hover, .codex-article--bestiary__body .wiki-link:hover {
  color: #c95151;
}
.codex-article--bestiary__body .wiki-link--unregistered {
  color: rgba(232, 220, 194, 0.55);
}
.codex-article--bestiary__body .wiki-link--unregistered .wiki-link__tag {
  color: rgba(232, 220, 194, 0.4);
}
.codex-article--bestiary__body .codex-margin {
  color: rgba(232, 220, 194, 0.72);
  border-color: rgba(179, 32, 32, 0.55);
  background: transparent;
}
.codex-article--bestiary__body .codex-margin::before {
  background: #0a0706;
  color: #c95151;
}
.codex-article--bestiary__body .codex-errata {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(232, 220, 194, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.codex-article--bestiary__body .codex-errata__superseded {
  color: rgba(232, 220, 194, 0.5);
}
.codex-article--bestiary__body .codex-errata__correction {
  border-block-start-color: rgba(232, 220, 194, 0.35);
}
.codex-article--bestiary__body .codex-errata__stamp {
  color: #e8dcc2;
  border-color: rgba(232, 220, 194, 0.55);
  background: transparent;
}
.codex-article--bestiary__body .codex-redacted {
  background: #050302;
  border-color: rgba(232, 220, 194, 0.3);
}
.codex-article--bestiary__body .codex-redacted p {
  background-color: #000;
  color: transparent;
}
.codex-article--bestiary__body .codex-redacted:hover p, .codex-article--bestiary__body .codex-redacted:focus-within p {
  background-color: transparent;
  color: #e8dcc2;
}
.codex-article--bestiary__body .codex-redacted::before {
  color: #b32020;
  border-block-end-color: rgba(179, 32, 32, 0.55);
}
.codex-article--bestiary__body .codex-stamp__mark {
  color: #fffdf5;
  border-color: rgba(232, 220, 194, 0.55);
}
.codex-article--bestiary__body .codex-figure img {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(232, 220, 194, 0.3);
  padding: var(--space-sm);
}
.codex-article--bestiary__body .codex-figure figcaption {
  color: rgba(232, 220, 194, 0.75);
}

.codex-article--bestiary__body > .codex-figure,
.codex-article--bestiary__body .codex-figure {
  inline-size: min(var(--container-wide), 100vw - 2 * var(--gutter));
  max-inline-size: none;
  margin-inline-start: calc((var(--measure-body) - var(--container-wide)) / 2);
  margin-inline-end: calc((var(--measure-body) - var(--container-wide)) / 2);
}
@media (max-width: 960px) {
  .codex-article--bestiary__body > .codex-figure,
  .codex-article--bestiary__body .codex-figure {
    inline-size: min(var(--container-wide), 100vw - 2 * var(--gutter));
    margin-inline: auto;
  }
}
.codex-article--bestiary__body > .codex-figure img,
.codex-article--bestiary__body .codex-figure img {
  max-block-size: 85vh;
}

.codex-article--bestiary__footer {
  max-inline-size: 44rem;
  margin: var(--space-2xl) auto 0;
  padding-block-start: var(--space-xl);
  border-block-start: 1px solid rgba(232, 220, 194, 0.35);
  display: grid;
  gap: var(--space-xl);
  position: relative;
  z-index: 2;
}
.codex-article--bestiary__footer .codex-article__related h2,
.codex-article--bestiary__footer .codex-article__backlinks h2 {
  font-family: var(--font-unholy-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-normal);
  color: #c95151;
  border-block-end-color: rgba(179, 32, 32, 0.55);
}
.codex-article--bestiary__footer .codex-article__related a,
.codex-article--bestiary__footer .codex-article__backlinks a {
  color: #e8dcc2;
}
.codex-article--bestiary__footer .codex-article__related a::before,
.codex-article--bestiary__footer .codex-article__backlinks a::before {
  color: #c95151;
}
.codex-article--bestiary__footer .codex-article__related a:hover,
.codex-article--bestiary__footer .codex-article__backlinks a:hover {
  color: #c95151;
}
.codex-article--bestiary__footer .signature-block__title {
  color: rgba(232, 220, 194, 0.7);
}
.codex-article--bestiary__footer .signature--drax {
  color: #c95151;
}

.codex-article--bestiary__footer .codex-article__novel-cards {
  --bestiary-novel-slot: 17rem;
  --bestiary-novel-shelf: 55rem;
  inline-size: min(100%, var(--bestiary-novel-shelf));
  justify-self: center;
}
.codex-article--bestiary__footer .codex-article__novel-cards .landing-recent__list--books {
  grid-template-columns: repeat(3, var(--bestiary-novel-slot));
  justify-content: center;
  max-inline-size: none;
}

@media (max-width: 64rem) {
  .codex-article--bestiary__footer .codex-article__novel-cards {
    inline-size: min(100%, 36rem);
  }
  .codex-article--bestiary__footer .codex-article__novel-cards .landing-recent__list--books {
    grid-template-columns: repeat(2, var(--bestiary-novel-slot));
  }
}
@media (max-width: 42rem) {
  .codex-article--bestiary__footer .codex-article__novel-cards {
    inline-size: min(100%, var(--bestiary-novel-slot));
  }
  .codex-article--bestiary__footer .codex-article__novel-cards .landing-recent__list--books {
    grid-template-columns: var(--bestiary-novel-slot);
  }
}
.codex-article--bestiary__footer-stamps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.codex-article--bestiary__footer-stamps li {
  font-family: var(--font-stamp);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 0.35em 0.8em;
  color: #e8dcc2;
  border: 2px solid rgba(232, 220, 194, 0.5);
}

.landing {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-md);
}

.landing-ticker {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
  padding-inline: var(--space-sm);
  margin-block-end: var(--space-xl);
  border-block: 1px solid var(--color-rule-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.landing-ticker span {
  white-space: nowrap;
}
.landing-ticker strong {
  color: var(--color-oxblood);
  font-weight: 400;
}

.landing-columns {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.2fr) minmax(12rem, 1fr);
  gap: 0;
  margin-block: 0 var(--space-lg);
  border-block: 1px solid var(--color-rule-strong);
  padding-block: var(--space-md);
  background: linear-gradient(to right, transparent 0, var(--color-rule) 1px, transparent 1px) 31.25% top/1px 100% no-repeat, linear-gradient(to right, transparent 0, var(--color-rule) 1px, transparent 1px) 68.75% top/1px 100% no-repeat;
}
@media (max-width: 900px) {
  .landing-columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    background: none;
  }
}

.landing-col {
  min-inline-size: 0;
  padding: var(--space-md);
}
@media (max-width: 900px) {
  .landing-col {
    border-block: 1px solid var(--color-rule);
  }
}

.landing-col--main {
  padding-inline: var(--space-lg);
  border-inline: 1px solid var(--color-rule-strong);
}
@media (max-width: 900px) {
  .landing-col--main {
    border-inline: none;
  }
}

.landing-col__figure {
  margin: 0 0 var(--space-md);
  text-align: center;
}
.landing-col__figure img {
  inline-size: 65%;
  max-inline-size: 160px;
  margin-inline: auto;
  display: block;
}

.landing-col__head {
  font-family: var(--font-banner);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-ink);
  text-align: center;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
  padding-block: var(--space-2xs);
  border-block-start: 3px double var(--color-rule-strong);
  border-block-end: 3px double var(--color-rule-strong);
}

.landing-col__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  text-align: center;
  margin-block-end: var(--space-md);
  max-inline-size: none;
}

.landing-col p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--color-ink);
  margin-block-end: var(--space-sm);
  max-inline-size: none;
  hyphens: auto;
}

.landing-col--side .landing-col__figure + p::first-letter,
.landing-col--side > p:first-of-type::first-letter {
  font-family: var(--font-holy-display);
  font-size: 3.4em;
  line-height: 0.82;
  float: inline-start;
  margin-inline-end: 0.12em;
  margin-block-start: 0.08em;
  padding: 0.05em 0.14em 0.02em;
  color: var(--color-oxblood-strong);
  border: 1px solid var(--color-rule-strong);
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-holy-gold) 18%, transparent) 0%, transparent 75%);
}

.landing-bell .landing-bell__body p:first-of-type::first-letter {
  font-family: var(--font-holy-display);
  font-size: 3.2em;
  line-height: 0.82;
  float: inline-start;
  margin-inline-end: 0.12em;
  margin-block-start: 0.08em;
  padding: 0.05em 0.14em 0.02em;
  color: var(--color-oxblood);
  border: 1px solid var(--color-rule);
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-holy-gold) 12%, transparent) 0%, transparent 70%);
}

.landing-preface {
  max-inline-size: var(--measure-body);
  margin-inline: auto;
  margin-block-end: var(--space-lg);
}
.landing-preface h2 {
  font-family: var(--font-holy-display);
  font-size: var(--fs-2xl);
  text-align: center;
  margin-block-end: var(--space-md);
  padding-block: var(--space-xs);
  letter-spacing: var(--ls-normal);
  border-block: 1px solid var(--color-rule-strong);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.landing-preface h2::before, .landing-preface h2::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(to right, transparent, var(--color-rule-strong) 50%, transparent);
}
.landing-preface .landing-preface__heading-ornament {
  color: var(--color-oxblood);
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.7em;
}
.landing-preface p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-ink);
  text-wrap: pretty;
}
.landing-preface p + p {
  margin-block-start: var(--space-md);
}
.landing-preface p.has-drop-cap::first-letter,
.landing-preface p:first-of-type::first-letter {
  font-family: var(--font-holy-display);
  font-size: 4.5em;
  line-height: 0.82;
  float: inline-start;
  margin-inline-end: 0.12em;
  margin-block-start: 0.08em;
  padding: 0.05em 0.14em 0.02em;
  color: var(--color-holy-gold-strong);
  font-weight: 400;
  border: 1.5px solid var(--color-rule-strong);
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-holy-gold) 22%, transparent) 0%, color-mix(in oklch, var(--color-holy-gold) 8%, transparent) 40%, transparent 80%);
  box-shadow: inset 0 0 0 1px var(--color-parchment);
}

.landing-register {
  max-inline-size: 42rem;
  margin-inline: auto;
  margin-block: var(--space-2xl);
  text-align: center;
  position: relative;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
  background: color-mix(in oklch, var(--color-holy-gold) 6%, var(--color-parchment));
  border: 2px solid var(--color-rule-strong);
  box-shadow: inset 0 0 0 2px var(--color-parchment), inset 0 0 0 3px var(--color-rule-strong), inset 0 0 0 5px var(--color-parchment), inset 0 0 0 6px var(--color-rule), 0 8px 28px color-mix(in oklch, var(--color-ink) 16%, transparent);
}
.landing-register .banner {
  position: absolute;
  inset-block-start: -1.5rem;
  inset-inline: 0;
  max-inline-size: min(30rem, 90%);
  margin-inline: auto;
  z-index: 2;
  min-block-size: 5rem;
}
.landing-register .banner__title {
  font-family: var(--font-holy-display);
  color: var(--color-oxblood-strong);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
}
.landing-register::before, .landing-register::after {
  content: "";
  position: absolute;
  inline-size: 10px;
  block-size: 10px;
  background: var(--color-oxblood);
  border-radius: 1px;
  z-index: 1;
}
.landing-register::before {
  top: 12px;
  left: 12px;
}
.landing-register::after {
  bottom: 12px;
  right: 12px;
}

.landing-register__inner {
  max-inline-size: 30rem;
  margin-inline: auto;
  padding-block-start: var(--space-md);
}

.landing-register__deck {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-ink-2);
  margin-block-end: var(--space-md);
  max-inline-size: 46ch;
  margin-inline: auto;
}

.landing-register__form {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  text-align: left;
  max-inline-size: 28rem;
  margin-inline: auto;
}

.landing-register__label {
  display: grid;
  gap: var(--space-3xs);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  text-align: left;
}

.landing-register__input {
  inline-size: 100%;
  padding: 0.6em 0.7em;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--color-ink);
  background: var(--color-parchment);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.landing-register__input:focus {
  border-color: var(--color-oxblood);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-oxblood) 25%, transparent);
}

.landing-register__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--color-ink-3);
  text-align: left;
  margin-block-start: var(--space-sm);
}
.landing-register__consent input {
  margin-block-start: 0.3em;
  accent-color: var(--color-oxblood);
}

.landing-register__button {
  margin-block-start: var(--space-sm);
  padding: 0.7em 1.4em;
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-parchment);
  background: var(--color-oxblood-strong);
  border: 2px solid var(--color-ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.landing-register__button:hover {
  background: var(--color-oxblood);
}
.landing-register__button:active {
  transform: translateY(1px);
}

.landing-bell {
  margin: 0;
  padding: 0;
  position: relative;
}
.landing-bell .landing-bell__icon {
  margin: 0 auto var(--space-xs);
  inline-size: 3rem;
}
.landing-bell .landing-bell__icon img {
  inline-size: 100%;
  mix-blend-mode: multiply;
}
.landing-bell .landing-bell__head {
  font-family: var(--font-banner);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block-end: var(--space-2xs);
  text-align: center;
  border-block: 3px double var(--color-rule-strong);
  padding-block: var(--space-2xs);
}
.landing-bell h2 {
  font-family: var(--font-banner);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block-end: var(--space-2xs);
  text-align: center;
}
.landing-bell .landing-bell__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-3);
  text-align: center;
  margin-block-end: var(--space-md);
  padding-block-end: var(--space-sm);
  border-block-end: 1px dashed var(--color-rule);
}
.landing-bell .landing-bell__title {
  font-family: var(--font-holy-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  margin-block-end: var(--space-sm);
  text-align: center;
}
.landing-bell .landing-bell__body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-ink);
}
.landing-bell .landing-bell__body p {
  max-inline-size: none;
}
.landing-bell .landing-bell__body p + p {
  margin-block-start: var(--space-sm);
}
.landing-bell .landing-bell__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.landing-recent {
  margin-block: var(--space-2xl);
  padding-block: var(--space-lg);
  border-block: 3px double var(--color-rule-strong);
}

.landing-recent__inner {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.landing-recent__head {
  text-align: center;
  margin-block-end: var(--space-lg);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-rule);
}
.landing-recent__head h2 {
  font-family: var(--font-banner);
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  margin-block-end: var(--space-2xs);
  line-height: 1;
  text-shadow: 1px 0 var(--color-parchment), -1px 0 var(--color-parchment), 0 1px var(--color-parchment), 0 -1px var(--color-parchment), 2px 2px 0 var(--color-oxblood-strong);
}
.landing-recent__head .landing-recent__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-ink-2);
  max-inline-size: none;
  margin-block-start: var(--space-xs);
  position: relative;
}
.landing-recent__head .landing-recent__deck::before, .landing-recent__head .landing-recent__deck::after {
  content: "—";
  margin-inline: 0.5em;
  color: var(--color-oxblood);
}

.landing-recent__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-lg);
  max-inline-size: none;
}

.landing-recent__item {
  margin: 0;
}
.landing-recent__item a {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: color-mix(in oklch, var(--color-sepia) 10%, var(--color-parchment));
  border: 1px solid var(--color-rule-strong);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule-strong), inset 0 0 0 4px var(--color-parchment), inset 0 0 0 5px var(--color-rule), 0 4px 12px color-mix(in oklch, var(--color-ink) 10%, transparent);
  text-align: center;
  isolation: isolate;
}
.landing-recent__item a:hover {
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-oxblood-soft), inset 0 0 0 4px var(--color-parchment), inset 0 0 0 5px var(--color-oxblood-soft), 0 10px 24px color-mix(in oklch, var(--color-ink) 18%, transparent);
}
.landing-recent__item img {
  inline-size: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--color-parchment-3);
  filter: contrast(1.05);
  border: 1px solid var(--color-rule);
}
.landing-recent__item h3 {
  font-family: var(--font-banner);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: var(--space-2xs) 0;
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  min-inline-size: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.landing-recent__item p.landing-recent__summary {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--color-ink-2);
  margin: 0;
  max-inline-size: none;
}

.landing-recent__seal {
  position: absolute;
  inset-block-start: -0.6rem;
  inset-inline-end: -0.5rem;
  z-index: 3;
  --seal-size: 4.6rem;
}

.landing-recent__stamp {
  position: absolute;
  inset-block-start: clamp(0.7rem, 2vw, 1.4rem);
  inset-inline-start: clamp(0.6rem, 2vw, 1.3rem);
  padding: 0.35em 0.75em 0.3em;
  font-family: var(--font-stamp);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood-strong);
  border: 2px solid var(--color-oxblood-strong);
  background: transparent;
  transform: rotate(-8deg);
  filter: contrast(0.92) saturate(0.9);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-oxblood-strong) 25%, transparent);
  z-index: 3;
  pointer-events: none;
}

.landing-recent__stamp--pending {
  color: var(--color-ink);
  border-color: var(--color-ink);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-ink) 25%, transparent);
  transform: rotate(-5deg);
}

.landing-recent__list--books .landing-recent__item img {
  aspect-ratio: 2/3;
  object-fit: cover;
}

.landing-recent__list--books .landing-recent__item h3 {
  max-inline-size: 100%;
}

.landing-recent__ref {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
  padding: var(--space-2xs) 0;
  border-block-start: 1px dashed var(--color-rule);
  border-block-end: 1px dashed var(--color-rule);
}
.landing-recent__ref .landing-recent__ref-vol {
  font-weight: 700;
}
.landing-recent__ref .landing-recent__ref-sep {
  margin-inline: 0.4em;
  color: var(--color-ink-3);
}

.landing-recent__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
  padding-block-start: var(--space-2xs);
  margin-block-start: var(--space-2xs);
  border-block-start: 1px solid var(--color-rule);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-3);
  flex-wrap: wrap;
}

.landing-recent__foot-price em {
  font-style: italic;
  text-transform: none;
  color: var(--color-ink-2);
}

.landing-recent__foot-bureau {
  font-family: var(--font-inscription);
  font-weight: 700;
  color: var(--color-oxblood);
  letter-spacing: var(--ls-wider);
}

.landing-recent__ref {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
  padding-block-start: var(--space-2xs);
  border-block-start: 1px dashed var(--color-rule);
}

.landing-recent__more {
  text-align: center;
  margin-block-start: var(--space-lg);
}
.landing-recent__more a {
  font-family: var(--font-banner);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.landing-sins {
  margin-block: 0;
}

.landing-sins__gallery {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-md);
  max-inline-size: none;
}

.landing-sins__tile {
  margin: 0;
}
.landing-sins__tile > a {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-parchment-3);
  border: 1px solid var(--color-rule-strong);
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule);
}
.landing-sins__tile > a:hover {
  transform: translateY(-2px) rotate(-0.3deg);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-oxblood-soft), 0 8px 20px color-mix(in oklch, var(--color-ink) 14%, transparent);
}
.landing-sins__tile .landing-sins__portrait {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--color-parchment-3);
  filter: contrast(1.05);
}
.landing-sins__tile .landing-sins__sin {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  padding: var(--space-sm) var(--space-sm) 0;
}
.landing-sins__tile .landing-sins__name {
  font-family: var(--font-unholy-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  padding: var(--space-3xs) var(--space-sm) 0;
  letter-spacing: var(--ls-normal);
}
.landing-sins__tile .landing-sins__epithet {
  margin: var(--space-2xs) var(--space-sm) 0;
  padding: 0.35em 0.6em 0.3em;
  font-family: var(--font-stamp);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood-strong);
  border: 1.5px solid var(--color-oxblood-soft);
  border-radius: 2px;
  text-align: center;
  align-self: stretch;
}
.landing-sins__tile .landing-sins__interpretation {
  margin: var(--space-2xs) var(--space-sm) var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-3);
  text-align: center;
  align-self: stretch;
  font-style: normal;
}

.landing-sins__footnote {
  margin-block-start: var(--space-md);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-ink-2);
  max-inline-size: none;
}

.landing-petition {
  max-inline-size: 48rem;
  margin-inline: auto;
  margin-block: var(--space-2xl);
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  background: color-mix(in oklch, var(--color-holy-gold) 10%, var(--color-parchment));
  border: 2px solid var(--color-rule-strong);
  position: relative;
  text-align: center;
  box-shadow: inset 0 0 0 2px var(--color-parchment), inset 0 0 0 3px var(--color-rule-strong), inset 0 0 0 5px var(--color-parchment), inset 0 0 0 6px var(--color-rule), 0 8px 28px color-mix(in oklch, var(--color-ink) 16%, transparent);
}
.landing-petition .banner {
  position: absolute;
  inset-block-start: -2.5rem;
  inset-inline: 0;
  max-inline-size: min(40rem, 95%);
  margin-inline: auto;
  z-index: 2;
  min-block-size: clamp(7rem, 12vw, 10rem);
  aspect-ratio: 4.5/1;
  padding-inline: clamp(8rem, 22vw, 13rem);
}
.landing-petition .banner__title {
  font-family: var(--font-inscription);
  font-weight: 700;
  color: var(--color-oxblood-strong);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.landing-petition::before, .landing-petition::after {
  content: "";
  position: absolute;
  inline-size: 10px;
  block-size: 10px;
  background: var(--color-oxblood);
  border-radius: 1px;
  z-index: 1;
}
.landing-petition::before {
  top: 12px;
  left: 12px;
}
.landing-petition::after {
  bottom: 12px;
  right: 12px;
}

.landing-petition__inner {
  max-inline-size: 50ch;
  margin-inline: auto;
  margin-block-start: 47px;
  padding-block-start: var(--space-md);
}
.landing-petition__inner p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-ink);
  text-wrap: pretty;
}
.landing-petition__inner p + p {
  margin-block-start: var(--space-md);
}

.landing-petition__cta {
  display: inline-block;
  margin-block-start: var(--space-lg);
  padding: 0.7em 1.5em 0.65em;
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-parchment);
  text-decoration: none;
  background: var(--color-oxblood-strong);
  border: 2px solid var(--color-ink);
  border-radius: 2px;
  transition: background-color var(--dur-normal) var(--ease-out);
}
.landing-petition__cta:hover {
  background: var(--color-oxblood);
}

@media (max-width: 640px) {
  .landing-masthead__title {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }
  .landing-register {
    padding-inline: var(--space-md);
  }
  .landing-sins__tile > a {
    min-block-size: 12rem;
  }
}
.landing-register {
  padding-block-start: 100px;
}
.landing-register::before, .landing-register::after {
  content: none !important;
}
.landing-register .banner {
  min-block-size: 9rem;
  inset-block-start: -31px;
}

#register-heading.banner__title {
  font-size: 20px;
}

.landing-petition::before, .landing-petition::after {
  content: none !important;
}
.landing-petition .banner {
  min-block-size: clamp(7rem, 12vw, 12rem);
}
.landing-petition .banner__title {
  font-size: 17px;
  line-height: 0.8;
}

.landing-hero {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  margin-block-start: 0;
  margin-block-end: var(--space-xl);
  min-block-size: min(45rem, 100dvh - 7rem);
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-ink) 82%, transparent) 0%, color-mix(in oklch, var(--color-ink) 58%, transparent) 34%, color-mix(in oklch, var(--color-ink) 22%, transparent) 58%, color-mix(in oklch, var(--color-ink) 40%, transparent) 100%), linear-gradient(180deg, color-mix(in oklch, var(--color-ink) 50%, transparent) 0%, transparent 34%, color-mix(in oklch, var(--color-ink) 72%, transparent) 100%), url("/assets/images/hero.jpg") center/cover no-repeat;
  border-block-end: 3px double var(--color-rule-strong);
  isolation: isolate;
  overflow: hidden;
}
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--color-parchment) 6%, transparent) 0 1px, transparent 1px 7px), radial-gradient(circle at 18% 20%, color-mix(in oklch, var(--color-oxblood) 16%, transparent), transparent 30%);
  mix-blend-mode: soft-light;
  opacity: 0.7;
  pointer-events: none;
}
.landing-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 38%;
  background: linear-gradient(to top, color-mix(in oklch, var(--color-ink) 64%, transparent), transparent);
  z-index: -1;
  pointer-events: none;
}

.landing-hero__inner {
  max-inline-size: var(--container-bleed);
  min-block-size: inherit;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 4rem) var(--gutter) clamp(2.25rem, 5vw, 4rem);
  display: block;
}

.landing-hero__content {
  min-block-size: calc(min(45rem, 100dvh - 7rem) - clamp(4.5rem, 10vw, 8rem));
  max-inline-size: none;
  display: grid;
  grid-template-columns: minmax(22rem, 39rem) minmax(18rem, 1fr);
  grid-template-rows: 1fr auto auto;
  gap: var(--space-sm) clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.landing-hero__headline {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-inline-size: 9ch;
  font-family: var(--font-banner);
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 0.86;
  letter-spacing: var(--ls-wide);
  color: color-mix(in oklch, var(--color-parchment) 96%, var(--color-holy-gold));
  text-shadow: 0 2px 0 color-mix(in oklch, var(--color-ink) 88%, transparent), 0 12px 34px color-mix(in oklch, var(--color-ink) 74%, transparent);
}

.landing-hero__preamble {
  grid-column: 1;
  grid-row: 1/span 3;
  align-self: end;
  position: relative;
  max-inline-size: 39rem;
  padding: clamp(0.95rem, 2vw, 1.35rem);
  display: grid;
  gap: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-parchment) 61%, transparent), color-mix(in oklch, var(--color-parchment-2) 32%, transparent));
  border: 1px solid color-mix(in oklch, var(--color-ink) 44%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-parchment) 70%, transparent), inset 0 0 0 2px color-mix(in oklch, var(--color-rule-strong) 54%, transparent), 0 18px 42px color-mix(in oklch, var(--color-ink) 48%, transparent);
  backdrop-filter: blur(1.5px);
}
.landing-hero__preamble::before {
  content: "Filed Preamble";
  position: absolute;
  inset-block-start: -0.82rem;
  inset-inline-start: 1rem;
  padding: 0.18rem 0.55rem 0.14rem;
  font-family: var(--font-inscription);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood-strong);
  background: color-mix(in oklch, var(--color-parchment) 96%, transparent);
  border: 1px solid var(--color-rule-strong);
}
.landing-hero__preamble p {
  margin: 0;
  max-inline-size: none;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1vw, 0.98rem);
  line-height: 1.5;
  color: var(--color-ink);
  text-wrap: pretty;
}
.landing-hero__preamble p + p {
  margin-block-start: 0.62rem;
}
.landing-hero__preamble p:first-child {
  margin-block-end: 0.25rem;
  font-family: var(--font-holy-display);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1;
  color: var(--color-oxblood-strong);
}
.landing-hero__preamble p:last-child {
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--color-rule);
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood-strong);
}

.landing-hero__petitions {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-xs);
}

.landing-hero__petition {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.48rem 0.65rem 0.43rem;
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--color-parchment) 95%, var(--color-holy-gold));
  text-decoration: none;
  background: color-mix(in oklch, var(--color-ink) 64%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-parchment) 42%, transparent);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.landing-hero__petition:hover, .landing-hero__petition:focus-visible {
  color: var(--color-parchment);
  background: color-mix(in oklch, var(--color-oxblood-strong) 70%, var(--color-ink));
  border-color: color-mix(in oklch, var(--color-parchment) 68%, transparent);
}

.landing-hero__petition-mark {
  font-family: var(--font-display);
  color: color-mix(in oklch, var(--color-holy-gold) 82%, var(--color-parchment));
  font-size: 1.05em;
}

.landing-hero__petition-label::after {
  content: " ->";
  font-family: var(--font-mono);
  color: color-mix(in oklch, var(--color-holy-gold) 78%, var(--color-parchment));
}

@media (max-width: 980px) {
  .landing-hero {
    min-block-size: auto;
    background-position: 58% center;
  }
  .landing-hero__inner {
    display: block;
  }
  .landing-hero__content {
    min-block-size: auto;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .landing-hero__headline,
  .landing-hero__preamble,
  .landing-hero__petitions {
    grid-column: auto;
    grid-row: auto;
  }
  .landing-hero__headline {
    max-inline-size: 12ch;
  }
  .landing-hero__preamble {
    max-inline-size: 44rem;
  }
}
@media (max-width: 640px) {
  .landing-hero__inner {
    padding-block-start: var(--space-xl);
  }
  .landing-hero__headline {
    font-size: clamp(3rem, 17vw, 4.5rem);
  }
  .landing-hero__preamble {
    padding: var(--space-md);
  }
  .landing-hero__preamble p {
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .landing-hero__petitions {
    display: grid;
  }
}
.bureau-index {
  margin-block: var(--space-2xl);
  padding-block: var(--space-xl);
  background: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
  border-block: 1px solid var(--color-rule-strong);
  position: relative;
  background-image: radial-gradient(ellipse at 50% 0%, color-mix(in oklch, var(--color-sepia) 14%, transparent) 0%, transparent 60%);
}

.bureau-index__inner {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.bureau-index__masthead {
  text-align: center;
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

.bureau-index__census {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.1vw, 0.9rem);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-md);
  padding-block: 0.4rem;
  border-block: 1px dashed color-mix(in oklch, var(--color-oxblood) 35%, transparent);
}
.bureau-index__census .bureau-index__count {
  color: var(--color-oxblood);
  font-weight: 700;
  font-size: 1.15em;
  font-family: var(--font-mono);
}

.bureau-index__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

.bureau-index__title-ornament {
  display: inline-block;
  color: var(--color-oxblood);
  font-size: 0.7em;
  margin-inline: 0.4em;
  vertical-align: middle;
}

.bureau-index__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(var(--fs-md), 1.5vw, var(--fs-lg));
  line-height: var(--lh-loose);
  color: var(--color-ink-2);
  margin: 0 auto;
  max-inline-size: 50rem;
  text-wrap: pretty;
}

.bureau-index__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.bureau-index__tile {
  margin: 0;
  background: var(--color-parchment);
  border: 1px solid var(--color-rule-strong);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px color-mix(in oklch, var(--color-rule) 80%, transparent);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}
.bureau-index__tile:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px color-mix(in oklch, var(--color-oxblood) 50%, transparent), 0 8px 24px color-mix(in oklch, var(--color-ink) 14%, transparent);
}

.bureau-index__tile-link {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  block-size: 100%;
  text-decoration: none;
  color: var(--color-ink);
}

.bureau-index__tile-spine {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px dashed color-mix(in oklch, var(--color-rule) 60%, transparent);
}

.bureau-index__tile-count {
  color: var(--color-oxblood);
  font-weight: 700;
}

.bureau-index__tile-label {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  margin: var(--space-2xs) 0 0;
  text-wrap: balance;
}

.bureau-index__tile-deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
  margin: 0;
  margin-block-end: var(--space-xs);
}

.bureau-index__tile-featured {
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid color-mix(in oklch, var(--color-rule) 50%, transparent);
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
}

.bureau-index__tile-featured-image {
  inline-size: 4rem;
  block-size: 4rem;
  object-fit: cover;
  border: 1px solid var(--color-rule);
  background: var(--color-parchment-3);
  filter: sepia(0.18) contrast(1.05);
}

.bureau-index__tile-featured-caption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-inline-size: 0;
}

.bureau-index__tile-featured-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.bureau-index__tile-featured-title {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bureau-index__tile--random {
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-sepia) 18%, var(--color-parchment)) 0%, var(--color-parchment-2) 100%);
  border-color: color-mix(in oklch, var(--color-oxblood) 50%, var(--color-rule-strong));
}

.bureau-index__tile-randomstamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: var(--space-xs) auto 0;
  padding: var(--space-sm);
  border: 2px dashed color-mix(in oklch, var(--color-oxblood) 60%, transparent);
  color: var(--color-oxblood);
  text-align: center;
  margin-block-start: auto;
}

.bureau-index__tile-randomstamp-glyph {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
}

.bureau-index__tile-randomstamp-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.bureau-index__tile--unholy {
  background: #0e0a08;
  border-color: color-mix(in oklch, #7a6a4a 60%, transparent);
  box-shadow: inset 0 0 0 1px #1a1310, inset 0 0 0 2px color-mix(in oklch, #7a6a4a 35%, transparent);
}
.bureau-index__tile--unholy:hover {
  box-shadow: inset 0 0 0 1px #1a1310, inset 0 0 0 2px color-mix(in oklch, #b03a3a 60%, transparent), 0 8px 24px color-mix(in oklch, #b03a3a 22%, transparent);
}
.bureau-index__tile--unholy .bureau-index__tile-link {
  color: #e8dcc2;
}
.bureau-index__tile--unholy .bureau-index__tile-spine {
  color: color-mix(in oklch, #e8dcc2 70%, transparent);
  border-block-end-color: color-mix(in oklch, #7a6a4a 40%, transparent);
}
.bureau-index__tile--unholy .bureau-index__tile-count {
  color: #e84848;
}
.bureau-index__tile--unholy .bureau-index__tile-label {
  color: #e8dcc2;
}
.bureau-index__tile--unholy .bureau-index__tile-deck {
  color: color-mix(in oklch, #e8dcc2 75%, transparent);
}
.bureau-index__tile--unholy .bureau-index__tile-featured {
  border-block-start-color: color-mix(in oklch, #7a6a4a 35%, transparent);
}
.bureau-index__tile--unholy .bureau-index__tile-featured-image {
  border-color: color-mix(in oklch, #7a6a4a 60%, transparent);
  background: #1a1310;
  filter: sepia(0.05) contrast(1.1) brightness(0.92);
}
.bureau-index__tile--unholy .bureau-index__tile-featured-kicker {
  color: #e84848;
}
.bureau-index__tile--unholy .bureau-index__tile-featured-title {
  color: #e8dcc2;
}

.bureau-index__aside {
  margin-block-start: var(--space-lg);
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-ink-2);
}

.bureau-index__aside-link {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-oxblood) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.bureau-index__aside-link:hover {
  color: var(--color-oxblood-strong);
  text-decoration-color: currentColor;
}

.bureau-index__aside-link-count {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.78em;
  color: var(--color-ink-2);
  letter-spacing: var(--ls-wide);
}

.review-ledger {
  max-inline-size: 1180px;
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter, 1rem) var(--space-2xl);
  color: var(--color-ink);
}

.review-ledger__header {
  border-block: 3px double var(--color-rule-strong);
  padding-block: var(--space-lg);
  text-align: center;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--color-oxblood) 8%, transparent), transparent), var(--color-parchment);
}

.review-ledger__kicker {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-inscription);
  font-size: 0.75rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.review-ledger__title {
  margin: 0;
  font-family: var(--font-broadsheet);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
}

.review-ledger__deck {
  max-inline-size: 72ch;
  margin: var(--space-sm) auto 0;
  font-size: 1.05rem;
  line-height: 1.55;
}

.review-ledger__auth,
.review-ledger__desk {
  margin-block-start: var(--space-lg);
}

.review-ledger__auth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-sepia) 5%, var(--color-parchment));
}

.review-ledger__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.review-ledger__status[data-kind=error] {
  color: var(--color-oxblood);
}

.review-ledger__button,
.review-ledger__actions button,
.review-ledger__counts button,
.review-ledger__needed-delete {
  appearance: none;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  color: var(--color-ink);
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.review-ledger__button:hover, .review-ledger__button:focus-visible,
.review-ledger__actions button:hover,
.review-ledger__actions button:focus-visible,
.review-ledger__counts button:hover,
.review-ledger__counts button:focus-visible,
.review-ledger__needed-delete:hover,
.review-ledger__needed-delete:focus-visible {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-oxblood) 8%, var(--color-parchment));
}

.review-ledger__button--primary {
  background: var(--color-oxblood);
  border-color: var(--color-oxblood);
  color: var(--color-parchment);
}

.review-ledger__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-block-end: var(--space-md);
  border-block-end: 2px solid var(--color-rule-strong);
}

.review-ledger__tab {
  appearance: none;
  border: 1px solid var(--color-rule-strong);
  border-block-end: 0;
  background: color-mix(in oklch, var(--color-sepia) 7%, var(--color-parchment));
  color: var(--color-ink-2);
  cursor: pointer;
  font-family: var(--font-inscription);
  font-size: 0.74rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0.65rem 0.9rem;
}
.review-ledger__tab:hover, .review-ledger__tab:focus-visible, .review-ledger__tab.is-active {
  background: var(--color-parchment);
  color: var(--color-oxblood);
}
.review-ledger__tab.is-active {
  box-shadow: inset 0 3px 0 var(--color-oxblood);
}

.review-ledger__panel {
  display: none;
}
.review-ledger__panel.is-active {
  display: block;
}

.review-ledger__tools {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(14rem, 1fr) auto;
  gap: var(--space-sm);
  align-items: end;
}

.review-ledger__filter {
  display: grid;
  gap: 0.25rem;
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.review-ledger__filter select {
  min-block-size: 2.35rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  color: var(--color-ink);
  padding-inline: 0.55rem;
}

.review-ledger__search {
  min-block-size: 2.35rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  color: var(--color-ink);
  padding-inline: 0.75rem;
  font-family: var(--font-body);
}

.review-ledger__counts {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-rule-strong);
}
.review-ledger__counts li {
  background: var(--color-parchment);
}
.review-ledger__counts button {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  gap: 0.15rem;
  place-items: center;
  border: 0;
  min-block-size: 4rem;
}
.review-ledger__counts strong {
  font-family: var(--font-broadsheet);
  font-size: 1.6rem;
  line-height: 1;
}

.review-ledger__needed {
  display: grid;
  gap: var(--space-sm);
  margin-block: 0;
  padding: var(--space-md);
  border: 1px solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-sepia) 5%, var(--color-parchment));
}

.review-ledger__needed-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: end;
  border-block-end: 1px solid var(--color-rule);
  padding-block-end: 0.55rem;
}
.review-ledger__needed-head > div {
  display: grid;
  gap: 0.2rem;
}

.review-ledger__needed-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: end;
  padding-block-end: var(--space-xs);
  border-block-end: 1px dashed var(--color-rule);
}
.review-ledger__needed-controls .review-ledger__filter {
  min-inline-size: 15rem;
}

.review-ledger__needed-kicker {
  margin: 0;
  font-family: var(--font-inscription);
  font-size: 0.68rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.review-ledger__needed-title {
  margin: 0;
  font-family: var(--font-broadsheet);
  font-size: 1.45rem;
  line-height: 1;
}

.review-ledger__needed-status,
.review-ledger__needed-empty {
  margin: 0;
  color: var(--color-ink-2);
  font-style: italic;
}
.review-ledger__needed-status[data-kind=error],
.review-ledger__needed-empty[data-kind=error] {
  color: var(--color-oxblood);
}

.review-ledger__needed-list {
  overflow-x: auto;
}

.review-ledger__needed-table {
  inline-size: 100%;
  min-inline-size: 720px;
  border-collapse: collapse;
  background: var(--color-parchment);
}
.review-ledger__needed-table th,
.review-ledger__needed-table td {
  padding: 0.6rem;
  border-block-end: 1px solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}
.review-ledger__needed-table th {
  font-family: var(--font-inscription);
  font-size: 0.68rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
}
.review-ledger__needed-table code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.review-ledger__needed-priority {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.review-ledger__needed-priority[data-priority=high] {
  border-color: color-mix(in oklch, var(--color-oxblood) 70%, var(--color-rule));
  color: var(--color-oxblood);
}
.review-ledger__needed-priority[data-priority=medium] {
  border-color: color-mix(in oklch, var(--color-sepia) 75%, var(--color-rule));
  color: color-mix(in oklch, var(--color-sepia) 62%, var(--color-ink));
}
.review-ledger__needed-priority[data-priority=low] {
  color: var(--color-ink-2);
}

.review-ledger__needed-delete {
  color: var(--color-oxblood);
}
.review-ledger__needed-delete:disabled {
  cursor: wait;
  opacity: 0.55;
}

.review-ledger__needed-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.review-ledger__needed-refs a {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--color-rule);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-decoration: none;
}
.review-ledger__needed-refs a:hover, .review-ledger__needed-refs a:focus-visible {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}

.review-ledger__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-rule-strong);
}

.review-ledger__table {
  inline-size: 100%;
  min-inline-size: 900px;
  border-collapse: collapse;
  background: var(--color-parchment);
}
.review-ledger__table th,
.review-ledger__table td {
  padding: 0.7rem;
  border-block-end: 1px solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}
.review-ledger__table th {
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
}

.review-ledger__article {
  display: grid;
  gap: 0.2rem;
  color: var(--color-ink);
  text-decoration: none;
}
.review-ledger__article strong {
  font-weight: 700;
}
.review-ledger__article span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-2);
}

.review-ledger__badge {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--color-rule-strong);
  font-family: var(--font-inscription);
  font-size: 0.66rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.review-ledger__badge[data-status=prose-revised], .review-ledger__badge[data-status=clean], .review-ledger__badge[data-status=image-flagged] {
  color: var(--color-oxblood);
}
.review-ledger__badge[data-status=clean] {
  border-style: double;
}
.review-ledger__badge[data-status=accepted] {
  color: #2a6f3b;
}

.review-ledger__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.review-ledger__empty {
  text-align: center;
  font-style: italic;
  color: var(--color-ink-2);
}

.review-ledger__image-row td {
  padding: 0;
  background: color-mix(in oklch, var(--color-sepia) 5%, var(--color-parchment));
}

.review-ledger__images {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-block-end: 2px solid var(--color-rule-strong);
}

.review-ledger__images-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  border-block-end: 1px solid var(--color-rule);
  padding-block-end: 0.45rem;
}
.review-ledger__images-head strong {
  font-family: var(--font-inscription);
  font-size: 0.78rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-oxblood);
}
.review-ledger__images-head span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-2);
}

.review-ledger__images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.review-ledger__image-card {
  display: grid;
  gap: 0.55rem;
  padding: var(--space-sm);
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
}
.review-ledger__image-card figure {
  margin: 0;
  aspect-ratio: 4/3;
  border: 1px solid var(--color-rule);
  background: color-mix(in oklch, var(--color-ink) 8%, var(--color-parchment));
  overflow: hidden;
}
.review-ledger__image-card img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.review-ledger__image-meta {
  display: grid;
  gap: 0.3rem;
}
.review-ledger__image-meta p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.review-ledger__image-meta code,
.review-ledger__image-meta span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.review-ledger__image-meta span {
  color: var(--color-ink-2);
}
.review-ledger__image-meta small {
  color: var(--color-ink-2);
  font-size: 0.82rem;
  line-height: 1.35;
}

.review-ledger__image-actions {
  display: grid;
  gap: 0.45rem;
}
.review-ledger__image-actions a {
  color: var(--color-oxblood);
  font-family: var(--font-inscription);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.review-ledger__image-drop {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 2.65rem;
  padding: 0.5rem;
  border: 1px dashed var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
  cursor: pointer;
  font-family: var(--font-inscription);
  font-size: 0.68rem;
  letter-spacing: var(--ls-wide);
  text-align: center;
  text-transform: uppercase;
}
.review-ledger__image-drop input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.review-ledger__image-drop.is-dragging, .review-ledger__image-drop[data-upload-state=busy] {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-oxblood) 8%, var(--color-parchment));
}
.review-ledger__image-drop[data-upload-state=queued] {
  border-style: solid;
  color: #2a6f3b;
}
.review-ledger__image-drop[data-upload-state=error] {
  border-style: solid;
  color: var(--color-oxblood);
}

.review-ledger__images-note {
  margin: 0;
  color: var(--color-ink-2);
  font-style: italic;
}
.review-ledger__images-note--error {
  color: var(--color-oxblood);
}

.review-ledger__clipboard {
  position: fixed;
  inset-inline-start: -9999px;
  inset-block-start: 0;
}

@media (max-width: 760px) {
  .review-ledger__auth,
  .review-ledger__tools {
    grid-template-columns: 1fr;
  }
  .review-ledger__auth {
    display: grid;
  }
  .review-ledger__counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .review-ledger__needed-head {
    display: grid;
  }
}
.books-intro {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter) var(--space-lg);
  text-align: center;
}

.books-intro__inner {
  max-inline-size: 58ch;
  margin-inline: auto;
}

.books-intro__title {
  font-family: var(--font-banner);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin-block: var(--space-sm) var(--space-md);
  text-wrap: balance;
}

.books-intro__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-ink-2);
  line-height: var(--lh-loose);
}

.books-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-inline-size: var(--container-bleed);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-inline: var(--gutter);
  padding-block-end: var(--space-xl);
}

.book-entry {
  scroll-margin-block-start: var(--space-xl);
}

.book-entry__card {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  padding: var(--space-lg);
  background: color-mix(in oklch, var(--color-sepia) 6%, var(--color-parchment));
  border: 1px solid var(--color-rule-strong);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule-strong), inset 0 0 0 4px var(--color-parchment), inset 0 0 0 5px var(--color-rule), 0 4px 16px color-mix(in oklch, var(--color-ink) 10%, transparent);
}
@media (max-width: 720px) {
  .book-entry__card {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-md);
  }
}

.book-entry__cover {
  margin: 0;
}
.book-entry__cover img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--color-rule-strong);
  box-shadow: 0 6px 18px color-mix(in oklch, var(--color-ink) 25%, transparent);
  background: var(--color-parchment-3);
}

.book-entry__coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-block-start: var(--space-sm);
  padding: 0.4rem 0.6rem;
  font-family: var(--font-inscription);
  font-size: 0.68rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  border: 1px solid var(--color-oxblood-soft, var(--color-oxblood));
  border-style: dashed;
  background: color-mix(in oklch, var(--color-oxblood) 6%, var(--color-parchment));
}

.book-entry__coming-soon-mark {
  color: var(--color-oxblood);
  font-size: 0.9em;
}

.book-entry__body {
  min-inline-size: 0;
}

.book-entry__kicker {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 var(--space-2xs);
}

.book-entry__title {
  font-family: var(--font-banner);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.book-entry__pull {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-inline-start: 4px solid var(--color-oxblood);
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
  font-family: var(--font-display, var(--font-banner));
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
.book-entry__pull p {
  margin: 0;
}

.book-entry__blurb {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-ink);
}
.book-entry__blurb p + p {
  margin-block-start: var(--space-sm);
}
.book-entry__blurb p:first-child::first-letter {
  font-family: var(--font-display, var(--font-banner));
  font-size: 2.8em;
  line-height: 0.85;
  float: inline-start;
  padding-inline-end: 0.08em;
  padding-block-start: 0.08em;
  color: var(--color-oxblood);
}

.book-entry__notify {
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  background: var(--color-parchment);
  border: 1px dashed var(--color-rule-strong);
}

.book-entry__notify-lead {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
}

.book-entry__notify-label {
  display: grid;
  gap: 0.25rem;
  margin-block-end: var(--space-sm);
}
.book-entry__notify-label > span {
  font-family: var(--font-inscription);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.book-entry__notify-input {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  color: var(--color-ink);
}
.book-entry__notify-input:focus {
  outline: 0;
  border-color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
}

.book-entry__notify-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block-end: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-ink-2);
  line-height: var(--lh-snug);
}
.book-entry__notify-consent input {
  flex: none;
  margin-block-start: 0.2rem;
}

.book-entry__notify-button {
  appearance: none;
  padding: 0.7rem 1.4rem;
  background: var(--color-oxblood);
  color: var(--color-parchment);
  border: 2px solid var(--color-oxblood);
  font-family: var(--font-inscription);
  font-size: 0.78rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}
.book-entry__notify-button:hover, .book-entry__notify-button:focus-visible {
  background: var(--color-parchment);
  color: var(--color-oxblood);
}
.book-entry__notify-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.book-entry__notify-result {
  margin-block-start: var(--space-sm);
  padding: 0.6rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: var(--lh-snug);
  border-inline-start: 3px solid var(--color-rule);
}
.book-entry__notify-result[data-kind=ok] {
  border-inline-start-color: #2a7a3f;
  background: color-mix(in oklch, #2a7a3f 6%, var(--color-parchment));
  color: #1f5a2f;
}
.book-entry__notify-result[data-kind=error] {
  border-inline-start-color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-oxblood) 6%, var(--color-parchment));
  color: var(--color-oxblood);
}

.books-footer {
  text-align: center;
  padding-block: var(--space-lg);
}

.books-footer__serial {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0;
}

.book-detail {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter);
}

.book-detail__inner {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-2xl, var(--space-xl));
  align-items: start;
}
@media (max-width: 840px) {
  .book-detail__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.book-detail__cover {
  margin: 0;
  position: sticky;
  inset-block-start: var(--space-md);
}
@media (max-width: 840px) {
  .book-detail__cover {
    position: static;
    max-inline-size: 22rem;
    margin-inline: auto;
  }
}

.book-detail__cover-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  inline-size: 100%;
  cursor: zoom-in;
  position: relative;
}
.book-detail__cover-trigger img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--color-rule-strong);
  box-shadow: 0 10px 28px color-mix(in oklch, var(--color-ink) 28%, transparent);
  background: var(--color-parchment-3);
  transition: box-shadow var(--dur-normal) var(--ease-out);
}
.book-detail__cover-trigger:hover img, .book-detail__cover-trigger:focus-visible img {
  box-shadow: 0 14px 36px color-mix(in oklch, var(--color-ink) 40%, transparent);
}
.book-detail__cover-trigger:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 4px;
}

.book-detail__cover-zoom {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-end: 0.75rem;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: var(--color-parchment);
  border: 1px solid var(--color-parchment);
  box-shadow: 0 3px 10px color-mix(in oklch, var(--color-ink) 40%, transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
  pointer-events: none;
}
.book-detail__cover-zoom svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.book-detail__cover-trigger:hover .book-detail__cover-zoom,
.book-detail__cover-trigger:focus-visible .book-detail__cover-zoom {
  opacity: 1;
  transform: translateY(0);
}

.book-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(14, 11, 9, 0.92);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: var(--space-md);
  opacity: 0;
  transition: opacity 0.18s var(--ease-out);
}
.book-lightbox.is-visible {
  opacity: 1;
}

.book-lightbox__figure {
  margin: 0;
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  max-block-size: 100%;
  max-inline-size: 100%;
}

.book-lightbox__img {
  display: block;
  max-inline-size: 95vw;
  max-block-size: calc(100dvh - 7rem);
  inline-size: auto;
  block-size: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid color-mix(in oklch, var(--color-parchment) 40%, transparent);
  background: var(--color-parchment);
}

.book-lightbox__caption {
  font-family: var(--font-inscription);
  font-size: 0.78rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: color-mix(in oklch, var(--color-parchment) 85%, transparent);
  max-inline-size: 80ch;
  text-align: center;
  margin-inline: auto;
  text-wrap: pretty;
}

.book-lightbox__close {
  appearance: none;
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--color-parchment) 50%, transparent);
  background: rgba(14, 11, 9, 0.85);
  color: var(--color-parchment);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}
.book-lightbox__close:hover, .book-lightbox__close:focus-visible {
  background: var(--color-oxblood);
  color: var(--color-parchment);
}

body.is-lightbox-open {
  overflow: hidden;
}

.book-detail__body {
  min-inline-size: 0;
}

.book-detail__crumbs {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.book-detail__crumbs a {
  color: var(--color-oxblood);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in oklch, var(--color-oxblood) 30%, transparent);
}
.book-detail__crumbs a:hover, .book-detail__crumbs a:focus-visible {
  border-block-end-color: var(--color-oxblood);
}

.book-detail__kicker {
  font-family: var(--font-inscription);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 var(--space-2xs);
}

.book-detail__title {
  font-family: var(--font-banner);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.book-detail__pull {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-inline-start: 4px solid var(--color-oxblood);
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
  font-family: var(--font-display, var(--font-banner));
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
.book-detail__pull p {
  margin: 0;
}

.book-detail__blurb {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-ink);
  margin-block-end: var(--space-lg);
}
.book-detail__blurb p + p {
  margin-block-start: var(--space-sm);
}
.book-detail__blurb p:first-child::first-letter {
  font-family: var(--font-display, var(--font-banner));
  font-size: 3em;
  line-height: 0.85;
  float: inline-start;
  padding-inline-end: 0.08em;
  padding-block-start: 0.08em;
  color: var(--color-oxblood);
}

.book-entry__more {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-inscription);
  font-size: 0.78rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.book-entry__more a {
  color: var(--color-oxblood);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in oklch, var(--color-oxblood) 30%, transparent);
}
.book-entry__more a:hover, .book-entry__more a:focus-visible {
  border-block-end-color: var(--color-oxblood);
}

.book-entry__cover a {
  display: block;
  color: inherit;
}

.book-entry__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-normal) var(--ease-out);
}
.book-entry__title a:hover, .book-entry__title a:focus-visible {
  background-size: 100% 1px;
}

.novel-codex-cards {
  margin-block: var(--space-xl) 0;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-rule);
}

.novel-codex-cards__heading {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 var(--space-2xs);
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid var(--color-oxblood-soft);
}

.novel-codex-cards__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-md);
}

.novel-codex-cards .codex-listing__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-inline-size: none;
}

@media (max-width: 64rem) {
  .novel-codex-cards .codex-listing__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 42rem) {
  .novel-codex-cards .codex-listing__list {
    grid-template-columns: 1fr;
  }
}
.books-others {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter) var(--space-2xl, var(--space-xl));
  border-block-start: 1px solid var(--color-rule);
}

.books-others__heading {
  font-family: var(--font-banner);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 0.95;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  text-align: center;
  margin: 0 0 var(--space-lg);
}

.books-others__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-md);
}

.books-others__item {
  margin: 0;
}

.books-others__link {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
  color: var(--color-ink);
  text-decoration: none;
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
  border: 1px solid var(--color-rule);
  transition: background var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
}
.books-others__link:hover, .books-others__link:focus-visible {
  background: color-mix(in oklch, var(--color-oxblood) 8%, var(--color-parchment));
  border-color: var(--color-oxblood);
}

.books-others__cover {
  margin: 0;
}
.books-others__cover img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  border: 1px solid var(--color-rule-strong);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--color-ink) 18%, transparent);
  background: var(--color-parchment-3);
}

.books-others__meta {
  display: grid;
  gap: 0.2rem;
}

.books-others__kicker {
  font-family: var(--font-inscription);
  font-size: 0.65rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0;
}

.books-others__title {
  font-family: var(--font-banner);
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.books-others__pull {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
  margin: 0;
}

.books-others__back {
  text-align: center;
  margin-block-start: var(--space-lg);
  font-family: var(--font-inscription);
  font-size: 0.78rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.books-others__back a {
  color: var(--color-oxblood);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in oklch, var(--color-oxblood) 30%, transparent);
}
.books-others__back a:hover, .books-others__back a:focus-visible {
  border-block-end-color: var(--color-oxblood);
}

.history-page {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter);
}

.history-page__masthead {
  text-align: center;
  margin-block-end: var(--space-xl);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-rule);
}

.history-page__title {
  font-family: var(--font-banner);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin-block: var(--space-sm) var(--space-md);
  text-wrap: balance;
}

.history-page__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-ink-2);
  max-inline-size: 58ch;
  margin-inline: auto;
}

.history-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 960px) {
  .history-page__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.history-page__body {
  min-inline-size: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-ink);
}
.history-page__body > section + section {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: 1px dashed var(--color-rule);
}
.history-page__body p {
  margin: 0;
  max-inline-size: 68ch;
}
.history-page__body p + p {
  margin-block-start: var(--space-sm);
  text-indent: 1.5em;
}

.history-page__chapter-title {
  font-family: var(--font-display, var(--font-banner));
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  margin: 0 0 var(--space-2xs);
  text-wrap: balance;
}

.history-page__chapter-deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-md);
  max-inline-size: 60ch;
}

.history-page__chapter > p:first-of-type::first-letter {
  font-family: var(--font-display, var(--font-banner));
  font-size: 3.2em;
  line-height: 0.85;
  float: inline-start;
  padding-inline-end: 0.08em;
  padding-block-start: 0.08em;
  color: var(--color-oxblood);
}

.history-page__footer-note {
  margin-block-start: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-rule);
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-ink-2);
  text-align: center;
}
.history-page__footer-note em {
  font-style: italic;
}

.history-page__timeline {
  position: sticky;
  inset-block-start: var(--space-md);
  max-block-size: calc(100dvh - 4rem);
  overflow-y: auto;
  padding: var(--space-md);
  background: color-mix(in oklch, var(--color-sepia) 6%, var(--color-parchment));
  border: 1px solid var(--color-rule-strong);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule), inset 0 0 0 4px var(--color-parchment), inset 0 0 0 5px var(--color-rule-strong);
  scrollbar-width: thin;
  scrollbar-color: var(--color-rule) transparent;
}
@media (max-width: 960px) {
  .history-page__timeline {
    position: static;
    max-block-size: none;
  }
}

.history-page__timeline-head {
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-rule);
  margin-block-end: var(--space-sm);
  text-align: center;
}
.history-page__timeline-head h2 {
  font-family: var(--font-banner);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  margin: 0 0 var(--space-2xs);
}

.history-page__timeline-kicker {
  font-family: var(--font-inscription);
  font-size: 0.68rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 var(--space-2xs);
}

.history-page__timeline-deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
  margin: 0;
}
.history-page__timeline-deck em {
  font-style: italic;
}

.history-page__timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
  display: grid;
  gap: 0.35rem;
}

.history-page__timeline-item {
  margin: 0;
}
.history-page__timeline-item a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  padding: 0.45rem 0.35rem;
  text-decoration: none;
  color: var(--color-ink);
  border-block-end: 1px dotted color-mix(in oklch, var(--color-rule) 65%, transparent);
  transition: background var(--dur-normal) var(--ease-out);
}
.history-page__timeline-item a:hover, .history-page__timeline-item a:focus-visible {
  background: color-mix(in oklch, var(--color-oxblood) 8%, var(--color-parchment));
}

.history-page__timeline-year {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: var(--ls-wide);
  color: var(--color-oxblood);
  white-space: nowrap;
  padding-block-start: 0.1rem;
}

.history-page__timeline-meta {
  display: grid;
  gap: 0.05rem;
  min-inline-size: 0;
}

.history-page__timeline-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.history-page__timeline-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}

.history-page__timeline-empty {
  margin: 0;
  padding: var(--space-sm);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
  text-align: center;
}

.map {
  --map-red: var(--color-oxblood);
  --map-paper: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
  --map-ink: var(--color-ink);
  max-inline-size: 1500px;
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter) var(--space-2xl);
  color: var(--map-ink);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.map.is-ready {
  opacity: 1;
  transform: none;
}

.map__docket-kicker,
.map__field span,
.map__meta,
.map__unresolved summary {
  font-family: var(--font-inscription);
  font-size: 0.74rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.map__registry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: end;
  margin-block: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-sepia) 6%, var(--color-parchment));
}

.map__calibrator {
  margin-block: calc(var(--space-lg) * -0.45) var(--space-lg);
  border: 1px solid var(--color-oxblood);
  background: repeating-linear-gradient(90deg, transparent 0 28px, color-mix(in oklch, var(--color-oxblood) 5%, transparent) 28px 29px), color-mix(in oklch, var(--color-oxblood) 7%, var(--color-parchment));
}

.map__calibrator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-block-end: 1px solid var(--color-rule-strong);
}
.map__calibrator-head h2 {
  margin: 0;
  font-family: var(--font-holy-display);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.map__calibrator-body {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) auto minmax(16rem, 28rem);
  gap: var(--space-sm);
  align-items: end;
  padding: var(--space-md);
}

.map__calibrator-body[hidden] {
  display: none;
}

.map__calibrator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-rule-strong);
}

.map__calibrator-signin,
.map__calibrator-actions button {
  min-block-size: 2.35rem;
  border: 0;
  background: var(--color-parchment);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  padding-inline: 0.75rem;
  text-transform: uppercase;
}
.map__calibrator-signin:hover, .map__calibrator-signin:focus-visible, .map__calibrator-signin.is-active,
.map__calibrator-actions button:hover,
.map__calibrator-actions button:focus-visible,
.map__calibrator-actions button.is-active {
  background: var(--color-oxblood);
  color: var(--color-parchment);
  outline: 0;
}

.map__calibrator-status {
  margin: 0;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: var(--lh-snug);
  color: var(--color-ink-2);
}
.map__calibrator-status[data-kind=error] {
  color: var(--color-oxblood);
}
.map__calibrator-status[data-kind=ok] {
  color: var(--color-ink);
}

.map.is-calibrating .map__svg {
  cursor: crosshair;
}

.map__controls {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 16rem) auto;
  gap: var(--space-sm);
  align-items: end;
}

.map__field {
  display: grid;
  gap: 0.35rem;
}
.map__field input,
.map__field select {
  min-block-size: 2.5rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 0;
  background: var(--color-parchment);
  color: var(--color-ink);
  font: inherit;
  padding-inline: 0.7rem;
}

.map__buttons {
  display: flex;
  gap: 1px;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-rule-strong);
}
.map__buttons button {
  min-inline-size: 2.6rem;
  min-block-size: 2.5rem;
  border: 0;
  border-radius: 0;
  background: var(--color-parchment);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-inscription);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.map__buttons button:hover, .map__buttons button:focus-visible {
  color: var(--color-parchment);
  background: var(--map-red);
  outline: 0;
}

.map__meta {
  display: grid;
  gap: 0.35rem;
  color: var(--color-ink-2);
  max-inline-size: 34ch;
}
.map__meta p {
  margin: 0;
}

.map__note {
  color: var(--color-oxblood);
}

.map__workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
  gap: var(--space-md);
  align-items: stretch;
}

.map__plate {
  aspect-ratio: 4000/2545;
  min-block-size: 0;
  border: 1px solid var(--color-rule-strong);
  background: linear-gradient(color-mix(in oklch, var(--color-ink) 16%, transparent), transparent 12%), var(--color-redaction);
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--color-ink) 7%, transparent);
  overflow: hidden;
}

.map__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.map.is-dragging .map__svg {
  cursor: grabbing;
}

.map__base {
  filter: sepia(0.22) saturate(0.82) contrast(1.08);
}

.map__marker {
  color: var(--map-red);
  cursor: pointer;
  outline: none;
}
.map__marker circle {
  fill: color-mix(in oklch, var(--color-oxblood) 86%, var(--color-parchment));
  stroke: var(--color-parchment);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.map__marker text {
  display: none;
  paint-order: stroke;
  stroke: color-mix(in oklch, var(--color-parchment) 88%, transparent);
  stroke-width: 7;
  stroke-linejoin: round;
  fill: var(--color-ink);
  font-family: var(--font-inscription);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  pointer-events: none;
}
.map__marker:hover circle, .map__marker:focus-visible circle, .map__marker.is-selected circle {
  fill: var(--color-ink);
  stroke: var(--color-holy-gold-soft);
}
.map__marker.is-hidden {
  display: none;
}

.map__marker-ring {
  fill: transparent;
  stroke: color-mix(in oklch, var(--color-oxblood) 45%, transparent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.map__marker--bastion circle {
  fill: color-mix(in oklch, var(--color-oxblood) 72%, var(--color-redaction));
}

.map__marker--front circle {
  fill: var(--color-iron);
}

.map__marker--sanctuary circle {
  fill: var(--color-holy-gold-strong);
}

.map.is-deep .map__marker text,
.map__marker.is-selected text {
  display: block;
}

.map__docket {
  min-block-size: 100%;
  max-inline-size: none;
}

.map__docket-figure[hidden] {
  display: none;
}

.map__docket-figure img {
  aspect-ratio: 4/3;
}

.map__docket-summary {
  margin: 0 0 var(--space-md);
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-rule);
  line-height: var(--lh-base);
}

.map__facts {
  margin-block-end: var(--space-md);
}
.map__facts dt,
.map__facts dd {
  padding-block-end: 0.2rem;
}

.map__article-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.5rem;
  padding-inline: var(--space-md);
  border: 1px solid var(--map-red);
  background: var(--map-red);
  color: var(--color-parchment);
  font-family: var(--font-inscription);
  font-size: 0.76rem;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  text-transform: uppercase;
}
.map__article-link:hover, .map__article-link:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.map__unresolved {
  margin-block-start: var(--space-lg);
  border: 1px solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-sepia) 5%, var(--color-parchment));
}
.map__unresolved summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-oxblood);
}
.map__unresolved ul {
  columns: 3 14rem;
  margin: 0;
  padding: 0 var(--space-md) var(--space-md) calc(var(--space-md) + 1rem);
}
.map__unresolved li {
  break-inside: avoid;
  margin-block: 0.3rem;
}

@media (max-width: 1060px) {
  .map__registry,
  .map__workbench,
  .map__calibrator-body {
    grid-template-columns: 1fr;
  }
  .map__meta {
    max-inline-size: none;
  }
}
@media (max-width: 760px) {
  .map {
    padding-inline: var(--space-sm);
  }
  .map__controls {
    grid-template-columns: 1fr;
  }
  .map__buttons {
    justify-self: stretch;
  }
  .map__buttons button {
    flex: 1;
  }
  .map__plate,
  .map__svg {
    min-block-size: 62vh;
  }
  .map__facts {
    grid-template-columns: 1fr;
  }
  .map__facts dd {
    padding-block-start: 0;
  }
}
.codex-needed {
  max-inline-size: var(--container-bleed);
  margin-inline: auto;
  padding: var(--space-xl) var(--gutter);
}

.codex-needed__head {
  text-align: center;
  margin-block-end: var(--space-xl);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--color-rule);
}

.codex-needed__title {
  font-family: var(--font-banner);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
  margin-block: var(--space-sm) var(--space-md);
  text-wrap: balance;
}

.codex-needed__deck {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-ink-2);
  max-inline-size: 60ch;
  margin-inline: auto;
}

.codex-needed__serial {
  margin-block-start: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.codex-needed__serial-sep {
  display: inline-block;
  margin-inline: 0.5rem;
  color: var(--color-rule-strong);
}

.codex-needed__controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  margin-block-end: var(--space-lg);
  padding: var(--space-sm);
  border: 1px solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-ink) 4%, var(--color-parchment));
  box-shadow: inset 0 0 0 1px var(--color-parchment);
}
@media (max-width: 760px) {
  .codex-needed__controls {
    grid-template-columns: 1fr;
  }
}

.codex-needed__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.codex-needed__filter,
.codex-needed__export {
  min-block-size: 2.5rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  color: var(--color-ink);
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
}
.codex-needed__filter:hover, .codex-needed__filter:focus-visible,
.codex-needed__export:hover,
.codex-needed__export:focus-visible {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}
.codex-needed__filter:disabled,
.codex-needed__export:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.codex-needed__filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
}
.codex-needed__filter[aria-pressed=true] {
  background: color-mix(in oklch, var(--color-oxblood) 10%, var(--color-parchment));
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}
.codex-needed__filter b {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.45rem;
  block-size: 1.45rem;
  padding-inline: 0.25rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
}

.codex-needed__export {
  justify-self: end;
  padding: 0.45rem 0.9rem;
}
@media (max-width: 760px) {
  .codex-needed__export {
    justify-self: stretch;
  }
}

.codex-needed__status {
  grid-column: 1/-1;
  margin: 0;
  padding-block-start: var(--space-xs);
  border-block-start: 1px dashed var(--color-rule);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.codex-needed__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
  counter-reset: none;
}

.codex-needed__item {
  margin: 0;
  padding: var(--space-md);
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
  border: 1px solid var(--color-rule-strong);
  box-shadow: inset 0 0 0 1px var(--color-parchment), inset 0 0 0 2px var(--color-rule);
}

.codex-needed__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block-end: var(--space-sm);
  border-block-end: 1px dashed var(--color-rule);
  margin-block-end: var(--space-sm);
}
@media (max-width: 640px) {
  .codex-needed__row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

.codex-needed__primary {
  min-inline-size: 0;
}

.codex-needed__priority {
  display: inline-block;
  margin: 0 0 0.35rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
  background: color-mix(in oklch, var(--color-ink) 3%, var(--color-parchment));
}

.codex-needed__priority--high {
  border-color: color-mix(in oklch, var(--color-oxblood) 70%, var(--color-rule));
  color: var(--color-oxblood);
}

.codex-needed__priority--medium {
  border-color: color-mix(in oklch, var(--color-sepia) 75%, var(--color-rule));
  color: color-mix(in oklch, var(--color-sepia) 62%, var(--color-ink));
}

.codex-needed__priority--low {
  color: var(--color-ink-2);
}

.codex-needed__suggested {
  font-family: var(--font-banner);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: var(--ls-wide);
  color: var(--color-ink);
  margin: 0 0 0.25rem;
  word-break: break-word;
}

.codex-needed__slug {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-ink-2);
  background: color-mix(in oklch, var(--color-ink) 5%, var(--color-parchment));
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--color-rule);
  word-break: break-all;
}

.codex-needed__count {
  text-align: end;
  min-inline-size: 5rem;
}
@media (max-width: 640px) {
  .codex-needed__count {
    text-align: start;
  }
}

.codex-needed__count-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--color-oxblood);
  font-weight: 700;
}

.codex-needed__count-label {
  font-family: var(--font-inscription);
  font-size: 0.68rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.codex-needed__referencers-label {
  font-family: var(--font-inscription);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0 0 0.25rem;
}

.codex-needed__referencers-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}
.codex-needed__referencers-list li {
  margin: 0;
}
.codex-needed__referencers-list a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-rule);
  background: var(--color-parchment);
}
.codex-needed__referencers-list a:hover, .codex-needed__referencers-list a:focus-visible {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-oxblood) 6%, var(--color-parchment));
}

.codex-needed__referencers-more {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-2);
  font-style: italic;
}

.citizen-card {
  margin-block-start: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-sepia) 18%, var(--color-parchment)) 0%, var(--color-parchment-2) 100%);
  border: 2px solid var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-parchment), inset 0 0 0 3px var(--color-ink-2), 0 8px 24px color-mix(in oklch, var(--color-ink) 18%, transparent);
  text-align: left;
  animation: bureau-stamp-descend var(--dur-slower) var(--ease-stamp) both;
  transform-origin: 50% 20%;
  position: relative;
}
.citizen-card__rail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-ink-2);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--color-rule-strong);
  margin-block-end: var(--space-sm);
}
.citizen-card__number {
  color: var(--color-oxblood);
}
.citizen-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
}
.citizen-card__fields {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
}
.citizen-card__fields dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin: 0;
}
.citizen-card__fields dd {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--color-ink);
  margin: 0;
}
.citizen-card__stamp {
  position: absolute;
  inset-inline-end: var(--space-md);
  inset-block-end: var(--space-md);
  padding: 0.4em 0.9em 0.35em;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-oxblood-strong);
  border: 2px solid var(--color-oxblood-strong);
  transform: rotate(-6deg);
  background: var(--color-parchment);
}

.citizen-card__follow {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  margin-block-start: var(--space-md);
  max-inline-size: 52ch;
}

.registration-error {
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  background: color-mix(in oklch, var(--color-oxblood) 12%, var(--color-parchment));
  border: 1px solid var(--color-oxblood);
  text-align: center;
}
.registration-error__stamp {
  display: inline-block;
  padding: 0.4em 1em 0.35em;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-parchment);
  background: var(--color-oxblood-strong);
  border: 2px solid var(--color-ink);
  transform: rotate(-2deg);
  margin-block-end: var(--space-sm);
}
.registration-error p {
  color: var(--color-ink);
  font-family: var(--font-body);
  max-inline-size: none;
}

.admin-pencil {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.4rem;
  margin: 0;
  cursor: pointer;
  color: var(--color-oxblood);
  opacity: 0.55;
  transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
  line-height: 0;
}
.admin-pencil svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  display: block;
}
.admin-pencil:hover, .admin-pencil:focus-visible {
  opacity: 1;
  transform: rotate(-12deg);
}
.admin-pencil:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 3px;
}

.codex-root__admin-only {
  display: none;
}

.is-admin .codex-root__admin-only {
  display: block;
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px dashed var(--color-oxblood-soft, var(--color-oxblood));
  position: relative;
}
.is-admin .codex-root__admin-only::before {
  content: "OPERATOR";
  display: block;
  font-family: var(--font-inscription);
  font-size: 0.62rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin-block-end: var(--space-2xs);
}

.is-admin .admin-pencil {
  opacity: 0.9;
  color: var(--color-oxblood-strong, var(--color-oxblood));
  position: relative;
}
.is-admin .admin-pencil::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  inline-size: 6px;
  block-size: 6px;
  background: #2a7a3f;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-parchment);
}

.admin-only-nav {
  display: none;
}

.is-admin .admin-only-nav {
  display: inline-flex;
}

.admin-editor__mount {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 9000;
  pointer-events: none;
}
.admin-editor__mount[hidden] {
  display: none;
}

.admin-editor__panel {
  pointer-events: auto;
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
  color: var(--color-ink);
  border-inline-start: 2px solid var(--color-rule-strong);
  box-shadow: -12px 0 40px color-mix(in oklch, var(--color-ink) 30%, transparent);
  block-size: 100dvh;
  max-block-size: 100dvh;
  inline-size: min(640px, 95vw);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 0.9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block-end: max(var(--space-2xl), env(safe-area-inset-bottom));
  animation: admin-editor-slide 0.2s var(--ease-out);
}

@keyframes admin-editor-slide {
  from {
    transform: translateX(100%);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.admin-editor__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-block-end: 1px solid var(--color-rule);
  background: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
}

.admin-editor__heading {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-editor__close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-oxblood);
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.admin-editor__close:hover, .admin-editor__close:focus-visible {
  background: var(--color-oxblood);
  color: var(--color-parchment);
}

.admin-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-xs) var(--space-md);
  border-block-end: 1px dashed var(--color-rule);
  background: var(--color-parchment);
}

.admin-editor__tool {
  appearance: none;
  background: var(--color-parchment);
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
  padding: 0.35rem 0.7rem;
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.admin-editor__tool kbd {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0 0.35em;
  border: 1px solid var(--color-rule);
  background: color-mix(in oklch, var(--color-sepia) 10%, var(--color-parchment));
}
.admin-editor__tool:hover, .admin-editor__tool:focus-visible {
  background: color-mix(in oklch, var(--color-oxblood) 12%, var(--color-parchment));
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}

.admin-editor__tool-divider {
  inline-size: 1px;
  block-size: 1rem;
  background: var(--color-rule);
  margin-inline: 0.3rem;
}

.admin-editor__dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-block-end: 1px dashed var(--color-rule);
  background: color-mix(in oklch, var(--color-sepia) 3%, var(--color-parchment));
}

.admin-editor__field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  cursor: pointer;
}
.admin-editor__field small {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink-2);
  font-style: italic;
  margin-inline-start: 0.25rem;
}

.admin-editor__field--check {
  cursor: pointer;
}

.admin-editor__field-label {
  display: inline-flex;
  align-items: center;
}

.admin-editor__field-input {
  appearance: none;
  inline-size: 5.5rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: normal;
  text-align: center;
}
.admin-editor__field-input:focus {
  outline: 0;
  border-color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-sepia) 6%, var(--color-parchment));
}
.admin-editor__field-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.admin-editor__field-check {
  appearance: none;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  cursor: pointer;
  position: relative;
  flex: none;
}
.admin-editor__field-check:checked {
  background: var(--color-oxblood);
  border-color: var(--color-oxblood);
}
.admin-editor__field-check:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-parchment);
  font-size: 0.85rem;
  line-height: 1;
}
.admin-editor__field-check:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 2px;
}
.admin-editor__field-check:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.admin-editor__textarea {
  flex: 1;
  inline-size: 100%;
  display: block;
  border: 0;
  resize: none;
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-parchment);
  min-block-size: 0;
}
.admin-editor__textarea:focus {
  outline: 0;
  background: color-mix(in oklch, var(--color-sepia) 3%, var(--color-parchment));
}

.admin-editor__infobox {
  border-block-start: 1px dashed var(--color-rule);
  background: color-mix(in oklch, var(--color-sepia) 2%, var(--color-parchment));
}

.admin-editor__infobox-summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-inscription);
  font-size: 0.76rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  user-select: none;
}
.admin-editor__infobox-summary small {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink-2);
  font-style: italic;
}
.admin-editor__infobox-summary::marker {
  color: var(--color-oxblood);
}
.admin-editor__infobox-summary:hover {
  background: color-mix(in oklch, var(--color-oxblood) 4%, var(--color-parchment));
}

.admin-editor__infobox-body {
  padding: var(--space-xs) var(--space-md) var(--space-sm);
  display: grid;
  gap: var(--space-xs);
}

.admin-editor__ib-heading-row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.5rem;
  align-items: center;
}
.admin-editor__ib-heading-row > span {
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

.admin-editor__ib-heading,
.admin-editor__ib-label,
.admin-editor__ib-value,
.admin-editor__wide-field input,
.admin-editor__wide-field textarea,
.admin-editor__wide-field select {
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  color: var(--color-ink);
  min-inline-size: 0;
}
.admin-editor__ib-heading:focus,
.admin-editor__ib-label:focus,
.admin-editor__ib-value:focus,
.admin-editor__wide-field input:focus,
.admin-editor__wide-field textarea:focus,
.admin-editor__wide-field select:focus {
  outline: 0;
  border-color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
}
.admin-editor__ib-heading:disabled,
.admin-editor__ib-label:disabled,
.admin-editor__ib-value:disabled,
.admin-editor__wide-field input:disabled,
.admin-editor__wide-field textarea:disabled,
.admin-editor__wide-field select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-editor__wide-field {
  display: grid;
  gap: 0.25rem;
}
.admin-editor__wide-field > span {
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.admin-editor__wide-field textarea {
  resize: vertical;
  line-height: 1.45;
}

.admin-editor__ib-list {
  display: grid;
  gap: 0.3rem;
}

.admin-editor__ib-row {
  display: grid;
  grid-template-columns: 10rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.admin-editor__ib-label {
  font-family: var(--font-inscription);
  font-size: 0.74rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.admin-editor__ib-remove {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  inline-size: 1.8rem;
  block-size: 1.8rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.admin-editor__ib-remove:hover, .admin-editor__ib-remove:focus-visible {
  border-color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-oxblood) 10%, var(--color-parchment));
  color: var(--color-oxblood);
}

.admin-editor__ib-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: var(--space-xs);
}

.admin-editor__tool--primary {
  background: var(--color-oxblood);
  border-color: var(--color-oxblood);
  color: var(--color-parchment);
}
.admin-editor__tool--primary:hover, .admin-editor__tool--primary:focus-visible {
  background: var(--color-parchment);
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}

.admin-editor__img-list {
  display: grid;
  gap: var(--space-sm);
}

.admin-editor__img-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-xs);
  background: var(--color-parchment);
  border: 1px solid var(--color-rule);
}

.admin-editor__img-thumb {
  margin: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: color-mix(in oklch, var(--color-ink) 5%, var(--color-parchment));
  border: 1px solid var(--color-rule);
}
.admin-editor__img-thumb img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.admin-editor__img-meta {
  display: grid;
  gap: 0.4rem;
  min-inline-size: 0;
}

.admin-editor__img-ref {
  margin: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.admin-editor__img-ref code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink);
  background: color-mix(in oklch, var(--color-sepia) 10%, var(--color-parchment));
  padding: 0.12rem 0.38rem;
  border: 1px solid var(--color-rule);
}

.admin-editor__img-role {
  font-family: var(--font-inscription);
  font-size: 0.62rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-oxblood);
}

.admin-editor__img-field {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;
}
.admin-editor__img-field > span {
  font-family: var(--font-inscription);
  font-size: 0.66rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.admin-editor__img-field input[type=text],
.admin-editor__img-field textarea {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.35;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-parchment);
  color: var(--color-ink);
  min-inline-size: 0;
  resize: vertical;
}
.admin-editor__img-field input[type=text]:focus,
.admin-editor__img-field textarea:focus {
  outline: 0;
  border-color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-sepia) 4%, var(--color-parchment));
}
.admin-editor__img-field textarea {
  font-family: var(--font-body);
  line-height: 1.45;
}

.admin-editor__img-replace {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: stretch;
}

.admin-editor__img-caption-tools {
  display: flex;
  justify-content: flex-start;
  margin-block-start: -0.25rem;
}

.admin-editor__img-drop {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px dashed var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-sepia) 5%, var(--color-parchment));
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-inscription);
  font-size: 0.68rem;
  letter-spacing: var(--ls-wide);
  text-align: center;
  text-transform: uppercase;
}
.admin-editor__img-drop input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.admin-editor__img-drop.is-dragging, .admin-editor__img-drop[data-state=busy] {
  border-color: var(--color-oxblood);
  background: color-mix(in oklch, var(--color-oxblood) 8%, var(--color-parchment));
  color: var(--color-oxblood);
}
.admin-editor__img-drop[data-state=queued], .admin-editor__img-replace[data-upload-state=queued] .admin-editor__img-drop {
  border-style: solid;
  color: #2a6f3b;
}
.admin-editor__img-drop[data-state=error] {
  border-style: solid;
  color: var(--color-oxblood);
}

.admin-editor__ib-empty {
  margin: 0;
  padding: var(--space-sm);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-ink-2);
  text-align: center;
}

.admin-editor__footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-block-start: 1px solid var(--color-rule);
  background: color-mix(in oklch, var(--color-sepia) 6%, var(--color-parchment));
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
  flex: none;
}

.admin-editor__status {
  flex: 1;
}
.admin-editor__status[data-kind=ok] {
  color: #2a7a3f;
}
.admin-editor__status[data-kind=error] {
  color: var(--color-oxblood);
}
.admin-editor__status[data-kind=busy] {
  color: var(--color-ink);
  opacity: 0.6;
}

.admin-editor__hint {
  font-size: 0.65rem;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.7;
  text-align: end;
}

.admin-editor__picker {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(20, 17, 14, 0.55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: start center;
  padding-block-start: 12vh;
}

.admin-editor__picker-inner {
  inline-size: min(560px, 92vw);
  max-block-size: 70vh;
  background: var(--color-parchment);
  border: 2px solid var(--color-rule-strong);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
.admin-editor__picker-inner header {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-block-end: 1px solid var(--color-rule);
}
.admin-editor__picker-inner header h3 {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink);
}
.admin-editor__picker-inner footer {
  padding: 0.5rem var(--space-md);
  border-block-start: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: var(--ls-wide);
}

.admin-editor__picker-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-oxblood);
  inline-size: 1.8rem;
  block-size: 1.8rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.admin-editor__picker-input {
  inline-size: 100%;
  border: 0;
  border-block-end: 1px solid var(--color-rule);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-parchment);
  color: var(--color-ink);
}
.admin-editor__picker-input:focus {
  outline: 0;
  background: color-mix(in oklch, var(--color-sepia) 8%, var(--color-parchment));
}

.admin-editor__picker-results {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}

.admin-editor__picker-item {
  padding: 0.6rem var(--space-md);
  border-block-end: 1px solid var(--color-rule);
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
}
.admin-editor__picker-item strong {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
}
.admin-editor__picker-item code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-ink-2);
  align-self: center;
}
.admin-editor__picker-item em {
  grid-column: 1/-1;
  font-size: 0.8rem;
  color: var(--color-ink-2);
  font-style: italic;
}
.admin-editor__picker-item:hover, .admin-editor__picker-item.is-active {
  background: color-mix(in oklch, var(--color-oxblood) 10%, var(--color-parchment));
}

.admin-editor__picker-empty {
  padding: var(--space-md);
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-ink-2);
}

.admin-toast {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 9200;
  padding: 0.6rem 1rem;
  background: var(--color-ink);
  color: var(--color-parchment);
  font-family: var(--font-inscription);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-inline-start: 4px solid var(--color-oxblood);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
  pointer-events: none;
}
.admin-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.admin-toast[data-kind=ok] {
  border-inline-start-color: #2a7a3f;
}
.admin-toast[data-kind=error] {
  border-inline-start-color: var(--color-oxblood);
}

.admin-editor__clipboard {
  position: fixed;
  inset-inline-start: -9999px;
  inset-block-start: 0;
}
/*# sourceMappingURL=style.css.map */