/* ==========================================================================
   Hometown FC — marketing site stylesheet
   Design tokens transcribed from the game repo (src/theme/themeTokens.ts +
   src/theme/tokens.ts, "daylight" theme). Do not import cross-repo — edit
   values here if the game theme changes.
   ========================================================================== */

/* ---- Fonts (self-hosted, OFL — see assets/fonts/OFL.txt) ---------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fraunces-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
  /* colour — game "daylight" theme */
  --canvas: #F4F4F6;
  --card: #FFFFFF;
  --text-high: #0A0A0F;
  --text-mid: #5C5C68;
  --text-low: #8A8A95;
  --accent: #00B252;
  --accent-hi: #008C40;
  --accent-soft: rgba(0, 178, 82, 0.10);
  --gold: #B98A1F;
  --amber: #FFB02E;
  --negative: #E73B3B;
  --info: #1976ED;
  --purple: #845A9F;
  --line: rgba(15, 18, 30, 0.08);
  --line-strong: rgba(15, 18, 30, 0.16);
  --card-border: rgba(15, 18, 30, 0.12);
  --plate: rgba(255, 255, 255, 0.94);
  --plate-hi: rgba(255, 255, 255, 0.97);
  --wash-top: rgba(244, 244, 246, 0.55);
  --wash-bottom: rgba(244, 244, 246, 0.92);

  /* type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px;
}

/* ---- Reset / base --------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-high);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent-hi); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0 0 var(--s4); }

.container {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ---- Editorial kit -------------------------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: var(--s3);
}

.eyebrow--muted { color: var(--text-low); }

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text-high);
}

.headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-high);
}

.lede {
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.65;
  color: var(--text-mid);
}

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(15, 18, 30, 0.04);
}

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 1px solid transparent;
}

.btn--accent { background: var(--accent); color: #FFFFFF; }
.btn--accent:hover { background: var(--accent-hi); color: #FFFFFF; }

.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-hi);
  white-space: nowrap;
}

/* ---- Masthead ------------------------------------------------------------- */

.masthead {
  background: var(--canvas);
  border-bottom: 1px solid var(--line-strong);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
  min-height: 54px; /* game chrome.masthead */
}

.masthead-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--text-high);
}

.masthead-brand img { width: 52px; height: 52px; }

.masthead-brand span {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s3), 3vw, var(--s8));
}

.masthead-nav a {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-mid);
  /* ≥44px touch target */
  padding-block: 14px;
  border-bottom: 2px solid transparent;
}

.masthead-nav a:hover,
.masthead-nav a[aria-current="page"] {
  color: var(--text-high);
  border-bottom-color: var(--accent);
}

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

.hero {
  background:
    linear-gradient(var(--wash-top), var(--wash-bottom)),
    url('/assets/img/hero-bg.webp') center / cover no-repeat;
  border-bottom: 1px solid var(--line-strong);
}

.hero-inner {
  display: grid;
  gap: var(--s12);
  padding-block: clamp(56px, 10vw, 104px);
  align-items: center;
}

.hero-copy { max-width: 560px; }

.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 22px);
  color: var(--accent-hi);
  margin: var(--s3) 0 var(--s4);
}

.hero-sub { margin-bottom: var(--s6); }

/* ---- Store badges ----------------------------------------------------------- */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

.badge-row img { width: auto; }

.badge-row a { display: inline-block; transition: opacity 0.15s ease; }
.badge-row a:hover { opacity: 0.85; }
.badge-row a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.badge-row .badge-apple { height: 54px; }
/* Google's PNG carries built-in padding; render taller so the visible
   badge matches Apple's, per Google's "equal or greater size" rule. */
.badge-row .badge-google { height: 80px; margin: -13px 0; }

.badge-note {
  font-size: 12px;
  color: var(--text-low);
  margin-top: var(--s2);
}

/* ---- Phone frame -------------------------------------------------------------- */

.phone {
  width: clamp(220px, 26vw, 290px);
  border: 10px solid #14141B;
  border-radius: 40px;
  background: #14141B;
  box-shadow: 0 24px 48px rgba(15, 18, 30, 0.28);
  overflow: hidden;
}

.phone > img,
.phone > video {
  width: 100%;
  aspect-ratio: 720 / 1600;
  object-fit: cover;
  border-radius: 30px;
}

