/* lunaclash.gg/privacy and /terms (§506): the site's ink and type, on a page
   that scrolls (site.css holds the home page to one screen, so these pages
   have their own sheet). */
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/fira-sans-extra-condensed-300-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/space-mono-700-latin.woff2') format('woff2'); }

:root {
  --night: #05060b;
  --cream: #efe6d2;
  --text: #e4dbc8d9;
  --mute: #d8cfbd8c;
  --gold: #efd391;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text);
  font: 300 18px/1.6 'Fira Sans Extra Condensed', 'Arial Narrow', system-ui, sans-serif;
}
::selection { background: #efd39140; }
:focus-visible { outline: 1px solid var(--cream); outline-offset: 4px; }

.page {
  max-width: 680px; margin: 0 auto;
  padding: max(clamp(28px, 6vw, 64px), env(safe-area-inset-top)) max(clamp(20px, 5vw, 32px), env(safe-area-inset-right)) 96px max(clamp(20px, 5vw, 32px), env(safe-area-inset-left));
}
.home { display: inline-block; margin-bottom: clamp(36px, 8vw, 72px); }
.home img { display: block; width: 148px; height: auto; opacity: .85; transition: opacity .3s; }
.home:hover img { opacity: 1; }

.label, .foot {
  margin: 0; color: var(--mute);
  font: 700 10.5px/1.5 'Space Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
}
h1 {
  margin: 12px 0 10px; color: var(--cream);
  font: 300 clamp(36px, 7vw, 52px)/1.1 'Fira Sans Extra Condensed', 'Arial Narrow', system-ui, sans-serif; letter-spacing: .01em;
}
h2 {
  margin: 44px 0 6px; color: var(--gold);
  font: 700 11.5px/1.5 'Space Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
}
p, li { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 1.1em; }
li::marker { color: var(--mute); }
strong { color: var(--cream); font-weight: inherit; }
a { color: var(--cream); text-decoration-color: #efe6d266; text-underline-offset: 3px; transition: color .3s; }
a:hover { color: var(--gold); }

.foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 64px; padding-top: 22px; border-top: 1px solid #d8cfbd26; }
.foot a { color: var(--mute); text-decoration: none; }
.foot a:hover { color: var(--cream); }