/* ===== Tappable hook objects → full-screen stories (feat/guided-flows-20260930, Russ 30 Sep: "we've hooked them, now show
   them the masterpiece. Then an easy Go back and Right to the next one."). Additive: the objects keep Ali's size, float and
   position; the link around each takes the object's own box, the hint sits inside it, so the page's beats do not move.
   Palette is the page's own (main,#tap vars). Orange is a 1px stroke or small text only; green never glows. ===== */
main a.hook{position:relative;display:block;border-radius:28px;cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit}
main a.hook:focus-visible{outline:2px solid #0EA675;outline-offset:6px}
main a.hook .hook-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px 5px 8px;border-radius:999px;border:1px solid #333;background:rgba(0,0,0,.72);color:#e5e5e5;
  font:400 10.5px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;white-space:nowrap;pointer-events:none}
main a.hook .hook-hint::before{content:'';width:14px;height:14px;border-radius:50%;border:1px solid #d4d4d4;flex:0 0 auto;
  background:linear-gradient(#d4d4d4,#d4d4d4) center/7px 1px no-repeat,linear-gradient(#d4d4d4,#d4d4d4) center/1px 7px no-repeat}
main a.hook .hook-hint .t-click{display:none}
@media (hover:hover) and (pointer:fine){main a.hook .hook-hint .t-tap{display:none}main a.hook .hook-hint .t-click{display:inline}}
main a.hook:hover .hook-hint{border-color:#737373;color:#fff}
/* the hint rises in once (≤450 ms) the first time its object is in view, then stays; it never replays */
main a.hook .hook-hint{opacity:0;transform:translate(-50%,6px);transition:opacity .42s ease,transform .42s ease}
main a.hook.seen .hook-hint{opacity:1;transform:translateX(-50%)}
html:not(.js) main a.hook .hook-hint{opacity:1;transform:translateX(-50%)}
main .desk a.hook{border-radius:28px}
main .desk a.hook .hook-hint{bottom:14px;font-size:12px;padding:7px 12px 7px 9px}

/* ---------- the story sheet ---------- */
#story{position:fixed;inset:0;z-index:70;display:none;background:#000;color:#f5f5f5;font-family:'Geist',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;touch-action:pan-y;overscroll-behavior:contain}
#story.open{display:flex;flex-direction:column}
html.story-lock,html.story-lock body{overflow:hidden}
#story .s-top{display:flex;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 8px;max-width:760px;width:100%;margin:0 auto}
#story .s-bars{flex:1;display:flex;gap:4px}
#story .s-bars button{flex:1;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
#story .s-bars button::after{content:'';position:absolute;left:0;right:0;top:11px;height:2px;border-radius:1px;background:#2a2a2a}
#story .s-bars button.done::after{background:#737373}
#story .s-bars button[aria-current="step"]::after{background:#f5f5f5}
#story .s-bars button:focus-visible{outline:2px solid #0EA675;outline-offset:2px;border-radius:4px}
#story .s-x{width:44px;height:44px;flex:0 0 auto;border-radius:22px;border:1px solid #262626;background:#111;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#d4d4d4}
#story .s-x:focus-visible,#story .s-nav button:focus-visible,#story .s-cta:focus-visible{outline:2px solid #0EA675;outline-offset:2px}
#story .s-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:4px 20px 12px;max-width:760px;width:100%;margin:0 auto;text-align:center}
#story .s-count{margin:6px 0 0;font:400 11px 'Geist Mono',monospace;letter-spacing:.08em;color:#737373}
#story .s-stage{position:relative;width:100%;max-width:560px;min-height:min(46svh,400px);margin-top:14px;display:flex;align-items:center;justify-content:center}
#story h2{margin:22px 0 0;font:400 clamp(30px,8vw,44px)/1.08 'Instrument Serif',Georgia,serif;letter-spacing:-.015em;max-width:560px}
#story .s-text{margin:12px 0 0;font-size:16px;line-height:1.55;color:#a1a4a5;max-width:460px}
#story .s-cta{display:flex;align-items:center;justify-content:center;width:100%;max-width:350px;min-height:52px;margin-top:22px;border-radius:12px;
  background:#070907;border:1px solid rgba(52,211,120,.45);color:#fff;font:500 16px 'Geist',sans-serif;cursor:pointer;text-decoration:none}
#story .s-cta:hover{border-color:rgba(52,211,120,.8)}
#story .s-nav{display:flex;justify-content:space-between;gap:12px;padding:10px 16px max(14px,env(safe-area-inset-bottom));max-width:760px;width:100%;margin:0 auto;border-top:1px solid #151515}
#story .s-nav button{min-height:48px;padding:0 18px;border-radius:12px;border:1px solid #262626;background:#0b0b0b;color:#e5e5e5;font:500 15px 'Geist',sans-serif;cursor:pointer;display:flex;align-items:center;gap:10px}
#story .s-nav .s-next{flex:1;max-width:340px;justify-content:space-between;border-color:#3a3a3a;color:#fff}
#story .s-nav .s-next small{font:400 11px 'Geist Mono',monospace;color:#8a8a8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
#story .s-note{margin:10px 0 0;font:400 11px 'Geist Mono',monospace;color:#737373}

/* beats: each part of the visual arrives on its own, once */
#story [data-beat]{opacity:0;transform:translateY(8px);transition:opacity .42s ease,transform .42s ease}
#story [data-beat].on{opacity:1;transform:none}
#story .st-photo{position:relative;margin:0;border-radius:16px;border:1px solid #262626;overflow:hidden;background:#050505;flex:0 0 auto}
#story .st-photo img,#story .st-photo video{display:block;width:100%;height:100%;object-fit:cover}
#story .st-photo figcaption{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.72);font:400 10.5px 'Geist Mono',monospace;color:#d4d4d4}
@keyframes stscan{0%{top:-4%}100%{top:104%}}
#story .st-scan{position:absolute;left:0;right:0;top:-4%;height:2px;background:rgba(251,146,60,.9)}
#story .st-photo.on .st-scan{animation:stscan 1.4s ease-in-out 1 forwards}
#story .st-split{display:flex;align-items:center;gap:14px;width:100%}
#story .st-split .st-photo{width:44%;aspect-ratio:3/4}
#story .st-arrow{flex:0 0 auto;color:#737373}
#story .st-rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;text-align:left}
#story .st-row{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;border:1px solid #1f1f1f;background:#070707}
#story .st-row span{font:400 10.5px 'Geist Mono',monospace;color:#737373}
#story .st-row b{font-weight:500;font-size:15px;color:#f0f0f0}
#story .st-row b.tier{color:#fb923c}
#story .st-row.hot{border-color:#7c2d12}
#story .st-say b{font-weight:400;font-size:13.5px;line-height:1.45;color:#d4d4d4}
/* QR: scan → snap → queue */
#story .st-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;align-items:start}
#story .st-three .st-photo{aspect-ratio:3/4;width:100%}
#story .st-three .st-rows{gap:6px}
#story .st-three .st-row{padding:7px 8px}
#story .st-three .st-row b{font-size:12.5px}
#story .st-three .st-row span{font-size:9.5px}
#story .st-three .st-lbl{margin-top:8px;font:400 10.5px 'Geist Mono',monospace;color:#9b9b9b;text-align:center}
/* words */
#story .st-msg{width:100%;max-width:440px;padding:18px;border-radius:16px;border:1px solid #1f1f1f;background:#070707;text-align:left}
#story .st-msg p{margin:0;font-size:16px;line-height:1.55;color:#ededed;clip-path:inset(0 0 100% 0);transition:clip-path 1.6s steps(7)}
#story .st-msg.on p{clip-path:inset(0 0 0 0)}
#story .st-copyrow{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:14px}
#story .st-copy{padding:8px 14px;border-radius:9px;border:1px solid #333;font:500 13px 'Geist',sans-serif;color:#e5e5e5}
#story .st-copy.on{border-color:rgba(52,211,120,.7)}
#story .st-copied{font:400 11px 'Geist Mono',monospace;color:#34d378}
/* json */
#story .st-code{flex:1;min-width:0;border:1px solid #1f1f1f;border-radius:12px;background:#050505;text-align:left;font-family:'Geist Mono',monospace}
#story .st-code header{display:flex;justify-content:space-between;padding:9px 11px;border-bottom:1px solid #171717;font-size:10.5px;color:#737373}
#story .st-code header .ok{color:#34d378}
#story .st-code pre{margin:0;padding:11px;font-size:11.5px;line-height:1.75;color:#d4d4d4;white-space:pre-wrap;overflow-wrap:anywhere}
#story .st-code pre em{font-style:normal;color:#737373}
#story .st-code pre span{display:block}
#story .st-split.json .st-photo{width:38%;aspect-ratio:4/3}
/* arrives */
#story .st-arrive{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
#story .st-arrive .st-photo{width:100%;max-width:440px;aspect-ratio:4/3}
#story .st-qs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#story .st-qs span{padding:8px 12px;border-radius:999px;border:1px solid #333;font-size:14px;color:#e5e5e5}
/* valve */
#story .st-valve{width:min(62vw,300px);aspect-ratio:880/1052}

@media (min-width:900px){
  #story .s-stage{min-height:min(50svh,440px)}
  #story .st-row b{font-size:16px}
  #story .st-code pre{font-size:12.5px}
}
@media (max-width:420px){
  #story .st-three{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  main a.hook .hook-hint{transition:none;opacity:1;transform:translateX(-50%)}
  #story [data-beat]{transition:none;opacity:1;transform:none}
  #story .st-photo.on .st-scan{animation:none;display:none}
  #story .st-msg p{transition:none;clip-path:none}
}
/* the phone-only QR object is display:none at 900px and up (the desk section carries the QR there); its link goes with it */
@media (min-width:900px){main #twoways a.hook{display:none}}
/* layout fixes after the first 390 / 1440 walk */
#story h2:focus{outline:none}
#story .s-act{width:100%;display:flex;justify-content:center}
#story .s-nav .s-next{min-width:0}
#story .s-nav .s-next small{flex:1;min-width:0;text-align:left}
#story .s-nav .s-next > span{flex:0 0 auto;white-space:nowrap}
#story .s-nav .s-back{flex:0 0 auto;white-space:nowrap}
#story .st-copy{background:#0b0b0b;cursor:pointer}
#story .st-copy:focus-visible{outline:2px solid #0EA675;outline-offset:2px}
#story .s-stage{cursor:default}
#story,#story *{touch-action:pan-y pinch-zoom}   /* horizontal flicks are ours (swipe), vertical stays a scroll */
@media (max-width:899px){
  #story .s-stage{min-height:0;margin-top:22px}
}
@media (max-width:420px){#story .s-nav .s-next small{display:none}#story .s-nav .s-next{justify-content:center}}
/* refuter round 2: centre short content without cutting off tall content (a centred overflow cannot be scrolled to its top) */
#story .s-body::before,#story .s-body::after{content:'';flex:1 1 0}
/* a part that has not arrived yet cannot be focused or clicked */
#story [data-beat]:not(.on){visibility:hidden}
/* nothing in the sheet shrinks under its content: on a short phone the body scrolls instead of the visual sliding under the headline */
#story .s-body > *{flex-shrink:0}