/* ==========================================================================
   DeadPoint Performance — the whole design system.

   No Tailwind. No GSAP. No framework. This file plus semantic HTML is the site.
   The Tailwind CDN was ~120KB of JS that parsed the DOM and generated CSS at
   runtime on every load; GSAP was ~100KB to fade a section in. Both are gone.
   Most traffic is a phone on cell data coming from Instagram, so that mattered
   more than anything the utilities were buying.

   Mobile first. Every base rule is the phone rule; media queries only add.

   THREE TYPE SIZES:
     .t-display  headings      .t-body  everything read      .t-meta  labels
   Do not add a fourth. Emphasis comes from weight, colour and space.

   RED IS RARE, NOT GONE. It was the accent on badges, exercise links, card
   borders and rules, and at that volume it read as alarming: a page of warnings
   rather than a workout. So it is now reserved for exactly two jobs — the one
   primary action per page, and the homepage stat numbers. Badges stay hollow
   and prose links stay white-and-underlined, because those were the two that
   actually looked like warnings. Scarcity is what makes the red mean something.
   ========================================================================== */

:root {
  --bg:      #0A0A0A;
  --raise:   #141414;          /* only for the nav bar and form inputs */
  --line:    rgba(245,245,245,.14);
  --line-hi: rgba(245,245,245,.30);
  --ink:     #F5F5F5;
  --dim:     rgba(245,245,245,.68);
  --accent:  #CC0000;          /* primary buttons + homepage stats. Nothing else. */

  --wrap:      44rem;          /* reading measure */
  --wrap-wide: 72rem;          /* nav + footer */
  --step:      clamp(2.5rem, 8vw, 4.5rem);  /* vertical rhythm between sections */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;        /* 17px floor */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ---------------------------------------------------------------- type --- */

.t-display {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  line-height: .92;
  letter-spacing: .03em;
  margin: 0;
}

.t-display-sm {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(1.85rem, 6vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: .05em;
  margin: 0;
}

.t-body { font-size: 1.0625rem; line-height: 1.65; font-weight: 400; }
.t-meta { font-size: .9375rem; line-height: 1.45; font-weight: 600; }

/* Optical correction, not a fourth size. Bebas is condensed and caps-only, so at
   a given nominal size it reads about a fifth smaller than Inter. `em` keeps it
   tied to whichever tier it sits on. */
.u-caps {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 1.28em;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.c-ink { color: var(--ink); }
.c-dim { color: var(--dim); }
.c-accent { color: var(--accent); }   /* homepage stat numbers only */

/* Section eyebrow. Does the job the red badges used to do, quietly. */
.eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 .75rem;
}

.lede { font-size: 1.1875rem; line-height: 1.6; color: var(--dim); margin: 0 0 1.25rem; }
.note { font-size: .9375rem; line-height: 1.6; color: var(--dim); margin: 1rem 0 0; }

/* -------------------------------------------------------------- layout --- */

.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: 1.25rem; }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: 1.25rem; }

.section { padding-block: var(--step); }

/* Vertical rhythm without margin whack-a-mole. */
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------- links --- */
/* Prose links are white with an underline. Red read as a warning on a page whose
   links are just exercise demos. */
a { color: inherit; }

.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--line-hi);
  transition: text-decoration-color .15s ease;
}
.link:hover,
.link:focus-visible { text-decoration-color: var(--ink); }

.nav-link {
  color: var(--dim);
  text-decoration: none;
  transition: color .15s ease;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] { color: var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- badges ---- */
/* Hollow. White outline, nothing inside. */
.badge {
  display: inline-block;
  padding: .3rem .7rem .22rem;
  border: 1px solid var(--line-hi);
  color: var(--ink);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.0625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.badge + .badge { margin-left: .4rem; }

/* ------------------------------------------------------------ buttons ---- */
/* One primary action per page, inverted. Everything else is a ghost. */
.btn {
  display: inline-block;
  padding: .9rem 2rem .8rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: filter .15s ease;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.18); }

.btn-ghost {
  display: inline-block;
  padding: .9rem 2rem .8rem;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--line-hi);
  cursor: pointer;
  transition: border-color .15s ease;
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--ink); }

