/* GAFF · the promo page.
   Ported from Broadsheet "GAFF Promo Page.dc".

   This replaces the Gazette landing page. That one sold the app as an edition
   of the paper, which matched the You page and GAFF Town but not the thing a
   stranger meets first: three coloured game cards and a host. This one leads
   with the host on a stage and shows the games as pictures rather than as
   screenshots, so nothing on the page goes stale when a screen changes.

   The design sheet is written with inline styles, as they all are. They live
   here instead so the markup stays readable and the page can be responsive
   with real media queries rather than flex-basis alone. */

:root {
  --ink: #171310;
  --paper: #FBF8F0;
  --surface: #F4EDDF;
  --blue: #93B4E8;
  --gold: #F2C93B;
  --pink: #E88AA8;
  --ink-55: rgba(23, 19, 16, 0.55);
  --ink-65: rgba(23, 19, 16, 0.65);
  --ink-75: rgba(23, 19, 16, 0.75);
  --ink-80: rgba(23, 19, 16, 0.8);
  --hair: rgba(23, 19, 16, 0.14);
  --display: "Archivo Black", "Arial Black", sans-serif;
  --mono: ui-monospace, "SF Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
/* Without this iOS inflates body copy on rotation and the page renders at a
   different scale from the desktop it was designed on. Every surface here
   needs it; it has caught us out more than once. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { min-height: 100%; background: var(--surface); }
body {
  margin: 0; color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
svg { display: block; }

.wrap { max-width: 1060px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---- the bar ---- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; }
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__word { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; }
.nav__cta {
  background: var(--ink); color: var(--paper); border-radius: 999px;
  padding: 12px 22px 13px; font-family: var(--display); font-size: 14px;
}

/* ---- the splash ---- */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-top: 44px; padding-bottom: 20px; }
.hero__copy { flex: 1 1 380px; min-width: 0; }
.hero__stage { flex: 1 1 420px; min-width: 0; margin: 0 auto; max-width: 560px; }
/* The sheet carries the caps in the strings. They live in CSS so the markup
   stays readable and screen readers are not handed shouted words. */
.kick {
  margin: 0 0 10px; font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-65);
}
.hero__h {
  margin: 0 0 16px; font-family: var(--display); font-size: clamp(44px, 7vw, 72px);
  line-height: 0.96; letter-spacing: -0.03em; text-wrap: balance;
}
.hero__sub {
  margin: 0 0 24px; font-size: 19px; font-weight: 600; line-height: 1.45;
  max-width: 440px; text-wrap: pretty;
}
.hero__row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
/* Not uppercased, unlike its siblings: the sheet sets "iOS" in mixed case and
   text-transform would render it IOS. */
.hero__meta {
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; color: var(--ink-65);
}

/* The App Store badge. PLACEHOLDER: Apple require their own artwork, supplied
   unmodified, and forbid recreating the badge or setting the wordmark in
   another face. This has the right shape so the layout is honest; swap the
   whole anchor for their SVG and set the href before launch.
   developer.apple.com/app-store/marketing/guidelines/ */
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper); border-radius: 14px; padding: 14px 22px 15px;
}
.badge--lg { padding: 15px 26px 16px; }
.badge__t { text-align: left; }
.badge__k {
  display: block; font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; color: rgba(251, 248, 240, 0.7);
}
.badge__n { display: block; font-family: var(--display); font-size: 17px; }
.badge--lg .badge__n { font-size: 18px; }

/* ---- sections ---- */
.sec { padding-top: 36px; padding-bottom: 8px; }
.sec--gap { padding-top: 44px; }
.sec__h {
  margin: 0 0 22px; font-family: var(--display); font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
}
.sec__h--sm { margin-bottom: 4px; }

/* ---- the three games ---- */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.game { border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.game--blue { background: var(--blue); }
.game--gold { background: var(--gold); }
.game--pink { background: var(--pink); }
.game__art {
  position: relative; height: 240px; border-radius: 16px; overflow: hidden;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
}
.game__art svg { width: 100%; height: 100%; }
.game__head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.game__name { margin: 0; font-family: var(--display); font-size: 24px; letter-spacing: -0.01em; }
.game__body { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink-80); text-wrap: pretty; }

/* ---- the host, quoted ---- */
.meet {
  background: var(--ink); border-radius: 26px; padding: 30px 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 26px;
}
.meet__face { flex-shrink: 0; }
.meet__body { flex: 1 1 300px; min-width: 0; }
.meet__kick {
  margin: 0 0 6px; font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(251, 248, 240, 0.6);
}
.meet__quote {
  margin: 0; color: var(--paper); font-family: var(--display);
  font-size: clamp(20px, 3vw, 28px); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance;
}

/* ---- what is in the walls ---- */
.surprises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.surprise { background: var(--paper); border: 1px solid var(--hair); border-radius: 18px; padding: 18px 17px 16px; }
.surprise__art {
  height: 96px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-radius: 12px; margin-bottom: 13px;
}
.surprise__name { margin: 0 0 5px; font-family: var(--display); font-size: 17px; letter-spacing: -0.01em; }
.surprise__body { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink-75); text-wrap: pretty; }

/* ---- the sign off ---- */
.end { padding-top: 48px; padding-bottom: 56px; text-align: center; }
.end__h { margin: 0 0 8px; font-family: var(--display); font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.02em; text-wrap: balance; }
.end__sub { margin: 0 0 20px; font-size: 17px; font-weight: 600; color: var(--ink-75); }
.foot {
  margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 6px 18px;
}
.foot span, .foot a {
  font-family: var(--mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55);
}
.foot a { border-bottom: 1px solid rgba(23, 19, 16, 0.25); padding-bottom: 1px; }
.foot a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .bob { animation: gaffBob 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes gaffBob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }