/* Passport Run marketing site — tokens sampled directly from the app icon
   (median-cut quantization of app-icon.png: a teal passport embossed with a
   gold globe, floating over stepping-stone map tiles above a deep ocean
   planet), not guessed. Same approach ../swornin/, ../quickvars/ and
   ../buythisagain/ use for their own palettes.
   Typography: Lilita One for headlines, the same display face the game
   itself uses, playful and deliberately unlike the other sites' Fraunces, SF
   Mono and Space Grotesk. Inter for body copy, consistent with the others. */

:root {
  --ink: #013454;
  --surface: #01425f;
  --surface-2: #136a87;
  --paper: #f6f1e4;
  --muted: #a8c4d4;
  --gold: #ddb980;
  --glow: #f6e9a8;
  --teal: #5ba3a0;
  --line: #165063;

  --font-display: 'Lilita One', 'Segoe UI', ui-sans-serif, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 720px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none; /* Lilita One ships one weight; no faux bold */
}

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

a {
  color: var(--paper);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
}

.nav-word {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--paper);
}

.nav-word img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.nav-word span {
  color: var(--gold);
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--paper);
}

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

.hero {
  padding-top: 48px;
  padding-bottom: 64px;
  text-align: center;
}

.hero-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  border-radius: 22px;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 18px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5.4vw, 50px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 auto 24px;
  max-width: 17ch;
}

.hero h1 .accent {
  color: var(--gold);
}

.hero-sub {
  color: var(--muted);
  font-size: 17px;
  max-width: 46ch;
  margin: 0 auto 32px;
}

.hero-sub strong {
  color: var(--paper);
  font-weight: 600;
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--gold);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--line);
}

.hint {
  color: var(--muted);
  font-size: 13px;
  margin-top: 18px;
}

/* ---------- Sections ---------- */

section.block {
  padding-top: 56px;
  padding-bottom: 56px;
  border-top: 1px solid var(--line);
}

.block-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
}

.steps {
  display: grid;
  gap: 20px;
}

.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}

.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
  padding-top: 2px;
}

.step h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.facts {
  display: grid;
  gap: 24px;
}

.fact {
  border-left: 2px solid var(--line);
  padding-left: 18px;
}

.fact h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-display);
}

.fact p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.mission {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 26ch;
  text-align: center;
  margin: 0 auto;
}

.mission .accent {
  color: var(--gold);
}

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

footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 48px;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  color: var(--paper);
}

.footer-word {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Legal / article pages ---------- */

.article {
  padding-top: 48px;
  padding-bottom: 64px;
}

.article h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.article .updated {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 40px;
}

.article h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 40px 0 12px;
}

.article p,
.article li {
  color: var(--paper);
  font-size: 15.5px;
  line-height: 1.7;
}

.article p {
  margin: 0 0 16px;
}

.article ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.article code {
  font-family: var(--font-display);
  font-size: 0.9em;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 5px;
}

.article a {
  color: var(--gold);
}

.article strong {
  color: var(--paper);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 32px;
}

.back-link:hover {
  color: var(--paper);
}

.faq-item {
  border-top: 1px solid var(--line);
  padding: 24px 0;
}

.faq-item:first-child {
  border-top: none;
  padding-top: 0;
}

.faq-item h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 560px) {
  .footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- /passport-run/tour ---------- */

.tour-row {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.tour-row:nth-child(even) {
  flex-direction: row-reverse;
}

.tour-copy {
  flex: 1;
  min-width: 0;
}

.tour-copy .block-label {
  color: var(--gold);
  margin-bottom: 14px;
}

.tour-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.tour-copy p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 40ch;
}

/* Real in-game screenshots, framed like a phone. */
.shot {
  width: 260px;
  flex-shrink: 0;
  margin: 0 auto;
  border: 8px solid #000;
  border-radius: 38px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, 0.35);
}

.shot img {
  width: 100%;
  height: auto;
}

.hero-shots {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 48px;
}

.hero-shots .shot {
  width: 200px;
  margin: 0;
}

@media (max-width: 720px) {
  .hero-shots .shot:nth-child(3) {
    display: none;
  }

  .hero-shots .shot {
    width: 44%;
  }
}

.tour-outro {
  text-align: center;
  padding: 64px 0 80px;
  border-top: 1px solid var(--line);
}

.tour-outro p {
  color: var(--muted);
  margin-bottom: 24px;
}

@media (max-width: 720px) {
  .tour-row,
  .tour-row:nth-child(even) {
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }

  .tour-copy p {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}