/* Second 21: dark throughout, in Conquer's own type (Orbitron and Exo 2). The
   page is complete and readable with no motion at all; that is exactly what
   visitors who ask for less motion get, and the motion layers (js/) only add
   to it. Every resting style here is the finished look. */

@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/orbitron.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Exo 2';
  src: url('/fonts/exo2.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --tech: 'Orbitron', 'Exo 2', system-ui, sans-serif;
  --body: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px);
  --wide: 1240px;
  --line: #18203E; /* rgb(143 180 255 / 0.14) over night, solid so dark modes cannot fade it */
  --line-strong: #2E3C62; /* rgb(143 180 255 / 0.3) over night */
  --dim: rgb(214 226 255 / 0.68);
  --glow-blue: rgb(31 107 255 / 0.55);
  color-scheme: only dark;
}

/* The page is already dark, and this is its dark theme. Browsers with their
   own dark mode (Samsung Internet, Chrome's "darken websites") look for this
   rule and, finding it, leave the page's colours alone instead of recolouring
   them. Nothing changes here because the page is the same either way. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only dark; }
}

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

@media (prefers-reduced-motion: no-preference) {
  html:not(.has-motion) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--night);
  color: var(--white);
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
p { margin: 0; }

h1, h2, h3 {
  font-family: var(--tech);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
}

.eyebrow {
  font-family: var(--tech);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8FB4FF;
}

/* --- Backdrop: deep blue glows and Conquer's engineering grid ------------ */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 80% 10%, rgb(31 107 255 / 0.16), transparent 70%),
    radial-gradient(50% 45% at 10% 90%, rgb(255 49 85 / 0.07), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, #0B1A6E 0%, #070E3F 45%, var(--night) 100%);
}
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgb(143 180 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(143 180 255 / 0.05) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px var(--gutter);
  transition: background-color 0.4s, border-color 0.4s, padding 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding-block: 10px;
  background: rgb(5 8 31 / 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
}

.brand { display: block; line-height: 0; }
.brand svg { height: 26px; width: auto; }

nav { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 18px); }
.nav-links { display: flex; align-items: center; gap: clamp(2px, 1vw, 8px); }

/* Social links: round icon buttons beside Games. */
.socials { display: flex; align-items: center; gap: 4px; padding-left: clamp(6px, 1.2vw, 14px); border-left: 1px solid var(--line); }
.socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--dim);
  transition: color 0.2s, background-color 0.2s, transform 0.2s;
}
.socials a[hidden] { display: none; }
.socials a:hover { color: var(--white); background: rgb(143 180 255 / 0.12); transform: translateY(-1px); }
.socials a:focus-visible { outline: 2px solid #8FB4FF; outline-offset: 2px; }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
nav a {
  font-family: var(--tech);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--dim);
  transition: color 0.2s, background-color 0.2s;
}
nav a:hover { color: var(--white); background: rgb(143 180 255 / 0.1); }
nav .nav-play { color: var(--white); background: var(--red); box-shadow: 0 0 22px -4px rgb(229 32 46 / 0.7); }
nav .nav-play:hover { background: var(--red-on-dark); }

/* --- Buttons ------------------------------------------------------------ */

.play-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
/* Room for store badges later: a row of its own, so adding them moves nothing. */
.badges { flex-basis: 100%; display: flex; gap: 12px; }
.badges[hidden] { display: none; }

.play, .ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 17px 28px;
  border-radius: 999px;
  font-family: var(--tech);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.play {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 0 0 1px rgb(255 120 130 / 0.4) inset, 0 12px 36px -10px rgb(229 32 46 / 0.8);
  overflow: hidden;
  transition: background-color 0.25s, box-shadow 0.25s;
}
.play::after { content: '→'; font-family: var(--body); letter-spacing: 0; transition: transform 0.25s; }
.play:hover { background: var(--red-on-dark); box-shadow: 0 0 0 1px rgb(255 160 168 / 0.6) inset, 0 16px 46px -10px rgb(255 59 71 / 0.95); }
.play:hover::after { transform: translateX(4px); }
/* A sheen that sweeps across on hover. */
.play::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.7s;
}
.play:hover::before { transform: translateX(120%); }

