/* ---------------------------------------------------------------------------
   Adventure Quest — consumer acquisition site
   Tokens ported from the iOS app (AdventureQuest/AppStyle.swift: AQTheme,
   AQStyle.ColorToken, .Typography, .Space) so this page and the App Store
   screenshots read as the same product.
   Web primitives (page-max, tap target, focus ring, reduced motion, dvh,
   safe-area inset) ported from the Explore Campuses global.css. No code is
   shared between the two sites — these are copies, and they may diverge.
   --------------------------------------------------------------------------- */

:root {
  /* --- from AQStyle.ColorToken --- */
  --aq-ground:        #0E1116;   /* backgroundTop / Mid / Bottom */
  --aq-card:          #FFFFFF;   /* cardSurface */
  --aq-card-stroke:   rgb(0 0 0 / 6%);
  --aq-card-shadow:   rgb(0 0 0 / 8%);
  --aq-accent:        #2F80FF;   /* primaryAccent */

  /* --- from the App Store icon: deep teal brand tone --- */
  --aq-brand:         #155C51;
  --aq-brand-lift:    #217F6D;
  --aq-brand-deep:    #0D4B46;
  --aq-brand-pale:    #91B6A4;

  /* --- on-dark text, from AQTheme --- */
  --aq-on-dark:       #FFFFFF;
  --aq-on-dark-2:     rgb(255 255 255 / 88%);
  --aq-on-dark-3:     rgb(255 255 255 / 74%);
  --aq-on-dark-line:  rgb(255 255 255 / 12%);
  --aq-surface-raise: rgb(255 255 255 / 5%);

  /* --- on-card text --- */
  --aq-ink:           #1B1F23;
  --aq-ink-muted:     #5B6470;

  /* --- from AQStyle.Space --- */
  --s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 20px;
  --s-xl: 24px; --s-2xl: 32px; --s-3xl: 40px;

  /* --- radii / controls, from AQStyle --- */
  --r-card: 20px;
  --r-control: 14px;
  --btn-h: 52px;
  --tap: 44px;

  /* --- layout --- */
  --page-max: 34rem;      /* campus global.css */
  --wide-max: 62rem;
  --gutter: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The app is a single dark world. This is a deliberate commitment, not an
   omission: every colour below is painted explicitly. */
html, body { margin: 0; padding: 0; color-scheme: dark; }

body {
  background: var(--aq-ground);
  color: var(--aq-on-dark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px;                       /* AQStyle.Typography.body */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }

a { color: var(--aq-accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--aq-accent); outline-offset: 3px; border-radius: 6px; }

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

/* --- Layout ---------------------------------------------------------------- */

.page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.page-wide { width: 100%; max-width: var(--wide-max); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--s-md); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s-xl); }

section { padding-block: var(--s-3xl); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--aq-brand-pale); margin: 0;
}

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

.hero {
  padding-block: calc(var(--s-3xl) + env(safe-area-inset-top)) var(--s-3xl);
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(33 127 109 / 34%) 0%, rgb(14 17 22 / 0%) 62%),
    var(--aq-ground);
  border-bottom: 1px solid var(--aq-on-dark-line);
}
.hero .inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-lg); }

.mark { display: flex; align-items: center; gap: var(--s-sm); }
.mark img { width: 44px; height: 44px; border-radius: 10px; }
.mark span { font-size: 15px; font-weight: 600; color: var(--aq-on-dark-2); letter-spacing: -0.01em; }

h1 { font-size: clamp(32px, 8.5vw, 46px); font-weight: 700; }
.lede { font-size: clamp(17px, 4.4vw, 19px); color: var(--aq-on-dark-3); max-width: 30ch; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 14px var(--s-xl);
  background: var(--aq-accent); color: #FFFFFF;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.25; text-align: center; text-wrap: balance;
  border: none; border-radius: var(--r-control); text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.985); }
.btn-block { display: flex; width: 100%; }

.micro { font-size: 14px; font-weight: 500; color: var(--aq-on-dark-3); }

/* --- Proof cards ----------------------------------------------------------- */

.proof { display: grid; gap: var(--s-md); grid-template-columns: 1fr; }
.card {
  background: var(--aq-card); color: var(--aq-ink);
  border: 1px solid var(--aq-card-stroke); border-radius: var(--r-card);
  box-shadow: 0 6px 20px var(--aq-card-shadow);
  padding: var(--s-lg); display: flex; flex-direction: column; gap: var(--s-xs);
}
/* Proof screenshots. Portrait phone captures, no device frame — cropped to a
   landscape-ish window from the top so a 1:2 screenshot cannot make one card
   twice the height of its neighbours. */
