/* ============================================================
   LG Studio — The Practice · turnkey stylesheet
   Every rule is scoped beneath .lg-practice so this file cannot
   restyle the host website. Do not add unscoped selectors here.
   Load order: this file, then (optionally) host overrides.
   ============================================================ */

/* ── SCOPED NORMALISE ─────────────────────────────────────────
   Replaces the reset the original build inherited from its CSS
   framework. Scoped, so it stops at the Practice wrapper. ── */
.lg-practice,
.lg-practice *,
.lg-practice *::before,
.lg-practice *::after {
  box-sizing: border-box;
  border: 0 solid;
}
.lg-practice :where(h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, dl, dd, ul, ol, pre) {
  margin: 0;
}
.lg-practice :where(ul, ol) { list-style: none; padding: 0; }
.lg-practice :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
.lg-practice :where(a) { color: inherit; text-decoration: inherit; }
.lg-practice :where(img, picture, svg, video, canvas) { display: block; max-width: 100%; height: auto; }
.lg-practice :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
  background: transparent;
  border-radius: 0;
}
.lg-practice :where(button) { cursor: pointer; }
.lg-practice :where(svg) { height: auto; }

/* ── APPROVED PRACTICE SYSTEM (scoped verbatim) ───────────── */
/* ============================================================
   LG STUDIO — DESIGN TOKENS
   Version 1.1 · August 2026

   One brand. One shared core. Three expression modes.

   This file defines the LG Studio master identity and the
   direction for new work. Existing canonical product systems
   (StrategyIQ) and established surfaces (Insights) remain
   valid until intentionally migrated.

   Single source of truth. Do not inline these values elsewhere.
   ============================================================ */

/* fonts loaded via <link> in __root */
.lg-practice {
  /* ══════════════════════════════════════════════════════════
     1 · COLOR · RAW PALETTE
     Fixed values. The vocabulary, not the usage.
     ══════════════════════════════════════════════════════════ */
  --ink:          #0F1111;   /* Deep Ink — depth, focus, primary text */
  --ivory:        #F7F2E9;   /* Warm Ivory — clarity, warmth, canvas */
  --ivory-alt:    #EFE8DB;   /* Alt Ivory — subtle section shifts */
  --ivory-deep:   #E6DDCB;   /* Deep Ivory — rare, panel edges */
  --terracotta:   #C96E53;   /* Terracotta — human intervention, action */
  --teal:         #2F5D5A;   /* Teal — signal, structure, precision */

  /* Raw extensions for Ink-led composition */
  --ink-raised:   #1A1A1A;   /* Ink, one step up — panels on dark */
  --ink-card:     #161818;   /* Ink, card interior on dark */

  /* ══════════════════════════════════════════════════════════
     2 · COLOR · SEMANTIC ROLES
     What the value is DOING. Reference these, not the raw values.
     ══════════════════════════════════════════════════════════ */

  /* Accent roles — meaning, not decoration */
  --accent-action: var(--terracotta);  /* Human intervention · emphasis · authored decision */
  --accent-signal: var(--teal);        /* Signal · structure · system · analytical precision */

  /* Text */
  --text-primary:   #0F1111;
  --text-secondary: #4A4744;
  --text-muted:     #8A857E;
  --text-hairline:  #C8BFAE;

  /* Text on Ink Surface */
  --text-on-ink:         #F7F2E9;
  --text-on-ink-muted:   #A8A29A;

  /* Surfaces */
  --surface-canvas:  #F7F2E9;
  --surface-alt:     #EFE8DB;
  --surface-card:    #FFFCF6;
  --surface-ink:     #0F1111;
  --surface-ink-alt: #1A1A1A;

  /* Hairlines */
  --rule:        #DDD3BF;
  --rule-strong: #0F1111;
  --rule-on-ink: #2E2E2E;

  /* ══════════════════════════════════════════════════════════
     3 · TYPOGRAPHY · SEMANTIC ROLES
     Four roles, not four brands. A role describes the JOB the
     type is doing. Modes may map a role to a different family.
     ══════════════════════════════════════════════════════════ */

  --font-editorial:  'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-structural: 'Big Shoulders Display', 'Big Shoulders', 'Inter Tight', 'Inter', sans-serif;
  --font-system:     'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ── Backward-compatible aliases ───────────────────────────
     Retained so existing selectors keep resolving. New work
     should reference the semantic role directly.
     --font-display → --font-editorial
     --font-label   → --font-structural
     --font-mono    → --font-system
     ───────────────────────────────────────────────────────── */
  --font-display: var(--font-editorial);
  --font-label:   var(--font-structural);
  --font-mono:    var(--font-system);

  /* Structural type sets narrow. Micro labels need a weight lift. */
  --fw-structural: 500;

  /* ══════════════════════════════════════════════════════════
     4 · TYPOGRAPHY · SCALE
     ══════════════════════════════════════════════════════════ */
  --fs-display-xl: clamp(3.5rem, 6vw, 6rem);   /* Cover / hero */
  --fs-display-l:  clamp(2.75rem, 4.5vw, 4.25rem); /* Section leads */
  --fs-display-m:  clamp(2rem, 3vw, 2.75rem);  /* Article headings */
  --fs-h1:         2.25rem;
  --fs-h2:         1.75rem;
  --fs-h3:         1.375rem;
  --fs-body-l:     1.125rem;   /* Editorial lede */
  --fs-body:       1rem;
  --fs-body-s:     0.9375rem;
  --fs-label:      0.8125rem;  /* Structural eyebrows */
  --fs-micro:      0.6875rem;

  /* ── LEADING & TRACKING ─────────────────────────────────── */
  --lh-tight:  1.05;
  --lh-heading: 1.15;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  --tr-eyebrow: 0.18em;    /* Structural labels */
  --tr-signature: 0.32em;  /* READ / DIRECT / BUILD */
  --tr-tight:  -0.02em;    /* Editorial serif */
  --tr-body:   -0.005em;

  /* ══════════════════════════════════════════════════════════
     5 · SPACING
     ══════════════════════════════════════════════════════════ */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  40px;
  --sp-5:  64px;
  --sp-6:  96px;
  --sp-7:  144px;

  /* ══════════════════════════════════════════════════════════
     6 · RADII
     ══════════════════════════════════════════════════════════ */
  --r-none: 0;
  --r-xs:   2px;   /* Editorial default — barely there */
  --r-s:    4px;
  --r-m:    8px;
  --r-pill: 999px;

  /* ══════════════════════════════════════════════════════════
     7 · SHADOWS
     ══════════════════════════════════════════════════════════ */
  --shadow-hairline: 0 0 0 1px var(--rule);
  --shadow-print:    0 1px 0 rgba(15,17,17,0.06);
  --shadow-soft:     0 12px 32px rgba(15,17,17,0.06);
  --shadow-lift:     0 24px 60px rgba(15,17,17,0.10);

  /* ══════════════════════════════════════════════════════════
     8 · MOTION
     ══════════════════════════════════════════════════════════ */
  --ease-breath: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 180ms;
  --dur-hover: 240ms;
  --dur-section: 720ms;

  /* ══════════════════════════════════════════════════════════
     9 · LAYOUT
     ══════════════════════════════════════════════════════════ */
  --measure-narrow: 44ch;
  --measure-read:   62ch;
  --measure-wide:   78ch;
  --container:      1240px;
  --container-tight: 960px;
}

/* ════════════════════════════════════════════════════════════
   SURFACE SCOPES
   Paper and Ink are compositional tools inside one identity.
   Neither is "the brand." Neither is a light or dark theme.

   Apply data-surface="ink" to any section that should become
   Ink-led. Semantic tokens re-point; raw palette does not.
   ════════════════════════════════════════════════════════════ */
.lg-practice [data-surface="paper"] {
  --surface-canvas:  #F7F2E9;
  --surface-alt:     #EFE8DB;
  --surface-card:    #FFFCF6;
  --text-primary:    #0F1111;
  --text-secondary:  #4A4744;
  --text-muted:      #8A857E;
  --rule:            #DDD3BF;
  --rule-strong:     #0F1111;
  background: var(--surface-canvas);
  color: var(--text-primary);
}

.lg-practice [data-surface="ink"] {
  --surface-canvas:  #0F1111;
  --surface-alt:     #1A1A1A;
  --surface-card:    #161818;
  --text-primary:    #F7F2E9;
  --text-secondary:  #A8A29A;
  --text-muted:      #6F6A63;
  --rule:            #2E2E2E;
  --rule-strong:     #4A4744;
  background: var(--surface-canvas);
  color: var(--text-primary);
}

/* ── BASE RESETS ──────────────────────────────────────────── */
.lg-practice, .lg-practice *, .lg-practice *::before, .lg-practice *::after { box-sizing: border-box; }

.lg-practice { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.lg-practice {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  text-rendering: optimizeLegibility;
}

/* ── EDITORIAL TYPE PRIMITIVES ────────────────────────────── */
.lg-practice .display, .lg-practice .display-xl, .lg-practice .display-l, .lg-practice .display-m {
  font-family: var(--font-editorial);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--text-primary);
}
.lg-practice .display-xl { font-size: var(--fs-display-xl); }
.lg-practice .display-l { font-size: var(--fs-display-l); }
.lg-practice .display-m { font-size: var(--fs-display-m); }

