/* ===================================================== */
/* CASE STUDY PAGE STYLES                                */
/* ----------------------------------------------------- */
/* Shared case-study styling for pages inside            */
/* html/case-studies/. This file loads after             */
/* css/styles.css and extends the existing spread system. */
/* ===================================================== */

/* ===================================================== */
/* CASE STUDY TOKENS                                     */
/* ----------------------------------------------------- */
/* Page-level control panel for editorial project pages. */
/* Shared site tokens should stay in css/styles.css.     */
/* ===================================================== */

:root {
  /* ===================================================== */
  /* EDITORIAL CASE STUDY TOKENS                           */
  /* ----------------------------------------------------- */
  /* Controls hero media, metadata, captions, and          */
  /* case-study-specific spread variations.                */
  /* ===================================================== */
  --case-study-page-gap: 48px;
  --case-study-hero-bg: #f3f3f1;
  --case-study-hero-media-position: 50% 50%;
  --case-study-hero-media-scale: 1;
  --case-study-article-width: 704px;
  --case-study-article-font-size: 25px;
  --case-study-article-line-height: 1.48;
  --case-study-article-paragraph-gap: 34px;
  --case-study-listen-height: 152px;
  --case-study-caption-size: 11px;
  --case-study-caption-line-height: 1.45;
  --case-study-caption-color: rgba(17, 17, 17, 0.62);
  --case-study-meta-gap: 18px;
  --case-study-meta-label-size: 12px;
  --case-study-meta-value-size: 18px;
  --case-study-pullquote-size: 44px;
  --case-study-pullquote-line-height: 1.18;
  --case-study-cta-height: 168px;
  --case-study-cta-bg: #ffffff;
  --case-study-nav-height: 180px;
  --case-study-nav-bg: #f7f7f5;
}

/* ===================================================== */
/* CASE STUDY FOUNDATION                                 */
/* ----------------------------------------------------- */
/* Case studies use the shared page shell and then build  */
/* a controlled editorial sequence from spread blocks.   */
/* ===================================================== */

.case-study-page {
  display: flex;
  flex-direction: column;
  gap: var(--case-study-page-gap);
  padding-bottom: var(--case-study-page-gap);
}

/* ===================================================== */
/* CASE STUDY HERO                                       */
/* ----------------------------------------------------- */
/* Opening spread with project identity on the left page */
/* and a full-page media field on the right page.        */
/* ===================================================== */

.case-study-hero {
  background: var(--color-bg);
}

.case-study-hero .spread__page--right .spread__inner {
  padding-top: var(--page-text-inset-top);
  padding-bottom: var(--page-text-inset-bottom);
  padding-left: var(--page-text-inset-gutter);
  padding-right: var(--page-text-inset-outer);
}

.case-study-hero__text {
  display: grid;
  max-width: 376px;
  width: max-content;
  padding-top: 96px;
}

.case-study-hero .spread__page--right .case-study-hero__text {
  margin-left: 0;
}

.case-study-hero--centered-text .spread__page--right .spread__inner {
  justify-content: center;
}

.case-study-hero--centered-text .case-study-hero__text {
  padding-top: 0;
}

.case-study-hero__kicker {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-secondary);
  font-size: var(--case-study-meta-label-size);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.case-study-hero__title {
  width: fit-content;
}

.case-study-hero__title-line {
  display: block;
  white-space: nowrap;
}

.case-study-meta.case-study-hero__meta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  width: 100%;
  margin-top: calc(var(--space-2xl) - 28px);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-color-soft);
}

/* Pin the two text blocks to the outer tracks so the divider can be lifted
   out of flow (it becomes an absolute overlay) without the right block
   collapsing into the empty center track. */
.case-study-hero__meta > .case-study-meta__item:first-child {
  grid-column: 1;
}

.case-study-hero__meta > .case-study-meta__item:last-child {
  grid-column: 3;
}

.case-study-hero__meta .case-study-meta__item {
  display: grid;
  justify-items: center;
  width: 100%;
  gap: 8px;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
  text-align: center;
}

.case-study-hero__meta .case-study-meta__value {
  line-height: 1.35;
}

