/*
  About page standardization layer
  Scope: body.cmep-about-page (/about/)
  Purpose: align the About page with the current Election Night/Home page surface system.
*/

body.cmep-about-page{
  --about-bg:#f3f5f8;
  --about-bg-soft:#eef2f7;
  --about-surface:#ffffff;
  --about-surface-2:#f8fafc;
  --about-surface-3:#eef2f7;
  --about-border:#d8dee8;
  --about-border-strong:#b9c3d1;
  --about-text:#172033;
  --about-strong:#08111f;
  --about-muted:#5d6b7f;
  --about-subtle:#7b8798;
  --about-shadow:0 18px 38px rgba(15,23,42,.08);
  --about-shadow-soft:0 8px 20px rgba(15,23,42,.06);
  --about-radius:22px;
  --about-radius-sm:16px;
  --about-shell:1360px;

  --bg-page:var(--about-bg);
  --bg-card:var(--about-surface);
  --bg-card-subtle:var(--about-surface-2);
  --border-subtle:var(--about-border);
  --text-main:var(--about-text);
  --text-muted:var(--about-muted);
  --text-strong:var(--about-strong);
  --shadow-soft:var(--about-shadow);
  --shadow-subtle:var(--about-shadow-soft);

  margin:0 !important;
  padding-top:var(--header-offset,0px);
  background:
    radial-gradient(circle at 12% 18%, rgba(100,116,139,.12), transparent 28rem),
    linear-gradient(180deg,var(--about-bg),var(--about-bg-soft)) !important;
  color:var(--about-text) !important;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode){
    --about-bg:#050b16;
    --about-bg-soft:#020617;
    --about-surface:#0c1422;
    --about-surface-2:#111b2a;
    --about-surface-3:#162235;
    --about-border:#263347;
    --about-border-strong:#384861;
    --about-text:#d9e3f0;
    --about-strong:#f8fafc;
    --about-muted:#aeb9c8;
    --about-subtle:#8fa0b5;
    --about-shadow:0 22px 50px rgba(0,0,0,.34);
    --about-shadow-soft:0 12px 26px rgba(0,0,0,.26);
    background:
      radial-gradient(circle at 12% 18%, rgba(148,163,184,.12), transparent 32rem),
      linear-gradient(180deg,var(--about-bg),var(--about-bg-soft)) !important;
    color-scheme:dark;
  }
}
html[data-theme="dark"] body.cmep-about-page,
html.dark body.cmep-about-page,
body.cmep-about-page.dark,
body.cmep-about-page.dark-mode{
  --about-bg:#050b16;
  --about-bg-soft:#020617;
  --about-surface:#0c1422;
  --about-surface-2:#111b2a;
  --about-surface-3:#162235;
  --about-border:#263347;
  --about-border-strong:#384861;
  --about-text:#d9e3f0;
  --about-strong:#f8fafc;
  --about-muted:#aeb9c8;
  --about-subtle:#8fa0b5;
  --about-shadow:0 22px 50px rgba(0,0,0,.34);
  --about-shadow-soft:0 12px 26px rgba(0,0,0,.26);
  background:
    radial-gradient(circle at 12% 18%, rgba(148,163,184,.12), transparent 32rem),
    linear-gradient(180deg,var(--about-bg),var(--about-bg-soft)) !important;
  color-scheme:dark;
}
html[data-theme="light"] body.cmep-about-page,
html.light body.cmep-about-page,
body.cmep-about-page.light,
body.cmep-about-page.light-mode{
  --about-bg:#f3f5f8;
  --about-bg-soft:#eef2f7;
  --about-surface:#ffffff;
  --about-surface-2:#f8fafc;
  --about-surface-3:#eef2f7;
  --about-border:#d8dee8;
  --about-border-strong:#b9c3d1;
  --about-text:#172033;
  --about-strong:#08111f;
  --about-muted:#5d6b7f;
  --about-subtle:#7b8798;
  --about-shadow:0 18px 38px rgba(15,23,42,.08);
  --about-shadow-soft:0 8px 20px rgba(15,23,42,.06);
  background:
    radial-gradient(circle at 12% 18%, rgba(100,116,139,.12), transparent 28rem),
    linear-gradient(180deg,var(--about-bg),var(--about-bg-soft)) !important;
  color-scheme:light;
}

body.cmep-about-page *,
body.cmep-about-page *::before,
body.cmep-about-page *::after{box-sizing:border-box;}

