/*
 * machine-11.css
 * jimthompsoncreative.com/work/machine-11.html
 * Consolidated CSS for all Machine 11 sections.
 * Standardization pass v1 — 2026-05-16
 *
 * Load order: design-system.css → machine-11.css
 * All color tokens inherited from design-system.css.
 * No inline token redefinitions in this file.
 *
 * Sections:
 *   §1  Hero
 *   §2  The Idea
 *   §3  The Ecosystem
 *   §4  Content Hub
 *   §5  Kimmel
 *   §6  Media Integrations
 *   §7  Earned Love
 *   §8  Recognition
 *   §9  Next Bar
 */


/* ============================================================
   SHARED CLASS SYSTEM
   Single source of truth for eyebrow / headline / body
   across all M11 sections. Change here, changes everywhere.

   Eyebrow: IBM Plex Mono 500 / --chart / 14px / .28em / uppercase
   Headline: Plus Jakarta Sans 300 / --white / clamp(26–36px) / -0.015em
   Body:     Plus Jakarta Sans 300 / --silver-bright / 17px / 1.7
   ============================================================ */

.m11-section__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--chart);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.m11-section__headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 28px;
}

.m11-section__body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--silver-bright);
  line-height: 1.7;
}

.m11-section__body p + p {
  margin-top: 16px;
}


/* ============================================================
   §1 HERO
   90vh. Photo bg. Content anchored bottom-left.
   Image path corrected: aetna-machine-11-hero-thumb.jpg
   Eyebrow brought into shared spec (14px/500/--chart).
   ============================================================ */

.m11-hero {
  width: 100%;
  height: 90vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 7vw 7vh;
  background-image: url('../assets/machine_11/aetna-machine-11-hero-thumb.jpg');
  background-size: cover;
  background-position: center;
  background-color: #1a1e26;
}

.m11-hero__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.m11-hero__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--chart);
  text-transform: uppercase;
  letter-spacing: .28em;
  margin-bottom: 14px;
  text-shadow: 0 1px 20px rgba(0,0,0,0.5);
  opacity: 0;
  animation: riseIn 0.7s ease 0.3s forwards;
}

.m11-hero__headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 28px;
  text-shadow: 0 1px 20px rgba(0,0,0,0.5);
  text-wrap: balance;
  opacity: 0;
  animation: riseIn 0.8s ease 0.5s forwards;
}

.m11-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  animation: riseIn 0.7s ease 0.75s forwards;
}

.m11-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--chart);
  text-transform: uppercase;
  letter-spacing: .2em;
  text-decoration: none;
  min-height: 44px;
  padding: 12px 0;
  transition: color 0.2s ease;
}
.m11-cta-primary:hover { color: var(--chart-hot); }

.m11-cta-ghost {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: .2em;
  text-decoration: none;
  border-bottom: 1px solid rgba(157,162,181,0.3);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.2s, border-color 0.2s;
}
.m11-cta-ghost:hover {
  color: var(--white);
  border-color: var(--white);
}


/* ============================================================
   §2 THE IDEA
   Two-column: copy left, looping Vimeo bg video right.
   Inline chartreuse link → page-level overlay.
   ============================================================ */

.m3-idea {
  position: relative;
  padding: 100px 0;
}

.m3-idea-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 7vw;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 6vw;
  width: 100%;
  align-items: center;
}

.m3-idea-copy {
  max-width: 460px;
  position: relative;
}

.m3-idea-copy h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 28px;
}

/* Inline chartreuse link inside body copy */
.m3-inline-link {
  color: var(--chart);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s ease, text-decoration-thickness 0.25s ease;
}
.m3-inline-link:hover {
  color: var(--chart-hot);
  text-decoration-thickness: 2px;
}
@media (hover: none) {
  .m3-inline-link:hover {
    color: var(--chart);
    text-decoration-thickness: 1px;
  }
}

