/* Pure North shared shell and content skin.
   Loaded last on legacy pages so proxied static routes match the Next storefront. */
:root {
  --canvas: #05070d !important;
  --surface-dark: #05070d !important;
  --surface-soft: #0a0f1a !important;
  --surface-card: #0a0f1a !important;
  --surface-elevated: #11182a !important;
  --ink: #f4f6fb !important;
  --body: #c7ced9 !important;
  --muted: #9aa4b6 !important;
  --hairline: rgba(255,255,255,.09) !important;
  --hairline-strong: rgba(255,255,255,.16) !important;
  --blue: #1c69d4 !important;
  --blue-bright: #3b9eff !important;
  --font: "Pure North Sans", Archivo, Helvetica, Arial, system-ui, sans-serif !important;
  --font-display: "Pure North Sans", Archivo, Helvetica, Arial, system-ui, sans-serif !important;
  --nav-h: 64px !important;
}

html, body {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  color-scheme: dark;
}

*, *::before, *::after { border-radius: 0 !important; }

body p, body li, body dd { color: var(--body); }
body h1, body h2, body h3, body h4 { color: var(--ink); font-family: var(--font-display) !important; }
body a { color: inherit; }
html body > nav.breadcrumbs { display: none !important; }

/* Same fixed, translucent 64px shell as the Next storefront. */
html body .nav,
html body header.nav {
  position: sticky !important;
  top: 0 !important;
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
  background: rgba(11,14,20,.92) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
html body .nav__brand img { height: 40px !important; width: auto !important; max-width: 220px !important; }
html body .nav__links { gap: 28px !important; }
html body .nav__links a {
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body .nav__links a:hover,
html body .nav__links a[aria-current="page"] { color: #fff !important; }
html body .nav__util .iconbtn {
  min-width: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--hairline) !important;
  color: #fff !important;
}
html body .progress {
  position: sticky !important;
  top: var(--nav-h) !important;
  height: 2px !important;
  background: linear-gradient(90deg,#0066b1 0 33.34%,#1c69d4 33.34% 66.67%,#e22718 66.67% 100%) !important;
}

/* Consistent dark content surfaces for indexes, policy pages and articles. */
html body main,
html body #main,
html body section.band--light,
html body .blog-band,
html body .article-wrap,
html body .page-content,
html body .content-band { background: var(--canvas) !important; color: var(--ink) !important; }

html body .article-wrap { padding-block: clamp(44px, 7vw, 88px) !important; }
html body .article-wrap > .container,
html body .article-wrap .article {
  width: min(100% - 32px, 900px) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
html body .article h2 { margin-top: 2.25em; margin-bottom: .65em; font-size: clamp(24px, 3vw, 34px); line-height: 1.06; }
html body .article h3 { margin-top: 1.8em; margin-bottom: .6em; }
html body .article p,
html body .article li { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.75; }
html body .article a { color: var(--blue-bright) !important; text-underline-offset: 3px; }
html body .article table,
html body .article blockquote,
html body .article details { background: var(--surface-soft) !important; border-color: var(--hairline) !important; color: var(--body) !important; }

html body .page-hero,
html body .page-head { border-bottom: 1px solid var(--hairline) !important; }
html body .page-hero__bg-shade,
html body .page-head__bg-shade {
  background: linear-gradient(90deg,rgba(5,7,13,.96),rgba(5,7,13,.68) 55%,rgba(5,7,13,.3)) !important;
}
html body .page-hero h1,
html body .page-head h1 { font-weight: 800 !important; letter-spacing: -.02em !important; text-transform: uppercase !important; }
html body .eyebrow,
html body .j-card__cat { color: var(--blue-bright) !important; }

html body .j-card {
  background: var(--surface-soft) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
}
html body .j-card:hover {
  transform: none !important;
  border-color: var(--blue) !important;
  box-shadow: none !important;
}
html body .j-card__body { background: transparent !important; border: 0 !important; }
html body .j-card__title { color: #fff !important; }
html body .j-card__meta { color: var(--muted) !important; border-color: var(--hairline) !important; }

html body .footer-sitemap { background: #070b12 !important; border-top: 1px solid var(--hairline) !important; }

@media (max-width: 1023px) {
  html body .nav { grid-template-columns: minmax(0,1fr) auto !important; gap: 12px !important; }
  html body .nav__brand img { height: 32px !important; max-width: min(160px, 42vw) !important; }
  html body .nav__links {
    inset: var(--nav-h) 0 auto 0 !important;
    background: var(--canvas) !important;
    border-bottom: 1px solid var(--hairline) !important;
  }
  html body .nav__links a {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--hairline) !important;
    color: #fff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- WCAG 1.4.3 contrast repairs (audited 2026-08-19) -------------------
   Keyed to element ROLE, never to `.band--light`. That modifier is not
   trustworthy: on /why-purenorth/, /returns/, /compliance/ and friends a
   `section.band--light` actually paints #05070d, so a rule written against it
   recolours text for the opposite background. An earlier attempt did exactly
   that and broke /404.html and /faq/. Every rule below was verified by
   re-running axe over all 14 legacy pages. */

/* Inline prose links measured 4.43:1 on the dark body (25 instances across 5
   pages) — just under AA. --blue-bright is the same blue the rest of the dark
   surfaces already use, at 7.21:1. */
html body .container .prose a:not([class*="btn"]),
html body .container article p a:not([class*="btn"]),
html body .container article li a:not([class*="btn"]) { color: var(--blue-bright, #3b9eff) !important; }

/* Same blue, opposite surface: the /research/ category links sit on white,
   where #3b9eff is 2.79:1. #1c5fd6 (5.74:1) is the deep blue polish.css
   already uses for product-grid cards on light. */
html body .how-strip__step__body a { color: #1c5fd6 !important; }

/* Product cards on the /research/<area>/ pages rendered their text at 1.01:1 —
   #111111 on a #0a0f1a card. Invisible: product name, category and specs.
   nike-theme paints .product-grid .card text #111 because that card was
   designed white, and its own dark-theme rule
   (html body .card h1..h4 -> #e8edf6) loses the specificity fight to
   `html body .product-grid .card :not(.btn)...`.
   Scoping by .band--light would NOT work here: that class computes to a #06080e
   background on these pages, so the "light" band is painted dark. The card is
   the honest anchor.
   Specificity matters here: the losing rule is
   `html body .product-grid .card :not(.btn):not(.btn *):not(svg):not(path)`.
   Each :not() argument counts, so that lands at (0,4,4) — a doubled leaf class
   (0,4,2) still lost to it. Tripling gives (0,5,2), and 5 classes beats 4
   regardless of the element count. Same triple-class idiom nike-theme itself
   uses for `.eyebrow.eyebrow.eyebrow`. */
html body .product-grid .card .card__name.card__name.card__name,
html body .product-grid .card h1.card__name.card__name,
html body .product-grid .card h2.card__name.card__name,
html body .product-grid .card h3.card__name.card__name { color: #e8edf6 !important; }
html body .product-grid .card .card__cat.card__cat.card__cat,
html body .product-grid .card .card__meta.card__meta.card__meta { color: #9aa4b6 !important; }
html body .product-grid .card .card__price.card__price.card__price { color: #ffffff !important; }