/* ===================================================== */
/* STUDIO PAGE STYLES                                    */
/* ----------------------------------------------------- */
/* Studio-only styling and composition rules.            */
/* This file loads after css/styles.css and should only  */
/* hold rules that describe html/studio.html.            */
/* ===================================================== */

/* ===================================================== */
/* STUDIO PAGE TOKENS                                    */
/* ----------------------------------------------------- */
/* Page-level control panel for the image-led Studio     */
/* page. Shared site tokens should stay in styles.css.   */
/* ===================================================== */

:root {
  /* ===================================================== */
  /* STUDIO LAYOUT TOKENS                                  */
  /* ----------------------------------------------------- */
  /* Controls image rhythm, section spacing, edition       */
  /* details, request pathway, and scheduler framing.      */
  /* ===================================================== */
  --studio-page-max-width: 1200px;
  --studio-wide-max-width: 1440px;
  --studio-page-side-padding: 24px;
  --studio-section-space: 112px;
  --studio-surface-bg: #f7f7f5;
  --studio-surface-border: rgba(17, 17, 17, 0.12);
  --studio-title-size: 72px;
  --studio-title-line-height: 1.06;
  --studio-statement-size: 22px;
  --studio-statement-line-height: 1.38;
  --studio-section-title-size: 42px;
  --studio-section-title-line-height: 1.16;
  --studio-copy-size: 16px;
  --studio-copy-line-height: 1.55;
  --studio-label-size: 11px;
  --studio-action-height: 48px;
  --studio-action-padding-x: 22px;
  --studio-hero-image-height: 68vh;
  --studio-gallery-gap: 16px;
  --studio-scheduler-height: 800px;
  /* Scene Three (Schedule) Book Frame scroll track. Mirrors the
     Programs Schedule scene: a one-viewport sticky stage held across
     a short scroll, so the frame reads with white above and below. */
  --studio-bookframe-scroll-height: 128vh;

  /* ===================================================== */
  /* STUDIO — BOOK FRAME ROUTER TOKENS                     */
  /* ----------------------------------------------------- */
  /* Describes the 1200×776 Book Frame at the active        */
  /* breakpoint. Scene One derives all dimensions from      */
  /* these tokens, not from hardcoded pixel values.         */
  /* ===================================================== */
  --studio-book-frame-open-spread-width: var(--book-frame-source-width);
  --studio-book-frame-open-spread-height: var(--book-frame-source-height);
  --studio-book-frame-page-stack-gap: 0px;
  --studio-book-frame-single-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px),
    calc((var(--app-viewport-height) - var(--header-clearance) - (var(--book-frame-viewport-clearance, 16px) * 2)) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
  );
  --studio-book-frame-single-page-height: calc(var(--studio-book-frame-single-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --studio-book-frame-single-page-gap: max(
    0px,
    calc(
      var(--app-viewport-height)
      - var(--header-clearance)
      - (var(--book-frame-viewport-clearance, 16px) * 2)
      - var(--studio-book-frame-single-page-height)
    )
  );
  --studio-book-frame-stacked-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px)
  );
  --studio-book-frame-stacked-page-height: calc(var(--studio-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --studio-book-frame-open-spread-scale: calc(var(--studio-book-frame-open-spread-width) / var(--book-frame-source-width));
  --studio-book-frame-single-page-scale: calc(var(--studio-book-frame-single-page-width) / var(--book-frame-single-page-source-width));
  --studio-book-frame-stacked-page-scale: calc(var(--studio-book-frame-stacked-page-width) / var(--book-frame-single-page-source-width));
  --studio-book-frame-layout-width: var(--studio-book-frame-open-spread-width);
  --studio-book-frame-layout-height: var(--studio-book-frame-open-spread-height);
  --studio-book-frame-layout-scale: var(--studio-book-frame-open-spread-scale);

  /* Shared Book Frame router for Scene One.                      */
  /* These describe the same rectangle Scene One's .spread__book  */
  /* renders at the active breakpoint.                            */
  /*                                                              */
  /*   layout-top   viewport-y of the active book frame           */
  /*                (matches where Scene One's .spread__book      */
  /*                starts vertically)                            */
  --studio-book-frame-layout-top: var(--header-clearance);

  /* Scene One source measurements (documentation tokens).        */
  /* Record the 1440 source values so breakpoint math is          */
  /* traceable back to the original approved measurements.        */
  --studio-scene-one-source-page-inset-top: 104px;
  --studio-scene-one-source-page-inset-bottom: 144px;
  --studio-scene-one-source-page-inset-outer: 80px;
  --studio-scene-one-source-page-inset-gutter: 144px;
  --studio-scene-one-source-text-field-width: 376px;
  --studio-scene-one-source-text-offset-y: 96px;
  --studio-scene-one-source-headline-size: 72px;

  /* Firefox rejects custom-property chains that depend on         */
  /* length/length division. These ratios preserve the same 1440  */
  /* source measurements without routing Scene One text through an */
  /* invalid scale value.                                          */
  --studio-scene-one-active-page-width: calc(var(--studio-book-frame-layout-width) * 0.5);
  --studio-scene-one-active-headline-size: calc(var(--studio-scene-one-active-page-width) * 0.12);
  --studio-scene-one-active-page-inset-top: calc(var(--studio-book-frame-layout-height) * 0.1340206);
  --studio-scene-one-active-page-inset-bottom: calc(var(--studio-book-frame-layout-height) * 0.185567);
  --studio-scene-one-active-page-inset-outer: calc(var(--studio-scene-one-active-page-width) * 0.1333333);
  --studio-scene-one-active-page-inset-gutter: calc(var(--studio-scene-one-active-page-width) * 0.24);
  --studio-scene-one-active-text-field-width: calc(var(--studio-scene-one-active-page-width) * 0.6266667);
  --studio-scene-one-active-text-offset-y: calc(var(--studio-book-frame-layout-height) * 0.1237113);
  /* Vertical nudge for the centered text block. Source: -118px at the 776px
     source page height (negative = up, positive = down). Stored as a unitless
     ratio (-118 / 776) and applied as layout-height * ratio so it scales per
     breakpoint without a length/length scale -- which Firefox rejects as
     invalid, collapsing the offset to 0 (text drops to dead-center). */
  --studio-scene-one-text-nudge: -0.1520619;
}

/* ===================================================== */
/* STUDIO PAGE FOUNDATION                                */
/* ----------------------------------------------------- */
/* Studio uses the shared page canvas but shifts the     */
/* rhythm toward large images and short text passages.   */
/* ===================================================== */

.studio-page {
  display: flex;
  flex-direction: column;
  gap: var(--studio-section-space);
  padding-bottom: var(--studio-section-space);
}

/* The scene-transition line is a shared component: styling lives in
   css/styles.css (.transition-line) and behavior in
   js/transition-line.js. Studio places it as the first child of the
   Scene Two article spread, whose leading flex gap is removed (see the
   article-spread margin-top) so it pins to the hero/Scene Two seam. */

/* ===================================================== */
/* STUDIO TYPOGRAPHY                                     */
/* ----------------------------------------------------- */
/* Page-specific type roles used outside generic spread  */
/* text profiles.                                        */
/* ===================================================== */

.studio-kicker,
.studio-section-label {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--studio-label-size);
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

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

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

.studio-copy,
.studio-scheduler__copy {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--studio-copy-size);
  line-height: var(--studio-copy-line-height);
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* ===================================================== */
/* STUDIO ACTIONS                                        */
/* ----------------------------------------------------- */
/* Shared Studio CTA treatment. These are quiet links    */
/* into the scheduler section, not loud product buttons. */
/* ===================================================== */

.studio-action {
  min-height: var(--studio-action-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--studio-action-padding-x);
  border: 1px solid var(--color-text);
  font-family: var(--font-secondary);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.studio-action--primary {
  background: var(--color-text);
  color: var(--color-bg);
}

.studio-action--secondary {
  background: transparent;
  color: var(--color-text);
}

.studio-action:hover,
.studio-action:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.studio-action:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.studio-hero__statement {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--studio-statement-size);
  line-height: var(--studio-statement-line-height);
  letter-spacing: 0.01em;
}

.studio-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ===================================================== */
/* GALLERY BAND                                          */
/* ----------------------------------------------------- */
/* Curated photography sequence. This is a paced image   */
/* band rather than a portfolio grid.                    */
/* ===================================================== */

.studio-gallery {
  padding-left: var(--studio-page-side-padding);
  padding-right: var(--studio-page-side-padding);
}

.studio-gallery__inner {
  width: 100%;
  max-width: var(--studio-page-max-width);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: var(--studio-gallery-gap);
}

.studio-gallery__item {
  margin: 0;
  overflow: hidden;
  background: var(--studio-surface-bg);
}

.studio-gallery__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.studio-gallery__item--wide {
  aspect-ratio: 16 / 9;
}

.studio-gallery__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--studio-gallery-gap);
}