/* Video stage */
.m3-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.m3-video-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Entry reveal */
.m3-idea .m11-section__eyebrow,
.m3-idea .m3-idea-copy h2,
.m3-idea .m11-section__body,
.m3-idea .m3-video-stage {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.m3-idea.is-visible .m11-section__eyebrow {
  opacity: 1; transform: translateY(0);
}
.m3-idea.is-visible .m3-idea-copy h2 {
  opacity: 1; transform: translateY(0); transition-delay: 120ms;
}
.m3-idea.is-visible .m11-section__body {
  opacity: 1; transform: translateY(0); transition-delay: 240ms;
}
.m3-idea.is-visible .m3-video-stage {
  opacity: 1; transform: translateY(0); transition-delay: 360ms;
}

@media (max-width: 900px) {
  .m3-idea { padding: 80px 0; }
  .m3-idea-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 7vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m3-idea .m11-section__eyebrow,
  .m3-idea .m3-idea-copy h2,
  .m3-idea .m11-section__body,
  .m3-idea .m3-video-stage {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ============================================================
   §3 THE ECOSYSTEM
   Two-column: copy left (sticky), sphere diagram right.
   Preview banner CSS removed entirely.
   ============================================================ */

.ecosystem-section {
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 7vw;
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 60px;
  align-items: center;
}

.eco-copy { max-width: 340px; }

/* Ecosystem copy is visible immediately. Only spheres + arrows animate. */

.eco-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--chart);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  min-height: 44px;
  transition: opacity 0.55s ease, transform 0.55s ease, color 0.2s ease;
}
.eco-link:hover { color: var(--chart-hot); }

.eco-link-ring {
  width: 26px; height: 26px;
  border: 1px solid rgba(184, 212, 0, 0.7);
  background: rgba(184, 212, 0, 0.06);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eco-link-ring svg { width: 8px; height: 10px; }

/* Sphere stage — width: 100% so spheres and SVG arrows scale together
   (critical: they share the same coordinate space). Matches Visit Mum's
   eco-stage pattern: no max-width cap. Free-scaling with parent column. */
.eco-stage {
  position: relative;
  aspect-ratio: 1400 / 900;
  width: 100%;
}

.sphere-arrows-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sphere {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  transition: opacity var(--sphere-fade, 1.2s) cubic-bezier(0.22, 1, 0.36, 1),
              transform var(--sphere-fade, 1.2s) cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}
.sphere.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sphere img {
  width: 100%; height: auto; display: block;
  /* Sphere assets are transparent WebPs (except the-film.png which is also transparent).
     No blend mode needed. */
}

/* Sphere positions */
.sphere.hub          { left: 50%; top: 50%; width: 40%; }
.sphere.day          { left: 8%;  top: 18%; width: 25%; }
.sphere.film         { left: 8%;  top: 50%; width: 25%; }
.sphere.social       { left: 8%;  top: 82%; width: 25%; }
.sphere.kimmel       { left: 92%; top: 18%; width: 25%; }
.sphere.integrations { left: 92%; top: 50%; width: 25%; }
.sphere.earned       { left: 92%; top: 82%; width: 25%; }

.sphere-label {
  position: absolute; display: block;
  left: 0; right: 0; top: 100%;
  transform: translateY(14px);
  width: 100%; text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px; font-weight: 400;
  color: var(--silver-bright);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1;
}
.sphere.hub .sphere-label { font-size: 9px; }

/* Signal arrows */
.signal-arrow {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.signal-arrow.draw { opacity: 1; }
.signal-arrow .core,
.signal-arrow .halo {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.signal-arrow.draw .core,
.signal-arrow.draw .halo { stroke-dashoffset: 0; }

.terminus-bloom {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
}
.terminus-bloom.bloom {
  animation: bloomPulse 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bloomPulse {
  0%   { opacity: 0; transform: scale(0.4); }
  50%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.4; transform: scale(1); }
}

@media (max-width: 1100px) {
  .ecosystem-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 7vw;
  }
  .eco-copy {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sphere {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
  .signal-arrow { opacity: 1 !important; }
  .signal-arrow .core,
  .signal-arrow .halo { stroke-dashoffset: 0 !important; }
  .terminus-bloom { opacity: 0.4 !important; transform: scale(1) !important; }
  /* Eco copy doesn't animate — no reset needed for reduced motion */
}


/* ============================================================
   §4 CONTENT HUB
   Two-column: copy left (sticky), laptop + rotating post right.
   Generic class names (.eyebrow/.headline/.body) replaced with
   namespaced .m11-hub__* to prevent assembly clash.
   ============================================================ */

.hub-section {
  padding: 100px 7vw;
  background: var(--steel);
}

.hub-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
}

.hub-copy {
  max-width: 340px;
  position: sticky;
  top: 100px;
}

/* Color-only lift for named entities in body — weight 300 inherited */
.m11-section__body .lift {
  color: var(--white);
}

/* Laptop + post stack stage */
.hub-stage {
  position: relative;
  width: 100%;
}
.hub-laptop { width: 100%; }
.hub-laptop img { width: 100%; height: auto; }

.hub-post-stack {
  position: absolute;
  bottom: -10%;
  right: -3%;
  width: 28%;
  aspect-ratio: 824 / 1000;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
}

.hub-post {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
  will-change: opacity;
}
.hub-post.is-active { opacity: 1; }
.hub-post.is-leaving { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hub-post { transition: none; }
}

@media (max-width: 1100px) {
  .hub-section { padding: 60px 7vw; }
  .hub-grid { grid-template-columns: 1fr; gap: 40px; }
  .hub-copy { position: static; max-width: none; }
  .hub-stage {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
  }
  .hub-laptop { width: 100%; max-width: 600px; }
  .hub-post-stack {
    position: static;
    width: 40%;
    max-width: 240px;
    margin: 0 auto;
    filter: none;
  }
}

@media (max-width: 600px) {
  .hub-stage { max-width: 100%; }
  .hub-post-stack { width: 50%; max-width: 200px; }
}


/* ============================================================
   §5 KIMMEL
   Two-column: copy left, still poster right (decorative).
   CTA wired to page-level video overlay.
   ============================================================ */

.m11-kimmel {
  background: var(--steel);
  padding: 100px 7vw;
  contain: layout paint;
}

.m11-kimmel__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 60px;
  align-items: center;
}

.m11-kimmel__copy { max-width: 340px; }

.m11-kimmel__poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--mid);
}
.m11-kimmel__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .m11-kimmel { padding: 60px 7vw; }
  .m11-kimmel__inner { grid-template-columns: 1fr; gap: 40px; }
  .m11-kimmel__copy { max-width: 100%; }
}


