/* ===================================================== */
/* PRACTICE PAGE STYLES                                  */
/* ----------------------------------------------------- */
/* Practice-only styling and composition rules.          */
/* This file loads after css/styles.css and should only  */
/* hold rules that describe html/practice.html.          */
/* ===================================================== */

/* ===================================================== */
/* PRACTICE PAGE TOKENS                                  */
/* ----------------------------------------------------- */
/* Page-level control panel for the language-led         */
/* Practice page. Shared site tokens stay in styles.css. */
/* ===================================================== */

:root {
  /* ===================================================== */
  /* PRACTICE LAYOUT TOKENS                                */
  /* ----------------------------------------------------- */
  /* Controls section width, spacing, method index,        */
  /* founder image, and contact behavior.                  */
  /* ===================================================== */
  --practice-page-max-width: 1200px;
  --practice-page-side-padding: 24px;
  --practice-section-space: 104px;
  /* Scene Two Book Frame scroll track. Mirrors the Programs Scene Two
     route scene: a one-viewport sticky stage held across a short scroll,
     so the spread reads with white above and below it. */
  --practice-bookframe-scroll-height: 128vh;
  --practice-surface-bg: #f7f7f5;
  --practice-surface-border: rgba(17, 17, 17, 0.12);
  --practice-section-title-size: 42px;
  --practice-section-title-line-height: 1.16;
  --practice-copy-size: 16px;
  --practice-copy-line-height: 1.55;
  --practice-label-size: 11px;
  --practice-contact-height: 168px;

  /* Scene One uses the 1040px text span inside the 1200px Book Frame. */
  /* Connected to the practice page Book Frame router.
     Previously used a standalone min() formula that matched
     the router at 1440 but did not benefit from the router's
     fitted spread, portrait stacking, or phone bands.        */
  --practice-opening-book-frame-width: var(--practice-book-frame-layout-width);
  /* Height from the router. The router already computes the
     correct aspect-ratio-derived height at every breakpoint.  */
  --practice-opening-book-frame-height: var(--practice-book-frame-layout-height);
  --practice-opening-width: calc(var(--practice-opening-book-frame-width) * 0.8666667);
  --practice-opening-line-height: calc(var(--practice-opening-width) * 0.0769231);
  --practice-opening-top: calc(
    (var(--practice-opening-book-frame-height) * 0.4201031)
    - var(--practice-opening-line-height)
  );

  /* ===================================================== */
  /* PRACTICE — BOOK FRAME ROUTER TOKENS                   */
  /* ===================================================== */
  --practice-book-frame-open-spread-width: var(--book-frame-source-width);
  --practice-book-frame-open-spread-height: var(--book-frame-source-height);
  --practice-book-frame-page-stack-gap: 0px;
  --practice-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))
  );
  --practice-book-frame-single-page-height: calc(var(--practice-book-frame-single-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --practice-book-frame-single-page-gap: max(
    0px,
    calc(
      var(--app-viewport-height)
      - var(--header-clearance)
      - (var(--book-frame-viewport-clearance, 16px) * 2)
      - var(--practice-book-frame-single-page-height)
    )
  );
  --practice-book-frame-stacked-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px)
  );
  --practice-book-frame-stacked-page-height: calc(var(--practice-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --practice-book-frame-open-spread-scale: calc(var(--practice-book-frame-open-spread-width) / var(--book-frame-source-width));
  --practice-book-frame-single-page-scale: calc(var(--practice-book-frame-single-page-width) / var(--book-frame-single-page-source-width));
  --practice-book-frame-stacked-page-scale: calc(var(--practice-book-frame-stacked-page-width) / var(--book-frame-single-page-source-width));
  --practice-book-frame-layout-width: var(--practice-book-frame-open-spread-width);
  --practice-book-frame-layout-height: var(--practice-book-frame-open-spread-height);
  --practice-book-frame-layout-scale: var(--practice-book-frame-open-spread-scale);
  --practice-book-frame-layout-top: var(--header-clearance);
  --practice-founder-source-headline-size: 66px;
  --practice-founder-source-page-inset-top: 104px;
  --practice-founder-source-page-inset-bottom: 0px;
  --practice-founder-source-page-inset-outer: 80px;
  --practice-founder-source-page-inset-gutter: 144px;
  --practice-founder-source-text-field-width: 376px;
  /* Gutter reduced from the standard 144px to 50px so the
     biography paragraphs have adequate horizontal room.
     Bottom inset is 0 — content determines the bottom of
     the text field. At 1440 this gives a 470px text column
     (600px page − 80px outer − 50px gutter) and keeps all
     117 words of copy within the 776px page height.       */
  --practice-founder-active-page-width: calc(var(--practice-book-frame-layout-width) * 0.5);
  /* Headline scale matches the Programs Scene One title (0.11 × page
     width = 66px at 1440) so "Director of Operations" and the bio
     paragraph below it read with the same size and the same gap as
     "Youth Training Programs" and its statement. */
  --practice-founder-active-headline-size: calc(var(--practice-founder-active-page-width) * 0.11);
  --practice-founder-active-page-inset-top: calc(var(--practice-book-frame-layout-height) * 0.1340206);
  --practice-founder-active-page-inset-outer: calc(var(--practice-founder-active-page-width) * 0.1333333);
  --practice-founder-active-page-inset-gutter: calc(var(--practice-founder-active-page-width) * 0.24);
  --practice-founder-active-text-field-width: calc(var(--practice-founder-active-page-width) * 0.6266667);
  /* Vertical nudge for the founder text block. Added to the
     proportional page-inset-top so the starting position shifts
     while the base inset relationship is preserved. Expressed in
     source-space px: +6px at the 776px source height (was -10px; shifted
     +16px on 2026-06-27 to drop the block lower on the page). Stored as a
     unitless ratio (6 / 776) and applied as layout-height * ratio so it
     scales per breakpoint -- equivalent placement at every size -- without a
     length/length scale, which Firefox rejects as invalid (collapses to 0). */
  --practice-founder-text-nudge: 0.0077320;
}

/* ===================================================== */
/* PRACTICE PAGE FOUNDATION                              */
/* ----------------------------------------------------- */
/* Practice is the most language-led interior page. It   */
/* uses spreads and controlled sections for rhythm.      */
/* ===================================================== */

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

/* ===================================================== */
/* PRACTICE TYPOGRAPHY                                   */
/* ----------------------------------------------------- */
/* Page-specific text roles used outside shared spread   */
/* text profiles.                                        */
/* ===================================================== */

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

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

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

/* ===================================================== */
/* SCENE ONE: PRACTICE STATEMENT                         */
/* ----------------------------------------------------- */
/* Static 1040px text span placed on the same Book Frame */
/* ruler as the homepage Scene Two landing.              */
/* ===================================================== */

.practice-opening {
  min-height: var(--practice-opening-book-frame-height);
}

.practice-opening__book-frame {
  position: relative;
  width: var(--practice-opening-book-frame-width);
  height: var(--practice-opening-book-frame-height);
  margin-left: auto;
  margin-right: auto;
}

.practice-opening__statement {
  position: absolute;
  top: var(--practice-opening-top);
  left: 50%;
  /* Hug the composed lines and center on them, instead of pinning a
     fixed canvas width and left-aligning inside it. The font size is
     still derived from --practice-opening-width, so in Chrome (where
     the tracked line already fills that canvas) the box is the same
     width and the layout is unchanged. But if a browser lays the line
     out even a hair wider (Safari measured the same monospace line
     wider here), a fixed left-aligned box would spill the overflow to
     the RIGHT and look shoved off-center; centering on content keeps
     it balanced in the book frame across every browser. */
  width: max-content;
  max-width: 100%;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: calc(var(--practice-opening-width) * 0.0543269);
  font-weight: var(--heading-weight);
  line-height: var(--practice-opening-line-height);
  letter-spacing: 0;
  text-align: left;
  transform: translateX(-50%);
}

.practice-opening__line {
  display: block;
  white-space: nowrap;
}

/* Line 1 tracking reduced from -0.128em to -0.059em.
   The shorter first line ("The Brickhouse Company is a
   design") needs less compression to fill the 1040px
   canvas cleanly at desktop source scale.              */
.practice-opening__line:nth-child(1) {
  letter-spacing: -0.059em;
}

.practice-opening__line:nth-child(2) {
  letter-spacing: -0.129em;
}

.practice-opening__emphasis {
  font-family: var(--font-primary);
  font-size: calc(var(--practice-opening-width) * 0.0692308);
  font-weight: 700;
  letter-spacing: 0;
}

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

/* ===================================================== */
/* FOUNDER SECTION                                       */
/* ----------------------------------------------------- */
/* Founder context with one strong image moment. This    */
/* supports credibility without becoming a profile card. */
/* ===================================================== */

.practice-founder {
  padding-left: var(--practice-page-side-padding);
  padding-right: var(--practice-page-side-padding);
}


.practice-founder__meta {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--practice-surface-border);
  font-family: var(--font-secondary);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.62);
}