/* Injected header parity with Election Night. */
body.cmep-about-page #cm-header,
body.cmep-about-page .cm-header,
body.cmep-about-page .cm-header header,
body.cmep-about-page header.cm-header{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  background:rgba(255,255,255,.88) !important;
  border-bottom:1px solid var(--about-border) !important;
  backdrop-filter:blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(130%) !important;
  color:var(--about-text) !important;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode) #cm-header,
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode) .cm-header,
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode) .cm-header header,
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode) header.cm-header{background:rgba(5,11,22,.88) !important;}
}
html[data-theme="dark"] body.cmep-about-page #cm-header,
html.dark body.cmep-about-page #cm-header,
body.cmep-about-page.dark #cm-header,
body.cmep-about-page.dark-mode #cm-header,
html[data-theme="dark"] body.cmep-about-page .cm-header,
html.dark body.cmep-about-page .cm-header,
body.cmep-about-page.dark .cm-header,
body.cmep-about-page.dark-mode .cm-header{background:rgba(5,11,22,.88) !important;}
body.cmep-about-page .header-inner{
  max-width:var(--about-shell) !important;
  padding:.72rem clamp(12px,2.1vw,28px) .78rem !important;
  gap:.5rem !important;
}
body.cmep-about-page .logo-link,
body.cmep-about-page .site-title,
body.cmep-about-page #cm-header a{color:var(--about-strong) !important;}
body.cmep-about-page #cm-nav{
  gap:.18rem !important;
  padding:.18rem !important;
  border:1px solid var(--about-border) !important;
  border-radius:999px !important;
  background:var(--about-surface-2) !important;
}
body.cmep-about-page #cm-nav a{
  color:var(--about-muted) !important;
  border-radius:999px !important;
  padding:.38rem .72rem !important;
  background:transparent !important;
  font-weight:750 !important;
}
body.cmep-about-page #cm-nav a:hover,
body.cmep-about-page #cm-nav a.active,
body.cmep-about-page #cm-nav a[aria-current="page"]{
  background:var(--about-surface) !important;
  color:var(--about-strong) !important;
  box-shadow:0 1px 4px rgba(15,23,42,.10) !important;
}