.ghost { color: var(--white); border: 1px solid var(--line-strong); transition: border-color 0.25s, background-color 0.25s; }
.ghost:hover { border-color: #8FB4FF; background: rgb(143 180 255 / 0.08); }

.play:focus-visible, .ghost:focus-visible, nav a:focus-visible, .brand:focus-visible, .scroll-cue:focus-visible {
  outline: 2px solid #8FB4FF;
  outline-offset: 4px;
}

/* --- Hero --------------------------------------------------------------- */

#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px var(--gutter) 90px;
  overflow: hidden;
  /* The board, drawn by the stylesheet until the canvas takes over. */
  background: radial-gradient(rgb(143 180 255 / 0.16) 1.1px, transparent 1.6px) 0 0 / 34px 34px;
}
html.has-motion #hero { background: none; }

#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Quieter behind the words on the left. */
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.35) 0%, #000 55%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.35) 0%, #000 55%);
}

.hero-copy { position: relative; z-index: 2; max-width: 980px; }
.hero-copy .eyebrow { margin-bottom: 26px; display: flex; align-items: center; gap: 12px; }
.hero-copy .eyebrow::before { content: ''; width: 34px; height: 1px; background: #8FB4FF; }

.hero-logo { margin: 0; line-height: 0; filter: drop-shadow(0 0 36px rgb(31 107 255 / 0.45)); }
.hero-logo svg { width: clamp(280px, 50vw, 700px); height: auto; overflow: visible; }

/* The logo and slogan as one lockup, exactly as wide as the logo. The slogan's
   SVG shares the logo's coordinates, so its text spans hexagon to "21". */
.lockup { width: fit-content; max-width: 100%; }
.slogan { margin: clamp(14px, 2vw, 22px) 0 clamp(30px, 4vw, 44px); line-height: 0; }
.slogan-svg { display: block; width: 100%; height: auto; overflow: visible; }
.slogan text {
  font-family: var(--tech);
  font-weight: 800;
  font-size: 34px;
  fill: #FFFFFF; /* each letter carries its own colour (index.html) */
}
.slogan text.is-decoding { fill: #8FB4FF; }
/* Once js/slogan-paint.js has painted the slogan onto a canvas over it (so
   Samsung Internet's dark mode cannot recolour it), the SVG text beneath is
   kept for layout but not shown. */
.slogan { position: relative; }
.slogan-paint { position: absolute; left: 0; top: 0; pointer-events: none; }
.slogan.is-painted text { opacity: 0; }

/* HUD: corner brackets, a system label, a status light and the light's
   coordinates on the board. */
.hud { position: absolute; inset: 86px var(--gutter) 28px; pointer-events: none; z-index: 1; }
.hud-corner { position: absolute; width: 22px; height: 22px; border-color: var(--line-strong); border-style: solid; border-width: 0; }
.hud-corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud-corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud-corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud-corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hud p {
  position: absolute;
  font-family: var(--tech);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(143 180 255 / 0.6);
}
.hud-label { top: 6px; right: 34px; }
.hud-coords { bottom: 6px; right: 34px; font-variant-numeric: tabular-nums; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 2;
  width: 24px;
  height: 38px;
  margin-left: -12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: #8FB4FF; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* --- Sections and their dividers ---------------------------------------
   Each section after the hero opens on a full-width hairline of light, then a
   numbered heading whose line runs out to a small hexagon: unmistakably a new
   section, in the HUD's own language. */

#story, #games {
  position: relative;
  padding: clamp(70px, 10vh, 110px) var(--gutter) clamp(60px, 9vh, 100px);
}
/* Lines below are drawn as solid borders, faded with masks: Samsung Internet's
   dark mode dims every CSS background but leaves border colours alone. Each
   colour is the old see-through one as it looked over night. */
#story::before, #games::before, #story::after, #games::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
}
#story::before, #games::before {
  border-top: 1px solid #51679A; /* rgb(143 180 255 / 0.55) over night */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
/* The glow, apart from the line so its mask cannot clip it. */
#story::after, #games::after { box-shadow: 0 0 24px 2px rgb(31 107 255 / 0.35); pointer-events: none; }
#story { background: linear-gradient(rgb(5 8 31 / 0.55), transparent 60%); }

.section-rule, .story, .bento { max-width: var(--wide); margin-inline: auto; }
.section-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.rule-index {
  font-family: var(--tech);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--red-on-dark);
  padding: 7px 10px;
  border: 1px solid #822233; /* rgb(255 59 71 / 0.5) over night */
  border-radius: 8px;
  box-shadow: 0 0 16px -4px rgb(255 59 71 / 0.6);
}
.section-rule h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); white-space: nowrap; }
.rule-line {
  position: relative;
  flex: 1;
  height: 1px;
  border-top: 1px solid #586FA5; /* rgb(143 180 255 / 0.6) over night */
  transform-origin: left;
}
/* The fade along the line, as its own layer: a mask on the line would clip the hexagon. */
.rule-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  border-top: 1px solid var(--night);
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.87));
  mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.87));
}
/* A hexagon at the end of the line: the mark, in miniature. */
.rule-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: -6px;
  width: 11px;
  height: 13px;
  border-top: 13px solid #4A5E8F; /* rgb(143 180 255 / 0.5) over night; a border filling the box */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* --- My story ------------------------------------------------------------ */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.story-lead {
  position: relative;
  padding-left: 26px;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}