/* ===================================================== */
/* CONTACT SECTION                                       */
/* ----------------------------------------------------- */
/* Quiet inquiry field. The button copies the email and  */
/* confirms the action without opening the mail app.     */
/* ===================================================== */

.practice-contact {
  width: min(calc(100% - 48px), var(--spread-max-width));
  min-height: var(--practice-contact-height);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  place-items: center;
  border-top: 1px solid var(--practice-surface-border);
  border-bottom: 1px solid var(--practice-surface-border);
}

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

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

.practice-contact__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);
}

.practice-contact__button:hover .practice-contact__label,
.practice-contact__button:focus-visible .practice-contact__label,
.practice-contact__button.is-copied .practice-contact__label,
.practice-contact__button.is-error .practice-contact__label {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.practice-contact__button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 10px;
}

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

/* ===================================================== */
/* PRACTICE RESPONSIVE STATES                            */
/* ----------------------------------------------------- */
/* Simplifies spreads and multi-column sections while    */
/* preserving comfortable reading widths.                */
/* ===================================================== */

@media (max-width: 959px) {
  :root {
    --practice-section-space: 80px;
    --practice-section-title-size: 36px;
  }
}

@media (max-width: 899px) {
  :root {
    --practice-contact-height: 144px;
  }
}

@media (max-width: 767px) {
  :root {
    --practice-page-side-padding: 16px;
    --practice-section-space: 56px;
    --practice-section-title-size: 30px;
    --practice-copy-size: 15px;
    --practice-contact-height: 128px;
  }

  /* Keep the two authored lines on their own single lines here too.
     The statement font-size scales with --practice-opening-width, so
     the lines shrink to fit rather than wrapping; allowing wrap let
     the first line ("...is a design") break to a third line at this
     band while every other breakpoint stayed at two. */
  .practice-opening__line {
    white-space: nowrap;
  }
}

