/* ==========================================================================
   Face Invaders — marketing site
   The ONE stylesheet for every public page. Nothing else may carry a <style>
   block: four near-identical copies is how support.html and privacy.html
   silently lost the `img{max-width:100%}` guard.

   Self-hosted fonts. There is no request to fonts.googleapis.com or
   fonts.gstatic.com anywhere on this site — /privacy promises "no trackers of
   any kind on these pages" and a webfont GET is a request to Google with the
   visitor's IP and Referer on it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — Baloo 2, latin subset only, two weights.
   600 carries body copy, 800 carries headings and emphasis. Those are the only
   two weights any rule below may ask for, so the browser never synthesises.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/baloo2-latin-600.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;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/baloo2-latin-800.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;
}

/* --------------------------------------------------------------------------
   2. Tokens. Authoritative — if a colour appears as a hex literal below this
   block, that is a bug. The page gradient in particular used to hardcode the
   same three purples the tokens already declared, so editing a token changed
   nothing.
   -------------------------------------------------------------------------- */
:root {
  --deep: #150F3E;
  --mid: #2A175E;
  --top: #1E1248;
  --ink: #1F1235;

  --panel-a: rgba(74, 54, 144, .92);
  --panel-b: rgba(42, 28, 88, .95);
  --well: rgba(20, 12, 52, .5);

  --gold: #FFD84D;
  --gold-deep: #FF9C33;
  --cyan: #8FF6FF;
  --cyan-soft: #B9E8FF;
  --text: #F3EEFF;
  --muted: #C3B8E6;

  --glow-violet: rgba(122, 66, 200, .55);
  --glow-indigo: rgba(64, 38, 140, .60);
  --glow-pink: rgba(232, 80, 154, .16);

  --btn-a: #FFC46B;
  --btn-b: #FF9C33;
  --btn-c: #F0691E;

  --stroke: 3px;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow-drop: 0 12px 26px rgba(10, 5, 30, .5);
  --lift: 0 5px 0 var(--ink);
  --inset-hi: inset 0 3px 0 rgba(255, 255, 255, .16);
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Every <img> carries width/height attributes to reserve layout space. Those
   attributes are also presentational hints, so any rule setting only `width`
   leaves the attribute `height` in force and stretches the picture. This guard
   is why it must live in ONE stylesheet: support.html and privacy.html were
   both missing it. */
img { max-width: 100%; height: auto; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Baloo 2', 'Arial Rounded MT Bold', 'SF Pro Rounded',
    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-weight: 600;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  padding: 20px 18px 48px;
  background:
    radial-gradient(120% 55% at 85% -6%, var(--glow-violet) 0%, transparent 60%),
    radial-gradient(90% 45% at 8% 22%, var(--glow-indigo) 0%, transparent 55%),
    radial-gradient(70% 40% at 78% 68%, var(--glow-pink) 0%, transparent 60%),
    linear-gradient(180deg, var(--top) 0%, var(--mid) 42%, var(--deep) 100%);
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

.wrap { max-width: 1040px; margin: 0 auto; }
.wrap--narrow { max-width: 660px; }
.wrap--mid { max-width: 780px; }

/* Visible focus everywhere. The screenshot rail is keyboard-scrollable and
   needs to say so. */
a:focus-visible,
.rail:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   4. Site nav — same markup on every page, from one macro.
   -------------------------------------------------------------------------- */
.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  max-width: 1040px; margin: 0 auto 6px; padding: 4px 2px 14px;
}
.nav__home {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--text); font-weight: 800;
  font-size: 15px; letter-spacing: .2px; margin-right: auto;
}
.nav__home img {
  width: 30px; height: 30px; border-radius: 9px;
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
}
.nav__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.nav__links a {
  color: var(--cyan-soft); text-decoration: none; font-weight: 800;
  font-size: 14.5px; letter-spacing: .2px; padding: 2px 0;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.nav__links a[aria-current='page'] { color: var(--gold); border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   5. Headings & type
   -------------------------------------------------------------------------- */
h1 {
  font-size: clamp(32px, 5.4vw, 54px); font-weight: 800; letter-spacing: .3px;
  color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink), 0 8px 16px rgba(15, 8, 40, .5);
  line-height: 1.14;
}
h1 .em { color: var(--gold); display: block; }
/* Sub-pages: a calmer h1 that still reads as the same family. */
.page-head h1 { font-size: clamp(27px, 4vw, 36px); -webkit-text-stroke: 1px var(--ink);
  text-shadow: 0 3px 0 var(--ink), 0 6px 12px rgba(15, 8, 40, .5); }
.page-head h1 .em { display: inline; }

h2 {
  font-size: clamp(23px, 3.2vw, 32px); font-weight: 800; color: #fff; line-height: 1.2;
  -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
}
/* Sub-pages use small gold section headings. They are still real h2s — the
   size is a style choice, not a downgrade in meaning. */
.card h2.section-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--gold); margin-bottom: 10px; font-weight: 800;
  -webkit-text-stroke: 0; text-shadow: none;
}
h3 { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.35; }

