@font-face {
  font-family:'Diablo';
  src:url('../img/gemeinsam/diablo-heavy.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'Jim Nightshade';
  src:url('../fonts/JimNightshade-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:root {
  --ink:#090807; --bone:#eee6d8; --muted:#a99b89; --blood:#a5261c;
  --gold:#c49a50; --line:#463328; --shadow:rgba(0,0,0,.58);
  --type-body:17px; --type-note:20px; --type-small:14px; --type-label:12px; --type-leading:1.7;
  --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px;
  --space-section:96px; --space-section-mobile:64px; --space-feature:128px; --space-feature-mobile:88px;
  --space-divider-clearance:256px; --space-divider-clearance-mobile:112px;
  --page-gutter:24px; --page-gutter-mobile:18px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
.svg-filter-defs { position:absolute; width:0; height:0; overflow:hidden; }
body { margin:0; overflow-x:hidden; color:var(--bone); font:400 var(--type-body)/var(--type-leading) 'Spectral',Georgia,'Times New Roman',serif;
  background:#090807 url('../img/texturen/section-rock-seamless.webp') top center/1400px repeat; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:rgba(4,4,4,.78); }
body::after { content:""; position:fixed; inset:0; z-index:18; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 13%,transparent 24%,transparent 76%,rgba(0,0,0,.18) 87%,rgba(0,0,0,.72) 100%); }
/* Zweiter Hintergrund ab dem Divider unter der Einleitung, exakt um den
   Foliant-Bereich: Holztextur statt der neutralen Steintextur - der
   Texturwechsel beginnt exakt am Divider statt body-weit zu gelten. */
.voelker-bg-wood { background:linear-gradient(rgba(9,8,7,.4),rgba(9,8,7,.4)),
  url('../img/texturen/section-wood-seamless.webp') top center/1400px repeat; }
/* Zusätzliche Abdunklung nur für "Kulte & Verdorbene", oben auf dem Leder
   der .voelker-bg-leather, damit dieser Abschnitt wie gefordert "stilistisch
   etwas dunkler" wirkt als der Rest der Seite. */
.voelker-bg-dark { background:linear-gradient(rgba(4,3,2,.55),rgba(4,3,2,.55)),
  url('../img/texturen/section-leather-seamless.webp') top center/1400px repeat; }
a { color:inherit; }
button { font:inherit; }

.topbar { border-bottom:1px solid var(--line); background:rgba(9,8,7,.94); position:sticky; top:0; z-index:20; }
.nav { max-width:1200px; margin:auto; min-height:85px; padding:0 24px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; margin-right:auto; text-decoration:none; }
.brand-logo { display:block; height:50px; width:auto; }
.nav a:not(.brand) { color:var(--muted); text-decoration:none; font:650 calc(.78rem + 1px)/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.nav a:not(.brand):hover { color:var(--bone); }
.nav-links { display:flex; gap:20px; }
.menu-btn { display:none; color:var(--bone); background:none; border:1px solid var(--line); padding:7px 10px; }

/* ─── Sub-Navigation (Sprungmarken): site-weit einheitliches Muster, fest
   am unteren Bildschirmrand statt sticky/scrollend (siehe hoelle.css/
   sanctuary.css/himmel-v2.css/welt.css für dieselbe Begründung). */
.subnav { position:fixed; left:0; right:0; bottom:0; z-index:19; background:rgba(9,8,7,.96); border-top:1px solid var(--line); }
.subnav-inner { max-width:1200px; margin:auto; padding:0 24px; display:flex; justify-content:flex-end; gap:30px; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar { display:none; }
.subnav a { flex:none; display:flex; align-items:center; height:46px; color:var(--muted); text-decoration:none;
  font:650 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
.subnav a:hover { color:var(--bone); }
.subnav a.active { color:var(--gold); border-bottom-color:var(--gold); }
[id] { scroll-margin-top:100px; }

.eyebrow { display:flex; align-items:center; gap:8px; color:var(--gold); font:700 calc(.72rem + 1px)/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.16em; }
h1,h2,h3 { margin:0; font-family:'Marcellus',Georgia,serif; font-weight:400; line-height:1.05; text-transform:uppercase; letter-spacing:.02em; filter:url(#grunge); }

/* ─── Hero: identischer Aufbau wie region-hero auf sanctuary.html/hoelle.html.
   header.png (offener Bestiarium-Folio) hat 1672:941 ≈ 1.777, daher 56.3vw
   wie bei kuh-level.css. Kein eigener Alpha-Fade im Bild eingebacken, daher
   Fade per Maske auf einer eigenen ::before-Ebene (siehe kuh-level.css für
   dieselbe Begründung) statt direkt als background auf .region-hero. */
.region-hero { position:relative; min-height:min(max(640px,56.3vw),85vh); display:flex; align-items:flex-end; overflow:hidden; }
.region-hero::before,.region-hero::after {
  -webkit-mask-image:linear-gradient(to bottom,#000 64%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 64%,transparent 100%);
}
.region-hero::before { content:""; position:absolute; inset:0; background:url('../img/bestiarium/header.webp') center 32%/cover no-repeat; }
.region-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,5,4,.58),transparent 55%),
  linear-gradient(0deg,rgba(5,4,3,.86) 0%,rgba(5,4,3,.08) 46%,rgba(5,4,3,.3) 100%); }
.region-hero-content { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:64px 24px 56px; width:100%; }
.region-hero h1 { max-width:900px; margin:16px 0 20px; font-size:clamp(2.6rem,6vw,4.4rem); text-shadow:0 3px 25px #000; }
.region-hero .lead { max-width:640px; margin:0; color:#d4c2b6; font-size:var(--type-body); line-height:var(--type-leading); text-shadow:0 2px 12px #000; }
.region-facts { display:flex; flex-wrap:wrap; gap:22px 34px; margin:26px 0 0; }
.region-facts div { display:grid; gap:6px; }
.region-facts dt { color:#c3a47f; font:700 12px/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.region-facts dd { margin:0; color:#eee4d8; font-size:var(--type-body); }

.block { max-width:1200px; margin:auto; padding:var(--space-section) var(--page-gutter); }
.block-head { margin-bottom:var(--space-xl); }
.block-head h2 { font-size:clamp(1.9rem,3.6vw,2.7rem); }
.block-head p { max-width:700px; margin:14px 0 0; color:var(--muted); }

/* ─── Einleitung: Buch-Prolog mit Initiale, wie .lore-lead auf sanctuary.html. */
.lore-lead { margin:0 auto 8px; max-width:760px; }
.lore-lead p { margin:0 0 20px; color:#c2b6a6; font-size:var(--type-body); line-height:var(--type-leading); }
.lore-lead p:last-child { margin-bottom:0; }
.lore-lead p:first-of-type::first-letter {
  float:left; margin:.03em .1em 0 0; color:var(--gold);
  font-family:'Marcellus',Georgia,serif; font-size:calc(3.4em + 1px); line-height:.82;
}
#einleitung { padding-bottom:var(--space-divider-clearance); }

/* ─── Zier-Divider: der "normale" site-weite Divider von index.html
   (section-divider-ornament-small.png + section-divider-line.png aus
   img/gemeinsam/), direkt unter der Einleitung platziert. Ab hier beginnt
   die Ledertextur (.voelker-bg-leather, siehe HTML). Die angrenzenden
   Module reservieren die Sicherheitszone, damit das große Mittelornament
   nicht in den Text ragt. transform:-47.8% ist der für DIESES Bild
   kalibrierte Wert aus styles.css (nicht der -49.7%/-50%-Wert der
   anderen, größeren Divider-Bilder — jedes Ornament-PNG hat seinen
   eigenen vertikalen Versatz zwischen Bildmitte und sichtbarer Linie). */
.section-divider { display:block; position:relative; z-index:4; width:min(1680px,calc(100vw - 40px)); max-width:none; height:0; margin:0 auto; pointer-events:none; overflow:visible; }
.section-divider img {
  content:url('../img/gemeinsam/section-divider-ornament-small.webp');
  position:absolute; top:0; left:50%;
  width:min(1680px,calc(100vw - 40px)); height:auto; display:block; z-index:1;
  transform:translate(-50%,-47.8%);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(196,154,80,.4));
  opacity:.96;
}
.section-divider::after {
  content:""; position:absolute; z-index:2; top:0; left:50%; width:64px; height:64px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(228,196,140,.75) 0%,rgba(196,154,80,.4) 40%,transparent 72%);
  mix-blend-mode:screen; pointer-events:none;
  animation:divider-glow-pulse 8s ease-in-out infinite;
}
@keyframes divider-glow-pulse { 0%,100% { opacity:.42; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .section-divider::after { animation:none; } }
.section-divider::before {
  content:""; position:absolute; top:0; left:50%; width:100vw; height:14px;
  transform:translate(-50%,-50%);
  background:url('../img/gemeinsam/section-divider-line.webp') center/107.6% 70px no-repeat;
  filter:drop-shadow(0 0 4px rgba(196,154,80,.35));
}
@media (max-width:680px) { .section-divider { width:calc(100vw - 28px); } }

/* ─── Kategorie-Trenner zwischen den großen Gruppen: identische Divider-
   Bilder wie sanctuary.html (Sanktuario-Thema passt thematisch, keine
   neuen Assets nötig), aber mit eigener Überschrift + kurzem Einleitungs-
   satz statt eines reinen Bild-Dividers. */
.voelker-divider { max-width:800px; margin:0 auto; padding:var(--space-section-mobile) var(--page-gutter) var(--space-lg); text-align:center; }
.voelker-divider .eyebrow { justify-content:center; }
.voelker-divider h2 { margin-top:14px; font-size:clamp(1.6rem,3vw,2.1rem); }
.voelker-divider p { max-width:560px; margin:16px auto 0; color:var(--muted); }
.voelker-divider-line { max-width:1680px; width:calc(100vw - 40px); margin:34px auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent); }

/* ─── Bestiarium-Eintrag: Editorial-Layout nach dem Vorbild von
   .chronicle-entry (sanctuary.css) — abwechselnd Bild/Text, weich
   ausfadende Bildkante, riesige fast unsichtbare Kapitelziffer im
   Hintergrund. Ohne Bild (aktuell die meisten Einträge, Illustrationen
   folgen später) fällt der Eintrag auf eine einspaltige Lesespalte
   zurück statt eine leere Bildfläche zu zeigen. */
.bestiary-entry { position:relative; z-index:0; isolation:isolate; padding-block:4.5rem; border-top:1px solid var(--line); }
.bestiary-entry:first-of-type { border-top:0; }
.bestiary-entry.has-media { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; align-items:center; }
.bestiary-entry.has-media:nth-of-type(even) .bestiary-media { order:2; }
.bestiary-entry.has-media:nth-of-type(even) .bestiary-content { order:1; }
.bestiary-entry:not(.has-media) .bestiary-content { max-width:720px; margin:0 auto; }

.bestiary-number {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; white-space:nowrap;
  font-family:'Marcellus',Georgia,serif; font-size:calc(clamp(6rem,10vw,11rem) + 1px);
  color:var(--gold); opacity:.035; letter-spacing:.02em;
}

.bestiary-media { position:relative; z-index:1; overflow:hidden; border-radius:3px; }
.bestiary-media img { display:block; width:100%; height:auto; filter:drop-shadow(0 14px 32px rgba(0,0,0,.55)); transition:transform .6s ease; }
.bestiary-media:hover img { transform:scale(1.025); filter:drop-shadow(0 14px 32px rgba(0,0,0,.55)) brightness(1.05); }
.bestiary-media::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 46px 8px rgba(4,3,2,.5); }
.bestiary-entry.has-media:nth-of-type(odd) .bestiary-media {
  -webkit-mask-image:linear-gradient(to right,#000 82%,transparent 100%);
  mask-image:linear-gradient(to right,#000 82%,transparent 100%);
}
.bestiary-entry.has-media:nth-of-type(even) .bestiary-media {
  -webkit-mask-image:linear-gradient(to left,#000 82%,transparent 100%);
  mask-image:linear-gradient(to left,#000 82%,transparent 100%);
}

.bestiary-content { position:relative; z-index:1; }
.bestiary-content .eyebrow { justify-content:flex-start; }
.bestiary-entry:not(.has-media) .bestiary-content .eyebrow { justify-content:center; }
.bestiary-content h3 { margin-top:14px; font-size:clamp(1.7rem,3vw,2.2rem); }
.bestiary-entry:not(.has-media) .bestiary-content h3 { text-align:center; }
.bestiary-kicker { display:block; margin:8px 0 0; color:#8e7c69; font:650 calc(.74rem + 1px)/1.3 'Spectral',Georgia,serif; font-style:italic; }
.bestiary-entry:not(.has-media) .bestiary-kicker { text-align:center; }
.bestiary-copy { margin-top:18px; color:#c2b6a6; }
.bestiary-copy p { margin:0 0 14px; line-height:var(--type-leading); }
.bestiary-copy p:last-child { margin-bottom:0; }

.bestiary-facts { display:flex; flex-wrap:wrap; gap:18px 40px; margin:26px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.bestiary-entry:not(.has-media) .bestiary-facts { justify-content:center; text-align:center; }
.bestiary-facts div { display:grid; gap:6px; }
.bestiary-facts dt { color:#c3a47f; font:700 12px/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.bestiary-facts dd { margin:0; color:#eee4d8; font-size:var(--type-body); }

/* ─── Monsterarchiv: Der Lederschlitz bleibt fest; nur der Stoffreiter samt
   HTML-Beschriftung wird herausgezogen. Beide Bilder sind austauschbare Assets. */
.monster-archive { position:relative; }
.monster-archive-inner { max-width:1760px; padding:var(--space-divider-clearance) 40px var(--space-feature); }
.monster-search-wrap { min-width:0; }
.monster-search-wrap input { width:100%; padding:10px 2px; color:var(--bone); font:400 calc(1rem + 1px)/1.2 'Spectral',Georgia,serif; background:transparent; border:0; border-bottom:1px solid rgba(196,154,80,.34); border-radius:0; outline:none; }
.monster-search-wrap input::placeholder { color:#817464; }
.monster-search-wrap input:focus { box-shadow:0 3px 0 -2px rgba(196,154,80,.35); }
.creature-nav-button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.monster-no-results { margin:0; padding:25px; text-align:center; color:var(--muted); font-style:italic; }

.creature-study { position:relative; margin:0; padding:0 clamp(0px,2vw,28px) 0 0; overflow:visible; }
.creature-study-head,.creature-study-main,.creature-navigation,.creature-studies { position:relative; z-index:1; }
.creature-study-head { max-width:820px; padding-bottom:4px; }
.creature-count { float:right; margin:0; color:#9c866d; font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; }
.creature-study-head h3 { clear:both; margin-top:15px; font-size:clamp(2.2rem,4.6vw,4rem); }
.creature-subtitle { margin:9px 0 0; color:#a58b6e; font-style:italic; }
.creature-family-picker { display:flex; flex-wrap:wrap; gap:7px 18px; margin:24px 0 0; padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.creature-family-button { padding:3px 0 4px; color:#a58b6e; font:600 calc(.7rem + 1px)/1.2 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; background:none; border:0; border-bottom:1px solid transparent; transition:color .2s ease,border-color .2s ease; }
.creature-family-button:hover { color:#e2c28f; }
.creature-family-button[aria-pressed="true"] { color:#f0d5a2; border-bottom-color:rgba(196,154,80,.7); }
.creature-family-button:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }
.creature-study-main { display:grid; grid-template-columns:minmax(300px,.88fr) minmax(0,1.12fr); gap:clamp(34px,5vw,86px); align-items:start; margin-top:30px; }
.creature-study-main.no-illustration { grid-template-columns:minmax(0,760px); }
.creature-study-main.no-illustration .creature-copy { padding-left:clamp(14px,3vw,42px); }
.creature-visual-column { min-width:0; }
.creature-illustration[hidden] { display:none; }
.creature-illustration img[hidden],.creature-image-placeholder[hidden] { display:none !important; }
.creature-illustration { position:relative; margin:0; overflow:visible; transform:rotate(-1deg); transform-origin:center; }
.creature-illustration img { position:relative; z-index:0; display:block; width:100%; height:auto; object-fit:cover; background:transparent; }
.creature-image-placeholder { min-height:340px; display:grid; place-items:center; color:#846a4f; background:repeating-linear-gradient(45deg,rgba(196,154,80,.04) 0 2px,transparent 2px 22px),linear-gradient(160deg,#181410,#100e0c); }
.creature-image-placeholder span { padding:8px 12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:700 12px/1 system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.creature-illustration figcaption { position:absolute; right:8px; bottom:10px; z-index:1; color:#b4946a; font:600 12px/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; text-shadow:0 1px 5px #000; }
.creature-description p { margin:0 0 17px; color:#c9bbaa; font-size:var(--type-body); line-height:var(--type-leading); }
.creature-description p:last-child { margin-bottom:0; }
.creature-description .field-note { position:relative; left:1.5%; margin-top:38px; color:#d6c2a5; font-family:'Jim Nightshade','Spectral',Georgia,serif; font-size:var(--type-note); line-height:1.35; transform:rotate(-.7deg); transform-origin:left center; }
.creature-facts { display:grid; grid-template-columns:1fr 1fr; gap:0 26px; margin:27px 0 0; }
.creature-facts div { padding:10px 0 16px; }
.creature-facts dt { color:#c3a47f; font:700 calc(.6rem + 1px)/1 system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.creature-facts dd { margin:7px 0 0; color:#e4d7c8; font-size:var(--type-body); line-height:var(--type-leading); }
.creature-studies { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-top:28px; }
.creature-studies figure { position:relative; margin:0; transform:rotate(.8deg); transform-origin:center; }
.creature-studies figure:nth-child(even) { transform:rotate(-.7deg); }
.creature-studies img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.creature-studies figcaption { margin-top:8px; color:var(--muted); font-size:calc(.8rem + 1px); }
.creature-navigation { display:flex; justify-content:space-between; gap:14px; margin-top:42px; padding-top:0; }
.creature-nav-button { padding:4px 0; color:#a58b6e; font:700 12px/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; background:none; border:0; transition:color .2s; }
.creature-nav-button:hover { color:var(--bone); }

/* ─── Wesen außerhalb Sanktuarios: zwei große, reduzierte Querverweis-
   Kacheln statt eigener Inhaltsblöcke. */
.outsiders-lead { max-width:640px; margin:0 auto 40px; text-align:center; color:var(--muted); font-size:var(--type-body); }
.outsiders-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1000px; margin:0 auto; }
.outsiders-link { position:relative; min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; overflow:hidden; text-decoration:none; border:1px solid var(--line); }
.outsiders-link::before { content:""; position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.5; transition:opacity .3s ease,transform .5s ease; }
.outsiders-link:hover::before,.outsiders-link:focus-visible::before { opacity:.72; transform:scale(1.03); }
.outsiders-link.heaven::before { background-image:url('../img/heaven/heaven-header-final.webp'); }
.outsiders-link.hell::before { background-image:url('../img/evil/hell-header-final.webp'); }
.outsiders-link::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(5,4,3,.92) 0%,rgba(5,4,3,.25) 70%); }
.outsiders-link > * { position:relative; z-index:2; }
.outsiders-link small { color:var(--gold); font:700 12px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.outsiders-link h3 { margin-top:10px; font-size:1.5rem; text-shadow:0 3px 16px #000; }
.outsiders-link span { display:block; margin-top:8px; color:#d4c8bb; font-size:var(--type-body); }

@media (max-width:760px) {
  .menu-btn { display:block; }
  .nav-links { display:none; position:absolute; top:75px; left:0; right:0; padding:18px 24px 24px; flex-direction:column; gap:14px; background:#0d0b0a; border-bottom:1px solid var(--line); }
  .nav-links.open { display:flex; }
}
@media (max-width:900px) {
  .bestiary-entry.has-media { grid-template-columns:1fr; }
  .bestiary-entry.has-media:nth-of-type(even) .bestiary-media,
  .bestiary-entry.has-media:nth-of-type(even) .bestiary-content { order:initial; }
  .bestiary-media { margin-bottom:26px; }
  .bestiary-entry.has-media:nth-of-type(odd) .bestiary-media,
  .bestiary-entry.has-media:nth-of-type(even) .bestiary-media {
    -webkit-mask-image:none; mask-image:none;
  }
  .outsiders-grid { grid-template-columns:1fr; }
  .monster-archive-inner { padding-left:28px; padding-right:28px; }
  .creature-study-main { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .region-hero-content,.block { padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); }
  .block { padding-top:var(--space-section-mobile); padding-bottom:var(--space-section-mobile); }
  #einleitung { padding-bottom:var(--space-divider-clearance-mobile); }
  .monster-archive-inner { padding:var(--space-divider-clearance-mobile) var(--page-gutter-mobile) var(--space-feature-mobile); }
  .monster-search-wrap { margin-top:24px; min-width:0; }
  .creature-study { padding-right:0; }
  .creature-facts { grid-template-columns:1fr; }
  .creature-study-main.no-illustration .creature-copy { padding-left:0; }
  .creature-image-placeholder { min-height:250px; }
}
@media (max-width:560px) {
  .region-hero { min-height:520px; }
  .creature-nav-button span { display:none; }
  .creature-nav-button { min-width:52px; padding:10px 0; text-align:center; }
}

footer { margin-top:0; border-top:1px solid var(--line);  }
.footer-inner { max-width:1200px; margin:auto; padding:35px 24px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; color:#776d61; font:500 calc(.74rem + 1px)/1.5 system-ui,sans-serif; }
.footer-notice { display:flex; flex-direction:column; gap:6px; max-width:640px; }
.footer-notice p { margin:0; }
.footer-inner a { color:#ae9d89; }
.footer-meta { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.footer-links { display:flex; gap:16px; }
.footer-links a { text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.backtop { color:var(--muted); text-decoration:none; font:650 calc(.72rem + 1px)/1 system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.backtop:hover { color:var(--bone); }
@media (max-width:760px) {
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-meta { align-items:flex-start; }
}