.studio-gallery__item--portrait {
  aspect-ratio: 3 / 4;
}

/* ===================================================== */
/* STUDIO INTRO SPREAD                                   */
/* ----------------------------------------------------- */
/* Short editorial bridge between image rhythm and       */
/* practical session details.                            */
/* ===================================================== */

.studio-intro .spread__text,
.studio-edition .spread__text {
  max-width: 420px;
}

/* ===================================================== */
/* EDITION DETAILS                                       */
/* ----------------------------------------------------- */
/* Current portrait edition offer structured inside the  */
/* book/spread system.                                   */
/* ===================================================== */

.studio-edition__name {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 64px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: 0;
}

.studio-edition__meta {
  display: grid;
  gap: 16px;
  margin: 0;
}

.studio-edition__meta-item {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--studio-surface-border);
}

.studio-edition__meta dt,
.studio-detail-title {
  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);
}

.studio-edition__meta dd {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--studio-copy-size);
  line-height: var(--studio-copy-line-height);
}

.studio-detail-title {
  margin: 0;
}

.studio-detail-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 18px;
  font-family: var(--font-primary);
  font-size: var(--studio-copy-size);
  line-height: 1.45;
}

/* ===================================================== */
/* HOW IT WORKS STRIP                                    */
/* ----------------------------------------------------- */
/* Simple numbered sequence that explains the session    */
/* without becoming a dense instruction block.           */
/* ===================================================== */

.studio-process {
  padding-left: var(--studio-page-side-padding);
  padding-right: var(--studio-page-side-padding);
}

.studio-process__inner {
  width: 100%;
  max-width: var(--studio-page-max-width);
  margin-left: auto;
  margin-right: auto;
}

.studio-section-head {
  width: min(100%, 780px);
  display: grid;
  gap: 14px;
  margin-bottom: 34px;
}

.studio-process__list {
  counter-reset: studio-step;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--studio-surface-border);
}

.studio-process__list li {
  counter-increment: studio-step;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
  background: var(--studio-surface-bg);
  font-family: var(--font-primary);
  font-size: 17px;
  line-height: 1.35;
}

.studio-process__list li::before {
  content: counter(studio-step, decimal-leading-zero);
  font-family: var(--font-secondary);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: rgba(17, 17, 17, 0.58);
}

/* ===================================================== */
/* CONTACT SHEET BAND                                    */
/* ----------------------------------------------------- */
/* Broad image rhythm that keeps the Studio page open to */
/* more than limited portrait editions.                  */
/* ===================================================== */

.studio-contact-sheet {
  width: min(calc(100% - (var(--studio-page-side-padding) * 2)), var(--studio-wide-max-width));
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.1fr;
  gap: var(--studio-gallery-gap);
}

.studio-contact-sheet__image {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--studio-surface-bg);
}

.studio-contact-sheet__image:nth-child(2) {
  margin-top: 72px;
}