body.cmep-about-page .about-main{width:100%; min-width:0;}
body.cmep-about-page .about-shell{
  width:min(100%, var(--about-shell)) !important;
  max-width:var(--about-shell) !important;
  margin:0 auto !important;
  padding:clamp(16px,2vw,30px) clamp(12px,2.4vw,34px) 46px !important;
}
body.cmep-about-page .about-hero{
  margin:0 auto clamp(18px,2vw,28px) !important;
  padding:clamp(22px,3vw,44px) clamp(18px,4vw,54px) !important;
  border:1px solid var(--about-border) !important;
  border-radius:clamp(22px,2.4vw,34px) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(148,163,184,.16), transparent 34rem),
    linear-gradient(180deg,var(--about-surface),var(--about-surface-2)) !important;
  box-shadow:var(--about-shadow) !important;
  text-align:center !important;
  overflow:hidden !important;
}
body.cmep-about-page .about-hero__inner{width:min(100%, 920px); margin:0 auto;}
body.cmep-about-page .about-eyebrow,
body.cmep-about-page .about-section-kicker,
body.cmep-about-page .about-card__label{
  width:fit-content;
  max-width:100%;
  border:1px solid var(--about-border);
  border-radius:999px;
  background:var(--about-surface-2);
  color:var(--about-muted);
  font-size:.72rem;
  line-height:1;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.cmep-about-page .about-eyebrow{margin:0 auto .64rem; padding:.22rem .72rem;}
body.cmep-about-page .about-hero h1{
  margin:0;
  color:var(--about-strong);
  font-size:clamp(2.1rem,4.4vw,4rem);
  line-height:.96;
  letter-spacing:-.065em;
  font-weight:1000;
  text-wrap:balance;
}
body.cmep-about-page .about-lede{
  width:min(100%, 820px);
  margin:clamp(12px,1.6vw,18px) auto 0;
  color:var(--about-muted);
  font-size:clamp(1rem,1.25vw,1.16rem);
  line-height:1.58;
  text-wrap:pretty;
}

body.cmep-about-page .about-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
  margin-bottom:clamp(18px,2vw,28px);
}
body.cmep-about-page .about-card,
body.cmep-about-page .about-faq-card{
  border:1px solid var(--about-border) !important;
  border-radius:var(--about-radius) !important;
  background:linear-gradient(180deg,var(--about-surface),var(--about-surface-2)) !important;
  box-shadow:var(--about-shadow-soft) !important;
}
body.cmep-about-page .about-card{
  padding:clamp(16px,1.7vw,24px) !important;
}
body.cmep-about-page .about-card__label{margin:0 0 .72rem; padding:.2rem .58rem; font-size:.68rem;}
body.cmep-about-page .about-card h2{
  margin:0 0 .48rem !important;
  color:var(--about-strong) !important;
  font-size:clamp(1.08rem,1.45vw,1.34rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  font-weight:950 !important;
}
body.cmep-about-page .about-card p,
body.cmep-about-page .cmep-collapse-body p{
  margin:0;
  color:var(--about-muted) !important;
  line-height:1.55;
}
body.cmep-about-page .about-card p + p,
body.cmep-about-page .cmep-collapse-body p + p{margin-top:.7rem;}
body.cmep-about-page .inline-link{
  color:var(--solid-d,#0076BA) !important;
  font-weight:850;
  text-decoration:none;
}
body.cmep-about-page .inline-link:hover{text-decoration:underline;}

body.cmep-about-page .about-faq-card{
  padding:clamp(16px,2vw,26px) !important;
}
body.cmep-about-page .about-section-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(12px,2vw,28px);
  margin:0 0 clamp(14px,1.6vw,20px);
  padding:0 0 clamp(12px,1.3vw,16px);
  border-bottom:1px solid var(--about-border);
}
body.cmep-about-page .about-section-kicker{margin:0 0 .56rem; padding:.2rem .58rem; font-size:.68rem;}
body.cmep-about-page .about-section-header h2{
  margin:0 !important;
  color:var(--about-strong) !important;
  font-size:clamp(1.42rem,2vw,2rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.055em !important;
  font-weight:1000 !important;
}
body.cmep-about-page .about-section-header p{
  width:min(100%, 430px);
  margin:.14rem 0 0;
  color:var(--about-muted) !important;
  line-height:1.45;
}
body.cmep-about-page .faq-stack{display:flex; flex-direction:column; gap:.72rem !important;}
body.cmep-about-page .cmep-collapse{
  margin:0 !important;
  border:1px solid var(--about-border) !important;
  border-radius:var(--about-radius-sm) !important;
  background:var(--about-surface) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
body.cmep-about-page .cmep-collapse-summary{
  min-height:3.35rem;
  padding:1rem 1.08rem !important;
  background:var(--about-surface-2) !important;
  transition:background .16s ease-out, color .16s ease-out !important;
}
body.cmep-about-page .cmep-collapse-summary:hover{background:var(--about-surface-3) !important;}
body.cmep-about-page .cmep-collapse[open] .cmep-collapse-summary{
  border-bottom:1px solid var(--about-border) !important;
  background:var(--about-surface-2) !important;
}
body.cmep-about-page .cmep-collapse-title{
  color:var(--about-strong) !important;
  font-size:clamp(.98rem,1.1vw,1.08rem) !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:-.018em !important;
}
body.cmep-about-page .cmep-collapse-chevron{
  width:10px !important;
  height:10px !important;
  border-right:2px solid var(--about-muted) !important;
  border-bottom:2px solid var(--about-muted) !important;
}
body.cmep-about-page .cmep-collapse-body{
  padding:1rem 1.08rem 1.08rem !important;
  color:var(--about-muted) !important;
}
body.cmep-about-page .rating-range-list{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.9rem;
}
body.cmep-about-page .rating-range-list span{
  display:inline-flex;
  align-items:center;
  min-height:1.72rem;
  padding:.34rem .64rem;
  border:1px solid var(--about-border);
  border-radius:999px;
  background:var(--about-surface-2);
  color:var(--about-text);
  font-size:.82rem;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}
body.cmep-about-page .rating-range-list strong{color:var(--about-strong); font-weight:950; margin-right:.25rem;}

@media (max-width:900px){
  body.cmep-about-page .about-grid{grid-template-columns:1fr;}
  body.cmep-about-page .about-section-header{display:block;}
  body.cmep-about-page .about-section-header p{width:auto; margin-top:.75rem;}
}
@media (max-width:620px){
  body.cmep-about-page .about-shell{padding-inline:12px !important;}
  body.cmep-about-page .about-hero{padding:22px 16px !important; border-radius:24px !important;}
  body.cmep-about-page .about-hero h1{font-size:clamp(2rem,13vw,2.8rem);}
  body.cmep-about-page .about-lede{font-size:.98rem; line-height:1.5;}
  body.cmep-about-page .about-card,
  body.cmep-about-page .about-faq-card{border-radius:20px !important;}
  body.cmep-about-page .cmep-collapse-summary{padding:.92rem .95rem !important;}
  body.cmep-about-page .cmep-collapse-body{padding:.82rem .95rem .95rem !important;}
}

/* 2026-06-25 — align About injected header with the finalized homepage treatment. */
body.cmep-about-page .cm-header,
body.cmep-about-page .cm-header header,
body.cmep-about-page header.cm-header,
body.cmep-about-page #cm-header{
  position:sticky !important;
  top:0 !important;
  background:var(--about-surface) !important;
  border-bottom:1px solid var(--about-border) !important;
  box-shadow:none !important;
  color:var(--about-text) !important;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode) .cm-header,
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode) .cm-header header,
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode) header.cm-header,
  html:not([data-theme="light"]):not(.light) body.cmep-about-page:not(.light):not(.light-mode) #cm-header{
    background:var(--about-surface) !important;
    border-bottom-color:var(--about-border) !important;
  }
}
html[data-theme="dark"] body.cmep-about-page .cm-header,
html.dark body.cmep-about-page .cm-header,
body.cmep-about-page.dark .cm-header,
body.cmep-about-page.dark-mode .cm-header,
html[data-theme="dark"] body.cmep-about-page #cm-header,
html.dark body.cmep-about-page #cm-header,
body.cmep-about-page.dark #cm-header,
body.cmep-about-page.dark-mode #cm-header{
  background:var(--about-surface) !important;
  border-bottom-color:var(--about-border) !important;
}
body.cmep-about-page .header-inner{
  max-width:1150px !important;
  padding:.8rem 1rem 1rem !important;
  gap:.55rem !important;
}
body.cmep-about-page #cm-nav{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  gap:.45rem !important;
}
body.cmep-about-page #cm-nav a{
  background:transparent !important;
  color:var(--about-muted) !important;
  border:0 !important;
  border-radius:999px !important;
  padding:.42rem .85rem !important;
  font-size:.92rem !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
