/* july.css — July 2026 issue-specific section styles that ride on top of style.css */

/* =============================================================
   .section-header — wrapper block that groups section-eyebrow +
   section-headline + section-sub together with consistent spacing.
   Inner elements inherit their styling from style.css (the live
   June template), so headlines match the treatment already used in
   Retirees, Wellness, Riverside, and Beaumont. Applied to President's
   Message, Gig Workers, Linda Dent, and Santa Ana after Marie
   Retallick flagged missing/weak headline rendering.
============================================================= */
.section-header {
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: left;
}
.section-header > * + * { margin-top: 12px; }
.section-header .section-eyebrow { margin-bottom: 4px; }

/* President's Message: with the new section-header above the pres-message-grid,
   the leftover artifacts from the older template chassis (vertical rail label,
   inline body-column h2, oversized standalone headshot) need to be neutralized
   so the section reads cleanly. Full re-alignment to the new June chassis is
   scheduled for the August build. */
.pres-message .pres-message-body > h2:first-child { display: none; }
.pres-message .pres-message-rail { display: none; }
.pres-message .pres-message-grid {
  display: block; /* collapse the old three-column grid — photo now spans full width */
}
.pres-message .pres-message-photo {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 32px;
  padding: 0 24px;
}
.pres-message .pres-message-photo > img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 4px;
  display: block;
}
.pres-message .pres-headshot {
  position: absolute;
  right: 32px;
  bottom: -32px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--gold, #F8D11F);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  background: #eee;
}
.pres-message .pres-headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pres-message .pres-message-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.pres-message .pres-message-body .columns {
  column-count: 2;
  column-gap: 32px;
}
.pres-message .pres-message-body .columns p {
  break-inside: avoid;
  font-size: 1.02rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
.pres-message .signoff {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 760px) {
  .pres-message .pres-message-body .columns { column-count: 1; }
  .pres-message .pres-headshot { width: 90px; height: 90px; right: 24px; bottom: -24px; }
}

/* Legacy Linda Dent inline banner is replaced by the .section-header block
   above. Hide any remaining .ld-banner (defensive — the July HTML no longer
   emits one) so it can't render as unstyled bold text if reintroduced. */
.linda-dent .ld-banner,
.linda-dent .ld-deck { display: none; }


/* =============================================================
   .photo-strip — normalized multi-photo layout helper.
   Use whenever a story ships 2–4 supporting photos. All images
   share one aspect ratio and one grid, so photo blocks always
   look intentional and balanced at every viewport width.

   Usage in HTML:
     <div class="photo-strip photo-strip--2">   (or --3, --4)
       <figure><img ...><figcaption>optional</figcaption></figure>
       <figure><img ...></figure>
     </div>

   Behavior:
     • Desktop (>= 900px): N equal columns, images cover a shared 4/3 box
     • Tablet (600–900px):  2 columns max, wraps neatly
     • Mobile  (< 600px):   single column, images stack full-width
     • Prevents the "one photo left over" problem that showed up in
       the July gig / wellness sections at desktop widths.
============================================================= */
.photo-strip {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}
.photo-strip figure { margin: 0; }
.photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.photo-strip figcaption {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.3;
}
.photo-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .photo-strip--3, .photo-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .photo-strip--2, .photo-strip--3, .photo-strip--4 { grid-template-columns: 1fr; }
}
/* Portrait variant — for taller photos (banners, standing shots) */
.photo-strip--portrait img { aspect-ratio: 3 / 4; }
/* Wide variant — for panoramic group shots */
.photo-strip--wide img { aspect-ratio: 16 / 9; }


/* ---- Cover image sizing (static PNG cover) ---- */
.cover-static-img {
  width: 100%;
  height: auto;
  max-width: min(900px, 100vw);
  margin: 0 auto;
  display: block;
}

/* ---- Retirees ---- */
.retirees .retirees-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.retirees .retirees-hero img {
  width: 100%;
  border-radius: 4px;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.retirees .retirees-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.retirees .retirees-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.retirees .retirees-strip img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
}
@media (max-width: 800px) {
  .retirees .retirees-grid { grid-template-columns: 1fr; }
  .retirees .retirees-strip { grid-template-columns: 1fr; }
}