/* ============================================================
   §6 MEDIA INTEGRATIONS
   Two-column: copy left (sticky), BuzzFeed flyby + supporting right.
   ============================================================ */

.m11-media {
  background: var(--steel);
  padding: 100px 7vw;
}

.m11-media__inner {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
}

.m11-media__copy {
  position: sticky;
  top: 100px;
  align-self: start;
  max-width: 340px;
}

/* Stage — internal 50/50 split */
.m11-media__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  min-width: 0;
  align-items: stretch;
}

.m11-stage__primary {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.m11-stage__supporting {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}


/* BuzzFeed flyby */
.m11-flyby {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--mid);
  flex: 1;
}

.m11-flyby__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--silver);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

.m11-flyby__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.m11-flyby__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.m11-flyby__article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(157, 162, 181, 0.1);
  min-height: 52px;
}

.m11-flyby__article-thumb {
  width: 52px;
  height: 38px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--steel);
}

.m11-flyby__article-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--silver-bright);
  line-height: 1.4;
  min-width: 0;
}

.m11-flyby__article-text strong {
  color: var(--white);
  font-weight: 500;
}

/* Supporting cards — Yahoo, HuffPo, Upworthy */
.m11-support-card {
  position: relative;
  overflow: hidden;
  background: var(--mid);
  flex: 1;
  min-height: 120px;
}

.m11-support-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m11-support-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: rgba(30, 32, 40, 0.85);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--silver);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .m11-media { padding: 60px 7vw; }
  .m11-media__inner { grid-template-columns: 1fr; gap: 40px; }
  .m11-media__copy { position: static; max-width: none; }
  .m11-media__stage { grid-template-columns: 1fr; gap: 24px; }
}


/* ============================================================
   §7 EARNED LOVE
   Header: eyebrow + headline + subhead.
   Three-column image rail, full bleed.
   ============================================================ */