/* Decoration only. Never the only heading-level text in a section. */
.kicker {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--gold); font-weight: 800; margin-bottom: 6px;
}
.lede { color: var(--muted); font-size: 17px; margin-top: 12px; max-width: 58ch; }
.lede strong { color: var(--cyan-soft); font-weight: 800; }
.lede a, .prose a, .card p a, .card li a { color: var(--cyan); font-weight: 800; }
.center { text-align: center; }
.center .lede, .center .prose { margin-inline: auto; }
.prose { color: var(--muted); font-size: 16px; }
.prose + .prose { margin-top: 12px; }
.prose strong { color: var(--cyan-soft); font-weight: 800; }

/* The quotable opening paragraph under the landing h1. */
.standfirst {
  color: var(--cyan-soft); font-size: clamp(16.5px, 2.1vw, 20px);
  margin: 16px auto 0; max-width: 46ch; line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { text-align: center; padding: 10px 0 26px; }
.hero__icon {
  width: 104px; height: 104px; border-radius: 26px; border: var(--stroke) solid var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 16px 34px rgba(10, 5, 30, .55);
}

/* --------------------------------------------------------------------------
   7. Call to action.
   Both states are the SAME shape: identical padding, border width, radius and
   drop. The pre-launch state is a solid, confident, inert element — it is not
   a dashed ghost, because a dashed ghost reads as a disabled button and makes
   the page look broken.
   -------------------------------------------------------------------------- */
.cta { margin-top: 24px; }
.cta__btn,
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  text-decoration: none; font-weight: 800; font-size: 17.5px; letter-spacing: .3px;
  padding: 15px 30px; min-height: 54px; line-height: 1.35;
  border: var(--stroke) solid var(--ink); border-radius: 16px;
  background: linear-gradient(180deg, var(--btn-a) 0%, var(--btn-b) 55%, var(--btn-c) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), var(--lift);
  color: #fff; -webkit-text-stroke: .5px var(--ink); paint-order: stroke fill;
  transition: transform .08s ease;
}
.cta__btn:active,
.btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--ink);
}
/* `.card a` (section 8) paints in-body links cyan and out-specifies the rule
   above — 0,2,0 beats 0,1,0 — so every button that lives inside a card was
   rendering cyan-on-orange instead of the intended white: the press-kit
   download, both "email the developer" buttons and the beta join button.
   Restated here at matching specificity rather than by weakening `.card a`,
   which genuinely does want to colour ordinary prose links. */