/* ---- Ventura stats (reuses .stat / .stat-value / .stat-label from June measure-er) ---- */
.ventura-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px auto 24px;
  max-width: 1100px;
  padding: 0 24px;
}
.ventura-stats .stat {
  background: var(--purple, #2D1B69);
  color: #fff;
  padding: 26px 20px;
  border-radius: 4px;
  text-align: center;
}
.ventura-stats .stat-value {
  font-family: var(--font-display, "loos-compressed", Arial Black, sans-serif);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  color: var(--gold, #F8D11F);
  letter-spacing: 0.02em;
}
.ventura-stats .stat-label {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.35;
}
@media (max-width: 800px) {
  .ventura-stats { grid-template-columns: 1fr; }
}
.ventura-second img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 8px;
}

/* ---- Wellness in Motion ----
   Grid uses subgrid-like matched heights via `align-items: stretch`, and the
   image fills its column with object-fit:cover so no dead space forms below
   either side. ---- */
.wellness .wellness-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 24px;
}
.wellness .wellness-hero {
  position: relative;
  min-height: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.wellness .wellness-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.wellness .wellness-body {
  align-self: center;
  padding: 4px 0;
}
.wellness .wellness-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
@media (max-width: 800px) {
  .wellness .wellness-grid { grid-template-columns: 1fr; }
  .wellness .wellness-hero {
    position: static;
    min-height: 0;
    aspect-ratio: 4/3;
  }
  .wellness .wellness-hero img { position: static; }
}

/* =============================================================
   PULL QUOTE — unified design used across all sections.
   Three color variants: default (cream), .pullquote-inverse
   (purple over dark bg), .pullquote-gold, .pullquote-purple.
   ============================================================= */
.pullquote {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 22px 24px 22px 22px;
  margin: 24px 0;
  box-shadow: 0 4px 24px rgba(45, 27, 105, 0.10);
  border-left: 6px solid var(--gold, #F8D11F);
  position: relative;
}
.pullquote .pullquote-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold, #F8D11F);
  background: #eee;
  align-self: center;
}
.pullquote .pullquote-body {
  position: relative;
}
.pullquote .pullquote-mark {
  width: 34px;
  height: 28px;
  color: var(--gold, #F8D11F);
  opacity: 0.85;
  margin-bottom: 6px;
  display: block;
}
.pullquote blockquote {
  font-family: var(--font-display-wide, "loos-compressed", "Loos Wide", Arial Black, sans-serif);
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  line-height: 1.18;
  color: var(--purple, #2D1B69);
  letter-spacing: 0.005em;
  text-transform: none;
  margin: 0 0 12px;
}
.pullquote figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pullquote figcaption .name {
  font-family: var(--font-display, "loos-compressed", Arial Black, sans-serif);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pullquote figcaption .title {
  font-family: var(--font-body, "cofo-sans-variable", system-ui, sans-serif);
  color: #555;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Gold variant — bright accent card */
.pullquote-gold {
  background: var(--gold, #F8D11F);
  border-left-color: var(--purple, #2D1B69);
  box-shadow: 0 6px 26px rgba(45, 27, 105, 0.18);
}
.pullquote-gold .pullquote-photo { border-color: var(--purple, #2D1B69); }
.pullquote-gold .pullquote-mark { color: var(--purple, #2D1B69); }
.pullquote-gold blockquote { color: var(--purple, #2D1B69); }
.pullquote-gold figcaption .name { color: var(--purple, #2D1B69); }
.pullquote-gold figcaption .title { color: rgba(45, 27, 105, 0.75); }

/* Purple variant — deep union card */
.pullquote-purple {
  background: var(--purple, #2D1B69);
  color: #fff;
  border-left-color: var(--gold, #F8D11F);
}
.pullquote-purple .pullquote-photo { border-color: var(--gold, #F8D11F); }
.pullquote-purple .pullquote-mark { color: var(--gold, #F8D11F); }
.pullquote-purple blockquote { color: #fff; }
.pullquote-purple figcaption .name { color: var(--gold, #F8D11F); }
.pullquote-purple figcaption .title { color: rgba(255,255,255,0.75); }

/* Inverse — used inside a photo/dark hero (e.g., gig hero) */
.pullquote-inverse {
  background: rgba(45, 27, 105, 0.92);
  color: #fff;
  border-left-color: var(--gold, #F8D11F);
  backdrop-filter: blur(4px);
}
.pullquote-inverse .pullquote-photo { border-color: var(--gold, #F8D11F); }
.pullquote-inverse .pullquote-mark { color: var(--gold, #F8D11F); }
.pullquote-inverse blockquote { color: #fff; }
.pullquote-inverse figcaption .name { color: var(--gold, #F8D11F); }
.pullquote-inverse figcaption .title { color: rgba(255,255,255,0.78); }

@media (max-width: 640px) {
  .pullquote {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 20px 20px;
  }
  .pullquote .pullquote-photo { justify-self: start; }
}

/* ---- Leadership strip (President's Message footer) ---- */
.leadership-strip {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 2px solid rgba(45, 27, 105, 0.12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.leadership-strip figure {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
}
.leadership-strip img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold, #F8D11F);
}
.leadership-strip figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.leadership-strip .role {
  font-family: var(--font-body, "cofo-sans-variable", sans-serif);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
}
.leadership-strip .leader-name {
  font-family: var(--font-display, "loos-compressed", Arial Black, sans-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--purple, #2D1B69);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .leadership-strip { grid-template-columns: 1fr; }
}

/* ---- Gilda byline ---- */
.gilda-byline {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px 0;
  border-bottom: 2px solid rgba(45, 27, 105, 0.15);
}
.gilda-byline img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold, #F8D11F);
}
.gilda-byline > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gilda-byline .section-eyebrow {
  display: inline-block;
  margin: 0;
  font-size: 0.75rem;
}
.gilda-byline-name {
  font-family: var(--font-display, "loos-compressed", Arial Black, sans-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--purple, #2D1B69);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
}
.gilda-byline-title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #555;
}

/* ---- Riverside ---- */
.riverside .riverside-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.riverside .riverside-hero img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 4px;
}
.riverside .riverside-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
@media (max-width: 800px) {
  .riverside .riverside-grid { grid-template-columns: 1fr; }
}

/* ---- Beaumont ---- */
.beaumont .beaumont-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.beaumont .beaumont-hero img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 4px;
}
.beaumont .beaumont-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
@media (max-width: 800px) {
  .beaumont .beaumont-grid { grid-template-columns: 1fr; }
}

/* ---- Tri-Counties palm badge: swap the SVG line-art palm for the branded
   coral-circle palm PNG. The image itself already has the coral background,
   so we let it fill the circle. ---- */
.tri-counties .tc-wave-circle--photo {
  background: transparent;
  overflow: hidden;
  width: 96px;
  height: 96px;
  top: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.tri-counties .tc-wave-circle--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ---- Photo crop tuning ---- */
/* Ventura group hero — favor upper 30% so raised signs & heads stay visible */
.tri-counties .tc-hueneme-photo img {
  object-position: center 30%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
/* Move the caption OFF the group photo to a floating overlay pill in the
   bottom-left, so it stops covering the signs. */
.tri-counties .tc-hueneme-photo {
  position: relative;
}
.tri-counties .tc-hueneme-banner {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: auto;
  padding: 8px 16px;
  background: var(--gold, #F8D11F);
  color: var(--purple, #2D1B69);
  font-family: var(--font-display-wide, "loos-compressed", Arial Black, sans-serif);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  max-width: 78%;
  line-height: 1.15;
}
/* Ventura second (wide steps photo) — use natural aspect, no crop */
.ventura-second img {
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: none;
  background: transparent;
  border-radius: 4px;
}

/* ---- Gig section: force columns to match heights so the CGWU logo sits
   flush with the bottom of the hero, no dead space below either side. ---- */
.gig-drivers .gig-grid { align-items: stretch; }
.gig-drivers .gig-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}
.gig-drivers .gig-cgwu-mark {
  align-self: flex-end;
  max-width: 150px;
  width: 34%;
  margin: 0;
}
.gig-drivers .gig-cgwu-mark img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Gig hero: title anchored to bottom (don't cover the subject) and
   aspect ratio matched to the content column so no vertical dead space. ---- */
.gig-drivers .gig-hero { position: relative; }
.gig-drivers .gig-hero > img {
  object-position: center 30%;
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: none; /* remove the June template's grayscale/contrast filter */
}
.gig-drivers .gig-hero-title {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 90px 24px 24px;
  text-align: left;
  background: linear-gradient(to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.65) 45%,
    rgba(0,0,0,0) 100%);
}
.gig-drivers .gig-hero-title h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.02;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
  max-width: 22ch;
}

/* ---- Linda Dent hero image: don't force to fill column height (which
   cropped Linda off the right at narrower widths). Use natural aspect. ---- */
.linda-dent .ld-grid { align-items: start; }
.linda-dent .ld-image {
  align-self: start;
  background: transparent;
}
.linda-dent .ld-image img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

/* ---- COPE Warriors ---- */
.cope-warriors { background: var(--cream, #f7f2e5); }
.cope-warriors .cope-banner {
  text-align: center;
  padding: 0 24px 24px;
}
.cope-warriors .cope-banner .cope-eyebrow {
  display: inline-block;
  background: var(--purple, #2D1B69);
  color: var(--gold, #F8D11F);
  font-family: var(--font-display, "loos-compressed", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 0.9rem;
}
.cope-warriors .cope-banner h2 {
  font-family: var(--font-display-wide, "loos-compressed", sans-serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1;
  color: var(--purple, #2D1B69);
  text-transform: uppercase;
  margin: 14px 0 8px;
  letter-spacing: 0.005em;
}
.cope-warriors .cope-banner .cope-deck {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink, #1a1a1a);
  max-width: 720px;
  margin: 0 auto;
}
.cope-warriors .cope-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}
.cope-warriors .cope-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
/* Cope card owns its own pullquote spacing */
.cope-warriors .pullquote { margin-top: 20px; }
.cope-warriors .cope-list {
  background: var(--purple, #2D1B69);
  color: #fff;
  padding: 24px 22px;
  border-radius: 4px;
}
.cope-warriors .cope-list h3 {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  color: var(--gold, #F8D11F);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.cope-warriors .cope-list .cope-subhead {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 14px;
  opacity: 0.9;
}
.cope-warriors .cope-list ul {
  columns: 2;
  column-gap: 18px;
  list-style: none;
  padding: 0;
}
.cope-warriors .cope-list li {
  padding: 4px 0;
  font-size: 0.95rem;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
  break-inside: avoid;
}
@media (max-width: 800px) {
  .cope-warriors .cope-grid { grid-template-columns: 1fr; }
  .cope-warriors .cope-list ul { columns: 1; }
}

/* ---- Santa Ana photostack ---- */
.santa-ana .sa-photostack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.santa-ana .sa-photostack img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
}

/* ---- Gilda ---- */
.gilda .gilda-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  align-items: start;
}
.gilda .gilda-collage img {
  width: 100%;
  border-radius: 4px;
}
.gilda .gilda-body p {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.gilda .gilda-body .section-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
}
.gilda .gilda-body .section-headline {
  margin-bottom: 20px;
}
.gilda .gilda-signoff {
  margin-top: 22px;
}
@media (max-width: 800px) {
  .gilda .gilda-grid { grid-template-columns: 1fr; }
}


/* =============================================================
   .around-union — Section 02, two independent sub-stories in one
   scroll section. Yen meeting + Nichols/Mandel farewell.
   Each sub-story: headline → photo → body copy.
============================================================= */
.around-union .section-inner { max-width: 1100px; margin: 0 auto; padding: 60px 24px 80px; }
.around-union .section-header { text-align: left; margin-bottom: 40px; padding: 0; }
.around-union .section-sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 760px;
  margin-top: 12px;
  opacity: 0.85;
}

.two-story-block {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 3px solid var(--gold);
}
.two-story-block:first-of-type {
  margin-top: 32px;
  padding-top: 0;
  border-top: none;
}
.substory-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--purple-2);
  margin-bottom: 20px;
  text-transform: none;
}
.substory-photo {
  margin: 0 0 24px;
}
.substory-photo img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.substory-photo figcaption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.72;
  margin-top: 10px;
  font-style: italic;
}
.substory-body {
  max-width: 800px;
}
.substory-body p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 14px;
}
.substory-body strong {
  color: var(--purple-2);
}


/* =============================================================
   .firewall — Section 03, "The November Firewall" lead story.
   Layout: full-width hero photo → 2-column grid (body + sidebar).
   Purple background bleed on left rail, cream body area.
============================================================= */
.section.firewall {
  background: var(--cream);
  position: relative;
}
.firewall .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.firewall .section-header {
  max-width: 900px;
  text-align: left;
  /* Explicit margin resets the inherited `margin: 0 auto` from the base
     .section-header rule — without this, max-width: 900px inside a 1200px
     .section-inner centers the header and misaligns it with the hero below. */
  margin: 0 0 32px 0;
  padding: 0;
}
.firewall-headline {
  color: var(--purple-2);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
}
.firewall-deck {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  margin-top: 16px;
  max-width: 800px;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.9;
  font-weight: 500;
}

.firewall-hero {
  margin: 0 0 40px;
}
.firewall-hero img {
  width: 100%;
  height: auto;
  /* Collage is a wide editorial band (2059x733 ≈ 2.81:1). Let native aspect play
     out — no forced ratio, no crop. Height derives from width automatically. */
  border-radius: 4px;
  display: block;
}

.firewall-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}
.firewall-body p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 16px;
}
.firewall-body strong { color: var(--purple-2); }
.firewall-body em { font-style: italic; }
.firewall-tier {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--purple-2);
  margin-top: 32px;
  margin-bottom: 8px;
  padding-left: 16px;
  border-left: 4px solid var(--gold);
  text-transform: none;
}
.firewall-close {
  margin-top: 28px;
  font-size: 1.1rem;
  padding: 20px 24px;
  background: rgba(45, 27, 105, 0.05);
  border-left: 4px solid var(--purple-2);
  border-radius: 0 4px 4px 0;
}
.firewall-close strong { color: var(--purple-2); }

.firewall-sidebar {
  background: var(--purple-2);
  color: #fff;
  padding: 32px 28px;
  border-radius: 4px;
  position: sticky;
  top: 100px;
}
.firewall-sidebar .sidebar-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.firewall-sidebar .sidebar-lede {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  opacity: 0.9;
}
.firewall-sidebar .sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.firewall-sidebar .sidebar-list li {
  font-size: 0.92rem;
  line-height: 1.55;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
.firewall-sidebar .sidebar-list li:first-child { border-top: none; padding-top: 0; }
.firewall-sidebar .sidebar-list strong {
  color: var(--gold);
  display: inline;
}

@media (max-width: 960px) {
  .firewall-body-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .firewall-sidebar {
    position: static;
  }
}


/* =============================================================
   .union-difference — Section 04, "The Difference a Union Makes"
   Layout: hero illustration + caption band → lede copy → 6-quote
   grid → Union Premium stat panel.
   The hero is a square screen-print illustration; caption sits
   in a solid purple band below in print, we treat it inline here.
============================================================= */
.section.union-difference {
  background: var(--cream);
  padding-bottom: 80px;
}

.ud-hero {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.ud-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px 0 0 4px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ud-hero-caption {
  background: var(--purple-2);
  color: #fff;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 4px 4px 0;
}
.ud-hero-caption .eyebrow {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}
.ud-hero-caption .caption-text {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.5;
  color: #fff;
  display: block;
}
.ud-hero-caption .caption-text strong {
  color: var(--gold);
  font-weight: 700;
}

.union-difference .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 0;
}
.union-difference .section-header {
  max-width: none;
  text-align: left;
  margin-bottom: 36px;
  padding: 0;
}

.ud-lede {
  max-width: 900px;
  margin-bottom: 56px;
}
.ud-lede p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.ud-lede strong { color: var(--purple-2); }
.ud-lede em { font-style: italic; }

.ud-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  margin-bottom: 72px;
}
.ud-quote {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 0;
}
.ud-quote-photo {
  width: 140px;
  height: 140px;
  border-radius: 6px;
  overflow: hidden;
  background: #eee;
  border: 4px solid var(--gold);
}
.ud-quote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ud-quote blockquote {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  margin: 0 0 10px;
  padding-left: 14px;
  border-left: 2px solid var(--purple-2);
}
.ud-quote figcaption {
  padding-left: 14px;
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--purple-2);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.ud-stats {
  background: var(--purple-2);
  color: #fff;
  padding: 40px 48px;
  border-radius: 4px;
  margin-top: 32px;
}
.ud-stats-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.ud-stats-headline .gold { color: var(--gold); }
.ud-stats-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.ud-stat {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ud-stat:first-child { border-top: none; padding-top: 4px; }
.ud-stat dt {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.ud-stat dt .suffix {
  font-size: 0.65em;
  margin-left: 2px;
}
.ud-stat dd {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: #fff;
  margin: 0;
}
.ud-stats-source {
  margin-top: 24px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
}

@media (max-width: 900px) {
  .ud-hero {
    grid-template-columns: 1fr;
    padding: 24px 24px 0;
  }
  .ud-hero img { border-radius: 4px 4px 0 0; }
  .ud-hero-caption { border-radius: 0 0 4px 4px; padding: 28px 24px; }
  .ud-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ud-stats { padding: 28px 24px; }
  .ud-stat { grid-template-columns: 130px 1fr; gap: 16px; }
}
@media (max-width: 620px) {
  .ud-quote-grid { grid-template-columns: 1fr; }
}


/* =============================================================
   .lacera — Section 05, LACERA Townhall / Nicole Mi endorsement.
   2-column grid: main story on left, candidate bio card on right.
============================================================= */
.section.lacera {
  background: var(--cream);
}
.lacera .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 88px;
}
.lacera-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
}

.lacera-cope-tag {
  background: var(--gold);
  color: var(--purple-2);
}
.lacera-headline {
  color: var(--purple-2);
  margin-top: 12px;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
}
.lacera-deck {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 12px;
  margin-bottom: 32px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
.lacera-deck strong.gold-text {
  color: var(--purple-2);
  background: var(--gold);
  padding: 1px 8px;
  border-radius: 3px;
  font-weight: 700;
}

.lacera-body p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.lacera-body strong { color: var(--purple-2); }
.lacera-body em { font-style: italic; }
.lacera-cta-line {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(45, 27, 105, 0.05);
  border-left: 4px solid var(--gold);
  border-radius: 0 4px 4px 0;
}

.lacera-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0;
}
.lacera-photo-strip figure { margin: 0; }
.lacera-photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.lacera-how-to-vote {
  background: var(--gold);
  color: var(--ink);
  padding: 24px 28px;
  border-radius: 4px;
  margin-top: 24px;
}
.how-to-vote-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple-2);
  margin-bottom: 10px;
}
.lacera-how-to-vote p {
  font-size: 1rem;
  line-height: 1.55;
  margin: 6px 0;
}
.lacera-how-to-vote strong { color: var(--purple-2); }
.lacera-how-to-vote em { font-style: italic; }
.how-to-vote-close {
  margin-top: 12px !important;
  font-weight: 700;
  color: var(--purple-2);
}

.lacera-bio-card {
  background: var(--purple-2);
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  position: sticky;
  top: 100px;
  align-self: start;
}
.bio-card-photo {
  background: var(--purple-2);
  padding: 16px 16px 0;
}
.bio-card-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}
.bio-card-body {
  padding: 20px 24px 28px;
}
.bio-card-name {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.05;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bio-card-role {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #fff;
  margin: 4px 0;
}
.bio-card-role em {
  color: var(--gold);
  font-style: italic;
  font-weight: 700;
}
.bio-card-list {
  list-style: none;
  padding: 0;
  margin-top: 16px;
}
.bio-card-list li {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 8px 0 8px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  position: relative;
  color: #fff;
}
.bio-card-list li:first-child { border-top: none; padding-top: 4px; }
.bio-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 1px;
}
.bio-card-list li:first-child::before { top: 11px; }
.bio-card-list li strong {
  color: var(--gold);
  font-weight: 700;
}

@media (max-width: 960px) {
  .lacera-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lacera-bio-card { position: static; }
  .lacera-photo-strip { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}


/* =============================================================
   .inland-riverside — Section 06, Riverside Day One.
   Dark section (matches print black panel), gold accent list.
============================================================= */
.section.inland-riverside {
  background: #0a0a0a;
  color: #fff;
}
.inland-riverside .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 88px;
}
.inland-riverside .section-header {
  text-align: left;
  padding: 0;
  margin-bottom: 40px;
}
.inland-riverside .section-eyebrow {
  background: var(--gold);
  color: var(--purple-2);
}
.inland-riverside .section-headline {
  color: var(--gold);
  margin-top: 12px;
}
.inland-sub {
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  max-width: 900px;
  margin-top: 16px;
}
.inland-sub strong { color: var(--gold); }

.inland-hero { margin: 0 0 48px; }
.inland-hero img {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.inland-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  margin-bottom: 48px;
  align-items: start;
}
.inland-body p {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.inland-body strong { color: var(--gold); }

.inland-priorities {
  background: var(--gold);
  color: var(--purple-2);
  padding: 28px;
  border-radius: 4px;
}
.priorities-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.inland-priorities ul { list-style: none; padding: 0; margin: 0; }
.inland-priorities li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 10px 0 10px 20px;
  border-top: 1px solid rgba(45, 27, 105, 0.18);
  position: relative;
  color: var(--purple-2);
  font-weight: 600;
}
.inland-priorities li:first-child { border-top: none; padding-top: 4px; }
.inland-priorities li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: var(--purple-2);
}

.inland-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.inland-photo-grid figure { margin: 0; }
.inland-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

@media (max-width: 960px) {
  .inland-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .inland-photo-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================
   .policy-245 — Section 07, Cease and Desist at RUHS.
   Dark section (continues from Riverside dark). Header band photo,
   headline, body copy, petition CTA in gold.
============================================================= */
.section.policy-245 {
  background: #0a0a0a;
  color: #fff;
}
.policy-245 .section-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 88px;
}
.policy-245-band {
  margin: 0 0 40px;
  border-radius: 4px;
  overflow: hidden;
}
.policy-245-band img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.policy-245 .section-header {
  text-align: left;
  padding: 0;
  margin-bottom: 32px;
}
.policy-245 .section-eyebrow {
  background: var(--gold);
  color: var(--purple-2);
}
.policy-245 .section-headline {
  color: #fff;
  margin-top: 12px;
  font-size: clamp(2rem, 3.6vw, 3rem);
}
.policy-245-body p {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.policy-245-body strong { color: var(--gold); }

.policy-245-cta {
  margin-top: 32px;
  background: var(--gold);
  padding: 24px 28px;
  border-radius: 4px;
  color: var(--purple-2);
}
.cta-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--purple-2);
  margin-bottom: 8px;
}
.cta-url {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--purple-2);
  text-decoration: underline;
  word-break: break-all;
}


/* =============================================================
   .courts-mosk — Section 08, 100 Strong at Stanley Mosk.
   Gold background matches the print treatment. Typography-driven,
   no big hero photo. Purple text on gold.
============================================================= */
.section.courts-mosk {
  background: var(--gold);
  color: var(--purple-2);
  padding: 72px 0 88px;
}
.courts-mosk .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.courts-header {
  max-width: 900px;
  margin-bottom: 40px;
}
.courts-eyebrow {
  background: var(--purple-2);
  color: var(--gold);
}
.courts-headline {
  color: var(--purple-2);
  margin-top: 12px;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
}
.courts-deck {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--purple-2);
  margin-top: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  max-width: 800px;
}

.courts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}
.courts-body p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 14px;
  color: var(--purple-2);
}
.courts-lede {
  font-family: var(--font-body);
  font-size: 1.15rem !important;
  line-height: 1.5 !important;
  font-weight: 500;
}
.courts-body strong { color: var(--purple-2); font-weight: 800; }
.courts-close,
.courts-body p.courts-close {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--purple-2);
  color: var(--gold) !important;
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.7rem !important;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-radius: 3px;
  text-align: center;
}
.courts-close strong,
.courts-close em,
.courts-close * { color: var(--gold) !important; }

.courts-pullquote {
  background: var(--purple-2);
  color: #fff;
  border-radius: 4px;
  padding: 28px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.courts-pullquote .pullquote-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--gold);
  margin: 0 auto 20px;
  background: #eee;
}
.courts-pullquote .pullquote-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.courts-pullquote blockquote {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.4;
  font-style: italic;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  padding: 0 12px;
}
.quote-mark {
  color: var(--gold);
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-size: 3rem;
  line-height: 0;
  margin-right: 4px;
  vertical-align: -0.5em;
}
.pullquote-attribution {
  text-align: center;
  border-top: 2px solid var(--gold);
  padding-top: 16px;
}
.attr-name {
  display: block;
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--gold);
  text-transform: uppercase;
}
.attr-role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #fff;
  margin-top: 4px;
}
.attr-role em { font-style: italic; color: var(--gold); font-weight: 700; }

@media (max-width: 960px) {
  .courts-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .courts-pullquote { position: static; max-width: 500px; margin: 0 auto; }
}


/* =============================================================
   .tri-counties (August override) — palm graphic as JPG image.
   Reuses the July .tc-wave/.tc-content chassis; adds:
   - Palm image render inside the coral circle
   - Full Oxnard board + Measure O treatment (.ox-*)
============================================================= */

/* Palm image sits inside the coral wave circle, replacing the July inline SVG */
.tri-counties .tc-wave-circle img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* The parent circle already has background: coral, so a coral-backed palm blends cleanly */

.tri-counties .tc-content {
  padding: 48px var(--container-pad) 40px;
}

.ox-header {
  max-width: 900px;
  margin-bottom: 32px;
}
.ox-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.02;
  color: var(--tc-coral);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 16px;
}
.ox-deck {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  max-width: 800px;
}

.ox-hero {
  margin: 32px 0 24px;
  max-width: 900px;
}
.ox-hero img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 3px;
  display: block;
}
.ox-hero figcaption {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--tc-teal);
  opacity: 0.85;
}

.ox-body {
  max-width: 900px;
  margin-bottom: 48px;
}
.ox-body p {
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 14px;
  color: var(--ink);
}
.ox-body strong { color: var(--tc-teal); font-weight: 700; }
.ox-tagline {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--tc-coral);
  color: #fff;
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.5rem !important;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-radius: 3px;
  text-align: center;
}
.ox-tagline strong { color: #fff; }

/* Board portrait grid */
.ox-board {
  margin-top: 48px;
  margin-bottom: 48px;
  padding-top: 32px;
  border-top: 4px solid var(--tc-teal);
}
.ox-board-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.05;
  color: var(--tc-teal);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}
.ox-board-portraits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ox-board-portraits figure { margin: 0; text-align: center; }
.ox-board-portraits img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--tc-coral);
  display: block;
  margin-bottom: 12px;
}
.ox-board-portraits figcaption {
  font-family: var(--font-body);
}
.ox-board-portraits figcaption .role {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tc-teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.ox-board-portraits figcaption .name {
  display: block;
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--tc-coral);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Measure O stat panel */
.ox-measure {
  background: var(--tc-teal);
  color: #fff;
  padding: 36px 40px;
  border-radius: 4px;
}
.ox-measure-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.ox-measure-accent { color: var(--tc-orange); }
.ox-measure-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.ox-measure-stat {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ox-measure-stat:first-child { border-top: none; padding-top: 0; }
.ox-measure-stat dt {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--tc-orange);
  letter-spacing: -0.01em;
}
.ox-measure-stat dt .suffix { font-size: 0.65em; margin-left: 2px; }
.ox-measure-stat dd {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.45;
  color: #fff;
  margin: 0;
}
.ox-measure-funds {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: #fff;
  padding-top: 20px;
  border-top: 2px solid var(--tc-orange);
}
.ox-measure-funds strong {
  color: var(--tc-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .ox-board-portraits { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ox-measure { padding: 24px; }
  .ox-measure-stat { grid-template-columns: 110px 1fr; gap: 12px; }
}


/* =============================================================
   .gig-workers — Section 10, CGWU historic milestone.
   Layout: 2-col hero-illustration + story on top → timeline below.
   Red/black CGWU flavor (matches print).
============================================================= */
.section.gig-workers {
  background: #f5efe4;
  color: var(--ink);
}
.gig-workers .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 88px;
}
.gig-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}
.gig-hero-figure { margin: 0; }
.gig-hero-figure img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  display: block;
}
.gig-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c8332e;
  padding: 6px 12px;
  border: 2px solid #c8332e;
  border-radius: 3px;
  margin-bottom: 12px;
}
.gig-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(3rem, 5.5vw, 4.6rem);
  line-height: 0.95;
  color: #c8332e;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.gig-lede {
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
  border-top: 3px solid #c8332e;
  padding-top: 20px;
  margin-bottom: 24px;
  font-weight: 500;
}
.gig-lede strong { color: #c8332e; font-weight: 700; }
.gig-body p {
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.gig-body strong { color: #c8332e; font-weight: 700; }
.gig-body em { font-style: italic; }
.gig-priorities {
  list-style: none;
  padding: 12px 0;
  margin: 12px 0;
}
.gig-priorities li {
  font-size: 1.02rem;
  line-height: 1.5;
  padding: 4px 0 4px 20px;
  position: relative;
}
.gig-priorities li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: #c8332e;
  font-size: 0.9em;
}
.gig-cta-line {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(200, 51, 46, 0.08);
  border-left: 4px solid #c8332e;
  border-radius: 0 3px 3px 0;
}
.gig-cta-line a {
  color: #c8332e;
  text-decoration: underline;
  font-weight: 700;
}

/* Timeline */
.gig-timeline {
  background: #1a1a1a;
  color: #fff;
  padding: 40px 44px;
  border-radius: 4px;
}
.gig-timeline-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #c8332e;
}
.gig-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}
.gig-timeline-list li {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.gig-timeline-list li:first-child { border-top: none; padding-top: 4px; }
.gig-timeline-list .date {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.15rem;
  color: #c8332e;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.gig-timeline-list .event {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: #fff;
}
.gig-timeline-list li.milestone {
  background: rgba(200, 51, 46, 0.15);
  padding: 20px 24px;
  margin: 8px -24px 0;
  border-radius: 3px;
  border-top: none;
  border-left: 4px solid #c8332e;
}
.gig-timeline-list li.milestone .date {
  color: #fff;
  font-size: 1.3rem;
}
.gig-timeline-list li.milestone .event {
  font-weight: 700;
  color: #fff;
}

@media (max-width: 900px) {
  .gig-grid { grid-template-columns: 1fr; gap: 32px; }
  .gig-hero-figure { max-width: 400px; margin: 0 auto; }
  .gig-timeline { padding: 28px 24px; }
  .gig-timeline-list li { grid-template-columns: 100px 1fr; gap: 12px; }
}


/* =============================================================
   .healthright-360 — Section 11, statewide bargaining campaign.
   Full-width hero → gold headline band → cream body with facts panel.
   Print used yellow bar + purple body → we do same.
============================================================= */
.section.healthright-360 {
  background: var(--cream);
  padding: 0 0 88px;
}
.hr-hero {
  max-width: 1400px;
  margin: 40px auto 0;
  padding: 0 24px;
  position: relative;
}
.hr-hero img {
  width: 100%;
  height: auto;
  /* Cutout is 1932x1080 (1.79:1) with all 12 members standing full-body.
     Let the natural aspect ratio play out so nobody gets cropped off the sides. */
  border-radius: 3px 3px 0 0;
  display: block;
}
/* Headline overlay: sits in the empty purple space at the top-left of the
   cutout hero image. No gradient needed — the image is already solid purple. */
.hr-hero-overlay {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  padding: 40px 48px 24px;
  border-radius: 3px 3px 0 0;
  pointer-events: none;
}
.hr-hero-overlay .hr-headline {
  margin: 0;
  max-width: 720px;
}
.hr-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Gold deck band below the hero, replaces the previous headline-band. */
.hr-deck-band {
  background: var(--gold);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
.hr-deck-inner {
  padding: 32px 40px;
}
.hr-deck {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.35;
  color: var(--purple-2);
  font-weight: 700;
  max-width: 1100px;
  margin: 0;
}

.healthright-360 .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 0;
}
.hr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}
.hr-body p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 14px;
  color: var(--ink);
}
.hr-body strong { color: var(--purple-2); font-weight: 700; }
.hr-body em { font-style: italic; }
.hr-close {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--purple-2);
  color: var(--gold);
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.4rem !important;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border-radius: 3px;
  text-align: center;
}
.hr-close strong { color: var(--gold); }

.hr-facts {
  background: var(--purple-2);
  color: #fff;
  padding: 32px 28px;
  border-radius: 4px;
  position: sticky;
  top: 100px;
  align-self: start;
}
.hr-facts-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hr-facts-headline .gold { color: var(--gold); }
.hr-facts-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.hr-facts-list li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
.hr-facts-list li:first-child { border-top: none; padding-top: 0; }
.hr-facts-list strong { color: var(--gold); font-weight: 700; }

.hr-facts-services {
  padding-top: 16px;
  border-top: 2px solid var(--gold);
}
.services-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 6px;
}
.hr-facts-services p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #fff;
}

@media (max-width: 960px) {
  .hr-grid { grid-template-columns: 1fr; gap: 32px; }
  .hr-facts { position: static; }

  /* On mobile the overlaid headline collides with the members' faces.
     Unpin the overlay and stack it as a purple band above the hero photo. */
  .hr-hero { display: flex; flex-direction: column; }
  .hr-hero-overlay {
    position: static;
    order: -1;
    left: auto;
    right: auto;
    top: auto;
    padding: 24px 24px 20px;
    background: var(--purple-2);
    border-radius: 3px 3px 0 0;
  }
  .hr-hero img:first-child {
    border-radius: 0 0 3px 3px;
  }
  .hr-hero-overlay .hr-headline {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    max-width: none;
  }
}


/* =============================================================
   .save-the-date — Section 12, two events side-by-side.
============================================================= */
.section.save-the-date {
  background: var(--cream);
}
.save-the-date .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 88px;
}
.save-the-date .section-header {
  text-align: left;
  padding: 0;
  margin-bottom: 40px;
}

.std-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.std-event {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  border: 3px solid var(--purple-2);
  display: flex;
  flex-direction: column;
}
.std-event-photo {
  margin: 0;
  background: var(--purple-2);
}
.std-event-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}
.std-event-ffd .std-event-photo img {
  aspect-ratio: 3 / 4;
  max-height: 620px;
  object-fit: contain;
  background: #b8dcea;
}
.std-event-body {
  padding: 28px 28px 32px;
  flex: 1;
}
.std-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--purple-2);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 12px;
}
.std-headline {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.05;
  color: var(--purple-2);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.std-lede {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold);
}
.std-event-body p {
  font-size: 0.98rem;
  line-height: 1.55;
  margin-bottom: 12px;
  color: var(--ink);
}
.std-event-body strong { color: var(--purple-2); font-weight: 700; }
.std-details {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid rgba(45, 27, 105, 0.15);
}
.std-details > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(45, 27, 105, 0.08);
}
.std-details > div:first-child { border-top: none; padding-top: 4px; }
.detail-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--purple-2);
}
.detail-value {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
}