.earned-love {
  background: var(--steel);
}

.earned-love__header {
  padding: 100px 7vw 60px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Subhead — slightly dimmer than headline, still readable */
.earned-love__subhead {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--silver-bright);
  line-height: 1.7;
  max-width: 620px;
}

.earned-love__subhead .lift {
  color: var(--white);
}

/* Three-column image rail */
.earned-love__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  width: 100%;
}

.earned-love__col {
  margin: 0;
  line-height: 0;
}

.earned-love__col img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .earned-love__header { padding: 80px 7vw 40px; }
  .earned-love__row { grid-template-columns: 1fr; }
}


/* ============================================================
   §8 RECOGNITION
   Eyebrow only — no intro copy (data section, §7 did the work).
   5-cell grid centered. Pattern from visit-mum §8.
   ============================================================ */

.m11-s10 {
  background: var(--steel);
  padding: 80px 7vw 100px;
}

.m11-s10__inner {
  max-width: 1400px;
  margin: 0 auto;
}

.m11-s10__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--mid);
  border-left: 1px solid var(--mid);
}

.m11-s10__cell {
  border-right: 1px solid var(--mid);
  border-bottom: 1px solid var(--mid);
  padding: 32px 28px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
}
.m11-s10__cell:nth-child(1) { animation: m11S10FadeUp 0.6s ease 0.25s forwards; }
.m11-s10__cell:nth-child(2) { animation: m11S10FadeUp 0.6s ease 0.32s forwards; }
.m11-s10__cell:nth-child(3) { animation: m11S10FadeUp 0.6s ease 0.39s forwards; }
.m11-s10__cell:nth-child(4) { animation: m11S10FadeUp 0.6s ease 0.46s forwards; }
.m11-s10__cell:nth-child(5) { animation: m11S10FadeUp 0.6s ease 0.53s forwards; }

.m11-s10__tier {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--chart);
  text-transform: uppercase;
  letter-spacing: .25em;
  line-height: 1;
}

.m11-s10__show {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 400;
  color: var(--white);
  letter-spacing: .04em;
  line-height: 1;
  margin-top: 12px;
}

.m11-s10__category {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.4;
  margin-top: auto;
}

@keyframes m11S10FadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .m11-s10__cell {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  .m11-s10__grid { grid-template-columns: repeat(2, 1fr); }
  .m11-s10__cell { min-height: 160px; padding: 28px 24px; }
  .m11-s10__show { font-size: clamp(26px, 3vw, 32px); }
}

@media (max-width: 600px) {
  .m11-s10__grid { grid-template-columns: 1fr; }
  .m11-s10__cell { min-height: 140px; padding: 24px 20px; }
}


/* ============================================================
   §9 NEXT BAR
   Tight band: 48px top / 80px bottom.
   Left: ← All Work. Right: next case study →
   Pattern from visit-mum §9.
   ============================================================ */

.m11-next {
  background: var(--steel);
  padding: 48px 7vw 80px;
  border-top: 1px solid var(--mid);
}

.m11-next__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.m11-next__back,
.m11-next__forward {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: .2em;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s ease;
}
.m11-next__back:hover,
.m11-next__forward:hover { color: var(--white); }
.m11-next__forward { color: var(--chart); }
.m11-next__forward:hover { color: var(--chart-hot); }

@media (max-width: 600px) {
  .m11-next__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}


/* ============================================================
   VIDEO OVERLAY
   Shared across all sections that trigger full video.
   ============================================================ */

.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.video-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.video-overlay__frame {
  width: 90vw;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  border: none;
}

.video-overlay__close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  min-height: 44px;
  transition: color 0.25s ease;
}
.video-overlay__close:hover { color: var(--white); }



/* ============================================================
   HERO GRADIENT MASK
   Pseudo-element overlay: darkens bottom-left where copy sits.
   Does not affect background-image declaration above.
   ============================================================ */

.m11-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(37, 40, 47, 0.80) 0%,
    rgba(37, 40, 47, 0.40) 45%,
    rgba(37, 40, 47, 0.0) 100%
  );
  pointer-events: none;
  z-index: 1;
}


