/* Suez story: scroll-driven scenario (section #story). All selectors are .story / .st-* / scoped under .story. */
/* "Playfair Display" (the front-page headline) is loaded by story.js when the section comes near, see there */
.story{--line-2:rgba(255,255,255,.14);--accent-10:rgba(112,199,186,.10);--accent-30:rgba(112,199,186,.32)}
/* ===== Suez story (scroll-driven) ===== */
.story{position:relative;height:400vh;border-top:1px solid var(--line);background:#000}
.story-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story-sticky::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 55%,rgba(112,199,186,.06),transparent 70%);pointer-events:none}
.st-layer{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:80px 20px 0;pointer-events:none;will-change:transform,opacity}
.st-mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}

/* map */
.st-stage{--B:min(68vh,88vw);position:absolute;z-index:3;box-sizing:border-box;left:50%;top:calc(50% + 40px);width:var(--B);height:var(--B);margin:calc(var(--B)/-2) 0 0 calc(var(--B)/-2);overflow:hidden;border:1px solid var(--line-2);background:#05070B;transform-origin:0 0;will-change:transform}
.st-scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 18px 3px rgba(112,199,186,.5)}
.st-stage>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-ship{position:absolute;left:50%;top:50%;width:7%;height:38%;margin:-19% 0 0 -3.5%;will-change:transform}
.st-ship svg{width:100%;height:100%;display:block;overflow:visible}
.st-rings{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1/1;margin:-19% 0 0 -19%;will-change:transform,opacity}
.st-rings i{position:absolute;border-radius:50%;border:1px solid rgba(239,68,68,.7)}
.st-rings .r1{inset:0}.st-rings .r2{inset:18%;border-color:rgba(239,68,68,.4)}
.st-rings .r3{inset:0;border-color:rgba(239,68,68,.5);animation:st-ping 1.8s cubic-bezier(0,0,.2,1) infinite}
.st-rings b{position:absolute;width:12px;height:12px;border:2px solid #EF4444}
.st-rings .c1{left:-4px;top:-4px;border-right:0;border-bottom:0}.st-rings .c2{right:-4px;top:-4px;border-left:0;border-bottom:0}
.st-rings .c3{left:-4px;bottom:-4px;border-right:0;border-top:0}.st-rings .c4{right:-4px;bottom:-4px;border-left:0;border-top:0}
@keyframes st-ping{75%,100%{transform:scale(1.6);opacity:0}}
.st-badge{position:absolute;left:50%;top:14%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:10px;color:#F87171;background:rgba(0,0,0,.7);border:1px solid rgba(239,68,68,.6);animation:st-blink 1.2s ease-in-out infinite}
.st-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#EF4444}
@keyframes st-blink{50%{opacity:.55}}
.st-label{position:absolute;left:58%;top:60%}
.st-label::before{content:"";display:block;width:40px;height:1px;background:rgba(239,68,68,.7);margin-bottom:4px}
.st-label b{display:block;font:600 11px var(--mono);letter-spacing:.14em;color:#F87171}
.st-label span{display:block;margin-top:2px;font:400 10px var(--mono);color:#94A3B8}
.st-qlabel{position:absolute;left:58%;bottom:6%;font-size:10px;color:#64748B}
.st-hud{position:absolute;left:12px;top:12px;font:400 10px/20px var(--mono);color:#94A3B8}
.st-hud b{font-weight:500;color:var(--accent);letter-spacing:.14em}
.st-maptitle{position:absolute;left:12px;bottom:12px;font-size:10px;color:#64748B}

/* front page — same dark system as parts 1 and 3; only the headline is legible */
#st-article{z-index:1}#st-mail{z-index:2}
.st-paper{position:relative;box-sizing:border-box;width:min(100%,74em);font-size:clamp(8.5px,1.32vh,13px);color:#F1F5F9;padding:1.2em 1.8em 1.4em;margin:0 auto;
  background:linear-gradient(var(--surface),var(--surface));border:1px solid var(--line-2);will-change:clip-path,opacity,filter}
.st-paper::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(226,232,240,.035) 1px,transparent 1px) 0 0/2.4em 2.4em,linear-gradient(90deg,rgba(226,232,240,.035) 1px,transparent 1px) 0 0/2.4em 2.4em}
.st-paper>*{position:relative}
.st-cn{position:absolute!important;width:12px;height:12px;border:2px solid var(--accent);opacity:.8}
.st-cn.a{left:-1px;top:-1px;border-right:0;border-bottom:0}.st-cn.b{right:-1px;top:-1px;border-left:0;border-bottom:0}
.st-cn.c{left:-1px;bottom:-1px;border-right:0;border-top:0}.st-cn.d{right:-1px;bottom:-1px;border-left:0;border-top:0}
.story .sq{display:block;color:#7C8AA0}.sq.acc{color:var(--accent)}
.story .sq svg{display:block;width:100%;height:100%;overflow:hidden}
.story .sq path{fill:none;stroke:currentColor;stroke-width:5.4;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55}
.story .sq.big path{stroke-width:11;opacity:.75}
.story .sq.kick path,.st-box .t path{stroke-width:5}
.story .sq.deck path{stroke-width:6.5;opacity:.7}
.story .sq.acc path{opacity:.85}
.story .sq.cap path{stroke-width:4.6}
.story .sq+.sq{margin-top:.75em}
.story .rule{height:1px;background:rgba(226,232,240,.3);transform-origin:center;transform:scaleX(0)}
.story .rule.dbl{height:5px;background:none;border-top:1px solid rgba(226,232,240,.3);border-bottom:2px solid rgba(226,232,240,.3)}
.st-mast .top{display:flex;justify-content:space-between;padding-bottom:.5em}
.st-mast .top .sq{width:18%;margin:0}
.st-mast .rule{margin:0}
.st-mast .sq.big{width:56%;margin:.2em auto .1em;color:#CBD5E1}
.st-head{text-align:center;padding:.8em 0 .8em}
.st-head .sq{margin-left:auto;margin-right:auto}
.st-head .kick{width:12%;margin-bottom:.5em}
.st-head h3{margin:0;white-space:nowrap;font:900 4.1em/1 "Playfair Display","Old Standard TT",Georgia,"Times New Roman",serif;text-transform:uppercase;letter-spacing:-.012em;color:#F8FAFC}
.st-head h3 .red{color:#F87171}
.st-head .deck{width:56%;margin-top:.7em}
.st-head .by{width:20%;margin-top:.65em}
.st-head .rule{margin-top:.9em}
.st-cols{display:grid;grid-template-columns:2.4fr 1fr;gap:1.6em;padding-top:.3em}
.st-text{display:grid;grid-template-columns:1fr 1fr;gap:1.6em;min-width:0}
.st-text .col+.col{border-left:1px solid var(--line-2);padding-left:1.6em;margin-left:-.8em}
.st-side2{border-left:1px solid var(--line-2);padding-left:1.6em;min-width:0}
.st-slot{box-sizing:border-box;width:100%;aspect-ratio:1/1;border:1px solid var(--line-2)}
.st-side2 .cap{margin-top:.8em}
.st-box{margin-top:1em;border:1px solid var(--line-2);padding:.7em .9em .5em}
.st-box .t{width:44%;margin:0 auto .5em}
.st-box .row{display:flex;justify-content:space-between;align-items:flex-end;gap:.8em;padding:.5em 0;border-top:1px dotted rgba(226,232,240,.18)}
.st-box .row .sq{margin:0}.st-box .row .sq:first-child{width:34%}.st-box .row .sq:last-child{width:52%}

/* inbox (minimal) */
.st-mail{box-sizing:border-box;width:100%;max-width:700px;margin:0 auto;background:var(--surface);border:1px solid var(--line-2);will-change:clip-path,opacity}
.st-mh{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);font-size:10px;color:#64748B}
.st-msg{display:flex;gap:14px;padding:22px 20px 18px}
.st-av{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--mono);color:var(--accent);background:var(--accent-10);border:1px solid var(--accent-30)}
.st-msg .mb{flex:1;min-width:0}
.st-msg .who{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;color:#F1F5F9}
.st-time{font:400 11px var(--mono);color:#64748B}
.st-msg .sj{margin-top:6px;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em;color:#F1F5F9}
.st-open{display:grid;grid-template-columns:min(24%,150px) 1fr;gap:22px;padding:0 20px 6px 70px;align-items:start}
.st-mslot .cap{margin-top:8px;font-size:9px;color:#64748B}
.st-mtext .to{font:400 11px var(--mono);color:#64748B}
.st-mtext .ob{margin-top:10px;font-size:15px;line-height:24px;color:#94A3B8}
.st-chk{margin-top:16px;display:grid;gap:10px;list-style:none}
.st-chk li{display:flex;align-items:center;gap:10px;font-size:14px;color:#CBD5E1}
.st-chk svg{flex-shrink:0;color:var(--accent)}
.st-foot{padding:0 20px 22px 70px}
.st-ok{margin-top:18px;display:inline-block;padding:6px 12px;font-size:10px;color:var(--accent);border:1px solid var(--accent-30);background:var(--accent-10)}
.st-ill{margin-top:16px;font:400 10px var(--mono);color:#475569}

/* chrome */
.st-hint{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);font-size:10px;color:#64748B;z-index:5;pointer-events:none}

/* static / reduced-motion */
.story.st-static{height:auto}
.story.st-static .story-sticky{position:static;height:auto;overflow:visible}
.story.st-static .st-layer{position:relative;inset:auto;padding:64px 20px}
.story.st-static .st-stage{position:relative;left:auto;top:auto;margin:64px auto 0;transform:none!important}
.story.st-static .st-slot{visibility:hidden}
.story.st-static .st-top,.story.st-static .st-rail,.story.st-static .st-hint{display:none}
@media (max-width:900px){
  .story{height:300vh}
  .st-paper{font-size:clamp(9.5px,1.55vh,13px);padding:1em 1em 1.1em}
  .st-head h3{font-size:2.3em;white-space:normal}
  .st-head .deck{width:80%}
  .st-cols{grid-template-columns:1fr}
  .st-text{grid-template-columns:1fr}
  .st-side2{order:-1;border-left:0;padding-left:0;margin-bottom:1em}
  .st-side2 .st-slot{width:min(42%,12em);margin:0 auto}
  .st-text .col.c0 .sq:nth-child(n+2){display:none}
  .st-head .deck{display:none}
  .st-side2{margin-bottom:.8em}
  .st-side2 .cap{width:60%!important;margin-left:auto;margin-right:auto}
  .story .hide-m{display:none}
  .st-open{grid-template-columns:96px 1fr;gap:14px;padding:0 16px 6px 16px}
  .st-foot{padding:0 16px 20px}
  .st-msg .sj{font-size:17px;line-height:24px}
  .st-label,.st-qlabel{display:none}
}