.studio-contact-sheet__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===================================================== */
/* SCENE THREE — SCHEDULE (BOOK FRAME SCENE)            */
/* ----------------------------------------------------- */
/* Mirrors the Programs Schedule scene, rebuilt with the */
/* Studio Book Frame router so no Programs tokens are     */
/* referenced. The section is a 128vh scroll track; the   */
/* stage locks one viewport into place; a "Schedule:"     */
/* kicker and a Baskerville statement sit on the Book      */
/* Frame, and the Acuity embed fills the field box below  */
/* — the same composition and viewport logic as Programs. */
/* ===================================================== */
.studio-scheduler {
  /* --- Active Book Frame (Studio router) --- */
  --ss-frame-width: var(--studio-book-frame-layout-width);
  --ss-frame-height: var(--studio-book-frame-layout-height);
  --ss-frame-top: var(--studio-book-frame-layout-top);
  --ss-content-width: calc(var(--ss-frame-width) * 0.8666667);

  /* --- Source ratios (y / 776, x / 1200, type / 1040) --- */
  --ss-content-y-ratio: 0.1391753;        /* 108 / 776  */
  --ss-statement-y-ratio: 0.1881443;      /* 146 / 776  */
  --ss-statement-space-ratio: 0.1095361;  /*  85 / 776  */
  --ss-side-padding-ratio: 0.02;          /*  24 / 1200 */
  --ss-kicker-size-ratio: 0.0115384615;   /*  12 / 1040 */
  --ss-statement-size-ratio: 0.025;       /*  26 / 1040 */

  /* --- Active geometry (viewport y + field sizes) --- */
  --ss-content-top: calc(var(--ss-frame-top) + (var(--ss-frame-height) * var(--ss-content-y-ratio)));
  --ss-statement-offset: calc(var(--ss-frame-height) * (var(--ss-statement-y-ratio) - var(--ss-content-y-ratio)));
  --ss-statement-space: calc(var(--ss-frame-height) * var(--ss-statement-space-ratio));
  --ss-side-padding: calc(var(--ss-frame-width) * var(--ss-side-padding-ratio));

  /* --- Type --- */
  --ss-kicker-size: max(11px, calc(var(--ss-content-width) * var(--ss-kicker-size-ratio)));
  --ss-kicker-line-height: 1.25;
  --ss-kicker-line-box-height: calc(var(--ss-kicker-size) * var(--ss-kicker-line-height));
  --ss-statement-size: max(15px, calc(var(--ss-content-width) * var(--ss-statement-size-ratio)));
  --ss-statement-line-height: 1.2;

  /* --- Portrait composition (single tall page) --- */
  --ss-portrait-statement-y-ratio: 0.0568862;
  --ss-portrait-field-y-ratio: 0.1497006;
  --ss-portrait-frame-edge-gap: max(
    0px,
    calc(var(--ss-frame-top) - var(--header-logo-line-y))
  );

  /* Field box fills from its top down to the bottom of the frame. */
  --ss-field-fill-height: max(0px, calc(
    var(--ss-frame-top)
    + var(--ss-frame-height)
    - var(--ss-content-top)
    - var(--ss-kicker-line-box-height)
    - var(--ss-statement-space)
  ));

  /* --- Surfaces --- */
  --ss-field-bg: #eeeeec;
  --ss-field-radius: 10px;

  /* 128vh scroll track — same as the Programs Schedule scene. */
  position: relative;
  height: var(--studio-bookframe-scroll-height);
  background: #ffffff;
}

/* Sticky stage: one viewport locks in place while the user scrolls
   through the 128vh track. */
.studio-scheduler__stage {
  position: sticky;
  top: 0;
  height: var(--app-viewport-height);
  overflow: hidden;
  background: #ffffff;
}

/* Content frame: kicker / statement space / field box, anchored
   inside the Book Frame and centered. */
.studio-scheduler__inner {
  position: absolute;
  top: var(--ss-content-top);
  left: 50%;
  width: var(--ss-content-width);
  max-width: calc(100% - (var(--ss-side-padding) * 2));
  transform: translateX(-50%);
  display: grid;
  grid-template-rows: auto var(--ss-statement-space) auto;
  row-gap: 0;
  box-sizing: border-box;
}

/* Kicker ("Schedule:") mirrors the homepage / Programs kicker. */
.studio-scheduler__kicker {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--ss-kicker-size);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: var(--ss-kicker-line-height);
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

/* Statement: Baskerville, absolutely placed inside the content frame
   so it floats in the statement space without disturbing the field
   box's y. */
.studio-scheduler__statement {
  position: absolute;
  top: var(--ss-statement-offset);
  left: 0;
  width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--ss-statement-size);
  font-weight: 700;
  line-height: var(--ss-statement-line-height);
  color: var(--color-text);
  pointer-events: none;
}

.studio-scheduler__statement-space {
  min-height: var(--ss-statement-space);
}

/* Embed field box: fills from the top of the box down to the bottom
   of the Book Frame, holding the Acuity embed. Identical treatment to
   the Programs scheduler (.programs-scheduler__frame) — only the
   tokens differ. */
.studio-scheduler__frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: var(--ss-field-fill-height);
  background: var(--ss-field-bg);
  border-radius: var(--ss-field-radius);
  /* Scroll container: the box keeps its fixed height; the taller
     Acuity embed scrolls within it so every listing is reachable.
     border-radius still clips the iframe to the rounded box. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Small curtain: masks the very top edge of the upward-shifted
   iframe so the crop reads clean. pointer-events:none lets
   clicks pass through to the embed below. */
.studio-scheduler__frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0px;
  background: var(--ss-field-bg);
  border-radius: var(--ss-field-radius) var(--ss-field-radius) 0 0;
  z-index: 1;
  pointer-events: none;
}