/* ============================================================
   BUZZFEED FLYBY — verbatim working pattern from r6
   min-height/max-height bounds the unit so scroll is contained.
   White background + shadow makes it read as the BuzzFeed page.
   overscroll-behavior prevents page scroll-jacking.
   ============================================================ */

.m11-flyby--desktop {
  display: block;
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 480px;
  max-height: 720px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #FFFFFF;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55);
  outline-offset: 4px;
  contain: layout paint;
  scrollbar-width: thin;
  scrollbar-color: var(--silver) var(--steel);
}

.m11-flyby--desktop:focus-visible {
  outline: 2px solid var(--chart);
}

.m11-flyby--desktop .m11-flyby__image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.m11-flyby--desktop::-webkit-scrollbar { width: 8px; }
.m11-flyby--desktop::-webkit-scrollbar-track { background: var(--steel); }
.m11-flyby--desktop::-webkit-scrollbar-thumb {
  background: var(--silver);
  border-radius: 4px;
}
.m11-flyby--desktop::-webkit-scrollbar-thumb:hover { background: var(--silver-bright); }

.m11-flyby--mobile {
  display: none;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55);
  padding: 0;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.m11-flyby--mobile:focus-visible {
  outline: 2px solid var(--chart);
  outline-offset: 4px;
}

.m11-flyby--mobile .m11-flyby__image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.m11-flyby__mobile-affordance {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(
    to top,
    rgba(37, 40, 47, 0.95) 0%,
    rgba(37, 40, 47, 0.85) 60%,
    rgba(37, 40, 47, 0) 100%
  );
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--chart);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 900px) {
  .m11-flyby--desktop { display: none; }
  .m11-flyby--mobile  { display: block; }
}


/* ============================================================
   MOBILE BUZZFEED OVERLAY
   ============================================================ */

.m11-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: stretch;
}

.m11-overlay[hidden] { display: none; }

.m11-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.m11-overlay__panel {
  position: relative;
  margin: auto;
  width: 90vw;
  max-width: 680px;
  max-height: 90vh;
  background: var(--barrel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.m11-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mid);
  flex-shrink: 0;
}

.m11-overlay__title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--silver);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.m11-overlay__close {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--silver);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  min-height: 44px;
  transition: color 0.2s ease;
}
.m11-overlay__close:hover { color: var(--white); }

.m11-overlay__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.m11-overlay__body img {
  display: block;
  width: 100%;
  height: auto;
}


/* ============================================================
   MEDIA OUTLET HINTS — desktop/mobile toggle
   ============================================================ */

.m11-media__outlet-hint--mobile { display: none; }
.m11-media__outlet-hint--desktop { display: inline; }

@media (max-width: 900px) {
  .m11-media__outlet-hint--desktop { display: none; }
  .m11-media__outlet-hint--mobile  { display: inline; }
}


/* ============================================================
   SUPPORTING ITEMS — reveal on scroll
   ============================================================ */

.m11-supporting__item {
  margin: 0;
  line-height: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  min-height: 160px;
  overflow: hidden;
}

.m11-supporting__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .m11-supporting__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.m11-supporting__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 160px;
}



/* ============================================================
   FINISH-3 PATCHES
   - Global .lift (works anywhere, not just inside body)
   - Hero text-shadow tuning + stronger gradient
   - Play-ring CTA pattern (from visit-mum.css)
   - Hub dot indicators
   - BuzzFeed overscroll-behavior containment
   - Sphere stage spacing
   - Recognition fill width
   ============================================================ */


/* ─── Global .lift — color-only emphasis, no weight bump ─── */
.lift {
  color: var(--white);
}


/* ─── Hero — heavier gradient at bottom, stronger text-shadow ─── */
.m11-hero::after {
  background: linear-gradient(
    to top,
    rgba(37, 40, 47, 0.92) 0%,
    rgba(37, 40, 47, 0.70) 30%,
    rgba(37, 40, 47, 0.35) 60%,
    rgba(37, 40, 47, 0.0) 100%
  );
}

.m11-hero__eyebrow {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
}
.m11-hero__headline {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
}


