/* ============================================================
   Steelhead Performance — Global Stylesheet
   SINGLE SOURCE OF TRUTH for fonts.
   Every page (current + future) should link this file:
     root page:            <link rel="stylesheet" href="styles.css">
     design-system/ page:  <link rel="stylesheet" href="../styles.css">
   url() paths below are resolved relative to THIS file (project
   root), so they work from any folder depth.
   ============================================================ */

/* ---- Anton (display) ---- */
@font-face{font-family:'Anton';src:url('fonts/woff2/Anton-400.woff2') format('woff2'),url('fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ---- Barlow (body) ---- */
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-100.woff2') format('woff2'),url('fonts/Barlow-Thin.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-100italic.woff2') format('woff2'),url('fonts/Barlow-ThinItalic.ttf') format('truetype');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-200.woff2') format('woff2'),url('fonts/Barlow-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-200italic.woff2') format('woff2'),url('fonts/Barlow-ExtraLightItalic.ttf') format('truetype');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-300.woff2') format('woff2'),url('fonts/Barlow-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-300italic.woff2') format('woff2'),url('fonts/Barlow-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-400.woff2') format('woff2'),url('fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-400italic.woff2') format('woff2'),url('fonts/Barlow-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-500.woff2') format('woff2'),url('fonts/Barlow-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-500italic.woff2') format('woff2'),url('fonts/Barlow-MediumItalic.ttf') format('truetype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-600.woff2') format('woff2'),url('fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-600italic.woff2') format('woff2'),url('fonts/Barlow-SemiBoldItalic.ttf') format('truetype');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-700.woff2') format('woff2'),url('fonts/Barlow-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-700italic.woff2') format('woff2'),url('fonts/Barlow-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-800.woff2') format('woff2'),url('fonts/Barlow-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-800italic.woff2') format('woff2'),url('fonts/Barlow-ExtraBoldItalic.ttf') format('truetype');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-900.woff2') format('woff2'),url('fonts/Barlow-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/woff2/Barlow-900italic.woff2') format('woff2'),url('fonts/Barlow-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap}

/* ---- Barlow Condensed (condensed / sub-display) ---- */
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-200.woff2') format('woff2'),url('fonts/BarlowCondensed-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-200italic.woff2') format('woff2'),url('fonts/BarlowCondensed-ExtraLightItalic.ttf') format('truetype');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-300.woff2') format('woff2'),url('fonts/BarlowCondensed-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-400.woff2') format('woff2'),url('fonts/BarlowCondensed-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-400italic.woff2') format('woff2'),url('fonts/BarlowCondensed-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-600.woff2') format('woff2'),url('fonts/BarlowCondensed-Bold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-700.woff2') format('woff2'),url('fonts/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-700italic.woff2') format('woff2'),url('fonts/BarlowCondensed-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-800.woff2') format('woff2'),url('fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/woff2/BarlowCondensed-800italic.woff2') format('woff2'),url('fonts/BarlowCondensed-ExtraBoldItalic.ttf') format('truetype');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap}

/* ---- Typeface role tokens ---- */
:root{
  --display:'Anton','Barlow Condensed',sans-serif;   /* @kind font */ /* headlines, stamps */
  --condensed:'Barlow Condensed',sans-serif;          /* @kind font */ /* eyebrows, nav, buttons */
  --body:'Barlow',system-ui,sans-serif;               /* @kind font */ /* paragraphs, leads */
}

/* ============================================================
   Image overlays
   ------------------------------------------------------------
   FORGED VIGNETTE — the signature "moody" darkening applied to
   every photo (hero portrait, In The Work, Coaching Career…).
   A radial vignette pulls the corners into shadow and a vertical
   gradient grounds the bottom so white stamps/captions read.

   Two ways to use it:
   1) Drop-in overlay span (preferred for framed photos):
        <div class="photo-frame">            (position:relative)
          <img src="…">  or  <image-slot …>
          <span class="forged-vignette"></span>
          … corners / stamp with z-index >= 2 …
        </div>
   2) As a background layer on any element:
        background: var(--forged-vignette);
   Keep frame corners, stamps and captions at z-index >= 2 so
   they sit ABOVE the overlay (which sits at z-index:1).
   ============================================================ */
:root{
  --forged-vignette:
    radial-gradient(ellipse 75% 70% at 50% 42%, transparent 35%, rgba(0,0,0,.45) 72%, rgba(0,0,0,.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 28%, transparent 60%, rgba(0,0,0,.6) 100%); /* @kind other */
}
.forged-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--forged-vignette)}
/* Flat moody darken — pairs WITH .forged-vignette to fully match the baked
   photo grade (used on live <image-slot> photos so they match baked images).
   Apply the matching image filter to the photo: brightness(.66) contrast(1.12) saturate(.62) */
.forged-darken{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:multiply;background:rgba(16,20,30,.45)}


/* ============================================================
   RED SECTION SEPARATOR — thick blood bar + red glow wash.
   Usage: add class "red-sep" to a dark <section> and insert
   <div class="sep-band" aria-hidden="true"></div> as its first
   child. Add "line-only" to the div when the section already
   has its own red radial glow (bar only, no extra wash).
   ============================================================ */
.red-sep{position:relative}
.sep-band{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(900px 460px at 82% 0%, rgba(138,10,30,.42), transparent 62%);
}
.sep-band::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,#c8102e 0%,#c8102e 55%,#6e0918 100%);
}
.sep-band.line-only{background:none}
@media (max-width:720px){
  .sep-band{background:radial-gradient(560px 320px at 85% 0%, rgba(138,10,30,.42), transparent 62%)}
}