.phone--center { margin-inline: auto; }

/* the trailer renders at 9:16 (1080x1920) — don't crop it to the
   screenshot frame's 720:1600 ratio */
.phone--video > video { aspect-ratio: 9 / 16; }

/* native fullscreen keeps the page CSS: object-fit: cover would blow a
   portrait video up until it "covers" a landscape screen, cropping most
   of it. Two separate rules — an unsupported pseudo-class in a selector
   list would invalidate the whole rule. */
.phone--video > video:fullscreen {
  object-fit: contain;
  border-radius: 0;
  background: #000;
}
.phone--video > video:-webkit-full-screen {
  object-fit: contain;
  border-radius: 0;
  background: #000;
}

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

.section { padding-block: clamp(56px, 9vw, 96px); }

.section-head { max-width: 640px; margin-bottom: clamp(var(--s8), 6vw, 64px); }

.section--tinted { background: #ECECEF; border-block: 1px solid var(--line); }

/* ---- Trailer ------------------------------------------------------------------ */

.trailer { text-align: center; }
.trailer .section-head { margin-inline: auto; }
/* large enough to actually read the trailer's text overlays AND for the
   browser to render the full control bar incl. the seek slider (Chrome
   collapses the scrubber on narrow video elements) */
.trailer .phone { width: min(440px, 92vw); }

/* ---- Pillars ------------------------------------------------------------------- */

.pillar {
  display: grid;
  gap: var(--s8);
  align-items: center;
  padding-block: clamp(var(--s8), 6vw, 64px);
}

.pillar + .pillar { border-top: 1px solid var(--line); }

.pillar-copy .headline { margin-bottom: var(--s4); }

.pillar-copy p { color: var(--text-mid); max-width: 52ch; }

.pillar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

.pillar-media { justify-self: center; }

.pillar-number {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-low);
  letter-spacing: 0.02em;
}

/* ---- Town progression strip ------------------------------------------------------ */

.town-strip {
  display: grid;
  /* minmax(0,1fr): plain 1fr tracks blow out to the images' intrinsic
     min-content width on narrow viewports */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s8);
}

.town-strip figure { margin: 0; }

.town-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
}

.town-strip figcaption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mid);
  text-align: center;
  margin-top: var(--s2);
}

/* ---- Vera (club secretary) -------------------------------------------------------- */

.vera-card {
  display: flex;
  align-items: center;
  gap: clamp(var(--s6), 5vw, 64px);
  padding: clamp(var(--s6), 4vw, var(--s8));
  margin-top: clamp(var(--s8), 6vw, 64px);
}

.vera-copy { flex: 1; }

.vera-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.6vw, 24px);
  letter-spacing: -0.01em;
  margin-bottom: var(--s1);
}

.vera-card p { color: var(--text-mid); font-size: 14.5px; margin: 0; max-width: 56ch; }

.vera-phone { width: clamp(180px, 20vw, 230px); flex-shrink: 0; }

/* ---- Gallery (more screens) --------------------------------------------------------- */

.gallery-head { margin-top: clamp(var(--s8), 6vw, 64px); text-align: center; }
.gallery-head .eyebrow { margin-bottom: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6) var(--s4);
  margin-top: var(--s6);
}

.gallery figure { margin: 0; min-width: 0; }

.gallery .phone {
  display: block;
  width: 100%;
  border-width: 8px;
  border-radius: 32px;
  box-shadow: 0 12px 24px rgba(15, 18, 30, 0.18);
}

.gallery .phone > img { border-radius: 24px; }

.gallery figcaption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-mid);
  text-align: center;
  margin-top: var(--s3);
}

/* ---- Closing CTA -------------------------------------------------------------------- */

.cta-final {
  text-align: center;
  border-top: 1px solid var(--line);
}

.cta-final .badge-row { justify-content: center; margin-top: var(--s6); }

/* ---- Fair play ---------------------------------------------------------------------- */

.fairplay-card {
  padding: clamp(var(--s6), 5vw, var(--s12));
  border-left: 3px solid var(--accent);
}

.fairplay-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-high);
  margin: 0 0 var(--s6);
}

.fairplay-grid {
  display: grid;
  gap: var(--s4) var(--s8);
}

.fairplay-grid h3 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--s1);
}

