/* Every colour and size below is the launcher's (tools/make_launcher_art.py, installer/gui_oot.py) or the in-game
   menu's: the brown band, khaki plates with the menu's grain, the amber plate, the dark value cell, the parchment
   sheet, the white cursor with its pale glow. Fonts are the launcher's too and are served from this site: no request
   leaves it. */
@font-face{font-family:"EB Garamond";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/EBGaramond-Bold.ttf) format("truetype")}
@font-face{font-family:Roboto;font-weight:500 700;font-style:normal;font-display:swap;src:url(fonts/Roboto-Medium.ttf) format("truetype")}

:root{
  --band-a:rgb(84,66,44); --band-b:rgb(104,83,54); --line:#1a110a;
  --khaki-a:rgb(111,90,53); --khaki-b:rgb(98,79,46); --khaki-edge:rgb(140,118,72);
  --khaki-hot-a:rgb(128,106,64); --khaki-hot-b:rgb(113,92,54);
  --amber-a:rgb(217,149,31); --amber-b:rgb(190,124,22); --amber-edge:rgb(240,184,74);
  --amber-hot-a:rgb(232,166,46); --amber-hot-b:rgb(206,138,30);
  --cell:rgb(30,26,18); --wood:rgba(42,29,18,.93); --wood-edge:#46341f; --desc:rgba(49,35,24,.94);
  --cream:#f6efd6; --tab:#efe6c8; --soft:#d9cfae; --dim:#b9ad92; --hint:#ffd27a; --ink:#3a2a18; --ink-soft:#5a4424;
  --w:1120px;
  --text:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --label:Roboto,"Segoe UI",system-ui,sans-serif;
  --title:"EB Garamond",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--cream);font:400 16px/1.55 var(--text);background:#0d0906;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(rgba(10,6,3,.3),rgba(10,6,3,.56)),#0d0906 url(forest.jpg) center top/cover no-repeat}
#motes{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
img{display:block;max-width:100%}
a{color:inherit}
b,strong{font-weight:600}
code{font:400 .92em Consolas,"Cascadia Mono",ui-monospace,monospace}
.in{max-width:calc(var(--w) + 64px);margin:0 auto;padding:0 32px}
section{scroll-margin-top:86px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:10px;z-index:20;padding:8px 14px;background:var(--cell);color:var(--cream)}

/* the band */
.band{position:sticky;top:0;z-index:10;background:url(grain-band.png),linear-gradient(var(--band-a),var(--band-b));border-bottom:2px solid var(--line);box-shadow:0 6px 14px rgba(0,0,0,.5)}
.band .in{display:flex;align-items:stretch;height:62px}
.band .logo{display:flex;align-items:center;margin-right:16px}
.band .logo img{height:30px;width:auto}
.band nav{margin-left:auto;display:flex}
.band nav a{display:flex;align-items:center;padding:0 22px;color:var(--tab);font:500 17px var(--label);text-decoration:none;transition:background-color .15s,color .15s}
.band nav a:hover,.band nav a:focus-visible{background:linear-gradient(#8a6f3d,#7a6034);color:#fff;outline:0}

/* plates: what is pressed */
.plate{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:8px 28px;color:var(--cream);font:500 16px var(--label);text-decoration:none;text-align:center;
  background:url(grain-plate.png),linear-gradient(var(--khaki-a),var(--khaki-b));border:1px solid var(--khaki-edge);text-shadow:0 1px 1px rgba(0,0,0,.35);transition:border-color .15s,transform .15s}
.plate:hover,.plate:focus-visible{background:url(grain-plate.png),linear-gradient(var(--khaki-hot-a),var(--khaki-hot-b));border-color:var(--cream);outline:0}
.plate:active{transform:translateY(1px)}
.play{min-height:76px;padding:8px 40px;font-size:25px;background:url(grain-plate.png),linear-gradient(var(--amber-a),var(--amber-b));border-color:var(--amber-edge)}
.play:hover,.play:focus-visible{background:url(grain-plate.png),linear-gradient(var(--amber-hot-a),var(--amber-hot-b));border-color:var(--cream)}
/* the game's cursor: a white frame with a pale glow outside it, breathing as it does in the game's menus */
.cursor,.plate:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 12px 7px rgba(190,215,255,.45)}
.cursor{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 10px 6px rgba(190,215,255,.38)}50%{box-shadow:0 0 18px 10px rgba(190,215,255,.62)}}