.card > img {
  /* height:auto is required — the width/height HTML attributes become a
     presentational hint, and a non-auto height makes aspect-ratio a no-op. */
  width: 100%; height: auto;
  aspect-ratio: 5 / 4; object-fit: cover; object-position: center top;
  border-radius: 12px; border: 1px solid var(--aq-card-stroke);
  background: var(--aq-ground); margin-bottom: var(--s-xs);
}

/* Each screenshot on disk is the full, unedited app screen. Which part of it
   the card shows is chosen here, so the source files stay authentic. */
.card > img[data-frame="tiles"] { object-position: center 20%; }

/* Recap card. The window is deliberately short and anchored to the top so it
   ends above the personal content in this screenshot.
   Measured on shot-recap.webp (760 x 1569): the adventure title's descenders
   end at y=324, "July 11, 2026" begins at y=360, the location line at y=412,
   and the memory-collage photographs at y=468.
   The visible band is scale-invariant — 760 / (9/4) = 338px from the top — so
   at every card width it shows "Adventure Complete" and the adventure name,
   and never the date, the location, or any photograph. Do not widen this
   ratio without re-measuring; the privacy boundary depends on it. */
.card > img[data-frame="header"] {
  aspect-ratio: 9 / 4;
  object-position: center top;
}
.card h3 { font-size: 18px; font-weight: 600; color: var(--aq-ink); }
.card p { font-size: 16px; color: var(--aq-ink-muted); }

.h-sub { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.lede-tight { max-width: 44ch; }
.lede-wide { max-width: 52ch; }
.mark-link { text-decoration: none; color: inherit; }

/* --- Destination tiles ----------------------------------------------------- */

.tiles { display: grid; gap: var(--s-sm); grid-template-columns: repeat(2, 1fr); }
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-xs);
  min-height: 92px; padding: var(--s-md);
  background: var(--aq-surface-raise); border: 1px solid var(--aq-on-dark-line);
  border-radius: var(--r-control); text-decoration: none; color: var(--aq-on-dark);
  transition: background 140ms ease, border-color 140ms ease;
}
.tile:hover { background: rgb(33 127 109 / 22%); border-color: rgb(33 127 109 / 55%); }
.tile .n { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.tile .k { font-size: 13px; font-weight: 500; color: var(--aq-brand-pale); }

/* --- Adventure list (destination page) ------------------------------------- */

.adventures { display: grid; gap: var(--s-md); grid-template-columns: 1fr; }
.adv {
  border: 1px solid var(--aq-on-dark-line); border-radius: var(--r-card);
  overflow: hidden; background: var(--aq-surface-raise);
}
.adv img { width: 100%; height: 190px; object-fit: cover; }
.adv .body { padding: var(--s-md) var(--s-lg) var(--s-lg); display: flex; flex-direction: column; gap: 6px; }
.adv h3 { font-size: 18px; font-weight: 600; color: var(--aq-on-dark); }
.adv p { font-size: 15px; color: var(--aq-on-dark-3); }

.hero-shot { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--aq-on-dark-line); }
.hero-shot img { width: 100%; height: auto; }

/* --- Sticky install bar ---------------------------------------------------- */

#installbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: var(--s-sm) var(--gutter) calc(var(--s-sm) + env(safe-area-inset-bottom));
  background: rgb(14 17 22 / 92%);
  border-top: 1px solid var(--aq-on-dark-line);
  backdrop-filter: saturate(160%) blur(12px);
  transform: translateY(115%); transition: transform 220ms ease;
}
#installbar.show { transform: translateY(0); }
#installbar .page { display: flex; flex-direction: column; gap: 6px; padding-inline: 0; }
body { padding-bottom: 0; }

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

footer {
  border-top: 1px solid var(--aq-on-dark-line);
  /* Bottom padding clears the sticky install bar, which is fixed over the
     page. Reset on wide viewports, where the bar is not rendered. */
  padding-block: var(--s-2xl) calc(132px + env(safe-area-inset-bottom));
  font-size: 14px; color: var(--aq-on-dark-3);
}
footer .links { display: flex; flex-wrap: wrap; gap: var(--s-md); }
footer a { color: var(--aq-on-dark-3); }
.backlink { font-size: 15px; font-weight: 500; }

/* --- Wider viewports ------------------------------------------------------- */

@media (min-width: 46rem) {
  .page { max-width: var(--wide-max); }
  h1 { font-size: 54px; max-width: 16ch; }
  .lede { font-size: 20px; max-width: 46ch; }
  .proof { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .adventures { grid-template-columns: repeat(2, 1fr); }
  #installbar { display: none; }
  footer { padding-block: var(--s-2xl) var(--s-3xl); }
}