.fairplay-grid p { font-size: 14px; color: var(--text-mid); margin: 0; }

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

.footer {
  border-top: 1px solid var(--line-strong);
  background: var(--canvas);
  padding-block: var(--s12);
  font-size: 13px;
  color: var(--text-mid);
}

.footer-grid {
  display: grid;
  gap: var(--s6);
}

.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); }

.footer-nav a {
  display: inline-block;
  color: var(--text-mid);
  text-decoration: none;
  font-weight: 600;
  /* ≥44px touch target */
  padding-block: 12px;
}
.footer-nav a:hover { color: var(--text-high); text-decoration: underline; }

.footer-legal { font-size: 12px; color: var(--text-low); }
.footer-legal p { margin-bottom: var(--s2); }

/* ---- Press page ----------------------------------------------------------------------------- */

.page-head { padding-block: clamp(var(--s12), 8vw, 80px) clamp(var(--s8), 5vw, 56px); }

.factsheet {
  padding: clamp(var(--s6), 4vw, var(--s8));
  margin-bottom: var(--s12);
}

.factsheet dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s3) var(--s8);
  margin: 0;
}

.factsheet dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-low);
  align-self: baseline;
  padding-top: 3px;
}

.factsheet dd { margin: 0; font-size: 15px; }

.press-section { margin-bottom: var(--s12); }

.press-section > .headline { margin-bottom: var(--s6); }

.download-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.download-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-high);
}

a.download-card:hover {
  border-color: var(--accent);
  color: var(--text-high);
  background: rgba(0, 178, 82, 0.04);
}

.download-thumb {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: var(--s4);
}

.download-thumb img { max-height: 100%; width: auto; max-width: 100%; }

.download-thumb--shot { height: 260px; padding: 0; }
.download-thumb--shot img { height: 100%; max-height: none; object-fit: cover; width: 100%; }

.download-meta { padding: var(--s3) var(--s4); }

.download-meta strong { display: block; font-size: 14px; font-weight: 600; }

.download-meta span { font-size: 12px; color: var(--text-low); }

/* ---- Prose (privacy / long-form) --------------------------------------------------------------- */

.prose { max-width: 720px; }

.prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: var(--s12) 0 var(--s3);
}

.prose h2:first-of-type { margin-top: var(--s8); }

.prose p, .prose li { color: var(--text-mid); font-size: 15.5px; }

.prose strong { color: var(--text-high); }

.prose ul { padding-left: 22px; margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }

.prose .meta { font-size: 13px; color: var(--text-low); }

.notice {
  padding: var(--s4) var(--s6);
  border-left: 3px solid var(--amber);
  background: rgba(255, 176, 46, 0.12);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--text-mid);
}

/* ---- Breakpoints ---------------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .fairplay-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
}

@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1fr auto; }
  .pillar { grid-template-columns: 1fr auto; gap: clamp(var(--s8), 8vw, 96px); }
  .pillar:nth-of-type(even) .pillar-media { order: -1; }
  .fairplay-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
}

@media (max-width: 639px) {
  /* all five growth stages stay visible — the village→metropolis payoff
     is the point of the strip */
  .town-strip { gap: var(--s2); }
  .town-strip figcaption { font-size: 10px; letter-spacing: 0.5px; }
  /* brand + 3 nav links must fit 360px without the nowrap texts colliding */
  .masthead-brand { gap: 10px; }
  .masthead-brand img { width: 38px; height: 38px; }
  .masthead-brand span { font-size: 17px; }
  .masthead-nav { gap: var(--s3); }
  .masthead-nav a { font-size: 12px; letter-spacing: 0.3px; }
  .vera-card { flex-direction: column; text-align: center; }
  .vera-phone { width: min(220px, 70vw); }
}

@media (max-width: 379px) {
  .masthead-inner { gap: var(--s2); }
  .masthead-brand { gap: 8px; }
  .masthead-brand span { font-size: 15px; }
  .masthead-nav { gap: 10px; }
  .masthead-nav a { font-size: 11px; letter-spacing: 0.2px; }
}

/* sub-350px relics: the in-page Features anchor is the expendable link */
@media (max-width: 349px) {
  .masthead-nav a[href$="#features"] { display: none; }
}

@media (max-width: 959px) {
  .hero-phone { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}