/* ─── Play-ring CTA (from visit-mum.css) ─── */
.play-ring {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(184, 212, 0, 0.7);
  background: rgba(184, 212, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.play-ring::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--chart);
  margin-left: 2px;
  transition: border-color 0.2s ease;
}

/* Hover lift: ring border + triangle both shift to chart-hot when CTA hovered */
.m11-cta-primary:hover .play-ring,
.m11-cta-primary:focus-visible .play-ring {
  border-color: var(--chart-hot);
  background: rgba(235, 250, 160, 0.10);
}

.m11-cta-primary:hover .play-ring::after,
.m11-cta-primary:focus-visible .play-ring::after {
  border-color: transparent transparent transparent var(--chart-hot);
}


/* ─── Hub affordance — single line, centered below composition ─── */
.hub-stage { position: relative; }

.hub-affordance {
  /* Flows naturally below the stage. No more absolute-position collision
     with overlapping post stack. */
  display: block;
  margin: 60px auto 0 auto;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--chart);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.hub-post-stack { cursor: pointer; }

@media (max-width: 900px) {
  .hub-affordance { margin-top: 40px; }
}


/* ─── BuzzFeed — overscroll containment (primary fix) ─── */
.m11-flyby--desktop {
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
}


/* Eco-stage spec is in primary block above — no overrides here. */

/* Sphere images get a slight background to letterbox properly */
.sphere img {
  background: transparent;
}

/* Labels need legibility on darker steel */
.sphere-label {
  color: var(--silver-bright);
  font-size: 10px;
  letter-spacing: 0.25em;
}


/* ─── Recognition — fill width better ─── */
/* M11 recognition spec now consolidated in base block above (line 800).
   Confident scale standard: clamp(28px, 2.2vw, 36px) show, 180px min-height. */


/* ─── Inline link in §2 body — make it look like a CTA ─── */
.m3-inline-link {
  /* Already styled with chartreuse + underline. No changes here,
     just affirming the existing rules win the cascade. */
}



/* Scroll hint timing governed by design-system.css (4s delay). */



/* ============================================================
   §3 THE DAY
   Two-column: copy left / photo right. Same grammar as §2 Idea.
   ============================================================ */

.m11-day {
  position: relative;
  padding: 100px 0;
}

.m11-day-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 7vw;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 6vw;
  width: 100%;
  align-items: center;
}

.m11-day-copy {
  max-width: 460px;
}

.m11-day-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 28px;
  text-wrap: balance;
}

/* Day body uses unified spacing — CTA margin-top handles gap.
   No section-specific override. */

.m11-day-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mid);
}

.m11-day-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .m11-day { padding: 80px 0; }
  .m11-day-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 7vw;
  }
}



/* ============================================================
   FINISH-6 PATCHES
   ============================================================ */


/* ─── §2 IDEA — center copy vertically with smaller content ─── */
.m3-idea-grid { align-items: center; }


/* ─── §3 THE DAY — designed headline stanza ───
   Each line breathes. Final line gets a chartreuse rule above
   to signal it's the coda — the answer to the stanza above.
   Tighter tracking, wider leading. Reads like a poem.
*/

.m11-day-headline {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 200;
  font-size: clamp(28px, 2.6vw, 40px);
  color: var(--white);
  letter-spacing: -0.02em;
  margin: 0 0 36px 0;
  text-wrap: balance;
}

.m11-day-line {
  display: block;
  line-height: 1.18;
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Coda: the punch line. Slight pause via top margin, hairline rule,
   weight bump to 300 so it lands. */
.m11-day-line--coda {
  margin-top: 22px;
  padding-top: 22px;
  position: relative;
  font-weight: 300;
  color: var(--white);
}

.m11-day-line--coda::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--chart);
}

/* Staggered fade-in for each line when section enters viewport */
.m11-day.is-visible .m11-day-line:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.m11-day.is-visible .m11-day-line:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.m11-day.is-visible .m11-day-line:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 360ms; }
.m11-day.is-visible .m11-day-line:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .m11-day-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ─── §3 THE DAY image treatment ───
   Image is a video still and reads soft. Add a subtle
   vignette + slight contrast lift to give it presence.
