/* ==========================================================================
   Baker 1031 — 2026 re-skin
   Layered over each page's existing inline <style>. Redefines typography,
   palette and the shared chrome; leaves page structure and all SEO plumbing
   (canonical, OG, JSON-LD) untouched.

   Display face: Optima Bold, licensed and self-hosted.
   Body face: Plus Jakarta Sans (already loaded site-wide).
   ========================================================================== */

@font-face{
  font-family:'Optima';
  src:url('/assets/fonts/optima-bold.woff2') format('woff2'),
      url('/assets/fonts/optima-bold.woff') format('woff');
  font-weight:400 700;      /* one cut, used across the display range */
  font-style:normal;
  font-display:swap;
}

:root{
  --b-ink:#332E24;          /* headings — warm brown-black */
  --b-blue-d:#005588;       /* chrome ground, links */
  --b-blue:#0079C2;         /* primary action */
  --b-pale:#EDF6FB;
  --b-grey:#F2F2F2;
  --b-body:#343A40;
  --b-muted:#5F6469;
  --b-hair:rgba(51,46,36,.15);
  --b-display:'Optima','Optima nova',Candara,'Gill Sans','Gill Sans MT',Georgia,serif;
}

/* ---------- typography ---------- */
body{color:var(--b-body)}
/* The display face applies everywhere. Colour is set separately, because a
   blanket `h1{color:...}` beats an inherited colour and would black out any
   heading sitting on a dark panel (it did exactly that to the request-access
   intro). Dark panels are listed below and keep inheriting. */
h1,h2,h3,h4,h5,h6,
.pagehead h1,.content h2,.content h3,
.learn-article h1,.learn-article h2,.learn-article h3{
  font-family:var(--b-display);
  font-weight:700;
  letter-spacing:0;
}
h1,h2,h3,h4,h5,h6{color:var(--b-ink)}

/* Containers that set their own light colour for a dark ground: let the
   heading inherit it instead of forcing warm ink. */
.intro h1,.intro h2,.intro h3,
.topbar h1,.topbar h2,
.thanks h1,.thanks h2,.thanks h3,
.modal h1,.modal h2,.modal h3,
.mstay h1,.mstay h2,
.hero h1,.hero h2,
.cta h1,.cta h2,
.footer h1,.footer h2,.footer h3,.footer h4{color:#fff}
.pagehead h1{font-size:clamp(34px,4.2vw,52px);line-height:1.1;color:#fff}
.pagehead .sub{color:rgba(255,255,255,.9)}
.content h2,.learn-article h2{font-size:clamp(24px,2.4vw,32px);line-height:1.22;margin:52px 0 18px}
.content h3,.learn-article h3{font-size:clamp(20px,1.9vw,25px);line-height:1.3;margin:38px 0 14px}
.content p,.content li,.learn-article p,.learn-article li{
  color:var(--b-body);font-size:16.5px;line-height:1.78;font-weight:400}
.content b,.learn-article b{color:var(--b-ink);font-weight:600}

/* small caps labels (kickers, eyebrows, stat labels) */
.kicker,.gl-source .label,.mk-stat .label,.sp-fact .l,.sp-facts .l,.breadcrumbs{
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--b-muted)}

a{color:var(--b-blue-d)}
a:hover{color:var(--b-blue)}
.content a,.learn-article p a,.learn-article .meta a,.eeat a{color:var(--b-blue-d)}

/* ---------- header ---------- */
.header{background:var(--b-blue-d);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.14)}
.header .hwrap{height:88px}
.logo{font-family:var(--b-display);font-weight:700;font-size:21px;letter-spacing:.01em}
.nav{font-weight:400}
.nav > a{font-family:var(--b-display);font-weight:700;font-size:16px;padding:14px 16px}
.nav > a.active,.nav > a:hover{color:#fff;text-decoration:none}
.hdr-cta{gap:20px}
.hdr-cta .login{
  border:0;padding:8px 0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hdr-cta .btn{
  background:#fff;border:1px solid #fff;color:var(--b-blue-d);border-radius:3px;
  padding:14px 30px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s,color .25s,border-color .25s}
.hdr-cta .btn:hover{background:var(--b-blue);border-color:var(--b-blue);color:#fff}

/* ---------- page masthead ---------- */
.pagehead{background:var(--b-blue-d)}

/* ---------- footer ---------- */
.footer{background:var(--b-blue-d)}
.legal .rule,.legal .row,.legal a{color:rgba(255,255,255,.82)}
.legal a:hover{color:#fff}

/* ---------- misc chrome ---------- */
.fineprint{border-color:var(--b-hair);color:var(--b-muted)}
.gl-disclosure,.eeat .reviewer,.eeat .author .role{color:var(--b-muted)}
.related-terms a{border-radius:3px}
hr,.rule{border-color:var(--b-hair)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- contrast corrections ----------
   1. .footer .col h4 was --lblue (#8FB7E4). Against the old #1E2846 ground it
      passed; against the new #005588 it measures 3.79. Lifted to #CFE6F6.
   2. The rest below were already under AA before this re-skin (breadcrumb
      separator 1.70, table/stat labels 3.74). Fixed while we are in here.   */
.footer .col h4,.footer h4{color:#CFE6F6}
.breadcrumbs .sep{color:#6C7581}
.mk-stat .l,.sp-fact .l,.sp-facts .l,
table.sp-deals caption,table.sp-deals thead th,
table th,.mk-table th{color:#5F6469}

/* Three pre-existing failures the full 258-page sweep turned up (they predate
   this re-skin): empty-state cells 2.90, glossary term captions 2.50, and the
   bare table headers not covered by the sp-deals rule above, 3.74. */
.sp-nodata-cell{color:#5F6469}
.term-row .tc,.tc{color:#5F6469}
th,thead th,table.perf thead th,table th{color:#5F6469}