.studio-scheduler__embed {
  display: block;
  width: 100%;
  /* Let Acuity's embed.js set the iframe to its FULL content height
     (no !important override) so nothing below is clipped — the frame
     above scrolls through it. min-height keeps the box filled even if
     the embed is short. margin-top crops the top chrome out of view;
     the negative margin sits above scroll origin so it stays hidden. */
  min-height: calc(100% + 138px);
  margin-top: -138px;
  border: 0;
  background: var(--ss-field-bg);
}

/* --- Portrait / phone: one tall single page (sticky stays locked) --- */
/* The Book Frame becomes one full-width page whose height is taken    */
/* from the viewport; the kicker rebases to the frame top and the      */
/* field box fills the page. Same logic as the Programs portrait scene. */
@media (min-width: 768px) and (max-width: 1300px) and (max-aspect-ratio: 6/5),
       (max-width: 767px) {
  .studio-scheduler {
    --ss-content-width: var(--ss-frame-width);
    --ss-frame-height: max(
      0px,
      calc(var(--app-viewport-height) - var(--ss-frame-top) - var(--ss-portrait-frame-edge-gap))
    );
    --ss-content-top: var(--ss-frame-top);
    --ss-statement-offset: calc(var(--ss-frame-height) * var(--ss-portrait-statement-y-ratio));
    --ss-statement-space: max(
      0px,
      calc((var(--ss-frame-height) * var(--ss-portrait-field-y-ratio)) - var(--ss-kicker-line-box-height))
    );
    /* Allow the statement to wrap rather than clip to one line. */
    --ss-statement-size: max(
      calc(var(--ss-kicker-size) * 1.85),
      calc(var(--ss-content-width) * var(--ss-statement-size-ratio))
    );
  }

  .studio-scheduler__statement {
    white-space: normal;
  }
}

/* ===================================================== */
/* STUDIO RESPONSIVE STATES                              */
/* ----------------------------------------------------- */
/* Preserves image scale while simplifying page flow on  */
/* smaller screens.                                      */
/* ===================================================== */

@media (max-width: 959px) {
  :root {
    --studio-section-space: 84px;
    --studio-title-size: 58px;
    --studio-section-title-size: 36px;
    --studio-hero-image-height: 56vh;
  }

  .studio-request__inner {
    grid-template-columns: 1fr;
  }

  .studio-process__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-contact-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-contact-sheet__image:nth-child(2) {
    margin-top: 0;
  }

  .studio-contact-sheet__image:nth-child(3) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  :root {
    --studio-page-side-padding: 16px;
    --studio-section-space: 60px;
    --studio-title-size: 44px;
    --studio-statement-size: 18px;
    --studio-section-title-size: 30px;
    --studio-copy-size: 15px;
    --studio-hero-image-height: 48vh;
    --studio-scheduler-height: 720px;
  }

  .studio-gallery__pair,
  .studio-process__list,
  .studio-contact-sheet {
    grid-template-columns: 1fr;
  }

  .studio-action {
    width: 100%;
  }

  .studio-process__list li {
    min-height: 150px;
  }

  .studio-contact-sheet__image:nth-child(3) {
    grid-column: auto;
    aspect-ratio: 3 / 4;
  }

  .studio-request__inner {
    padding: 28px 20px;
  }
}

/* ===================================================== */
/* SCENE ONE — STUDIO HERO                               */
/* ----------------------------------------------------- */
/* .studio-hero is the CSS hook for Scene One.           */
/* Image is on the LEFT page, text on the RIGHT page.    */
/* Same layout as programs-hero and case studies.        */
/* Vertical centering is handled by .spread__inner--center*/
/* already in styles.css.                                */
/* ===================================================== */

.studio-hero {
  display: flex;
  align-items: stretch;
}

/* Right page: text. Outer padding faces the viewport right
   edge; gutter padding faces the image page on the left.
   Top and bottom padding are zeroed so that justify-content:
   center (from .spread__inner--center in styles.css) operates
   over the full book-frame height. The explicit height gives
   flexbox a concrete pixel value at every breakpoint — the
   same cross-browser reliability pattern used in the case
   study spreads and programs hero.                         */
.studio-hero .spread__page--right .spread__inner {
  padding-top: 0;
  padding-bottom: 0;
  height: var(--studio-book-frame-layout-height);
  padding-left: var(--studio-scene-one-active-page-inset-gutter);
  padding-right: var(--studio-scene-one-active-page-inset-outer);
}

/* Nudge: shifts the text block from its centered position.
   layout-height * nudge-ratio keeps the offset proportional at every
   breakpoint without a length/length scale (invalid in Firefox). */
.studio-hero .spread__page--right .spread__inner .spread__text {
  margin-top: calc(var(--studio-book-frame-layout-height) * var(--studio-scene-one-text-nudge));
}

/* Text field width */
.studio-hero .spread__text {
  max-width: var(--studio-scene-one-active-text-field-width);
}

/* Headline: Book Frame scale replaces the hardcoded
   --studio-title-size breakpoint overrides for this
   element. Source: 72px at 1440 = 0.12 × 600px.        */
.studio-hero .studio-title {
  font-size: var(--studio-scene-one-active-headline-size);
}

/* ===================================================== */
/* SCENE ONE — PROPORTIONAL TEXT BLOCK SCALING           */
/* ----------------------------------------------------- */
/* The headline already scales via active-headline-size. */
/* The kicker, statement, action buttons, and all spacing */
/* are fixed in px — as the book frame shrinks they take */
/* up a growing proportion of the page, collapsing the   */
/* free space that centering + nudge needs to resolve.   */
/*                                                       */
/* These overrides express every fixed measurement as a  */
/* ratio of the active book frame so the entire text     */
/* block scales as a single unit at every breakpoint.    */
/*                                                       */
/* Source reference (1200×776 open spread):              */
/*   active-page-width = 600px  layout-height = 776px   */
/* ===================================================== */

/* Kicker: 11px font at source. */
.studio-hero .studio-kicker {
  font-size: calc(var(--studio-scene-one-active-page-width) * 0.01833);
}

