@font-face{font-family:'Alegreya';font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/alegreya-italic-400-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/alegreya-italic-400-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/alegreya-normal-400-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/alegreya-normal-400-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/alegreya-sans-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/alegreya-sans-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/alegreya-sans-normal-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/alegreya-sans-normal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Arboris: the site's look. Light lichen paper, bark ink, the logo's sap gold; each floor brings its own
   deep colour (--tint) and the light it glows with (--glow). Alegreya for words, Alegreya Sans for data. */

:root {
  --paper: #eceee6;
  --paper-2: #e3e7dc;
  --paper-3: #d6dccd;
  --ink: #2a2119;
  --ink-2: #4f443a;
  --ink-3: #6f6559;
  --rule: #cdd2c3;
  --sap: #c9932e;
  --sap-ink: #865a12;
  --leaf: #4f6b36;
  --ember: #b4482a;
  --serif: "Alegreya", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --wide: 76rem;
  --measure: 40rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --tint: #2f4a24;
  --glow: #9cc061;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.62 var(--serif);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 760px) { body { font-size: 1.1875rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sap-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); text-decoration-color: var(--sap); }
:focus-visible { outline: 3px solid var(--sap); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); color: inherit; line-height: 1.08; margin: 0 0 .5em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 4.75rem); line-height: 1; letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -.005em; }
h3 { font-size: 1.375rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding: 0; margin: 0; list-style: none; }
.lead { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.45; font-style: italic; color: var(--ink-2); }
.small { font: 400 .95rem/1.45 var(--sans); color: var(--ink-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 99; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 6px; font-family: var(--sans); }
.skip:focus { top: 1rem; }
.measure { max-width: var(--measure); margin-inline: auto; }
.measure-wide { max-width: 56rem; margin-inline: auto; }
.wide { max-width: var(--wide); margin-inline: auto; }

/* the floor's number, in a ring like the logo's */
.ring {
  display: inline-grid; place-items: center; flex: none;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  border: 2px solid var(--sap); color: var(--ink);
  font: 700 1rem/1 var(--sans); font-variant-numeric: lining-nums;
}
.ring.big { width: 3.4rem; height: 3.4rem; font-size: 1.45rem; border-width: 2px; }
.ring.tiny { width: 1.9rem; height: 1.9rem; font-size: .9rem; border-width: 1.5px; }

/* links that lead on */
.more {
  display: inline-block; margin-top: .5rem;
  font: 700 1.05rem/1.3 var(--sans); color: var(--sap-ink); text-decoration: none;
  border-bottom: 2px solid var(--sap); padding-bottom: 2px;
}
.more:hover { color: var(--ink); }
.more.light { color: #fff; border-color: var(--glow); }

/* ------------------------------------------------------------------ masthead */
.masthead {
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem var(--gutter);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand img { width: 40px; height: 40px; }
.brand span { font: 800 1.3rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: #6b4410; }
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav ul { display: flex; gap: 1.5rem; }
.site-nav a { font: 500 1.05rem/1 var(--sans); color: var(--ink); text-decoration: none; padding: .55rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-color: var(--rule); }
.site-nav a[aria-current="page"] { border-color: var(--sap); }
.site-nav .lang { color: var(--ink-3); padding-left: 1.4rem; border-left: 1px solid var(--rule); border-bottom: 0; }
.menu-toggle {
  display: none; font: 600 1rem/1 var(--sans); color: var(--ink);
  background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: .55rem 1rem;
}
@media (max-width: 899px) {
  .js .menu-toggle { display: block; }
  .js .site-nav { display: none; }
  .js .site-nav.open {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule); padding: .5rem var(--gutter) 1rem;
  }
  .site-nav { flex-wrap: wrap; gap: .5rem 1.2rem; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .no-js .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: .25rem 1rem; }
  .site-nav.open a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--rule); font-size: 1.15rem; }
  .site-nav.open a[aria-current="page"] { color: var(--sap-ink); }
  .site-nav.open .lang { border-left: 0; padding-left: 0; }
  .no-js .masthead { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ home */
.hero { position: relative; height: min(84vh, 860px); min-height: 440px; overflow: hidden; background: #a9bccb; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-mark { position: absolute; left: 50%; top: 7%; width: min(560px, 80vw); transform: translateX(-50%); filter: drop-shadow(0 8px 26px rgba(28, 20, 10, .35)); }
.hero-logo { width: 100%; }
@media (max-width: 640px) { .hero { height: 72vh; } .hero-img { object-position: 50% 70%; } .hero-mark { top: 9%; } }

.opening { max-width: 58rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem); text-align: center; }
.opening-line { font: italic 600 clamp(1.85rem, 4.6vw, 3.2rem)/1.14 var(--serif); margin: 0 0 .55em; text-wrap: balance; }
.opening-sub { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink-2); margin-bottom: 1.4em; }
.opening-status { display: inline-block; font: 500 .98rem/1.4 var(--sans); color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: .9rem; }

.band { padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); }
.band + .band { border-top: 1px solid var(--rule); }
.band-head { max-width: 44rem; margin-bottom: 2rem; }
.band-head p { color: var(--ink-2); }
.intro { background: var(--paper-2); }

/* the floors as strata: floor 10 at the top, the roots at the bottom; a stratum opens wider when it is pointed at */
.floors-strip { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1.5rem; }
.floors-strip li { --h: clamp(4.25rem, 8vw, 5.25rem); }
.floors-strip a {
  position: relative; display: flex; align-items: center; height: var(--h); overflow: hidden;
  border-radius: 6px; color: #fff; text-decoration: none; background: var(--tint);
  transition: height .35s ease;
}
.floors-strip a:hover, .floors-strip a:focus-visible { height: calc(var(--h) * 2.4); }
.strip-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.floors-strip a::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 75%, transparent) 38%, transparent 75%);
}
.strip-text { position: relative; z-index: 2; display: flex; align-items: center; gap: .9rem; padding: 0 1.1rem; width: 100%; }
.strip-text .ring { color: #fff; border-color: var(--glow); background: color-mix(in srgb, var(--tint) 70%, transparent); }
.strip-name { font: 700 clamp(1.2rem, 2.4vw, 1.6rem)/1.1 var(--serif); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.strip-levels { margin-left: auto; font: 600 .95rem/1 var(--sans); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }

/* the callings standing in a row */
.lineup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; align-items: start; }
.lineup a { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); text-decoration: none; }
.lineup-img { width: 100%; height: auto;
  background: radial-gradient(ellipse 46% 7% at 50% 96%, rgba(42, 33, 25, .22), transparent 70%); transition: transform .3s ease; }