/* ===================================================== */
/* BEHIND THE PRACTICE — FOUNDER SPREAD                  */
/* ----------------------------------------------------- */
/* .practice-founder is the CSS hook.                    */
/* Image on the LEFT page, text on the RIGHT page.       */
/* Same column orientation as the index and case studies.*/
/*                                                       */
/* Non-standard insets: gutter is 50px (not 144px) and  */
/* bottom inset is 0 to accommodate 117 words of         */
/* biography copy within the 776px page height.          */
/* heading uses the Programs Scene One title scale (0.11 */
/* = 66px at 1440) so it matches "Youth Training         */
/* Programs" and its statement spacing.                  */
/* ===================================================== */

.practice-founder {
  display: flex;
  align-items: stretch;
}

/* Right page: text. Gutter on left edge (faces image),
   outer on right edge (viewport margin). The nudge is
   added to the proportional inset-top so the text block
   shifts up or down while the base inset relationship
   is preserved. This spread uses top-alignment (not
   centering) because the biography copy is long enough
   that the page grows past 776px at source.            */
.practice-founder .spread__page--right .spread__inner {
  padding-top: calc(var(--practice-founder-active-page-inset-top) + (var(--practice-book-frame-layout-height) * var(--practice-founder-text-nudge)));
  padding-bottom: 0;
  padding-left: var(--practice-founder-active-page-inset-gutter);
  padding-right: var(--practice-founder-active-page-inset-outer);
}

