/* Responsive layer.
   Breakpoints:
     ≤ 1280: canvas becomes fluid (max-width)
     ≤ 1024: tablet — looser side padding, smaller hero
     ≤ 860:  phone — single-column redesign, smaller type, scaled marquees */

@media (max-width: 1280px) {
  .canvas {
    width: 100%;
    max-width: 1280px;
  }
}

@media (max-width: 1024px) {
  :root,
  body[data-atmospheric],
  body[data-shift] {
    --pad-x: 36px;
  }
  .hero h1 { font-size: 64px; }
  .hero h1 .signature { height: 72px; vertical-align: -16px; }
  .sp-header h1 { font-size: 52px; }
  .field-card h2 { font-size: 40px; }
  .cta-panel p { font-size: 36px; }
  .sp-next h3 { font-size: 44px; }
}

@media (max-width: 860px) {
  :root,
  body[data-atmospheric],
  body[data-shift] {
    --pad-x: 20px;
  }

  /* ───── Top nav (mobile) ─────
     Home variant: single row with nav links left, CTA right (links wrap if tight).
     Section-page variant: brand link stacks above wrapped nav links on the left,
     CTA stays vertically centered on the right. */
  .topnav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 14px var(--pad-x);
  }
  .topnav nav {
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    letter-spacing: 0;
  }
  .topnav .btn-primary.btn-sm {
    flex-shrink: 0;
  }

  /* Section-page variant: .nav-left switches to column stack */
  .topnav.sp {
    padding: 14px var(--pad-x);
    align-items: center;
    gap: 12px;
  }
  .topnav.sp .nav-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .topnav.sp .nav-left > .home {
    font-size: 14px;
    font-weight: 500;
  }
  .topnav.sp .nav-left nav {
    font-size: 13px;
    gap: 6px 16px;
  }

  /* ───── Hero ───── */
  .hero { padding: 40px var(--pad-x) 16px; }
  .hero h1 {
    font-size: 38px;
    line-height: 1.02;
    letter-spacing: -0.015em;
  }
  .hero h1 .signature {
    height: 44px;
    vertical-align: -8px;
    margin-left: 4px;
  }
  .hero p {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 20px;
  }
  .hero p br { display: none; }

  /* ───── Photo marquee: scale the whole track via zoom ───── */
  .photo-marquee { padding: 8px 0 24px; }
  .photo-marquee-track { zoom: 0.5; gap: 24px; }

  /* ───── Decade lede + logo marquee ───── */
  .decade { padding: 20px var(--pad-x) 0; }
  .decade-lede {
    font-size: 18px;
    line-height: 1.35;
  }
  .logo-marquee-wrap {
    margin: 24px auto 0;
    padding: 16px 0;
  }
  .logo-marquee-track { zoom: 0.65; gap: 40px; }

  /* Constellation → fall back to a centered statement + 3-col logo grid */
  .logo-constellation {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 20px;
    padding: 16px 4px 8px;
    align-items: center;
    justify-items: center;
  }
  .logo-constellation .constellation-text {
    position: static;
    transform: none;
    grid-row: 1;
    grid-column: 1 / -1;
    max-width: 360px;
    margin: 0 auto 8px;
    font-size: 18px;
  }
  .logo-constellation .logo-spot {
    position: static !important;
    width: auto !important;
    max-width: 110px;
    height: 56px;
  }
  .logo-constellation .logo-spot img {
    max-height: 56px;
  }
  /* Lululemon + pebblepost need a touch more width to read */
  .logo-constellation .logo-spot[data-slug="lululemon"],
  .logo-constellation .logo-spot[data-slug="pebblepost"] {
    max-width: 130px;
  }

  /* Offerings intro paragraph */
  .offerings-intro {
    font-size: 18px;
    margin-bottom: 20px;
  }

  /* ───── Three offerings: single column ───── */
  .offerings { padding: 32px var(--pad-x) 8px; }
  .offerings h2 {
    font-size: 26px;
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .offerings-grid {
    grid-template-columns: 1fr;
  }
  .offering { padding: 20px 0; }
  .offering + .offering {
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--ink) 19%, transparent);
  }
  .offering .head { min-height: 0; gap: 14px; }
  .offering .head .title {
    font-size: 19px;
    line-height: 1.15;
  }
  .offering .head .ico { height: 44px !important; }
  .offering .blurb { font-size: 14px; }

  /* ───── Field card (lessons) ───── */
  .field-card {
    margin: 32px 12px 0;
    padding: 28px 20px 24px;
  }
  .field-card h2 {
    font-size: 28px;
    line-height: 1.05;
  }
  .field-card .sub {
    font-size: 14px;
    margin-top: 10px;
  }
  .accordion { margin-top: 20px; }
  .accordion-row { padding: 16px 0; }
  .accordion-row .row-head {
    grid-template-columns: 1fr 26px;
    gap: 12px;
  }
  /* Mobile: collapse row-body to single-column flow so the paragraph isn't
     trapped in the toggle column. The two empty bookend divs (left/right
     gutters from the desktop 3-col layout) are hidden. */
  .accordion-row .row-body {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 38px;
  }
  .accordion-row .row-body > div:empty { display: none; }
  .accordion-row .row-num { display: none; }
  .accordion-row .row-title {
    font-size: 17px;
    line-height: 1.22;
  }
  .accordion-row .row-toggle svg {
    width: 18px;
    height: 18px;
  }
  .accordion-row[aria-expanded="true"] .row-body { max-height: 600px; }
  .accordion-row .row-body p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* ───── Closing CTA panel ───── */
  .cta-panel {
    margin: 32px 12px 20px;
    padding: 32px 20px 28px;
  }
  .cta-panel p {
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: -0.005em;
  }
  .cta-panel .signoff {
    margin-top: 18px;
    gap: 10px;
  }
  .cta-panel .signoff .with-love { font-size: 13px; }
  .cta-panel .signoff img { height: 36px; }
  .cta-panel .cta-action { margin-top: 28px; }

  /* ───── Footer ───── */
  .footnav {
    flex-direction: column;
    gap: 6px;
    padding: 16px var(--pad-x);
  }

  /* About page sections */
  .about-bio { padding: 8px var(--pad-x) 32px; }
  .about-bio-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-portrait {
    max-width: 260px;
    margin: 0 auto;
  }
  .about-bio-text p { font-size: 18px; line-height: 1.4; }
  .about-bio-text p + p { margin-top: 20px; }

  .foundations { padding: 32px var(--pad-x) 24px; }
  .foundations h2 { font-size: 28px; margin-bottom: 32px; }
  .foundations-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .foundation { grid-template-columns: 36px 1fr; gap: 14px; }
  .foundation h3 { font-size: 19px; }
  .foundation p { font-size: 14px; }

  .background { padding: 36px var(--pad-x) 24px; }
  .background h2 { font-size: 24px; margin-bottom: 28px; }
  .background-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .background-col li { font-size: 14px; }

  /* ───── Section page header ─────
     Mobile: icon floats top-right, h1 (and sp-intro if it bumps up) wraps around it. */
  .sp-header {
    display: block; /* override desktop grid */
    padding: 44px var(--pad-x) 28px;
  }
  .sp-header-row {
    display: block; /* override desktop `display: contents` */
  }
  .sp-header > .sp-intro {
    margin-top: 20px;
    clear: both; /* always start the intro on its own line below the icon */
  }
  .sp-header h1 {
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -0.015em;
  }
  .sp-header .accent-mark {
    float: right;
    margin: 0 0 8px 16px;
    shape-outside: margin-box;
  }
  .sp-header .accent-mark svg,
  .sp-header .accent-mark img {
    width: auto;
    height: 88px;
    display: block;
  }
  .sp-intro {
    font-size: 16px;
    line-height: 1.45;
    margin-top: 20px;
  }

  /* ───── Index strip ───── */
  .sp-index {
    padding: 0 var(--pad-x) 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  /* ───── Case studies: stack vertically ───── */
  .sp-cases { padding: 0 var(--pad-x); }
  .sp-case {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .sp-case .case-num {
    padding-top: 0;
    font-size: 10px;
  }
  .sp-case .case-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .sp-case .case-head-left { gap: 14px; }
  .sp-case h2 {
    font-size: 22px;
    line-height: 1.15;
  }
  /* Override inline width/height on logo wrappers — shrink and let aspect ratio do the rest */
  .sp-case .case-logo {
    width: auto !important;
    height: 44px !important;
    max-width: 60%;
  }
  .sp-case .case-logo img {
    max-height: 44px;
  }
  .sp-case .open-toggle {
    align-self: flex-start;
    padding: 8px 14px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .sp-case .case-body {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 20px;
  }
  .sp-case .sect.wide { grid-column: auto; }
  .sp-case .sect .label {
    font-size: 9px;
    letter-spacing: 0.18em;
    margin-bottom: 10px;
  }
  .sp-case .sect p,
  .sp-case .sect li {
    font-size: 14px;
    line-height: 1.5;
  }
  .sp-case .img-marquee-track {
    animation-duration: 28s;
  }
  /* Smaller placeholder boxes for mobile */
  .sp-case .img-marquee .ph.sz1 { width: 200px; height: 140px; }
  .sp-case .img-marquee .ph.sz2 { width: 150px; height: 180px; }
  .sp-case .img-marquee .ph.sz3 { width: 180px; height: 130px; }
  .sp-case .img-marquee .ph.sz4 { width: 160px; height: 160px; }
  .sp-case .img-marquee .ph {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
  .sp-case .quote {
    padding: 20px 22px;
  }
  .sp-case .quote p {
    font-size: 17px;
    line-height: 1.4;
  }

  /* ───── Next-section CTA ───── */
  .sp-next { padding: 48px var(--pad-x) 56px; }
  .sp-next-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .sp-next .eyebrow { margin-bottom: 10px; }
  .sp-next h3 {
    font-size: 32px;
    line-height: 1.05;
  }
}

/* ───── Extra-narrow phones (≤ 380px) ───── */
@media (max-width: 380px) {
  .hero h1 { font-size: 32px; }
  .hero h1 .signature { height: 36px; vertical-align: -6px; }
  .sp-header h1 { font-size: 28px; }
  .cta-panel p { font-size: 21px; }
  .field-card h2 { font-size: 24px; }
  .offerings h2 { font-size: 22px; }
  .photo-marquee-track { zoom: 0.42; }
  .logo-marquee-track { zoom: 0.55; }
  .sp-header .accent-mark svg,
  .sp-header .accent-mark img { height: 72px; }
}