@media (max-width: 900px) {
  .std-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Stack label above value on mobile — long labels like REQUIREMENTS
     collide with the value column at narrow widths. */
  .std-details > div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .detail-label { margin-bottom: 2px; }
}


/* =============================================================
   .gilda — Section 13, back-page column by Gilda Valdez.
   Layout: vertical name rail on the left, main content on right.
   Hero photo → 5-tier body with gold-barred sub-headers → signoff.
============================================================= */
.section.gilda {
  background: var(--cream);
  padding: 72px 0 88px;
}
.gilda .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.gilda-rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--purple-2);
  display: flex;
  gap: 20px;
  padding: 0 8px;
  border-right: none;
  height: 100%;
}
.rail-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--purple-2);
  opacity: 0.85;
}
.rail-name {
  font-size: 3rem;
  letter-spacing: -0.005em;
  color: var(--purple-2);
  line-height: 1;
}

.gilda-main { max-width: 900px; }

.gilda-hero {
  margin: 0 0 24px;
  position: relative;
}
.gilda-hero img:first-child {
  width: 100%;
  height: auto;
  /* Show the full editorial photo — banner + full group with feet.
     Nearly-square source (2400x2097) needs its natural aspect to breathe. */
  border-radius: 3px;
  display: block;
}
.gilda-inset {
  position: absolute;
  bottom: -32px;
  right: 24px;
  width: 130px !important;
  height: 130px !important;
  border-radius: 50%;
  border: 5px solid var(--gold);
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.gilda .section-header {
  margin-top: 48px;
  margin-bottom: 24px;
  padding: 0;
  text-align: left;
}
.gilda-eyebrow {
  background: var(--purple-2);
  color: var(--gold);
}
.gilda-headline {
  color: var(--purple-2);
  margin-top: 10px;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
}

.gilda-body p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 14px;
  color: var(--ink);
}
.gilda-body strong { color: var(--purple-2); font-weight: 700; }
.gilda-tier {
  font-family: var(--font-display, "loos-compressed", sans-serif);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--purple-2);
  margin-top: 28px;
  margin-bottom: 6px;
  padding-left: 14px;
  border-left: 4px solid var(--gold);
  text-transform: none;
}
.gilda-close {
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(45, 27, 105, 0.05);
  border-left: 4px solid var(--purple-2);
  border-radius: 0 3px 3px 0;
  font-size: 1.05rem;
}
.gilda-close strong { color: var(--purple-2); }

.gilda-signoff {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.gilda-signoff .signoff-label em {
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
}
.gilda-signoff img {
  height: clamp(36px, 3.4vw, 46px);
  width: auto;
  display: block;
}
.signoff-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  margin-top: 4px;
  color: var(--ink);
}
.signoff-name strong { color: var(--purple-2); }

@media (max-width: 720px) {
  .gilda .section-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gilda-rail { display: none; }
  .gilda-inset { width: 100px !important; height: 100px !important; right: 16px; bottom: -20px; }
}