/* Stack gap between all text block children: 24px at source. */
.studio-hero .spread__page--right .spread__text {
  gap: calc(var(--studio-book-frame-layout-height) * 0.031);
}

/* Statement: 22px font at source. */
.studio-hero .studio-hero__statement {
  font-size: calc(var(--studio-scene-one-active-page-width) * 0.03667);
}

/* Action buttons: 48px height, 22px horizontal padding,
   11px font at source.                                  */
.studio-hero .studio-action {
  min-height: calc(var(--studio-book-frame-layout-height) * 0.0619);
  padding-left: calc(var(--studio-scene-one-active-page-width) * 0.0367);
  padding-right: calc(var(--studio-scene-one-active-page-width) * 0.0367);
  font-size: calc(var(--studio-scene-one-active-page-width) * 0.01833);
}

/* Gap between the two action buttons: 12px at source. */
.studio-hero .studio-hero__actions {
  gap: calc(var(--studio-book-frame-layout-height) * 0.0155);
}

/* Image crop: scale zooms in to fill the frame tightly,    */
/* matching the cropped treatment on the index and programs */
/* pages. Position focuses the crop on the upper body and   */
/* face of the subject.                                     */
.studio-hero__media-frame {
  --spread-media-position: 50% 67.8%;
  --spread-media-scale: 1.35;
}

/* ===================================================== */
/* SCENE ONE — RESPONSIVE BREAKPOINTS                    */
/* ----------------------------------------------------- */
/* This section is the Scene One responsive layer. It    */
/* does not invent a new layout system; it adjusts the   */
/* existing Book Frame tokens and only adds structural    */
/* overrides where the spread must change shape.          */
/*                                                        */
/* Current responsive states:                            */
/*   1. Desktop source          : 1301+ normal height    */
/*   2. Short-height desktop    : 1301+ / max-height 895 */
/*      Global spread scaling lives in css/styles.css;   */
/*      this file inherits that scaled spread.           */
/*   3. Narrow Desktop / Laptop : 1100–1300              */
/*   4. Fitted open spread      : 768–1099               */
/*   5. Phone                   : 0–767                  */
/*   6. Portrait stacking       : 768–1300 portrait      */
/* ===================================================== */

/* ====================================================== */
/* ACTIVE BOOK FRAME SYNC                                */
/* ------------------------------------------------------ */
/* The 1440 source band keeps the source 1200x776 frame.  */
/* Bands where the shared spread has already scaled in    */
/* css/styles.css read that rendered spread back into the */
/* Studio Book Frame tokens. Tablet widths below the      */
/* shared spread threshold opt Scene One into a fitted    */
/* two-page spread without changing global spread tokens. */
/* ====================================================== */
@media (min-width: 1301px) and (max-height: 895px),
       (min-width: 1100px) and (max-width: 1300px) {
  :root {
    --studio-book-frame-open-spread-width: var(--spread-max-width);
    --studio-book-frame-open-spread-height: var(--spread-height);
  }
}