.card a.btn,
.card a.cta__btn { color: #fff; -webkit-text-stroke: .5px var(--ink); }

/* Pre-launch. Same silhouette, gold-on-panel instead of orange, solid border. */
.cta__btn--soon {
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  color: var(--gold); -webkit-text-stroke: 0;
  box-shadow: var(--inset-hi), var(--lift);
  cursor: default;
}
.cta__btn--soon:active { transform: none; box-shadow: var(--inset-hi), var(--lift); }
/* Apple's App Store badge. Deliberately plain: their guidelines say do not
   alter the artwork, so no gradient, no ink outline, no press animation — the
   one control on this site that does not get the cartoon treatment.
   `line-height: 0` stops the anchor adding a descender gap under the image,
   which otherwise reads as the badge sitting crooked. */
.cta__badge { display: inline-block; line-height: 0; }
.cta__badge img { display: block; height: 60px; width: auto; }
/* Clear space: Apple asks for at least 10% of the badge height on every side. */
.cta__badge { padding: 6px; }
@media (max-width: 480px) { .cta__badge img { height: 52px; } }

.cta__sub { color: var(--muted); font-size: 14px; margin-top: 12px; }

/* Pre-launch beta link under the inert "coming soon" button. Deliberately a
   link and not a second button: two buttons would read as a choice, and the
   App Store CTA has to stay the loudest thing in the hero the day it goes
   live. The gold arrow is the site's existing "this goes somewhere" cue. */
.cta__beta { margin-top: 14px; font-size: 15.5px; }
.cta__beta a {
  color: var(--cyan); font-weight: 800; text-decoration: none;
  border-bottom: 2px solid rgba(143, 246, 255, .35); padding-bottom: 2px;
}
/* Arrow on the paragraph, not the anchor: an inline border-bottom spans the
   whole inline box, so an arrow inside the link would sit on the underline. */
.cta__beta::after { content: ' \2192'; color: var(--gold); font-weight: 800; }
.cta__beta a:hover { color: var(--gold); border-bottom-color: rgba(255, 216, 77, .5); }

/* The two-step "how do I even install this" line in the beta card. TestFlight
   is unfamiliar enough to most players that dropping them on the link with no
   explanation loses them at Apple's install screen. */
.beta-steps {
  margin: 16px auto 0; max-width: 52ch;
  background: var(--well); border: 2px solid var(--ink); border-radius: 12px;
  padding: 12px 16px; font-size: 14.5px;
}
.beta-steps b { color: var(--cyan-soft); font-weight: 800; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
section { margin: 40px 0; }
.card {
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--inset-hi), var(--lift), var(--shadow-drop);
  padding: 26px;
}
.wrap--narrow .card, .wrap--mid .card { padding: 20px; margin-bottom: 22px; border-radius: 18px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card p + p { margin-top: 12px; }
.card p strong { color: var(--cyan-soft); font-weight: 800; }
.card a { color: var(--cyan); font-weight: 800; }

/* A card holding one portrait phone and nothing else. At full width a 340px
   video in a 1034px card is 33% ink and 67% empty purple, so the card comes in
   to meet the content instead. */
.card--slim { max-width: 640px; margin-inline: auto; }

/* Highlight card (privacy TL;DR) */
.card--hi {
  border-color: var(--gold);
  box-shadow: var(--inset-hi), 0 5px 0 var(--gold-deep), var(--shadow-drop);
}
.card--hi h2.section-title { color: var(--gold); }
.card--hi p { color: var(--cyan-soft); font-size: 16px; }

/* --------------------------------------------------------------------------
   9. The hook — photo in, alien out. This is the whole product in one row.
   -------------------------------------------------------------------------- */
.hook {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(10px, 3vw, 22px);
  max-width: 470px; margin: 24px auto 0;
}
.hook figure { margin: 0; }
.hook img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border: var(--stroke) solid var(--ink); border-radius: 22px;
  box-shadow: 0 5px 0 var(--ink), var(--shadow-drop);
  background: var(--deep);
}
.hook figcaption {
  margin-top: 9px; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
}
.hook__arrow {
  font-size: clamp(24px, 5vw, 34px); color: var(--gold); line-height: 1;
  align-self: center; margin-bottom: 26px;
  text-shadow: 0 3px 0 var(--ink);
}

/* The ink phone frame — a real device edge round a real screenshot. */
.phone-frame {
  margin: 24px auto 0; max-width: 300px;
  border: var(--stroke) solid var(--ink); border-radius: 26px; overflow: hidden;
  box-shadow: 0 6px 0 var(--ink), 0 18px 40px rgba(10, 5, 30, .6);
  background: var(--deep); line-height: 0;
}
.phone-frame img, .phone-frame video { width: 100%; height: auto; display: block; }
.figcap {
  color: var(--muted); font-size: 13.5px; margin: 12px auto 0; max-width: 44ch;
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Trailer
   -------------------------------------------------------------------------- */
.video-shell {
  margin: 22px auto 0; max-width: 340px;
  border: var(--stroke) solid var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 6px 0 var(--ink), 0 18px 40px rgba(10, 5, 30, .6); background: #000;
}
.video-shell video { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   11. Split cards.
   The old version paired a 506x1100 screenshot with three lines of copy and
   let both sit in a 1fr column: 348px of vertical and 234px of horizontal dead
   space. Now the picture column is sized, and the frame STRETCHES to whatever
   height the copy needs while the image crops from the top inside it. Vertical
   dead space is structurally impossible.
   -------------------------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
  gap: 30px; align-items: stretch;
}
.split--flip { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); }
.split__shot {
  /* The image is taken OUT of flow. If it stayed in flow its intrinsic height
     (a 506x1100 shot is 630px tall at this column width) would set the row
     height, and the copy beside it would float in the middle of the leftover
     space — which is exactly the 348px of dead air this layout used to have.
     Out of flow, the row height comes from the copy and the picture fills it. */
  position: relative; align-self: stretch; min-height: 380px; overflow: hidden;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--ink), var(--shadow-drop);
  background: var(--deep); line-height: 0;
}
.split__shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
/* For shots whose interesting content is at the top of the screen. */
.split__shot--top img { object-position: top center; }
/* Biased slightly above centre, to keep a character's head inside the crop. */
.split__shot--upper img { object-position: center 38%; }
.split__body { align-self: center; }