.case-study-hero__meta-line {
  display: block;
}

.case-study-hero__meta-item {
  min-width: 0;
}

.case-study-hero__meta-divider {
  /* Absolute overlay so the line can be centered between the actual word
     edges (the right edge of the longest left line and the left edge of the
     longest right line) rather than at the geometric center of the row.
     `left`/`top`/`height` are refined per breakpoint in case-study.js; the
     values here are the graceful fallback (geometric center) if JS is off. */
  position: absolute;
  top: var(--space-md);
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-color-soft);
}

.case-study-hero--centered-text .case-study-hero__meta-divider {
  min-height: 70px;
}

.case-study-hero__media-frame {
  --spread-media-position: var(--case-study-hero-media-position);
  --spread-media-scale: var(--case-study-hero-media-scale);
}

.case-study-hero__media-frame img,
.case-study-hero__media-frame video {
  object-position: var(--spread-media-position, 50% 50%);
  transform: scale(var(--spread-media-scale, 1));
}

/* ===================================================== */
/* CASE STUDY INTRO                                      */
/* ----------------------------------------------------- */
/* Project summary and metadata arranged inside the      */
/* existing book-spread system.                          */
/* ===================================================== */

.case-study-intro .spread__text {
  max-width: 408px;
}

.case-study-kicker {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.64);
}

.case-study-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--chapter-size);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text);
}

.case-study-summary {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.case-study-meta {
  display: grid;
  gap: var(--case-study-meta-gap);
  margin: 0;
}

.case-study-meta__item {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-color-soft);
}

.case-study-meta__label {
  font-family: var(--font-secondary);
  font-size: var(--case-study-meta-label-size);
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.56);
}

.case-study-meta__value {
  font-family: var(--font-primary);
  font-size: var(--case-study-meta-value-size);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* ===================================================== */
/* CASE STUDY ARTICLE                                    */
/* ----------------------------------------------------- */
/* Magazine-style longform body. The main text runs as   */
/* one continuous readable column below the opening       */
/* spread.                                                */
/* ===================================================== */

.case-study-article {
  width: 100%;
}

.case-study-article__grid {
  width: min(calc(100% - 48px), var(--spread-max-width));
  margin-left: auto;
  margin-right: auto;
}

.case-study-article__header {
  width: min(100%, var(--case-study-article-width));
  margin: 0 auto var(--space-xl);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  border-top: 1px solid var(--line-color-soft);
  border-bottom: 1px solid var(--line-color-soft);
}

.case-study-article__eyebrow,
.case-study-article__date {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.case-study-article__date {
  text-align: right;
}

.case-study-article__eyebrow,
.case-study-article__date {
  transform: translateY(-8px);
}

.case-study-listen {
  width: min(100%, var(--case-study-article-width));
  min-height: var(--case-study-listen-height);
  margin: 0 auto var(--space-2xl);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
  background: #f5f5f4;
  border-radius: 10px;
}

.case-study-listen__audio {
  display: none;
}

.case-study-listen__thumb {
  width: 96px;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--case-study-hero-bg);
  border-radius: 8px;
}

.case-study-listen__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

.case-study-listen__thumb--mark {
  display: grid;
  place-items: center;
  background: #000000;
}

.case-study-listen__thumb--mark img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

.case-study-listen__content {
  display: grid;
  gap: var(--space-md);
  /* Allow the content column to shrink inside its grid track so the
     seek track and controls never push past the card edge on narrow
     viewports (default grid/flex min-width is auto = content size). */
  min-width: 0;
}

.case-study-listen__topline,
.case-study-listen__controls,
.case-study-listen__transport {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.case-study-listen__topline,
.case-study-listen__controls {
  justify-content: space-between;
}

.case-study-listen__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
}

.case-study-listen__speed,
.case-study-listen__controls {
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.7);
}