/* Text field: wider than the standard 376px to give
   biography copy sufficient line length.               */
.practice-founder .spread__text {
  max-width: var(--practice-founder-active-text-field-width);
  padding-top: 0;
}

/* Line-height matches .programs-title (1.08) so heading
   rhythm is consistent across all spread sections.       */
.practice-founder .practice-section-title {
  font-size: var(--practice-founder-active-headline-size);
  line-height: 1.08;
}

/* Biography copy matches .programs-hero__statement:
   21px primary font at 1.42 line-height with 0.01em
   tracking. Scoped to practice-founder so other
   .practice-copy elements on the page are unaffected.   */
.practice-founder .practice-copy {
  font-family: var(--font-primary);
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: 0.01em;
}

.practice-founder__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Scoped margin reset: stack-lg controls all spacing.
   Without this, any bottom margin on practice-section-label
   would double-up with the stack-lg gap.                */
.practice-founder .practice-section-label {
  margin: 0;
}

/* ===================================================== */
/* FOUNDER SPREAD — PROPORTIONAL TEXT BLOCK SCALING     */
/* ----------------------------------------------------- */
/* The headline already scales via active-headline-size. */
/* The label, bio copy font, and all gap tokens are      */
/* fixed in px. As the book frame shrinks they consume   */
/* a growing proportion of the page height, breaking     */
/* the nudge relationship.                               */
/*                                                       */
/* These overrides express every fixed measurement as a  */
/* ratio of the active book frame so the entire block    */
/* scales as a single unit at every breakpoint.          */
/*                                                       */
/* Source reference (1200×776 open spread):              */
/*   active-page-width = 600px  layout-height = 776px   */
/* ===================================================== */

/* Label: 11px font at source. */
.practice-founder .practice-section-label {
  font-size: calc(var(--practice-founder-active-page-width) * 0.01833);
}

/* Stack gap between label, headline, copy block: 24px at source. */
.practice-founder .spread__text {
  gap: calc(var(--practice-book-frame-layout-height) * 0.031);
}

/* Bio copy: 21px at source (overrides the 21px literal value). */
.practice-founder .practice-copy {
  font-size: calc(var(--practice-founder-active-page-width) * 0.035);
  text-align: justify;
}

/* Gap between biography paragraphs: 16px at source. */
.practice-founder .practice-founder__copy {
  gap: calc(var(--practice-book-frame-layout-height) * 0.0206);
}

/* Founder sign-off: a quiet signature closing the biography. Sits one
   tight beat below the last sentence — close enough to feel like it
   belongs to the paragraph, the way a director's credit sits just
   beneath the last frame. Negative margin-top closes most of the
   flex gap so the connection reads immediately. */
