/* Dark Legacy site styles. Ported from the v5 design (dl-website-redesign/v5/index.html).
   Faces are self-hosted from their OFL distributions (static/fonts/). */
@font-face{font-family:"IM Fell English";src:url(../fonts/im-fell-english-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IM Fell English";src:url(../fonts/im-fell-english-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IM Fell English SC";src:url(../fonts/im-fell-english-sc.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IM Fell French Canon";src:url(../fonts/im-fell-french-canon.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

/* ── Tokens ─────────────────────────────────────────────────────────────
   Two voices. The world speaks in Fell (headings, tales, the cartographer).
   The site speaks in Garamond (facts, links, captions, navigation).
   Gold has two jobs: links, and the initial of a tale. Ember is Play now. */
:root{
  --ink:#0E0C13; --pitch:#08070B; --rule:#2A2433;
  --text:#E6DCC6; --dim:#B5A88C; --gold:#D9B36A; --ember:#E8853D;
  --world:"IM Fell English",Georgia,serif;
  --canon:"IM Fell French Canon","IM Fell English",Georgia,serif;
  --sc:"IM Fell English SC","IM Fell English",Georgia,serif;
  --plain:"EB Garamond",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"DejaVu Sans Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --pad:clamp(20px,4.4vw,64px);
  --gutter:clamp(20px,2.6vw,36px);
  --section:clamp(88px,11vw,168px);
  --t-small:16px;
  --t-body:20px;
  --t-lead:clamp(21px,1.7vw,24px);
  --t-tale:clamp(20px,1.6vw,23px);
}

/* ── Base ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);color-scheme:dark;scrollbar-color:#3b3347 var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 var(--t-body)/1.6 var(--plain);font-kerning:normal}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h1{font:400 clamp(34px,10.4vw,64px)/1.02 var(--canon)}
h2{font:400 clamp(36px,4.3vw,60px)/1.04 var(--canon)}
h3{font:italic 400 clamp(26px,2.4vw,32px)/1.18 var(--world)}
p{margin:0 0 .8em;max-width:30em;text-wrap:pretty}
/* A long URL or a ruled line in someone's text breaks rather than widening the page */
p,li,dd,dt,blockquote,figcaption,h1,h2,h3{overflow-wrap:break-word}
a{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(217,179,106,.5)}
a:hover{color:#F3E3BC;text-decoration-color:currentColor}
code{font:.82em var(--mono);color:var(--text)}
figure{margin:0}
.small,figcaption{font-size:var(--t-small);line-height:1.5;color:var(--dim)}
.wrap{max-width:calc(1200px + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.grid > *{grid-column:1/-1}
.world{font-family:var(--world)}

.skip{position:absolute;left:var(--pad);top:-80px;z-index:10;background:var(--text);color:var(--ink);padding:8px 14px;text-decoration:none}
.skip:focus{top:8px}


/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--ember);color:#1A0A02;font:600 20px/1 var(--plain);text-decoration:none;padding:15px 26px;white-space:nowrap;border:0;cursor:pointer}
.btn:hover{background:#F39A55;color:#1A0A02}
.btn-s{padding:10px 18px;font-size:18px}
.btn-quiet{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--dim)}
.btn-quiet:hover{background:var(--text);color:var(--ink)}

/* ── Header ─────────────────────────────────────────────────────────── */
.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(16px,2.4vw,34px);padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;color:var(--text);text-decoration:none;font:400 30px/1 var(--world);white-space:nowrap}
.brand:hover{color:var(--text)}
.brand img{width:44px;height:50px;object-fit:contain}
.site nav{display:flex;flex-wrap:wrap;gap:4px clamp(14px,2vw,30px);font-size:19px}
.site nav a{color:var(--text);text-decoration:none}
.site nav a:hover{text-decoration:underline;text-decoration-thickness:1px}
/* The section this page is in (aria-current="true") or the section's own page ("page") */
.site nav a[aria-current]{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:rgba(217,179,106,.6)}
/* The breadcrumb: For players › Families › Ashgrove */
.crumbs ol{list-style:none;margin-block:0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:var(--t-small);line-height:1.4;color:var(--dim)}
.crumbs li{min-width:0;max-width:100%}
.crumbs li + li::before{content:"\203A";content:"\203A" / "";padding:0 .55em;color:#7A6F5C}
.crumbs a{color:var(--dim);text-decoration-color:rgba(181,168,140,.45)}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--text)}
.crumbs li:last-child{flex:1 1 0;min-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* the page's own name is its h1 */
.crumbs + main .page-head,.crumbs + main .read-head{padding-top:clamp(20px,4vw,56px)}
@media (max-width:860px){
  .crumbs ol{align-items:center}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs + main .page-head,.crumbs + main .read-head{padding-top:12px}
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{overflow:hidden;padding-block:clamp(28px,5vw,80px) clamp(40px,6vw,96px)}
.mark{position:relative;isolation:isolate;margin-top:36px}
.mark::before{content:"";position:absolute;z-index:-1;inset:-14% -22%;background:url(../img/mine-ground-960.webp) 42% 60%/cover no-repeat;opacity:.46;filter:saturate(.7);
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,transparent 100%);mask-image:radial-gradient(closest-side,#000 38%,transparent 100%)}
@media (max-width:860px){ .mark::before{background-image:url(../img/mine-ground-720.webp)} }   /* tools/art_sizes.py; home.html preloads the 960 */
.hero h1{margin-bottom:.42em}
.lore{font:400 var(--t-lead)/1.5 var(--world);max-width:29em}
.doors{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin:1.5em 0 0;max-width:none}
.hero-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 30px}   /* the hero's two quiet links, kept together beside or under Play now */
.sigil{width:min(62vw,250px);margin:0 auto}

/* ── Sections, plates ───────────────────────────────────────────────── */
main > section{margin-top:var(--section)}
.plate img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#000}
.head{margin:clamp(22px,3vw,44px) 0 clamp(20px,2.6vw,40px);align-items:end;row-gap:10px}
.pitch{font-size:var(--t-lead);line-height:1.45;margin:0;max-width:26em}
.stack > * + *{margin-top:40px}

/* ── The gate ───────────────────────────────────────────────────────── */
.talk p{font:400 clamp(20px,1.55vw,22px)/1.55 var(--world);max-width:29em}
.talk .scene{font-style:italic;color:var(--dim)}
.choices{list-style:none;counter-reset:c;margin:22px 0 0;padding:0;max-width:calc(29em * 1.1)}
.choices li{counter-increment:c}
.choices summary{position:relative;list-style:none;cursor:pointer;padding:7px 0 7px 2em;font:400 clamp(20px,1.55vw,22px)/1.4 var(--world);color:var(--gold)}
.choices summary::-webkit-details-marker{display:none}
.choices summary::before{content:counter(c) ".";position:absolute;left:0;color:var(--dim)}
.choices summary:hover{color:#F3E3BC}
.choices details[open] summary{color:var(--text)}
.choices details p{margin:2px 0 14px 2em}
.talk .first-time{font:400 var(--t-body)/1.6 var(--plain);margin-top:30px;max-width:31em}
.ledger h3{margin-bottom:.5em}
.ledger .world{font-size:clamp(20px,1.55vw,22px);line-height:1.55}
.lookup{margin:20px 0 16px;max-width:420px}
.lookup label{display:block;font-size:var(--t-small);color:var(--dim);margin-bottom:6px}
.lookup div{display:flex;gap:10px}
.lookup input{flex:1;min-width:0;background:var(--pitch);border:1px solid #5A4F6B;color:var(--text);font:400 20px/1.2 var(--plain);padding:10px 14px;caret-color:var(--gold)}
.lookup input::placeholder{color:#8F8470}
.ledger .small{max-width:26em}
.ledger .welcome{font:400 var(--t-lead)/1.4 var(--world);margin-top:1.4em}

/* ── Tales ──────────────────────────────────────────────────────────── */
.tale h3{margin-bottom:.6em}
.tale p{font:400 var(--t-tale)/1.6 var(--world);margin:0;max-width:30em}
.tale p + p{text-indent:1.6em}
.tale .sc{font-family:var(--sc);letter-spacing:.03em}
.tale .first::first-letter{float:left;font:400 3.75em/.8 var(--canon);color:var(--gold);padding:.07em .1em 0 0}
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .tale .first::first-letter{float:none;font-size:1em;line-height:inherit;padding:0;margin-right:.1em;-webkit-initial-letter:3;initial-letter:3}
}
.tale cite{display:block;margin-top:1.2em;font:400 var(--t-small)/1.5 var(--plain);color:var(--dim)}
.tale cite em{font-style:italic}

/* ── Exhibits: the game's own output ────────────────────────────────── */
.term{margin:0;background:var(--pitch);border:1px solid var(--rule);padding:18px 20px;font:12.5px/1.55 var(--mono);color:#B8B8B8;white-space:pre-wrap;overflow-wrap:anywhere}
.term .bw{color:#F4F4F4;font-weight:700}.term .gr{color:#B8B8B8}.term .br{color:#E0534A}
.term .cmd{color:#F4F4F4}.term .hp{color:#E5C07B;font-weight:700}.term .mn{color:#56B6C2;font-weight:700}.term .mv{color:#98C379;font-weight:700}
.term .yell{color:#56B6C2;font-weight:700}.term .open{color:#3FA5AF}.term .gn{color:#5FD75F}.term .ye{color:#E5D04B}.term .bl{color:#5C7CFA}
.cap{font-size:var(--t-small);line-height:1.5;color:var(--dim);margin:10px 0 0;max-width:none}
.more{margin:22px 0 0}
.said{margin:30px 0 0}
.said p{font:italic 400 21px/1.45 var(--plain);margin:0 0 6px;max-width:22em}
.said cite{font-style:normal;font-size:var(--t-small);color:var(--dim)}

/* ── Mines: the one place the page raises its voice ─────────────────── */
.shaft img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:35% 100%}
.shaft .wrap{margin-top:22px}
.shaft .pitch{margin-top:12px}
.descent{margin-top:clamp(28px,4vw,56px)}
.pair > * + *{margin-top:26px}
.scry img{width:min(100%,360px);border:1px solid var(--rule)}
.scry figcaption{margin-top:10px;max-width:22.5em}

/* ── Companions ─────────────────────────────────────────────────────── */
.roll{list-style:none;margin:10px 0 0;padding:0}
.roll li{padding:9px 0}
.roll b{font:400 25px/1.2 var(--world)}
.roll span{display:block;color:var(--dim);font-size:18px;line-height:1.4}

/* ── What the players made ──────────────────────────────────────────── */
.map img{width:100%;border:1px solid var(--rule)}
.map figcaption{margin-top:10px}
.made h3{margin-bottom:.5em}
.made .world{font-size:clamp(20px,1.55vw,22px);line-height:1.55}
.count{border-collapse:collapse;width:100%;max-width:30em;margin:22px 0 0;font-variant-numeric:lining-nums tabular-nums}
.count td{padding:9px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.count td:last-child{text-align:right;padding-left:20px}

/* ── Lately ─────────────────────────────────────────────────────────── */
.posts{list-style:none;margin:0;padding:0}
.posts li + li{margin-top:28px}
.posts time{display:block;font-size:var(--t-small);color:var(--dim)}
.posts strong{display:block;font:600 23px/1.25 var(--plain);margin:2px 0 4px;text-wrap:balance}
.posts p{margin:0;color:var(--dim);font-size:19px;max-width:32em}
.records h3{margin-bottom:.5em}
.rec{margin:18px 0 0}
.rec div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:10px 0;border-bottom:1px solid var(--rule)}
.rec dt{grid-column:1/-1;font-size:var(--t-small);color:var(--dim)}
.rec dd{margin:0}
.rec dd + dd{font-variant-numeric:lining-nums tabular-nums}

/* ── Reading page (tales.html): one column, plates a little wider than the text ── */
.reading .wrap{max-width:calc(920px + 2*var(--pad))}
.col{max-width:40rem;margin-inline:auto}
.read-head{padding-top:clamp(32px,6vw,88px)}
.read-head h1{font-size:clamp(34px,5.6vw,68px);margin-bottom:.5em}
.read-head .lore{margin-bottom:.9em}
.contents{list-style:none;margin:28px 0 0;padding:0}
.contents li{padding:5px 0}
.contents a{font:italic 400 clamp(20px,1.7vw,23px)/1.3 var(--world)}
.contents span{color:var(--dim);font-size:var(--t-small);white-space:nowrap}
.reading article{margin-top:var(--section)}
.reading article.page-head{margin-top:0}   /* a news post: its heading sits where every page's does */
.reading .plate img{aspect-ratio:3/2}
.reading .tale h2{font:italic 400 clamp(28px,3.4vw,42px)/1.14 var(--world);margin:clamp(22px,3vw,40px) 0 .6em}
.reading .tale p{max-width:none}
.reading .tale .term{margin-top:34px}
.reading .tale .more{font:400 var(--t-body)/1.6 var(--plain);text-indent:0;margin-top:14px}
.reading .tale p.cap{font:400 var(--t-small)/1.5 var(--plain);text-indent:0;margin-top:10px}
.read-end{margin-top:var(--section)}

/* ── Close, footer ──────────────────────────────────────────────────── */
.close{margin-top:var(--section);background:#170C11;padding-block:clamp(64px,8vw,120px)}
.close .wrap{display:flex;flex-wrap:wrap;gap:32px clamp(40px,6vw,88px);align-items:center}
.beast{margin:0;font:700 clamp(20px,3vw,34px)/1.12 var(--mono);color:#F4F4F4;white-space:pre}
.beast span{color:#E0534A}
.close h2{margin-bottom:.35em}
.close p{font-size:var(--t-lead);line-height:1.45;max-width:24em}
footer{padding-block:64px 40px;font-size:18px;color:var(--dim)}
.foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px var(--gutter)}
.foot h2{font:italic 400 21px/1.2 var(--world);color:var(--text);margin-bottom:8px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:3px 0}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--text);text-decoration:underline;text-decoration-thickness:1px}
.colophon{margin-top:56px}
.colophon p{max-width:44em;margin-bottom:.5em}
.colophon .epi{font:italic 400 19px/1.5 var(--world);margin-bottom:1.2em}
.sources{font:13px/1.5 var(--mono);color:var(--dim);padding-block:0 48px}
.sources summary{cursor:pointer;padding:6px 0}
.sources table{border-collapse:collapse;margin-top:10px}
.sources td{padding:5px 18px 5px 0;vertical-align:top;border-top:1px solid var(--rule)}

/* ── Wide screens: the twelve columns come into play ────────────────── */
@media (min-width:861px){
  h1{font-size:clamp(52px,5.8vw,84px)}
  .hero .text{grid-column:1/span 8}
  .hero .mark{grid-column:9/span 4;align-self:center;margin-top:0}
  .mark::before{inset:-12% -34%}
  .sigil{width:100%;max-width:340px}
  .plate img{aspect-ratio:2/1}
  .plate.p-top img{object-position:50% 12%}
  .gate .plate img{object-position:50% 28%}
  .head h2{grid-column:1/span 7}
  .head .pitch{grid-column:8/span 5;padding-bottom:.3em}
  .companions .head h2{grid-column:1/span 5}
  .companions .head .pitch{grid-column:6/span 7}
  .stack > * + *{margin-top:0}
  .talk{grid-column:1/span 7}
  .ledger{grid-column:9/span 4}
  .combat .tale{grid-column:1/span 7}
  .combat .exhibit{grid-column:8/span 5}
  .companions .tale{grid-column:6/span 7;grid-row:1}
  .companions .exhibit{grid-column:1/span 4;grid-row:1}
  .term{font-size:13.5px}
  /* mines */
  .shaft{display:grid}
  .shaft > *{grid-area:1/1}
  .shaft img{aspect-ratio:auto;height:min(80vh,52vw);min-height:460px;object-position:50% 88%}
  .shaft::after{content:"";grid-area:1/1;pointer-events:none;background:linear-gradient(180deg,rgba(14,12,19,.86) 0%,rgba(14,12,19,.35) 38%,rgba(14,12,19,0) 62%,rgba(14,12,19,0) 86%,var(--ink) 100%)}
  .shaft .wrap{position:relative;z-index:1;width:100%;margin-top:0;padding-top:clamp(36px,5vw,76px);align-self:start}
  .shaft h2{font-size:clamp(60px,6.6vw,96px);line-height:1}
  .shaft h2,.shaft .pitch,.descent > *{grid-column:2/span 10}
  .descent{row-gap:44px}
  .made .homes{grid-column:1/span 6}
  .made .books{grid-column:8/span 5}
  .news{grid-column:1/span 7}
  .records{grid-column:9/span 4}
  .foot{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1100px){
  .pair{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:var(--gutter);align-items:start}
  .pair > * + *{margin-top:0}
}
@media (max-width:860px){
  body{font-size:19px}
  .brand{font-size:27px}
  .brand img{width:38px;height:43px}
  .site nav{order:3;width:100%;font-size:16px;gap:0 8px;justify-content:space-between}
  .site nav a{padding:8px 0}
  .descent > * + *{margin-top:36px}
  .contents span{display:block}
}
@media (max-width:380px){
  .site nav{font-size:15px;gap:0 4px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.btn-quiet{transition:background-color .15s ease-out,color .15s ease-out}
}

/* ── Added for the production site (not in the v5 prototype) ───────────── */
/* Things only scripts can use stay hidden without them (html.js is set by js/early.js). */
.js-only{display:none}
.js .js-only{display:revert}
.js .lookup.js-only{display:block}
.nojs-only{display:revert}
.js .nojs-only{display:none}
.lookup output{display:block;min-height:1.6em;margin-top:10px;font-size:var(--t-small);color:var(--text)}
.lookup output:empty{min-height:0;margin:0}
.records .after{margin-top:14px}
.records .after + .more{margin-top:8px}
.said blockquote,.said{margin-inline:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tap targets on phones: 44px tall */
@media (max-width:860px){
  .site nav a,.brand{display:inline-flex;align-items:center;min-height:44px}
  .doors a,.playbar a{display:inline-flex;align-items:center;min-height:44px}
  .btn-s{min-height:44px}
  .foot a{display:inline-block;padding-block:9px}
  .choices summary{padding-block:10px}
}

/* Signs of life */
.life h3{margin-bottom:.5em}
.life .rec{max-width:32em}
.life .rec dd a{text-decoration-color:rgba(217,179,106,.5)}
.life .asof{margin-top:12px}
@media (min-width:861px){
  .life{grid-column:1/span 7}
}

/* The phone "Play now" bar: shown once the hero has scrolled away (js/site.js) */
.playbar{display:none}
@media (max-width:860px){
  .js .playbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8;justify-content:center;align-items:center;gap:16px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(8,7,11,.94);border-top:1px solid var(--rule);
    transform:translateY(110%);visibility:hidden}
  .js .playbar.on{transform:none;visibility:visible}
  .js .playbar .btn{min-height:44px;display:inline-flex;align-items:center}
  .js body{padding-bottom:72px}
  #diglog{bottom:86px}
  .rock-on #depth.on{bottom:86px}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .js .playbar{transition:transform .2s ease-out,visibility 0s linear .2s}
  .js .playbar.on{transition:transform .2s ease-out}
}

/* Plain pages: news, scores, the library, 404 */
.page-head{padding-top:clamp(32px,6vw,88px)}
.page-head h1{font-size:clamp(34px,5.6vw,68px);margin-bottom:.4em}
.page-head .lore{margin-bottom:.9em}
.block{margin-top:clamp(48px,7vw,96px)}
.block > h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:.5em}
.block > h3{margin-bottom:.4em}
.plain-list{list-style:none;margin:0;padding:0}
.plain-list li{padding:6px 0}
.plain-list .small{display:block}
/* The call to the Discord (templates/partials/discord_call.html), on /new/, /back/ and /community/ */
.dc{border:1px solid var(--rule);border-top:2px solid var(--gold);background:var(--pitch);padding:22px clamp(18px,2.4vw,30px) 24px}
.dc p{max-width:34em}
.dc .small{margin-top:.6em}
.dc-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:18px 0 0}
.dc-act .dc-count{margin:0}

/* News */
.posts a{color:var(--text);text-decoration:none}
.posts strong,.posts p{overflow-wrap:anywhere}
.posts a:hover strong{text-decoration:underline;text-decoration-thickness:1px}
.year{margin-top:clamp(40px,5vw,72px)}
.year h2{font-size:clamp(28px,3vw,40px);margin-bottom:.6em}
.changelog{border-collapse:collapse;width:100%;max-width:40em}
.changelog td{padding:9px 16px 9px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.changelog td:first-child{white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.changelog td:last-child{color:var(--dim);font-size:var(--t-small);white-space:nowrap;padding-right:0}
.post-head time{display:block;font-size:var(--t-small);color:var(--dim);margin-bottom:6px}
.post-head h1{font:400 clamp(32px,4.6vw,56px)/1.08 var(--canon);margin-bottom:.5em}
.prose{max-width:40rem}
.prose p,.prose li{max-width:none}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 .9em}
.prose li{margin:.2em 0}
.prose h2,.prose h3,.prose h4{font:italic 400 clamp(22px,2vw,27px)/1.25 var(--world);margin:1.3em 0 .4em}
.prose pre{background:var(--pitch);border:1px solid var(--rule);padding:14px 16px;overflow-x:auto;font:13px/1.55 var(--mono)}
.prose blockquote{margin:0 0 .9em;padding-left:1em;border-left:1px solid var(--rule);color:var(--dim)}
.prose a{overflow-wrap:anywhere}
.kind{font-size:var(--t-small);color:var(--dim)}

/* Highscores */
.boards{display:grid;grid-template-columns:minmax(0,1fr);gap:48px var(--gutter)}
@media (min-width:861px){ .boards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .boards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.board h2,.board h3{font:italic 400 clamp(24px,2.2vw,30px)/1.2 var(--world);margin-bottom:.3em}
.board h2 a,.board h3 a{color:var(--text);text-decoration:none}
.board h2 a:hover,.board h3 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.scores{border-collapse:collapse;width:100%;font-variant-numeric:lining-nums tabular-nums}
.scores th{font:400 var(--t-small)/1.4 var(--plain);color:var(--dim);text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--rule)}
.scores td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.scores td.n,.scores th.n{text-align:right;padding-right:0;white-space:nowrap}
.scores td.r{color:var(--dim);width:2.2em}
.scores .who{display:block}
.scores .what{display:block;font-size:var(--t-small);line-height:1.4;color:var(--dim)}
.scores .flag{font-size:var(--t-small);color:var(--dim);white-space:nowrap}
.scores .said-score{display:block;font-style:italic;font-family:var(--world);overflow-wrap:anywhere}
/* a board's own score column: a cell like the others (its rule level with the row's), and a word such as e1000 kept whole */
.scores td.said-score{display:table-cell;overflow-wrap:break-word}
.table-scroll{overflow-x:auto;max-width:100%}

/* The game's colour codes (&X), for rank names and badges. Contrast 4.5:1 or better on ink. */
.cc-x{color:#7C7C7C}.cc-r{color:#D9534A}.cc-g{color:#4CB84C}.cc-O{color:#C8932E}.cc-b{color:#6F86F0}
.cc-p{color:#B56AC8}.cc-c{color:#3FB0B8}.cc-w{color:#C4C4C4}.cc-z{color:#8E8E8E}.cc-R{color:#FF6B5E}
.cc-G{color:#6FE36F}.cc-Y{color:#F0DC5A}.cc-B{color:#8EA4FF}.cc-P{color:#F08CF0}.cc-C{color:#7FE6EE}
.cc-W{color:#F4F4F4}
/* Backgrounds (&1-&7), dark enough that every foreground above still reads on them */
.ccb-1{background:#3A1412}.ccb-2{background:#12301A}.ccb-3{background:#33280E}.ccb-4{background:#151E45}
.ccb-5{background:#2E1436}.ccb-6{background:#0F2E31}.ccb-7{background:#3A3A3A}

/* 404 */
.lost .term{max-width:36em}
@media (max-width:480px){
  .changelog td:last-child{white-space:normal}
}