.case-study-listen__speed {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.case-study-listen__track {
  width: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.case-study-listen__track::-webkit-slider-runnable-track {
  height: 2px;
  background:
    linear-gradient(
      to right,
      var(--color-text) 0%,
      var(--color-text) var(--case-study-listen-progress, 0%),
      rgba(17, 17, 17, 0.3) var(--case-study-listen-progress, 0%),
      rgba(17, 17, 17, 0.3) 100%
    );
}

.case-study-listen__track::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border-radius: 50%;
  border: 0;
  background: var(--color-text);
}

.case-study-listen__track::-moz-range-track {
  height: 2px;
  background: rgba(17, 17, 17, 0.3);
}

.case-study-listen__track::-moz-range-progress {
  height: 2px;
  background: var(--color-text);
}

.case-study-listen__track::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  background: var(--color-text);
}

.case-study-listen__transport {
  justify-content: center;
  flex: 1 1 auto;
}

.case-study-listen__play,
.case-study-listen__skip {
  appearance: none;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.case-study-listen__play {
  width: 46px;
  height: 46px;
}

.case-study-listen__play-icon {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid currentColor;
  transform: translateX(3px);
}

.case-study-listen__play.is-playing .case-study-listen__play-icon {
  width: 18px;
  height: 22px;
  border: 0;
  border-left: 6px solid currentColor;
  border-right: 6px solid currentColor;
  transform: none;
}

.case-study-listen__skip {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  font-family: var(--font-secondary);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.case-study-listen__skip::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(17, 17, 17, 0.3);
  border-radius: 50%;
}

.case-study-listen__skip::after {
  position: absolute;
  top: 50%;
  z-index: 1;
  font-family: var(--font-secondary);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}

.case-study-listen__skip--back,
.case-study-listen__skip--forward {
  display: grid;
  place-items: center;
}

.case-study-listen__skip--back::after {
  content: "<";
  left: 9px;
  transform: translateY(-52%);
}

.case-study-listen__skip--forward::after {
  content: ">";
  right: 9px;
  transform: translateY(-52%);
}

.case-study-listen__skip-value {
  position: relative;
  z-index: 1;
}

.case-study-listen__skip--back .case-study-listen__skip-value {
  transform: translateX(5px);
}

.case-study-listen__skip--forward .case-study-listen__skip-value {
  transform: translateX(-5px);
}

.case-study-listen__time {
  min-width: 44px;
}

.case-study-listen__status {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.case-study-article__body {
  width: min(100%, var(--case-study-article-width));
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  font-family: var(--font-primary);
  font-size: var(--case-study-article-font-size);
  line-height: var(--case-study-article-line-height);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text);
}

.case-study-article__body p {
  margin: 0 0 var(--case-study-article-paragraph-gap);
}

.case-study-article__body > p:first-child::first-letter {
  float: left;
  padding-right: 8px;
  font-family: var(--font-primary);
  font-size: 4.35em;
  line-height: 0.7;
  margin-top: 0.12em;
}

.case-study-article__body > p:last-child {
  margin-bottom: 0;
}

/* ===================================================== */
/* CASE STUDY EDITORIAL BLOCKS                           */
/* ----------------------------------------------------- */
/* Reusable case-study compositions that sit on top of   */
/* the shared spread system.                             */
/* ===================================================== */

.case-study-section-label {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.case-study-section-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 40px;
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text);
}

.case-study-copy {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-tracking);
  color: var(--color-text);
}

.case-study-caption {
  margin: 10px 0 0;
  font-family: var(--font-secondary);
  font-size: var(--case-study-caption-size);
  line-height: var(--case-study-caption-line-height);
  letter-spacing: 0.04em;
  color: var(--case-study-caption-color);
}

.case-study-media-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--case-study-hero-bg);
}

.case-study-media-frame img,
.case-study-media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.case-study-media-frame--landscape {
  aspect-ratio: 16 / 9;
}

.case-study-media-frame--portrait {
  aspect-ratio: 3 / 4;
}

.case-study-media-frame--square {
  aspect-ratio: 1 / 1;
}

/* ===================================================== */
/* CASE STUDY IMAGE SETS                                 */
/* ----------------------------------------------------- */
/* Pair and grid blocks for visual sequencing. These     */
/* stay inside the spread pages for now.                 */
/* ===================================================== */