.practice-founder__signature {
  margin: 0;
  margin-top: calc(var(--practice-book-frame-layout-height) * -0.016);
  align-self: flex-end;
  font-family: var(--font-primary);
  font-style: italic;
  font-size: calc(var(--practice-founder-active-page-width) * 0.035);
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* Image focal point: upper body of subject.            */
.practice-founder__media-frame {
  --spread-media-position: 140% 20%;
  --spread-media-scale: 1.1;
}

/* Content-height layout: right page grows with biography
   copy. Left image page stretches to match via grid
   align-items: stretch. The spread remains minimum
   book-frame height but is not locked to exactly 776px.  */
.practice-founder .spread__book {
  height: auto;
}

/* Right page: grows with biography copy. min-height holds
   the standard book frame floor.                            */
.practice-founder .spread__page--right {
  height: auto;
  min-height: var(--practice-book-frame-layout-height);
}

/* Left page: auto so it stretches with the grid row to
   match the right page height. position: relative makes
   this the containing block for the absolutely positioned
   media fill in Change 2.                                   */
.practice-founder .spread__page--left {
  height: auto;
  position: relative;
  overflow: hidden;
}

/* Fills the left page using layout height from the grid row
   rather than a height:100% chain. With the left page at
   height:auto, height:100% on media children cannot resolve
   to a definite value. position:absolute; inset:0 uses the
   page's grid-determined layout height instead, giving the
   .spread__media-frame and img a definite height to fill.   */
.practice-founder .spread__media {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}

/* ====================================================== */
/* ACTIVE BOOK FRAME SYNC                                */
/* ------------------------------------------------------ */
/* Short-height desktop + narrow desktop: sync the       */
/* practice-founder Book Frame to the scaled spread.     */
/* ====================================================== */
@media (min-width: 1301px) and (max-height: 895px),
       (min-width: 1100px) and (max-width: 1300px) {
  :root {
    --practice-book-frame-open-spread-width: var(--spread-max-width);
    --practice-book-frame-open-spread-height: var(--spread-height);
  }
}

/* ====================================================== */
/* FITTED OPEN SPREAD : 768–1099                          */
/* ------------------------------------------------------ */
/* The founder spread can hold its two-page idea at       */
/* tablet widths if the Book Frame is scaled by width AND */
/* height. Keeps the spread from switching to a phone     */
/* stack prematurely.                                     */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1099px) {
  :root {
    --practice-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))
    );
    --practice-book-frame-open-spread-height: calc(var(--practice-book-frame-open-spread-width) * var(--book-frame-source-ratio, 0.6467));
  }

  .practice-founder {
    min-height: var(--practice-book-frame-open-spread-height);
  }

  .practice-founder .spread__page--left,
  .practice-founder .spread__page--right {
    order: 0;
  }

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

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