/* ── STRUCTURAL TYPE PRIMITIVES ───────────────────────────── */
.lg-practice .eyebrow {
  font-family: var(--font-structural);
  font-weight: var(--fw-structural);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.lg-practice .signature {
  font-family: var(--font-structural);
  font-weight: var(--fw-structural);
  letter-spacing: var(--tr-signature);
  text-transform: uppercase;
}

/* ── SYSTEM TYPE PRIMITIVE ────────────────────────────────── */
.lg-practice .system-meta {
  font-family: var(--font-system);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.lg-practice .lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--measure-read);
}

.lg-practice hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-4) 0;
}
.lg-practice hr.rule-strong {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin: var(--sp-4) 0;
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lg-practice, .lg-practice *, .lg-practice *::before, .lg-practice *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * LG Studio proprietary icon system
 * Canonical geometry: /assets/icons/lg-studio/*.svg
 * Do not optimize or alter SVG paths.
 */
.lg-practice .lg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;   /* 24px — small feature default */
  height: 1.5rem;
  color: #15130F;
  --lg-icon-accent: #C96E53;
  --lg-icon-surface: #F7F2E9;
  line-height: 0;
  vertical-align: middle;
}

.lg-practice .lg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Size scale */
.lg-practice .lg-icon--xs { width: 1rem; height: 1rem; }           /* 16px — metadata / connective */
.lg-practice .lg-icon--sm { width: 1.25rem; height: 1.25rem; }     /* 20px — inline / list */
.lg-practice .lg-icon--md { width: 1.5rem; height: 1.5rem; }       /* 24px */
.lg-practice .lg-icon--lg { width: 2rem; height: 2rem; }           /* 32px — framework */
.lg-practice .lg-icon--xl { width: 2.25rem; height: 2.25rem; }     /* 36px — signature method */
/* Surface adaptation — cream / paper */
.lg-practice [data-surface="paper"] .lg-icon, .lg-practice .ee-section .lg-icon, .lg-practice .ee-section--soft .lg-icon, .lg-practice .ee-hero .lg-icon, .lg-practice .ee-colophon .lg-icon {
  color: #15130F;
  --lg-icon-surface: #F7F2E9;
}

/* Surface adaptation — ink / dark */
.lg-practice [data-surface="ink"] .lg-icon, .lg-practice .ee-section--dark .lg-icon {
  color: #F3EEE5;
  --lg-icon-surface: #0A0A09;
}

/* Soft cream panels that are not #F7F2E9 */
.lg-practice .ee-section--soft .lg-icon {
  --lg-icon-surface: #E7DFD2;
}

/* Connective arrow (journey punctuation) */
.lg-practice .lg-icon--arrow {
  width: 1rem;
  height: 1rem;
  color: #5C5348;
}

.lg-practice [data-surface="ink"] .lg-icon--arrow {
  color: rgba(243, 238, 229, 0.72);
}

.lg-practice .ee-journey-sep .lg-icon {
  width: 1rem;
  height: 1rem;
  color: #5C5348;
}

  /* LG Studio — Practice (Level 2). North Star visual system. Paper-led. */
