/* The 404, Privacy and Terms pages, "down the shaft" (design round G, Colin's pick: C), in the Lantern look (UI round
   A): the game's mine-shaft banner across the top, then the page on a parchment sheet in the camp window's oak frame,
   dark brown words with no outline; each section of a long page gets an ore, rarer as you read down, and a list of the
   sections (a wood rail beside the text on wide screens, a fold on phones). The 404 is the game's dirt scene with its
   words on a small parchment card. Running text is in the reading face (--f-text); the title, headings and links to
   sections stay in Mali. shaft.js adds the banner, the ores, the list and the way home. The pages load the game's
   self-hosted fonts (fonts/fonts.css) and these tokens, the same as hub.css's. */
:root {
  --u: 2px; --win: #62321d; --win-edge: #321007; --win-hi: rgba(234, 183, 109, 0.30); --win-ink: #f4d995;
  --parch: #f1d6a7; --parch-edge: #522919; --parch-ink: #321007; --parch-ink-dim: #7a4a2a;
  --amber: #a25522; --amber-hi: #c47a42; --amber-lo: #5b2510;
  --wood-tex: url(/art/ui/wood.webp); --parch-tex: url(/art/ui/parchment.webp);
  --notch: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u), 100% calc(100% - var(--u)),
    calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)),
    0 var(--u), var(--u) var(--u));
  --frame: inset 0 0 0 3px var(--win-edge), inset 0 0 0 5px var(--win-hi), inset 0 0 0 7px var(--win-edge);
}

