/* JS Brand — site-wide title/subtitle treatment
   Rolls the 2026-09-18 locked design language from _home-redesign-preview.html
   (centered CAPS eyebrow + centered teal-gradient headline + centered bold lede)
   to every other page in the bundle. Titles/subtitles only.
   Backgrounds, cards, and body layout are intentionally NOT touched here.
   Applied 2026-09-23 via <link rel="stylesheet" href="_redesign-titles.css"> just before </head>. */

/* ---- eyebrow: numbered kicker -> centered caps, no number, no rule ---- */
.idx, h2.idx, div.idx {
  display:flex!important;
  justify-content:center!important;
  align-items:baseline;
  gap:.6em;
  text-align:center!important;
  margin:0 auto 30px!important;
  padding:0!important;
  border:0!important;
  font-family:var(--display)!important;
  font-weight:600!important;
  font-size:.84rem!important;
  letter-spacing:.24em!important;
  text-transform:uppercase!important;
  color:#EFEDE6!important;
  opacity:.72;
  max-width:none!important;
  line-height:1.3!important;
}
.idx::before, .idx::after,
h2.idx::before, h2.idx::after,
div.idx::before, div.idx::after {
  display:none!important; content:none!important; border:0!important;
}
.idx b { display:none!important }
.idx .sp { display:none!important }
/* Home-preview pattern only: <b><span>Label</span><span class="sp"/><span>Sub</span>
   Hide the sublabel when a real label sits BEFORE the .sp spacer.
   Work.html pattern is <b><span class="sp"/><span>Label</span> — no rule fires, label stays. */
.idx > span:first-of-type:not(.sp) + .sp ~ span { display:none!important }

@media (max-width:560px){
  .idx, h2.idx, div.idx { flex-wrap:wrap; gap:6px 10px; letter-spacing:.20em; }
}

/* ---- big headlines -> centered teal-gradient beat ---- */
/* .th-line + close-section H2 promoted to same solid-teal rule as .phead h1 (see block below) */
.th-line .w, .th-line .w.lit {
  opacity:1!important; color:inherit!important;
  -webkit-text-fill-color:inherit!important;
  background:none!important; animation:none!important;
}

/* ---- lede paragraphs directly under a headline: centered, higher contrast, italics folded ---- */
.phead .lead {
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:640px;
  color:#D8DBD3!important;
}
.phead .lead em {
  font-family:var(--display)!important;
  font-style:normal!important;
  font-weight:600!important;
  color:#F3F1EC!important;
}
.thesis .th-body {
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:640px;
  color:#D8DBD3;
}
.thesis .th-body:first-of-type {
  font-size:clamp(1.3rem,2.2vw,1.72rem);
  font-weight:600;
  color:#F3F1EC;
  line-height:1.45;
}

/* ---- close section CTA row: center under the centered headline ---- */
section.close .wrap { text-align:center }
section.close .wrap > p.n {
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
section.close .acts {
  justify-content:center!important;
  align-items:center;
}
/* END */

/* ---- 2026-09-23 addendum: eyebrow above hero H1 + mid-page section titles ---- */
/* .phead .eyebrow (small caps above the hero H1) — centered, bone, matches section-eyebrow look */
.phead .eyebrow {
  text-align:center!important;
  color:#EFEDE6!important;
  opacity:.72;
  font-family:var(--display)!important;
  font-weight:600!important;
  font-size:.84rem!important;
  letter-spacing:.24em!important;
  text-transform:uppercase!important;
  margin:0 auto 22px!important;
  max-width:none!important;
}
/* Mid-page .sec-title (H2) — softer teal-white so the hero H1 is the one full-teal moment */
.sec-title {
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:24ch;
  color:#C7E7DE;
  background:linear-gradient(100deg,#C7E7DE 0%,#7DCFC2 52%,#C7E7DE 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.sec-title em {
  font-family:var(--display)!important;
  font-style:normal!important;
  font-weight:800!important;
  color:inherit!important;
  -webkit-text-fill-color:transparent!important;
  background:none!important;
}
/* END addendum */

/* ---- 2026-09-23 pass 2: .phead h1 (page hero) — solid brand teal, no gradient ---- */
main h1,
.phead h1,
.th-line,
section.close .wrap > h2,
section.close .wrap > h2.rv,
h2.close-h {
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:24ch;
  color:#20D3C0!important;
  background:none!important;
  -webkit-text-fill-color:#20D3C0!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
}
main h1 em,
.phead h1 em,
.th-line em,
section.close .wrap > h2 em,
section.close .wrap > h2.rv em,
h2.close-h em {
  font-family:var(--display)!important;
  font-style:normal!important;
  font-weight:800!important;
  color:#20D3C0!important;
  -webkit-text-fill-color:#20D3C0!important;
  background:none!important;
}
/* END pass 2 */

/* ---- 2026-09-23 pass 3: newsletter section (2-column) — center both columns' content ---- */
.news-hero > div:first-child { text-align:center }
.news-hero > div:first-child > .sec-title { max-width:22ch }
.news-hero > div:first-child > p { margin-left:auto!important; margin-right:auto!important }
.news-hero > div:first-child .acts {
  justify-content:center!important;
  align-items:center;
}
.news-form { text-align:center }
.news-form h3, .news-form p { text-align:center }
.news-form .field input {
  text-align:center;
}
.news-form .news-fine { text-align:center }
/* END pass 3 */

/* ---- 2026-09-23 pass 4: cover remaining H1/H2 patterns site-wide ---- */

/* Small labels above bare H1 on case/pillar/newsletter pages — centered CAPS bone,
   matching .phead .eyebrow so all pages read as one header pattern */
.cs-genre, main > .cs-genre, main .cs-genre,
.eyebrow, main > .eyebrow {
  text-align:center!important;
  color:#EFEDE6!important;
  opacity:.72;
  font-family:var(--display)!important;
  font-weight:600!important;
  font-size:.84rem!important;
  letter-spacing:.24em!important;
  text-transform:uppercase!important;
  margin:0 auto 22px!important;
  max-width:none!important;
}

/* Bare H1 in main (case pages, newsletter articles, pillar pages)
   — center to match .phead h1, solid teal already applied above via `main h1` */
main h1 {
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:24ch;
}

/* .level-title, .pv-h — mid-page section titles — same muted teal-white gradient as .sec-title */
.level-title, .pv-h {
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:24ch;
  color:#C7E7DE;
  background:linear-gradient(100deg,#C7E7DE 0%,#7DCFC2 52%,#C7E7DE 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.level-title em, .pv-h em {
  font-family:var(--display)!important;
  font-style:normal!important;
  font-weight:800!important;
  color:inherit!important;
  -webkit-text-fill-color:transparent!important;
  background:none!important;
}

/* .a-head — article body sub-heading, stays LEFT-aligned in reading flow,
   quiet bone tone with teal em accent so it reads on-brand without becoming a hero moment */
.a-head {
  color:#EFEDE6!important;
  opacity:.85;
}
.a-head em {
  font-family:var(--display)!important;
  font-style:normal!important;
  font-weight:800!important;
  color:#7DCFC2!important;
}
/* END pass 4 */

/* ---- 2026-09-23 pass 6: anchor scroll clearance ----
   Fixed nav (~74px + backdrop blur) was covering section tops when the browser
   jumped to a #anchor. Give every section a scroll-margin so anchor jumps land
   below the nav across all 63 pages. */
main > section, section[id] {
  scroll-margin-top: 92px;
}
:root { scroll-padding-top: 92px; }
/* END pass 6 */