/* =====================================================================
   FLYTE RUN CLUB — STYLES
   Mobile-first. Brand colors live in the :root block below.
   ===================================================================== */

:root {
  --accent: #ff4a14;            /* bold accent (signal orange) */
  --accent-dark: #d63a09;
  --accent-soft: #ffe7dd;
  --ink: #141414;               /* text, borders, dark blocks */
  --ink-soft: #55554f;
  --ink-faint: #8b8b84;
  --bg: #f2f1ed;                /* light concrete */
  --bg-tint: #e3e2dc;           /* concrete */
  --card: #ffffff;
  --line: #cfcec7;              /* hairlines */
  --grain: url("../images/grain.png");
  --radius: 2px;                /* clean corners */
  --block: 6px 6px 0 var(--ink);/* solid offset shadow for photos */
  --font-head: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --nav-h: 64px;
  --gutter: 20px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Deliberately NOT scroll-behavior: smooth — that also animates space bar and
     arrow-key scrolling, which feels sluggish. Nav links are eased in main.js. */
  scroll-padding-top: calc(var(--nav-h) + 12px);        /* so the fixed nav never covers a heading */
}

body {
  margin: 0;
  padding-top: var(--nav-h);   /* clears the fixed nav */
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* clip (not hidden) so the page never becomes a nested scroll container */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Concrete grain — a single fixed layer the GPU composites once, so it costs
   nothing while scrolling. Sits above everything and ignores clicks. */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: var(--grain) repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 9998;
}

html.no-grain body::after { display: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1; letter-spacing: -0.03em; margin: 0 0 0.5em; }
h2 { font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 900; margin-bottom: 0.7em; text-wrap: balance; }
h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.3em; }

