/* ==========================================================================
   SB 54 in California — Circular Action Alliance campaign section
   WordPress block theme stylesheet.

   Part 1 is the vanilla stylesheet (caa-sb54-vanilla/css/styles.css) carried
   over rule for rule. Three deliberate edits, none of which change what is
   rendered:
     1. Tokens in :root read the theme.json presets (colors, fonts, sizes,
        spacing, content width) so edits in Appearance › Editor › Styles
        propagate. Every token keeps the vanilla value as its fallback.
     2. Element selectors (body, h1, h2, h3, p, a, ul, ol, li) are wrapped in
        :where() so they have zero specificity. theme.json declares the same
        values; a user's change in Styles therefore wins over this file.
     3. Alpha colors written as hsla(var(--x-hsl)) in the vanilla file are
        written as color-mix() of the same token (identical result).
     4. The vanilla ".page" wrapper is ".caa-page" here, because WordPress
        adds the body class "page" on every page view.
   Part 2 adapts the vanilla selectors to the block markup WordPress emits
   (Button, Image, Navigation, Details, Site Logo, Site Title) and neutralizes
   the few core block rules that would otherwise override the vanilla look.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Part 1 — vanilla stylesheet
   -------------------------------------------------------------------------- */
:root {
  --caa-teal: var(--wp--preset--color--teal, #196D80);
  --caa-navy: var(--wp--preset--color--navy, #031D2D);
  --caa-yellow: var(--wp--preset--color--yellow, #FFD364);
  --caa-green: var(--wp--preset--color--green, #3DE87A);
  --caa-ink: var(--wp--preset--color--ink, #031D2D);
  --caa-paper: var(--wp--preset--color--paper, #FFFFFF);
  --caa-gold-deep: var(--wp--preset--color--gold-deep, #DA9C10);
  --caa-blue-deep: var(--wp--preset--color--blue-deep, #08518F);
  --caa-orange: var(--wp--preset--color--orange, #E06940);
  --caa-lavender: var(--wp--preset--color--lavender, #B5A8BF);
  --caa-sage: var(--wp--preset--color--sage, #7ABE96);
  --caa-chartreuse: var(--wp--preset--color--chartreuse, #D8E04D);
  --caa-aqua: var(--wp--preset--color--aqua, #9DE5DD);
  --caa-teal-dark: var(--wp--preset--color--teal-dark, #1a7389);
  --font-body: var(--wp--preset--font-family--dm-sans, "DM Sans", system-ui, sans-serif);
  --font-display: var(--wp--preset--font-family--dm-sans, "DM Sans", system-ui, sans-serif);
  --body-size: 16px;
  --line-height: 1.6;
  --max-line-length: var(--wp--custom--line-length, 72ch);
  --text-xs: var(--wp--preset--font-size--xs, .75rem);
  --text-sm: var(--wp--preset--font-size--sm, .875rem);
  --text-base: var(--wp--preset--font-size--base, 1rem);
  --text-lg: var(--wp--preset--font-size--lg, 1.125rem);
  --text-xl: var(--wp--preset--font-size--xl, 1.25rem);
  --text-2xl: var(--wp--preset--font-size--xxl, 1.375rem);
  --text-3xl: var(--wp--preset--font-size--xxxl, 2rem);
  --text-4xl: var(--wp--preset--font-size--xxxxl, 2.5rem);
  --space-xs: var(--wp--preset--spacing--10, .25rem);
  --space-sm: var(--wp--preset--spacing--20, .5rem);
  --space-md: var(--wp--preset--spacing--30, 1rem);
  --space-lg: var(--wp--preset--spacing--40, 1.5rem);
  --space-xl: var(--wp--preset--spacing--50, 2rem);
  --space-2xl: var(--wp--preset--spacing--60, 3rem);
  --space-3xl: var(--wp--preset--spacing--70, 4rem);
  --content-width: var(--wp--style--global--content-size, 960px);
  --sidebar-width: 240px;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --radius-rect: 0;
  --radius-media: 4px;
  --radius-pill: 300px;
  --radius-circle: 50%;
  --radius-bar: 0;
  --card-radius: 8px
}
*,*:before,*:after {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  font-family:var(--font-body);
  font-size:var(--body-size);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
:where(body) {
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--line-height);
  color:var(--caa-ink);
  background:var(--caa-paper)
}
:where(h1,h2,h3) {
  font-family:var(--font-display);
  color:var(--caa-navy);
  line-height:1.2
}
:where(h1) {
  font-size:var(--text-4xl);
  font-weight:300;
  letter-spacing:-.01em;
  margin-bottom:var(--space-md)
}
:where(h2) {
  font-size:var(--text-3xl);
  font-weight:300;
  margin-top:var(--space-2xl);
  margin-bottom:var(--space-md)
}
:where(h3) {
  font-size:var(--text-xl);
  font-weight:500;
  margin-top:var(--space-xl);
  margin-bottom:var(--space-sm)
}
:where(h2) {
  position:relative
}
h2:after {
  content:"";
  display:block;
  width:2.5rem;
  height:5px;
  background:var(--caa-yellow);
  border-radius:var(--radius-bar);
  margin-top:var(--space-sm)
}
:where(p) {
  max-width:var(--max-line-length);
  margin-bottom:var(--space-md)
}
:where(a) {
  color:var(--caa-teal-dark);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px
}
:where(a:hover) {
  color:var(--caa-navy)
}
:where(ul,ol) {
  padding-left:var(--space-xl);
  margin-bottom:var(--space-md)
}
:where(li) {
  margin-bottom:var(--space-xs)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0
}
.page-layout {
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  gap:var(--space-2xl);
  max-width:calc(var(--content-width) + var(--sidebar-width) + var(--space-2xl));
  margin:0 auto;
  padding:var(--space-xl)
}
.page-layout__content {
  min-width:0
}
@media(max-width:768px) {
  .page-layout {
  grid-template-columns:1fr;
  padding:var(--space-md)
}
}
.hero {
  padding:var(--space-3xl) 0 var(--space-2xl);
  border-bottom:3px solid var(--caa-teal);
  margin-bottom:var(--space-2xl)
}
.hero__subtitle {
  font-size:var(--text-lg);
  color:var(--caa-navy);
  max-width:var(--max-line-length);
  opacity:.85
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-lg);
  margin:var(--space-xl) 0
}
.card {
  border:1px solid color-mix(in srgb,var(--caa-teal) 15%,transparent);
  border-top:4px solid var(--caa-teal);
  border-radius:var(--radius-rect);
  padding:var(--space-lg);
  background:var(--caa-paper);
  box-shadow:var(--card-shadow);
  display:flex;
  flex-direction:column
}
.card__title {
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:600;
  color:var(--caa-navy);
  margin-bottom:var(--space-sm)
}
.card__description {
  font-size:var(--text-sm);
  color:var(--caa-ink);
  opacity:.75;
  flex:1;
  margin-bottom:var(--space-md)
}
.card__cta,
.wp-block-button.is-style-caa-card-cta > .wp-block-button__link {
  display:inline-block;
  font-family:var(--font-display);
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--caa-navy);
  background:var(--caa-yellow);
  padding:var(--space-sm) var(--space-lg);
  border-radius:var(--radius-pill);
  text-decoration:none;
  align-self:flex-start;
  text-wrap:balance;
  transition:background .15s,color .15s
}
.card__cta:hover,
.wp-block-button.is-style-caa-card-cta > .wp-block-button__link:hover {
  background:var(--caa-navy);
  color:var(--caa-paper)
}
.cta-block {
  max-width:var(--max-line-length);
  margin-top:var(--space-2xl);
  padding-top:var(--space-xl);
  border-top:1px solid color-mix(in srgb,var(--caa-navy) 10%,transparent)
}
.cta-block__card {
  border-left:3px solid var(--caa-teal);
  padding:var(--space-md) var(--space-lg);
  margin-bottom:var(--space-md);
  background:color-mix(in srgb,var(--caa-teal) 3%,transparent);
  border-radius:var(--radius-rect)
}
.cta-block__card--ready {
  border-left-color:var(--caa-navy);
  background:#0b364708
}
.cta-block__label {
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--caa-teal);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:var(--space-xs)
}
.cta-block__card--ready .cta-block__label {
  color:var(--caa-navy)
}
.cta-block__action {
  font-weight:600
}
.cta-block--single {
  border-top:none;
  padding-top:0
}
.cta-button,
.wp-block-button.is-style-caa-cta > .wp-block-button__link {
  display:inline-block;
  margin-top:var(--space-sm);
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:600;
  color:var(--caa-navy);
  background:var(--caa-yellow);
  padding:var(--space-md) var(--space-xl);
  border-radius:var(--radius-pill);
  text-decoration:none;
  text-wrap:balance;
  transition:background .15s,color .15s
}
.cta-button:hover,
.wp-block-button.is-style-caa-cta > .wp-block-button__link:hover {
  background:var(--caa-navy);
  color:var(--caa-paper)
}
.section,
.is-style-caa-section {
  max-width:var(--max-line-length);
  margin-bottom:var(--space-2xl)
}
.section--intro p {
  font-size:var(--text-lg);
  color:var(--caa-navy);
  opacity:.9
}
.stat-row {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xl);
  margin:var(--space-xl) 0
}
.stat {
  flex:1 1 160px;
  display:flex;
  flex-direction:column;
  gap:var(--space-xs)
}
.stat__number {
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.5rem,5vw,3.5rem);
  line-height:1;
  color:var(--caa-teal)
}
.stat__label {
  font-size:var(--text-sm);
  color:var(--caa-navy);
  max-width:28ch
}
.video-placeholder {
  width:100%;
  max-width:var(--max-line-length);
  aspect-ratio:16 / 9;
  background:var(--caa-navy);
  border:none;
  border-radius:var(--radius-media);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:var(--space-2xl) 0
}
.video-placeholder__inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
  color:var(--caa-paper)
}
.video-placeholder__icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:transparent;
  border:2px solid rgba(255,255,255,.22);
  color:#ffffff52;
  font-size:1.5rem;
  padding-left:4px
}
.video-placeholder__label {
  font-size:var(--text-sm);
  color:#ffffff8c;
  text-transform:uppercase;
  letter-spacing:.08em
}
.video-placeholder--image {
  overflow:hidden
}
.video-placeholder__image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.video-placeholder--image {
  position:relative
}
.video-placeholder__overlay {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-md);
  padding:var(--space-lg);
  text-align:center;
  background:#0b3647b3;
  color:#fff
}
.video-placeholder__mark {
  position:relative;
  width:clamp(96px,12vw,160px);
  aspect-ratio:1;
  color:#ffffff59
}
.video-placeholder__spark {
  width:100%;
  height:100%;
  background-color:currentColor;
  -webkit-mask:url(../brand/unity-spark.svg) no-repeat center / contain;
  mask:url(../brand/unity-spark.svg) no-repeat center / contain
}
.video-placeholder__play {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:2rem;
  line-height:1;
  padding-left:.15em
}
.video-placeholder--wide {
  max-width:var(--content-width)
}
/* Vanilla ".page". Renamed: WordPress puts the class "page" on <body> for
   every page, so the vanilla selector would restyle the whole document. */
.caa-page {
  max-width:var(--content-width);
  margin:0 auto;
  padding:var(--space-xl)
}
.band,
.is-style-caa-band-teal,
.is-style-caa-band-navy,
.is-style-caa-band-solid-teal,
.is-style-caa-band-solid-navy {
  width:100vw;
  margin-inline:calc(50% - 50vw);
  margin-block:var(--space-2xl);
  padding-block:var(--space-2xl);
  padding-inline:max(var(--space-xl),calc((100vw - var(--content-width)) / 2 + var(--space-xl)))
}
.band__inner {
  max-width:var(--content-width);
  margin:0 auto
}
.band--tint-teal,
.is-style-caa-band-teal {
  background:color-mix(in srgb,var(--caa-teal) 8%,var(--caa-paper))
}
.band--tint-navy,
.is-style-caa-band-navy {
  background:color-mix(in srgb,var(--caa-navy) 6%,var(--caa-paper))
}
.band--solid-teal,
.is-style-caa-band-solid-teal {
  background:var(--caa-teal);
  color:var(--caa-paper)
}
.band--solid-teal h2,.band--solid-teal p,
.is-style-caa-band-solid-teal h2,.is-style-caa-band-solid-teal p {
  color:var(--caa-paper)
}
.band__title {
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--caa-navy);
  margin-bottom:var(--space-xs)
}
.band__eyebrow {
  font-family:var(--font-display);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--caa-navy);
  opacity:.8;
  margin-bottom:var(--space-md)
}
.timeline {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xl);
  margin-top:var(--space-lg, 1.5rem)
}
.timeline__step {
  flex:1 1 140px;
  position:relative;
  padding-top:var(--space-md)
}
.timeline__step:before {
  content:"";
  position:absolute;
  top:5px;
  left:0;
  right:calc(-1 * var(--space-xl));
  height:2px;
  background:color-mix(in srgb,var(--caa-teal) 35%,transparent)
}
.timeline__step:last-child:before {
  right:0
}
.timeline__dot {
  position:absolute;
  top:-4px;
  left:0;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--caa-gold-deep)
}
.timeline__date {
  display:block;
  font-family:var(--font-display);
  font-weight:300;
  font-size:var(--text-xl);
  color:var(--caa-navy);
  margin-top:var(--space-md);
  margin-bottom:var(--space-xs)
}
.timeline__label {
  font-size:var(--text-sm);
  color:var(--caa-navy)
}
.fpo,
.is-style-caa-photo,
.is-style-caa-photo-framed {
  width:100%;
  aspect-ratio:16 / 9;
  background:var(--caa-teal);
  border-radius:var(--radius-media);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  padding:var(--space-xl);
  text-align:center
}
.fpo--portrait {
  aspect-ratio:4 / 5
}
.fpo--filled,.hero-fpo--filled,
.is-style-caa-photo,
.is-style-caa-photo-framed {
  background:none;
  padding:0;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(3,29,45,.12);
  box-shadow:0 1px 4px #031d2d1a
}
.fpo--filled img,.hero-fpo--filled img,
.is-style-caa-photo img,
.is-style-caa-photo-framed img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.fpo--framed,
.is-style-caa-photo-framed {
  --spark-size: 52%;
  --spark-opacity: .2;
  --spark-color: #ffffff;
  --spark-offset: -8%
}
.fpo--framed:after,
.is-style-caa-photo-framed:after {
  content:"";
  position:absolute;
  bottom:var(--spark-offset);
  right:var(--spark-offset);
  width:var(--spark-size);
  aspect-ratio:1;
  background-color:var(--spark-color);
  -webkit-mask:url(../brand/unity-spark.svg) no-repeat center / contain;
  mask:url(../brand/unity-spark.svg) no-repeat center / contain;
  opacity:var(--spark-opacity);
  pointer-events:none
}
.fpo--framed.fpo--framed-teal {
  --spark-color: var(--caa-teal);
  --spark-opacity: .22
}
.fpo__badge {
  position:absolute;
  top:var(--space-sm);
  left:var(--space-sm);
  z-index:1;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--caa-navy);
  background:var(--caa-yellow);
  padding:.25em .6em;
  border-radius:var(--radius-pill, 999px)
}
.fpo__tag {
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--caa-yellow)
}
.fpo__desc {
  font-size:var(--text-sm);
  color:#ffffffeb;
  max-width:40ch
}
.fpo__pov-flag,
.wp-block-image.fpo--flagged > figcaption {
  position:absolute;
  top:var(--space-sm);
  left:var(--space-sm);
  z-index:2;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:#b22222;
  padding:.35em .7em;
  border-radius:4px;
  box-shadow:0 1px 3px #00000059
}
.fpo__ai-disclosure {
  position:absolute;
  bottom:var(--space-sm);
  right:var(--space-sm);
  z-index:1;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--caa-yellow);
  background:#031d2dc7;
  padding:.3em .7em;
  border-radius:4px;
  backdrop-filter:blur(2px)
}
.checks {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xl);
  margin-top:var(--space-lg)
}
.stat {
  display:flex;
  flex-direction:column;
  flex:1 1 220px;
  padding-top:var(--space-sm);
  border-top:3px solid var(--caa-teal)
}
.stat__head {
  display:flex;
  align-items:center;
  gap:var(--space-sm)
}
.stat__icon {
  width:2.75rem;
  height:2.75rem;
  flex-shrink:0
}
.stat__figure {
  font-family:var(--font-display);
  font-size:2.75rem;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--caa-navy)
}
.stat__label {
  margin-top:var(--space-xs);
  font-size:var(--text-sm);
  font-weight:600;
  line-height:1.35;
  color:var(--caa-navy)
}
.icon-grid {
  list-style:none;
  padding:0;
  margin:var(--space-lg) 0 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-xl)
}
.icon-grid li {
  display:flex;
  align-items:flex-start;
  gap:var(--space-md)
}
.icon-grid li:before {
  content:"";
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid var(--caa-teal);
  margin-top:2px
}
@media(max-width:768px) {
  .icon-grid {
  grid-template-columns:1fr
}
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2xl);
  align-items:center;
  margin:var(--space-2xl) 0
}
.split__body {
  min-width:0
}
.split--media-right .split__media {
  order:2
}
@media(max-width:768px) {
  .split {
  grid-template-columns:1fr
}
.split--media-right .split__media {
  order:0
}
}
.band--solid-navy,
.is-style-caa-band-solid-navy {
  background:var(--caa-navy)
}
.band--solid-navy,.band--solid-navy h2,.band--solid-navy h3,.band--solid-navy p,.band--solid-navy li,
.is-style-caa-band-solid-navy,.is-style-caa-band-solid-navy h2,.is-style-caa-band-solid-navy h3,.is-style-caa-band-solid-navy p,.is-style-caa-band-solid-navy li {
  color:var(--caa-paper)
}
.callout,
.is-style-caa-callout {
  border-left:4px solid var(--caa-teal);
  background:color-mix(in srgb,var(--caa-teal) 6%,var(--caa-paper));
  padding:var(--space-md) var(--space-xl);
  margin:var(--space-xl) 0;
  font-size:var(--text-lg);
  color:var(--caa-navy)
}
.hero--framed {
  background:color-mix(in srgb,var(--caa-teal) 8%,var(--caa-paper));
  border-bottom:none;
  border-radius:var(--radius-rect);
  padding:var(--space-2xl)
}
.page-nav {
  display:flex;
  justify-content:space-between;
  padding:var(--space-xl) 0;
  margin-top:var(--space-2xl);
  border-top:1px solid color-mix(in srgb,var(--caa-navy) 10%,transparent);
  gap:var(--space-md)
}
.page-nav__link,
.wp-block-button.is-style-caa-page-link > .wp-block-button__link {
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--font-display);
  color:var(--caa-teal);
  text-decoration:none
}
.page-nav__kicker {
  font-size:var(--text-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--caa-teal)
}
.page-nav__label {
  font-size:var(--text-base);
  font-weight:700;
  color:var(--caa-navy);
  text-decoration:underline;
  text-underline-offset:3px
}
.page-nav__link:hover .page-nav__label,
.is-style-caa-page-link:hover .page-nav__label {
  color:var(--caa-teal)
}
.page-nav__link--next {
  margin-left:auto;
  text-align:right
}
.accordion {
  max-width:var(--max-line-length);
  margin:var(--space-xl) 0
}
.accordion__item,
.is-style-caa-accordion {
  border-bottom:1px solid color-mix(in srgb,var(--caa-navy) 10%,transparent)
}
.accordion__trigger,
.wp-block-details.is-style-caa-accordion > summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:var(--space-md) 0;
  background:none;
  border:none;
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:600;
  color:var(--caa-navy);
  cursor:pointer;
  text-align:left
}
.accordion__trigger:after,
.wp-block-details.is-style-caa-accordion > summary:after {
  content:"+";
  font-size:var(--text-xl);
  color:var(--caa-teal);
  flex-shrink:0;
  margin-left:var(--space-md);
  transition:transform .15s
}
.accordion__item[open] .accordion__trigger:after,
.wp-block-details.is-style-caa-accordion[open] > summary:after {
  content:"−"
}
.accordion__content {
  padding:0 0 var(--space-md);
  max-width:var(--max-line-length)
}
.soft-egress {
  text-align:center;
  padding:var(--space-xl) 0;
  font-size:var(--text-sm);
  color:var(--caa-ink);
  opacity:.7
}
.soft-egress a {
  color:var(--caa-teal);
  font-weight:600
}
.hero--blocked {
  position:relative;
  margin:var(--space-lg) 0 var(--space-3xl);
  padding:var(--space-xl)
}
.hero--blocked:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:46%;
  height:66%;
  background:var(--caa-gold-deep);
  z-index:0
}
.hero--blocked:after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:40%;
  height:56%;
  background:var(--caa-teal);
  z-index:0
}
.hero-intro {
  margin:var(--space-2xl) 0 var(--space-lg)
}
.hero-intro h1 {
  margin-bottom:var(--space-md)
}
.hero-intro__lead {
  font-size:var(--text-lg);
  color:var(--caa-navy);
  max-width:var(--max-line-length);
  opacity:.9
}
.hero--blocked--video {
  margin-top:0
}
.hero-video {
  position:relative;
  z-index:1;
  max-width:none;
  margin:0
}
.hero-panel {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.82fr 1fr;
  gap:var(--space-2xl);
  align-items:center;
  background:var(--caa-navy);
  padding:var(--space-2xl)
}
.hero-panel h1 {
  margin-top:0;
  color:var(--caa-paper)
}
.hero-panel h1 em,.hero--band h1 em,.is-style-caa-hero-band h1 em {
  background:linear-gradient(to bottom,transparent 55%,var(--caa-teal) 55%,var(--caa-teal) 86%,transparent 86%);
  font-style:normal
}
.hero-panel p {
  color:var(--caa-paper);
  opacity:.92;
  max-width:44ch;
  margin-bottom:0
}
.hero-panel__media {
  display:flex;
  flex-direction:column;
  gap:var(--space-md)
}
.hero-fpo {
  background:var(--caa-teal);
  border-radius:var(--radius-media);
  aspect-ratio:16 / 10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  padding:var(--space-md);
  text-align:center
}
.hero-fpo--short {
  aspect-ratio:16 / 7
}
.hero-fpo .fpo__tag {
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--caa-yellow)
}
.hero-fpo .fpo__desc {
  font-size:var(--text-xs);
  color:#ffffffe6;
  max-width:34ch
}
.hero-links {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-lg);
  margin-top:var(--space-lg)
}
.hero-links a {
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--text-sm);
  color:var(--caa-paper);
  text-decoration:none;
  border-bottom:2px solid var(--caa-yellow);
  padding-bottom:2px
}
.hero-links a:hover {
  color:var(--caa-yellow)
}
.hero--band,
.is-style-caa-hero-band {
  position:relative;
  width:100vw;
  margin-inline:calc(50% - 50vw);
  margin-bottom:var(--space-2xl);
  padding-block:var(--space-2xl);
  padding-inline:max(var(--space-xl),calc((100vw - var(--content-width)) / 2 + var(--space-xl)));
  background:var(--caa-navy);
  border-left:8px solid var(--caa-yellow)
}
.hero--band__inner {
  max-width:var(--content-width);
  margin:0 auto
}
.hero--band h1,
.is-style-caa-hero-band h1 {
  margin-top:0;
  color:var(--caa-paper)
}
.hero--band p,
.is-style-caa-hero-band p {
  color:var(--caa-paper);
  opacity:.9;
  margin-top:var(--space-sm);
  margin-bottom:0
}
.media-frame {
  position:relative;
  padding:var(--space-lg) 0 0 var(--space-lg)
}
.media-frame:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:72%;
  height:82%;
  background:var(--caa-gold-deep);
  z-index:0
}
.media-frame>* {
  position:relative;
  z-index:1;
  margin:0
}
@media(max-width:768px) {
  .hero-panel {
  grid-template-columns:1fr;
  gap:var(--space-lg);
  padding:var(--space-lg)
}
.hero--blocked:before {
  width:62%;
  height:32%
}
.hero--blocked:after {
  width:52%;
  height:26%
}
}
.site-header {
  background:var(--caa-paper);
  border-bottom:1px solid color-mix(in srgb,var(--caa-navy) 10%,transparent);
  padding:var(--space-md) var(--space-xl)
}
.site-header__inner {
  max-width:calc(var(--content-width) + var(--sidebar-width) + var(--space-2xl));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:var(--space-xl)
}
.site-header__logo {
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:var(--space-sm)
}
.site-header__spark {
  width:40px;
  height:40px;
  flex-shrink:0
}
.site-header__wordmark {
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--text-base);
  line-height:1.02;
  color:var(--caa-navy)
}
.site-header__nav {
  display:flex;
  gap:var(--space-lg)
}
.site-header__nav a {
  font-family:var(--font-display);
  font-size:var(--text-base);
  color:var(--caa-navy);
  text-decoration:none
}
.site-header__right {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:var(--space-lg)
}
.site-header__social {
  color:var(--caa-navy);
  font-size:var(--text-sm);
  letter-spacing:.08em
}
.site-header__pill,
.wp-block-button.is-style-caa-pill > .wp-block-button__link {
  background:var(--caa-yellow);
  color:var(--caa-navy);
  border-radius:999px;
  padding:var(--space-sm) var(--space-lg);
  font-family:var(--font-display);
  font-weight:500;
  text-decoration:none;
  white-space:nowrap
}
.context-note {
  background:color-mix(in srgb,var(--caa-navy) 4%,var(--caa-paper));
  border-bottom:1px dashed color-mix(in srgb,var(--caa-navy) 30%,transparent);
  padding:var(--space-sm) var(--space-xl)
}
.context-note p {
  max-width:calc(var(--content-width) + var(--sidebar-width) + var(--space-2xl));
  margin:0 auto;
  font-size:var(--text-xs);
  font-style:italic;
  color:color-mix(in srgb,var(--caa-navy) 70%,transparent)
}
.site-footer {
  background:var(--caa-navy);
  color:#ffffffb3;
  padding:var(--space-xl);
  margin-top:var(--space-3xl);
  font-size:var(--text-sm)
}
.site-footer__inner {
  max-width:calc(var(--content-width) + var(--sidebar-width) + var(--space-2xl));
  margin:0 auto
}
.site-footer a {
  color:var(--caa-yellow)
}
.site-footer__note {
  opacity:.5;
  font-size:var(--text-xs);
  margin-top:var(--space-sm)
}
@media(max-width:768px) {
  .site-header {
  padding:var(--space-sm) var(--space-md)
}
.site-header__nav,.site-header__social {
  display:none
}
}