body.doc-page { background: #15110d; }
.shaft-hero { height: clamp(150px, 26vw, 260px); background: url(/art/pages/banner-howto.webp) center 38% / cover no-repeat; image-rendering: pixelated;
  box-shadow: inset 0 -60px 60px -20px #15110d; }
.doc { max-width: 700px; margin: -64px auto 0; padding: 0 16px 64px; gap: 14px; color: #efe6d6; }
.doc p, .doc li { font-family: var(--f-text); font-weight: 400; font-size: 1.0625rem; line-height: 1.7; }
.doc li b { font-weight: 700; }
.doc :target { scroll-margin-top: 20px; }
.doc .back { justify-self: start; padding: 7px 12px; background: rgba(10, 8, 6, 0.75); box-shadow: 0 0 0 2px #000; color: var(--gold); text-decoration: none; font-size: 0.875rem; }
.doc h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); }
.doc .meta { font-family: var(--f-label); font-size: 0.875rem; color: #c9b89c; }
.doc h2 { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 1.45rem; }
.doc a:not(.btn):not(.back) { color: var(--gold); text-underline-offset: 3px; }
.doc code { background: #0b0907; border-color: #3a2f24; }
.shaft-ore { width: 28px; height: 28px; flex: none; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000); }
.shaft-home { justify-self: start; margin-top: 12px; text-decoration: none; }

/* the sections: folded on phones, a rail that stays beside the text on wide screens */
.shaft-toc details { padding: 10px 14px; background: #1f1913; box-shadow: inset 0 0 0 2px #3a2f24; }
.shaft-toc summary { cursor: pointer; font: 700 0.95rem/1.4 var(--f-label); color: var(--gold); }
.shaft-toc ul { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.shaft-toc a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 8px; font: 700 0.95rem/1.2 var(--f-label); color: #e8dcc6; text-decoration: none; }
.shaft-toc a .shaft-ore { width: 20px; height: 20px; }
.shaft-toc a:hover, .shaft-toc a:focus-visible, .shaft-toc a.on { outline: none; background: #2b231a; color: var(--gold); }
@media (min-width: 1100px) {
  .doc:not(.lost) { position: relative; }
  .shaft-toc { position: absolute; top: 90px; bottom: 0; left: -270px; width: 250px; }
  .shaft-toc details { position: sticky; top: 20px; }
  .shaft-toc a { font-size: 0.9rem; }
}

/* the 404: the dirt scene fills the window, the words sit on a soft dark patch in the middle */
.shaft-hero.lost { position: fixed; inset: 0; height: auto; box-shadow: none; background-position: center;
  background-image: radial-gradient(ellipse 46% 34% at 50% 48%, rgba(10, 8, 6, 0.72), rgba(10, 8, 6, 0)), linear-gradient(rgba(10, 8, 6, 0.2), rgba(10, 8, 6, 0.7)), url(/art/pages/zone-0.webp); }
.doc.lost { position: relative; min-height: 100vh; min-height: 100dvh; margin-top: 0; padding-bottom: 0; }
.doc.lost h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.doc.lost p { color: #fff; text-shadow: var(--ol1); font-weight: 700; }
.doc.lost p.meta { color: var(--gold); }
.doc.lost img { display: none; }

/* ---------- the Lantern look ---------- */
body.doc-page { background: var(--wood-tex) 0 0 / 128px, #3d1d0f; }
.shaft-hero { box-shadow: inset 0 -60px 60px -20px #3d1d0f; }
.doc:not(.lost) { margin-top: -48px; padding: 28px clamp(18px, 4vw, 40px) 40px; border: 12px solid transparent; color: var(--parch-ink); clip-path: var(--notch);
  background: var(--parch-tex) 0 0 / 128px padding-box, linear-gradient(var(--parch), var(--parch)) padding-box,
    var(--wood-tex) 0 0 / 128px border-box, linear-gradient(var(--win), var(--win)) border-box; box-shadow: var(--frame); }
.doc:not(.lost) h1, .doc:not(.lost) h2 { color: var(--parch-ink); text-shadow: none; }
.doc:not(.lost) .meta { color: var(--parch-ink-dim); }
.doc:not(.lost) a:not(.btn):not(.back) { color: var(--amber-lo); }
.doc:not(.lost) code { background: rgba(122, 74, 42, 0.14); border-color: rgba(122, 74, 42, 0.35); color: var(--parch-ink); }
.doc:not(.lost) .shaft-ore { filter: drop-shadow(0 2px 0 rgba(50, 16, 7, 0.45)); }
.doc .back { background: var(--amber); box-shadow: inset 0 -3px 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge); color: var(--win-ink); clip-path: var(--notch); text-shadow: var(--ol1); }
.doc .btn { border: 0; border-radius: 0; clip-path: var(--notch); }
.doc .btn.primary { background: #4f8f2a; box-shadow: inset 0 -4px 0 #2b5a14, inset 0 3px 0 #78b84a, inset 0 0 0 var(--u) var(--win-edge); }
.shaft-toc details { background: var(--wood-tex) 0 0 / 128px, var(--win); clip-path: var(--notch); box-shadow: var(--frame); padding: 12px 16px; }
.shaft-toc summary { color: var(--win-ink); text-shadow: var(--ol1); }
.shaft-toc a { color: var(--win-ink); text-shadow: var(--ol1); }
.shaft-toc a:hover, .shaft-toc a:focus-visible, .shaft-toc a.on { background: rgba(50, 16, 7, 0.45); color: var(--gold); }
/* on the parchment sheet the fold sits on paper: a slim wood strip, not a second frame */
.doc:not(.lost) .shaft-toc details { box-shadow: inset 0 0 0 var(--u) var(--win-edge); }
@media (min-width: 1100px) { .shaft-toc { left: -282px; } .doc:not(.lost) .shaft-toc details { box-shadow: var(--frame); } }

/* the 404: its words on a small parchment card in an oak frame, in the middle of the dirt scene */
.lost-card { display: grid; justify-items: center; gap: 12px; width: min(520px, calc(100vw - 32px)); padding: 24px 24px 26px; border: 10px solid transparent; clip-path: var(--notch);
  box-shadow: var(--frame);
  background: var(--parch-tex) 0 0 / 128px padding-box, linear-gradient(var(--parch), var(--parch)) padding-box,
    var(--wood-tex) 0 0 / 128px border-box, linear-gradient(var(--win), var(--win)) border-box; }
.doc.lost h1 { color: var(--parch-ink); text-shadow: none; }
.doc.lost p { color: var(--parch-ink); text-shadow: none; }
.doc.lost p.meta { color: var(--amber-lo); }