/* Isolated progressive enhancement. The unenhanced document is the reading view. */
.handbook-story {
  background:var(--paper-deep);
  border-bottom:1px solid var(--line);
  --story-top:88px;
}
.story-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 24px;
  padding-block:20px;
  border-block:1px solid var(--line);
}
.story-toolbar .eyebrow { margin:0; }
/* Keep both accessibility controls available on focus without occupying the story header. */
.story-tools {
  position:fixed;
  top:calc(var(--story-top) + 12px);
  right:24px;
  z-index:9;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 22px;
  width:max-content;
  max-width:calc(100% - 48px);
  padding:12px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
}
.story-tools:not(:focus-within) {
  width:1px;
  height:1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.story-skip,.story-toggle {
  font:inherit;
  font-size:.8125rem;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--body);
}
.story-toggle {
  background:none;
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 12px;
  cursor:pointer;
}
.story-toggle[hidden] { display:none; }
.story-toggle[aria-pressed="true"] { border-color:var(--gold); color:var(--ink); }
.story-toggle:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.story-visual { display:none; }
.story-step {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,7vw,100px);
  align-items:center;
  padding-block:64px;
  min-width:0;
}
.story-step + .story-step { border-top:1px solid var(--line); }
.story-copy { min-width:0; }
.story-label {
  color:var(--gold);
  font-size:.75rem;
  letter-spacing:.055em;
  margin:0 0 20px;
}
.story-copy h3 {
  font-size:clamp(2rem,3.7vw,3.125rem);
  line-height:1.14;
  max-width:17ch;
}
.story-copy > p:not(.story-label),.story-copy blockquote {
  font-size:1rem;
  line-height:1.65;
  max-width:42ch;
  margin:24px 0 0;
}
.story-copy blockquote { border:0; padding:0; color:var(--body); }
.story-figure {
  width:min(100%,420px);
  aspect-ratio:1200 / 1697;
  justify-self:center;
  box-shadow:0 20px 48px #00000038;
}
.story-figure img { width:100%; height:100%; object-fit:contain; }
.story-figure-cover { aspect-ratio:1024 / 1535; }
.story-outro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-block:36px 56px;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--story-top) + 24px);
}
.story-outro p { font-size:1rem; }
.story-outro:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }

/* No page-level scroll behavior, snapping or scroll interception. */
@media (prefers-reduced-motion:no-preference) {
  .handbook-story.is-enhanced .story-track { height:calc(var(--story-height) + var(--story-travel)); }
  .handbook-story.is-enhanced .story-stage {
    position:sticky;
    top:var(--story-top);
    height:var(--story-height);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:clamp(32px,7vw,100px);
    padding-block:var(--story-padding,36px);
  }
  .handbook-story.is-enhanced .story-steps { grid-column:1; grid-row:1; display:grid; }
  .handbook-story.is-enhanced .story-step { grid-area:1 / 1; display:block; padding:0; border:0; pointer-events:none; }
  .handbook-story.is-enhanced .story-step .story-figure { display:none; }
  .handbook-story.is-enhanced .story-copy { opacity:0; will-change:opacity,transform; }
  .handbook-story.is-enhanced .story-step:first-child .story-copy { opacity:1; }
  .handbook-story.is-enhanced .story-visual {
    display:grid;
    grid-column:2;
    grid-row:1;
    justify-items:center;
    align-items:center;
    perspective:1200px;
  }
  .story-art {
    grid-area:1 / 1;
    width:min(100%,calc(var(--story-art-height) * 1200 / 1697));
    aspect-ratio:1200 / 1697;
    transform-origin:20% 50%;
    will-change:opacity,transform;
    opacity:0;
  }
  .story-art:first-child {
    z-index:2;
    opacity:1;
    width:min(100%,calc(var(--story-art-height) * 1024 / 1535));
    aspect-ratio:1024 / 1535;
  }
  .story-art > .story-figure { width:100%; height:100%; }
}
@media(max-width:799px) {
  .story-toolbar { gap:8px; }
  .story-toolbar .eyebrow { width:100%; font-size:.625rem; }
  .story-tools { justify-content:space-between; gap:10px; }
  .story-step { grid-template-columns:minmax(0,1fr); gap:28px; padding-block:40px; }
  .story-copy h3 { font-size:clamp(1.625rem,6.5vw,2.125rem); max-width:22ch; }
  .story-label { font-size:.6875rem; margin-bottom:12px; }
  .story-copy > p:not(.story-label),.story-copy blockquote { margin-top:16px; font-size:.9375rem; line-height:1.55; }
  .story-figure { width:min(100%,320px); }
  .story-outro { align-items:flex-start; flex-direction:column; padding-block:28px 40px; }
}
@media(max-width:799px) and (prefers-reduced-motion:no-preference) {
  .handbook-story.is-enhanced .story-stage {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--story-art-height) var(--story-copy-height);
    align-content:center;
    gap:24px;
    padding-block:var(--story-padding,24px);
  }
  .handbook-story.is-enhanced .story-visual { grid-column:1; grid-row:1; perspective:none; }
  .handbook-story.is-enhanced .story-steps { grid-column:1; grid-row:2; align-self:start; }
}
/* Phone-only text fitting; keep tablet/desktop geometry and scroll timing intact. */
@media(max-width:599px) {
  .story-stage {
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  .story-steps { min-width:0; }
  .story-copy {
    width:100%;
    max-width:100%;
    padding-inline:2px;
  }
  .story-copy h3 {
    font-size:clamp(1.5rem,6vw,1.875rem);
    line-height:1.2;
    max-width:100%;
    overflow-wrap:anywhere;
  }

}
@media(prefers-reduced-motion:reduce) {
  .handbook-story .story-copy { opacity:1!important; transform:none!important; }
  .story-toggle { display:none; }
}
@media print {
  .handbook-story .story-track { height:auto!important; }
  .handbook-story .story-stage { display:block!important; position:static!important; height:auto!important; }
  .handbook-story .story-steps { display:block!important; }
  .handbook-story .story-step { display:grid!important; padding-block:24px!important; break-inside:avoid; }
  .handbook-story .story-step .story-figure { display:block!important; max-width:220px; }
  .handbook-story .story-visual,.story-tools { display:none!important; }
  .handbook-story .story-copy { opacity:1!important; transform:none!important; }
}