/* The scroll story is independent of the original scaled Figma artboards. */
.case-segment { position:relative; width:100%; height:calc(var(--segment-height) * var(--scale)); overflow:hidden; }
.case-segment > .canvas { height:var(--segment-height); }
.case-segment .case-artboard { height:var(--segment-height) !important; }
.structure-story { --accent:#ff2788; position:relative; height:280svh; min-height:1500px; background:#fff; color:#202124; }
.structure-stage { position:sticky; top:0; height:100svh; min-height:580px; max-height:1000px; overflow:hidden; isolation:isolate; }
.structure-heading { position:absolute; z-index:5; top:clamp(26px,5vh,58px); left:0; right:0; text-align:center; pointer-events:none; }
.structure-heading h2 { color:var(--accent); font-size:32px; font-weight:600; line-height:1.2; margin:0 0 12px; }
.structure-heading p { color:#72757a; font-size:14px; margin:0; line-height:1.5; }
.structure-visual { position:absolute; width:min(56vw,700px); height:calc(100% - 190px); top:135px; left:50%; transform:translateX(-50%); }
.structure-layer { position:absolute; left:50%; top:50%; width:var(--part-width,100%); transform:translate3d(-50%,calc(-50% + var(--part-y,0px)),0) scale(var(--part-scale,1)); opacity:1; will-change:transform,opacity; }
.structure-layer img { width:100%; height:auto; display:block; pointer-events:none; user-select:none; }
.structure-story[data-focus="true"][data-active="0"] .structure-layer:not([data-layer="0"]),
.structure-story[data-focus="true"][data-active="1"] .structure-layer:not([data-layer="1"]),
.structure-story[data-focus="true"][data-active="2"] .structure-layer:not([data-layer="2"]),
.structure-story[data-focus="true"][data-active="3"] .structure-layer:not([data-layer="3"]),
.structure-story[data-focus="true"][data-active="4"] .structure-layer:not([data-layer="4"]),
.structure-story[data-focus="true"][data-active="5"] .structure-layer:not([data-layer="5"]) { opacity:.65; }
.structure-layer { transition:opacity .45s ease; }
.structure-loading { display:none; position:absolute; left:0; right:0; top:45%; margin:0; padding:16px; text-align:center; color:#72757a; font-size:12px; line-height:1.5; }
.structure-story[data-assets="loading"] .structure-layer,
.structure-story[data-assets="error"] .structure-layer { visibility:hidden; }
.structure-story[data-assets="loading"] .structure-loading,
.structure-story[data-assets="error"] .structure-loading { display:block; }
.structure-story[data-overview="true"] .structure-layer { opacity:1; }
.structure-detail { position:absolute; left:clamp(26px,5vw,88px); top:45%; transform:translateY(-30%); width:clamp(190px,19vw,270px); z-index:5; }
.structure-step { margin:0 0 15px; color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.structure-detail h3 { font-size:clamp(23px,2.3vw,34px); font-weight:600; letter-spacing:-.035em; line-height:1.12; margin:0 0 18px; }
.structure-detail h3 { white-space:pre-line; }
.structure-description { font-size:14px; line-height:1.65; color:#60646b; margin:0 0 24px; }
.structure-material { border-top:1px solid #e4e4e7; padding-top:14px; }
.structure-material dt { font-size:10px; color:#8a8c91; letter-spacing:.13em; text-transform:uppercase; margin-bottom:8px; }
.structure-material dd { margin:0; font-size:13px; line-height:1.5; color:#4b4e53; }
.structure-nav { position:absolute; right:clamp(24px,4vw,70px); top:45%; transform:translateY(-30%); width:170px; z-index:5; display:flex; flex-direction:column; gap:4px; }
.structure-nav button { min-height:44px; padding:10px 0; border:0; background:transparent; color:#7d8188; font:500 12px/1.3 Inter,Arial,sans-serif; text-align:left; cursor:pointer; display:flex; gap:14px; align-items:center; transition:color .2s; }
.structure-nav button span:first-child { color:#b7b9be; width:21px; font-size:10px; font-variant-numeric:tabular-nums; }
.structure-nav button[aria-pressed="true"], .structure-nav button[aria-pressed="true"] span:first-child { color:var(--accent); }
.structure-nav button:hover { color:#202124; }
.structure-stage button:focus-visible,.structure-stage a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:3px; }
.structure-footer { position:absolute; left:clamp(26px,5vw,88px); right:clamp(26px,5vw,88px); bottom:25px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.structure-caption { font-size:10px; line-height:1.5; color:#92959b; max-width:230px; margin:0; }
.structure-controls { display:flex; align-items:center; gap:18px; }
.structure-controls button,.structure-controls a { font:500 11px/1.5 Inter,Arial,sans-serif; color:#676b72; border:0; background:transparent; padding:9px 0; cursor:pointer; }
.structure-controls button:hover,.structure-controls a:hover { color:var(--accent); }
.structure-progress { height:2px; background:#eeeef0; position:absolute; bottom:0; left:0; right:0; overflow:hidden; }
.structure-progress span { display:block; height:100%; background:var(--accent); transform:scaleX(var(--progress,0)); transform-origin:left; }
.structure-announce { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.structure-static-note { display:none; }
@media (min-width:1600px) { .structure-detail { left:calc(50% - 660px); } .structure-nav { right:calc(50% - 660px); } }
@media (max-width:900px) {
  .structure-stage { min-height:650px; }
  .structure-heading { top:28px; }
  .structure-heading h2 { font-size:27px; margin-bottom:8px; }
  .structure-heading p { font-size:12px; }
  .structure-visual { width:min(80vw,550px); height:calc(100% - 460px); top:110px; }
  .structure-detail { top:auto; bottom:64px; left:7%; right:7%; transform:none; width:auto; height:184px; }
  .structure-step { font-size:10px; margin-bottom:7px; }
  .structure-detail h3 { font-size:23px; margin-bottom:8px; }
  .structure-description { font-size:12px; line-height:1.5; margin:0; max-width:100%; }
  .structure-material { position:absolute; width:100%; left:0; bottom:0; padding-top:9px; margin:0; }
  .structure-material dt { font-size:9px; margin-bottom:5px; }
  .structure-material dd { font-size:11px; }
  .structure-nav { top:auto; bottom:268px; left:7%; right:7%; width:auto; transform:none; flex-direction:row; justify-content:space-between; gap:0; }
  .structure-nav button { flex-direction:column; min-width:38px; gap:5px; padding:5px 0; font-size:9px; }
  .structure-nav button span:first-child { text-align:center; }
  .structure-nav button span:last-child { max-width:70px; text-align:center; }
  .structure-footer { left:7%; right:7%; bottom:14px; }
  .structure-caption { max-width:160px; font-size:9px; }
  .structure-controls { gap:12px; }
  .structure-controls button,.structure-controls a { font-size:10px; min-height:44px; display:inline-flex; align-items:center; }
}
/* Short, mid-width windows need more of the stage for the exploded assembly. */
@media (min-width:600px) and (max-width:900px) and (max-height:800px) {
  .structure-visual { height:calc(100% - 376px); }
  .structure-nav { bottom:184px; }
  .structure-detail { height:100px; }
  .structure-detail h3 { white-space:normal; }
  .structure-step,.structure-detail h3,.structure-description { max-width:58%; }
  .structure-material { left:auto; right:0; top:0; bottom:auto; width:36%; }
}
@media (prefers-reduced-motion:reduce) {
  .structure-story { height:auto; min-height:0; }
  .structure-stage { position:relative; height:max(720px,100svh); }
  .structure-layer { transition:none; will-change:auto; }
  .structure-heading p { display:none; }
  .structure-heading .structure-static-note { display:block; }
  .structure-progress { display:none; }
  .structure-controls [data-replay] { display:none; }
}
@media print {
  .structure-story { height:900px; min-height:0; break-inside:avoid; }
  .structure-stage { position:relative; height:900px; }
  .structure-nav,.structure-controls,.structure-progress { display:none; }
  .structure-layer { opacity:1!important; }
}