/* gritpowerlifting.com. Tokens mirror brand-book §3 (colour) and §4 (type); canon is the book,
   working copy in coaching/site/assets/tokens.css. Five colours, no sixth. No shadows, glows or gradients. */
@font-face{font-family:"Archivo";src:url("fonts/Archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Black";src:url("fonts/ArchivoBlack.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --iron:#25282A;--ash:#B2B4B2;--black:#000000;--white:#FFFFFF;--gunmetal:#4F758B;--hairline:#E8E8E8;
  --font-display:"Archivo Black",Archivo,"Arial Black",sans-serif;
  --font-body:Archivo,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --h1:clamp(2.25rem,6vw,3.75rem);--h2:clamp(1.5rem,3vw,2rem);--kicker:.75rem;--caption:.8rem;
  --measure:68ch;--page-max:1120px;--section-y:clamp(4rem,10vw,7.5rem);--gutter:clamp(1.25rem,5vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--iron);font:400 1rem/1.55 var(--font-body);font-stretch:100%}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:0;margin:0;overflow-wrap:break-word}
h1{font-size:var(--h1);line-height:1.05}
h2{font-size:var(--h2);line-height:1.15}
p,ul{margin:0}
.wrap{width:min(100% - 2*var(--gutter),var(--page-max));margin-inline:auto}
.kicker{font-weight:700;font-size:var(--kicker);letter-spacing:.1em;text-transform:uppercase;color:var(--gunmetal);margin-bottom:1rem}
.on-dark .kicker{color:var(--ash)}
.on-gunmetal .kicker{color:var(--white)}
.measure{max-width:var(--measure)}
.stack>*+*{margin-top:1rem}
section{padding-block:var(--section-y)}
.skip{position:absolute;left:-999px;top:0;z-index:20;background:var(--white);color:var(--iron);padding:.5rem 1rem}
.skip:focus{left:1rem;top:1rem}

/* Nav: White ground, Iron. Lockup plus the one button, at every width. */
.nav{position:sticky;top:0;z-index:10;background:var(--white);border-bottom:1px solid var(--hairline)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding-block:.5rem}
.nav .lockup{width:96px;height:auto}
.nav a.home{display:inline-flex;text-decoration:none}
.nav a.home:focus-visible{outline:2px solid var(--iron);outline-offset:4px}

/* Buttons: Gunmetal fill, White text (4.9). Square-ish, the mark is square. No pills, no shadows.
   Hover and focus change nothing about colour: underline and an outline. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.9rem 1.6rem;background:var(--gunmetal);color:var(--white);font:700 .875rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0;border-radius:2px}
.btn:hover{text-decoration:underline;text-underline-offset:.25em}
.btn:focus-visible{outline:2px solid var(--iron);outline-offset:3px}
.btn--inverse{background:var(--white);color:var(--gunmetal)}
.btn--inverse:focus-visible{outline-color:var(--white)}
.btn--sm{padding:.75rem 1.1rem}
.link{color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.link:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Hero: Iron ground, White H1, Ash sub. Ghost splash = the icon in Black at 18% on Iron, cropped by the edge. */
.hero{position:relative;overflow:hidden;background:var(--iron);color:var(--white);padding-block:clamp(5rem,14vw,9rem)}
.hero::before{content:"";position:absolute;right:-14%;bottom:-30%;width:min(72vw,640px);aspect-ratio:1;background:var(--black);opacity:.18;pointer-events:none;-webkit-mask:url("img/grit-icon-iron.svg") center/contain no-repeat;mask:url("img/grit-icon-iron.svg") center/contain no-repeat}
.hero .wrap{position:relative}
.hero h1{max-width:18ch}
.hero .lead{color:var(--ash);max-width:var(--measure);margin-top:1.5rem;font-size:1.0625rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;margin-top:2.25rem}

/* Who this is for: White ground, two columns from 768px, works-if first. */
.cols{display:grid;gap:2rem;margin-top:2rem}
@media(min-width:768px){.cols{grid-template-columns:1fr 1fr;gap:3rem}}
.cols h3{font:700 1rem/1.4 var(--font-body);margin:0 0 .75rem}
.cols ul{padding-left:1.1rem}
.cols li{padding-left:.25rem;margin-bottom:.6rem;max-width:40ch}

/* Book a call: the one Gunmetal ground on the page. White text only (4.9), never Ash here. */
.book{background:var(--gunmetal);color:var(--white)}
.book .stack{margin-top:1.25rem}
.book .caption{font-size:var(--caption);line-height:1.4;margin-top:1rem;max-width:var(--measure)}
.book .actions{margin-top:2rem}

/* Socials: White ground, Iron. Ash on White is banned, so the description stays Iron. */
.socials ul{list-style:none;padding:0;margin-top:1.5rem;display:grid;gap:0}
@media(min-width:768px){.socials ul{grid-template-columns:1fr 1fr;gap:0 3rem}}
.socials a{display:block;padding:1.25rem 0;border-top:1px solid var(--hairline);text-decoration:none;min-height:44px}
.socials li:last-child a{border-bottom:1px solid var(--hairline)}
@media(min-width:768px){.socials li a{border-bottom:1px solid var(--hairline)}}
.socials a:hover .handle,.socials a:focus-visible .handle{text-decoration:underline;text-underline-offset:.2em}
.socials a:focus-visible{outline:2px solid var(--iron);outline-offset:2px}
.socials .handle{font-weight:700;display:block}
.socials .desc{display:block;margin-top:.15rem}

/* Footer: Iron ground, Ash text, the signature pair (7.1). The tagline once, as the seal. */
.footer{background:var(--iron);color:var(--ash);padding-block:3.5rem 2.5rem}
.footer .lockup{width:120px;height:auto}
.footer .seal{font-family:var(--font-display);text-transform:uppercase;font-size:var(--h2);line-height:1.15;margin:2rem 0 2.5rem}
.footer .legal{font-size:var(--caption);line-height:1.6;display:grid;gap:.35rem}
.footer a{color:var(--ash);text-underline-offset:.2em}
.footer a:focus-visible{outline:2px solid var(--ash);outline-offset:3px}

/* Privacy page */
.prose{padding-block:clamp(3rem,8vw,5rem)}
.prose h1{font-size:var(--h2);margin-bottom:1.5rem}
.prose h2{font:700 1rem/1.4 var(--font-body);text-transform:none;margin:2rem 0 .5rem}
.prose p,.prose li{max-width:var(--measure)}
.prose ul{padding-left:1.1rem}
.prose li{margin-bottom:.4rem}
.prose .meta{font-size:var(--caption);margin-bottom:2rem}