.container { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.container--narrow { max-width: 780px; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head);
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.2em;
}
.eyebrow__num { color: var(--accent); }
.eyebrow::after { content: ""; flex: 0 0 40px; height: 2px; background: var(--ink); }
.lead { font-size: 1.2rem; line-height: 1.5; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 8px; top: -60px;
  background: var(--ink); color: #fff; padding: 10px 14px;
  z-index: 100; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* Sections get focus moved to them when a nav link is used (so keyboard users
   actually land there). They shouldn't show a focus ring for it. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid var(--accent);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.2,.7,.2,1), background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 -2px rgba(20,20,20,0.25); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn--large { padding: 18px 30px; font-size: 1.05rem; }
.btn--small { padding: 10px 18px; font-size: 0.85rem; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Fixed nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.nav.is-scrolled { border-bottom-color: var(--ink); }
.nav__inner {
  width: min(100% - 2 * var(--gutter), 1120px);
  margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: 16px;
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 900; font-size: 1.05rem; letter-spacing: -0.02em;
  text-decoration: none; margin-right: auto;
}
.nav__mark { width: 36px; height: auto; }
.nav__links { display: none; gap: 28px; font-weight: 500; font-size: 0.95rem; }
.nav__links a { text-decoration: none; color: var(--ink-soft); padding: 4px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.nav__cta { display: none; }
.nav__toggle {
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-content: center; gap: 6px;
}
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform 0.25s; }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Mobile dropdown (scoped so it can never leak into the desktop nav) */
@media (max-width: 799px) {
  .nav__links.is-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    background: var(--bg); border-bottom: 1px solid var(--ink);
    padding: 4px var(--gutter) 8px;
  }
  .nav__links.is-open a { padding: 15px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__links.is-open a:last-child { border-bottom: 0; }
}
@media (min-width: 800px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* ---------- Page + flowing route line ---------- */
.page { position: relative; isolation: isolate; }

.route {
  position: absolute; top: 0; left: 0;
  width: 100%;              /* height is set from JS to just the stretch it covers */
  z-index: 1;                 /* above section backgrounds, below content cards */
  pointer-events: none;
  overflow: visible;
}
#route-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route-runner {
  position: absolute; top: 0; left: 0;
  z-index: 1;                       /* same layer as the line: behind the content */
  box-sizing: border-box;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;          /* so the transform positions its centre */
  background: var(--bg);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  opacity: 0;
  pointer-events: none;
  /* Deliberately NOT promoted with will-change / translate3d: a composited
     layer jumps in front of the page content regardless of z-index, and the
     badge has to pass BEHIND the text and photos. It is only a 38px box, so
     repainting it each frame costs nothing. */
}
.route-runner img { width: 24px; height: auto; }
@media (min-width: 800px) { #route-path { stroke-width: 4; } }

/* Content sits above the line. Cards are opaque so the line runs "behind" them. */
.section { position: relative; padding: 76px 0; }
.section > .container, .hero__inner { position: relative; z-index: 2; }
.section--tint { background: var(--bg-tint); }
@media (min-width: 800px) { .section { padding: 120px 0; } }

/* ---------- Dividers (kept low and quiet) ---------- */
.wave { position: relative; line-height: 0; margin-bottom: -1px; }
.wave svg { width: 100%; height: 28px; }
.wave--to-tint svg path { fill: var(--bg-tint); }
.wave--to-white svg path { fill: var(--bg); }
.wave--to-tint { background: var(--bg); }
.wave--to-white { background: var(--bg-tint); }
@media (min-width: 800px) { .wave svg { height: 56px; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: center;
  padding: 48px 0 110px;
  overflow: hidden;
}
.hero__watermark {
  position: absolute; right: -18%; top: 6%;
  width: 78vw; max-width: 760px;
  opacity: 0.055;
  pointer-events: none;
}
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.hero__kicker {
  font-family: var(--font-head); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 20px; padding-left: 52px; position: relative;
}
.hero__kicker::before { content: ""; position: absolute; left: 0; top: 50%; width: 40px; height: 2px; background: var(--accent); }
.hero__title {
  font-size: clamp(4rem, 19vw, 10rem);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.05em;
  margin: 0 0 26px;
}
.hero__tag { font-size: 1.15rem; color: var(--ink-soft); max-width: 32ch; margin: 0 0 30px; }
.hero__row { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero__when { margin: 0; font-size: 1rem; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.hero__when strong { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
.hero__when span { color: var(--ink-soft); }
@media (min-width: 800px) {
  .hero { padding: 40px 0 150px; }
  .hero__watermark { right: -6%; top: 4%; width: 52vw; max-width: 820px; }
  .hero__tag { font-size: 1.35rem; }
  .hero__row { flex-direction: row; align-items: center; gap: 36px; }
  .hero__when { padding-right: 36px; border-right: 2px solid var(--ink); }
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: 40px; }
.grid--align-center { align-items: center; }
.grid--align-start { align-items: start; }
@media (min-width: 800px) { .grid--2 { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* ---------- Photos ---------- */
.photo {
  margin: 0;
  position: relative;
  border: 1px solid var(--ink);
  box-shadow: var(--block);
  background: var(--bg-tint);
  overflow: hidden;
}
.photo img { width: 100%; aspect-ratio: 3 / 2.05; object-fit: cover; }
.parallax { contain: paint; }
.parallax picture { display: block; backface-visibility: hidden; }
.photo figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink); color: #fff;
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 14px;
}
@media (min-width: 800px) {
  .photo--offset-right { transform: translate(14px, 26px); }
  .photo--offset-left  { transform: translate(-14px, 26px); }
}
@media (max-width: 799px) {
  #who .photo { order: 2; }         /* text first on phones */
  #expect .photo { order: -1; margin-bottom: 8px; }
}

/* ---------- Where to find us ---------- */
.details { background: var(--card); border: 1px solid var(--ink); padding: 8px 24px 22px; }
.details__list { margin: 0; }
.details__list > div { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.details__list dt { font-family: var(--font-head); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.details__list dd { margin: 0; }
.details__note { margin: 16px 0 0; color: var(--ink-soft); font-size: 0.95rem; }

.callout {
  margin-top: 48px;
  background: var(--accent);
  color: var(--ink);
  padding: 34px 26px;
  display: grid; gap: 28px;
  border: 1px solid var(--ink);
  box-shadow: var(--block);
}
.callout__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 14px;
}
.callout__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--ink); }
.callout__title { font-size: clamp(1.9rem, 6vw, 2.7rem); font-weight: 900; letter-spacing: -0.03em; margin: 0 0 12px; }
.callout__text { margin: 0; max-width: 44ch; color: rgba(20, 20, 20, 0.85); }
.callout__action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--card); border: 1px solid var(--ink);
  padding: 22px 22px 24px;
}
.callout__glyph { width: 40px; height: 40px; background: var(--ink); color: #fff; display: grid; place-items: center; margin-bottom: 4px; }
.callout__handle {
  font-family: var(--font-head); font-weight: 900; font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink); text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}
.callout__handle:hover { color: var(--accent); }
.callout__note { margin: 0 0 6px; font-size: 0.9rem; color: var(--ink-soft); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ink:hover { background: #fff; border-color: #fff; color: var(--ink); box-shadow: none; }
@media (min-width: 800px) {
  .callout { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 48px; padding: 44px 48px; margin-top: 72px; }
  .callout__action { padding: 26px 28px 28px; }
}

.map { position: relative; margin-top: 44px; background: var(--card); border: 1px solid var(--ink); padding: 10px; }
.map__pin {
  position: absolute; top: -18px; left: -14px; z-index: 3;
  width: 46px; height: 46px;
  background: var(--accent); color: #fff; border: 2px solid var(--ink);
  display: grid; place-items: center;
}
.map__frame { background: var(--bg-tint); }
.map__frame iframe { width: 100%; height: 300px; border: 0; display: block; }
.map__actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 2px 2px; }
.map__actions .btn { flex: 1 1 auto; }
.map__hint { margin: 8px 2px 2px; font-size: 0.85rem; color: var(--ink-soft); }
@media (min-width: 800px) {
  .map { margin-top: 64px; padding: 14px; }
  .map__frame iframe { height: 440px; }
  .map__actions .btn { flex: 0 0 auto; }
}

/* ---------- Who it's for ---------- */
.tags { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  border: 1px solid var(--ink); background: var(--card);
  font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
  padding: 8px 12px;
}

/* ---------- What to expect ---------- */
.steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps__num {
  width: 44px; height: 44px;
  background: var(--ink); color: #fff;
  font-family: var(--font-head); font-weight: 900; font-size: 1.05rem;
  display: grid; place-items: center;
}
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery__item {
  padding: 0; border: 0; background: var(--bg-tint); cursor: zoom-in;
  overflow: hidden; aspect-ratio: 1 / 1; position: relative;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gallery__item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.gallery__more { margin-top: 24px; color: var(--ink-soft); }
.gallery__more a { color: var(--ink); font-weight: 600; }
@media (min-width: 800px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .gallery__item--wide { grid-column: span 2; aspect-ratio: auto; }
  .gallery__item--wide img { object-position: 50% 62%; }
}

/* Lightbox */
.lightbox {
  border: 0; padding: 0; margin: 0;
  position: fixed; inset: 0;
  width: 100vw; max-width: 100vw;
  height: 100vh; max-height: 100vh;          /* fallback */
  height: 100dvh; max-height: 100dvh;        /* tracks mobile browser chrome */
  background: rgba(14, 14, 14, 0.95);
  display: none; place-items: center;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: transparent; }
.lightbox img {
  max-width: min(96vw, 1200px);
  max-height: 86vh;
  max-height: 86dvh;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.15);
}
.lightbox__close, .lightbox__nav {
  position: fixed; border: 0; background: rgba(255,255,255,0.12); color: #fff;
  width: 46px; height: 46px; font-size: 30px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--accent); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #fff; padding: 64px 0 40px; border-top: 6px solid var(--accent); }
.footer__inner { display: grid; gap: 28px; }
.footer__mark { width: 120px; }
.footer__name { font-family: var(--font-head); font-weight: 900; font-size: 1.8rem; letter-spacing: -0.03em; margin: 0 0 4px; }
.footer__meta { margin: 0 0 20px; color: rgba(255,255,255,0.7); }
.footer__links { display: flex; flex-direction: column; gap: 10px; font-weight: 500; }
.footer__links a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); width: fit-content; }
.footer__links a:hover { border-bottom-color: var(--accent); }
.footer__fine { margin: 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); font-size: 0.85rem; }
@media (min-width: 800px) {
  .footer__inner { grid-template-columns: auto 1fr; align-items: center; gap: 48px; }
  .footer__mark { width: 200px; }
  .footer__links { flex-direction: row; gap: 28px; }
  .footer__fine { grid-column: 1 / -1; }
}

/* ---------- Scroll reveal ----------
   Elements start hidden ONLY when JS + motion are enabled (html.anim).
   Without JS, or with reduced motion on, everything is simply visible. */
html.anim .reveal { opacity: 0; }
html.anim .gallery__item { opacity: 0; }
html.anim .map__pin { transform: scale(0); }
html.anim #route-path { visibility: hidden; }   /* revealed by JS once measured */

/* ---------- Phone tap targets ----------
   Small text links are hard to hit with a thumb. These invisible pseudo-
   elements grow the tappable area without moving anything on screen. */
@media (max-width: 799px) {
  .nav__brand,
  .callout__handle,
  .gallery__more a,
  .footer__links a { position: relative; }

  .nav__brand::after,
  .callout__handle::after,
  .gallery__more a::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Footer links stack 10px apart — keep their areas from overlapping */
  .footer__links a::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 50%;
    height: 38px;
    transform: translateY(-50%);
  }
}

/* ---------- Phone: let the route fade out under the text ----------
   The route line and badge already pass behind the page content, but plain
   paragraphs have nothing solid behind them, so the line shows through the
   gaps between the letters and competes with the words.

   These scrims are simply the section's own background colour with a soft
   spread around each text block — invisible against the page, but the line
   dissolves into them as it slides underneath. */
@media (max-width: 799px) {
  #who .container > div:last-child,
  #gallery .eyebrow,
  #gallery h2,
  #gallery .gallery__more {
    background-color: var(--bg);
    box-shadow: 0 0 22px 14px var(--bg);
  }

  #expect .eyebrow,
  #expect h2 {
    background-color: var(--bg-tint);
    box-shadow: 0 0 22px 14px var(--bg-tint);
  }

  /* Tighter on the steps so the hairline dividers between them survive */
  #expect .steps li > div {
    background-color: var(--bg-tint);
    box-shadow: 0 0 12px 5px var(--bg-tint);
  }
}

/* ---------- Footer: legal links ----------
   Deliberately quiet so they sit below the main footer content. */
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 10px;
}
.footer__legal a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer__legal a:hover { color: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(255, 255, 255, 0.4); }
.footer__legal a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 799px) {
  .footer__legal a::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 38px; transform: translateY(-50%);
  }
  .footer__legal a { position: relative; }
}