/* ====================================================== */
/* FITTED OPEN SPREAD : 768–1099                          */
/* ------------------------------------------------------ */
/* The Studio hero can still hold its two-page idea at    */
/* tablet widths if the Book Frame is scaled by width AND */
/* height. This keeps the spread from switching to a      */
/* phone stack prematurely while leaving other sections   */
/* alone.                                                 */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1099px) {
  :root {
    --studio-book-frame-open-spread-width: min(
      var(--book-frame-source-width),
      calc(100vw - 48px),
      calc((var(--app-viewport-height) - var(--header-clearance) - var(--book-frame-viewport-clearance, 16px)) * var(--book-frame-width-from-height-ratio, 1.5464))
    );
    --studio-book-frame-open-spread-height: calc(var(--studio-book-frame-open-spread-width) * var(--book-frame-source-ratio, 0.6467));
  }

  .studio-hero {
    min-height: var(--studio-book-frame-open-spread-height);
  }

  .studio-hero .spread__page--left,
  .studio-hero .spread__page--right {
    order: 0;
  }

  .studio-hero .spread__book {
    width: var(--studio-book-frame-open-spread-width);
    max-width: var(--studio-book-frame-open-spread-width);
    height: var(--studio-book-frame-open-spread-height);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-hero .spread__page,
  .studio-hero .spread__page--media-only {
    width: auto;
    height: var(--studio-book-frame-open-spread-height);
    min-height: var(--studio-book-frame-open-spread-height);
  }
}

/* ====================================================== */
/* SCENE ONE STACKED ORDER + PAGE MODEL : 0–767           */
/* ------------------------------------------------------ */
/* The Book Frame switches Scene One into a stacked       */
/* Single Page model at phone widths. Image leads on top, */
/* text follows below, preserving the original 600x776    */
/* page proportion instead of becoming loose full-width   */
/* content. Image leads here so the stack mirrors the     */
/* open-spread swap (image-left, text-right).             */
/* ====================================================== */
@media (max-width: 767px) {
  :root {
    --studio-book-frame-stacked-page-width: min(
      var(--book-frame-single-page-source-width),
      calc(100vw - 48px),
      calc((var(--app-viewport-height) - var(--header-clearance) - (var(--book-frame-viewport-clearance, 16px) * 2)) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
    );
    --studio-book-frame-stacked-page-height: calc(var(--studio-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
    --studio-book-frame-page-stack-gap: 0px;
    --studio-book-frame-layout-width: var(--studio-book-frame-stacked-page-width);
    --studio-book-frame-layout-height: var(--studio-book-frame-stacked-page-height);
    --studio-book-frame-layout-scale: var(--studio-book-frame-stacked-page-scale);
    --studio-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --studio-scene-one-active-page-width: var(--studio-book-frame-layout-width);
  }

  .studio-hero {
    padding-top: var(--book-frame-viewport-clearance, 16px);
  }

  /* Image first, text second. Grid items accept the
     `order` property exactly like flex items. The image is
     the leading (left) page, so it leads the stack too. */
  .studio-hero .spread__page--left  { order: -1; }
  .studio-hero .spread__page--right { order: 0; }

  .studio-hero .spread__book {
    width: var(--studio-book-frame-stacked-page-width);
    max-width: var(--studio-book-frame-stacked-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--studio-book-frame-page-stack-gap);
    justify-items: stretch;
  }

  .studio-hero .spread__page {
    width: var(--studio-book-frame-stacked-page-width);
    height: var(--studio-book-frame-stacked-page-height);
    min-height: var(--studio-book-frame-stacked-page-height);
  }

  /* Image keeps the right-page crop field instead of expanding to
     a loose, oversized mobile image. */
  .studio-hero .spread__page--media-only {
    height: var(--studio-book-frame-stacked-page-height);
    min-height: var(--studio-book-frame-stacked-page-height);
  }

  .studio-hero .spread__page--media-only .spread__media,
  .studio-hero .spread__page--media-only .spread__media-frame {
    height: 100%;
    min-height: 100%;
  }
}

/* ====================================================== */
/* SCENE ONE PORTRAIT PAGE STACK : 768–1300               */
/* ------------------------------------------------------ */
/* Tablet, small-laptop, and narrow-desktop windows keep  */
/* the scaled Open Spread while they are landscape-ish.   */
/* Once the viewport leans portrait, this rule preserves  */
/* the Book Frame page logic as two stacked pages: Left   */
/* Page on top, Right Page below. The gap is leftover     */
/* viewport space, so page one clears as page two snaps   */
/* into place. The text page keeps its imaginary page     */
/* boundary and text-safe field.                         */
/* Each page snaps independently so the user lands on one */
/* fitted page before scrolling into the next page.       */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  :root {
    --studio-book-frame-page-stack-gap: var(--studio-book-frame-single-page-gap);
    --studio-book-frame-layout-width: var(--studio-book-frame-single-page-width);
    --studio-book-frame-layout-height: var(--studio-book-frame-single-page-height);
    --studio-book-frame-layout-scale: var(--studio-book-frame-single-page-scale);
    --studio-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --studio-scene-one-active-page-width: var(--studio-book-frame-layout-width);
  }

  .studio-hero {
    padding-top: var(--book-frame-viewport-clearance, 16px);
  }

  .studio-hero .spread__page--left  { order: -1; }
  .studio-hero .spread__page--right { order: 0; }

  .studio-hero .spread__book {
    width: var(--studio-book-frame-single-page-width);
    max-width: var(--studio-book-frame-single-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--studio-book-frame-page-stack-gap);
  }

  .studio-hero .spread__page {
    width: var(--studio-book-frame-single-page-width);
    height: var(--studio-book-frame-single-page-height);
    min-height: var(--studio-book-frame-single-page-height);
  }

  .studio-hero .spread__page--media-only {
    height: var(--studio-book-frame-single-page-height);
    min-height: var(--studio-book-frame-single-page-height);
  }

  .studio-hero .spread__page--media-only .spread__media,
  .studio-hero .spread__page--media-only .spread__media-frame {
    height: 100%;
    min-height: 100%;
  }
}

/* ===================================================== */
/* SCENE TWO — EDITION ARTICLE SPREAD                    */
/* ----------------------------------------------------- */
/* A sticky two-page book spread on the same scroll-lock  */
/* system as the Schedule scene: the section is a 128vh    */
/* scroll track; the stage locks one viewport into place;  */
/* the open book is absolutely positioned on the Book      */
/* Frame — same coordinates as Scene One. Rebuilt on the   */
/* Studio Book Frame router so no Programs tokens leak in.  */
/*                                                         */
/* The edition spec fills the LEFT page (Current Edition + */
/* How It Works), then continues on the RIGHT page (What   */
/* Is Included + Session Notes). "Current Edition" lands    */
/* at the same baseline as "Schedule:" in the final scene  */
/* (0.1391753 of frame height). All-caps copy is mono      */
/* kicker-styled; the lists read as Baskerville lines.     */
/*                                                         */
/* Portrait/phone: the sticky lock releases and the pages  */
/* stack in one continuous editorial column (same as the   */
/* Scene One portrait behavior).                           */
/* ===================================================== */
.studio-article-spread {
  /* Type + spacing mirror the Programs article spread exactly (same
     ratios against the active page width, source page width 600), so
     the two scenes read as one family. Body copy matches Scene One's
     Baskerville statement (0.035 × page width); labels are mono. */
  --sa-copy-size: max(15px, calc(var(--studio-scene-one-active-page-width) * 0.035));
  --sa-label-size: max(11px, calc(var(--studio-scene-one-active-page-width) * 0.02));
  --sa-copy-line-height: 1.42;

  /* Gap from a label to the copy that follows it; the larger gap above
     each heading is ~2.4× that so a heading reads as the opening of the
     next block, not the close of the previous one — same as Programs. */
  --sa-overview-gap: calc(var(--studio-scene-one-active-page-width) * 0.045);
  --sa-heading-gap-top: calc(var(--sa-overview-gap) * 2.4);
  /* Small even rhythm between the lines of a spec list. */
  --sa-list-gap: calc(var(--studio-scene-one-active-page-width) * 0.012);

  /* 128vh scroll track — same as the Schedule scene. */
  position: relative;
  height: var(--studio-bookframe-scroll-height);
  background: #ffffff;
  /* Cancel the page's flex gap on BOTH sides in landscape. The hero
     book frame should sit directly against this scene's track (no extra
     section gap between the two book-frame scenes), and the sticky
     mechanics already supply the breathing room below. */
  margin-top: calc(-1 * var(--studio-section-space));
  margin-bottom: calc(-1 * var(--studio-section-space));
}

/* Sticky stage: one viewport locks in place while the user scrolls
   through the 128vh track. Identical to the Schedule scene stage. */
.studio-article-spread__stage {
  position: sticky;
  top: 0;
  height: var(--app-viewport-height);
  overflow: hidden;
  background: #ffffff;
}

/* Open book, absolutely placed on the Book Frame — same top, width,
   and height as Scene One. Both pages clip at the page bottom so copy
   that doesn't fit is hidden, as if the page had a physical edge. */
.studio-article-spread .spread__book {
  position: absolute;
  top: var(--studio-book-frame-layout-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--studio-book-frame-layout-width);
  max-width: var(--studio-book-frame-layout-width);
  height: var(--studio-book-frame-layout-height);
  margin: 0;
  /* Always two columns in landscape — overrides the global
     max-width:1099px rule that collapses to one column. */
  grid-template-columns: 1fr 1fr;
  /* Explicit stretch so Safari aligns both pages to the full
     frame height on the grid's cross axis. */
  align-items: stretch;
}

/* Spine crease: a hairline at the horizontal center of the frame,
   a third of the frame height tall and vertically centered. Sits above
   the page columns but is pointer-events:none so it never blocks text. */
.studio-article-spread .spread__book::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 33.333%;
  transform: translateX(-50%);
  width: 1px;
  height: 33.333%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(17, 17, 17, 0.18) 25%,
    rgba(17, 17, 17, 0.18) 75%,
    transparent
  );
  pointer-events: none;
  z-index: 2;
}

/* Each page is one column of the fixed-height frame. */
.studio-article-spread .spread__page {
  height: var(--studio-book-frame-layout-height);
  min-height: 0;
  overflow: hidden;
}

/* Inner text-safe padding:
   top    = same ratio as "Schedule:" in the final scene (108/776)
   bottom = Scene One's active inset bottom
   left/right mirror Scene One's outer + gutter insets so the two
   pages face each other across the spine. */
.studio-article-spread .spread__page--text-only .spread__inner {
  padding-top: calc(var(--studio-book-frame-layout-height) * 0.1391753);
  padding-bottom: var(--studio-scene-one-active-page-inset-bottom);
}

.studio-article-spread .spread__page--left .spread__inner {
  padding-left: var(--studio-scene-one-active-page-inset-outer);
  padding-right: var(--studio-scene-one-active-page-inset-gutter);
}

.studio-article-spread .spread__page--right .spread__inner {
  padding-left: var(--studio-scene-one-active-page-inset-gutter);
  padding-right: var(--studio-scene-one-active-page-inset-outer);
}

/* Inner: start-aligned so Safari's flex column doesn't vertically
   center content — the top padding alone controls the y position. */
.studio-article-spread .spread__inner {
  justify-content: flex-start;
  align-content: start;
}

/* Text fills the inset box; override the hero's 376px / 96px-top. */
.studio-article-spread .spread__text {
  max-width: 100%;
  padding-top: 0;
}

/* Section labels ("Current Edition", "How It Works", "What Is
   Included", "Session Notes"): same mono kicker style as "Schedule:". */
.studio-article__kicker,
.studio-article__subhead {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--sa-label-size);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

/* Edition name + list lines: Baskerville body copy, matching Scene One's
   statement exactly — the same role Programs gives its article copy. */
.studio-article__edition,
.studio-article__list-item {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--sa-copy-size);
  line-height: var(--sa-copy-line-height);
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* List items: flex row so the square sits beside the text and the
   text wraps cleanly without hanging under the bullet. */
.studio-article__list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}