body.cmep-about-page #cm-nav a:hover,
body.cmep-about-page #cm-nav a.active,
body.cmep-about-page #cm-nav a.is-active,
body.cmep-about-page #cm-nav a.selected,
body.cmep-about-page #cm-nav a.current,
body.cmep-about-page #cm-nav a[aria-current="page"]{
  background:var(--about-surface-3) !important;
  color:var(--about-strong) !important;
  box-shadow:none !important;
}
@media (max-width:760px){
  body.cmep-about-page .header-inner{
    padding:.58rem .45rem .72rem !important;
    gap:.42rem !important;
  }
  body.cmep-about-page #cm-nav{
    gap:.22rem !important;
  }
  body.cmep-about-page #cm-nav a{
    padding:.38rem .58rem !important;
    font-size:.82rem !important;
  }
}

/* 2026-06-28 mobile width utilization pass */
@media (max-width:620px){
  body.cmep-about-page .about-main,
  body.cmep-about-page .about-shell{
    width:100% !important;
    max-width:100% !important;
    margin-inline:0 !important;
    padding-left:max(6px, env(safe-area-inset-left)) !important;
    padding-right:max(6px, env(safe-area-inset-right)) !important;
  }
  body.cmep-about-page .about-hero,
  body.cmep-about-page .about-card,
  body.cmep-about-page .about-faq-card{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.cmep-about-page .about-hero{
    padding:18px 12px !important;
    border-radius:20px !important;
  }
  body.cmep-about-page .about-card,
  body.cmep-about-page .about-faq-card{
    padding:12px !important;
    border-radius:16px !important;
  }
}
@media (max-width:390px){
  body.cmep-about-page .about-shell{
    padding-left:max(5px, env(safe-area-inset-left)) !important;
    padding-right:max(5px, env(safe-area-inset-right)) !important;
  }
  body.cmep-about-page .about-card,
  body.cmep-about-page .about-faq-card{padding:10px !important;}
}