:root{
  --ink:#111827;
  --text:#374151;
  --muted:#64748b;
  --blue:#2563eb;
  --dark:#0f172a;
  --line:#e5e7eb;
  --mint:#ecfdf5;
  --cream:#fff7ed;
  --sky:#eff6ff;
  --lime:#f7fee7;
  --red:#fff1f2;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.75;
}

a{color:#0ea5e9}

.site-header{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 7vw;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#111827;
  text-decoration:none;
  font-weight:900;
  font-size:22px;
}

.brand span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:#2563eb;
  color:#fff;
  border-radius:10px;
  font-size:13px;
}

.site-header nav{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
}

.site-header nav a{
  text-decoration:none;
  color:#334155;
  font-weight:800;
  font-size:15px;
}

.article-hero,
.home-hero{
  padding:92px 7vw 82px;
  color:#fff;
  background:
    radial-gradient(circle at top left,rgba(96,165,250,.35),transparent 34%),
    linear-gradient(135deg,#0f172a,#1d4ed8);
}

.article-hero.gold{
  background:
    radial-gradient(circle at top left,rgba(251,191,36,.35),transparent 34%),
    linear-gradient(135deg,#3b2605,#b45309);
}

.article-hero{
  text-align:center;
}

.eyebrow{
  margin:0 0 14px;
  color:#2563eb;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
}

.article-hero .eyebrow,
.home-hero .eyebrow{
  color:#bfdbfe;
}

.article-hero h1,
.home-hero h1{
  max-width:980px;
  margin:0 auto 24px;
  font-size:clamp(42px,6vw,76px);
  line-height:1.02;
  letter-spacing:-.04em;
}

.home-hero h1{
  margin-left:0;
}

.article-hero p,
.home-hero p{
  max-width:790px;
  margin:0 auto;
  font-size:clamp(18px,2vw,23px);
  color:#e0f2fe;
}

.home-hero p{
  margin-left:0;
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.article-shell{
  display:block;
  max-width:820px;
  margin:0 auto;
  padding:58px 28px;
}





/* Fix colored section content alignment */
.color-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:70px 0;
  border-top:1px solid rgba(15,23,42,.05);
  border-bottom:1px solid rgba(15,23,42,.05);
}

.color-band > *{
  max-width:820px;
  width:calc(100% - 56px);
  margin-left:auto;
  margin-right:auto;
}

/* Make headings inside colored sections align with the article text */
.color-band h2,
.color-band h3,
.color-band p,
.color-band ul,
.color-band ol,
.color-band table,
.color-band .formula,
.color-band .grid-two,
.color-band .grid-three,
.color-band details{
  max-width:820px;
  width:calc(100% - 56px);
  margin-left:auto;
  margin-right:auto;
}

/* Keep card/grid children normal inside their grid */
.color-band .grid-two > *,
.color-band .grid-three > *{
  width:auto;
  max-width:none;
}



.article-section{
  padding:42px 0;
}

.article-section h2{
  margin:0 0 20px;
  font-size:clamp(32px,4vw,50px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.article-section h3{
  font-size:23px;
  line-height:1.25;
  margin:0 0 10px;
}

.article-section p,
.article-section li{
  font-size:19px;
  color:var(--text);
}

.intro > p:first-of-type{
  font-size:23px;
  line-height:1.6;
  color:#1f2937;
}



.mint{background:var(--mint)}
.cream{background:var(--cream)}
.blue{background:var(--sky)}
.lime{background:var(--lime)}
.red{background:var(--red)}

.note,
.formula,
.mini{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  margin:26px 0;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.formula{
  color:#1d4ed8;
  font-size:24px;
  font-weight:900;
  text-align:center;
}

.grid-two,
.grid-three{
  display:grid;
  gap:22px;
}

.grid-two{grid-template-columns:repeat(2,1fr)}
.grid-three{grid-template-columns:repeat(3,1fr)}

table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  margin:26px 0;
}

th,
td{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

th{
  background:#f1f5f9;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

details{
  margin:16px 0;
  padding:20px 22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}

summary{
  font-weight:900;
  cursor:pointer;
}

.article-library{
  max-width:1180px;
  margin:0 auto;
  padding:76px 28px;
}

.article-library h2{
  margin:0 0 24px;
  font-size:clamp(34px,4vw,52px);
  line-height:1.1;
  letter-spacing:-.035em;
}

.article-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}

.article-card{
  display:block;
  padding:32px;
  min-height:260px;
  border:1px solid var(--line);
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.article-card h3{
  font-size:30px;
  line-height:1.15;
  margin:0 0 12px;
}

.article-card p{
  color:var(--text);
  font-size:18px;
}

.article-card strong{
  color:#2563eb;
}

.site-footer{
  padding:38px 7vw;
  background:#0f172a;
  color:#cbd5e1;
}

.site-footer strong{
  color:#fff;
  font-size:20px;
}

@media(max-width:920px){
  .site-header{
    height:auto;
    align-items:flex-start;
    flex-direction:column;
    padding:18px 22px;
  }

  .article-shell{
    display:block;
    padding:34px 22px;
  }

  .toc{
    position:static;
    margin-bottom:34px;
  }

  .grid-two,
  .grid-three,
  .article-grid{
    grid-template-columns:1fr;
  }

  .article-hero{
    text-align:left;
  }

  .article-hero h1,
  .article-hero p{
    margin-left:0;
  }
}

.toc,
.toc-toggle,
.toc-collapsed{
  display:none !important;
}

.article-shell{
  display:block;
  max-width:820px;
  margin:0 auto;
  padding:58px 28px;
}

.color-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:70px 0;
  border-top:1px solid rgba(15,23,42,.05);
  border-bottom:1px solid rgba(15,23,42,.05);
}

.color-band > *{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

.color-band > h2,
.color-band > p,
.color-band > ul,
.color-band > ol,
.color-band > table,
.color-band > .formula,
.color-band > .grid-two,
.color-band > .grid-three,
.color-band > details{
  width:calc(100% - 56px);
}

.page-menu{
  position:fixed;
  right:32px;
  bottom:28px;
  left:auto;
  transform:none;
  width:320px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 22px 60px rgba(15,23,42,.18);
  z-index:100;
  overflow:hidden;
}

.page-menu-button{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 18px;
  border:0;
  background:#fff;
  color:#111827;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
}

.page-menu-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#2563eb;
  color:#fff;
  font-size:21px;
  line-height:1;
  font-weight:800;
}

.page-menu-panel{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 18px;
  border-top:1px solid transparent;
  transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
}

.page-menu-open .page-menu-panel{
  max-height:52vh;
  overflow:auto;
  opacity:1;
  padding:10px 18px 18px;
  border-top-color:#e5e7eb;
}

.page-menu-panel a{
  display:block;
  padding:12px 0;
  color:#334155;
  border-bottom:1px solid #eef2f7;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  text-decoration:none;
}

.page-menu-panel a:hover{
  color:#2563eb;
}

.site-footer{
  padding-bottom:120px;
}

@media(max-width:760px){
  .page-menu{
    right:12px;
    left:12px;
    bottom:12px;
    width:auto;
  }

  .color-band{
    padding:54px 0;
  }

  .color-band > *,
  .color-band h2,
  .color-band h3,
  .color-band p,
  .color-band ul,
  .color-band ol,
  .color-band table,
  .color-band .formula,
  .color-band .grid-two,
  .color-band .grid-three,
  .color-band details{
    width:calc(100% - 44px);
  }
}