.lg-practice { scroll-behavior: smooth; }
  .lg-practice { overflow-x: clip; } /* clip, not hidden: keeps the sticky nav sticking to the viewport */
  .lg-practice img { display: block; max-width: 100%; }
  .lg-practice a { color: inherit; }
  .lg-practice .studio-skip {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    text-decoration: none;
  }
  .lg-practice .studio-skip:focus, .lg-practice .studio-skip:focus-visible {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 10060;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
    background: var(--ink);
    color: var(--ivory);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
  }

  .lg-practice .lbl {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .lg-practice .lbl .n { color: var(--accent-action); }
  .lg-practice [data-surface="ink"] .lbl { color: var(--text-on-ink-muted); }

  .lg-practice .shell { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
  .lg-practice section { padding: var(--sp-7) 0; }
  .lg-practice .measure { max-width: 38rem; }
  .lg-practice .measure-narrow { max-width: 32rem; }

  .lg-practice .h-lead {
    font-family: var(--font-editorial);
    font-weight: 300;
    font-size: clamp(2rem, 3.6vw, 3.15rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0;
    text-wrap: balance;
  }
  .lg-practice .h-sub {
    font-family: var(--font-editorial);
    font-weight: 400;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text-primary);
  }
  .lg-practice .body-m {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
  }
  .lg-practice .body-s {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
  }
  .lg-practice .accent-text { color: var(--accent-action); }

  .lg-practice .lnk {
    font-family: var(--font-body); font-weight: 600; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-primary); text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--rule-strong); padding-bottom: 6px;
    transition: gap var(--dur-hover) var(--ease-breath);
  }
  .lg-practice .lnk:hover { gap: 16px; }
  .lg-practice .lnk svg { width: 18px; height: 8px; }
  .lg-practice [data-surface="ink"] .lnk { color: var(--ivory); border-bottom-color: var(--rule-on-ink); }

  .lg-practice .btn {
    font-family: var(--font-body); font-weight: 600; font-size: 11px;
    letter-spacing: 0.11em; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 26px;
    border: 1px solid rgba(201, 110, 83, 0.55);
    border-radius: 12px;
    background: transparent; color: var(--text-primary);
    text-decoration: none; cursor: pointer; line-height: 1;
    transition: background var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover);
  }
  .lg-practice .btn:hover, .lg-practice .btn:focus-visible {
    background: rgba(201, 110, 83, 0.12);
    border-color: var(--terracotta);
    color: var(--text-primary);
  }
  .lg-practice .btn:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 3px;
  }
  .lg-practice .btn.solid { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
  .lg-practice .btn.solid:hover { background: var(--accent-action); border-color: var(--accent-action); }
  .lg-practice [data-surface="ink"] .btn {
    border-color: rgba(201, 110, 83, 0.55);
    color: var(--ivory);
  }
  .lg-practice [data-surface="ink"] .btn:hover, .lg-practice [data-surface="ink"] .btn:focus-visible {
    background: rgba(201, 110, 83, 0.18);
    border-color: var(--terracotta);
    color: var(--ivory);
  }

  /* Nav — North Star host pattern; strip offset from lg-ecosystem-strip.css */
.lg-practice.has-ecosystem-nav { padding-top: 30px; }
  .lg-practice.has-ecosystem-nav .nav { top: 30px; z-index: 90; }
  @media (max-width: 1080px) {
    .lg-practice.has-ecosystem-nav { padding-top: 26px; }
    .lg-practice.has-ecosystem-nav .nav { top: 26px; }
  }
  .lg-practice .nav {
    position: sticky; top: 0; z-index: 90;
    background: var(--ink); color: var(--ivory);
    border-bottom: 1px solid var(--rule-on-ink);
  }
  .lg-practice .nav-in {
    max-width: 1320px; /* match ecosystem strip shell */
    margin: 0 auto;
    padding: 16px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 28px;
    box-sizing: border-box;
    min-height: 62px;
  }
  .lg-practice .nav-brand {
    display: inline-flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--ivory); flex-shrink: 0;
    justify-self: start;
    transform: translateY(-3px);
  }
  .lg-practice .nav-brand img { height: 32px; width: auto; filter: invert(1) brightness(1.6); }
  .lg-practice .nav-name {
    font-family: var(--font-structural, var(--font-body)); font-weight: 600;
    font-size: 1.1875rem; letter-spacing: .14em; text-transform: uppercase;
    line-height: 1;
  }
  .lg-practice .nav-links {
    display: flex; align-items: center; gap: 1.75rem;
    justify-self: center; flex-shrink: 0;
  }
  .lg-practice .nav-links a {
    font-family: var(--font-body); font-weight: 500; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    text-decoration: none; color: var(--text-on-ink-muted);
    padding: 0.15rem 0;
    transition: color var(--dur-hover);
  }
  .lg-practice .nav-links a:hover, .lg-practice .nav-links a:focus-visible { color: var(--terracotta); }
  .lg-practice .nav-links a[aria-current="page"] { color: var(--ivory); }
  .lg-practice .nav-sep { display: none; }
  .lg-practice .nav-right {
    display: flex; align-items: center; gap: 16px;
    justify-self: end; flex-shrink: 0;
  }
  .lg-practice .nav .ed-nav-lang-toggle-header {
    display: inline-flex; align-items: center; gap: 0;
    border: 1px solid rgba(247,242,233,.28); border-radius: 999px; padding: 2px;
  }
  .lg-practice .nav .ed-nav-lang-toggle-header button {
    font-family: var(--font-system); font-size: 10px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; border: none;
    background: transparent; color: var(--text-on-ink-muted);
    padding: .35rem .55rem; border-radius: 999px; cursor: pointer;
  }
  .lg-practice .nav .ed-nav-lang-toggle-header button:hover { color: var(--ivory); }
  .lg-practice .nav .ed-nav-lang-toggle-header button.is-active {
    color: var(--terracotta); background: rgba(201,110,83,.14);
  }
  .lg-practice .nav-cta {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; height: 34px; padding: 0 18px;
    font-family: var(--font-body); font-weight: 600; font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
    border: 1px solid rgba(201,110,83,.55); border-radius: 12px;
    background: transparent; color: var(--ivory);
    text-decoration: none; white-space: nowrap;
    transition: background var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover);
  }
  .lg-practice .nav-cta:hover, .lg-practice .nav-cta:focus-visible {
    background: rgba(201,110,83,.18);
    border-color: var(--terracotta);
    color: var(--ivory);
  }
  .lg-practice .nav .ed-nav-mobile { display: none; align-items: center; gap: 0.75rem; }
  .lg-practice .nav .ed-menu-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.15rem; border: none; background: transparent;
    color: var(--ivory); cursor: pointer;
    font-family: var(--font-system); font-size: 10px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  .lg-practice .nav .ed-menu-toggle:hover { color: var(--terracotta); }
  .lg-practice .nav .ed-menu-toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

  .lg-practice .ed-nav-drawer {
    position: fixed; inset: 0; z-index: 10050; pointer-events: none;
  }
  .lg-practice .ed-nav-drawer.is-open { pointer-events: auto; }
  .lg-practice .ed-nav-drawer-backdrop {
    position: absolute; inset: 0; background: rgba(14, 12, 10, 0.42);
    opacity: 0; transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lg-practice .ed-nav-drawer.is-open .ed-nav-drawer-backdrop { opacity: 1; }
  .lg-practice .ed-nav-drawer-panel {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    padding: clamp(24px, 5vw, 40px); background: #FAF6EF; color: #0E0C0A;
    overflow-y: auto; opacity: 0; transform: translateY(12px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .lg-practice .ed-nav-drawer.is-open .ed-nav-drawer-panel { opacity: 1; transform: translateY(0); }
  .lg-practice .ed-nav-drawer-close {
    align-self: flex-end; display: inline-flex; align-items: center; justify-content: center;
    gap: 0.55rem; min-height: 44px; margin: 0 0 clamp(28px, 5vw, 48px);
    padding: 0.55rem 0.85rem; border: 1px solid rgba(14, 12, 10, 0.18);
    border-radius: 999px; background: #FAF6EF; cursor: pointer;
    font-family: var(--font-system); font-size: 11px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: #0E0C0A;
  }
  .lg-practice .ed-nav-drawer-close::before {
    content: "×"; font-size: 1.35rem; line-height: 1; font-weight: 400; letter-spacing: 0;
  }
  .lg-practice .ed-nav-drawer-close:hover { color: #C96E53; border-color: rgba(201, 110, 83, 0.55); background: #fff; }
  .lg-practice .ed-nav-drawer-nav { display: flex; flex-direction: column; gap: clamp(20px, 4vw, 32px); flex: 1; }
  .lg-practice .ed-nav-drawer-link {
    display: flex; align-items: baseline; gap: 0.65rem;
    text-decoration: none; color: #0E0C0A;
    font-family: var(--font-editorial); font-weight: 300;
    font-size: clamp(1.75rem, 5vw, 2.5rem); letter-spacing: -0.02em;
  }
  .lg-practice .ed-nav-drawer-link:hover, .lg-practice .ed-nav-drawer-link:focus-visible { color: #C96E53; }
  .lg-practice .ed-nav-drawer-num {
    font-family: var(--font-system); font-size: 0.75rem; letter-spacing: .12em;
    color: rgba(14,12,10,.45); min-width: 1.5rem;
  }
  .lg-practice .ed-nav-drawer-sep { color: rgba(14,12,10,.28); font-size: 1rem; }
  .lg-practice .ed-nav-drawer-label { line-height: 1.1; }
  .lg-practice .ed-nav-drawer-ecosystem {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.55rem 0.75rem; margin-top: 1.5rem; padding-top: 1rem;
    border-top: 1px solid rgba(14,12,10,.12);
    font-family: var(--font-system); font-size: 0.625rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .lg-practice .ed-nav-drawer-ecosystem a { color: rgba(14,12,10,.55); text-decoration: none; }
  .lg-practice .ed-nav-drawer-ecosystem a:hover { color: #0E0C0A; }
  .lg-practice .ed-nav-drawer-ecosystem__sep { color: rgba(14,12,10,.28); user-select: none; }
  .lg-practice .ed-nav-drawer-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-top: auto; padding-top: 2rem;
    border-top: 1px solid rgba(14,12,10,.12);
  }
  .lg-practice .ed-nav-lang-toggle-drawer {
    display: inline-flex; border: 1px solid rgba(14,12,10,.18); border-radius: 999px; padding: 2px;
  }
  .lg-practice .ed-nav-lang-toggle-drawer button {
    font-family: var(--font-system); font-size: 10px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; border: none;
    background: transparent; color: rgba(14,12,10,.5);
    padding: .35rem .55rem; border-radius: 999px; cursor: pointer;
  }
  .lg-practice .ed-nav-lang-toggle-drawer button.is-active {
    color: #C96E53; background: rgba(201,110,83,.14);
  }
  .lg-practice .ed-nav-drawer-book {
    font-family: var(--font-body); font-weight: 600; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
    padding: 12px 20px; background: #0E0C0A; color: #FAF6EF;
    border-radius: 12px;
  }
  .lg-practice.ed-nav-drawer-open { overflow: hidden; }

  /* ── Practice movements ─────────────────────────────────────── */
.lg-practice .prac-open {
    /* Bottom kept tight so the misty visual hands off into §01 */
    position: relative;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(1.25rem, 2.5vw, 2rem);
    border-bottom: 0;
    overflow: hidden;
  }
  .lg-practice .prac-open > .shell.prac-open__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: min(70vh, 780px);
  }
  .lg-practice .prac-open__copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: min(36rem, 44%);
    padding-right: clamp(0.75rem, 2vw, 1.5rem);
    isolation: isolate;
  }
  /* Soft cream wash behind copy only — atmospheric paper haze */
.lg-practice .prac-open__copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12% -32% -8% -22%;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse 100% 95% at 12% 30%,
        rgba(247, 242, 233, 0.97) 0%,
        rgba(247, 242, 233, 0.88) 32%,
        rgba(247, 242, 233, 0.55) 55%,
        rgba(247, 242, 233, 0.18) 74%,
        transparent 88%
      ),
      linear-gradient(
        100deg,
        rgba(247, 242, 233, 0.95) 0%,
        rgba(247, 242, 233, 0.72) 38%,
        rgba(247, 242, 233, 0.22) 68%,
        transparent 100%
      );
  }
  .lg-practice .prac-open #practice-title {
    text-wrap: balance;
  }
  .lg-practice .prac-open .thesis {
    font-family: var(--font-editorial);
    font-weight: 300;
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 1.75rem 0 0;
    max-width: 28ch;
  }
  .lg-practice .prac-open .flow { margin-top: 2.25rem; display: grid; gap: 1.15rem; }
  .lg-practice .prac-open .hinge {
    font-family: var(--font-editorial);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 0.35rem 0 0;
  }
  /*
   * Hero visual field · full-bleed atmospheric surface (escapes content shell).
   * Multi-stage left dissolve + soft vertical edge dissolve so no photo frame remains.
   */
.lg-practice .prac-open__visual {
    margin: 0;
    position: absolute;
    z-index: 1;
    top: -4%;
    bottom: -6%;
    left: 50%;
    width: 100vw;
    height: auto;
    transform: translateX(-50%);
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 12%,
        rgba(0, 0, 0, 0.28) 22%,
        rgba(0, 0, 0, 0.58) 34%,
        rgba(0, 0, 0, 0.88) 46%,
        #000 58%,
        #000 100%
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 12%,
        rgba(0, 0, 0, 0.28) 22%,
        rgba(0, 0, 0, 0.58) 34%,
        rgba(0, 0, 0, 0.88) 46%,
        #000 58%,
        #000 100%
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
      );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .lg-practice .prac-open__visual picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .lg-practice .prac-open__visual img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /* Landscape · keep horizon + submerged stepped structure */
    object-position: 68% 46%;
  }
  /* §01 opens closer so “what appears → what lies underneath” reads as one beat */
