/* The Murkmares, by night. Warm ink, paper-coloured type, one rust-red hat. */
:root {
  --bg: #12100e;
  --panel: #1b1815;
  --deep: #0b0a09;
  --line: rgba(238, 225, 198, 0.16);
  --text: #E6D9BC;
  --head: #EEE1C6;
  --muted: #a89c84;
  --rust: #c0502f;       /* fills, borders, big numerals */
  --rust-text: #dd6a45;  /* small rust-coloured text: passes WCAG AA on the dark */
  --btn: #a8421f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --wrapw: 70rem;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg) url(/assets/paper-dark.0dda12ef.webp) repeat;
  scroll-padding-top: 6.5rem;
}
/* a soft vignette: the page falls away into shadow at the edges */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 90% 80% at 50% 40%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%); }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
@media (min-width: 40em) { body { font-size: 1.1875rem; } }
img { max-width: 100%; }
p { margin: 0 0 1.1em; max-width: 36em; }
.wrap { width: 100%; max-width: var(--wrapw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
a { color: var(--head); text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--rust-text); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--head); outline-offset: 3px; }
h1, h2 { margin: 0; font-weight: normal; line-height: 1; }
.hd { display: block; max-width: 100%; height: auto; }
.small { font-size: 1rem; }
.lede { font-size: 1.25rem; color: var(--head); }

/* buttons */
.btn { display: inline-block; padding: 0.7rem 1.4rem; border: 2px solid var(--btn); background: var(--btn); color: var(--head); font: inherit; font-size: 1rem; line-height: 1.2; text-decoration: none; letter-spacing: 0.02em; cursor: pointer; border-radius: 2px; }
.btn:hover { background: var(--rust); border-color: var(--rust); color: var(--head); }
.btn-ghost { background: transparent; border-color: rgba(238, 225, 198, 0.55); }
.btn-ghost:hover { background: rgba(238, 225, 198, 0.1); border-color: var(--head); color: var(--head); }
.btn-off, .btn-off:hover { background: transparent; border: 2px solid var(--muted); color: var(--muted); cursor: default; }
.btn-sm { padding: 0.4rem 0.95rem; font-size: 0.95rem; white-space: nowrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; }
.buy { margin: 1.4rem 0 0; }

/* header: wordmark left, nav and buy button right. Sticky from tablet width up; on phones the two-row
   header scrolls away so it does not eat a fifth of the screen. */
.site-header { position: relative; z-index: 50; background: rgba(18, 16, 14, 0.94); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(6px)) { .site-header { background: rgba(18, 16, 14, 0.82); backdrop-filter: blur(8px); } }
.header-inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand buy" "nav nav"; align-items: center; gap: 0.1rem 1rem; padding-top: 0.55rem; padding-bottom: 0.1rem; }
.site-title { grid-area: brand; display: inline-block; justify-self: start; line-height: 0; text-decoration: none; }
.site-title .hd { height: 1.9rem; width: auto; }
.header-buy { grid-area: buy; }
.main-nav { grid-area: nav; min-width: 0; }
/* phones: the links wrap onto a second row, so all five stay reachable without scrolling or script */
.main-nav ul, .foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.1rem; font-size: 0.95rem; }
.main-nav li { white-space: nowrap; }
.main-nav a { display: inline-block; padding: 0.45rem 0 0.4rem; text-decoration: none; border-bottom: 2px solid transparent; }
.main-nav a:focus-visible { outline-offset: -3px; }
.main-nav a:hover { color: var(--head); border-bottom-color: var(--rust); }
.main-nav a[aria-current="page"], .main-nav a[aria-current="true"] { border-bottom-color: var(--rust); }
@media (min-width: 56em) {
  .site-header { position: sticky; top: 0; }
  .main-nav a { padding: 0.55rem 0 0.5rem; }
  .header-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav buy"; gap: 0 2rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .main-nav ul { justify-content: flex-end; flex-wrap: nowrap; gap: 0 1.3rem; font-size: 1rem; white-space: nowrap; }
}

/* bands */
.band { padding: 3rem 0; }
.band-panel { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 48em) { .band { padding: 4.5rem 0; } }
.page-head { background: var(--panel); border-bottom: 1px solid var(--line); padding: 2.4rem 0 2rem; }
.page-head .lede { margin: 1.2rem 0 0; }
.page-head h1 { margin: 0; }
@media (min-width: 48em) { .page-head { padding: 3.6rem 0 3rem; } }

