:root{
  --basalt:#140e08; --basalt-2:#2a1d10; --papyrus:#e8d49e; --ink:#2b1a0b; --brown:#6b4a22;
  --page:#e6d2a0; --card:#f3e6c4; --card-edge:#b99b6a; --band:repeating-linear-gradient(90deg,#1f3a7a 0 16px,#e8d49e 16px 18px,#8e2415 18px 34px,#e8d49e 34px 36px,#2e7d5b 36px 52px,#e8d49e 52px 54px,#c8962e 54px 70px,#e8d49e 70px 72px);
  --carnelian:#8e2415; --lapis:#1f3a7a; --malachite:#2e7d5b; --gold:#c8962e; --gold-hi:#f6d676;
  --display:'IM Fell Double Pica','Palatino Linotype',Palatino,Georgia,serif;
  --body:'IM Fell English','Palatino Linotype',Palatino,Georgia,serif;
}
*{ box-sizing:border-box; }
body{ margin:0; overflow-x:clip; color:var(--ink); font:18px/1.55 var(--body);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .12 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), repeating-linear-gradient(0deg,#8a622a0d 0 1px,transparent 1px 5px), var(--page); }
a{ color:var(--lapis); }
a:focus-visible, button:focus-visible{ outline:3px solid var(--gold-hi); outline-offset:2px; }
h1,h2,h3{ font-family:var(--display); font-weight:700; color:var(--carnelian); line-height:1.15; }
h2{ font-size:28px; margin:0 0 12px; } h3{ font-size:21px; margin:22px 0 6px; }
code{ font-size:.9em; }
.small{ font-size:15px; color:var(--brown); } .center{ text-align:center; }

/* the page is papyrus, as the game's is; scenery only behind the front page's opening */
.scenery{ display:none; }

/* stone, papyrus, wooden rods, sandstone buttons */
.stone{ background:linear-gradient(180deg,#d9c093,#b99b6a); border:3px solid; border-color:#efdcb4 #7d6038 #7d6038 #efdcb4;
  border-radius:4px; }
.papyrus{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .12 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), repeating-linear-gradient(0deg,#8a622a14 0 1px,transparent 1px 5px), var(--papyrus);
  box-shadow:inset 0 0 26px #8a5f2a88, inset 0 0 3px #6b4a1f; }
.scroll{ padding:0; }
/* a card: papyrus with the board's painted band along its top, as the game's cards */
.card, .scroll > .sheet{ position:relative; background:var(--card); border:1px solid var(--card-edge); border-radius:4px;
  box-shadow:0 2px 0 #6b4a2233; }
.card::before, .scroll > .sheet::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:7px;
  background:var(--band); border-radius:4px 4px 0 0; }
.scroll > .sheet{ box-shadow:0 2px 0 #6b4a2233; padding-top:24px; }
.rod{ display:none; height:16px; border-radius:8px; margin:0 -6px; position:relative; z-index:1;
  background:linear-gradient(180deg,#8a5a2b,#5a3614 55%,#2c1806); box-shadow:0 3px 6px #0009; }
.rod::before,.rod::after{ content:""; position:absolute; top:-3px; width:14px; height:22px; border-radius:5px;
  background:linear-gradient(180deg,#f6d676,#b07a17 60%,#6e4608); }
.rod::before{ left:-4px; } .rod::after{ right:-4px; }
.sheet{ padding:18px 22px; margin:-4px 0; }
.btn{ display:inline-block; font:700 17px var(--display); color:var(--carnelian); text-decoration:none; padding:7px 16px; cursor:pointer;
  background:linear-gradient(180deg,#ecd9b2,#c7a877); border:3px solid; border-color:#f7ecd4 #7a5a30 #7a5a30 #f7ecd4;
  border-radius:2px; text-shadow:0 1px 0 #f7ecd4; box-shadow:0 2px 0 #0004; }
.btn:hover{ color:#b1301c; background:linear-gradient(180deg,#f3e3c0,#d2b483); }
.btn:active{ border-color:#7a5a30 #f7ecd4 #f7ecd4 #7a5a30; transform:translateY(2px); box-shadow:none; }
.btn.big{ font-size:21px; padding:10px 22px; }
.coin{ display:inline-block; width:14px; height:14px; margin:0 4px 0 2px; vertical-align:-2px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff3ae,#e0ac3a 60%,#8a5a10); box-shadow:0 0 0 1px #4a2c10; }
.coin.lapis{ border-radius:2px; transform:rotate(45deg) scale(.85); background:radial-gradient(circle at 34% 30%,#9fb8ff,#2a49b8 60%,#0d1a56); }
img.art{ display:inline-block; vertical-align:middle; }
/* a floor square, and an amulet wearing a special or a badge (layers as in the game) */
.sq, .tile{ position:relative; display:inline-block; vertical-align:middle; flex:none; }
.sq img, .under, .under img{ display:block; width:100%; height:100%; }
.tile img{ position:absolute; }
.tile .amulet{ left:-6.44%; top:-6.44%; width:112.88%; height:112.88%; }   /* 86% of the square, and room round it */
.tile .mark{ left:-25%; top:-25%; width:150%; height:150%; }
.tile .badge{ left:36%; top:36%; width:80%; height:80%; }

/* header and footer */
.top{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
  max-width:1180px; margin:10px auto 0; padding:6px 12px; }
.name{ display:flex; align-items:center; gap:8px; text-decoration:none; font:700 clamp(21px,3vw,28px) var(--display);
  color:#4a2c10; text-shadow:0 1px 0 #f5e6c2, 0 -1px 0 #6d4a22; }
.top nav{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; font-family:var(--display); font-size:18px; }
.top nav a:not(.btn){ color:#3a220b; text-decoration:none; } .top nav a:not(.btn):hover{ color:var(--carnelian); }
/* the footer: carved stone like the top bar, the name and three short columns of links */
.foot{ max-width:1180px; margin:34px auto 20px; padding:20px 24px 14px; display:grid; grid-template-columns:minmax(220px,1.2fr) 2fr; gap:14px 34px; align-items:start; }
.foot-brand .name{ font-size:24px; }
.foot-brand p{ margin:8px 0 0; font-size:15.5px; color:var(--brown); }
.foot-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 22px; }
.foot .foot-cols h2{ margin:4px 0 6px; font:italic 400 15px/1.2 var(--display); color:var(--brown); }
.foot-cols a{ display:block; padding:3px 0; font:17px/1.3 var(--display); color:var(--ink); text-decoration:none; white-space:nowrap; }
.foot-cols a:hover{ color:var(--carnelian); text-decoration:underline; }
.foot-small{ grid-column:1 / -1; margin:6px 0 0; padding-top:10px; border-top:1px solid #7d603855; font-size:13.5px; color:var(--brown); text-align:center; }
@media (max-width:760px){
  .foot{ grid-template-columns:1fr; margin:24px 10px 14px; padding:16px 16px 12px; }
  .foot-brand{ text-align:center; } .foot-brand .name{ justify-content:center; }
  .foot-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot-cols > div:last-child{ grid-column:1 / -1; }
  .foot-cols > div:last-child a{ display:inline-block; margin-right:16px; }
}
main{ max-width:1180px; margin:0 auto; padding:0 10px; }

/* front page: the opening, a tomb (or the stop chosen) behind the words and the board */
/* edge to edge and up to the top of the page, under the header, like Sema-tawy's (--head is the header's foot, measured by the page's script) */
.hero{ position:relative; margin:calc(-1 * var(--head, 68px)) calc(50% - 50vw) 0; padding:calc(var(--head, 68px) + 34px) 16px 44px;
  background:center/cover no-repeat var(--basalt); }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0000 55%,#0007); pointer-events:none; }
.hero .inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:30px; align-items:center; }
.pitch.card{ padding:24px 24px 18px; box-shadow:0 8px 24px #0007; }
.pitch h1{ font-size:44px; margin:4px 0 2px; } .pitch.card .tag{ font:italic 20px var(--display); color:var(--brown); margin:0 0 12px; } .pitch.card .small{ font-size:15px; }
.pitch.card p{ margin:0 0 12px; font-size:17px; line-height:1.45; } .pitch.card .journal{ font-size:16.5px; color:#4a3217; }
.pitch.card p:last-child{ margin-bottom:0; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 16px; }
.wrap section{ padding:6px 0 14px; }
.front section > h2{ text-align:center; font-size:32px; margin:14px 0 4px; }
.front .lede{ max-width:760px; margin:0 auto 14px; }
hr.band{ border:0; height:11px; margin:22px 0 8px; border-block:2px solid #120a03; background:var(--band); }
.stops-part{ padding-top:22px !important; }
.note{ margin:14px auto 0; padding:20px 24px 16px; }
.place{ margin:0; font-size:30px; } .place-sub{ margin:2px 0 10px; font-style:italic; color:var(--brown); }
.fact{ margin:0; hyphens:auto; text-align:justify; }
.fact::first-letter{ float:left; font:3.9em/.72 var(--display); color:var(--carnelian); margin:.03em .07em 0 -.02em; padding:0; }
.here{ margin-top:12px; padding-top:8px; border-top:1px solid #8a622a55; display:flex; gap:4px; flex-wrap:wrap; }
/* cards in rows that are always full: four, then two, then one */
.cards{ display:grid; gap:14px; margin:14px 0 10px; }
.cards.four{ grid-template-columns:repeat(4,minmax(0,1fr)); } .cards.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards.five, .cards.systems{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.cards.systems.n4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .cards.systems.n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{ padding:18px 14px 12px; } .card h3{ margin:2px 0 4px; font-size:19px; } .card p{ margin:0; font-size:16px; line-height:1.4; }
.card.row{ display:flex; gap:12px; align-items:flex-start; } .card.row .p{ flex:none; width:54px; display:grid; place-items:center; }
.card .when{ font:italic 14.5px var(--display); color:var(--carnelian); margin-top:6px; }
.card.system{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
.card.system p{ font-size:15px; color:var(--brown); }
.files{ display:flex; gap:6px; margin-top:auto; padding-top:10px; width:100%; }
.files .dl{ flex:1 1 0; min-width:0; padding:6px 6px; font-size:15px; text-align:center; }
.card.scene .art svg{ display:block; width:100%; height:auto; border-radius:3px; }
.card.scene h3{ margin-top:10px; } .card.scene .pics{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.card.scene .cover{ display:flex; gap:12px; align-items:center; font-size:15.5px; margin-top:6px; }
h3.sub{ text-align:center; margin:18px 0 10px; font-size:20px; }
.looks{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:14px 8px; }
.looks.floors{ grid-template-columns:repeat(11,minmax(0,1fr)); gap:14px 6px; margin-bottom:6px; }
.looks.floors figure{ font-size:13.5px; }
@media (max-width:1100px){ .looks.floors{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px; } }
.looks figure{ margin:0; text-align:center; font-size:14.5px; line-height:1.25; }
.looks figcaption{ margin-top:5px; }
.look{ position:relative; display:inline-block; }
.look img, .look .tint{ position:absolute; left:-15.63%; top:-15.63%; width:131.25%; height:131.25%; display:block; }
.look .tint{ -webkit-mask-size:100% 100%; mask-size:100% 100%; }
.pair{ display:inline-flex; gap:3px; } .pair .sq img{ border-radius:2px; }
@media (max-width:980px){ .cards.five, .cards.systems{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:860px){
  .hero .inner{ grid-template-columns:1fr; }
  .playfield{ order:-1; }
  .cards.four{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cards.two, .cards.five, .cards.systems, .cards.systems.n4, .cards.systems.n3{ grid-template-columns:1fr; }
  .looks{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:520px){ .cards.four{ grid-template-columns:1fr; } .pitch h1{ font-size:36px; } }
.playfield{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.boards{ display:block; text-decoration:none; width:min(100%, 480px); }
.grid{ position:relative; display:grid; grid-template-columns:repeat(var(--cols), 1fr);
  filter:saturate(.6) brightness(.65); transition:filter .2s; }
.boards:hover .grid, .boards:focus-visible .grid{ filter:none; }
.cell{ position:relative; aspect-ratio:1; }
.cell > span, .cell > img{ position:absolute; inset:0; width:100%; height:100%; }
.cell .amulet{ inset:auto; left:-6.44%; top:-6.44%; width:112.88%; height:112.88%; }
.gap{ aspect-ratio:1; }
.board.shot{ padding:0; background:none; border:0; position:relative; box-shadow:0 10px 30px #000c; }
.board.shot img{ display:block; width:100%; height:auto; border-radius:4px; filter:brightness(.82) saturate(.85); transition:filter .2s; }
.boards:hover .board.shot img, .boards:focus-visible .board.shot img{ filter:none; }
.board .play-over{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; font-size:30px; padding:14px 36px; white-space:nowrap;
  box-shadow:0 4px 0 #0005, 0 10px 30px #000a; }
.boards:hover .play-over{ color:#b1301c; background:linear-gradient(180deg,#f3e3c0,#d2b483); }
.caption{ margin:10px 0 0; font-size:15px; font-style:italic; color:#f0dcae; text-shadow:0 1px 3px #000; text-align:center; }
@media (prefers-reduced-motion:reduce){ .grid{ transition:none; } }
.board{ padding:9px; border-radius:5px; background:linear-gradient(145deg,var(--fa,#3a2812),var(--fb,#1c1208) 70%);
  border:3px solid; border-color:var(--fe,#8a6a3a) var(--fb,#1c1208) var(--fb,#1c1208) var(--fe,#8a6a3a); box-shadow:0 10px 30px #000c; }
.band{ height:11px; margin:7px 0; border-block:2px solid #120a03;
  background:repeating-linear-gradient(90deg,var(--lapis) 0 16px,#e8d49e 16px 18px,var(--carnelian) 18px 34px,#e8d49e 34px 36px,var(--malachite) 36px 52px,#e8d49e 52px 54px,var(--gold) 54px 70px,#e8d49e 70px 72px); }
.band:first-child{ margin-top:0; } .band:last-child{ margin-bottom:0; }
.well{ position:relative; }
.backing{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stops{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
@media (max-width:860px){ .stops{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.stops button{ font:16px var(--display); color:#2b1a0b; cursor:pointer; padding:5px 10px; border-radius:3px;
  background:#f6ecd2; border:1px solid #a8844e; box-shadow:0 2px 0 #7a5a3055; }
.stops button b{ color:#7a1f12; margin-right:3px; }
.stops button[aria-pressed="true"]{ background:linear-gradient(180deg,#f7dd8c,#e2b654); border-color:#8a5a10; }

/* front page: how a stop works */
.steps{ list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0; margin:0; }
.steps li{ counter-increment:step; }
.steps .pics{ display:flex; align-items:center; gap:6px; min-height:60px; }
.steps .pics::before{ content:counter(step); font:700 26px var(--display); color:var(--carnelian); margin-right:6px; }
.steps p{ margin:6px 0 0; font-size:16.5px; }
.arrow{ font-size:22px; color:var(--brown); }
.dl{ display:flex; flex-direction:column; }
.dl small{ font:13.5px var(--body); color:var(--brown); text-shadow:none; }

/* The manual: an index in the margin (like How to play), the page beside it */
.book.manual{ max-width:1180px; }
.manual-grid{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:0 28px; }
.manual-index{ position:sticky; top:10px; align-self:start; max-height:calc(100vh - 20px); overflow:auto; padding-right:6px; border-right:1px solid #8a622a88; }
.manual-index h3{ margin:14px 0 3px; font:italic 14px var(--display); color:var(--brown); }
.manual-index a.page{ display:block; padding:4px 8px; border-radius:3px 0 0 3px; font:17px/1.25 var(--display); color:var(--ink); text-decoration:none; }
.manual-index a.page:hover{ color:var(--carnelian); background:#8a622a1f; }
.manual-index a.page[aria-current="page"]{ color:var(--carnelian); background:#8a622a26; box-shadow:inset 3px 0 0 var(--carnelian); }
.manual-index .chapters{ list-style:none; margin:2px 0 8px; padding:0 0 0 16px; font-size:14.5px; line-height:1.35; }
.manual-index .chapters li{ margin:3px 0; }
.manual-index .chapters a{ color:var(--brown); text-decoration:none; }
.manual-index .chapters a:hover{ color:var(--carnelian); text-decoration:underline; }
.manual-index a.pdf{ display:block; margin:14px 0 4px; padding:8px 10px; border:1px solid #8a622a88; border-radius:3px; text-decoration:none;
  font:16px var(--display); color:var(--carnelian); }
.manual-index a.pdf small{ display:block; font:italic 13px var(--body); color:var(--brown); }
.manual-index a.pdf:hover{ background:#8a622a1f; }
#manualSearch{ width:100%; margin:2px 0 6px; padding:7px 10px; font:15px var(--body); color:var(--ink); background:#fff8e6; border:1px solid #8a622a88; border-radius:3px; }
#manualResults{ margin:0 0 8px; border:1px solid #8a622a55; border-radius:3px; background:#fff8e699; }
#manualResults a{ display:block; padding:6px 8px; border-bottom:1px dotted #8a622a55; text-decoration:none; color:var(--ink); }
#manualResults a:hover{ background:#8a622a1f; }
#manualResults b{ display:block; font:16px var(--display); color:var(--carnelian); }
#manualResults small{ display:block; font-size:12.5px; color:var(--brown); font-style:italic; }
#manualResults span{ display:block; font-size:13px; line-height:1.35; }
#manualResults p{ margin:6px 8px; font-style:italic; }
.manual article{ min-width:0; }
.manual article h1{ text-align:left; font-size:38px; margin:4px 0 8px; }
.manual article h2{ font-size:28px; margin:34px 0 8px; padding-top:14px; border-top:1px solid #8a622a44; }
.manual article h3{ font-size:21px; margin:24px 0 6px; }
.manual article img{ max-width:100%; height:auto; border-radius:4px; box-shadow:0 2px 8px #0004; }
.manual article table{ border-collapse:collapse; width:100%; margin:10px 0 14px; font-size:15.5px; display:block; overflow-x:auto; }
.manual article th, .manual article td{ text-align:left; vertical-align:top; padding:6px 10px; border-bottom:1px solid #8a622a44; }
.manual article th{ font-family:var(--display); color:var(--brown); font-weight:400; border-bottom-width:2px; }
.manual article pre{ tab-size:4; margin:10px 0 14px; padding:12px 14px; overflow:auto; border-radius:4px; background:#f7ecd4; border:1px solid #8a622a55; }
.manual article pre, .manual article code{ font:13.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.manual article :not(pre) > code{ font-size:.86em; overflow-wrap:anywhere; }
.manual article td code{ overflow-wrap:normal; }
.manual article blockquote{ margin:12px 0; padding:8px 14px; border-left:4px solid var(--gold); background:#8a622a14; border-radius:0 4px 4px 0; }
.manual article blockquote p{ margin:4px 0; }
.manual article hr{ border:0; height:13px; margin:22px 0; border-top:2px solid #c8962e; border-bottom:2px solid #c8962e;
  background:repeating-linear-gradient(90deg, #1f3a7a 0 16px, #e8d49e 16px 18px, #8e2415 18px 34px, #e8d49e 34px 36px, #2e7d5b 36px 52px, #e8d49e 52px 54px, #c8962e 54px 70px, #e8d49e 70px 72px); }
.manual .turn{ display:flex; justify-content:space-between; gap:10px; margin-top:30px; padding-top:12px; border-top:1px solid #8a622a55; }
.manual .turn a{ font:17px var(--display); color:var(--brown); text-decoration:none; border:1px solid #8a622a88; border-radius:3px; padding:6px 12px; }
.manual .turn a:hover{ color:var(--carnelian); background:#8a622a1f; }
pre .b{ color:#8e2415; } pre .s{ color:#2e6b3a; } pre .n{ color:#1f3a7a; }
pre .c{ color:#8a6a3a; font-style:italic; } pre .k{ color:#6b3a1a; } pre .f{ color:#1f3a7a; }
@media (max-width:860px){
  .manual-grid{ display:block; }
  .manual-index{ position:static; max-height:none; border-right:0; border-bottom:1px solid #8a622a88; margin-bottom:14px; padding-bottom:8px; }
  .manual-index .chapters{ display:none; }
}
.manual-pages > summary{ display:none; list-style:none; }
@media (max-width:860px){
  .manual-pages > summary{ display:block; cursor:pointer; font:17px var(--display); color:var(--carnelian); padding:4px 2px; }
  .manual-pages > summary::before{ content:"▸ "; }
  .manual-pages[open] > summary::before{ content:"▾ "; }
}

/* How to play */
.book{ max-width:820px; margin:18px auto; padding:0 15px; }
.book h1{ text-align:center; font-size:38px; margin:4px 0 12px; hyphens: auto;}
/* the chapters: an index down the margin, as in the game; on a narrow
   screen a contents page, and chapters that turn like pages */
.codex{ display:grid; grid-template-columns:190px minmax(0,1fr); }
.codex .index{ border-right:1px solid #8a622a88; padding:2px 0 8px; position:sticky; top:8px; align-self:start; }
.codex nav h3{ margin:10px 8px 2px; font:italic 14px var(--display); color:var(--brown); }
.codex nav h3:first-child{ margin-top:0; }
.codex .index a, .codex .contents a{ display:flex; align-items:center; gap:9px; font-family:var(--display); color:var(--ink); text-decoration:none; }
.codex .index a{ font-size:17px; padding:4px 8px; border-radius:3px 0 0 3px; }
.codex .index a:hover, .codex .contents a:hover{ color:var(--carnelian); background:#8a622a1f; }
.codex .index a[aria-current="page"]{ color:var(--carnelian); background:#8a622a26; box-shadow:inset 3px 0 0 var(--carnelian); margin-right:-1px; }
.codex svg{ flex:none; }
.pages{ min-width:0; padding-left:22px; }
.tab > h2{ display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.contents{ display:none; }
.contents a{ font-size:19px; padding:7px 6px; border-bottom:1px dotted #8a622a88; }
.leaf-top{ display:none; justify-content:space-between; align-items:center; margin-bottom:10px; }
.leaf-top span{ font-size:15px; font-style:italic; color:var(--brown); }
.turn{ display:flex; justify-content:space-between; gap:8px; margin-top:16px; padding-top:10px; border-top:1px solid #8a622a55; }
.leaf-top a, .turn a{ font:16px var(--display); color:var(--brown); text-decoration:none; border:1px solid #8a622a88; border-radius:3px; padding:5px 11px; }
.leaf-top a:hover, .turn a:hover{ color:var(--carnelian); background:#8a622a1f; }
.tabbed .tab + .tab{ margin-top:0; }
.tab + .tab{ margin-top:28px; }
@media (max-width:640px){
  .codex{ display:block; }
  .codex .index{ display:none; }
  .pages{ padding:0; }
  .contents{ display:block; } .contents[hidden]{ display:none; }
  .tabbed .leaf-top{ display:flex; }
}
.lede{ text-align:center; font-style:italic; color:#4a3217; }
.rows{ list-style:none; padding:0; margin:8px 0; }
.rows li{ display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:center; padding:8px 0; border-top:1px solid #8a622a44; }
.rows li > svg, .rows li > img, .rows li > span{ justify-self:center; }
.where{ font-size:15px; color:var(--brown); }
.points{ padding-left:22px; } .points li{ margin:5px 0; }
.legal h1{ text-align:left; } .legal h2{ font-size:22px; margin:22px 0 4px; }
.legal .langs{ font-family:var(--display); font-size:17px; margin:0 0 6px; }
.legal .langs a{ margin-right:14px; }
.legal section + section{ margin-top:30px; padding-top:18px; border-top:1px solid #8a622a55; }
.legal .note{ font-style:italic; color:var(--brown); }
.made h2{ font-size:26px; margin:30px 0 8px; } .made h3{ font-size:21px; margin:20px 0 4px; }
mark{ background:#f3c64d; color:var(--carnelian); padding:0 4px; }

@media (max-width:820px){
  .steps{ grid-template-columns:1fr; }
  body{ font-size:17px; }
}

/* Dark mode, when the visitor's device asks for it: the papyrus turns to
   old, dark parchment and the sandstone to basalt, with light ink. The
   decorative band keeps its own colours. */
@media (prefers-color-scheme: dark){
  :root{ color-scheme:dark;
	--basalt:#0c0805; --basalt-2:#1c130a; --papyrus:#2b2013; --ink:#ecdfc2; --brown:#c9ad7e;
	--carnelian:#f0957a; --lapis:#9db8ff; --page:#1c150d; --card:#2b2013; --card-edge:#5a4630; }
  /* a faint light edge, so dark amulets (Anubis, the palm) don't sink into the parchment */
  img.art, .tile, .rows li > img, .codex a > svg, .tab > h2 > svg{ filter:drop-shadow(0 0 1.5px #f0dcae99); }
  .papyrus{ box-shadow:inset 0 0 30px #000c, inset 0 0 3px #000; }
  .stone{ background:linear-gradient(180deg,#3a2c1c,#261c10); border-color:#5e4a30 #120c06 #120c06 #5e4a30;
	box-shadow:0 3px 0 #000a, 0 8px 18px #000c; }
  .btn{ color:#f3cf8e; background:linear-gradient(180deg,#4e3a22,#33240f); border-color:#6e5634 #1a1008 #1a1008 #6e5634; text-shadow:0 1px 0 #000; }
  .btn:hover{ color:#ffe2a8; background:linear-gradient(180deg,#5c4428,#3e2c14); }
  .btn:active{ border-color:#1a1008 #6e5634 #6e5634 #1a1008; }
  .boards:hover .play-over{ color:#ffe2a8; background:linear-gradient(180deg,#5c4428,#3e2c14); }
  .name{ color:#f0dcae; text-shadow:0 1px 0 #000, 0 -1px 0 #6d4a22; }
  .top nav a:not(.btn){ color:#e8d49e; }
  .tablet h2{ color:#f3cf8e; }
  .here, .rows li{ border-color:#c9a15c33; }
  #manualSearch{ background:#1c130a; color:var(--ink); }
  #manualResults{ background:#1c130a99; }
  .manual article pre{ background:#1c130a; border-color:#c9a15c33; }
  .manual article img{ box-shadow:0 2px 8px #000a; }
  pre .b{ color:#f0957a; } pre .s{ color:#9fd49a; } pre .n{ color:#9db8ff; }
  pre .c{ color:#b89a6a; } pre .k{ color:#e8c48a; } pre .f{ color:#9db8ff; }
  .roadmap li{ border-top-color:#c9a15c55; }
  .lede, .pitch.card .journal{ color:#d8c29a; }
  .card, .scroll > .sheet{ box-shadow:0 2px 0 #0008; }
  hr.band{ border-color:#000; }
  mark{ background:#8a6414; color:#fff0c8; }
  .stops button{ color:#ecdfc2; background:#2e2216; border-color:#6a5030; box-shadow:0 2px 0 #0008; }
  .stops button b{ color:#f0957a; }
  .stops button[aria-pressed="true"]{ color:#fff0c8; background:linear-gradient(180deg,#7a5418,#4e3408); border-color:#c8962e; }
  .band{ background:repeating-linear-gradient(90deg,#1f3a7a 0 16px,#e8d49e 16px 18px,#8e2415 18px 34px,#e8d49e 34px 36px,#2e7d5b 36px 52px,#e8d49e 52px 54px,#c8962e 54px 70px,#e8d49e 70px 72px); }
}