/* --------------------------------------------------------------------------
   Section navigation (sticky, under the site header)
   -------------------------------------------------------------------------- */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--caa-paper);
  border-bottom: 1px solid color-mix(in srgb, var(--caa-navy) 12%, transparent);
}
.section-nav__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.section-nav__list {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}
.section-nav__item a,
.wp-block-navigation.section-nav__list a.wp-block-navigation-item__content,
.section-nav .wp-block-navigation a.wp-block-navigation-item__content {
  display: block;
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--caa-navy);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.section-nav__item a:hover,
.wp-block-navigation.section-nav__list a.wp-block-navigation-item__content:hover,
.section-nav .wp-block-navigation a.wp-block-navigation-item__content:hover {
  color: var(--caa-teal);
}
.section-nav__item--current a,
.wp-block-navigation.section-nav__list .current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation.section-nav__list a.wp-block-navigation-item__content[aria-current="page"],
.section-nav .wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content,
.section-nav .wp-block-navigation a.wp-block-navigation-item__content[aria-current="page"] {
  color: var(--caa-teal);
  border-bottom-color: var(--caa-teal);
}
@media (max-width: 768px) {
  .section-nav__list {
    gap: var(--space-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --------------------------------------------------------------------------
   Hub (home) page
   -------------------------------------------------------------------------- */
.hub__subtitle {
  font-size: var(--text-lg);
  color: var(--caa-navy);
  max-width: var(--max-line-length);
  opacity: .85;
}
.hub__heading {
  margin-top: var(--space-2xl);
}
.card__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--caa-teal-dark, var(--caa-teal));
  opacity: .85;
  margin-left: var(--space-xs);
  letter-spacing: .02em;
}
.card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--caa-teal);
  color: var(--caa-paper);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
