/* 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"] { 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; }
@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; }
.signup-wrap { margin-top: auto; }
@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%; }
  .map-sprite { display: block; position: absolute; z-index: 1; height: auto; max-width: none; pointer-events: none; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)); }
  .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; }
}
.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-img-wood { object-position: 0% 60%; }
.hab-img-shore { object-position: 50% 24%; }
.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; }
.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); }
}
@media (max-width: 47.99em) { .motes { display: none !important; } }
@media print { .motes { display: none !important; } }