.lg-practice #why-the-read {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
  }
  .lg-practice #architecture {
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  }
  .lg-practice #two-reads {
    padding-top: clamp(4rem, 8vw, 6rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
  }
  .lg-practice #read-direct-build {
    padding-top: clamp(4.5rem, 9vw, 7rem);
    padding-bottom: clamp(4.5rem, 9vw, 7rem);
  }
  .lg-practice #go-deeper {
    padding-top: clamp(4rem, 8vw, 6rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
  }

  .lg-practice .prac-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .lg-practice .prac-split .col-note { display: grid; gap: 1rem; }

  .lg-practice .sym {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: grid; gap: 14px;
  }
  .lg-practice .sym li {
    display: flex; align-items: center; gap: 14px;
    font-size: 1rem; color: var(--text-primary);
  }
  .lg-practice .sym .lg-icon {
    width: 20px; height: 20px; flex-shrink: 0;
    color: var(--ink);
    --lg-icon-accent: var(--terracotta);
    --lg-icon-surface: var(--ivory);
  }

  .lg-practice .lens {
    font-family: var(--font-editorial);
    font-weight: 300;
    font-size: clamp(1.65rem, 2.8vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
    text-wrap: balance;
  }

  .lg-practice .layers {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 2.75rem;
    border-top: 1px solid var(--rule);
    align-items: stretch;
  }
  .lg-practice .layer {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.1rem 0 0;
    border-right: 1px solid var(--rule);
    min-width: 0;
  }
  .lg-practice .layer:last-child { border-right: 0; padding-right: 0; }
  .lg-practice .layer .num {
    font-family: var(--font-system); font-size: 11px; letter-spacing: .1em;
    color: var(--text-muted); display: block; margin-bottom: 14px;
    line-height: 1;
  }
  .lg-practice .layer .lg-icon {
    width: 30px; height: 30px; display: block; margin-bottom: 16px;
    flex-shrink: 0;
    color: var(--ink);
    --lg-icon-accent: var(--terracotta);
    --lg-icon-surface: var(--ivory);
  }
  .lg-practice .layer h4 {
    font-family: var(--font-editorial); font-weight: 400;
    font-size: 1.05rem; letter-spacing: -0.015em; line-height: 1.2;
    margin: 0 0 10px; color: var(--text-primary);
    min-height: 2.5em;
  }
  .lg-practice .layer p {
    font-size: 0.8125rem; line-height: 1.55; color: var(--text-secondary); margin: 0;
    max-width: 18ch;
  }
  .lg-practice .layer-example {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    max-width: 46ch;
  }
  .lg-practice .layer-example .k {
    font-family: var(--font-body); font-weight: 600; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-action); display: block; margin-bottom: 10px;
  }

  .lg-practice .reads-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3.5vw, 2.5rem);
    margin-top: 2.75rem;
    align-items: stretch;
  }
  .lg-practice .read-plate {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    height: 100%;
    border: 1px solid rgba(247, 242, 233, 0.12);
    background: transparent;
  }
  .lg-practice .read-way {
    border: none;
    background: transparent;
    padding: clamp(1.35rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem) 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .lg-practice .read-way .idx {
    font-family: var(--font-system); font-size: 11px; letter-spacing: .12em;
    color: var(--text-on-ink-muted);
  }
  .lg-practice .read-way .lg-icon {
    width: 32px; height: 32px;
    color: var(--ivory);
    --lg-icon-accent: var(--terracotta);
    --lg-icon-surface: var(--ink);
  }
  .lg-practice .read-way h3 {
    font-family: var(--font-editorial); font-weight: 400;
    font-size: clamp(1.35rem, 2vw, 1.6rem); letter-spacing: -0.02em;
    margin: 0; color: var(--ivory);
  }
  .lg-practice .read-way p {
    font-size: 0.9375rem; line-height: 1.65;
    color: var(--text-on-ink-muted); margin: 0; max-width: 34ch; flex: 1;
  }
  .lg-practice .read-plate__visual {
    margin: 0;
    overflow: hidden;
    background: rgba(10, 10, 9, 0.55);
    border-top: 1px solid rgba(247, 242, 233, 0.1);
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
  }
  .lg-practice .read-plate__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(0.95) contrast(0.98) brightness(0.97);
  }
  .lg-practice .read-plate--situation .read-plate__visual img {
    object-position: 50% 42%;
  }
  .lg-practice .read-plate--source .read-plate__visual img {
    object-position: 48% 45%;
  }

  .lg-practice .rdb {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 22px;
    align-items: start;
    margin-top: 2.75rem;
  }
  .lg-practice .rdb-step {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .lg-practice .rdb-step .lg-icon {
    width: 38px; height: 38px; display: block; margin-bottom: 20px;
    flex-shrink: 0;
    color: var(--ink);
    --lg-icon-accent: var(--terracotta);
    --lg-icon-surface: var(--ivory);
  }
  .lg-practice .rdb-step h4 {
    font-family: var(--font-editorial); font-weight: 400;
    font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 10px;
    color: var(--text-primary);
  }
  .lg-practice .rdb-step p {
    font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary);
    margin: 0; max-width: 26ch;
  }
  .lg-practice .rdb .lg-icon--arrow {
    width: 22px; height: 22px; margin-top: 10px;
    color: var(--text-muted);
    --lg-icon-accent: var(--terracotta);
  }

  .lg-practice .deeper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 2.75rem;
    border-top: 1px solid var(--rule-on-ink);
  }
  .lg-practice .deeper a {
    display: block;
    padding: 1.75rem 1.25rem 1.75rem 0;
    text-decoration: none;
    border-bottom: 1px solid var(--rule-on-ink);
    color: var(--ivory);
    transition: color var(--dur-hover);
  }
  .lg-practice .deeper a:nth-child(odd) { padding-right: 1.75rem; border-right: 1px solid var(--rule-on-ink); }
  .lg-practice .deeper a:nth-child(even) { padding-left: 1.75rem; }
  .lg-practice .deeper a:hover, .lg-practice .deeper a:focus-visible { color: var(--terracotta); }
  .lg-practice .deeper a:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 4px;
  }
  .lg-practice .deeper .meta {
    font-family: var(--font-system); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-on-ink-muted); display: block; margin-bottom: 12px;
  }
  .lg-practice .deeper .title {
    font-family: var(--font-editorial); font-weight: 400;
    font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2;
    margin: 0 0 10px;
  }
  .lg-practice .deeper .desc {
    font-size: 0.8125rem; line-height: 1.55; color: var(--text-on-ink-muted); margin: 0;
    max-width: 36ch;
  }

  /* ── Practice visual assets: iceberg ── */