.hub__cta {
  padding-top: var(--space-2xl);
  max-width: var(--max-line-length);
}
.hub__cta-lead {
  font-size: var(--text-base);
  color: var(--caa-navy);
}
.hub__cta-secondary {
  font-size: var(--text-sm);
  color: var(--caa-navy);
  margin-top: var(--space-md);
}
.hub__cta-secondary a {
  color: var(--caa-teal-dark);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Heading highlight treatments (carried over from the live CAA site's
   custom Squarespace CSS, which pins these with !important)
   -------------------------------------------------------------------------- */
h1 em {
  background: linear-gradient(to bottom, transparent 55%, #218ca5 30%, #218ca5 83%, transparent 72%);
  font-weight: normal;
  font-style: normal;
}
h1 strong,
h3 strong {
  background: linear-gradient(to bottom, transparent 55%, #ffd364 30%, #ffd364 83%, #fff 72%);
  font-weight: normal;
}
.sqs-block-button-element,
.wp-block-button.is-style-caa-card-cta > .wp-block-button__link {
  line-height: 18px;
}

/* --------------------------------------------------------------------------
   Placeholder media (this rebuild only)
   -------------------------------------------------------------------------- */
.fpo--filled img[src$="placeholder.svg"],
.video-placeholder__image[src$="placeholder.svg"] {
  object-fit: cover;
}
/* Full-bleed bands use 100vw, which overshoots by the scrollbar width;
   clip so the page never scrolls sideways. */
body {
  overflow-x: clip;
}


/* ==========================================================================
   Part 2 — WordPress adaptation
   Everything below exists only because WordPress wraps or renames elements.
   Declarations repeat vanilla values; nothing here introduces a new look.
   ========================================================================== */

/* The footer template part is a direct child of .wp-site-blocks, whose
   children get margin rules from global styles at the same specificity. */
.wp-site-blocks > .site-footer {
  margin-top: var(--space-3xl);
}

/* Paragraph blocks standing in for vanilla <span> elements: drop the
   paragraph margin and line-length cap that a <span> never had. */
p.site-header__wordmark,
p.site-header__social,
p.stat__figure,
p.timeline__label,
p.video-placeholder__label,
p.video-placeholder__play,
p.fpo__pov-flag {
  margin-bottom: 0;
  max-width: none;
}
p.stat__label {
  margin-bottom: 0; /* keeps the vanilla max-width: 28ch */
}

/* Site header: Site Logo + Site Title blocks replace the single logo link. */
.site-header__wordmark {
  width: min-content;
}
.site-header__wordmark a {
  color: inherit;
  text-decoration: none;
}
.site-header .site-header__logo .wp-block-site-logo {
  line-height: 0;
  width: 40px;
  flex-shrink: 0;
}
.site-header .site-header__logo .wp-block-site-logo img,
.site-header .site-header__logo .wp-block-image.site-header__spark img {
  width: 40px;
  height: 40px;
}
.site-header .site-header__logo .wp-block-image.site-header__spark {
  margin: 0;
  line-height: 0;
  flex-shrink: 0;
}
.site-header .site-header__logo .wp-block-image.site-header__spark > a {
  display: block;
  line-height: 0;
}
/* Header Navigation block: core sets link color to inherit at (0,3,0). */
.wp-block-navigation.site-header__nav {
  gap: var(--space-lg);
}
.wp-block-navigation.site-header__nav a.wp-block-navigation-item__content {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--caa-navy);
  text-decoration: none;
}
.site-header__right > .wp-block-buttons {
  display: inline-flex;
}
@media (max-width: 768px) {
  .wp-block-navigation.site-header__nav,
  p.site-header__social {
    display: none;
  }
}

/* Button blocks: core gives the link width:100%, text-align:center,
   height:100% and overflow-wrap:anywhere; the vanilla anchors had none. */
.wp-block-button[class*="is-style-caa-"] > .wp-block-button__link {
  width: auto;
  height: auto;
  text-align: inherit;
  overflow-wrap: normal;
  line-height: inherit;
  box-shadow: none;
}
.wp-block-button.is-style-caa-card-cta > .wp-block-button__link {
  line-height: 18px;
}
/* Page navigation: the Buttons block sits inside nav.page-nav. */
.page-nav > .wp-block-buttons {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-md);
}
.page-nav .wp-block-buttons > .page-nav__link--next {
  margin-left: auto;
  text-align: right;
}
.wp-block-button.is-style-caa-page-link > .wp-block-button__link {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  transition: none;
}
.wp-block-button.is-style-caa-page-link > .wp-block-button__link:hover,
.wp-block-button.is-style-caa-page-link > .wp-block-button__link:focus {
  background: none;
  color: var(--caa-teal);
}

/* Image blocks: the vanilla class now sits on the <figure>, so size the
   <img> inside it; core sets height:auto on every block image. */
.wp-block-image.video-placeholder__image {
  margin: 0;
}
.wp-block-image.video-placeholder__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The spark is an editable Image block instead of a CSS mask: the mask
   rules are neutralized and the image is rendered as a white silhouette at
   the same opacity (#ffffff59 = 35%). */
.wp-block-image.video-placeholder__spark {
  margin: 0;
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
}
.wp-block-image.video-placeholder__spark > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: .349;
}
.wp-block-image.stat__icon {
  margin: 0;
}
.wp-block-image.stat__icon > img {
  width: 100%;
  height: 100%;
  display: block;
}
.wp-block-image.fpo--filled > img,
.wp-block-image.is-style-caa-photo > img,
.wp-block-image.is-style-caa-photo-framed > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Review flag ("Tier 3 · Commission") travels as the image caption. */
.wp-block-image.fpo--flagged > figcaption {
  margin: 0;
  line-height: var(--line-height);
}

/* The timeline label is an inline <span> in the prototype, so its lines
   follow the step's 16px strut; keep the paragraph inline for the same
   line spacing. */
p.timeline__label {
  display: inline;
}

/* Details block: core renders <details><summary>…</summary>{blocks}</details>
   with no inner content wrapper; the wrapper's bottom padding moves to the
   open <details>. */
.wp-block-details.is-style-caa-accordion > :not(summary) {
  max-width: var(--max-line-length);
}
.wp-block-details.is-style-caa-accordion[open] {
  padding-bottom: var(--space-md);
}
.wp-block-details.is-style-caa-accordion > summary::-webkit-details-marker {
  display: none;
}

/* Section nav as a Navigation block: the vanilla <ul> rules apply to the
   <nav>, and its inner list inherits the gap. The list items keep the
   vanilla li margin (the prototype's list has it too). */
.wp-block-navigation.section-nav__list .wp-block-navigation__container,
.section-nav .wp-block-navigation .wp-block-navigation__container {
  gap: inherit;
}
/* A Navigation block dropped into the part without the section-nav__list
   class still gets the strip layout. */
.section-nav .wp-block-navigation {
  gap: var(--space-xl);
}
@media (max-width: 768px) {
  .section-nav .wp-block-navigation {
    gap: var(--space-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* The header nav in the prototype has bare anchors, no list items. */
.wp-block-navigation.site-header__nav .wp-block-navigation-item {
  margin: 0;
}

/* Vertical rhythm comes from the vanilla element margins. theme.json sets
   settings.spacing.blockGap to null on purpose: with block-gap support on,
   WordPress prints ":root :where(.is-layout-flow) > * { margin-block: 0 }"
   (specificity 0,1,0) for every Group child, which would strip those margins. */

/* Timeline: the dot is drawn by the step itself (no empty element needed). */
.timeline__step::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--caa-gold-deep);
}

/* --------------------------------------------------------------------------
   Templates outside the prototype (blog index, single post, archive,
   search, 404). Not part of the vanilla design; kept on-brand and minimal.
   -------------------------------------------------------------------------- */
.caa-entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.caa-entry-list > li {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--caa-navy) 10%, transparent);
  margin: 0;
}
.caa-entry-list .wp-block-post-title {
  font-size: var(--text-2xl);
  font-weight: 500;
  margin: 0 0 var(--space-xs);
}
.caa-entry-list .wp-block-post-title a {
  color: var(--caa-navy);
  text-decoration: none;
}
.caa-entry-list .wp-block-post-title a:hover {
  color: var(--caa-teal);
}
.caa-entry-list .wp-block-post-date {
  font-size: var(--text-sm);
  color: var(--caa-teal-dark);
}
.caa-entry-list .wp-block-post-excerpt {
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
}
.caa-post-meta {
  font-size: var(--text-sm);
  color: var(--caa-teal-dark);
  margin-bottom: var(--space-lg);
}
.caa-post-meta .wp-block-post-date,
.caa-post-meta .wp-block-post-author-name,
.caa-post-meta .wp-block-post-terms {
  display: inline;
}
.wp-block-query-pagination {
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-weight: 600;
}
.wp-block-post-navigation-link {
  font-family: var(--font-display);
  font-weight: 600;
}
.caa-search .wp-block-search__input {
  font: inherit;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in srgb, var(--caa-navy) 30%, transparent);
  border-radius: var(--radius-media);
}
.caa-search .wp-block-search__button {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--caa-yellow);
  color: var(--caa-navy);
  border: 0;
  border-radius: 999px;
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
}