/* The front page: one screen of a printed almanac. A title, one paragraph, the way in, and a plate drawn by the game itself. Light is old parchment with brown-black ink; dark is the same book at night. Every color is a token on :root. */
:root{
  color-scheme:light;
  --paper:#e8dcc0;--plate:#f0e6cf;--ink:#241a10;--ink-2:#5b4a35;--rubric:#962a1b;--term:#0d1117;
  --cmd-line:transparent;
  /* the aging: a darker edge and a faint grain, light only */
  --vignette:radial-gradient(ellipse farthest-corner at 50% 50%,transparent 56%,rgba(110,80,40,.18) 100%);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .22 0 0 0 0 .1 1.6 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity:.07;
  --display:"IM Fell Double Pica","IM Fell English",Georgia,"Times New Roman",serif;
  --caps:"IM Fell English SC","IM Fell Double Pica",Georgia,serif;
  --note:"IM Fell English",Georgia,serif;
  --body:"EB Garamond",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#121822;--plate:#1a2230;--ink:#d9dee6;--ink-2:#9aa6b8;--rubric:#e0574c;--term:#0a0e14;
    --cmd-line:var(--ink-2);
    --vignette:none;--grain:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#121822;--plate:#1a2230;--ink:#d9dee6;--ink-2:#9aa6b8;--rubric:#e0574c;--term:#0a0e14;
  --cmd-line:var(--ink-2);
  --vignette:none;--grain:none;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
body{margin:0;min-height:100vh;position:relative;isolation:isolate;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;font-variant-numeric:oldstyle-nums}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:var(--vignette)}
body::after{background-image:var(--grain);opacity:var(--grain-opacity);mix-blend-mode:multiply}
h1,h2,p,figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--rubric);outline-offset:3px}

.skip{position:absolute;left:-999px;top:0;z-index:5;background:var(--ink);color:var(--paper);padding:9px 15px;font:400 15px/1 var(--caps);letter-spacing:.14em;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* ---- the site buttons ---- */
.dnav{max-width:1180px;margin:0 auto;padding:18px clamp(16px,4vw,44px) 0}
.dnav-in{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding-bottom:14px;border-bottom:3px double var(--ink)}
.dbtn,.toggle,.inst-os button,.inst-copy{font:400 15px/1 var(--caps);letter-spacing:.14em;color:var(--ink);text-decoration:none;padding:9px 15px 8px;border:1px solid var(--ink);border-radius:0;background:transparent;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--ink);transition:background-color .15s,color .15s,box-shadow .15s;cursor:pointer}
.toggle,.inst-os button{font-size:14px;padding:7px 12px 6px}
.dbtn:hover,.toggle:hover,.inst-os button:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3px var(--paper)}
.dbtn-get,.inst-copy{background:var(--rubric);border-color:var(--rubric);color:var(--paper);box-shadow:inset 0 0 0 2px var(--rubric),inset 0 0 0 3px var(--paper)}
.dbtn-get:hover,.inst-copy:hover{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3px var(--paper)}
.toggle.on,.inst-os button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3px var(--paper)}
@media (max-width:600px){.dnav-in{flex-wrap:nowrap;justify-content:space-between;gap:6px}.dbtn{white-space:nowrap;font-size:clamp(12px,3.5vw,14px);letter-spacing:.06em;padding:8px clamp(6px,2.4vw,11px) 7px}}
@media (max-width:360px){.dnav-in{gap:4px}.dbtn{letter-spacing:.03em;padding-inline:5px}}

/* ---- the page ---- */
.wrap{max-width:1180px;margin:0 auto;padding:clamp(34px,6vw,72px) clamp(16px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(26px,4vw,56px);align-items:center;min-height:min(100vh,860px)}
.wrap>*{min-width:0}
@media (max-width:860px){.wrap{grid-template-columns:minmax(0,1fr);min-height:0}}
h1{font:400 clamp(60px,9.5vw,128px)/.86 var(--display);color:var(--rubric);letter-spacing:.01em}
.sub{font:400 clamp(17px,1.9vw,22px)/1.2 var(--caps);letter-spacing:.16em;margin-top:clamp(20px,2.6vw,34px)}
.dbl{height:7px;border-block:2px solid var(--ink);margin:16px 0 18px}
.body{font-size:clamp(18px,1.6vw,20.5px);line-height:1.5;max-width:31em}
.first::first-letter{font-family:var(--display);font-size:3.6em;line-height:.76;float:left;padding:.06em .08em 0 0;color:var(--rubric)}

/* ---- the way to the wiki ---- */
.compendium{display:block;margin-top:clamp(20px,2.6vw,28px);text-align:center;text-decoration:none;font:400 clamp(20px,2.4vw,26px)/1.1 var(--caps);letter-spacing:.16em;color:var(--paper);background:var(--ink);padding:18px 14px 17px;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px var(--paper);transition:background-color .15s,border-color .15s,box-shadow .15s}
.compendium:hover{background:var(--rubric);border-color:var(--rubric);box-shadow:inset 0 0 0 3px var(--rubric),inset 0 0 0 4px var(--paper)}
.compendium:focus-visible{outline:2px solid var(--rubric);outline-offset:4px}

/* ---- the way in ---- */
.get{margin-top:24px;display:grid;gap:8px;max-width:31em}
.caps{font:400 15px/1.3 var(--caps);letter-spacing:.18em;color:var(--rubric)}
.inst{display:grid;gap:8px;min-width:0}
.inst-os{display:flex;flex-wrap:wrap;gap:6px}
.inst-row{display:flex;gap:10px;align-items:stretch;min-width:0}
.inst-cmd{flex:1;min-width:0;display:block;font:12.5px/1.5 var(--mono);font-variant-numeric:normal;white-space:pre-wrap;overflow-wrap:anywhere;padding:9px 11px;border-radius:2px;background:var(--term);color:#e6edf3;border:1px solid var(--cmd-line)}
.inst-copy{white-space:nowrap}
.inst-note{font:italic 16px/1.35 var(--note);color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- the plate ---- */
.plate{display:grid;gap:10px;min-width:0}
.frame{border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;background:var(--term);margin:5px;padding:clamp(6px,1vw,12px);transition:background-color .3s}
.plate.ink .frame{background:var(--plate)}
.plate figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between;padding-inline:5px}
.plate figcaption p{font:italic 18px/1.3 var(--note)}
.plate figcaption b{font:400 15px var(--caps);letter-spacing:.14em;color:var(--rubric);margin-right:.35em}

/* the map: 94 cells across, sized to the frame in pure CSS; script.js only paints rows */
.pic{container-type:inline-size;overflow:hidden;min-width:0}
.map{margin:0;font-family:var(--mono);font-size:7px;font-size:calc(100cqw / 56.8);line-height:1.18;white-space:pre;font-variant-ligatures:none;font-variant-numeric:normal;font-weight:400;width:max-content;color:var(--ink)}
.map code{font:inherit;background:none;border:0;padding:0}
.map .row{display:block;height:1.18em}
.map i{font-style:normal;display:inline-block;width:1ch;height:1.18em;overflow:hidden;text-align:center;vertical-align:top}
.map .bold{font-weight:700}
/* one ink as engraved; the game's own colors once the plate is turned to color */
.map span span{color:var(--ink);opacity:var(--o,1);background:transparent}
.plate:not(.ink) .map span span{color:var(--c,var(--ink));background:var(--g,transparent);opacity:1}

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