/* cosmichomemath.com: the game's own opening screen on top, its night sky
   all the way down, the words on cream cards. Five type sizes, two faces. */

@font-face {
  font-family: 'Lilita One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/lilita-one-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The opening screen's sky runs from #0c1328 to #202642 down its 1920 rows.
     These are its colours at the top and bottom of each crop, so the page
     around the art matches it row for row. */
  --sky-title-top: #0f162c;
  --sky-title-bottom: #1d243f;
  --sky-ring-top: #131931;
  --sky-ring-bottom: #1a203a;
  --sky: #202642;

  --cream: #fff9e8;
  --gold: #ffdc7f;
  --lilac: #c9c0ea;
  --paper: #fffaf0;
  --ink: #15152d;
  --link: #3b3d70;
  --edge: #0b0d1d;

  --t-caption: 17px;
  --t-body: 19px;
  --t-label: 22px;
  --t-title: 26px;
  --t-hero: 32px;

  --gutter: 16px;
  --max: 640px;
  --pad: 20px;
  --radius: 12px;
  --border: 3px;
  --tap: 48px;
}

@media (min-width: 600px) {
  :root { --pad: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--sky);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--sky);
  color: var(--cream);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-body);
  line-height: 1.55;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.email { overflow-wrap: anywhere; font-weight: 700; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

main { flex: 1; background: linear-gradient(var(--sky-title-bottom), var(--sky) 240px); }

/* The top of every page: a crop of the opening screen, fading into its own sky */
.hero, .top { padding-top: env(safe-area-inset-top); text-align: center; }
.hero { background: linear-gradient(var(--sky-title-top), var(--sky-title-bottom)); }
.top { background: linear-gradient(var(--sky-ring-top), var(--sky-ring-bottom)); }
.hero h1 { margin: 0; }
.hero img, .top img {
  width: 100%;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
  mask-image: linear-gradient(#000 82%, transparent);
}
.hero img { max-width: 600px; }
/* The ring crop also fades at the top, which hides the tip of the rocket's flame */
.top img {
  max-width: 520px;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 10%, #000 82%, transparent);
}
.top a { display: block; border-radius: var(--radius); }
.top + main { background: linear-gradient(var(--sky-ring-bottom), var(--sky) 240px); }

/* Home page words */
.intro { padding-top: 8px; padding-bottom: 32px; text-align: center; }
.lead {
  margin: 0;
  color: var(--gold);
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}
.sub { margin: 12px 0 0; text-wrap: balance; }
.promise { margin: 14px 0 0; color: var(--lilac); font-size: var(--t-caption); font-weight: 700; text-wrap: balance; }

/* The card: a cream sign with a dark edge and a hard shadow */
.card {
  background: var(--paper);
  color: var(--ink);
  border: var(--border) solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
  padding: var(--pad);
}
.page { padding-top: 8px; padding-bottom: 40px; }

h1, h2, p, ul, figure { margin: 0; }
.card h1 { font-size: var(--t-title); line-height: 1.25; }
h2 { font-size: var(--t-label); line-height: 1.3; margin-top: 32px; }
.card p, .card ul { margin-top: 12px; }
.card h1 + p { margin-top: 8px; }
ul { padding-left: 1.2em; }
li + li { margin-top: 6px; }
strong { font-weight: 700; }
.small { font-size: var(--t-caption); }

/* Real game screens in phone frames: all three side by side and centred at
   every width, so none is ever hidden or cut by the card's edge */
.screens-wrap { padding-bottom: 40px; }
.screens { padding: 20px 14px 18px; }
.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.shot { min-width: 0; }
.shot img {
  width: 100%;
  border: 4px solid var(--edge);
  /* An even phone corner at any size: 15% of the width, matched on the height */
  border-radius: 15% / 8.4%;
}
.shot figcaption {
  margin-top: 10px;
  font-size: var(--t-caption);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 600px) {
  .shots { gap: 20px; }
  .shot img { border-width: 6px; }
}

/* The bottom of every page */
.foot { padding: 12px 0 calc(env(safe-area-inset-bottom) + 24px); text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.foot a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--cream); font-weight: 700; }
.foot a[aria-current="page"] { color: var(--lilac); text-decoration: none; }