.btn:disabled, .btn[disabled] { opacity: .5; cursor: wait; }

/* -------------------------------------------------------------- blocks --- */
/* Replaces cards. A hairline and space, not a container. The eyebrow and the
   spacing carry the structure, which is what type hierarchy is for. */
.block {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  margin-top: 2.5rem;
}
.block:first-of-type { margin-top: 0; }

.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin-bottom: 1rem;
}

/* Exercise lists: readable, tappable, no bullets shouting. */
.ex-list { list-style: none; margin: 0; padding: 0; }
.ex-list > li {
  padding: .55rem 0;
  border-bottom: 1px solid rgba(245,245,245,.06);
}
.ex-list > li:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------- nav --- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}
.site-nav__brand img { width: 2rem; height: 2rem; }
.site-nav__wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-nav__links { display: none; gap: 1.75rem; align-items: center; }
@media (min-width: 48rem) {
  .site-nav__links { display: flex; }
  .site-nav__toggle { display: none; }
}
.site-nav__links a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.0625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;   /* 44px tap target */
  background: none; border: 0; color: var(--ink);
}

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  overflow-y: auto;
  padding: 5rem 1.25rem 3rem;
}
.menu a {
  display: block;
  padding: .75rem 0;
  text-decoration: none;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.menu a:hover, .menu a:focus-visible { color: var(--ink); }
.menu__close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; background: none; border: 0; color: var(--ink); }
.menu__label { font-family: 'Bebas Neue', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin: 1.5rem 0 .5rem; font-size: 1rem; }

/* -------------------------------------------------------------- forms ---- */

.field { display: block; margin-bottom: 1rem; }
.field > label {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .4rem;
}
.input {
  width: 100%;
  background: var(--raise);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: .8rem .9rem;
  font: inherit;
  font-size: 1.0625rem;   /* >=16px or iOS zooms the viewport on focus */
  border-radius: 0;
  transition: border-color .15s ease;
}
.input:focus { border-color: var(--ink); outline: none; }

.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.check input { margin-top: .3rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: #F5F5F5; }

/* ------------------------------------------------------------- footer ---- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--step) 2rem;
  margin-top: var(--step);
}
.site-footer__cols { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .site-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.site-footer a { display: block; text-decoration: none; color: var(--dim); padding: .2rem 0; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--ink); }
.site-footer__bottom {
  border-top: 1px solid var(--line);
  margin-top: 2rem; padding-top: 1.5rem;
  font-size: .9375rem; color: var(--dim);
}

/* --------------------------------------------------------------- misc ---- */

.hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--step); }

.print-btn {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 40;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem .6rem;
  background: var(--raise); border: 1px solid var(--line-hi); color: var(--ink);
  font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer;
}
.print-btn:hover { border-color: var(--ink); }

/* ------------------------------------------------------------- reveal ---- */
/* Sections fade up as they scroll in. Gated on .js (set by site.js on <html>)
   so that if the script fails to load the content is simply visible, never
   stranded at opacity 0. GSAP did this before at ~100KB; this is 3 lines of CSS
   and an IntersectionObserver. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Slim inline CTA. Sits under a page header without becoming a section of its
   own — one line of context and the action, stacked on a phone, side by side
   from 30rem up. */
.cta-slim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.5rem;
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
}
.cta-slim p { margin: 0; flex: 1 1 14rem; }
.cta-slim .btn { padding: .7rem 1.5rem .6rem; font-size: 1.0625rem; }

/* Portrait for "meet your coach". Square-ish crop, never wider than the column. */
.portrait {
  width: 100%;
  max-width: 18rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--line);
}

[x-cloak] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-nav, .site-footer, .print-btn, .menu { display: none !important; }
  body { background: #fff !important; color: #111 !important; font-size: 11pt; }
  .badge { border-color: #111 !important; color: #111 !important; }
  .link { color: #111 !important; }
  .block { break-inside: avoid; }
}