*/

.m11-day-image {
  position: relative;
  border-radius: 0;
}

.m11-day-image img {
  /* Slight contrast/saturation lift for the video still */
  filter: contrast(1.06) saturate(1.04);
}


/* ─── LIFT — color-only emphasis, weight stays 300 ───
   Match Ungrounded: same weight as body, just brighter color.
   Visual weight comes from contrast (--silver-bright → --white),
   not from font-weight change. NO bolding.
*/

.lift,
.m11-section__body .lift,
.earned-love__subhead .lift {
  color: var(--white);
  font-weight: inherit; /* stays at parent's weight (300 for body) */
}


/* ─── §5 HUB body to lift spacing ───
   Lift was sitting too close to preceding body. The lift is
   inline so we don't add margin to it — instead ensure body
   line-height gives breathing room.
*/

.hub-section .m11-section__body {
  line-height: 1.7;
}


/* ─── ALL CTAs — UNIFIED TREATMENT ───
   No conceptual reason to vary. One pattern, applied everywhere.
   Visit Mum reference: 13px / 500 / .2em / 44px min-height / 12px 0 padding.
   Play-ring pattern from visit-mum.css.
*/

.m11-cta-primary,
.m11-cta-ghost {
  /* Both share base typography rules */
  font-family: 'IBM Plex Mono', monospace;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .2em;
  min-height: 44px;
  padding: 12px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.m11-cta-primary {
  font-size: 13px;
  font-weight: 500;
  color: var(--chart);
}
.m11-cta-primary:hover { color: var(--chart-hot); }

.m11-cta-ghost {
  font-size: 12px;
  font-weight: 500;
  color: var(--silver);
}
.m11-cta-ghost:hover { color: var(--white); }

.m11-cta-primary:focus-visible,
.m11-cta-ghost:focus-visible {
  outline: 1px solid var(--chart);
  outline-offset: 6px;
  border-radius: 2px;
}

/* Kimmel + Day CTAs no longer need custom rules — they use .m11-cta-primary */


/* ─── §7 BUZZFEED CAPTION ───
   Below the unit. Chartreuse so it can't be missed. Two-line:
   label first (heavier), then hint (lighter) on second line if needed.
   Single line on desktop, wraps on mobile if narrow.
*/

.m11-flyby__caption {
  margin: 14px 0 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1.4;
}

.m11-flyby__caption-label {
  font-weight: 500;
  color: var(--chart);
}

/* State-aware second span — shows different copy locked vs unlocked.
   Default: locked state visible, unlocked hidden. After click: vice versa. */
.m11-flyby__caption-state {
  font-weight: 400;
  color: var(--silver-bright);
  letter-spacing: 0.2em;
}

.m11-flyby__caption-state[data-state="unlocked"] { display: none; }
.m11-flyby__caption.is-unlocked .m11-flyby__caption-state[data-state="locked"]   { display: none; }
.m11-flyby__caption.is-unlocked .m11-flyby__caption-state[data-state="unlocked"] { display: inline; }

@media (max-width: 900px) {
  .m11-flyby__caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}


/* ─── §7 SUPPORTING ITEMS — add space between Yahoo/HuffPo/Upworthy ───
   They were reading as one continuous unit. Each gets its own breathing room.
*/

.m11-stage__supporting {
  display: flex;
  flex-direction: column;
  gap: 16px; /* spacing between articles */
  min-width: 0;
  justify-content: space-between;
}

.m11-supporting__item {
  margin: 0;
  line-height: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.m11-supporting__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.m11-supporting__item img {
  display: block;
  width: 100%;
  height: auto;
}


/* ─── §8 EARNED LOVE — standard two-column header structure ───
   Eyebrow/headline/body sit at the same page indent as every other
   section header on the page. NOT visually married to the marquee.
   Marquee is its own block below, full-bleed, with breathing room
   between cells.
*/

.earned-love {
  background: var(--steel);
}

/* Header — same indent + max-width as visit-mum / m11-media section headers */
.earned-love__header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 7vw 60px;
}

.earned-love__header-inner .m11-section__body {
  max-width: 720px;
}

/* Marquee row — separate from header. Full-bleed minus standard 7vw padding,
   gaps between cells so they read as three distinct articles. */
.earned-love__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 0 7vw 100px;
  max-width: 1600px;
  margin: 0 auto;
}