/* Small square bullet — 4×4px, filled, vertically centered on the
   cap height of the first text line. */
.studio-article__list-item::before {
  content: "";
  display: block;
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  background: currentColor;
  margin-top: 0.46em;
}

/* A label sits --sa-overview-gap above the copy that follows it,
   matching the Programs "Overview → paragraph" gap. */
.studio-article__kicker + .studio-article__edition {
  margin-top: var(--sa-overview-gap);
}

/* Availability notice: sits below the How It Works list with a
   generous gap to read as a distinct statement, not a list item.
   Italic Baskerville gives it weight without breaking the quiet
   tone — the buyer needs to register that booking is not yet open. */
.studio-article__notice {
  margin: calc(var(--sa-overview-gap) * 2) 0 0;
  font-family: var(--font-primary);
  font-size: var(--sa-copy-size);
  font-style: italic;
  line-height: var(--sa-copy-line-height);
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* Subheads: generous space above, --sa-overview-gap below into their
   list — identical weighting to the Programs subheads. */
.studio-article__subhead {
  margin-top: var(--sa-heading-gap-top);
  margin-bottom: var(--sa-overview-gap);
}

/* Edition lists: Baskerville lines, no bullets, tight even rhythm. */
.studio-article__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sa-list-gap);
}

/* First child on each page pins to the page baseline. */
.studio-article-spread .spread__text > :first-child {
  margin-top: 0;
}

/* ----------------------------------------------------- */
/* Scene Two — portrait + phone (one continuous column)  */
/* ----------------------------------------------------- */
/* Portrait can't carry the two-page spine. The sticky lock */
/* releases and the spread collapses into ONE editorial     */
/* column: the page boxes, their inners, and text wrappers  */
/* dissolve (display:contents) so every block flows as a    */
/* single vertical article in DOM order (left page, then    */
/* right). Same behavior as the Programs article scene.     */
@media (min-width: 768px) and (max-width: 1300px) and (max-aspect-ratio: 6/5),
       (max-width: 767px) {
  /* Release the sticky lock and restore the normal section gap on both
     sides — the column is normal flow here, not a locked stage. */
  .studio-article-spread {
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
  }

  .studio-article-spread__stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  /* The book becomes the single article column. Page insets apply
     once, around the whole block, instead of per facing page — so
     there is one top inset and one bottom inset, no middle gap. */
  .studio-article-spread .spread__book {
    position: static;
    transform: none;
    display: block;
    width: var(--studio-book-frame-layout-width);
    max-width: var(--studio-book-frame-layout-width);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: var(--studio-scene-one-active-page-inset-top)
             var(--studio-scene-one-active-page-inset-outer)
             var(--studio-scene-one-active-page-inset-bottom);
    box-sizing: border-box;
  }

  /* Dissolve the two pages, their inners, and text wrappers so all
     copy joins one flow. DOM order already reads left page → right. */
  .studio-article-spread .spread__page,
  .studio-article-spread .spread__inner,
  .studio-article-spread .spread__text {
    display: contents;
  }

  /* The first heading on the (former) right page now follows a list in
     the single column, so it needs its full heading space restored. */
  .studio-article-spread .spread__page--right .studio-article__subhead--lead {
    margin-top: var(--sa-heading-gap-top);
  }

  /* No spine crease when the spread is one column. */
  .studio-article-spread .spread__book::after {
    display: none;
  }
}

