/* procyclingapparel.com · global layer (_DESIGN-SYSTEM.md §0 + §1.2′ v3, 2026-10-03)
   Tokens, type scale, containers, buttons, base blocks, entry fade.
   Section-specific layout lives in each section's scoped <style>. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:132px;}

:root{
  /* §0.1 colour — ink + white, red for CTA fills only, amber for :focus-visible only */
  --ink:#111827;
  --ink-2:#1F2937;
  --red:#DC2626;
  --red-dark:#B91C1C;
  --amber:#F59E0B;
  --g-50:#F9FAFB;
  --g-100:#F3F4F6;
  --g-200:#E5E7EB;
  --g-500:#6B7280;
  --g-600:#4B5563;
  --on-ink-2:#D1D5DB;
  --on-ink-card:rgba(255,255,255,.06);
  --overlay:rgba(17,24,39,.80);

  /* legacy aliases (pre-v2 pages) */
  --red-text:var(--red-dark);
  --gray-50:var(--g-50);
  --gray-100:var(--g-100);
  --gray-300:#D1D5DB;
  --gray-600:var(--g-600);
  --line:var(--g-200);

  /* §0.2 two families, one superfamily */
  --ff-head:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  --ff-body:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* §0.3 seven-step type scale */
  --fs-h1:clamp(40px,4.2vw,60px);
  --fs-h2:clamp(28px,2.6vw,38px);
  --fs-h3:22px;
  --fs-lead:19px;
  --fs-body:17px;
  --fs-small:15px;
  --fs-label:13px;

  /* §0.4 + §1.2′ space · containers · shape */
  --sec-pad:clamp(80px,8vw,120px);
  --col-gap:clamp(32px,5vw,80px);
  --head-gap:clamp(48px,5vw,64px);
  --w-full:1440px;
  --w-base:1200px;
  --w-text:1080px;
  --gutter:clamp(16px,4vw,40px);
  --r-card:10px;
  --r-ctl:2px;
  --card-pad:28px 32px;
  --hdr:115px;
}
@media (max-width:768px){:root{--hdr:60px;--card-pad:24px 22px;}}

body{font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.65;color:var(--ink);background:#fff;overflow-x:clip;}
h1,h2,h3,h4{font-family:var(--ff-head);color:inherit;text-wrap:balance;}
h1{font-size:var(--fs-h1);font-weight:700;line-height:1.05;letter-spacing:-.01em;}
h2{font-size:var(--fs-h2);font-weight:600;line-height:1.12;letter-spacing:-.005em;}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25;}
p,li,dd{text-wrap:pretty;}
ul,ol{list-style:none;}
img{max-width:100%;height:auto;display:block;}
svg{display:block;}
a{color:inherit;}
.num,time{font-variant-numeric:tabular-nums;}

/* containers */
.w-full,.w-base,.w-text{width:100%;margin-inline:auto;padding-inline:var(--gutter);}
.w-full{max-width:calc(var(--w-full) + 2*var(--gutter));}
.w-base{max-width:calc(var(--w-base) + 2*var(--gutter));}
.w-text{max-width:calc(var(--w-text) + 2*var(--gutter));}

/* section shells — one padding token everywhere */
.sec{padding-block:var(--sec-pad);position:relative;}
.sec--white{background:#fff;}
.sec--grey{background:var(--g-100);}
.sec--ink{background:var(--ink);color:#fff;}
.sec--ink .lead,.sec--ink p{color:var(--on-ink-2);}
.sec--ink h2,.sec--ink h3{color:#fff;}

/* type roles */
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--g-600);max-width:62ch;}
.label{font-family:var(--ff-body);font-size:var(--fs-label);font-weight:600;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--g-600);}
.sec--ink .label{color:var(--on-ink-2);}
.small{font-size:var(--fs-small);line-height:1.55;}
.prose{max-width:72ch;}

/* base blocks — v3 "signed base block": grouping by fill, never by line */
.blk{background:var(--g-100);border-radius:var(--r-card);padding:var(--card-pad);}
.sec--grey .blk{background:#fff;}
.sec--ink .blk{background:var(--on-ink-card);}
.blk--strong{font-weight:600;color:var(--ink);}
.sec--ink .blk--strong{color:#fff;}

/* buttons: one solid red, everything else is a text link */
a.btn-p,button.btn-p{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;background:var(--red);color:#fff;font:600 16px/1.3 var(--ff-body);text-decoration:none;text-align:center;border:0;border-radius:var(--r-ctl);cursor:pointer;transition:background-color 160ms;}
a.btn-p:hover,button.btn-p:hover{background:var(--red-dark);color:#fff;}
a.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
a.tlink:hover{text-decoration-thickness:2px;}
a.tlink .arr{display:inline-block;vertical-align:middle;margin-left:4px;transition:transform 160ms;}
a.tlink:hover .arr{transform:translateX(3px);}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

.skip-link{position:absolute;top:-60px;left:0;background:var(--ink);color:#fff;padding:12px 18px;text-decoration:none;z-index:10000;font-weight:600;}
.skip-link:focus{top:0;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

#dynamic-menu-container{min-height:70px;}

/* entry fade (pca-fade) is declared in each page head, see _DESIGN-SYSTEM.md §0.4 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}