.lg-practice .prac-iceberg {
    margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
  }
  .lg-practice .prac-iceberg__frame {
    position: relative;
    overflow: hidden;
    background: #0B1C2C;
  }
  .lg-practice .prac-iceberg__frame picture, .lg-practice .prac-iceberg__frame img {
    display: block;
    width: 100%;
    height: auto;
  }
  .lg-practice .prac-iceberg__label {
    position: absolute;
    left: 56%;
    right: clamp(1rem, 4vw, 2.5rem);
    margin: 0;
    max-width: 24ch;
  }
  .lg-practice .prac-iceberg__label--symptoms {
    top: 18%;
    color: #0E0C0A;
  }
  .lg-practice .prac-iceberg__label--roots {
    top: 58%;
    color: #FAF6EF;
  }
  .lg-practice .prac-iceberg__kicker {
    display: block;
    font-family: var(--font-system);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.3;
  }
  .lg-practice .prac-iceberg__sub {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-editorial);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    letter-spacing: -0.015em;
    line-height: 1.25;
  }

  .lg-practice .foot {
    background: var(--ink); color: var(--ivory);
    padding: var(--sp-5) 0 var(--sp-4);
    border-top: 1px solid var(--rule-on-ink);
  }
  .lg-practice .foot-in {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: 1.5rem; align-items: end;
  }
  .lg-practice .foot img { height: 28px; width: auto; margin-bottom: 12px; }
  .lg-practice .foot-base {
    margin-top: 2rem; padding-top: 1.25rem;
    border-top: 1px solid var(--rule-on-ink);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    font-size: 0.75rem; color: var(--text-on-ink-muted);
  }
  .lg-practice .foot-base a { color: inherit; text-decoration: none; }

  @media (max-width: 1024px) {
    .lg-practice .layers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) 0; }
    .lg-practice .layer:nth-child(3) { border-right: 0; }
    .lg-practice .layer:nth-child(n+4) { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
  }
  @media (max-width: 1100px) {
    .lg-practice .prac-open > .shell.prac-open__inner {
      grid-template-columns: 1fr;
      min-height: 0;
      gap: 0;
    }
    .lg-practice .prac-open__copy {
      max-width: none;
      padding-right: 0;
    }
    .lg-practice .prac-open__copy::before {
      inset: -6% -8% -4% -8%;
      opacity: 0.55;
    }
    .lg-practice .prac-open__visual {
      position: relative;
      z-index: auto;
      top: auto;
      bottom: auto;
      left: auto;
      width: auto;
      height: auto;
      transform: none;
      margin: clamp(1.75rem, 4vw, 2.5rem) 40px 0;
      aspect-ratio: 16 / 9;
      max-height: min(48vh, 520px);
      pointer-events: auto;
      /* Stacked: soft top dissolve from cream — no hard photo frame */
      -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.45) 6%,
        #000 14%,
        #000 100%
      );
      mask-image: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.45) 6%,
        #000 14%,
        #000 100%
      );
      -webkit-mask-composite: source-over;
      mask-composite: add;
    }
    .lg-practice .prac-open__visual img {
      object-position: 74% 48%;
    }
  }
  @media (max-width: 1080px) {
    .lg-practice .nav-in {
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 12px 20px;
    }
    .lg-practice .nav-links { display: none; }
    .lg-practice .nav .ed-nav-mobile { display: flex; }
    .lg-practice .prac-iceberg__label {
      left: 52%;
    }
    .lg-practice .prac-iceberg__label--symptoms { top: 16%; }
    .lg-practice .prac-iceberg__label--roots { top: 56%; }
  }
  @media (max-width: 820px) {
    .lg-practice .shell { padding: 0 24px; }
    .lg-practice .prac-open > .shell.prac-open__inner { padding-right: 24px; }
    .lg-practice section { padding: var(--sp-5) 0; }
    .lg-practice .prac-split { grid-template-columns: 1fr; }
    .lg-practice .reads-grid { grid-template-columns: 1fr; }
    .lg-practice .rdb {
      grid-template-columns: 1fr;
      gap: 1.75rem;
    }
    .lg-practice .rdb .lg-icon--arrow { display: none; }
    .lg-practice .deeper { grid-template-columns: 1fr; }
    .lg-practice .deeper a:nth-child(odd), .lg-practice .deeper a:nth-child(even) {
      padding-left: 0; padding-right: 0; border-right: 0;
    }
    .lg-practice .prac-open__visual {
      margin-left: 24px;
      margin-right: 24px;
      aspect-ratio: 4 / 5;
      max-height: none;
      width: auto;
    }
    .lg-practice .prac-open__visual img {
      /* Vertical master · surface + depth structure */
      object-position: center 40%;
    }
  }
  @media (orientation: portrait) {
    .lg-practice .prac-open__visual {
      aspect-ratio: 1122 / 1402;
      max-height: none;
    }
    .lg-practice .prac-open__visual img {
      object-position: center 40%;
    }
    .lg-practice .prac-iceberg__label {
      left: 48%;
      right: 0.85rem;
      max-width: 18ch;
    }
    .lg-practice .prac-iceberg__label--symptoms { top: 11%; }
    .lg-practice .prac-iceberg__label--roots { top: 46%; }
    .lg-practice .prac-iceberg__sub { font-size: 0.95rem; }
  }
  @media (max-width: 480px) {
    .lg-practice .shell { padding: 0 18px; }
    .lg-practice .prac-open > .shell.prac-open__inner { padding-right: 18px; }
    .lg-practice .prac-open__visual {
      margin-left: 18px;
      margin-right: 18px;
    }
    .lg-practice .nav-in { padding: 12px 20px; column-gap: 12px; }
    .lg-practice .nav-cta { height: 32px; padding: 0 14px; font-size: 10px; border-radius: 11px; }
    .lg-practice .nav .ed-nav-lang-toggle-header { display: none; }
    .lg-practice .nav-name { font-size: 0.9375rem; }
    .lg-practice .layers { grid-template-columns: 1fr 1fr; }
    .lg-practice .layer h4 { min-height: 0; }
    .lg-practice .layer { border-right: 1px solid var(--rule); }
    .lg-practice .layer:nth-child(2n) { border-right: 0; padding-right: 0; }
    .lg-practice .layer:nth-child(n+3) { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
    .lg-practice .prac-iceberg__label {
      left: 44%;
      right: 0.65rem;
      max-width: 16ch;
    }
    .lg-practice .prac-iceberg__kicker { font-size: 0.5625rem; letter-spacing: 0.12em; }
    .lg-practice .prac-iceberg__sub { font-size: 0.875rem; }
  }
  @media (max-width: 359px) {
    .lg-practice .nav-cta { display: none; }
    .lg-practice .nav-name { display: none; }
    .lg-practice .layers { grid-template-columns: 1fr; }
    .lg-practice .layer { border-right: 0; }
  }
/* ============================================================
   LG STUDIO — PRACTICE · PRESENTATION LAYER
   Refinement pass. Motion, material, and detail only.
   No content changes. Tokens from tokens.css.
   ============================================================ */
.lg-practice {
  --ease-breath: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hover: 260ms;
  --dur-reveal: 1100ms;
}

.lg-practice { scroll-behavior: smooth; }
.lg-practice {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lg-practice ::selection { background: rgba(201, 110, 83, 0.22); color: var(--ink); }

/* ── Paper grain · barely there, but the eye reads it as material ── */
.lg-practice [data-surface="paper"]:not(.prac-open) { position: relative; }
.lg-practice [data-surface="paper"]:not(.prac-open)::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.lg-practice [data-surface="paper"] > *:not(.prac-open__visual) { position: relative; z-index: 1; }

/* ══ 1 · REVEAL SYSTEM ══════════════════════════════════════ */
.lg-practice [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-breath),
    transform var(--dur-reveal) var(--ease-breath),
    clip-path var(--dur-reveal) var(--ease-breath);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.lg-practice [data-reveal="rise"] { transform: translateY(26px); }
.lg-practice [data-reveal="fade"] { transform: none; }
.lg-practice [data-reveal="wipe"] { transform: translateX(-14px); }
.lg-practice [data-reveal="frame"] { transform: scale(.985); }
.lg-practice [data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Hairline that draws itself across on entry */
.lg-practice .rule-draw { position: relative; }
.lg-practice .rule-draw::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--rule);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1400ms var(--ease-breath) 120ms;
}
.lg-practice [data-surface="ink"] .rule-draw::after { background: var(--rule-on-ink); }
.lg-practice .rule-draw.is-in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .lg-practice { scroll-behavior: auto; }
  .lg-practice [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .lg-practice .rule-draw::after { transform: scaleX(1); transition: none; }
  .lg-practice, .lg-practice *, .lg-practice *::before, .lg-practice *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ══ 2 · NAVIGATION ════════════════════════════════════════ */
.lg-practice .nav {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in oklab, var(--ink) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  color: var(--ivory);
  border-bottom: 1px solid var(--rule-on-ink);
  transition: box-shadow 500ms var(--ease-breath), background 500ms var(--ease-breath);
}
.lg-practice .nav.is-condensed {
  background: color-mix(in oklab, var(--ink) 97%, transparent);
  box-shadow: 0 18px 44px -30px rgba(0,0,0,.9);
}
.lg-practice .nav-in { transition: padding 520ms var(--ease-breath), min-height 520ms var(--ease-breath); }
.lg-practice .nav.is-condensed .nav-in { padding-top: 10px; padding-bottom: 10px; min-height: 52px; }

.lg-practice .nav-brand img {
  transition: opacity var(--dur-hover) var(--ease-breath), transform 700ms var(--ease-breath);
}
.lg-practice .nav-brand:hover img { opacity: .88; transform: translateY(-1px); }
.lg-practice .nav-name { transition: letter-spacing 600ms var(--ease-breath); }
.lg-practice .nav-brand:hover .nav-name { letter-spacing: .17em; }

/* ══ 2b · ECOSYSTEM IDENTITY STRIP ═════════════════════════ */
/* Two entry points to the ecosystem: the person and the practice. */
.lg-practice .lg-eco {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 30px;
  background: var(--ink);
  color: var(--ivory);
  border-bottom: 1px solid rgba(247, 242, 233, 0.05);
}
.lg-practice .lg-eco__shell {
  max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: center;
}
.lg-practice .lg-eco__primary { display: flex; align-items: center; min-width: 0; }
.lg-practice .lg-eco__sep {
  display: inline-flex; align-items: center; margin: 0 .65rem;
  font-family: var(--font-system); font-size: 9.5px;
  color: rgba(247, 242, 233, .28); user-select: none; flex: none;
}
.lg-practice .lg-eco__node {
  display: inline-flex; align-items: center;
  font-family: var(--font-system); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; color: rgba(247, 242, 233, .42);
  transition: color 300ms var(--ease-breath), letter-spacing 500ms var(--ease-breath);
}
.lg-practice .lg-eco__node--identity { color: rgba(247, 242, 233, .78); }
.lg-practice .lg-eco__node:hover, .lg-practice .lg-eco__node:focus-visible {
  color: rgba(247, 242, 233, .95); letter-spacing: .19em;
}
.lg-practice .lg-eco__node[aria-current="page"] { color: rgba(247, 242, 233, .95); }
.lg-practice .lg-eco__node[aria-current="page"]::before {
  content: ""; width: 3px; height: 3px; margin-right: 7px; flex: none;
  background: var(--terracotta); opacity: .9; transform: rotate(45deg);
}
.lg-practice :where(.lg-eco a):focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.lg-practice.has-ecosystem-nav { padding-top: 30px; }
.lg-practice.has-ecosystem-nav .nav { top: 30px; }
@media (max-width: 1080px) {
  .lg-practice .lg-eco { height: 26px; }
  .lg-practice .lg-eco__shell { padding: 0 20px; }
  .lg-practice .lg-eco__node, .lg-practice .lg-eco__sep { font-size: 9px; letter-spacing: .12em; }
  .lg-practice.has-ecosystem-nav { padding-top: 26px; }
  .lg-practice.has-ecosystem-nav .nav { top: 26px; }
}

/* Nav links: measured underline + terracotta index dot */
.lg-practice .nav-links a { position: relative; }
.lg-practice .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--terracotta);
  transform: scaleX(0); transform-origin: right;
  transition: transform 520ms var(--ease-breath);
}
.lg-practice .nav-links a:hover::after, .lg-practice .nav-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.lg-practice .nav-links a[aria-current="page"] { color: var(--ivory); }
.lg-practice .nav-links a[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px;
  margin-top: -2px; border-radius: 50%; background: var(--terracotta);
}

/* Language pill with a sliding thumb */
.lg-practice .nav .ed-nav-lang-toggle-header { position: relative; overflow: hidden; }
.lg-practice .nav .ed-nav-lang-toggle-header::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px);
  border-radius: 999px; background: rgba(201,110,83,.16);
  transition: transform 520ms var(--ease-breath);
}
.lg-practice .nav .ed-nav-lang-toggle-header[data-lang="es"]::before { transform: translateX(100%); }
.lg-practice .nav .ed-nav-lang-toggle-header button { position: relative; z-index: 1; transition: color var(--dur-hover); }
.lg-practice .nav .ed-nav-lang-toggle-header button.is-active { background: transparent; }

/* CTA: terracotta fills from the floor */
.lg-practice .nav-cta { position: relative; overflow: hidden; isolation: isolate; }
.lg-practice .nav-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--terracotta);
  transform: translateY(101%); transition: transform 520ms var(--ease-breath);
}
.lg-practice .nav-cta:hover::before, .lg-practice .nav-cta:focus-visible::before { transform: translateY(0); }
.lg-practice .nav-cta:hover, .lg-practice .nav-cta:focus-visible { color: var(--ivory); border-color: var(--terracotta); background: transparent; }

/* Reading progress — one hairline of terracotta */
.lg-practice .nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  transform-origin: left; transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, rgba(201,110,83,.35), var(--terracotta));
}