/* ===================================================== */
/* SCENE THREE — GALLERY SPREAD                          */
/* ----------------------------------------------------- */
/* A two-page Book Frame on the same router as Scene One, */
/* but both pages are images. Each page slowly cross-     */
/* fades through its own stack of preview images (driven  */
/* by js/pages/studio.js), so the spread reads as a quiet */
/* shuffling gallery. The frame scales across every       */
/* breakpoint exactly like the Studio hero: open spread,  */
/* fitted spread, and stacked single pages.               */
/* ===================================================== */
.studio-gallery-spread {
  display: flex;
  align-items: stretch;
}

/* Each media frame stacks the page's slides on top of one another.
   A slide is one picture; only the topmost shown slide is visible.
   The page-turn wipe (clip-path) is animated per slide by
   js/pages/studio.js. */
.studio-gallery-spread__frame {
  position: relative;
  overflow: hidden;
  /* Contain the slides' stacking. The script raises each incoming
     slide's z-index every turn; isolating the frame keeps those
     ever-growing values inside it so they never compete with — and
     paint over — the fixed site header (z-index: 10). */
  isolation: isolate;
}

/* One picture. Fully revealed at rest (clip inset 0); the wipe
   animates the clip from the right edge inward. Stacking order is
   set by the script (each incoming slide is raised above the rest). */
.studio-gallery-spread__slide {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

.studio-gallery-spread__img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Per-picture framing. These beat the shared media-only image rule
   (same selector depth, declared later) so each slide's --img-zoom /
   --img-x / --img-y win. object-fit:cover still comes from the shared
   rule. */
.studio-gallery-spread .spread__page--media-only .spread__media-frame img.studio-gallery-spread__img {
  object-position: var(--img-x, 50%) var(--img-y, 50%);
  transform: scale(var(--img-zoom, 1));
  transform-origin: center;
}

/* --- Fitted open spread : 768–1099 --- */
/* Mirrors the hero: keep the two-page idea by scaling the Book   */
/* Frame by width AND height instead of collapsing to one column. */
@media (min-width: 768px) and (max-width: 1099px) {
  .studio-gallery-spread {
    min-height: var(--studio-book-frame-open-spread-height);
  }

  .studio-gallery-spread .spread__book {
    width: var(--studio-book-frame-open-spread-width);
    max-width: var(--studio-book-frame-open-spread-width);
    height: var(--studio-book-frame-open-spread-height);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-gallery-spread .spread__page,
  .studio-gallery-spread .spread__page--media-only {
    width: auto;
    height: var(--studio-book-frame-open-spread-height);
    min-height: var(--studio-book-frame-open-spread-height);
  }
}

/* --- Phone stacked pages : 0–767 --- */
/* Left image leads on top, right image follows below — the same  */
/* stacked Single Page model the hero uses at phone widths.       */
@media (max-width: 767px) {
  .studio-gallery-spread {
    padding-top: var(--book-frame-viewport-clearance, 16px);
  }

  .studio-gallery-spread .spread__page--left  { order: -1; }
  .studio-gallery-spread .spread__page--right { order: 0; }

  .studio-gallery-spread .spread__book {
    width: var(--studio-book-frame-stacked-page-width);
    max-width: var(--studio-book-frame-stacked-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--studio-book-frame-page-stack-gap);
    justify-items: stretch;
  }

  .studio-gallery-spread .spread__page,
  .studio-gallery-spread .spread__page--media-only {
    width: var(--studio-book-frame-stacked-page-width);
    height: var(--studio-book-frame-stacked-page-height);
    min-height: var(--studio-book-frame-stacked-page-height);
  }

  .studio-gallery-spread .spread__page--media-only .spread__media,
  .studio-gallery-spread .spread__page--media-only .spread__media-frame {
    height: 100%;
    min-height: 100%;
  }
}

/* --- Portrait stacked pages : 768–1300 portrait --- */
/* Once the viewport leans portrait, the spread becomes two       */
/* stacked single pages, each snapping to a viewport — the same    */
/* page logic as the hero portrait stack.                          */
@media (min-width: 768px) and (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  .studio-gallery-spread {
    padding-top: var(--book-frame-viewport-clearance, 16px);
  }

  .studio-gallery-spread .spread__page--left  { order: -1; }
  .studio-gallery-spread .spread__page--right { order: 0; }

  .studio-gallery-spread .spread__book {
    width: var(--studio-book-frame-single-page-width);
    max-width: var(--studio-book-frame-single-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--studio-book-frame-page-stack-gap);
  }

  .studio-gallery-spread .spread__page,
  .studio-gallery-spread .spread__page--media-only {
    width: var(--studio-book-frame-single-page-width);
    height: var(--studio-book-frame-single-page-height);
    min-height: var(--studio-book-frame-single-page-height);
  }

  .studio-gallery-spread .spread__page--media-only .spread__media,
  .studio-gallery-spread .spread__page--media-only .spread__media-frame {
    height: 100%;
    min-height: 100%;
  }
}