/* --------------------------------------------------------------------------
   12. Screenshot rail. Six curated shots, keyboard reachable, with a visible
   edge fade and a written affordance so nobody has to guess it scrolls.
   -------------------------------------------------------------------------- */
.rail-wrap { position: relative; margin-top: 20px; }
.rail-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 16px; width: 56px;
  pointer-events: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(90deg, transparent, var(--panel-b));
}
.rail {
  display: flex; align-items: flex-start; gap: 16px; overflow-x: auto;
  padding: 6px 2px 16px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.rail img {
  flex: 0 0 auto; width: 218px; height: auto; border-radius: 18px;
  border: var(--stroke) solid var(--ink);
  box-shadow: 0 5px 0 var(--ink), var(--shadow-drop); scroll-snap-align: center;
}
.rail::-webkit-scrollbar { height: 9px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 8px; }
.rail::-webkit-scrollbar-track { background: rgba(0, 0, 0, .18); border-radius: 8px; }
/* Deliberately not a flex row: as flex items "Six shots" became a shrinkable
   box and broke onto two lines on a narrow screen. */
.rail-hint { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.rail-hint b { color: var(--cyan-soft); font-weight: 800; white-space: nowrap; }

/* --------------------------------------------------------------------------
   13. Ship grid. Flex, not grid: 11 tiles into rows of 4 leaves a trailing row
   of 3, and flex centres that row. CSS grid would left-align the orphans.
   -------------------------------------------------------------------------- */
.ships {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-top: 22px;
}
.ship {
  flex: 0 1 calc(25% - 10.5px);
  background: var(--well); border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm); padding: 12px 8px 10px; text-align: center;
  box-shadow: 0 3px 0 var(--ink);
}
.ship img { width: 100%; max-width: 124px; height: auto; display: block; margin: 0 auto 6px; }
.ship span { font-size: 12.5px; color: var(--cyan-soft); font-weight: 800; letter-spacing: .3px; }

/* --------------------------------------------------------------------------
   14. Boss grid — 12 tiles at 6 / 4 / 3 across. Every one of those divides 12
   exactly, so the grid can never orphan a tile at any breakpoint.
   -------------------------------------------------------------------------- */
.bosses {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px; margin-top: 22px;
}
.boss { text-align: center; }
.boss img {
  width: 100%; max-width: 118px; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 4px 8px rgba(10, 5, 30, .5));
}
.boss span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 800; }

/* --------------------------------------------------------------------------
   15. Feature tiles
   -------------------------------------------------------------------------- */
.feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 20px;
}
.feats--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feat {
  background: var(--well); border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm); padding: 15px; box-shadow: 0 3px 0 var(--ink);
}
.feat b { display: block; color: var(--gold); font-size: 15px; margin-bottom: 3px; font-weight: 800; }
.feat p { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0; }

/* --------------------------------------------------------------------------
   16. FAQ / steps
   -------------------------------------------------------------------------- */
.faq h3 {
  margin: 18px 0 4px; display: flex; gap: 9px; align-items: baseline;
}
.faq h3:first-of-type { margin-top: 6px; }
.faq h3 .dot { color: var(--cyan); font-size: 15px; flex: 0 0 auto; }
.faq .a {
  color: var(--muted); font-size: 15.5px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .10); margin: 0;
}
.faq .a:last-child { border-bottom: none; }
.faq .a strong { color: var(--cyan-soft); font-weight: 800; }