.lineup a:hover .lineup-img { transform: translateY(-6px); }
.lineup-name { font: 800 1.35rem/1.1 var(--serif); margin-top: .5rem; }
.lineup-role { font: 500 .95rem/1.3 var(--sans); color: var(--ink-3); }
.lineup-sum { font-size: 1rem; line-height: 1.45; color: var(--ink-2); margin-top: .5rem; max-width: 16rem; }
@media (max-width: 760px) {
  .lineup { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; padding-bottom: .75rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .lineup li { flex: 0 0 46%; scroll-snap-align: start; }
  .lineup.big li { flex-basis: 70%; }
}

/* a creature on its floor's colour */
.plate { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; color: var(--ink); text-decoration: none; }
.plate-disc {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--glow) 30%, var(--tint)) 0%, var(--tint) 58%, color-mix(in srgb, var(--tint) 72%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 3px var(--paper), 0 0 0 4px color-mix(in srgb, var(--sap) 60%, transparent);
}
.plate-img { width: 100%; height: 100%; object-fit: contain; transform: scale(.9); transition: transform .3s ease; }
a.plate:hover .plate-img { transform: scale(.98); }
.plate-name { font: 700 1.02rem/1.2 var(--serif); }
.plate-meta { font: 500 .85rem/1.2 var(--sans); color: var(--ink-3); }
.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 1.5rem 1.1rem; }
.plates.small { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); margin-top: 1.25rem; }
.specimens { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 1.5rem 1.25rem; margin-bottom: 1.5rem; }
@media (max-width: 640px) { .specimens, .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem .7rem; } .plate-name { font-size: .92rem; } }