.case-study-image-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.case-study-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* ===================================================== */
/* CASE STUDY VIDEO PLAYER                               */
/* ----------------------------------------------------- */
/* Full-width inline video block placed between the      */
/* article body and the CTA. Native browser controls     */
/* handle seek, volume, and fullscreen without custom JS.*/
/* ===================================================== */

.case-study-video {
  width: min(calc(100% - 48px), var(--spread-max-width));
  margin-left: auto;
  margin-right: auto;
}

.case-study-video__player {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.case-study-video__player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-study-video__caption {
  font-family: var(--font-secondary);
  font-size: var(--case-study-caption-size);
  line-height: var(--case-study-caption-line-height);
  color: var(--case-study-caption-color);
  margin-top: 12px;
}

/* ===================================================== */
/* CASE STUDY PULL QUOTE                                 */
/* ----------------------------------------------------- */
/* Large statement moment used sparingly to pace the     */
/* reading experience.                                   */
/* ===================================================== */

.case-study-pullquote {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--case-study-pullquote-size);
  line-height: var(--case-study-pullquote-line-height);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text);
}

/* ===================================================== */
/* CASE STUDY NAVIGATION                                 */
/* ----------------------------------------------------- */
/* Quiet closing navigation back to Work and forward to  */
/* the next project.                                     */
/* ===================================================== */

.case-study-nav {
  width: min(calc(100% - 48px), var(--spread-max-width));
  min-height: var(--case-study-nav-height);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--case-study-nav-bg);
}

.case-study-nav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  color: var(--color-text);
  text-decoration: none;
}

.case-study-nav__link + .case-study-nav__link {
  border-left: 1px solid var(--line-color-soft);
  align-items: flex-end;
}

.case-study-nav__label {
  font-family: var(--font-secondary);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.case-study-nav__title {
  font-family: var(--font-primary);
  font-size: 26px;
  line-height: 1.18;
  font-weight: 400;
}

.case-study-nav__link:hover,
.case-study-nav__link:focus-visible {
  background: rgba(17, 17, 17, 0.035);
}

.case-study-nav__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* ===================================================== */
/* CASE STUDY CALL TO ACTION                             */
/* ----------------------------------------------------- */
/* Quiet inquiry moment that appears before the closing  */
/* navigation. It should invite contact without taking   */
/* over the next/back project controls.                  */
/* ===================================================== */

.case-study-cta {
  width: min(calc(100% - 48px), var(--spread-max-width));
  min-height: var(--case-study-cta-height);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  place-items: center;
  border-top: 1px solid var(--line-color-soft);
  border-bottom: 1px solid var(--line-color-soft);
  background: var(--case-study-cta-bg);
}

.case-study-cta__button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  gap: 8px;
  justify-items: center;
  color: var(--color-text);
  text-decoration: none;
  padding: 0;
}

.case-study-cta__label {
  font-family: var(--font-primary);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
}