/* Red fading into blue: a red border, and a blue one over it faded in by a mask. */
.story-lead::before, .story-lead::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 3px;
  border-radius: 2px;
}
.story-lead::before { border-left: 3px solid var(--red-on-dark); box-shadow: 0 0 14px rgb(255 59 71 / 0.5); }
.story-lead::after {
  border-left: 3px solid var(--ultramarine);
  -webkit-mask-image: linear-gradient(transparent, #000);
  mask-image: linear-gradient(transparent, #000);
}
.story-body { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.75; color: var(--dim); }

/* --- Work: the bento ---------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(230px, auto);
  gap: 16px;
  perspective: 1400px;
}

.card {
  --gx: 50%;
  --gy: 50%;
  position: relative;
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
}
/* A light that follows the cursor across the card, and lights its edge. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgb(31 107 255 / 0.2), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--gx) var(--gy), rgb(143 180 255 / 0.9), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.card:hover::before, .card:hover::after { opacity: 1; }
.card h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 10px 0 12px; }
.card p:not(.eyebrow) { color: var(--dim); font-size: 0.98rem; }

/* Conquer: two thirds wide, its living board behind the words. */
.card-conquer { grid-column: 1 / -1; display: flex; align-items: flex-end; min-height: 500px; padding: 34px; }
.card-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  -webkit-mask-image: linear-gradient(200deg, #000 30%, transparent 85%);
  mask-image: linear-gradient(200deg, #000 30%, transparent 85%);
}
.card-scene .title-scene-svg { width: 125%; transform: rotateX(52deg) translate(12%, -14%); }
.card-body { max-width: 30rem; }
.game-name { font-size: clamp(2.4rem, 5vw, 4.2rem) !important; letter-spacing: 0.06em !important; text-shadow: 0 0 40px rgb(31 107 255 / 0.6); }
.card-conquer .card-body > p:not(.eyebrow) { margin-bottom: 18px; }

/* Getting the game: the app stores. (No browser play from the site until
   launch.) Until a listing exists its store is a "coming soon" chip;
   the official badge replaces it once live (js/stores.js). */
.get-app { border-top: 1px solid var(--line); padding-top: 20px; }
.get-label { font-family: var(--tech); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: #CFE0FF; margin-bottom: 14px; }
/* One column, every chip as wide as the widest, so they line up as a pair. */
.stores { display: grid; justify-content: start; max-width: 100%; gap: 12px; margin-bottom: 18px; }
.stores > .store-badge { justify-self: start; }
.store-badge { display: block; line-height: 0; border-radius: 10px; transition: transform 0.2s, filter 0.2s; }
.store-badge:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 18px rgb(31 107 255 / 0.45)); }
.store-badge img { height: 48px; width: auto; }
/* Google's badge carries its own clear space inside the image. */
.store-badge[data-store="google-play"] img { height: 70px; margin: -11px -9px; }
.store-soon {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px dashed var(--line-strong);
  background: rgb(5 8 31 / 0.5);
  font-family: var(--tech);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.store-soon::before { content: ''; width: 10px; height: 16px; border: 1.5px solid currentColor; border-radius: 3px; }
.store-badge:focus-visible { outline: 2px solid #8FB4FF; outline-offset: 4px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.tags li {
  font-family: var(--tech);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: #CFE0FF;
}

/* --- Footer ------------------------------------------------------------- */

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 26px var(--gutter) 38px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.88rem;
}
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--white); }
.footer-brand { font-family: var(--tech); font-weight: 900; letter-spacing: 0.32em; text-transform: uppercase; color: var(--white); }