/* ══ 3 · CHAPTER RAIL ══════════════════════════════════════ */
.lg-practice .chapter-rail {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 70; display: grid; gap: 14px; justify-items: end;
  opacity: 0; pointer-events: none;
  transition: opacity 700ms var(--ease-breath);
}
.lg-practice .chapter-rail.is-visible { opacity: 1; pointer-events: auto; }
.lg-practice .chapter-rail a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-system); font-size: 10px; letter-spacing: .12em;
  color: var(--text-muted);
}
.lg-practice .chapter-rail__tick {
  display: block; width: 18px; height: 1px; background: currentColor; opacity: .5;
  transition: width 520ms var(--ease-breath), opacity var(--dur-hover), background var(--dur-hover);
}
.lg-practice .chapter-rail__name {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  text-transform: uppercase;
  transition: max-width 620ms var(--ease-breath), opacity 420ms var(--ease-breath);
}
.lg-practice .chapter-rail a:hover .chapter-rail__name, .lg-practice .chapter-rail a:focus-visible .chapter-rail__name { max-width: 180px; opacity: .85; }
.lg-practice .chapter-rail a:hover .chapter-rail__tick { width: 30px; opacity: 1; }
.lg-practice .chapter-rail a.is-active { color: var(--terracotta); }
.lg-practice .chapter-rail a.is-active .chapter-rail__tick { width: 34px; opacity: 1; background: var(--terracotta); }
.lg-practice .chapter-rail[data-surface-mode="ink"] a { color: var(--text-on-ink-muted); }
.lg-practice .chapter-rail[data-surface-mode="ink"] a.is-active { color: var(--terracotta); }
@media (max-width: 1420px) { .lg-practice .chapter-rail { display: none; } }

/* ══ 4 · HERO ══════════════════════════════════════════════ */
.lg-practice .prac-open__visual img { transform: scale(1.06); transition: transform 2400ms var(--ease-breath); }
.lg-practice .prac-open.is-ready .prac-open__visual img { transform: scale(1); }

/* Headline set line by line behind a mask */
.lg-practice .h-lead .line { display: block; overflow: hidden; }
.lg-practice .h-lead .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1200ms var(--ease-breath);
  transition-delay: var(--line-delay, 0ms);
}
.lg-practice .is-in .h-lead .line > span, .lg-practice .prac-open.is-ready .h-lead .line > span { transform: translateY(0); }

/* The accent word arrives last, and it arrives lit */
.lg-practice .accent-text {
  color: var(--accent-action);
  position: relative;
}
.lg-practice .prac-open .accent-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: 1px;
  background: currentColor; opacity: .38;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1000ms var(--ease-breath) 1500ms;
}
.lg-practice .prac-open.is-ready .accent-text::after { transform: scaleX(1); }

.lg-practice .thesis {
  font-family: var(--font-editorial); font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.45;
  color: var(--text-secondary); margin: 1.5rem 0 2rem; max-width: 34ch;
}
.lg-practice .hinge {
  position: relative;
  font-family: var(--font-editorial); font-weight: 400;
  font-size: 1.15rem; color: var(--text-primary);
  padding-left: 18px; border-left: 0;
  margin: .5rem 0;
}
.lg-practice .hinge::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--terracotta);
  transform: scaleY(0); transform-origin: top;
  transition: transform 900ms var(--ease-breath) 120ms;
}
.lg-practice .hinge.is-in::before { transform: scaleY(1); }
.lg-practice .flow { display: grid; gap: 1.15rem; }

/* ══ 4b · CADENCE LINES ════════════════════════════════════ */
.lg-practice .cadence { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.lg-practice .cadence li {
  position: relative;
  font-family: var(--font-editorial);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 14px;
}
.lg-practice .cadence li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px;
  background: var(--terracotta); opacity: .55;
  transform: scaleX(0); transform-origin: left;
  transition: transform 620ms var(--ease-breath);
  transition-delay: var(--cad-delay, 0ms);
}
.lg-practice .cadence.is-in li::before { transform: scaleX(1); }
.lg-practice .cadence--tight li { color: var(--text-primary); }
.lg-practice [data-surface="ink"] .cadence li { color: var(--text-on-ink-muted); }

.lg-practice .beneath-list { display: grid; gap: .3rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.lg-practice .beneath-list li {
  font-size: var(--fs-body-s); color: var(--text-secondary);
  padding-left: 14px; position: relative;
}
.lg-practice .beneath-list li::before {
  content: "·"; position: absolute; left: 2px; color: var(--terracotta);
}

/* Section eyebrow: index number gets a mono tick */
.lg-practice .lbl { display: inline-flex; align-items: baseline; }
.lg-practice .lbl .n { font-family: var(--font-system); }

/* ══ 5 · SYMPTOM LIST ══════════════════════════════════════ */
.lg-practice .sym li {
  padding: 8px 10px 8px 0; margin-left: -10px; padding-left: 10px;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-hover), border-color var(--dur-hover), transform 420ms var(--ease-breath);
}
.lg-practice .sym li:hover {
  background: color-mix(in oklab, var(--terracotta) 6%, transparent);
  border-bottom-color: var(--rule);
  transform: translateX(4px);
}
.lg-practice .sym li .lg-icon { transition: transform 520ms var(--ease-breath); }
.lg-practice .sym li:hover .lg-icon { transform: scale(1.12) rotate(-3deg); }

/* ══ 6 · ICEBERG ═══════════════════════════════════════════ */
.lg-practice .prac-iceberg__frame { position: relative; overflow: hidden; }
.lg-practice .prac-iceberg__frame img { transition: transform 3000ms var(--ease-breath); transform: scale(1.05); }
.lg-practice .prac-iceberg.is-in .prac-iceberg__frame img { transform: scale(1); }
.lg-practice .prac-iceberg__waterline {
  position: absolute; left: 0; right: 0; top: 46%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,242,233,.55), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 1600ms var(--ease-breath) 300ms;
}
.lg-practice .prac-iceberg.is-in .prac-iceberg__waterline { transform: scaleX(1); }

/* ══ 7 · LAYERS ════════════════════════════════════════════ */
.lg-practice .layers { position: relative; }
.lg-practice .layers::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--terracotta);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1800ms var(--ease-breath) 200ms;
}
.lg-practice .layers.is-in::after { transform: scaleX(1); }
.lg-practice .layer {
  position: relative;
  transition: transform 620ms var(--ease-breath), background 420ms var(--ease-breath);
}
.lg-practice .layer::before {
  content: ""; position: absolute; left: 0; right: 1px; top: 0; bottom: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--terracotta) 7%, transparent), transparent 62%);
  opacity: 0; transition: opacity 420ms var(--ease-breath);
}
.lg-practice .layer:hover { transform: translateY(-6px); }
.lg-practice .layer:hover::before { opacity: 1; }
.lg-practice .layer .num { transition: color var(--dur-hover); }
.lg-practice .layer:hover .num { color: var(--terracotta); }
.lg-practice .layer > * { position: relative; }
.lg-practice .layer-example { position: relative; }

/* ══ 8 · TWO READS ═════════════════════════════════════════ */
.lg-practice .read-plate {
  position: relative; overflow: hidden;
  transition: border-color 520ms var(--ease-breath), transform 620ms var(--ease-breath), background 520ms var(--ease-breath);
}
.lg-practice .read-plate:hover {
  border-color: rgba(201,110,83,.45);
  transform: translateY(-4px);
  background: rgba(26,26,26,.45);
}
.lg-practice .read-plate::before, .lg-practice .read-plate::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: var(--terracotta); opacity: 0;
  transition: opacity 480ms var(--ease-breath), inset 480ms var(--ease-breath);
}
.lg-practice .read-plate::before { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
.lg-practice .read-plate::after { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }
.lg-practice .read-plate:hover::before, .lg-practice .read-plate:hover::after { opacity: .9; }
.lg-practice .read-plate__visual img {
  transform: scale(1.04);
  transition: transform 1400ms var(--ease-breath), filter 900ms var(--ease-breath);
}
.lg-practice .read-plate:hover .read-plate__visual img {
  transform: scale(1);
  filter: saturate(1.02) contrast(1.02) brightness(1);
}
.lg-practice .read-way .lg-icon { transition: transform 700ms var(--ease-breath); }
.lg-practice .read-plate:hover .read-way .lg-icon { transform: translateY(-2px) scale(1.06); }

/* ══ 9 · READ / DIRECT / BUILD ═════════════════════════════ */
.lg-practice .rdb-step { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.lg-practice .rdb-step::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--terracotta); transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-breath);
}
.lg-practice .rdb-step:hover::after { transform: scaleX(1); }
.lg-practice .rdb-step h4 { transition: color var(--dur-hover); }
.lg-practice .rdb-step:hover h4 { color: var(--accent-action); }
.lg-practice .rdb-step__lede {
  font-family: var(--font-editorial); font-style: italic;
  color: var(--text-primary) !important; opacity: .85;
  margin-bottom: .6rem !important;
}
.lg-practice .rdb-step .lg-icon { transition: transform 700ms var(--ease-breath); }
.lg-practice .rdb-step:hover .lg-icon { transform: translateY(-2px) scale(1.05); }
.lg-practice .rdb .lg-icon--arrow { align-self: center; margin-top: 2.75rem; transition: transform 700ms var(--ease-breath); }
.lg-practice .rdb:hover .lg-icon--arrow { transform: translateX(4px); }

/* ══ 10 · GO DEEPER ════════════════════════════════════════ */
.lg-practice .deeper a { position: relative; overflow: hidden; }
.lg-practice .deeper a::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--terracotta); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-breath);
}
.lg-practice .deeper a:hover::before { transform: scaleX(1); }
.lg-practice .deeper a .title { transition: transform 620ms var(--ease-breath); }
.lg-practice .deeper a:hover .title { transform: translateX(6px); }
.lg-practice .deeper a .arrow {
  position: absolute; right: 1.25rem; top: 1.75rem;
  font-family: var(--font-system); font-size: 12px; color: var(--terracotta);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 480ms var(--ease-breath), transform 480ms var(--ease-breath);
}
.lg-practice .deeper a:hover .arrow { opacity: 1; transform: translateX(0); }