.case-study-cta__email {
  font-family: var(--font-secondary);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.case-study-cta__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

.case-study-cta__button:hover .case-study-cta__label,
.case-study-cta__button:focus-visible .case-study-cta__label,
.case-study-cta__button.is-copied .case-study-cta__label,
.case-study-cta__button.is-error .case-study-cta__label {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.case-study-cta__button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 10px;
}

/* ===================================================== */
/* CASE STUDY RESPONSIVE STATES                          */
/* ----------------------------------------------------- */
/* Keeps editorial sections readable as spread pages     */
/* stack on smaller screens.                             */
/* ===================================================== */

@media (max-width: 899px) {
  :root {
    --case-study-page-gap: 56px;
    --case-study-pullquote-size: 34px;
    --case-study-cta-height: 144px;
    --case-study-nav-height: 140px;
  }

  .case-study-title {
    font-size: 54px;
  }

  .case-study-nav {
    grid-template-columns: 1fr;
  }

  .case-study-nav__link {
    padding: 24px;
    gap: 6px;
  }

  .case-study-nav__link + .case-study-nav__link {
    border-left: 0;
    border-top: 1px solid var(--line-color-soft);
  }

  .case-study-nav__title {
    font-size: 20px;
  }

  .case-study-nav__label {
    font-size: 8px;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .case-study-nav {
    grid-template-columns: 1fr 1fr;
  }

  .case-study-nav__link + .case-study-nav__link {
    border-left: 1px solid var(--line-color-soft);
    border-top: 0;
  }
}

@media (max-width: 1099px) {
  :root {
    --case-study-article-font-size: 19px;
    --case-study-nav-height: 152px;
  }

  .case-study-article__header,
  .case-study-listen {
    width: min(100%, var(--case-study-article-width));
  }

  .case-study-nav__link {
    padding: 28px;
    gap: 7px;
  }

  .case-study-nav__title {
    font-size: 22px;
  }

  .case-study-nav__label {
    font-size: 9px;
  }
}

@media (max-width: 767px) {
  :root {
    --case-study-page-gap: 44px;
    --case-study-cta-height: 128px;
    --case-study-nav-height: 110px;
  }

  .case-study-title {
    font-size: 44px;
  }

  .case-study-summary {
    font-size: 16px;
  }

  .case-study-section-title {
    font-size: 32px;
  }

  .case-study-listen {
    /* minmax(0, 1fr) (not 1fr) so the single column can shrink below
       its content's intrinsic size -- otherwise the seek bar + controls
       force the column wider than the card and overflow the rounded box. */
    grid-template-columns: minmax(0, 1fr);
  }

  .case-study-listen__thumb {
    display: none;
  }

  .case-study-image-pair,
  .case-study-image-grid {
    grid-template-columns: 1fr;
  }

  .case-study-nav {
    grid-template-columns: 1fr 1fr;
  }

  .case-study-nav__link {
    padding: 16px;
    gap: 4px;
  }

  .case-study-nav__link + .case-study-nav__link {
    border-left: 1px solid var(--line-color-soft);
    border-top: 0;
  }

  .case-study-nav__title {
    font-size: 16px;
  }

  .case-study-nav__label {
    font-size: 7px;
  }
}

/* ===================================================== */
/* SMALL PHONE : <= 480                                   */
/* ----------------------------------------------------- */
/* The Listen player's transport (two times + three      */
/* fixed-size buttons) plus full-size gaps and padding    */
/* is wider than a phone card. Tighten the horizontal     */
/* padding, the row gaps and the time min-width so the    */
/* whole player fits inside its rounded box down to       */
/* ~320px. Vertical padding stays comfortable.            */
/* ===================================================== */
@media (max-width: 480px) {
  .case-study-listen {
    padding: var(--space-md) var(--space-sm);
  }

  .case-study-listen__topline,
  .case-study-listen__controls,
  .case-study-listen__transport {
    gap: var(--space-sm);
  }

  .case-study-listen__time {
    min-width: 40px;
  }
}

/* ===================================================== */
/* PORTRAIT: align content to Scene One's book-frame      */
/* column                                                 */
/* ----------------------------------------------------- */
/* Portrait breakpoints mirror Scene One of the index:    */
/* `(max-width: 1300px) and (max-aspect-ratio: 6/5)` plus */
/* `(max-width: 767px)`. On these, the editorial column   */
/* (article body, listen player, CTA band, case-study     */
/* nav) is capped to the single-page book-frame's          */
/* horizontal extent — `min(600px source, 100vw - 32px)`  */
/* — so it never runs wider than the hero book frame above */
/* it. On really narrow / phone widths this is the         */
/* 100vw - 32px term (16px each side, matching the hero);  */
/* on wider portrait it settles at the 600px page column.  */
/* No height term is used here on purpose: the article is  */
/* long scrolling text, not a fixed-height book page.      */
/* The hero itself, the header and footer are untouched.   */
/* ===================================================== */
@media (max-width: 1300px) and (max-aspect-ratio: 6/5),
       (max-width: 767px) {
  .case-study-article__grid,
  .case-study-video,
  .case-study-cta,
  .case-study-nav {
    width: min(
      var(--book-frame-single-page-source-width, 600px),
      calc(100vw - 32px)
    );
  }
}