/* hero */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; background: var(--bg); min-height: 38rem; }
.hero-art { position: absolute; z-index: -2; top: 0; left: 0; right: 0; height: 24rem; }
.hero-art picture, .hero-art img { display: block; width: 100%; height: 100%; }
.hero-art img { object-fit: cover; object-position: 50% 62%; max-width: none; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 16, 14, 0.5) 0, rgba(18, 16, 14, 0) 12%, rgba(18, 16, 14, 0.15) 40%, var(--bg) 62%); }
.hero-inner { padding-top: 14.5rem; padding-bottom: 2.6rem; }
.home-title { margin: 0 0 0.2rem; }
.home-title .hd { display: inline-block; vertical-align: top; max-width: calc(100% - 1.5rem); }
.tm { font-size: 0.85rem; line-height: 1; vertical-align: top; position: relative; top: 0.3rem; margin-left: 0.2rem; color: var(--head); }
.subtitle { margin: 0.2rem 0 0.4rem; }
.subtitle .hd { width: 15rem; }
.byline { font-style: italic; color: var(--muted); margin: 0 0 1.3rem; }
.hook { font-size: 1.25rem; color: var(--head); margin-bottom: 1.6rem; }
.hook .vl { display: block; padding-left: 1.6em; text-indent: -1.6em; }
@media (min-width: 43.75em) {
  .hero { align-items: center; min-height: clamp(36rem, 86vh, 58rem); }
  .hero-art { height: auto; bottom: 0; left: auto; width: 60%; }
  .hero-art img { object-position: 72% 64%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
  .hero::before { background: linear-gradient(90deg, rgba(18, 16, 14, 0.7) 0, rgba(18, 16, 14, 0.35) 40%, rgba(18, 16, 14, 0) 70%), linear-gradient(180deg, rgba(18, 16, 14, 0.55) 0, rgba(18, 16, 14, 0) 18%, rgba(18, 16, 14, 0) 62%, var(--bg) 100%); }
  .hero-inner { padding-top: 5rem; padding-bottom: 5rem; }
  .home-title .hd { max-width: min(calc(100% - 1.5rem), 38rem); }
  .subtitle .hd { width: 19.5rem; }
  .hook { font-size: 1.3rem; max-width: 27em; }
}

/* the book */
.book-grid { display: grid; gap: 2.2rem; align-items: center; }
.book-cover { margin: 0 auto; width: min(100%, 17rem); }
.cover-img { display: block; width: 100%; height: auto; border: 1px solid rgba(238, 225, 198, 0.28); box-shadow: 0 32px 60px rgba(0, 0, 0, 0.7), 0 10px 20px rgba(0, 0, 0, 0.6); }
.book-text .hd { margin-bottom: 1.4rem; }
@media (min-width: 52em) {
  .book-grid { grid-template-columns: 22rem 1fr; gap: 4.5rem; }
  .book-cover { width: 100%; transform: rotate(-2deg); }
}

/* field guide teaser */
.fg-layout { display: grid; gap: 2rem; }
.fg-plate { order: 2; max-width: 26rem; }
.fg-main .hd { margin-bottom: 1rem; }
.fg-main .lede { margin-bottom: 1.8rem; }
.plate { margin: 0; }
.plate img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.sign-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
.sign-grid a { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.1rem 1.2rem 1.3rem; background: var(--panel); border: 1px solid var(--line); text-decoration: none; }
.sign-grid a:hover { border-color: var(--rust); color: var(--head); }
.sign-grid a:hover .sign-title { text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.num { display: block; font-size: 3.4rem; line-height: 1; color: var(--rust); }
.sign-title { font-size: 1.1rem; line-height: 1.3; color: var(--head); }
@media (min-width: 34em) { .sign-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56em) { .sign-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70em) {
  .fg-layout { grid-template-columns: 20rem 1fr; gap: 3.5rem; align-items: start; }
  .fg-plate { order: 0; max-width: none; }
}

/* pull quote */
.quote-band { text-align: center; padding-bottom: 3.6rem; }
.quote-sprites { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0.35rem, 2.4vw, 2rem); border-bottom: 1px solid rgba(238, 225, 198, 0.3); }
.quote-sprites .sprite { height: 4.2rem; max-width: 12%; object-fit: contain; object-position: bottom; margin-bottom: -1px; flex: 0 1 auto; }
.quote-sprites .q1, .quote-sprites .q7 { display: none; }
@media (min-width: 40em) { .quote-sprites .q1, .quote-sprites .q7 { display: block; } .quote-sprites .sprite { height: 6.5rem; } }
.pull { margin: 2.4rem auto 0; max-width: 22em; font-style: italic; font-size: clamp(1.75rem, 4.6vw, 3rem); line-height: 1.22; color: var(--head); }
.pull p { margin: 0 auto; max-width: none; }

/* name and hats teasers */
.duo { display: grid; gap: 0; }
.duo-cell { padding: 0 0 2.2rem; }
.duo-cell .hd { margin-bottom: 1.1rem; }
.duo-hats { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 2.2rem 0 0; border-top: 1px solid var(--line); }
.duo-hats .sprite { height: 9rem; flex: none; align-self: flex-end; }
.more { color: var(--rust-text); font-size: 1.05rem; text-decoration-color: var(--rust-text); }
.more:hover { color: var(--head); }
@media (min-width: 52em) {
  .duo { grid-template-columns: 1fr 1fr; gap: 0; }
  .duo-cell { padding: 0 3rem 0 0; }
  .duo-hats { padding: 0 0 0 3rem; border-top: 0; border-left: 1px solid var(--line); }
  .duo-hats .sprite { height: 11rem; }
}

/* sprites loiter on rules */
.sprite { display: block; height: 6rem; width: auto; max-width: none; }
.ledge { display: flex; align-items: flex-end; gap: 1.4rem; border-bottom: 1px solid var(--line); min-height: 3rem; }
.ledge .sprite { margin-bottom: -1px; }
.foot-sprites { margin-top: 0; }
.ledge-footer { justify-content: space-between; padding: 0 0.4rem; border-bottom: 0; }
.ledge-footer .sprite { height: 4.4rem; }
.foot-sprites .wrap { overflow: hidden; }

/* field guide */
.fg-shell { max-width: var(--wrapw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.fg-contents { display: none; }
.fg-band { padding: 2.8rem 0; }
.fg-band.alt { background: var(--panel); box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(0 -100vmax); }
.fg-band.alt::after { content: none; }
.fg-band + .fg-band { border-top: 0; }
.fg-band h2 { margin-bottom: 1.2rem; }
.split { display: grid; gap: 2rem; align-items: center; }
.split-media .plate img { border-color: rgba(238, 225, 198, 0.22); }
.ledge-wait { justify-content: center; gap: 2rem; min-height: 8rem; }
.ledge-wait .sprite { height: 8rem; }
.ledge-wait .w2 { height: 6.4rem; }
.ledge-wait .w3 { height: 7rem; }
@media (min-width: 48em) {
  .fg-band { padding: 4rem 0; }
  .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .split.flip .split-media { order: -1; }
}
.signs-head { margin-bottom: 1.6rem; }
.sign-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: 1fr; counter-reset: none; }
.card { display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.5rem; background: var(--bg); border: 1px solid var(--line); scroll-margin-top: 6.5rem; overflow: hidden; }
.card p { max-width: none; }
.card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.card-head .num { font-size: 3.8rem; flex: none; }
.sign-name { margin: 0; font-style: italic; font-weight: bold; font-size: 1.2rem; line-height: 1.25; color: var(--head); }
.card .plate { margin: auto -1.4rem -1.5rem; padding-top: 1.2rem; }
.card .plate img { border: 0; border-top: 1px solid var(--line); }
.card-sprite { margin-top: auto; align-self: flex-end; height: 6.4rem; }
.card-plate p:not(.sign-name) { margin-bottom: 1.2rem; }
@media (min-width: 48em) { .sign-cards { grid-template-columns: 1fr 1fr; } }
.panels { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.panel { padding: 1.6rem 1.5rem 1.2rem; background: var(--panel); border: 1px solid var(--line); }
.panel .hd { margin-bottom: 1rem; }
.panel p { max-width: none; }
@media (min-width: 60em) { .panels { grid-template-columns: repeat(3, 1fr); } }
.closing-band { text-align: center; padding: 3rem 0 3.4rem; }
.closing { font-style: italic; font-size: 1.5rem; color: var(--head); margin: 0 auto; max-width: none; }
.closing-band .buy { margin-top: 1.4rem; }
@media (min-width: 70em) {
  .fg-shell { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
  .fg-contents { display: block; position: sticky; z-index: 2; top: 6rem; padding: 3rem 0; font-size: 0.95rem; line-height: 1.35; }
  .fg-contents-label { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .fg-contents ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
  .fg-contents li a { display: block; padding: 0.45rem 0 0.45rem 0.9rem; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--text); }
  .fg-contents li a:hover { color: var(--head); border-left-color: var(--rust); }
}

/* shop */
.shop-grid { display: grid; gap: 1.6rem; }
.product { display: flex; flex-direction: column; padding: 1.8rem 1.6rem 2rem; background: var(--panel); border: 1px solid var(--line); }
.product .hd { margin-bottom: 1.4rem; }
.product-media { margin: 0 0 1.6rem; }
.product .cover-img { width: min(100%, 15rem); }
.product-hat { display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.product-hat .sprite { height: 15rem; margin-bottom: -1px; }
.product .buy { margin-top: auto; padding-top: 0.6rem; }
.product .soon { align-self: flex-start; margin: -0.6rem 0 1.4rem; padding: 0.2rem 0.7rem; font-size: 0.9rem; font-style: italic; letter-spacing: 0.02em; color: var(--rust-text); border: 1px solid var(--rust); border-radius: 2px; }
.product-art { display: flex; align-items: center; justify-content: center; min-height: 15rem; }
.product-art .shop-img { width: auto; max-width: 100%; max-height: 18rem; height: auto; }
.product-art .shop-small { box-sizing: content-box; width: 8rem; height: 8rem; max-height: none; object-fit: contain; padding: 1.3rem; background: rgb(238, 225, 198); border-radius: 50%; }
.signup-wrap { margin-top: auto; }
/* a product preview with its caption under it */
.product-cap { flex-direction: column; }
.product-cap figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.9rem; font-style: italic; text-align: center; }
/* potential merch: sections of previews, each picture with its caption */
.pm-back { margin-top: 1rem; }
.pm-section h2 { margin: 0 0 1.4rem; }
.pm-section h3 { margin: 0; }
.pm-lead { margin: 0 0 2rem; }
.pm-lead > p { max-width: 38rem; }
.pm-figs { display: grid; gap: 1.4rem; margin: 0 0 1.4rem; }
.pm-fig { margin: 0; }
.pm-fig .pm-img { display: block; width: auto; max-width: 100%; max-height: 24rem; height: auto; margin: 0 auto; }
.pm-paper .pm-img { box-sizing: border-box; max-height: 18rem; padding: 1.2rem; background: rgb(238, 225, 198); border-radius: 3px; }
.pm-fig figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.9rem; font-style: italic; text-align: center; }
.pm-board { max-width: 38rem; }
@media (min-width: 52em) { .pm-figs-2 { grid-template-columns: 1fr 1fr; align-items: start; } .shop-grid.pm-one { grid-template-columns: 1fr; } }
@media (min-width: 52em) { .shop-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .product { padding: 2.4rem 2.2rem 2.6rem; } }

/* name, privacy, 404 */
.prose-grid { display: grid; gap: 2.4rem; align-items: end; }
.prose p:last-child { margin-bottom: 0; }
.prose .closing { margin-top: 1.6rem; font-size: 1.35rem; }
.prose-aside { justify-content: flex-start; gap: 1.6rem; }
.prose-aside .sprite { height: 8rem; }
@media (min-width: 52em) {
  .prose-grid { grid-template-columns: minmax(0, 36em) 1fr; gap: 4rem; }
  .prose-aside { justify-content: center; }
  .prose-aside .sprite { height: 13rem; }
}

/* about */
.about-panels .panel p:last-child { margin-bottom: 0.4rem; }
.panel-sprite { display: flex; align-items: flex-end; justify-content: center; gap: 1.4rem; padding-bottom: 0; }
.panel-sprite .sprite { height: 8rem; margin-bottom: -1px; }

/* signup */
.signup { margin: 1rem 0 0; }
.signup label { display: block; margin-bottom: 0.3rem; }
.signup input[type="email"] { display: block; width: 100%; max-width: 22rem; padding: 0.6rem 0.7rem; margin-bottom: 0.8rem; font: inherit; color: var(--head); background: var(--bg); border: 1px solid rgba(238, 225, 198, 0.4); border-radius: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* footer */
.site-footer { margin-top: -1px; padding: 2.6rem 0 2.8rem; background: var(--deep); border-top: 1px solid var(--line); }
.site-footer a { color: var(--head); }
.site-footer a:hover { color: var(--rust-text); }
.foot-grid { display: grid; gap: 1.8rem; }
.foot-brand .site-title .hd { height: 2rem; }
.signoff { font-style: italic; margin: 0.6rem 0 0; color: var(--muted); }
.foot-navs { display: grid; gap: 1.6rem 3rem; grid-template-columns: repeat(auto-fit, minmax(10rem, max-content)); align-content: start; }
.foot-group { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 0.35rem; white-space: normal; font-size: 1rem; }
.foot-nav a { text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.legal { margin: 0; font-size: 0.95rem; color: var(--muted); }
.legal a { color: var(--head); }
@media (min-width: 52em) {
  .foot-grid { grid-template-columns: 0.9fr 1.7fr 1.3fr; gap: 3rem; align-items: start; }
  .legal { text-align: right; margin-left: auto; }
}

/* the hill: the map is the menu */
.hill-band { padding-top: 3rem; }
.hill-band h2 { margin-bottom: 1rem; }
.hill-band .lede { margin-bottom: 1.6rem; }
.hill-map { position: relative; border: 1px solid rgba(238, 225, 198, 0.28); background: var(--deep); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); }
.hill-map picture, .hill-img { display: block; width: 100%; height: auto; }
/* the art has a pale paper edge: pull it into the night */
.hill-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 3rem 1.6rem rgba(11, 10, 9, 0.9); }
.pin, .map-sprite { display: none; }
.hill-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: 1fr 1fr; }
.hill-list a { display: block; padding: 0.85rem 1rem; background: var(--panel); border: 1px solid var(--line); text-align: center; text-decoration: none; font-size: 1.1rem; min-height: 3rem; }
.hill-list a:hover { border-color: var(--rust); color: var(--head); }
@media (min-width: 40em) {
  .pin { display: block; position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 15%; padding: 0.7% 1.1%; line-height: 0; background: rgba(11, 10, 9, 0.78); border: 1px solid rgba(238, 225, 198, 0.4); border-radius: 2px; text-decoration: none; }
  .pin-img { display: block; width: 100%; height: auto; }
  .pin:hover { background: rgba(60, 22, 12, 0.92); border-color: var(--rust-text); }
  .pin:focus-visible { outline: 3px solid var(--head); outline-offset: 3px; background: rgba(60, 22, 12, 0.92); }
  .pin-wood { left: 16%; top: 60%; }
  .pin-town { left: 73%; top: 15%; width: 12%; }
  .pin-fields { left: 47%; top: 86%; }
  .pin-shore { left: 89%; top: 82%; }
  /* a Murkmare stays small on the maps: 0.9 of the drawn size (doubled from 0.45 so they can be found; David, 6 Oct), and the zoom's scale (--zs) is cancelled so it stays small, standing on its spot */
  .map-sprite { display: block; position: absolute; z-index: 1; height: auto; max-width: none; pointer-events: none; transform-origin: 50% 100%; transform: translate(-50%, -100%) scale(calc(var(--sk, 0.9) / var(--zs, 1))); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)); }
  .ms-w1, .ms-w2, .ms-t1, .ms-t2, .ms-f1, .ms-f2, .ms-s1, .ms-s2 { --sk: 0.98; }
  .ms-w1 { left: 31%; top: 75%; width: 1.5%; }
  .ms-w2 { left: 22.5%; top: 79%; width: 1.9%; }
  .ms-t1 { left: 50%; top: 53%; width: 2.2%; }
  .ms-t2 { left: 56%; top: 50%; width: 1.7%; }
  .ms-f1 { left: 41%; top: 70%; width: 2.5%; }
  .ms-f2 { left: 66%; top: 60%; width: 2.6%; }
  .ms-s1 { left: 83%; top: 63%; width: 2.1%; }
  .ms-s2 { left: 86%; top: 71%; width: 2.4%; }
  .hill-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 1rem; }
  .hill-list a { padding: 0.55rem 1.4rem; min-height: 0; font-size: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .pin { transition: background-color 0.18s, border-color 0.18s; }
  .map-sprite { transition: transform 0.8s cubic-bezier(0.45, 0, 0.55, 1); }
  .xp-go .xp-hl .map-sprite { transition-duration: 0.9s; }
}
/* where each region lies on the hill art, a percent of the map: the explorer (map.js) zooms toward here */
.pin-wood { --fx: 17%; --fy: 60%; }
.pin-town { --fx: 45%; --fy: 22%; }
.pin-fields { --fx: 56%; --fy: 62%; }
.pin-shore { --fx: 85%; --fy: 62%; }
.fg-more { margin: 1.6rem 0 0; }