.lg-practice .btn { position: relative; overflow: hidden; isolation: isolate; }
.lg-practice .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--terracotta);
  transform: translateY(101%); transition: transform 560ms var(--ease-breath);
}
.lg-practice .btn:hover::before, .lg-practice .btn:focus-visible::before { transform: translateY(0); }
.lg-practice [data-surface="ink"] .btn:hover { background: transparent; color: var(--ivory); }
.lg-practice .lnk { position: relative; }

/* ══ 11 · RESPONSIVE PARITY ════════════════════════════════ */
/* Hero: the visual is the page surface at every width — never a side plate. */
@media (max-width: 1100px) {
  .lg-practice .prac-open { padding-top: clamp(3rem, 9vw, 5rem); padding-bottom: clamp(2rem, 6vw, 3.5rem); }
  .lg-practice .prac-open > .shell.prac-open__inner {
    min-height: min(76vh, 720px);
  }
  .lg-practice .prac-open__copy { max-width: min(34rem, 100%); }
  .lg-practice .prac-open__copy::before {
    inset: -10% -26% -8% -20%;
    opacity: 1;
    background:
      radial-gradient(ellipse 120% 90% at 18% 32%,
        rgba(247,242,233,.97) 0%, rgba(247,242,233,.9) 38%,
        rgba(247,242,233,.62) 62%, rgba(247,242,233,.2) 82%, transparent 94%),
      linear-gradient(180deg,
        rgba(247,242,233,.94) 0%, rgba(247,242,233,.74) 52%,
        rgba(247,242,233,.3) 82%, transparent 100%);
  }
  .lg-practice .prac-open__visual {
    position: absolute;
    z-index: 1;
    top: -2%;
    bottom: -6%;
    left: 50%;
    right: auto;
    width: 100vw;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    transform: translateX(-50%);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .lg-practice .prac-open__visual img { object-position: 72% 46%; }
}
@media (max-width: 820px) {
  .lg-practice .prac-open__visual { margin: 0; width: 100vw; }
  .lg-practice .prac-open__visual img { object-position: center 42%; }
}
@media (max-width: 480px) {
  .lg-practice .prac-open__visual { margin: 0; }
}

@media (max-width: 1080px) {
  .lg-practice .nav .ed-nav-mobile { display: inline-flex; }
  .lg-practice .nav-links { display: none; }
}
@media (max-width: 900px) {
  .lg-practice .prac-split { grid-template-columns: 1fr; }
  .lg-practice .layers { grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--rule); }
  .lg-practice .layer { border-bottom: 1px solid var(--rule); padding-bottom: 1.25rem; }
  .lg-practice .reads-grid { grid-template-columns: 1fr; }
  .lg-practice .rdb { grid-template-columns: 1fr; gap: 2rem; }
  .lg-practice .rdb .lg-icon--arrow { display: none; }
  .lg-practice .deeper { grid-template-columns: 1fr; }
  .lg-practice .deeper a:nth-child(odd) { border-right: 0; padding-right: 0; }
  .lg-practice .deeper a:nth-child(even) { padding-left: 0; }
}

/* ══ 7b · DEPTH DIVE (interactive layers) ══════════════════ */
.lg-practice .dive {
  --dive-fill: 0%;
  margin-top: 2.75rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}
.lg-practice .dive__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.lg-practice .dive__note { color: var(--accent-action); transition: color var(--dur-hover); }
.lg-practice .dive__count { color: var(--text-muted); }
.lg-practice .dive[data-complete] .dive__count { color: var(--accent-action); }

/* — rail — */
.lg-practice .dive__rail {
  position: relative; display: grid; gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 1.25rem; padding-top: 20px;
}
.lg-practice .dive__track, .lg-practice .dive__progress {
  position: absolute; top: 5px; left: 0; height: 1px;
}
.lg-practice .dive__track { right: 0; background: var(--rule); }
.lg-practice .dive__progress {
  width: calc(var(--dive-progress, var(--dive-fill)) * 0.8 + 10%);
  background: var(--terracotta);
  transition: width 900ms var(--ease-breath);
}
.lg-practice .dive__marker {
  position: relative; z-index: 1;
  display: grid; gap: 6px; justify-items: start; text-align: left;
  background: none; border: 0; padding: 0 12px 14px 0; margin: 0;
  cursor: pointer; color: inherit; font: inherit;
  border-right: 1px solid transparent;
}
.lg-practice .dive__dot {
  position: absolute; top: -20px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper, var(--ivory)); border: 1px solid var(--rule);
  transition: transform 520ms var(--ease-breath), background var(--dur-hover), border-color var(--dur-hover);
}
.lg-practice .dive__marker[data-state="seen"] .dive__dot { background: color-mix(in oklab, var(--terracotta) 45%, transparent); border-color: transparent; }
.lg-practice .dive__marker[data-state="active"] .dive__dot { background: var(--terracotta); border-color: transparent; transform: scale(1.5); }
.lg-practice .dive__n {
  font-family: var(--font-system); font-size: 11px; letter-spacing: .1em; color: var(--text-muted);
  transition: color var(--dur-hover);
}
.lg-practice .dive__name {
  font-family: var(--font-editorial); font-size: .95rem; line-height: 1.2; letter-spacing: -.015em;
  color: var(--text-muted); max-width: 14ch;
  transition: color var(--dur-hover), transform 520ms var(--ease-breath);
}
.lg-practice .dive__marker[data-state="seen"] .dive__name { color: var(--text-secondary); }
.lg-practice .dive__marker[data-state="active"] .dive__n { color: var(--terracotta); }
.lg-practice .dive__marker[data-state="active"] .dive__name { color: var(--text-primary); transform: translateY(-1px); }
.lg-practice .dive__marker:focus-visible { outline: 1px solid var(--terracotta); outline-offset: 4px; }

/* — stage — */
.lg-practice .dive__stage {
  position: relative; overflow: hidden;
  margin-top: .5rem;
  min-height: clamp(300px, 30vw, 360px);
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--ink) 3%, transparent);
}
.lg-practice .dive__water {
  position: absolute; inset: 0 0 auto 0; height: var(--dive-fill);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--teal, #2F5D5A) 28%, var(--ink)) 0%,
      var(--ink) 78%);
  transition: height 1100ms var(--ease-breath);
}
.lg-practice .dive__surface {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ivory) 70%, transparent), transparent);
  opacity: .8;
  animation: dive-surface 5s ease-in-out infinite;
}
@keyframes dive-surface { 0%,100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(2px) scaleX(.94); } }

.lg-practice .dive__bubbles { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease-breath); }
.lg-practice .dive[data-submerged] .dive__bubbles { opacity: .5; }
.lg-practice .dive__bubbles i {
  position: absolute; bottom: -14px; width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--ivory) 55%, transparent);
  left: calc(8% + var(--b) * 17%);
  animation: dive-bubble 9s linear infinite;
  animation-delay: calc(var(--b) * -1.6s);
}
.lg-practice .dive__bubbles i:nth-child(even) { width: 3px; height: 3px; }
@keyframes dive-bubble {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translateY(-320px) translateX(14px); opacity: 0; }
}

.lg-practice .dive__card {
  position: absolute; left: clamp(1.25rem, 3vw, 2.25rem); right: clamp(1.25rem, 3vw, 2.25rem);
  bottom: clamp(3.25rem, 6vw, 4rem);
  max-width: 34ch;
  animation: dive-card 700ms var(--ease-breath) both;
}
@keyframes dive-card { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lg-practice .dive__cardnum {
  font-family: var(--font-system); font-size: 11px; letter-spacing: .1em;
  color: var(--terracotta); display: block; margin-bottom: 14px;
}
.lg-practice .dive__card .lg-icon {
  width: 34px; height: 34px; display: block; margin-bottom: 16px;
  color: var(--ink); --lg-icon-accent: var(--terracotta); --lg-icon-surface: var(--ivory);
  transition: color 700ms var(--ease-breath);
}
.lg-practice .dive__card h4 {
  font-family: var(--font-editorial); font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.02em; line-height: 1.15;
  margin: 0 0 10px; color: var(--text-primary);
  transition: color 700ms var(--ease-breath);
}
.lg-practice .dive__card p {
  margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text-secondary);
  transition: color 700ms var(--ease-breath);
}
.lg-practice .dive[data-submerged] .dive__card h4 { color: var(--ivory); }
.lg-practice .dive[data-submerged] .dive__card p { color: color-mix(in oklab, var(--ivory) 74%, transparent); }
.lg-practice .dive[data-submerged] .dive__card .lg-icon { color: var(--ivory); --lg-icon-surface: var(--ink); }

.lg-practice .dive__hint {
  margin: .85rem 0 0;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); transition: color 700ms var(--ease-breath);
}
.lg-practice .dive__hint span { color: var(--accent-action); }

/* — full water column (completed state) — */
.lg-practice .dive__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.lg-practice .dive__all {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-action);
  border-bottom: 1px solid color-mix(in oklab, var(--terracotta) 40%, transparent);
  transition: color var(--dur-hover), border-color var(--dur-hover);
}
.lg-practice .dive__all:hover { border-bottom-color: var(--terracotta); }
.lg-practice .dive__all:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

.lg-practice .dive[data-full] .dive__stage { min-height: 0; }
.lg-practice .dive__column {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
  animation: dive-card 700ms var(--ease-breath) both;
}
.lg-practice .dive__colitem {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: start; gap: 0 1rem;
  padding-bottom: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid color-mix(in oklab, var(--ivory) 14%, transparent);
}
.lg-practice .dive__colitem:last-child { border-bottom: 0; padding-bottom: 0; }
.lg-practice .dive__colitem .dive__cardnum { margin: 4px 0 0; }
.lg-practice .dive__colitem h4 {
  font-family: var(--font-editorial); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.02em; line-height: 1.2;
  margin: 0 0 6px; color: var(--ivory);
}
.lg-practice .dive__colitem p {
  margin: 0; font-size: .92rem; line-height: 1.6;
  color: color-mix(in oklab, var(--ivory) 74%, transparent); max-width: 62ch;
}
@media (max-width: 620px) {
  .lg-practice .dive__colitem { grid-template-columns: 1fr; gap: 6px; }
}

