/* =========================================================
   The sous chef scroll story (with story.js), in company.html's "How we work".
   Self-contained: remove the story.css / story.js lines (or add ?story=off) and the section
   goes back to the static diagram. story.js adds html.story-on only once the story is built.
   ========================================================= */
.story-on #how .kitchen{ display:none; }

.story{ position:relative; height:calc(100vh - 70px); min-height:520px; display:grid; grid-template-rows:minmax(0, 1fr) auto; gap:10px; padding-block:8px 18px; }
.story-stage{ position:relative; min-height:0; }
/* fill the stage exactly and let the drawing fit inside it (never taller than the space above the caption) */
.story-stage svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.story svg text{ font-family:'IBM Plex Mono', ui-monospace, monospace; letter-spacing:0.16em; text-transform:uppercase; fill:#63727C; }
.story svg .st-title{ font-family:'Chakra Petch', sans-serif; letter-spacing:0.02em; text-transform:none; fill:#F2F5F7; font-weight:600; }

.story-cap{ position:relative; min-height:112px; max-width:640px; margin-inline:auto; width:100%; text-align:center; }
.story-cap .cap{ position:absolute; inset:0; display:grid; gap:6px; align-content:start; justify-items:center; opacity:0; }
.story-cap .n{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.2em; color:#D9A94E; }
.story-cap h3{ font-family:'Chakra Petch', sans-serif; font-size:clamp(1.25rem, 2.6vw, 1.7rem); font-weight:600; margin:0; }
.story-cap p{ margin:0; color:#9AA9B4; font-size:clamp(0.92rem, 1.6vw, 1.02rem); max-width:52ch; }

.story-dots{ position:absolute; right:0; top:50%; translate:0 -50%; display:grid; gap:10px; }
.story-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.14); transition:background .3s, transform .3s, box-shadow .3s; }
.story-dots i.on{ background:#D9A94E; transform:scale(1.35); box-shadow:0 0 10px rgba(217,169,78,0.7); }
@media (max-width:700px){ .story-dots{ right:-6px; } .story{ min-height:600px; } }

.story-hint{ position:absolute; left:50%; bottom:6px; translate:-50% 0; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:#63727C; display:flex; gap:8px; align-items:center; }
.story-hint svg{ width:14px; height:14px; animation:hintBob 1.6s ease-in-out infinite; }
@keyframes hintBob{ 0%, 100%{ translate:0 0; } 50%{ translate:0 4px; } }