/* --- The opening and the held-back headline (moved by js/) -------------- */

#opening {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--night);
  overflow: hidden;
}
#opening[hidden] { display: none; }
.opening-logo svg { width: min(62vw, 380px); height: auto; overflow: visible; }

/* Shown from the first paint when the head script says it will play, with the
   logo held back until the animation draws it. If the scripts never arrive,
   the curtain lifts and the page unlocks by itself after 4.5s. */
html.opening #opening { display: grid; animation: opening-failsafe 0.4s 4.5s forwards; }
html.opening #opening.is-playing { animation: none; }
html.opening .opening-logo { visibility: hidden; }
html.opening body { overflow: hidden; animation: unlock-failsafe 0s 4.5s forwards; }
@keyframes opening-failsafe { to { opacity: 0; visibility: hidden; } }
@keyframes unlock-failsafe { to { overflow: visible; overflow-x: hidden; } }

.opening-gleam {
  position: absolute;
  inset: -20% -40%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgb(143 180 255 / 0.18) 50%, transparent 56%);
  transform: translateX(-120%);
}

/* The hero's logo and slogan wait to be drawn and decoded in. If the scripts
   never run, they show by themselves after 2.5s. */
html.motion-pending :is(.hero-logo, .slogan) { visibility: hidden; animation: reveal-failsafe 0s 2.5s forwards; }
html.motion-pending.has-motion :is(.hero-logo, .slogan) { animation: none; }
@keyframes reveal-failsafe { to { visibility: visible; } }

/* --- Narrow screens ----------------------------------------------------- */

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-conquer { grid-column: span 2; grid-row: auto; min-height: 0; padding-top: 250px; }
  /* The board above the words, not behind them. */
  .card-scene { bottom: auto; height: 300px; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
  .card-scene .title-scene-svg { width: 110%; transform: rotateX(50deg) translateY(-8%); }
  .story { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .brand svg { height: 17px; }
  .site-header { gap: 8px; }
  nav { gap: 6px; }
  /* Room for all four social icons beside Games on a phone. */
  .socials { gap: 0; padding-left: 4px; }
  .socials a { width: 30px; height: 30px; }
  .socials svg { width: 15px; height: 15px; }
  .lockup { width: 100%; }
  .hero-logo svg { width: 100%; }
  nav a { padding: 8px 10px; letter-spacing: 0.14em; }
  .nav-links a:not(.nav-play) { display: none; }
  .hud-label, .hud-coords { display: none; }
  .play, .ghost { padding: 15px 22px; }
  /* Tighter so each store chip stays on one line on a phone. */
  .store-soon { padding: 0 14px; gap: 8px; font-size: 0.62rem; letter-spacing: 0.1em; }
}

/* Less motion: everything rests. */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; }
}

/* The red buttons' canvas (js/pill-paint.js): under the text, over the CSS
   background, which stays as the fallback. */
.play, nav .nav-play { position: relative; isolation: isolate; }
.pill-paint { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* The logo as text (js/logo-type.js), laid exactly over its SVG: one em is
   the logo's height, so the glyphs are set at the box's own height. The SVG
   is hidden only once the font is in; until then, or if it never comes, the
   SVG shows. */
@font-face {
  font-family: 'Second 21 Logo';
  src: url('/fonts/second21-logo.ttf') format('truetype');
  font-display: block;
}
.brand, .hero-logo { position: relative; }
.logo-type { position: absolute; left: 0; top: 0; width: 100%; height: 100%; container-type: size; pointer-events: none; opacity: 0; }
.logo-type > span { position: absolute; left: 0; top: 0; font: normal 400 100cqh/1 'Second 21 Logo'; letter-spacing: 0; white-space: nowrap; }
.lt-white { color: #FFFFFF; }
.lt-blue { color: #1F6BFF; }
.is-lettered > .logo-type { opacity: 1; }
.is-lettered > svg { opacity: 0; }