.play-frame { margin: 1rem 0 0; }
.play-frame img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 55%; border-radius: 12px; }
.world-frame { margin: 1.5rem 0 .5rem; }
.world-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.world-frame figcaption { font: 600 .92rem var(--sans); margin-top: .4rem; }
.world-frame figcaption a { color: var(--ink-3); text-decoration: none; }
.world-frame figcaption a:hover { color: var(--sap-ink); }
.guide-frame { margin: .5rem 0 1.25rem; }
.guide-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.plays { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; margin: 1.5rem 0 1.5rem; }
.plays h3 { font-size: 1.3rem; padding-top: .9rem; border-top: 3px solid var(--sap); }
.plays p { color: var(--ink-2); }

/* ------------------------------------------------------------------ pages with a picture on top */
.page-hero { position: relative; min-height: min(56vh, 560px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #3a4a33; }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 24, 17, .82), rgba(30, 24, 17, .25) 55%, transparent 80%); }
.page-hero-text { position: relative; z-index: 1; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 2rem var(--gutter) 2.5rem; }
.page-hero-text .lead { color: #f1ede3; max-width: 38rem; margin: 0; }
.plain-head { padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 1.5rem; }
.prose { padding: 3rem var(--gutter); }
.chapter { margin-bottom: 2.5rem; }
.chapter h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.floor-rows li a {
  display: grid; grid-template-columns: auto 1fr auto; gap: .2rem 1rem; align-items: center;
  padding: .9rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.floor-rows .ring { grid-row: span 2; }
.row-name { font: 700 1.25rem/1.1 var(--serif); }
.row-tag { grid-column: 2; font-size: 1rem; font-style: italic; color: var(--ink-3); }
.row-levels { grid-row: 1; grid-column: 3; font: 500 .9rem var(--sans); color: var(--ink-3); }
.floor-rows a:hover .row-name { color: var(--sap-ink); }

/* ------------------------------------------------------------------ the ascent */
.ascent { position: relative; display: flex; flex-direction: column; }
.ascent-floors { display: flex; flex-direction: column-reverse; gap: 6px; }
.ascent-floor { position: relative; min-height: min(82vh, 820px); display: flex; align-items: flex-end; color: #fff; background: var(--tint); overflow: hidden; }
.ascent-picture { position: absolute; inset: 0; }
.ascent-img { width: 100%; height: 100%; object-fit: cover; }
.ascent-floor::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(20deg, var(--tint) 8%, color-mix(in srgb, var(--tint) 70%, transparent) 34%, transparent 62%);
}
.ascent-plaque { position: relative; z-index: 1; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 2rem var(--gutter) 2.75rem; }
.ascent-plaque .ring { color: #fff; border-color: var(--glow); margin-bottom: 1rem; }
.ascent-plaque h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: .2em; }
.ascent-plaque h2 a { color: #fff; text-decoration: none; }
.ascent-plaque h2 a:hover { text-decoration: underline; text-decoration-color: var(--glow); text-decoration-thickness: 2px; }
.ascent-tag { font-style: italic; font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 34rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.facts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1.2rem; font-family: var(--sans); }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: .85rem; font-weight: 500; opacity: .8; }
.facts dd { margin: 0; font-size: 1.05rem; font-weight: 700; }
.ascent-guardian { display: none; }
@media (min-width: 900px) {
  .ascent-guardian { display: block; position: absolute; z-index: 1; right: max(5.5rem, calc((100vw - var(--wide)) / 2 + 3rem)); bottom: 2.75rem; width: clamp(9rem, 14vw, 13rem); }
  .ascent-guardian .plate-disc { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 50px color-mix(in srgb, var(--glow) 45%, transparent); }
}
.ascent-sealed {
  position: relative; text-align: center; padding: 3rem var(--gutter) 3.5rem;
  background: linear-gradient(to bottom, #fbfbf8 0%, var(--paper) 100%);
}
.sealed-rings { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; margin: 0 auto 1.5rem; position: relative; }
.sealed-rings::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(to top, var(--sap), transparent); }
.sealed-rings span { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sap); background: #f6f6f1; opacity: calc(1 - var(--i) * .07); }
.ascent-sealed h2 { color: var(--ink-2); }
.ascent-sealed p { font-style: italic; color: var(--ink-3); font-size: 1.25rem; margin: 0; }
.ascent-foot { text-align: center; padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(3rem, 8vw, 6rem); }
.ascent-foot .lead { max-width: 36rem; margin: 0 auto 1rem; }
.ascent-hint { font: 600 1rem var(--sans); color: var(--sap-ink); }
.ascent-hint::before { content: "↑"; display: block; font-size: 1.6rem; line-height: 1; margin-bottom: .3rem; }
.gauge { position: fixed; right: max(12px, calc((100vw - var(--wide)) / 2 - 64px)); top: 50%; transform: translateY(-50%); z-index: 20; }
.gauge ol { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 999px; background: rgba(236, 238, 230, .82); backdrop-filter: blur(6px); box-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
.gauge a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 .85rem/1 var(--sans); color: var(--ink-2); text-decoration: none; border: 1.5px solid transparent; }
.gauge a:hover { border-color: var(--sap); }
.gauge a[aria-current] { background: var(--sap); color: #fff; }
@media (max-width: 700px) { .gauge { right: 6px; } .gauge a { width: 24px; height: 24px; font-size: .72rem; } .gauge ol { gap: 3px; padding: 5px; } }
.no-js .gauge { display: none; }

/* ------------------------------------------------------------------ a floor */
.floor-hero { position: relative; min-height: min(84vh, 820px); display: flex; align-items: flex-end; color: #fff; background: var(--tint); overflow: hidden; }
.floor-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.floor-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--tint) 0%, color-mix(in srgb, var(--tint) 72%, transparent) 26%, transparent 58%);
}
.floor-hero-text { position: relative; z-index: 1; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 2rem var(--gutter) 2.5rem; }
.floor-number { display: flex; align-items: center; gap: .8rem; font: 600 1rem var(--sans); margin-bottom: 1rem; }
.floor-number .ring { color: #fff; border-color: var(--glow); }
.floor-hero h1 { font-size: clamp(3rem, 9vw, 6rem); margin-bottom: .15em; }
.floor-tag { font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.45rem); max-width: 36rem; }
.floor-body { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) 4rem; display: grid; gap: 0 3rem; }
@media (min-width: 1100px) { .floor-body { grid-template-columns: 11rem minmax(0, 1fr); } }
.trunk { display: none; }
@media (min-width: 1100px) {
  .trunk { display: block; position: sticky; top: 1.5rem; align-self: start; margin-top: 3.5rem; }
  .trunk ol { position: relative; display: flex; flex-direction: column; gap: .35rem; }
  .trunk ol::before { content: ""; position: absolute; left: calc(.95rem - 1px); top: .5rem; bottom: .5rem; width: 2px; background: var(--rule); }
  .trunk a { position: relative; display: flex; align-items: center; gap: .6rem; color: var(--ink-3); text-decoration: none; font: 500 .95rem/1.2 var(--sans); }
  .trunk .ring { background: var(--paper); color: var(--ink-3); border-color: var(--rule); }
  .trunk a:hover { color: var(--ink); }
  .trunk a:hover .ring { border-color: var(--sap); }
  .trunk a[aria-current="page"] { color: var(--ink); font-weight: 700; }
  .trunk a[aria-current="page"] .ring { background: var(--tint); color: #fff; border-color: var(--sap); }
}
.floor-main > section { margin-top: clamp(3rem, 6vw, 4.5rem); }
.about-text { max-width: var(--measure); }
.pull { margin: 2.5rem 0 0; max-width: 46rem; padding: .25rem 0 .25rem 1.4rem; border-left: 3px solid var(--sap); }
.pull blockquote { margin: 0; }
.pull p { font: italic 500 clamp(1.2rem, 2.2vw, 1.45rem)/1.5 var(--serif); color: var(--ink-2); }
.pull p::before { content: "“"; } .pull p::after { content: "”"; }
.pull figcaption { font: 500 .95rem/1.4 var(--sans); color: var(--ink-3); }
.map-wrap { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1000px) { .map-wrap { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); } }
.map { position: relative; border-radius: 14px; overflow: hidden; background: var(--paper); }
.map-img { width: 100%; }
.map-label {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 700 clamp(.6rem, 1.5vw, .82rem)/1.1 var(--sans); color: #fff; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .7);
  padding: .15rem .35rem; border-radius: 4px; transition: background .2s ease;
}
.map-label.town { font-size: clamp(.7rem, 1.7vw, .95rem); color: #ffe7b0; }
.map-label.on { background: rgba(0, 0, 0, .55); }
.marker { position: absolute; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.legend .marker, .places .marker { position: static; transform: none; vertical-align: -2px; margin-right: .5rem; }
.marker.hearth { background: #f2b441; }
.marker.field { background: #d2452e; }
.marker.dungeon { background: #7a55d6; }
.marker.guardian { background: #1d1a17; border-color: #f2b441; width: 16px; height: 16px; }
.map .marker { z-index: 2; }
.map .marker.hearth { margin-top: 12px; }
.map-side h3 { margin-bottom: .25rem; }
.places { margin: 1rem 0 1.5rem; }
.places li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .5rem; border-bottom: 1px solid var(--rule); font-size: 1.05rem; border-radius: 4px; cursor: default; }
.places li.on { background: var(--paper-2); }
.place-levels { font: 500 .9rem/1.6 var(--sans); color: var(--ink-3); white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font: 500 .92rem var(--sans); color: var(--ink-3); }
.boss-block, .guardian-block { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; max-width: 54rem; }
.boss-block .plate-meta, .boss-block .plate-name { display: none; }
.boss-where { font: 600 .95rem var(--sans); color: var(--ink-3); }
.herald { color: var(--ink-2); }
.herald q { font-style: italic; quotes: "“" "”"; }
.dungeon-block { max-width: 54rem; }
.dungeon-block h3 { font-size: 1.6rem; }
.dungeon-block h4 { margin-top: 1.5rem; font: 700 .95rem var(--sans); color: var(--ink-3); }
.dungeon-block .plates { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.guardian-block { background: var(--tint); color: #fff; border-radius: 16px; padding: clamp(1.25rem, 3vw, 2.25rem); max-width: none; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: center; }
.guardian-block .plate-disc { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 60px color-mix(in srgb, var(--glow) 40%, transparent); }
.guardian-block .plate-name, .guardian-block .plate-meta { display: none; }
.guardian-block h3 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.guardian-block .boss-where { color: color-mix(in srgb, var(--glow) 70%, #fff); }
.guardian-block p { color: #efeae0; }
@media (max-width: 640px) { .boss-block, .guardian-block { grid-template-columns: 1fr; } .boss-block .plate, .guardian-block .plate { max-width: 14rem; } }
.town-name { font: 600 1.05rem var(--sans); color: var(--ink-3); margin-top: -.4rem; }
.town-view { margin: 1rem 0 1.5rem; max-width: 60rem; }
.town-view img { width: 100%; border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; }
.townsfolk { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem 2rem; }
.townsfolk li { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.npc-name { font: 700 1.1rem/1.2 var(--serif); }
.npc-title { font-size: 1rem; font-style: italic; color: var(--ink-3); }
.tasks-h { margin-top: 2rem; }
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2rem; }
.tasks li { display: flex; flex-direction: column; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.task-name { font: 600 1.05rem/1.3 var(--serif); font-style: italic; }
.task-meta { font: 500 .88rem var(--sans); color: var(--ink-3); }
.steps { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.step { display: flex; flex-direction: column; font: 700 1.35rem/1.2 var(--serif); color: var(--ink); text-decoration: none; }
.step span { font: 500 .9rem var(--sans); color: var(--ink-3); }
.step.up { text-align: right; }
.step:hover { color: var(--sap-ink); }

/* ------------------------------------------------------------------ bestiary */
.filters {
  position: sticky; top: 0; z-index: 15;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem;
  padding: .75rem var(--gutter); background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px); border-block: 1px solid var(--rule);
}
.no-js .filters { display: none; }
.filters label { display: flex; flex-direction: column; gap: .2rem; font: 600 .82rem var(--sans); color: var(--ink-3); }
.filters select {
  font: 500 1rem var(--sans); color: var(--ink); background: #fbfbf8; border: 1px solid var(--rule);
  border-radius: 8px; padding: .5rem 2rem .5rem .65rem; min-width: 9rem; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.filter-count { margin-left: auto; font: 500 .95rem var(--sans); color: var(--ink-3); padding-bottom: .5rem; }
@media (max-width: 640px) { .filters { position: static; } .filters label { flex: 1 1 40%; } .filters select { min-width: 0; width: 100%; } .filter-count { width: 100%; padding: 0; } }
.bestiary { max-width: var(--wide); margin: 0 auto; padding: 1rem var(--gutter) 4rem; }
.bestiary-floor { margin-top: 3rem; }
.bestiary-floor h2 { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding-bottom: .75rem; border-bottom: 3px solid var(--tint); }
.bestiary-floor h2 a { color: var(--ink); text-decoration: none; }
.bestiary-floor h2 a:hover { color: var(--sap-ink); }
.bestiary-floor h2 .ring { background: var(--tint); color: #fff; border-color: var(--sap); }
.bf-levels { font: 500 1rem var(--sans); color: var(--ink-3); margin-left: auto; }
.entries { display: grid; gap: 0 3rem; }
@media (min-width: 960px) { .entries { grid-template-columns: 1fr 1fr; } }
.entry { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.entry .plate { width: 7.5rem; }
.entry h3 { margin-bottom: .25rem; }
.entry-meta { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin-bottom: .6rem; font: 500 .9rem/1.35 var(--sans); color: var(--ink-3); }
.is-boss .entry-meta li:first-child { color: var(--sap-ink); font-weight: 700; }
.entry p { font-size: 1.04rem; line-height: 1.55; margin-bottom: .6rem; }
.found { color: var(--ink-2); }
.found span { display: block; font: 600 .85rem var(--sans); color: var(--ink-3); }
.entry details { margin-top: .4rem; }
.entry summary { font: 700 .95rem var(--sans); color: var(--sap-ink); cursor: pointer; padding: .3rem 0; }
.entry details h4 { font: 700 .85rem var(--sans); color: var(--ink-3); margin: .9rem 0 .4rem; }
.skill-list li { font-size: 1rem; line-height: 1.5; margin-bottom: .5rem; }
.skill-list b { display: block; font-weight: 700; }
.drop-list { display: grid; gap: .3rem; }
.drop-list li { display: flex; align-items: center; gap: .55rem; font: 600 .98rem/1.3 var(--sans); }
.drop-list img { width: 30px; height: 30px; border-radius: 6px; background: #2b2520; }
.r-fine { color: #3d7a35; } .r-rare { color: #2a5fae; } .r-epic { color: #7a3dae; } .r-legendary { color: #a8630f; } .r-common { color: var(--ink-2); }
.entry:target { background: linear-gradient(90deg, color-mix(in srgb, var(--sap) 14%, transparent), transparent 70%); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ gear */
.jump { display: flex; gap: 1.5rem; padding: 0 var(--gutter) 1rem; font: 600 1rem var(--sans); }
.jump a { color: var(--sap-ink); }
.items { display: grid; gap: 0 3rem; }
@media (min-width: 960px) { .items { grid-template-columns: 1fr 1fr; } }
.item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.item-icon img, .noicon { width: 3.5rem; height: 3.5rem; border-radius: 10px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--glow) 25%, var(--tint)), var(--tint)); display: block; }
.item h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.item.r-fine h3 { color: #3d7a35; } .item.r-rare h3 { color: #2a5fae; } .item.r-epic h3 { color: #7a3dae; } .item.r-legendary h3 { color: #a8630f; }
.item-meta { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font: 500 .9rem/1.35 var(--sans); color: var(--ink-3); margin-bottom: .4rem; }
.item-meta .rarity { font-weight: 700; color: var(--ink-2); }
.item-who { color: var(--sap-ink); }
.item-stats { display: flex; flex-wrap: wrap; gap: .1rem 1rem; font: 400 .95rem/1.4 var(--sans); color: var(--ink-2); margin-bottom: .4rem; }
.item-stats b { font-weight: 700; color: var(--ink); }
.item-desc { font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--ink-2); margin-bottom: .4rem; }
.item-src { font: 400 .9rem/1.45 var(--sans); color: var(--ink-3); margin: 0; }
.extra { margin-top: 4rem; }
.runes, .draughts { width: 100%; border-collapse: collapse; font: 400 .98rem/1.35 var(--sans); }
.runes th, .runes td, .draughts th, .draughts td { padding: .55rem .6rem; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.runes thead th, .draughts thead th { font-weight: 600; font-size: .88rem; color: var(--ink-3); }
.runes tbody th, .draughts tbody th { font: 700 1.02rem var(--serif); }
.runes tbody th span { display: block; font: 400 .82rem var(--sans); color: var(--ink-3); }
.runes td { font-variant-numeric: lining-nums tabular-nums; }

/* ------------------------------------------------------------------ callings */
.lineup.big { margin: 1rem 0 3rem; }
.compare { width: 100%; border-collapse: collapse; font: 400 1rem/1.4 var(--sans); }
.compare th, .compare td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-weight: 600; font-size: .88rem; color: var(--ink-3); }
.compare tbody th a { font: 700 1.1rem var(--serif); color: var(--ink); text-decoration: none; }
.table-wrap { overflow-x: auto; }
.calling-hero { max-width: var(--wide); margin: 0 auto; padding: 2rem var(--gutter) 1rem; display: grid; gap: 1rem 3rem; align-items: end; }
@media (min-width: 900px) { .calling-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.calling-figure { background: radial-gradient(ellipse 50% 6% at 50% 97%, rgba(42, 33, 25, .25), transparent 70%), radial-gradient(ellipse 60% 55% at 50% 60%, #f7f7f2, transparent 75%); }
.calling-img { width: 100%; max-height: 78vh; object-fit: contain; object-position: 50% 100%; }
.calling-text { padding-bottom: 2rem; }
.kicker { font: 600 1rem var(--sans); margin-bottom: .5rem; }
.kicker a { color: var(--ink-3); text-decoration: none; }
.facts.dark { margin-top: 1.5rem; padding: 1rem 0; border-block: 1px solid var(--rule); }
.facts.dark dt { color: var(--ink-3); opacity: 1; }
.resource { margin-top: 1.5rem; }
.resource h2 { font-size: 1.35rem; margin-bottom: .3rem; }
.resource p { color: var(--ink-2); }
.blow { background: var(--paper-2); }
.blow h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.chain { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.chain li { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--sap); font: 700 1.1rem var(--sans); color: var(--ink-2); }
.chain li + li::before { content: ""; position: absolute; }
.chain li.third { width: 3.6rem; height: 3.6rem; background: var(--sap); color: #fff; font-size: 1.4rem; }
.chain-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0; counter-reset: blow; }
.chain-frames figure, .frames figure { margin: 0; position: relative; }
.chain-frames img, .frames img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.chain-frames figcaption { position: absolute; left: .7rem; bottom: .7rem; }
.chain-frames .ring { background: rgba(30, 24, 17, .55); color: #fff; border-color: var(--sap); }
.chain-frames .ring.third { background: var(--sap); width: 2.6em; height: 2.6em; }
@media (max-width: 700px) { .chain-frames { grid-template-columns: 1fr; } }
.frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.frames figcaption { font: 600 .95rem var(--sans); color: var(--ink-2); margin-top: .45rem; }
.paths-band { padding: clamp(3rem, 7vw, 5rem) var(--gutter); }
.paths { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.path h3 { font-size: 1.75rem; margin-bottom: .2rem; }
.path-sum { font-style: italic; color: var(--ink-2); min-height: 3.2em; }
.tier { margin-top: 1.4rem; }
.tier-h { display: flex; justify-content: space-between; gap: 1rem; font: 700 .9rem var(--sans); color: var(--ink-3); padding-bottom: .4rem; border-bottom: 2px solid var(--sap); margin-bottom: .6rem; }
.gate { font-weight: 500; }
.skill { padding: .6rem 0 .9rem; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .85rem; }
.skill > * { grid-column: 2; }
.skill-icon { grid-column: 1; grid-row: 1 / span 3; width: 2.75rem; height: 2.75rem; border-radius: 10px; margin-top: .2rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.skill h4 { font-size: 1.15rem; margin-bottom: .2rem; }
.skill p { font-size: 1.02rem; line-height: 1.5; margin-bottom: .45rem; }
.skill-facts { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font: 500 .86rem/1.4 var(--sans); color: var(--ink-3); }
.skill-facts span { color: var(--ink-3); font-weight: 400; }
.skill-facts .tag { color: var(--leaf); font-weight: 700; }
.skill-facts .step { font-size: .8rem; }
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.others a { display: flex; flex-direction: column; align-items: center; color: var(--ink); text-decoration: none; font: 700 1.05rem var(--serif); }
.other-img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ how to play */
.guide { max-width: var(--wide); margin: 0 auto; padding: 3rem var(--gutter) 4rem; display: grid; gap: 2rem 4rem; }
@media (min-width: 1000px) { .guide { grid-template-columns: 14rem minmax(0, 40rem); } .toc { position: sticky; top: 1.5rem; align-self: start; } }
.guide .prose { padding: 0; min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; }
.bosses { width: 100%; border-collapse: collapse; font: 400 .98rem/1.35 var(--sans); margin: .5rem 0 1rem; }
.bosses th, .bosses td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.bosses thead th { font-weight: 600; font-size: .85rem; color: var(--ink-3); }
.bosses tbody th a { font: 700 1rem var(--serif); color: var(--ink); text-decoration: none; white-space: nowrap; }
.bosses td span { display: block; font-size: .82rem; color: var(--ink-3); }
.toc h2 { font: 700 .95rem var(--sans); color: var(--ink-3); }
.toc li a { display: block; padding: .35rem 0; font: 500 1.02rem/1.3 var(--sans); color: var(--ink-2); text-decoration: none; border-left: 2px solid var(--rule); padding-left: .8rem; }
.toc li a:hover { color: var(--ink); border-color: var(--sap); }

/* ------------------------------------------------------------------ colophon */
.colophon { background: var(--paper-2); border-top: 1px solid var(--rule); padding: 3rem var(--gutter) 2.5rem; }
.colophon-inner { max-width: var(--wide); margin: 0 auto; display: grid; gap: 1rem; justify-items: start; }
.colophon img { width: 200px; }
.colophon p { max-width: 40rem; color: var(--ink-2); margin: 0; }
.colophon-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font: 500 1rem var(--sans); }
.colophon-nav a { color: var(--ink); text-decoration: none; }
.colophon-nav a:hover { color: var(--sap-ink); }
.lost { min-height: 50vh; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}