/* ====================================================== */
/* PHONE STACKED : max-width 767px                        */
/* ------------------------------------------------------ */
/* Image first (order: -1), text second (order: 0).      */
/* Each page snaps to the single-page Book Frame ruler.   */
/* ====================================================== */
@media (max-width: 767px) {
  :root {
    /* Match the index Scene One stacked book frame EXACTLY:
       min(source, 100vw - 32px) — width-driven only, no viewport-
       height term. The previous 3-argument min() (which folded in a
       --app-viewport-height term) is a deeper nested calc/min/var
       chain than the index's, and Safari fails to resolve it, which
       collapsed this scene's page insets to 0 (the founder text was
       jammed against the image). The simpler 2-argument form resolves
       in every browser and makes this book frame behave identically
       to the homepage intro spread. */
    --practice-book-frame-stacked-page-width: min(
      var(--book-frame-single-page-source-width),
      calc(100vw - 32px)
    );
    --practice-book-frame-stacked-page-height: calc(var(--practice-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
    --practice-book-frame-page-stack-gap: 0px;
    --practice-book-frame-layout-width: var(--practice-book-frame-stacked-page-width);
    --practice-book-frame-layout-height: var(--practice-book-frame-stacked-page-height);
    --practice-book-frame-layout-scale: var(--practice-book-frame-stacked-page-scale);
    --practice-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --practice-founder-active-page-width: var(--practice-book-frame-layout-width);
    /* Same canvas-width bypass as portrait stacking above.
       At phone the canvas IS the full stacked-page-width,
       matching the index's explicit --index-book-frame-
       layout-canvas-width = --index-book-frame-stacked-
       canvas-width (= stacked-page-width, no multiplier). */
    --practice-opening-width: var(--practice-book-frame-layout-width);
  }

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

  /* Image first, statement second. Grid items accept the
     `order` property exactly like flex items. */
  .practice-founder .spread__page--left  { order: -1; }
  .practice-founder .spread__page--right { order: 0; }

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

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

  .practice-founder .spread__page--media-only {
    height: var(--practice-book-frame-stacked-page-height);
    min-height: var(--practice-book-frame-stacked-page-height);
  }

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

/* ====================================================== */
/* PORTRAIT STACKING : 768–1300 portrait                  */
/* ------------------------------------------------------ */
/* Tablet, small-laptop, and narrow-desktop windows keep  */
/* the scaled Open Spread while landscape-ish. Once the   */
/* viewport leans portrait, this rule switches the Book   */
/* Frame to two stacked single pages. Image on top,       */
/* text below.                                            */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  :root {
    --practice-book-frame-page-stack-gap: var(--practice-book-frame-single-page-gap);
    --practice-book-frame-layout-width: var(--practice-book-frame-single-page-width);
    --practice-book-frame-layout-height: var(--practice-book-frame-single-page-height);
    --practice-book-frame-layout-scale: var(--practice-book-frame-single-page-scale);
    --practice-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --practice-founder-active-page-width: var(--practice-book-frame-layout-width);
    /* Canvas-width bypass: at portrait stacking the canvas IS
       the full single-page-width — the 0.8666667 factor used
       at open spread is dropped, matching index.css behavior
       where --index-book-frame-layout-canvas-width is
       explicitly set to --index-book-frame-single-canvas-width
       (= single-page-width, no multiplier) in this same band. */
    --practice-opening-width: var(--practice-book-frame-layout-width);
  }

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

  .practice-founder .spread__page--left  { order: -1; }
  .practice-founder .spread__page--right { order: 0; }

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

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

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

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

/* ===================================================== */
/* SCENE TWO — ARTICLE SPREAD                            */
/* ----------------------------------------------------- */
/* A true two-page book spread on the practice page's own */
/* Book Frame router, built on the Programs Scene Two      */
/* model. The section is a 128vh scroll track; the stage   */
/* locks one viewport into place; the open book is         */
/* absolutely positioned on the Book Frame — the same       */
/* coordinates as Scene One and the founder spread.        */
/*                                                         */
/* Landscape: the copy fills the LEFT page, then continues */
/* on the RIGHT page. "Practice" opens the left page.      */
/* Body copy matches the founder spread's Baskerville      */
/* statement (same 0.035 × page-width ratio).              */
/*                                                         */
/* Portrait/phone: the sticky lock releases and the two    */
/* pages collapse into ONE continuous editorial column —   */
/* the page boxes, inners, and text wrappers dissolve so   */
/* every paragraph flows as a single vertical article.     */
/* All tokens are practice-local; nothing references the   */
/* Programs page.                                          */
/* ===================================================== */
.practice-article-spread {
  /* Body + label scale with the active page width, exactly like the
     founder spread (0.035) and the Scene-One-style kicker (0.02). */
  --pra-copy-size: max(15px, calc(var(--practice-founder-active-page-width) * 0.035));
  --pra-label-size: max(11px, calc(var(--practice-founder-active-page-width) * 0.02));
  --pra-copy-line-height: 1.42;
  /* One rhythm for kicker→copy and copy→copy, scaled with the page. */
  --pra-paragraph-gap: calc(var(--practice-founder-active-page-width) * 0.045);

  /* Page insets. Top mirrors the Programs article baseline (108/776);
     bottom mirrors Scene One's active inset bottom; left/right mirror
     the outer + gutter so the two pages face each other across the spine. */
  --pra-inset-top: calc(var(--practice-book-frame-layout-height) * 0.1391753);
  --pra-inset-bottom: calc(var(--practice-book-frame-layout-height) * 0.185567);
  --pra-inset-outer: calc(var(--practice-founder-active-page-width) * 0.1333333);
  --pra-inset-gutter: calc(var(--practice-founder-active-page-width) * 0.24);

  /* 128vh scroll track — same as the Programs Scene Two scene. */
  position: relative;
  height: var(--practice-bookframe-scroll-height);
  background: #ffffff;
  /* Cancel the page flex gap on BOTH sides so this book frame sits
     directly on Scene One above and the founder spread below — no extra
     gap between book-frame scenes. The sticky mechanics (128vh track vs
     100vh stage) supply the breathing room. The transition line then
     pins to the Scene One / Scene Two seam (top: 0). */
  margin-top: calc(-1 * var(--practice-section-space));
  margin-bottom: calc(-1 * var(--practice-section-space));
}

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

/* Open book, absolutely placed on the Book Frame. Fills the full frame
   so both pages clip at the page bottom — text that doesn't fit is
   hidden, exactly as if the page had a physical bottom edge. */
.practice-article-spread .spread__book {
  position: absolute;
  top: var(--practice-book-frame-layout-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--practice-book-frame-layout-width);
  max-width: var(--practice-book-frame-layout-width);
  height: var(--practice-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;
}

/* Spine crease: a hairline at the horizontal center of the frame,
   a third of the frame height tall and vertically centered. */
.practice-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. */
.practice-article-spread .spread__page {
  height: var(--practice-book-frame-layout-height);
  min-height: 0;
  overflow: hidden;
}

/* Inner text-safe padding: top/bottom from the article insets;
   left/right mirror the outer + gutter insets so the two pages
   face each other across the spine. */
.practice-article-spread .spread__page--text-only .spread__inner {
  padding-top: var(--pra-inset-top);
  padding-bottom: var(--pra-inset-bottom);
}

.practice-article-spread .spread__page--left .spread__inner {
  padding-left: var(--pra-inset-outer);
  padding-right: var(--pra-inset-gutter);
}

.practice-article-spread .spread__page--right .spread__inner {
  padding-left: var(--pra-inset-gutter);
  padding-right: var(--pra-inset-outer);
}

/* Text fills the inset box; override the default 376px / 96px-top
   that is tuned for the hero. */
.practice-article-spread .spread__text {
  max-width: 100%;
  padding-top: 0;
}

/* "Practice" kicker: the same mono kicker style used across the page. */
.practice-article__kicker {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--pra-label-size);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

/* Body copy: matches the founder spread's Baskerville statement. */
.practice-article__copy {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--pra-copy-size);
  line-height: var(--pra-copy-line-height);
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* Even rhythm: kicker → first paragraph and paragraph → paragraph
   share one gap so the column reads as one article. */
.practice-article__kicker + .practice-article__copy,
.practice-article__copy + .practice-article__copy {
  margin-top: var(--pra-paragraph-gap);
}

/* First child on each page pins to the page baseline (landscape):
   the kicker on the left page, the continuing paragraph on the right. */
.practice-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       */
/* paragraph flows as a single vertical article in DOM     */
/* order (left page, then right). The split here is on     */
/* paragraph boundaries, so the right page's opening        */
/* paragraph simply regains its normal paragraph gap.       */
@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. */
  .practice-article-spread {
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
  }

  .practice-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. */
  .practice-article-spread .spread__book {
    position: static;
    transform: none;
    display: block;
    width: var(--practice-book-frame-layout-width);
    max-width: var(--practice-book-frame-layout-width);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: var(--pra-inset-top)
             var(--pra-inset-outer)
             var(--pra-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. */
  .practice-article-spread .spread__page,
  .practice-article-spread .spread__inner,
  .practice-article-spread .spread__text {
    display: contents;
  }

  /* The right page's opening paragraph is no longer pinned to a page
     top — it continues the article, so restore the paragraph gap. */
  .practice-article-spread .spread__page--right .spread__text > :first-child {
    margin-top: var(--pra-paragraph-gap);
  }

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

/* ===================================================== */
/* PORTRAIT: align contact band to Scene One's column     */
/* ----------------------------------------------------- */
/* The contact band uses min(100% - 48px, spread-max) at  */
/* all sizes, so at portrait it ran wider than the page's  */
/* book-frame scenes. Match Scene One's single-page         */
/* horizontal extent here: min(600px source, 100vw - 32px) */
/* — 16px side margins on narrow / phone widths, settling   */
/* at the 600px column on wider portrait. Header/footer     */
/* are untouched. Same portrait condition as the index.     */
/* ===================================================== */
@media (max-width: 1300px) and (max-aspect-ratio: 6/5),
       (max-width: 767px) {
  .practice-contact {
    width: min(
      var(--book-frame-single-page-source-width, 600px),
      calc(100vw - 32px)
    );
  }
}