/* The look shared by the site's text pages (about.html, privacy.html): the game's board blue, Barlow Condensed, the
   yellow of the airport signs, and the same footer of small wayfinding signs as the game's menu. */
:root{--u:1.25px;--sign-yellow:#ffcc00;--sign-ink:#111418;--white:#fff;--white-a13:rgba(255,255,255,.13);--board:#0b1a30;--paper:#f4f1ea;--muted:rgba(244,241,234,.72);--accent:#ffb400;--sign:#ffcc00;--ink:#111418;--line:rgba(255,255,255,.1)}
*{box-sizing:border-box}
html{background:#070e1b} /* the colour the page ends in, for the overscroll on phones */
body{margin:0;background:linear-gradient(to bottom,#14305a,#0b1a30 420px,#070e1b);color:var(--paper);
  font:400 19px/1.55 'Barlow Condensed','Arial Narrow',Arial,sans-serif}
a{color:var(--accent)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
/* the header: the full width of the page, no background and no line: the logo in the left corner, the way into the
   game in the right */
.top .inner{padding:16px calc(22*var(--u));display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:.06em;font-weight:500;font-size:24px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;line-height:1}
.brand svg{width:1.1em;height:1.1em}
.brand .lug{color:#f3ecda}
.play{display:inline-flex;align-items:stretch;border-radius:4px;overflow:hidden;text-decoration:none;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.play i{display:flex;align-items:center;justify-content:center;width:42px;background:var(--ink);color:var(--sign)}
.play i svg{width:22px;height:22px}
.play b{display:flex;align-items:center;padding:9px 16px;background:var(--sign);color:var(--ink);font-weight:500;font-size:20px}
h1{margin:26px 0 10px;font-weight:500;font-size:clamp(40px,7vw,64px);line-height:1.02}
h1 em{font-style:normal;color:var(--accent)}
.lede{margin:0 0 26px;font-size:23px;color:var(--muted);max-width:640px}
.hero{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
h2{margin:44px 0 10px;font-weight:500;font-size:30px;letter-spacing:.02em}
h2::before{content:"";display:inline-block;width:10px;height:10px;margin:0 12px 4px 0;border-radius:2px;background:var(--accent)}
p{margin:0 0 14px}
ol,ul{margin:0 0 14px;padding-left:22px}
li{margin:6px 0}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0 0}
.card{padding:14px 16px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.card b{display:block;font-weight:500;font-size:21px;color:var(--accent)}
.card span{color:var(--muted)}
dl{margin:0}
dt{margin:18px 0 4px;font-weight:500;font-size:21px}
dd{margin:0;color:var(--muted)}
.cta{margin:48px 0 0;padding:28px;border-radius:10px;text-align:center;background:#0c1016;border:1px solid var(--line)}
.cta p{margin:0 0 16px;font-size:24px}

/* the footer: the game menu's own (src/styles/menu.css, the #menuFoot rules), so the two look the same: the full width
   of the page, no background, only a hairline; small airport wayfinding signs (a black pictogram on a yellow tile beside
   its word) in the left corner, the copyright in the right. Change one, change the other. */
body{min-height:100vh;display:flex;flex-direction:column}
.wrap{flex:1;width:100%}
.foot{margin-top:calc(40*var(--u));padding:calc(14*var(--u)) calc(22*var(--u)) calc(14*var(--u) + env(safe-area-inset-bottom));border-top:1px solid var(--white-a13)}
.finner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:calc(10*var(--u));flex-wrap:wrap}
.fnav{display:flex;align-items:center;gap:calc(14*var(--u))}
.fsign{display:inline-flex;align-items:center;gap:calc(6*var(--u));color:var(--paper);text-decoration:none;font-size:calc(12.5*var(--u));font-weight:500;line-height:1;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.fsign i{flex:none;width:calc(18*var(--u));height:calc(18*var(--u));border-radius:calc(3*var(--u));background:var(--sign-yellow);color:var(--sign-ink);display:flex;align-items:center;justify-content:center}
.fsign i svg{width:calc(13*var(--u));height:calc(13*var(--u));display:block}
.fsign:hover,.fsign:focus-visible{opacity:1}
.fsign:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:calc(3*var(--u))}
.fcopy{font-size:calc(12*var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
/* phones and tablets: the footer centred, the signs on one line and the copyright under them, at the game's own scale
   (src/engine/view.ts resize(): the smaller of the width over 360 and the height over 540), so it is the game menu's
   footer exactly. The desktop scale, 1.25px, is set on :root above, as in base.css. */
@media (max-width:899px){
  :root{--u:min(calc(100vw / 360),calc(100vh / 540))}
  .finner{flex-direction:column;justify-content:center;gap:calc(12*var(--u))}
  .fnav{justify-content:center;flex-wrap:wrap}
}