/* habitat pages */
.hab-head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 15rem; background: var(--deep); border-bottom: 1px solid var(--line); }
.hab-art { position: absolute; inset: 0; z-index: -2; }
.hab-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 55%; }
.hab-art .hab-img { filter: saturate(0.9) brightness(0.8); }
/* darken the edges and the foot, so the lettering sits on shadow */
.hab-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 90% at 50% 40%, rgba(11, 10, 9, 0) 35%, rgba(11, 10, 9, 0.85) 100%), linear-gradient(180deg, rgba(11, 10, 9, 0.35) 0, rgba(11, 10, 9, 0) 30%, rgba(18, 16, 14, 0.55) 72%, var(--bg) 100%); }
.hab-head-inner { padding-top: 7rem; padding-bottom: 1.6rem; }
@media (min-width: 48em) {
  .hab-head { min-height: 22rem; }
  .hab-head-inner { padding-top: 10rem; padding-bottom: 2rem; }
}
.hab-band { padding: 2.6rem 0; }
.hab-band h2 { margin-bottom: 1.1rem; }
.hab-band .lede { max-width: 34em; margin-bottom: 1.8rem; }
.hab-second { padding-top: 0; }
.facts { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.facts-one { grid-template-columns: minmax(0, 24rem); }
.fact { padding: 1.3rem 1.4rem 0.9rem; }
.fact-label { margin: 0 0 0.6rem; font-weight: normal; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust-text); line-height: 1.2; }
.fact p { margin-bottom: 0.5rem; color: var(--head); }
.fact .more { display: inline-block; margin-top: 0.3rem; }
.hab-ledge { justify-content: flex-end; gap: 2rem; margin-top: 2.2rem; min-height: 4rem; }
.hab-ledge .sprite { height: 6.4rem; }
.hab-ledge .hs2 { height: 5.4rem; }
.hab-ledge .hs3 { height: 4.4rem; }
.hab-foot-band { padding: 2.2rem 0 2.6rem; }
.hab-links { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; }
.hab-links a { display: inline-block; padding: 0.5rem 0; font-size: 1.1rem; }
.hab-quiz { margin: 0; }

