/* ============================================================
   BEBAS NEUE PRO  —  display face, replaces Oswald.
   Self-hosted WOFF2 from the licensed family.
   Load order: styles.css -> golden.css -> bebas.css

   WEIGHTS AVAILABLE AT NORMAL (TRUE CONDENSED) WIDTH:
       Thin 300 / Light 300 / Book 400 / Regular 400
       Middle 500 / BOLD 700  <- heaviest cut that exists

   There is NO ExtraBold at normal width. ExtraBold (800) ships
   only in the SemiExpanded and Expanded cuts. So Bold is the
   ceiling if we keep the true condensed proportions.

   THE BUG THAT MADE TITLES LOOK THIN:
   headings were set to weight 500 (Middle), three steps below
   Bold. Everything in the display + heading tier is now 700.
   ============================================================ */

@font-face{
  font-family:"Bebas Neue Pro";
  src:url("../assets/fonts/BebasNeuePro-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bebas Neue Pro";
  src:url("../assets/fonts/BebasNeuePro-Book.woff2") format("woff2");
  font-weight:350; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bebas Neue Pro";
  src:url("../assets/fonts/BebasNeuePro-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bebas Neue Pro";
  src:url("../assets/fonts/BebasNeuePro-Middle.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bebas Neue Pro";
  src:url("../assets/fonts/BebasNeuePro-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* OPTIONAL HEAVIER TIER — the only route above Bold.
   Slightly wider. Swap --font-display-heavy into .hero-title
   if you want more weight than condensed Bold can give. */
@font-face{
  font-family:"Bebas Neue Pro SemiExp";
  src:url("../assets/fonts/BebasNeuePro-SemiExp-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bebas Neue Pro SemiExp";
  src:url("../assets/fonts/BebasNeuePro-SemiExp-ExtraBold.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  --font-display:"Bebas Neue Pro","Arial Narrow",sans-serif;
  --font-news:"Bebas Neue Pro","Arial Narrow",sans-serif;
  --font-display-heavy:"Bebas Neue Pro SemiExp","Bebas Neue Pro",sans-serif;
}

/* the red record band scopes its own font var — override it too */
.tgb{
  --tgb-display:"Bebas Neue Pro","Arial Narrow",sans-serif;
  --tgb-body:"Inter",system-ui,sans-serif;
}

/* ---------- DISPLAY 68px — BOLD (max at condensed width) ---------- */
.hero-title{
  font-weight:700;
  letter-spacing:0.005em;
  line-height:1.0;
}

/* ---------- HEADING 42px — BOLD (was 500. this was the bug) ---------- */
.tgb__name,
.tape h2,
.split-body h2,
.split-body h2.gold-head,
.mat h2,
.cta-band h2,
.story-band h2,
.story-hero h1,
.news-hero h1,
.news-head h2{
  font-weight:700;
  letter-spacing:0.015em;
  line-height:1.06;
}

/* ---------- SUBHEADING — 33px, the sqrt-phi half-step ----------
   Pure phi puts the subhead at 26px. Bebas is condensed, so 26px
   sits too close to 16px body and the hierarchy flattens.
   26 x 1.272 = 33px is the next rung UP inside the same golden
   system: clearly above body, clearly below the 42px heading.
   Weight 500 (Middle) so it reads as a step down from the Bold
   headings without going thin. */
.intro-sub,
.site-footer h3,
.story-hero-sub{
  font-size:var(--gr-mid);      /* 33px */
  font-weight:500;
  letter-spacing:0.03em;
  line-height:1.12;
}

.quote blockquote{
  font-size:var(--gr-mid);      /* 33px */
  font-weight:500;
  letter-spacing:0.025em;
  line-height:1.24;             /* caps-only: no descenders to clear */
}

.mat-lead{font-size:var(--gr-lead);font-weight:500;letter-spacing:0.035em;line-height:1.35;}
.nav-left a{font-weight:500;letter-spacing:0.05em;}

/* secondary nav (Partners / Shop / News / Contact) sits at BODY size */
.nav-right a{font-family:var(--font-body);font-size:var(--gr-body);font-weight:400;letter-spacing:0;}
.brand{font-weight:700;letter-spacing:0.1em;}

/* small UI text in a condensed caps face needs MORE tracking */
.btn,
.record-link,
.eyebrow,
.quote cite,
.tgb__caption,
.tgb__mlabel,
.tgb__division,
.crumb,
.news-crumb{letter-spacing:0.12em;font-weight:500;}

/* ============================================================
   BODY TEXT — ONE SIZE EVERYWHERE. 16px / 26px, Inter 300.
   Fixes the accolades list and the intro paragraph, which were
   both running larger than the rest of the site's body copy.
   ============================================================ */
body,
p,
li,
.intro-lead,
.tape-row,
.split-body p,
.story-band p,
.story-band--dark p,
.cta-band p,
.accolades li{
  font-family:var(--font-body);
  font-size:var(--gr-body);            /* 16px */
  line-height:var(--gr-leading-body);  /* 26px */
  font-weight:300;
}
.accolades li{display:flex;align-items:center;gap:12px;padding:8px 0;}

/* ============================================================
   INTERIOR PAGES — same golden rungs, sized for in-flow reading.
   Story section headings sit inside long-form copy, so they take
   the 33px mid rung (26 x 1.272) rather than the 42px page-level
   heading. Still a golden step, still clearly above 26px subheads.
   ============================================================ */
.story-band h2{font-size:var(--gr-mid);font-weight:700;line-height:1.08;}   /* 33px */
.story-band h2.band-sub{font-size:var(--gr-sub);font-weight:500;}           /* 26px */
.story-hero h1,
.news-hero h1,
.subhero h1{font-size:var(--gr-display);font-weight:700;line-height:1.0;}   /* 68px */

/* ============================================================
   STORY HERO — rule of thirds + larger display + darker scrim
   - Title jumps to 110px: 68 x 1.618, the next golden rung up.
     (The golden rollout had knocked it DOWN from 151px to 68px.)
   - Text block is centred on the LOWER-THIRD line (66.6% height)
     and left-aligned, so it lands on a thirds intersection and
     sits clear of his face rather than across it.
   - Gradient scrim darkens hardest on the left, where the copy
     lives, so the gold reads without flattening the photo.
   ============================================================ */
.story-hero{
  position:relative;
  overflow:hidden;
  text-align:left;
  display:block;
  /* was anchored 50%/100% (bottom) + fixed attachment, which crops to his
     chest and decapitates him at common window heights. Anchor near the top
     so the FACE is always in frame regardless of viewport. */
  background-position:50% 18% !important;
  background-attachment:scroll !important;
}

.story-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.30) 70%, rgba(0,0,0,.20) 100%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.55) 100%);
}

/* text block centred on the lower-third line */
.story-hero .container{
  position:absolute;
  top:66.6%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:100%;
  text-align:left;
}

.story-hero h1{
  font-size:clamp(64px, 8vw, 110px);   /* 68 x 1.618 = 110 */
  font-weight:700;
  line-height:0.92;
  letter-spacing:0.01em;
  margin:0 0 18px;
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}

.story-hero-sub{
  font-size:var(--gr-mid);             /* 33px */
  font-weight:500;
  letter-spacing:0.05em;
  color:var(--gold);
  margin:0;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

@media (max-width:900px){
  .story-hero .container{top:64%;}
  .story-hero h1{font-size:clamp(42px,11vw,64px);margin-bottom:12px;}
  .story-hero-sub{font-size:var(--gr-lead);}   /* 20px */
}

/* record page */
.record-big{font-weight:700;}
.record-head h2,
.record-col h3{font-weight:700;}

/* Tommy's Story: image removed. Single column, measure capped for
   readability (~68ch), section height released so there is no dead space. */
.split--textonly{min-height:auto;padding:96px 0;}
.split--textonly .split-inner{display:block;}
.split--textonly .split-body{max-width:760px;}
@media (max-width:900px){ .split--textonly{padding:56px 0;} }

/* team page */
.coach-name{font-weight:700;}

@media (max-width:900px){
  .hero-title{letter-spacing:0.01em;}
  .intro-sub,.quote blockquote,.story-hero-sub{font-size:var(--gr-sub);} /* 33 -> 26 */
}

/* footer mirrors header type exactly (golden.css was flattening links to 16px) */
.site-footer .ftr-left a{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:.05em;}
.site-footer .ftr-right a{font-family:var(--font-body);font-size:16px;font-weight:400;}
.site-footer .ftr-brand{font-size:20px;}

/* ============================================================
   HOME HERO — looping video
   Face is dead centre of the footage; left third is pure black,
   so the copy sits lower-left third with no scrim fighting it.
   Name white, motto gold — confirmed wording, written out.
   ============================================================ */
.hero{
  background:#000 !important;              /* old image was deleted */
  position:relative;
  overflow:hidden;
  display:block;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;
}
.hero::before{ /* soften: footage is already near-black */
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%) !important;
}
.hero .container{
  position:absolute;
  top:66.6%;left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:100%;
  padding-bottom:0;
}
.hero-title{
  font-size:clamp(64px, 8vw, 110px);
  font-weight:700;
  line-height:.92;
  letter-spacing:.01em;
  margin:0 0 14px;
  color:#fff;
}
.hero-tagline{
  font-family:var(--font-display);
  font-size:var(--gr-mid);                 /* 33px */
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none;}
  .hero{background:#000 url("../assets/video/hero-poster.webp") center / cover no-repeat !important;}
}
@media (max-width:900px){
  .hero{min-height:520px;}
  .hero-tagline{font-size:var(--gr-lead);} /* 20px */
}

/* ============================================================
   PROFESSIONAL RECORD — photo hero removed. Breadcrumb, title,
   and the record summary now live in ONE dark section.
   ============================================================ */
.record-stat{padding:64px 0 56px;}
.rec-crumb{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65);margin:0 0 14px;}
.rec-crumb a{color:rgba(255,255,255,.65);text-decoration:none;}
.rec-crumb a:hover{color:var(--gold);}
.rec-title{font-family:var(--font-display);font-weight:700;font-size:var(--gr-display);line-height:1.0;letter-spacing:.01em;text-transform:uppercase;color:#fff;margin:0 0 36px;}
@media (max-width:900px){
  .rec-title{font-size:42px;margin-bottom:26px;}
}

/* ============================================================
   RECORD BAND v2 — B&W photo at 30% over dark base, richer
   color, larger vitals that hold their 4-column rows.
   ============================================================ */
.record-stat{position:relative;overflow:hidden;background:#0b0b0b;}
.record-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  opacity:.22;filter:grayscale(1);
  z-index:0;pointer-events:none;
}
.record-stat > .container{position:relative;z-index:2;}

/* color pass: labels gold, numbers gold, tag red */
.record-tag{color:#E33A3A;}
.record-mnum{color:var(--gold);}
.record-mlabel{font-size:13px;color:rgba(255,255,255,.85);}
.record-caption{font-size:13px;color:rgba(255,255,255,.7);}
.record-big .sep{color:#fff;}

/* vitals: bigger type, still one row per cell.
   Grid columns are ~262px at 1140; Bebas condensed at 28px keeps
   the longest values ("The Academy", "Jan 9, 1993") under 160px. */
.record-vital .k{font-size:13px;letter-spacing:.16em;color:var(--gold);margin:0 0 6px;}
.record-vital .v{font-size:22px;line-height:1.15;font-weight:500;color:#fff;white-space:nowrap;}
.record-vitals{gap:26px 30px;padding-top:34px;}

@media (max-width:900px){
  .record-vital .v{font-size:19px;}
}