.steps { counter-reset: step; list-style: none; margin: 16px 0 0; padding: 0; }
.steps > li {
  counter-increment: step; position: relative; padding: 0 0 18px 46px;
  color: var(--muted); font-size: 15.5px;
}
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(180deg, var(--btn-a), var(--btn-c));
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  color: #fff; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.steps > li:last-child { padding-bottom: 0; }
.steps h3 { margin-bottom: 2px; }
.steps strong { color: var(--cyan-soft); font-weight: 800; }

/* --------------------------------------------------------------------------
   17. Tick / cross lists
   -------------------------------------------------------------------------- */
.list { list-style: none; margin: 0 0 12px; padding: 0; }
.list li {
  color: var(--muted); font-size: 15.5px; margin: 8px 0; padding-left: 26px;
  position: relative;
}
.list li::before { content: '\25B8'; color: var(--cyan); position: absolute; left: 4px; top: 0; font-size: 14px; }
.list--no li::before { content: '\2715'; color: var(--gold-deep); }
.list--yes li::before { content: '\2713'; color: #7CE38B; }
.list li strong { color: var(--cyan-soft); font-weight: 800; }

/* --------------------------------------------------------------------------
   18. Press fact sheet
   -------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15.5px; }
.facts dt { color: var(--cyan-soft); font-weight: 800; white-space: nowrap; }
.facts dd { color: var(--muted); }
.bullets { margin: 6px 0 0 18px; color: var(--muted); font-size: 15.5px; }
.bullets li { margin-bottom: 3px; }
.sub { font-size: 13.5px; margin-top: 10px; color: var(--muted); }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 14px; }
.shots img {
  width: 100%; height: auto; border-radius: 12px; border: var(--stroke) solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}

/* --------------------------------------------------------------------------
   19. Misc blocks
   -------------------------------------------------------------------------- */
.page-head { text-align: center; padding: 6px 0 24px; }
.page-head .badge { font-size: 50px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(10, 5, 30, .6)); }
.page-head .intro { color: var(--cyan-soft); font-size: 16.5px; margin-top: 12px; max-width: 46ch; margin-inline: auto; }
.page-head .updated { color: var(--muted); font-size: 13px; margin-top: 10px; letter-spacing: .4px; }

.contact { text-align: center; }
.contact p { margin-bottom: 16px; }
.backlink { text-align: center; margin-top: 6px; }
.backlink a { color: var(--cyan-soft); font-size: 15px; text-decoration: none; font-weight: 800; }
.close { color: var(--cyan-soft); text-align: center; font-size: 16px; margin: 26px auto 0; max-width: 40ch; }

/* "Read next" — the in-body internal links, given a shape so they get used. */
.readon {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.readon a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--well); border: 2px solid var(--ink); border-radius: 12px;
  padding: 9px 15px; color: var(--cyan-soft); font-weight: 800; font-size: 14.5px;
  text-decoration: none; box-shadow: 0 3px 0 var(--ink);
}
.center .readon { justify-content: center; }
.readon a:hover { color: var(--gold); }
.readon a::after { content: '\2192'; color: var(--gold); }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
footer {
  text-align: center; color: var(--muted); font-size: 13px; margin-top: 44px;
  opacity: .92; padding-top: 8px;
}
footer a { color: var(--cyan); }
.footlinks { margin-bottom: 8px; font-size: 15px; }
.footlinks a { margin: 0 8px; font-weight: 800; display: inline-block; }

/* --------------------------------------------------------------------------
   21. Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bosses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ship { flex: 0 1 calc(33.333% - 9.34px); }
}

@media (max-width: 720px) {
  .split, .split--flip { grid-template-columns: 1fr; gap: 20px; }
  /* Stacked, the frame has no copy to take its height from, so it states one. */
  .split__shot { min-height: 0; aspect-ratio: 4 / 5; }
  section { margin: 32px 0; }
  .card { padding: 20px; }
  .feats--two { grid-template-columns: 1fr; }
  .nav { padding-bottom: 10px; }
  .nav__home { margin-right: 0; width: 100%; }
}

@media (max-width: 560px) {
  .bosses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ship { flex: 0 1 calc(50% - 7px); }
  .hook { max-width: 340px; gap: 8px; }
  .rail img { width: 190px; }
  body { padding: 16px 14px 40px; }
}