/* ==========================================================
   Tablets (641px .. 1199px). Loaded after mobile.css and only re-lays the phone design out
   for a wider screen: 2-3 column grids, side-by-side photo + text, content capped at 960px.
   "Nu" = N design pixels, build with tools/build-mobile-css.py
   ========================================================== */
:root {
  --u: clamp(1.3px, calc(100vw / 520), 1.45px);
  --gut: max(28px, calc((100vw - 960px) / 2)); /* side padding: full-bleed backgrounds, content never wider than 960px */
}
body { max-width: none; font-size: calc(var(--u) * 15); }

/* ---------- Header ---------- */
.header { top: calc(var(--u) * 20); }
.burger { right: max(12px, calc(var(--gut) - 16px)); top: 0; }
.nav { left: auto; right: max(16px, calc(var(--gut) - 16px)); width: calc(var(--u) * 320); top: calc(var(--u) * 54); }
.nav__link { font-size: calc(var(--u) * 19); }

/* ---------- Hero: the desktop composition on a 1792px stage, scaled to the content width with transform (--hz is set in <head>; CSS zoom was not reliable in older Safari) ---------- */
.hero { display: block; width: 1792px; max-width: none; height: 1086px; margin: 34px 0 calc((var(--hz, .45) - 1) * 1086px) var(--gut); transform: scale(var(--hz, .45)); transform-origin: 0 0; overflow: hidden; }
main { overflow-x: clip; } /* the unscaled 1792px layout box of the hero must not widen the page */
.hero__bg-rings { display: block; }
.hero .hero__rings { left: -64px; top: 0; width: 1920px; height: 1300px; }
.hero .hero__title { left: -1px; top: 120px; width: auto; margin: 0; font-size: 358px; line-height: 358px; letter-spacing: -0.031em; white-space: nowrap; }
.hero .hero__photo { left: 586px; top: 255px; right: auto; width: 580px; height: 831px; }
.hero .hero__photo.has-img { left: 594px; top: 262px; right: auto; width: 782px; height: 1197px; }
/* small parts are enlarged on the stage so they stay readable after scaling */
.hero .hero__brand { left: 2px; top: 487px; width: auto; margin: 0; font-size: 36px; line-height: 1; }
.hero .hero__quote { left: auto; right: 8px; top: 462px; width: auto; margin: 0; text-align: right; }
.hero .hero__quote p { font-size: 46px; line-height: 49px; letter-spacing: -0.005em; }
.hero .hero__quote cite { margin-top: 12px; font-size: 25px; line-height: 27px; }
.hero .tag-pill { height: 70px; padding: 0 28px 0 32px; border-radius: 35px; font-size: 31px; line-height: 1; white-space: nowrap; }
.hero .hero__pill { right: auto; max-width: none; }
.hero .hero__pill--1 { left: 930px; top: 700px; }
.hero .hero__pill--2 { left: 130px; top: 795px; max-width: none; }
.hero .hero__pill--3 { left: 520px; top: 935px; max-width: none; }
.hero .hero__links { display: flex; left: 1px; top: 645px; gap: 20px; }
.hero .link-pill { height: 70px; padding: 0 30px 0 28px; border-radius: 35px; font-size: 30px; gap: 14px; }
.hero .link-pill svg { width: 30px; height: 30px; }

/* ---------- Stats: 2 columns, photo across the top ---------- */
.stats { padding-left: var(--gut); padding-right: var(--gut); padding-top: calc(var(--u) * 30); padding-bottom: calc(var(--u) * 30); }
.stats__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; gap: calc(var(--u) * 16); }
.stats__photo { grid-column: 1 / -1; height: calc(var(--u) * 340); }
.stat--list { height: auto; }
.stat { height: calc(var(--u) * 170); min-width: 0; }
.stat__num, .stat__num--lg { font-size: calc(var(--u) * 44); }
.stat--list { height: auto; align-self: stretch; }

/* ---------- About: photo left, text right ---------- */
.about { flex-direction: row-reverse; align-items: center; gap: calc(var(--u) * 36); padding: calc(var(--u) * 30) var(--gut) calc(var(--u) * 14); }
.about__photo { flex: 0 0 46%; width: auto; height: calc(var(--u) * 470); }
.about__content { flex: 1; min-width: 0; padding: 0; }
.about__title { font-size: calc(var(--u) * 28); line-height: calc(var(--u) * 34); }
.about__text { font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 20); }
.btn { white-space: nowrap; font-size: calc(var(--u) * 15); padding: 0 calc(var(--u) * 20); }

/* ---------- Geography ---------- */
.geo { padding-left: var(--gut); padding-right: var(--gut); padding-top: calc(var(--u) * 40); padding-bottom: calc(var(--u) * 36); }
.geo__head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 32); }
.geo__title { flex: 0 0 auto; }
.geo__list { padding-top: calc(var(--u) * 10); max-width: 46%; font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 18); }
.geo__cards { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 30); }
.geo-card { height: calc(var(--u) * 190); }