/* hero */
.hero{padding:64px 0 56px}
.hero .in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.hero h1{margin:0 0 22px}
.hero h1 img{width:min(100%,430px);height:auto}
.lead{font-size:21px;line-height:1.45;margin:0 0 8px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sub{color:var(--soft);margin:0 0 30px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.get{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.meta{font-size:14px;color:var(--soft);max-width:420px}
.more{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.own{margin:30px 0 0;padding:14px 18px;background:var(--desc);font-size:15px;line-height:1.55;color:var(--tab)}
.own b{color:var(--hint);font-weight:600}
figure{margin:0}
.pv{position:relative;border:1px solid var(--khaki-edge);box-shadow:0 8px 30px rgba(0,0,0,.7);background:#000}
.pv img{width:100%;height:auto}

/* section headings: the launcher's screen titles */
h2{font:700 36px/1.1 var(--title);margin:0 0 20px;color:var(--cream);text-shadow:0 2px 4px rgba(0,0,0,.6)}
.block{padding:0 0 64px}

/* the parchment sheet: what is read */
.sheet{background:#b79658 url(parchment.jpg) center/cover;color:var(--ink);padding:40px 48px 36px;box-shadow:inset 0 0 44px rgba(70,40,10,.47),0 6px 28px rgba(0,0,0,.75)}
.sheet h2{color:var(--ink);text-shadow:none;margin-bottom:26px}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 56px;margin:0;padding:0;list-style:none}
.feats h3{font:500 17px/1.35 var(--label);margin:0 0 3px}
.feats p{margin:0;font-size:15.5px;line-height:1.5;color:#4a3719}
.also{margin:28px 0 0;padding-top:18px;border-top:1px solid #7d6234;font-size:15px;color:#4a3719}
.shot{margin-top:28px}
.shot figcaption{background:var(--desc);padding:10px 16px;font-size:15px;color:var(--tab)}

/* the wood panel and its rows */
.panel{background:var(--wood);border:1px solid var(--wood-edge);padding:28px 32px 26px}
.row{display:grid;align-items:stretch;min-height:46px;margin-bottom:8px;background:url(grain-plate.png),linear-gradient(rgba(111,90,53,.94),rgba(98,79,46,.94));border:1px solid var(--khaki-edge)}
.row .l{display:flex;align-items:center;padding:8px 18px;font:500 17px var(--label);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.row .c{position:relative;display:flex;align-items:center;justify-content:center;margin:3px;padding:6px 12px;background:var(--cell);color:var(--cream);text-align:center;font-size:15.5px;overflow:hidden}
.row .c:not(:last-child){margin-right:0}
.row.head{background:none;border-color:transparent;min-height:0;margin-bottom:4px}
.row.head .c{background:none;color:var(--dim);font-size:14px;padding:0 12px}
.row .c i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(rgb(217,149,31),rgb(196,130,27));transform-origin:left center}
.w41{width:41%}.w42{width:42%}.w46{width:46%}.w66{width:66%}.w69{width:69%}
.perf .row .c{justify-content:space-between;padding:6px 14px}
.perf .row.head .c{justify-content:center}
.perf .c b{position:relative;font:500 17px var(--label);text-shadow:0 1px 1px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.perf .c small{position:relative;font-size:13px;color:#e9dcb4}
.perf .row{grid-template-columns:minmax(0,1fr) 300px 300px}
.req .row{grid-template-columns:200px minmax(0,1fr) minmax(0,1fr)}
.req .row .c{justify-content:flex-start;text-align:left;padding-left:16px}
.req .row.head .c{padding-left:16px}
.req .row .c.wide{grid-column:2/-1}
.foot{margin:16px 0 0;font-size:14.5px;color:var(--dim);line-height:1.6;max-width:940px}
.foot a{color:var(--hint)}

/* how it works */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.steps{margin:0;padding:0;list-style:none}
.steps .row{grid-template-columns:54px minmax(0,1fr) 190px;margin-bottom:0}
.steps .n{display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--title);color:var(--cream)}
.steps .row .l{padding-left:0}
.steps p{margin:10px 0 24px 2px;color:var(--tab);font-size:15.5px;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.steps li:last-child p{margin-bottom:0}
.steps .c.go{background:linear-gradient(var(--amber-a),var(--amber-b));font:500 15.5px var(--label)}
.cap{margin:10px 0 0;font-size:14px;color:var(--dim);text-shadow:0 1px 3px rgba(0,0,0,.75)}

/* help */
.note{background:var(--desc);border:1px solid var(--wood-edge);padding:26px 28px}
.note h3,.issues h3{font:500 19px/1.3 var(--label);margin:0 0 10px;color:var(--cream)}
.note p{margin:0 0 14px;color:var(--tab);font-size:15.5px}
.note p:last-child{margin-bottom:0}
.issues ul{margin:0 0 22px;padding:0;list-style:none}
.issues li{padding:10px 0;border-bottom:1px solid #4a3a26;color:var(--tab);font-size:15.5px}
.issues li:first-child{padding-top:0}
.issues.panel{padding:26px 28px}
.issues .cap{text-shadow:none}
.issues li b{color:var(--cream);font-weight:600}

/* footer */
footer{background:rgba(18,11,6,.95);border-top:2px solid var(--line);padding:32px 0 40px;font-size:14px;color:var(--dim);line-height:1.6}
footer .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:start}
footer img{height:26px;width:auto;margin-bottom:14px;opacity:.9}
footer p{margin:0 0 8px;max-width:720px}
footer nav{display:flex;flex-direction:column;gap:8px}
footer nav a,footer nav span{color:var(--tab);text-decoration:none;font:500 14px var(--label)}
footer nav span{color:var(--dim)}
footer a:hover,footer a:focus-visible{color:#fff;text-decoration:underline}

/* the page that is not there */
.lost{min-height:70vh;display:flex;align-items:center}
.lost .panel{max-width:620px}
.lost p{margin:0 0 22px;color:var(--tab)}

/* Motion. site.js puts "js" on <html>; without it, and for a visitor who asked for less motion, everything is simply
   there. A block rises into place once when it first comes into view; the bars of the performance table fill then. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.on{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}
.js .perf .row .c i{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.js .perf.on .row .c i{transform:none}
.js .pv img{transition:transform .5s ease}
@media (hover:hover){.js a.pv:hover img,.js .pv.zoom:hover img{transform:scale(1.015)}}
.pv{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cursor{animation:none}
  .js .rv,.js .perf .row .c i{opacity:1;transform:none;transition:none}
  #motes{display:none}
}

@media (max-width:900px){
  .in{padding:0 16px}
  .band{position:static}
  .band .in{flex-wrap:wrap;height:auto;padding:0}
  .band .logo{height:54px;margin:0 12px 0 16px}
  .band nav{margin:0;width:100%;border-top:1px solid rgba(26,17,10,.55)}
  .band nav a{flex:1;justify-content:center;padding:0 4px;height:44px;font-size:15px;white-space:nowrap}
  .hero{padding:32px 0 44px}
  .hero .in,.two{grid-template-columns:minmax(0,1fr);gap:28px}
  .lead{font-size:19px}
  .get{align-items:stretch}
  .play{font-size:22px;padding:8px 16px}
  .more .plate{flex:1;padding:8px 12px}
  h2{font-size:30px;margin-bottom:16px}
  .block{padding-bottom:48px}
  .sheet{padding:28px 20px 26px}
  .feats{grid-template-columns:minmax(0,1fr);gap:18px}
  .panel{padding:20px 14px 18px}
  .perf .row,.req .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .perf .row .l,.req .row .l{grid-column:1/-1;padding:8px 12px 4px}
  .perf .row.head .l,.req .row.head .l{display:none}
  .row .c{margin:3px;font-size:14.5px}
  .row .c:not(:last-child){margin-right:0}
  .perf .row .c{flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 10px 10px}
  .perf .row.head .c{align-items:flex-start;padding:0 10px}
  .perf .row .c i{top:auto;height:4px}
  .req .row .c.wide{grid-column:1/-1;margin-right:3px}
  .req .row .c,.req .row.head .c{padding-left:10px}
  .steps .row{grid-template-columns:44px minmax(0,1fr) 128px}
  .steps .row .c{font-size:13.5px;padding:6px}
  .note,.issues.panel{padding:20px 16px}
  footer .in{grid-template-columns:minmax(0,1fr)}
  footer nav{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
}