/* One continuous source image; desktop pans, static layouts show chapter crops. */
.practice-story{margin-top:74px;border-top:1px solid var(--line)}
.practice-story-sticky{padding-top:34px}
.practice-story-heading{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-bottom:32px}
.practice-story-heading h3{font-size:clamp(38px,3.5vw,56px);line-height:1.02}
.practice-scene{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(30px,4vw,70px);align-items:start;padding:30px 0 48px}
.practice-scene+.practice-scene{border-top:1px solid var(--line)}
.practice-story:not(.is-scroll-story) .practice-scene{opacity:1!important;visibility:visible!important;transform:none!important}
.practice-art{margin:0;min-width:0;position:relative}
/* Hero-like framing; keep approved artwork colors unblended. */
.practice-art-mat{position:relative;z-index:1;isolation:isolate;width:100%;display:flex;flex-direction:column;background:#eae7e0;border:1px solid #d7d3c980;border-radius:2px;box-shadow:0 12px 30px #39352608;overflow:hidden}
.practice-art-mat::after{content:"";display:block;flex:0 0 22px;background:#eae7e0}
.practice-art svg{display:block;width:100%;height:auto;aspect-ratio:3/2;flex:none;overflow:hidden;background:#f4f1e9}
.practice-copy{padding-right:8px}
.practice-chapter{font-size:10px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;display:flex;gap:14px;align-items:center;margin-bottom:22px;color:var(--ink)}
.practice-chapter>span{white-space:nowrap;color:var(--stone)}
.practice-copy h4{font-size:clamp(32px,3.05vw,48px);line-height:1.09;letter-spacing:-.045em;margin-bottom:22px}
.practice-description{font-size:15px;line-height:1.8;max-width:420px}
.practice-outcome{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink);margin-top:24px}
.practice-outcome>span{height:24px;width:12px;flex:none;background:url("assets/principal-b1-bracket.svg?v=principal-2") center / contain no-repeat}
.practice-tools{border-top:1px solid var(--line);padding-top:16px;margin-top:25px}
.practice-tools>span{font-size:8px;letter-spacing:.12em;color:var(--stone)}
.practice-tools p{font-size:clamp(17px,1.3vw,21px);font-weight:500;color:var(--ink);margin-top:10px;line-height:1.65}
.practice-tools mark{background:var(--neon);color:var(--ink);padding:.08em .22em;white-space:nowrap;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.practice-chapters{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line)}
.practice-chapters::before{content:"";position:absolute;top:-2px;left:0;width:calc(100% / 6);height:3px;background:var(--neon);transform:translate3d(calc(var(--chapter-position,0) * 100%),0,0);will-change:transform}
.practice-chapters button{position:relative;background:transparent;text-align:left;font-size:11px;line-height:1.4;padding:17px 10px 16px 0;display:flex;gap:10px;color:var(--stone)}
.practice-chapters button>span{font-size:10px;color:var(--stone)}
.practice-chapters button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.practice-chapters button:hover{color:var(--ink)}
#practice-story-end{scroll-margin-top:125px}
/* JS enhancement only: no-JS, motion-off and small screens retain all chapters. */
.practice-story.is-scroll-story{height:510svh}
.is-scroll-story .practice-story-sticky{position:sticky;top:100px;height:calc(100svh - 120px);max-height:960px;display:flex;flex-direction:column;padding-top:24px}
.is-scroll-story .practice-story-heading{flex:none;margin-bottom:16px}
.is-scroll-story .practice-scenes{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(30px,4vw,70px);overflow:visible}
.is-scroll-story .practice-visual-viewport{grid-area:1/1;min-width:0;min-height:0;display:flex;align-items:center;padding-block:16px}
/* Keep the enlarged picture anchored to the shared navbar's left edge.
   Retain the responsive width increase without a negative gutter offset. */
.practice-panorama-screen{--panorama-base-width:min(100%,calc((100svh - 350px) * 3 / 2));--panorama-growth:min(calc(var(--panorama-base-width) * .1),max(0px,calc((100vw - 1472px) / 2 - 24px)));position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;width:calc(var(--panorama-base-width) + var(--panorama-growth));margin-left:0;margin-right:auto;aspect-ratio:3/2;background:#eae7e0;border:1px solid #d7d3c980;box-shadow:0 12px 30px #39352608}
.practice-panorama-image{position:absolute;left:0;top:0;width:calc(100% * 11776 / 1536);max-width:none;height:auto;will-change:transform;user-select:none}
.is-scroll-story .practice-scene{grid-area:1/2;min-width:0;display:flex;align-items:center;opacity:0;pointer-events:none;border:0;padding:16px 0;will-change:transform,opacity}
.is-scroll-story .practice-scene.is-current{pointer-events:auto}
.is-scroll-story .practice-art{display:none}
.is-scroll-story .practice-chapters{flex:none}
/* One readable copy column, anchored to the shared navigation frame. */
@media(min-width:901px){
  .practice-copy{width:min(100%,520px);min-width:0;margin-left:auto;padding-right:0}
  .practice-copy .practice-description{max-width:none}
}
@media(min-width:901px) and (max-height:860px){
  .is-scroll-story .practice-story-heading h3{font-size:38px}
  .is-scroll-story .practice-copy h4{font-size:34px;margin-bottom:14px}
  .is-scroll-story .practice-chapter{margin-bottom:12px}
  .is-scroll-story .practice-description{font-size:13px;line-height:1.65}
  .is-scroll-story .practice-outcome{margin-top:15px}
  .is-scroll-story .practice-tools{margin-top:15px;padding-top:10px}
}
@media(max-width:900px){
  .practice-story{margin-top:46px}
  .practice-story-heading{align-items:flex-start;gap:25px}
  .practice-scene{gap:25px;padding-block:35px}
  .practice-copy h4{font-size:32px}
  .practice-description{font-size:13px}
}
@media(max-width:600px){
  .practice-story-heading{display:block;margin-bottom:14px}
  .practice-story-heading h3{font-size:42px}
  .practice-scene{grid-template-columns:1fr;gap:20px;padding:26px 0 38px}
  .practice-art{max-width:480px;width:100%;margin-inline:auto}
  .practice-copy{padding-inline:4px}
  .practice-chapter{font-size:9px;margin-bottom:15px}
  .practice-copy h4{font-size:36px;margin-bottom:18px}
  .practice-description{font-size:14px;line-height:1.75}
  .practice-outcome{margin-top:20px}
}