/* ---------- Events ---------- */
.events { padding-left: var(--gut); padding-right: var(--gut); margin-top: calc(var(--u) * 56); }
.events__rings { width: calc(var(--u) * 90); }
.ev-grid, .events__head--prest + .ev-grid, .events__title-champ + .ev-grid { grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 14); row-gap: calc(var(--u) * 14); }
.events__head--oly + .ev-grid, .events__title-champ + .ev-grid { grid-template-columns: repeat(3, 1fr); }
.ev-card { min-height: calc(var(--u) * 84); padding: calc(var(--u) * 16) calc(var(--u) * 20); }
.ev-card h3 { font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 21); }
.ev-card p { font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 16); }
.events__head--prest { margin-top: calc(var(--u) * 44); }
.events__title-champ { margin-top: calc(var(--u) * 56); }
.chips { width: auto; margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
.chip { height: calc(var(--u) * 34); font-size: calc(var(--u) * 14); }

/* ---------- Sports: photo and text side by side, alternating ---------- */
.sports__head { padding-left: var(--gut); padding-right: var(--gut); }
.sport, .sport--right { flex-direction: row; align-items: flex-start; gap: calc(var(--u) * 36); padding-left: var(--gut); padding-right: var(--gut); margin-top: calc(var(--u) * 48) !important; }
.sport--right { flex-direction: row-reverse; }
.sport--lg .sport__photo, .sport--sm .sport__photo { flex: 0 0 44%; width: auto; height: calc(var(--u) * 300); }
.sport__body, .sport--left .sport__body, .sport--right .sport__body, .sport--sm.sport--left .sport__body, .sport--sm.sport--right .sport__body { flex: 1; min-width: 0; padding: 0; }
.sport__title, .sport--sm .sport__title { font-size: calc(var(--u) * 26); line-height: calc(var(--u) * 29); overflow-wrap: anywhere; }
.sport__text { font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 19); }
.sport__body, .sport--left .sport__body, .sport--right .sport__body { padding-top: calc(var(--u) * 6); }

/* ---------- Photo / video ---------- */
.media, .media--video { padding-left: var(--gut); padding-right: var(--gut); padding-top: calc(var(--u) * 52); padding-bottom: calc(var(--u) * 40); }
.media__grid { grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 14); }
.media__grid > .ph { height: auto; aspect-ratio: 4 / 3; }
.media--video .media__grid { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 14); }
.media--video .media__grid > .ph { height: auto; aspect-ratio: 16 / 10; }
.more-btn { height: calc(var(--u) * 38); font-size: calc(var(--u) * 15); padding: 0 calc(var(--u) * 22); }

/* ---------- Thanks ---------- */
.thanks { padding-left: var(--gut); padding-right: var(--gut); }
.thanks__title { font-size: calc(var(--u) * 26); line-height: calc(var(--u) * 30); }
.thanks__grid { grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 14); }

/* ---------- Press ---------- */
.press { padding-left: var(--gut); padding-right: var(--gut); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 36); align-items: start; }
.press-card + .press-card { margin-top: 0; }
.press-card__title { font-size: calc(var(--u) * 34); line-height: calc(var(--u) * 36); }
.press-tag { height: calc(var(--u) * 36); font-size: calc(var(--u) * 14); }

/* ---------- Contact: text left, form right ---------- */
.contact { flex-direction: row; align-items: flex-start; gap: calc(var(--u) * 36); padding-left: var(--gut); padding-right: var(--gut); padding-top: calc(var(--u) * 46); }
.contact__info { flex: 1; min-width: 0; padding: 0; }
.contact__text { font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 18); }
.contact__links { font-size: calc(var(--u) * 22); }
.form { flex: 0 0 46%; width: auto; padding: calc(var(--u) * 20) calc(var(--u) * 18) calc(var(--u) * 20); }
.form__field { height: calc(var(--u) * 44); font-size: calc(var(--u) * 16); }
.form__field--area { height: calc(var(--u) * 100); }
.messenger { height: calc(var(--u) * 44); font-size: calc(var(--u) * 16); }
.form__submit { height: calc(var(--u) * 50); font-size: calc(var(--u) * 17); }

/* ---------- Footer ---------- */
.footer { padding-left: var(--gut); padding-right: var(--gut); }
.footer__inner { padding: calc(var(--u) * 40) calc(var(--u) * 36); gap: calc(var(--u) * 26); }
.footer__logo { font-size: calc(var(--u) * 92); }
.footer__nav { font-size: calc(var(--u) * 17); gap: calc(var(--u) * 14) calc(var(--u) * 28); width: 100%; }
.footer__since { flex-basis: auto; margin-left: auto; }
.footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; font-size: calc(var(--u) * 14); }
.footer__social { margin: 0; font-size: calc(var(--u) * 16); gap: calc(var(--u) * 24); }
.footer .strava { font-size: calc(var(--u) * 16); height: calc(var(--u) * 38); }

/* ---------- Narrow tablets (up to 820px): About goes back to photo above text so the buttons fit ---------- */
@media (max-width: 820px) {
  .about { flex-direction: column-reverse; align-items: stretch; gap: 0; }
  .about__photo { flex: none; width: 100%; height: calc(var(--u) * 380); }
  .about__content { padding-top: calc(var(--u) * 26); }
}