/* the quiz */
.visited-band { padding-top: 2.4rem; }
.visited-grid { display: grid; gap: 2rem; }
.visited-main { min-width: 0; max-width: 42rem; }
.ticks { margin: 0; padding: 0; border: 0; min-width: 0; }
.ticks ul { list-style: none; margin: 0; padding: 0; }
.tick { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; margin: 0 0 0.6rem; padding: 0.6rem 1rem; background: var(--panel); border: 1px solid var(--line); cursor: pointer; line-height: 1.35; color: var(--head); }
.tick:hover { border-color: rgba(238, 225, 198, 0.45); }
.tick input { position: absolute; left: 1rem; top: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0; opacity: 0; cursor: pointer; }
.box { position: relative; flex: none; width: 2rem; height: 2rem; border: 2px solid var(--head); border-radius: 2px; background: var(--bg); }
.box::after { content: ""; position: absolute; left: 0.58rem; top: 0.15rem; width: 0.5rem; height: 1rem; border: solid var(--head); border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; }
.tick input:checked + .box { background: var(--btn); border-color: var(--rust-text); }
.tick input:checked + .box::after { opacity: 1; }
.tick:has(input:checked) { border-color: var(--rust); }
.tick input:focus-visible + .box { outline: 3px solid var(--head); outline-offset: 3px; }
.verdict { z-index: 5; margin: 1.4rem 0 0; padding: 1.1rem 1.3rem 0.9rem; background: var(--deep); border: 1px solid var(--rust); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); }
.verdict:empty { display: none; }
.verdict p { max-width: none; margin: 0 0 0.6rem; }
.verdict-head { font-size: 1.5rem; font-style: italic; color: var(--head); line-height: 1.2; }
.verdict ul { margin: 0 0 0.4rem; padding-left: 1.2rem; }
.verdict li { margin-bottom: 0.4rem; }
.key { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.key-title { margin: 0 0 0.8rem; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.key ul { list-style: none; margin: 0; padding: 0; }
.key li { margin-bottom: 0.7rem; }
.kit { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.kit ul { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.kit li { margin-bottom: 0.5rem; }
.kit-note, .shop-free { color: var(--muted); font-size: 0.95rem; }
.key details { border: 1px solid var(--line); background: var(--panel); padding: 0 1.1rem; }
.key summary { cursor: pointer; min-height: 3rem; display: flex; align-items: center; color: var(--head); }
.key details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.key details ul { padding-bottom: 0.4rem; }
.visited-aside { justify-content: center; gap: 1.6rem; }
.visited-aside .sprite { height: 7rem; }
@media (min-width: 60em) {
  .visited-grid { grid-template-columns: minmax(0, 42rem) 1fr; gap: 4rem; align-items: end; }
  .visited-aside .sprite { height: 11rem; }
}
/* the verdict stays in the flow under the list: stuck to the viewport it covered the last rows */

/* the peekers: Murkmares hiding behind an edge. Each sits just above the top edge of a band, panel or
   footer and is clipped at that edge, so the lower part stays hidden. Decorative, never clickable. */
:root { --pk: 2.8rem; }
@media (min-width: 48em) { :root { --pk: 4rem; } }
.peek-anchor { position: relative; }
.peek-slot { position: absolute; bottom: 100%; z-index: 3; overflow: hidden; height: calc(var(--pk) * 0.86); line-height: 0; pointer-events: none; }
.peek-slot.full { height: var(--pk); }
.peek { display: block; height: var(--pk); width: auto; max-width: none; pointer-events: none; transform: translate3d(0, 0, 0); }
.peek.ducked { transform: translate3d(0, 1.4rem, 0); }
.pl-a { left: 6%; } .pl-b { left: 16%; } .pr-a { right: 6%; } .pr-b { right: 16%; }
@media (max-width: 51.99em) { .d52 { display: none; } }
@media (max-width: 59.99em) { .d60 { display: none; } }
/* page gutters, only where the gutter is wide enough to hold one */
.pg-l, .pg-r { display: none; }
@media (min-width: 84em) {
  .pg-l, .pg-r { display: block; --pk: 5rem; right: auto; }
  .pg-l { left: calc(50% - 39rem); }
  .pg-r { left: calc(50% + 34.5rem); }
}
.hab-foot-band { margin-top: 1.6rem; }
@media (prefers-reduced-motion: no-preference) { .peek { transition: transform 0.18s ease-out; } }
@media (prefers-reduced-motion: reduce) { .peek, .lamp { transition: none; } .peek.ducked { transform: none; opacity: 0; } }

/* the lamp: a warm glow that follows the pointer or keyboard focus. It only adds light (screen blend, low alpha),
   so text never gets darker. Built by script, so without script there is no lamp. */
.lamp { display: none; }
.js .lamp { display: block; position: fixed; left: 0; top: 0; z-index: 60; width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; will-change: transform, opacity; transform: translate3d(var(--lx, 50vw), var(--ly, 100vh), 0); background: radial-gradient(circle closest-side, rgba(255, 186, 104, 0.07), rgba(255, 170, 90, 0.03) 50%, rgba(255, 160, 80, 0)); }
.btn { position: relative; z-index: 61; } /* buttons sit above the lamp, so its light never touches their text */
.lamp.on { opacity: 1; }
.lamp.night { opacity: 0.55; }
.lamp.tap { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .lamp { transition: opacity 0.5s ease-out; } }
@media print { .peek-slot, .lamp { display: none !important; } }

/* lore package: start */
/* lore pages: The Creatures, The Maps, The Archive (added by the lore package) */
.lore-plate { margin: 1.2rem 0 1rem; }
.lore-plate img { border-color: rgba(238, 225, 198, 0.22); }
.lore-note { font-style: italic; color: var(--muted); }
.lore-panels { grid-template-columns: 1fr; }
@media (min-width: 48em) { .lore-panels { grid-template-columns: 1fr 1fr; } }
.lore-panels .panel h2 { margin-bottom: 1rem; }
#clans .sign-cards { margin-top: 1.4rem; }
#clans .card p:last-child { margin: auto 0 0; }

/* maps */
.map-fig { margin: 1.4rem 0 1.2rem; }
.map-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.map-places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.map-places a { color: var(--rust-text); text-decoration-color: var(--rust-text); }
.map-split { display: grid; gap: 2rem; align-items: start; }
.map-plate img { border-color: rgba(238, 225, 198, 0.22); }
.map-text h2 { margin-bottom: 1.2rem; }
.map-route, .lore-steps { margin: 0 0 1.1em; padding-left: 1.6rem; max-width: 36em; }
.map-route li, .lore-steps li { margin-bottom: 0.45rem; }
.map-route li::marker, .lore-steps li::marker { color: var(--rust-text); font-weight: bold; }
@media (min-width: 56em) {
  .map-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3.5rem; }
  .map-split.flip .map-plate { order: 2; }
}

/* archive */
#mare h2, #register h2, #remedies h2, #last-one h2, #grown-ups h2 { margin-bottom: 1.3rem; }
.sources { font-size: 0.95rem; color: var(--muted); }
.register, .remedies { list-style: none; margin: 1.4rem 0 0; padding: 0; max-width: 40em; }
.register li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 0 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.register li:last-child { border-bottom: 1px solid var(--line); }
.yr { color: var(--rust-text); font-variant-numeric: oldstyle-nums; }
.remedies li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; }
.remedies li::before { content: "\2715"; position: absolute; left: 0; top: 0.6rem; color: var(--rust-text); font-size: 0.9rem; }

/* creatures: longer contents list, clan chapters, rhymes */
.card .more + .more { margin-left: 1rem; }
@media (min-width: 70em) {
  .lore-contents { max-height: calc(100vh - 7rem); overflow-y: auto; padding: 2rem 0 1rem; }
  .lore-contents li a { padding-top: 0.28rem; padding-bottom: 0.28rem; }
  .lore-contents li.sub a { padding-left: 1.8rem; font-size: 0.9rem; }
}
.clan h3 { margin: 0 0 1.4rem; font-weight: normal; font-style: italic; font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.15; color: var(--head); }
.clan h4 { margin: 2.2rem 0 0.6rem; font-weight: normal; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.25; color: var(--rust-text); }
.rhyme-set { margin: 1.6rem 0; max-width: 30em; }
.rhyme { margin: 0; padding: 0.25rem 0 0.25rem 1.2rem; border-left: 2px solid var(--rust); font-style: italic; color: var(--head); }
.rhyme p { margin: 0; max-width: none; line-height: 1.55; }
.rhyme-note { margin: 0.6rem 0 0 calc(1.2rem + 2px); font-size: 1rem; font-style: italic; color: var(--muted); }

/* archive: old documents */
.doc h2 { margin-bottom: 1.3rem; }
.register.dated li { grid-template-columns: 5.6rem 1fr; }
.ledger-note { display: block; margin-top: 0.35rem; font-style: italic; color: var(--head); }
.letter { margin: 1.6rem 0 0; padding-left: 1.2rem; border-left: 1px solid var(--line); max-width: 36em; }
.letter p { margin-bottom: 0.7em; }
.letter p:last-child { margin-bottom: 0; }
.letter .sig { padding-left: 1.6rem; font-style: italic; }
.catalogue { margin: 1.4rem 0 0; padding: 1.2rem 1.4rem 0.3rem; border: 1px solid var(--line); max-width: 36em; }
.catalogue p { max-width: none; }
.accession { margin: 1.4rem 0 1.1em; padding-left: 1.6rem; max-width: 36em; }
.accession li { margin-bottom: 0.55rem; }
.accession li::marker { color: var(--rust-text); font-weight: bold; }
/* lore package: end */

/* parallax: script adds .px and sets --py --ty --fade --my --d1 --d2; transforms live here, only where motion is welcome.
   The art is pulled up past its frame by its maximum drift, so no edge shows (needs no script, so no shift). */
.motes { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art { top: -2.5rem; height: calc(24rem + 2.5rem); }
  .px .hero-art { transform: translate3d(0, calc(var(--py, 0) * 1px), 0); will-change: transform; }
  .px .hero-text { transform: translate3d(0, calc(var(--ty, 0) * 1px), 0); opacity: var(--fade, 1); will-change: transform; }
  .px .motes { display: block; position: fixed; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
  .px .motes::before, .px .motes::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; will-change: transform; background-repeat: repeat; }
  .px .motes::before { height: calc(100% + 360px); background-size: 360px 360px; transform: translate3d(0, calc(var(--d1, 0) * 1px), 0);
    background-image: radial-gradient(circle 1.2px at 40px 60px, rgba(238, 225, 198, 0.16), transparent), radial-gradient(circle 1px at 210px 150px, rgba(238, 225, 198, 0.12), transparent), radial-gradient(circle 1.4px at 300px 290px, rgba(238, 225, 198, 0.14), transparent), radial-gradient(circle 1px at 120px 320px, rgba(238, 225, 198, 0.1), transparent); }
  .px .motes::after { height: calc(100% + 560px); background-size: 560px 560px; transform: translate3d(0, calc(var(--d2, 0) * 1px), 0);
    background-image: radial-gradient(circle 2px at 90px 120px, rgba(255, 196, 120, 0.12), transparent), radial-gradient(circle 1.6px at 400px 260px, rgba(255, 196, 120, 0.1), transparent), radial-gradient(circle 2.2px at 250px 480px, rgba(255, 196, 120, 0.11), transparent); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 43.75em) {
  .hero-art { top: -6.25rem; height: auto; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 48em) {
  .hab-art { top: -4rem; }
  .px .hab-art { transform: translate3d(0, calc(var(--py, 0) * 1px), 0); will-change: transform; }
  .px .hill-map { transform: translate3d(0, calc(var(--my, 0) * 1px), 0); }
  .px .hill-map.xp-on { transform: none; }
}
@media (max-width: 47.99em) { .motes { display: none !important; } }
@media print { .motes { display: none !important; } }

/* habitat maps: the map is a picture with named places; linked places are the menu (same pattern as the hill) */
.hab-map { position: relative; margin: 0 0 1.4rem; border: 1px solid rgba(238, 225, 198, 0.28); background: var(--deep); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); }
.hab-map picture, .hab-map-img { display: block; width: 100%; height: auto; }
.hab-map-list { margin: 0 0 2rem; }
.ml { display: none; }
.hab-band .panel[id], .hab-band .lede[id] { scroll-margin-top: 6.5rem; }
.hab-second[id] { scroll-margin-top: 4rem; }
@media (min-width: 40em) {
  .ml { display: block; position: absolute; z-index: 2; transform: translate(-50%, -50%); padding: 0.6% 1%; line-height: 0; background: rgba(11, 10, 9, 0.78); border: 1px solid rgba(238, 225, 198, 0.4); border-radius: 2px; text-decoration: none; }
  .ml-img { display: block; width: 100%; height: auto; }
  a.ml:hover { background: rgba(60, 22, 12, 0.92); border-color: var(--rust-text); }
  a.ml:focus-visible { outline: 3px solid var(--head); outline-offset: 3px; background: rgba(60, 22, 12, 0.92); }
  .ml-plain { background: rgba(11, 10, 9, 0.7); border-color: rgba(238, 225, 198, 0.25); }
}
/* the generated positions sit outside the min-width query so map.js can read a hidden label's place on phones */
/*GEN*/
/* habitat maps: generated positions, percent of the map */
  .hm-wood .m-eldest-tree { left: 50.9%; top: 38.1%; width: 17.8%; }
  .hm-wood .m-toadstool-ring { left: 20.2%; top: 86.2%; width: 21.1%; }
  .hm-wood .m-bark-trees { left: 90.4%; top: 8.5%; width: 17.8%; }
  .hm-wood .m-woodcutters-cottage { left: 70.9%; top: 89.7%; width: 18.5%; }
  .hm-wood .m-still-pool { left: 39.0%; top: 79.1%; width: 15.6%; }
  .hm-wood .m-path-to-mildew { left: 17.2%; top: 15.5%; width: 16.2%; }
  .mps-wood-1 { left: 31.0%; top: 62.1%; width: 2.0%; }
  .mps-wood-2 { left: 77.0%; top: 69.2%; width: 1.8%; }
  .hm-shore .m-lighthouse-foghorn { left: 57.8%; top: 25.8%; width: 20.2%; }
  .hm-shore .m-fog-bank { left: 91.6%; top: 59.6%; width: 16.3%; }
  .hm-shore .m-fishermens-cottages { left: 34.0%; top: 34.8%; width: 17.6%; }
  .hm-shore .m-washing-line { left: 8.0%; top: 71.6%; width: 14.9%; }
  .hm-shore .m-beach-boats { left: 56.3%; top: 87.5%; width: 16.2%; }
  .hm-shore .m-path-to-mildew { left: 28.4%; top: 15.9%; width: 16.2%; }
  .mps-shore-1 { left: 46.3%; top: 81.5%; width: 1.8%; }
  .mps-shore-2 { left: 6.4%; top: 59.6%; width: 1.8%; }
  .hm-town .m-leaning-houses { left: 8.7%; top: 7.8%; width: 13.9%; }
  .hm-town .m-clock-tower { left: 73.2%; top: 11.3%; width: 18.8%; }
  .hm-town .m-village-pond { left: 60.9%; top: 58.6%; width: 18.3%; }
  .hm-town .m-sock-line { left: 56.3%; top: 94.6%; width: 16.1%; }
  .hm-town .m-path-down-the-hill { left: 93.1%; top: 57.9%; width: 11.9%; }
  .mps-town-1 { left: 47.9%; top: 63.6%; width: 1.7%; }
  .mps-town-2 { left: 74.7%; top: 63.6%; width: 1.7%; }
  .hm-fields .m-farmhouse { left: 27.1%; top: 23.3%; width: 16.6%; }
  .hm-fields .m-scarecrow-gate { left: 22.5%; top: 68.5%; width: 16.1%; }
  .hm-fields .m-ploughed { left: 16.4%; top: 86.2%; width: 10.7%; }
  .hm-fields .m-sown { left: 50.9%; top: 52.3%; width: 7.5%; }
  .hm-fields .m-grown { left: 66.3%; top: 37.4%; width: 8.4%; }
  .hm-fields .m-cut { left: 94.2%; top: 64.7%; width: 5.7%; }
  .hm-fields .m-meadow { left: 81.6%; top: 86.2%; width: 14.2%; }
  .hm-fields .m-path-to-mildew { left: 75.5%; top: 18.4%; width: 16.2%; }
  .mps-fields-1 { left: 20.2%; top: 59.3%; width: 1.9%; }
  .mps-fields-2 { left: 73.9%; top: 94.6%; width: 2.0%; }
  .hm-fields .m-field-gate { left: 44.5%; top: 90.5%; width: 16.5%; }
  /* the Wanderers leaving by the field gate: eldest first, youngest running to catch up */
  .mps-line-1 { left: 57.5%; top: 90.0%; width: 2.1%; }
  .mps-line-2 { left: 50.0%; top: 82.0%; width: 2.0%; }
  .mps-line-3 { left: 46.0%; top: 78.0%; width: 1.9%; }
  .mps-line-4 { left: 41.5%; top: 72.0%; width: 1.9%; }
  .mps-line-5 { left: 37.0%; top: 66.5%; width: 1.7%; }
  .mps-line-6 { left: 32.0%; top: 64.5%; width: 2.4%; }
/*ENDGEN*/
@media (prefers-reduced-motion: no-preference) {
  a.ml { transition: background-color 0.18s, border-color 0.18s; }
}

/* zoom into a place on a habitat map (map.js): the art, labels and sprites scale as one layer inside the frame */
.hab-map, .clan h4[id] { scroll-margin-top: 6.5rem; }
.mz-frame { position: relative; overflow: hidden; overflow: clip; }
.mz-layer { position: relative; transform-origin: 0 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zs, 1)); }
.mz-z { cursor: zoom-in; }
span.mz-z:focus-visible { outline: 3px solid var(--head); outline-offset: 3px; background: rgba(60, 22, 12, 0.92); }
.mz-on .mz-layer { cursor: zoom-out; }
.mz-on .mz-layer .ml { transform: translate(-50%, -50%) scale(var(--ls, 1)); opacity: 0.22; }
.mz-on .mz-layer .ml.mz-cur { opacity: 1; z-index: 4; cursor: zoom-out; left: var(--fx); top: calc(var(--fy) - 9%); }
.mz-back { position: absolute; z-index: 6; top: 0.6rem; right: 0.6rem; padding: 0.5rem 0.9rem; font: inherit; font-size: 0.95rem; line-height: 1.2; color: var(--head); background: rgba(11, 10, 9, 0.9); border: 1px solid rgba(238, 225, 198, 0.55); border-radius: 2px; cursor: pointer; }
.mz-back[hidden] { display: none; }
.mz-back:hover { border-color: var(--rust-text); background: rgba(60, 22, 12, 0.92); }
.mz-back:focus-visible { outline: 3px solid var(--head); outline-offset: 2px; }
.mz-hats { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.mz-plate { position: absolute; z-index: 5; left: 2%; bottom: 2.5%; width: min(21rem, 38%); padding: 0.7rem 0.95rem 0.45rem; background: rgba(18, 16, 14, 0.93); border: 1px solid rgba(238, 225, 198, 0.4); border-radius: 2px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6); }
.mz-plate.mz-r { left: auto; right: 2%; }
.mz-plate[hidden] { display: none; }
.mz-lab { margin: 0 0 0.2rem; font-size: 0.95rem; font-style: italic; color: var(--rust-text); }
.mz-txt { margin: 0 0 0.2rem; font-size: 1rem; line-height: 1.4; color: var(--text); }
.mz-more { display: inline-block; padding: 0.4rem 0; font-size: 0.95rem; }
@media (max-width: 39.99em) {
  .mz-back { top: 0.4rem; right: 0.4rem; padding: 0.45rem 0.7rem; font-size: 0.85rem; }
  /* a phone's map is too small to hold a card: it slides up from the bottom of the screen instead */
  .mz-plate, .mz-plate.mz-r { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; width: auto; max-height: 50vh; overflow-y: auto; padding: 0.85rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 0; background: rgb(18, 16, 14); box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.65); }
}
/* the place each label stands beside, as a percent of the map: the zoom centres here, not on the label */
.hm-wood .m-eldest-tree { --fx: 49%; --fy: 45%; }
.hm-wood .m-toadstool-ring { --fx: 19%; --fy: 67%; }
.hm-wood .m-bark-trees { --fx: 88%; --fy: 35%; }
.hm-wood .m-woodcutters-cottage { --fx: 68%; --fy: 64%; }
.hm-wood .m-still-pool { --fx: 39%; --fy: 90%; }
.hm-shore .m-lighthouse-foghorn { --fx: 70%; --fy: 37%; }
.hm-shore .m-fog-bank { --fx: 89%; --fy: 71%; }
.hm-shore .m-fishermens-cottages { --fx: 33%; --fy: 62%; }
.hm-shore .m-washing-line { --fx: 9%; --fy: 90%; }
.hm-shore .m-beach-boats { --fx: 42%; --fy: 88%; }
.hm-town .m-leaning-houses { --fx: 30%; --fy: 42%; }
.hm-town .m-clock-tower { --fx: 58%; --fy: 25%; }
.hm-town .m-village-pond { --fx: 62%; --fy: 68%; }
.hm-town .m-sock-line { --fx: 56%; --fy: 84%; }
.hm-fields .m-farmhouse { --fx: 28%; --fy: 40%; }
.hm-fields .m-scarecrow-gate { --fx: 34%; --fy: 57%; }
.hm-fields .m-field-gate { --fx: 48%; --fy: 74%; }
.hm-fields .m-ploughed { --fx: 24%; --fy: 83%; }
.hm-fields .m-sown { --fx: 49%; --fy: 56%; }
.hm-fields .m-grown { --fx: 66%; --fy: 35%; }
.hm-fields .m-cut { --fx: 88%; --fy: 50%; }
.hm-fields .m-meadow { --fx: 72%; --fy: 75%; }
.hat { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mz-layer { transition: transform 0.8s cubic-bezier(0.45, 0, 0.55, 1); }
  .mz-layer .ml { transition: transform 0.8s cubic-bezier(0.45, 0, 0.55, 1), left 0.8s cubic-bezier(0.45, 0, 0.55, 1), top 0.8s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.5s, background-color 0.18s, border-color 0.18s; }
  .mz-plate:not([hidden]) { animation: mz-in 0.4s ease-out 0.35s both; }
  /* the pseudo-element only makes the browser fetch the hat before it is needed */
  .mz-hats::before { content: ""; position: absolute; width: 1px; height: 1px; opacity: 0; background: url(/assets/hat-chip.2f3d6d10.webp) 0 0 / 1px 1px; }
  .hat { display: block; position: absolute; left: var(--hx0); top: var(--hy0); width: var(--hw); aspect-ratio: 119 / 96; background: url(/assets/hat-chip.2f3d6d10.webp) center / contain no-repeat; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)); animation: mz-hat var(--hd) cubic-bezier(0.2, 0.7, 0.3, 1) var(--hl) both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 39.99em) {
  .mz-plate:not([hidden]) { animation: mz-up 0.35s ease-out both; }
}
@keyframes mz-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mz-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@keyframes mz-hat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  14% { opacity: 1; transform: translate(-50%, calc(-50% - 0.9rem)) scale(1) rotate(-14deg); }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--hx)), calc(-50% + var(--hy))) scale(0.85) rotate(var(--hr)); }
}