.earned-love__col {
  margin: 0;
  line-height: 0;
}

.earned-love__col img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .earned-love__header-inner { padding: 80px 7vw 40px; }
  .earned-love__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 7vw 80px;
  }
}



/* ─── CTA spacing — air between body copy and CTA ───
   Ungrounded pattern: ~32px between last body paragraph and CTA.
   Adjacent sibling selector targets any CTA directly after body.
*/
/* ─── CTA spacing — single system rule ───
   32px between last line of body and CTA. Applies everywhere.
   Ungrounded pattern.
*/
.m11-section__body + .m11-cta-primary,
.m11-section__body + .m11-cta-ghost {
  margin-top: 32px;
}



/* ============================================================
   FINISH-7 PATCHES
   ============================================================ */


/* ─── HERO SUPPORT COPY ───
   Sits between headline and CTAs. Body weight, silver-bright.
*/

.m11-hero__support {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 200;
  color: var(--white);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 0 28px 0;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: riseIn 0.7s ease 0.65s forwards;
}


/* ─── §3 THE DAY — more air between stanza lines ─── */

.m11-day-line {
  margin-bottom: 22px;
  line-height: 1.22;
}

.m11-day-line--coda {
  margin-top: 30px;
  padding-top: 30px;
}


/* ─── HUB AFFORDANCE as button ───
   It's now a <button>, so reset native button styles.
*/

.hub-affordance {
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  pointer-events: auto; /* override the earlier pointer-events: none */
  transition: color 0.2s ease;
}

.hub-affordance:hover,
.hub-affordance:focus-visible {
  color: var(--chart-hot);
}

.hub-affordance:focus-visible {
  outline: 1px solid var(--chart);
  outline-offset: 4px;
}


/* ─── §7 BUZZFEED — click-to-activate locked state ───
   Default: locked (no scroll, overlay visible).
   On activate: overlay hides, scroll unlocks, cursor changes.
*/

.m11-flyby--desktop.is-locked {
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}

.m11-flyby--desktop.is-locked:hover,
.m11-flyby--desktop.is-locked:focus-visible {
  box-shadow:
    0 20px 50px -20px rgba(0, 0, 0, 0.55),
    0 0 0 2px var(--chart);
}

.m11-flyby--desktop:not(.is-locked) {
  cursor: ns-resize;
}

.m11-flyby--desktop {
  position: relative;
}



/* ============================================================
   FINISH-10 MOBILE QA PASS
   Tightens every new addition (hero support, Day stanza,
   BuzzFeed caption, Earned Love restructure, hub affordance,
   play-ring hover) for narrow viewports.
   ============================================================ */

@media (max-width: 900px) {

  /* Hero support copy — scale down, tighten leading */
  .m11-hero__support {
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    margin-bottom: 24px;
  }

  /* §3 Day stanza — keep stanza shape but tighter on small screens */
  .m11-day-headline {
    font-size: clamp(24px, 6vw, 32px);
  }
  .m11-day-line {
    margin-bottom: 16px;
  }
  .m11-day-line--coda {
    margin-top: 22px;
    padding-top: 22px;
  }

  /* §7 BuzzFeed caption — already stacks via existing rule; ensure
     state-aware spans wrap cleanly */
  .m11-flyby__caption {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .m11-flyby__caption-state {
    letter-spacing: 0.16em;
  }

  /* §8 Earned Love header — already handled by earned-love__header-inner
     padding override; nothing extra needed */

  /* Hub affordance — already handled by margin-top: 40px override */
}

@media (max-width: 600px) {

  /* Hero CTAs stack cleanly */
  .m11-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* §2 Idea — CTA stays under body with proper margin */
  .m3-idea-copy .m11-cta-primary {
    margin-top: 28px;
  }

  /* Day stanza — push line breaks tighter for narrow phones */
  .m11-day-headline {
    font-size: 22px;
  }
}