/* a11y: screen-reader narration + visible focus on either surface */
.lg-practice .dive-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lg-practice .dive__marker:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 5px;
  border-radius: 2px;
}
.lg-practice .dive__marker:focus-visible .dive__dot { transform: scale(1.6); background: var(--terracotta); border-color: transparent; }
.lg-practice .dive__card:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 10px;
}
.lg-practice .dive[data-submerged] .dive__card:focus-visible {
  outline-color: color-mix(in oklab, var(--ivory) 80%, transparent);
}

@media (max-width: 820px) {
  .lg-practice .dive__rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg-practice .dive__name { display: none; }
  .lg-practice .dive__stage { min-height: 340px; }
  .lg-practice .dive__card { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-practice .dive__water, .lg-practice .dive__card, .lg-practice .dive__surface, .lg-practice .dive__bubbles i { transition-duration: 1ms; animation: none; }
}

/* light shafts falling through the water */
.lg-practice .dive__water::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(104deg, transparent 18%, color-mix(in oklab, var(--ivory) 6%, transparent) 24%, transparent 30%),
    linear-gradient(96deg, transparent 52%, color-mix(in oklab, var(--ivory) 4%, transparent) 58%, transparent 64%),
    linear-gradient(110deg, transparent 74%, color-mix(in oklab, var(--ivory) 5%, transparent) 79%, transparent 85%);
  opacity: .9;
  animation: dive-shafts 12s ease-in-out infinite alternate;
}
@keyframes dive-shafts { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
@media (prefers-reduced-motion: reduce) { .lg-practice .dive__water::after { animation: none; } }

/* ── Editorial density: two-column section scaffolds ───────────── */
.lg-practice section { padding: var(--sp-6) 0; }

.lg-practice .sec-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: start;
}
.lg-practice .sec-grid--sticky .sec-grid__head { position: sticky; top: 118px; }
.lg-practice .sec-grid__body { display: grid; gap: 1.1rem; min-width: 0; }
.lg-practice .sec-grid__body > p { max-width: 48ch; }

.lg-practice .sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.lg-practice .sec-head__aside { padding-bottom: .35rem; }

/* stacked, ruled steps when Read / Direct / Build sits in a column */
.lg-practice .sec-grid__body .rdb {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--rule);
}
.lg-practice .sec-grid__body .rdb .lg-icon--arrow { display: none; }
.lg-practice .sec-grid__body .rdb-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--dur-hover);
}
.lg-practice .sec-grid__body .rdb-step:hover { padding-left: 8px; }
.lg-practice .sec-grid__body .rdb-step .lg-icon { width: 32px; height: 32px; margin: 2px 0 0; grid-row: span 2; }
.lg-practice .sec-grid__body .rdb-step h4 { margin: 0 0 4px; }
.lg-practice .sec-grid__body .rdb-step p { max-width: 48ch; }

/* after the descent: example + closing cadence side by side */
.lg-practice .dive-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.lg-practice .dive-after .layer-example { margin-top: 0; padding-top: 0; border-top: 0; max-width: none; }

.lg-practice .beneath-list { columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); }
.lg-practice .beneath-list li { break-inside: avoid; }

@media (max-width: 980px) {
  .lg-practice .sec-grid, .lg-practice .sec-head, .lg-practice .dive-after { grid-template-columns: 1fr; gap: 1.35rem; }
  .lg-practice .sec-grid--sticky .sec-grid__head { position: static; }
  .lg-practice .beneath-list { columns: 1; }
}

/* --- Editorial pass: prose caption under the iceberg --- */
.lg-practice .iceberg-prose {
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  max-width: 62ch;
  text-align: left;
}
.lg-practice .iceberg-prose .thesis { max-width: 34ch; }
@media (min-width: 900px) {
  .lg-practice .iceberg-prose {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    max-width: none;
  }
  .lg-practice .iceberg-prose .thesis { margin-top: 0 !important; }
}

/* ══ EDITORIAL PASS · fewer stops, more air ═════════════════════ */
/* 1 · Quieter section labels — present, not announcing */
.lg-practice .lbl {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  opacity: 0.5;
  transition: opacity 600ms var(--ease-breath);
}
.lg-practice section:hover .lbl { opacity: 0.72; }
.lg-practice .lbl .n { opacity: 0.85; }

/* 2 · Pull lines: the page's moments of pause */
.lg-practice .pull {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  max-width: 26ch;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0;
  position: relative;
  padding-left: clamp(18px, 2.5vw, 32px);
}
.lg-practice .pull::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  bottom: 0.28em;
  width: 1px;
  background: var(--terracotta);
  opacity: 0.75;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1100ms var(--ease-breath) 120ms;
}
.lg-practice .pull.is-in::before { transform: scaleY(1); }
.lg-practice .pull--ink, .lg-practice [data-surface="ink"] .pull { color: var(--ivory); }

/* 3 · Long reading runs: one heading, one column of prose */
.lg-practice .essay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  max-width: 74ch;
  margin-inline: auto;
}
.lg-practice .essay__head {
  max-width: 16ch;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}
.lg-practice .essay__body { display: grid; gap: clamp(1.15rem, 2vw, 1.5rem); }
.lg-practice .essay__body > p.body-m { max-width: 66ch; }
.lg-practice .essay__body .pull { margin-block: clamp(2rem, 5vw, 3.5rem); }

/* 4 · The iceberg as an editorial plate: presence, not instruction */
.lg-practice .prac-iceberg--plate {
  --depth: 0;
  margin-top: clamp(3rem, 8vw, 6.5rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.lg-practice .prac-iceberg--plate .prac-iceberg__frame {
  border-radius: 2px;
}
.lg-practice .prac-iceberg--plate .prac-iceberg__frame picture { display: block; }
.lg-practice .prac-iceberg--plate .prac-iceberg__frame img {
  max-height: min(78vh, 760px);
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.14) translate3d(0, calc((var(--depth) - 0.5) * -9%), 0);
  transition: none;
  will-change: transform;
}
.lg-practice .prac-iceberg--plate .prac-iceberg__deep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 38%,
    color-mix(in oklab, var(--ink) 22%, transparent) 74%,
    color-mix(in oklab, var(--ink) 44%, transparent) 100%
  );
  opacity: calc(0.2 + var(--depth) * 0.6);
}
/* the photograph already has a horizon; a drawn one only competes */
.lg-practice .prac-iceberg--plate .prac-iceberg__waterline { display: none; }

/* Annotations: an observer's marginalia, not a diagram key */
.lg-practice .ib-note {
  position: absolute;
  left: clamp(16px, 4vw, 46px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  pointer-events: none;
  color: color-mix(in oklab, var(--ivory) 92%, transparent);
  z-index: 2;
}
.lg-practice .ib-note__text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(0.8rem, 1.35vw, 1.0625rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 14px color-mix(in oklab, var(--ink) 55%, transparent);
}
/* the plate already carries faint leader rules; ours would only double them */
.lg-practice .ib-note__line { display: none; }
.lg-practice .ib-note--above { top: 21%; opacity: 0; transition: opacity 900ms var(--ease-breath) 250ms; }
.lg-practice .ib-note--below { top: 60%; opacity: 0; transition: opacity 900ms var(--ease-breath) 600ms; }
@media (min-width: 1101px) {
  /* sit at the head of the leader rules baked into the plate */
.lg-practice .ib-note { left: auto; right: 60%; justify-content: flex-end; }
  /* above the water the plate is pale — dark ink, set to the open right side */
.lg-practice .ib-note--above {
    top: 21%;
    right: auto;
    left: 68%;
    color: color-mix(in oklab, var(--ink) 82%, transparent);
  }
  .lg-practice .ib-note--above .ib-note__text { text-shadow: none; }
  .lg-practice .ib-note--below { top: 59.5%; }
}
.lg-practice .prac-iceberg.is-in .ib-note { opacity: 1; }
.lg-practice .prac-iceberg--plate .ib-note--above { transform: translate3d(0, calc(var(--depth) * -10px), 0); }
.lg-practice .prac-iceberg--plate .ib-note--below { transform: translate3d(0, calc(var(--depth) * 14px), 0); }
@media (max-width: 640px) {
  .lg-practice .ib-note--above { top: 24%; }
  .lg-practice .ib-note--below { top: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-practice .prac-iceberg--plate .prac-iceberg__frame img { transform: scale(1); }
  .lg-practice .prac-iceberg--plate .prac-iceberg__deep { opacity: 0.45; }
  .lg-practice .prac-iceberg--plate .ib-note { transform: none; }
}

/* 5 · Wider gutters between ideas */
.lg-practice section { padding: clamp(72px, 11vw, 132px) 0; }
.lg-practice .iceberg-prose { margin-top: clamp(2.5rem, 6vw, 4rem); }
.lg-practice .iceberg-prose .pull { margin-block: 0; max-width: 22ch; }
@media (max-width: 899px) {
  .lg-practice .iceberg-prose .pull { margin-top: clamp(2rem, 6vw, 3rem); }
}

.lg-practice .rdb-step p { max-width: 34ch; }