/* the way back up from a habitat page: a breadcrumb above the section, and a tab on the map's top-left corner */
.hab-crumbs { margin: 0 0 1.4rem; font-size: 1rem; line-height: 1.4; }
.hab-crumbs .sep { margin: 0 0.45rem; color: var(--rust-text); }
.hab-crumbs [aria-current] { font-style: italic; }
.hab-map { margin-top: 2.9rem; }
.hm-hill { position: absolute; z-index: 6; left: -1px; bottom: 100%; padding: 0.4rem 0.85rem 0.35rem; font-size: 0.95rem; line-height: 1.3; color: var(--head); background: rgba(11, 10, 9, 0.94); border: 1px solid rgba(238, 225, 198, 0.28); border-bottom: 0; border-radius: 2px 2px 0 0; text-decoration: none; }
.hm-hill:hover { color: var(--rust-text); border-color: var(--rust-text); }
.mz-on .hm-hill { visibility: hidden; }

/* the hill explorer on Home (map.js). Pick a region and the map's frame grows to fill the window while the art
   zooms toward it; the region's own map (the habitat page's art and .hm-<place> .m-<label> places above, cloned
   from a <template>) takes over, with its places and lore in a side panel (a sheet below the map on phones). */
.hill-map.xp-ready::after { content: none; }
.xp-bar, .xp-drawer { display: none; }
.xp-frame { position: relative; overflow: hidden; overflow: clip; }
.xp-hl { position: relative; transform-origin: 0 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zs, 1)); }
.xp-hl::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 3rem 1.6rem rgba(11, 10, 9, 0.9); }
.xp-frame .xp-rl { position: absolute; top: 0; left: 0; z-index: 3; opacity: 0; visibility: hidden; transition: none; }
.xp-rl picture, .xp-rl .hab-map-img { display: block; width: 100%; height: auto; }
.xp-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.xp-lock, html.xp-lock body { overflow: hidden; }
/* open: fixed above everything, header included. The map runs edge to edge; the bar and the lore drawer float over it. */
.hill-map.xp-on { position: fixed; z-index: 80; display: block; margin: 0; border-color: rgba(238, 225, 198, 0.2); background: var(--deep); overflow: hidden; }
.xp-on .peek-slot { display: none; }
.xp-on .xp-bar { display: flex; position: absolute; z-index: 7; top: 0; left: 0; right: 0; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding: 0.3rem 0.6rem 0.3rem 0.9rem; background: rgba(11, 10, 9, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(238, 225, 198, 0.16); }
.xp-crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; font-size: 1rem; line-height: 1.3; min-width: 0; }
.xp-crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.xp-crumbs .sep { color: var(--rust-text); }
.xp-crumb, .xp-shut { padding: 0.45rem 0.1rem; font: inherit; color: var(--head); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.xp-crumb:hover, .xp-shut:hover { color: var(--rust-text); }
.xp-shut { flex: none; padding: 0.45rem 0.8rem; font-size: 0.95rem; text-decoration: none; background: rgba(11, 10, 9, 0.5); border: 1px solid rgba(238, 225, 198, 0.45); border-radius: 2px; }
.xp-here { padding: 0.45rem 0.1rem; font-style: italic; color: var(--text); }
.xp-on .xp-body { position: absolute; inset: 0; }
.xp-on .xp-stage { position: absolute; inset: 0; container-type: size; }
.xp-on .xp-frame { position: absolute; inset: 0; }
.xp-on .xp-hl { position: absolute; width: max(100cqw, calc(100cqh * var(--ar))); left: calc(50cqw - max(50cqw, 50cqh * var(--ar))); top: calc(50cqh - max(50cqw / var(--ar), 50cqh)); }
.xp-on .xp-hl .pin { opacity: 0; visibility: hidden; }
/* a region's map covers the stage (cropped, 4px over), centred; map.js pans it with --pnx/--pny across what is cropped */
.xp-reg .xp-hl { visibility: hidden; }
.xp-mist .xp-hl { filter: brightness(0.55) blur(3px); }
.xp-on .xp-frame .xp-rl { --w: calc(max(100cqw, 100cqh * var(--ar)) + 4px); width: var(--w); left: calc(50cqw - var(--w) / 2); top: calc(50cqh - var(--w) / var(--ar) / 2); translate: var(--pnx, 0px) var(--pny, 0px); }
.xp-frame .xp-rl.xp-in { opacity: 1; visibility: visible; }
.xp-reg .xp-stage { touch-action: none; -webkit-user-select: none; user-select: none; }
/* the mist between the hill and a region: opaque everywhere at its height, warm where the dive is heading */
.xp-fog { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden; transform: scale(1.15);
  background: radial-gradient(ellipse 45% 35% at 30% 65%, rgba(238, 225, 198, 0.05), transparent), radial-gradient(ellipse 50% 30% at 72% 30%, rgba(238, 225, 198, 0.04), transparent),
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #3a2717 0, #22180f 26%, #130e0b 55%, #0b0a09 85%); }
.xp-mist .xp-fog { opacity: 1; visibility: visible; transform: none; }
.xp-frame .xp-rl:not(.xp-set) .ml { opacity: 0; }
/* the lore drawer: a translucent sheet over the map (right side on wide screens, bottom on narrow), shut on arrival;
   only its tab, the region's name, shows on the edge */
.xp-side-in .xp-drawer { display: block; position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: min(62%, calc(100% - var(--bh, 3rem) - 3rem)); transform: translateY(100%); }
.xp-open .xp-drawer { transform: none; }
.xp-side { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem 2rem; background: rgba(14, 12, 10, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid rgba(238, 225, 198, 0.28); visibility: hidden; }
.xp-open .xp-side { visibility: visible; }
.xp-tab { position: absolute; right: 0.75rem; bottom: 100%; padding: 0.55rem 0.9rem; font: inherit; font-size: 0.95rem; line-height: 1.2; color: var(--head); background: rgba(14, 12, 10, 0.86); border: 1px solid rgba(238, 225, 198, 0.4); border-bottom: 0; border-radius: 2px 2px 0 0; cursor: pointer; }
.xp-tab:hover, .xp-open .xp-tab { color: var(--rust-text); border-color: var(--rust-text); }
.xp-tab:focus-visible { outline: 3px solid var(--head); outline-offset: 2px; }
.xp-list { margin: 0 0 1.4rem; }
.xp-list button { display: block; width: 100%; padding: 0.7rem 0.8rem; min-height: 3rem; font: inherit; font-size: 1rem; line-height: 1.3; color: var(--head); background: var(--panel); border: 1px solid var(--line); text-align: center; cursor: pointer; }
.xp-list button:hover, .xp-list button[aria-current] { border-color: var(--rust); }
.xp-list button[aria-current] { background: rgba(60, 22, 12, 0.7); }
.xp-h, .xp-subh { margin: 0 0 0.9rem; font-weight: normal; }
.xp-lore .lede { font-size: 1.12rem; }
.xp-lore .panels { grid-template-columns: 1fr; gap: 0.8rem; }
.xp-lore .panel { padding: 1rem 1.1rem 0.6rem; }
.xp-sub { margin-top: 2rem; }
.xp-lore .chapter-more { margin-top: 1.6rem; }
.xp-on .xp-plate { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 3.4rem; width: auto; margin: 0; border-width: 1px; }
.xp-on .xp-side .xp-plate { position: static; width: auto; max-height: none; overflow: visible; margin: 0 0 1.4rem; border-width: 1px; box-shadow: none; animation: none; }
@media (min-width: 40em) {
  .xp-on .xp-plate { left: 1rem; right: auto; bottom: 3.6rem; width: min(21rem, 40%); }
  .xp-on .xp-plate.mz-r { left: auto; right: calc(var(--sw, 0rem) + 1rem); }
}
@media (min-width: 56em) {
  .xp-on .xp-plate { bottom: 1rem; }
  .xp-open { --sw: 22rem; }
  .xp-side-in .xp-drawer { left: auto; top: var(--bh, 3rem); width: 22rem; height: auto; transform: translateX(100%); }
  .xp-open .xp-drawer { transform: none; }
  .xp-side { padding: 1.2rem 1.3rem 2rem; border-top: 0; border-left: 1px solid rgba(238, 225, 198, 0.28); }
  .xp-tab { right: 100%; bottom: auto; top: 1rem; border: 1px solid rgba(238, 225, 198, 0.4); border-right: 0; border-radius: 2px 0 0 2px; }
  .xp-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .xp-list li { flex: 1 1 auto; }
  .xp-list button { min-height: 0; padding: 0.45rem 0.7rem; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .xp-go.hill-map { transition: top 0.9s cubic-bezier(0.45, 0, 0.55, 1), left 0.9s cubic-bezier(0.45, 0, 0.55, 1), width 0.9s cubic-bezier(0.45, 0, 0.55, 1), height 0.9s cubic-bezier(0.45, 0, 0.55, 1); }
  .xp-go .xp-hl { transition: transform 0.9s cubic-bezier(0.45, 0, 0.55, 1), filter 0.5s; }
  .xp-go .xp-hl .pin { transition: opacity 0.3s, visibility 0s linear 0.3s; }
  .xp-go .xp-frame .xp-rl { transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1); }
  .xp-go .xp-fog { transition: opacity 0.45s ease, transform 0.45s ease-out, visibility 0s linear 0.45s; }
  .xp-go.xp-mist .xp-fog { transition: opacity 0.45s ease, transform 0.45s ease-out, visibility 0s; }
  .xp-go .xp-rl .ml { transition: opacity 0.45s ease-out, transform 0.8s cubic-bezier(0.45, 0, 0.55, 1), left 0.8s cubic-bezier(0.45, 0, 0.55, 1), top 0.8s cubic-bezier(0.45, 0, 0.55, 1), background-color 0.18s, border-color 0.18s; }
  .xp-go .xp-drawer { transition: transform 0.45s cubic-bezier(0.45, 0, 0.55, 1); }
  .xp-go .xp-side { transition: visibility 0s linear 0.45s; }
  .xp-go.xp-wait .xp-drawer { transition-delay: 0.45s; }
  .xp-go.xp-wait .xp-side { transition-delay: 0.9s; }
  .xp-go .xp-frame .xp-rl.xp-glide { transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.3, 1), translate 0.45s cubic-bezier(0.2, 0.6, 0.3, 1); }
  .xp-go.xp-open .xp-side { transition: none; }
  .xp-go.xp-side-in .xp-tab { animation: mz-in 0.4s ease-out 0.25s both; }
}
.xp-ready:not(.xp-go) .xp-rl .ml { transition: none; }
.xp-frame .xp-rl.xp-snap { transition: none !important; }

/* a clan's chapter on its habitat page: the text comes from the Creatures page */
.hab-chapter { padding: 3rem 0 2.6rem; }
.hab-chapter .wrap > * { max-width: 42rem; }
.hab-chapter .wrap > .chapter-more { max-width: none; }
.chapter-more { list-style: none; margin: 2.2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; }
.chapter-more a { display: inline-block; padding: 0.5rem 0; font-size: 1.05rem; }

/* the small row of links under a lore page's header */
.lore-sub { background: var(--bg); border-bottom: 1px solid var(--line); }
.lore-sub ul { list-style: none; margin: 0; padding: 0.3rem 0; display: flex; flex-wrap: wrap; gap: 0 1.6rem; font-size: 0.98rem; }
.lore-sub a { display: inline-block; padding: 0.55rem 0 0.5rem; text-decoration: none; border-bottom: 2px solid transparent; }
.lore-sub a:hover { color: var(--head); border-bottom-color: var(--rust); }
.lore-sub a[aria-current="page"] { color: var(--head); border-bottom-color: var(--rust); }

/* home: three doors into the lore */
.lore-band { padding-top: 3rem; padding-bottom: 3rem; }
.lore-band h2 { margin-bottom: 1.4rem; }
.lore-cards { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 52em) { .lore-cards { grid-template-columns: repeat(3, 1fr); } }
.lore-card { position: relative; padding-bottom: 1.4rem; }
.lore-card:hover { border-color: var(--rust); }
.lore-card-h { margin: 0 0 0.9rem; font-weight: normal; }
.lore-card-h a { text-decoration: none; display: inline-block; }
.lore-card-h a::after { content: ""; position: absolute; inset: 0; }
.lore-card-img { display: block; width: auto; height: 2.4rem; max-width: 100%; }
.lore-card p { margin: 0; }