/* Home · Speakers band (2 Nov): the approved Split posts in a 3D slider on black, a headline for each speaker, and a closing card that says there's more to meet. Everything scoped to .sx */
.sx{position:relative;background:#0c0c0c;color:#f1f1ef;margin-inline:18px;overflow:hidden;padding:clamp(34px,4.6vw,66px) 0 clamp(36px,4.6vw,66px);--sxa:#8CC63F;--sxk:#0c0c0c;--sxw:min(440px,72vw,calc((100svh - 230px) * .8));isolation:isolate}
.sx::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background 1.1s ease;
  background:radial-gradient(52% 48% at 50% 54%,color-mix(in srgb,var(--sxa) 26%,transparent),transparent 72%),radial-gradient(circle,rgba(241,241,239,.08) 0 .8px,transparent 1.2px) 0 0/22px 22px}
/* the band opens the page (Amr, 2 Nov): the header strip turns black and joins it, and the Khayal lockup leads */
.idx a.nb{color:var(--ink);font-weight:700}
.sheet>.top:has(+ .sx){background:#0c0c0c;color:rgba(241,241,239,.72);margin:18px 18px 0;padding:26px calc(var(--px) - 18px) 4px}
.sheet>.top:has(+ .sx) .idx a{color:rgba(241,241,239,.6)}
.sheet>.top:has(+ .sx) .idx a.nb,.sheet>.top:has(+ .sx) .idx a:hover,.sheet>.top:has(+ .sx) .idx a:focus-visible{color:#f1f1ef}
.sheet>.top:has(+ .sx)+.sx{padding-top:clamp(22px,3vw,40px)}
.sx-hd{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:14px 32px;padding:0 calc(var(--px) - 18px)}
.sx-lock{display:block;width:clamp(190px,22vw,330px);height:auto}
.sx-h{margin:0;text-align:right;font:800 clamp(40px,6.4vw,104px)/.9 var(--f-sans);letter-spacing:-.025em;text-transform:uppercase}
.sx-h mark{background:var(--sxa);color:var(--sxk);padding:0 .14em;transition:background .9s,color .9s}
/* the date at the top (Amr, 13:25), in the site's own date lockup from the hero (13:36: the bold red box looked cheap): light numerals, a small "to", November 2026 and the venue set to the width of "08 to 10" by the page's date fitter */
.sx-when{grid-column:1/-1;margin-top:10px;padding-top:22px;border-top:1px solid rgba(241,241,239,.16);display:flex;justify-content:space-between;align-items:flex-end;gap:18px 32px;flex-wrap:wrap}
.sx-dd{font-size:clamp(78px,10vw,150px);color:#f1f1ef}
.sx-dd .dlk{display:block;width:max-content}
.sx-dd .dlk .dm b{font-weight:700}
.sx-dd .dv{display:block;margin-top:16px;font:500 12px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(241,241,239,.62)}
/* the posts */
.sx-st{position:relative;z-index:1;height:calc(var(--sxw) * 1.25 + 40px);margin-top:clamp(18px,2.4vw,34px);perspective:1600px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.sx-st.drag{cursor:grabbing}
.sx-sl{position:absolute;left:50%;top:20px;width:var(--sxw);aspect-ratio:4/5;margin-left:calc(var(--sxw) / -2);transform-style:preserve-3d;will-change:transform;
  transition:transform .9s cubic-bezier(.2,.75,.1,1),opacity .9s ease}
.sx-sl .c{position:absolute;inset:0;overflow:hidden;background:#1a1a1a;box-shadow:0 40px 90px rgba(0,0,0,.72)}
.sx-sl img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.sx-sl.on img{animation:sxs 1.1s cubic-bezier(.2,.75,.1,1)}
@keyframes sxs{from{transform:scale(1.05)}to{transform:none}}
.sx-sl .scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--a);box-shadow:0 0 26px var(--a);opacity:0}
.sx-sl.on .scan{animation:sxscan 1.05s cubic-bezier(.4,0,.2,1) .05s}
@keyframes sxscan{0%{top:0;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.sx-sl .sh{position:absolute;inset:0;background:#000;opacity:.5;transition:opacity .9s}
.sx-sl.on .sh{opacity:0}
/* the closing card: and more to meet */
.sx-sl.more .mc{background:#F3F1EB;color:#0c0c0c;display:flex;flex-direction:column;justify-content:flex-end;padding:9% 9% 10%;
  background-image:radial-gradient(circle,rgba(12,12,12,.2) 0 .9px,transparent 1.3px);background-size:16px 16px}
.sx-sl.more .ml{position:absolute;left:9%;top:8%;width:44%;height:auto;object-fit:contain}
.sx-sl.more img.ml{animation:none}
.sx-sl.more .mdt{position:absolute;left:9%;top:calc(8% + var(--sxw) * .2);font-size:calc(var(--sxw) * .25);color:#0c0c0c}
.sx-sl.more .dl{margin:0;display:flex;align-items:baseline;font:300 1em/.8 var(--f-sans);letter-spacing:-.04em;white-space:nowrap}
.sx-sl.more .dl .to{font-weight:400;font-size:.36em;letter-spacing:0;margin:0 .32em 0 .34em;line-height:1}
.sx-sl.more .dm{margin:.24em 0 0;display:flex;justify-content:space-between;font-size:.34em;line-height:1;letter-spacing:-.005em;white-space:nowrap;text-transform:none}
.sx-sl.more .dm b{font-weight:700}.sx-sl.more .dm span{font-weight:400}
.sx-sl.more .mt{margin:0;font:800 calc(var(--sxw) * .13)/.92 var(--f-sans);letter-spacing:-.03em;text-transform:uppercase}
.sx-sl.more .mt mark{background:#C1272D;color:#fff;padding:.05em .1em .01em;display:inline-block;line-height:.98}
/* the closing card comes alive each time it lands (Amr, 2 Nov 13:32): logo drops in, 08 · to · 10 slam, November wipes, the line rises, the red box wipes across; the dots keep drifting */
.sx-sl.more .mt .ln{display:block;overflow:hidden;padding-top:.06em;margin-top:-.06em}
.sx-sl.more .mt .ln>span{display:inline-block}
.sx-sl.more .dl>*{transform-origin:50% 80%}
.sx-sl.more.on .mc{animation:sxdots 16s linear infinite}
.sx-sl.more.on .ml{animation:sxml .7s cubic-bezier(.2,.75,.1,1) .05s both}
.sx-sl.more.on .dl>*{animation:sxslam .55s cubic-bezier(.2,.9,.2,1) both}
.sx-sl.more.on .dl>:nth-child(1){animation-delay:.3s}
.sx-sl.more.on .dl>:nth-child(2){animation-delay:.5s}
.sx-sl.more.on .dl>:nth-child(3){animation-delay:.64s}
.sx-sl.more.on .dm{animation:sxwipe .6s cubic-bezier(.65,0,.2,1) .9s both}
.sx-sl.more.on .mt .ln>span{animation:sxrise .75s cubic-bezier(.2,.75,.1,1) 1.15s both}
.sx-sl.more.on .mt mark{animation:sxwipe .65s cubic-bezier(.65,0,.2,1) 1.35s both}
.sx-sl.more.on .ms{animation:sxfade .9s ease 1.8s both}
@keyframes sxdots{to{background-position:0 -160px}}
@keyframes sxml{from{transform:translateY(-40%);opacity:0}to{transform:none;opacity:1}}
@keyframes sxslam{0%{transform:scale(1.7);opacity:0;filter:blur(8px)}55%{opacity:1;filter:blur(0)}75%{transform:scale(.96)}100%{transform:none;opacity:1}}
@keyframes sxwipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sxrise{from{transform:translateY(105%)}to{transform:none}}
@keyframes sxfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sx-sl.more .ms{margin:calc(var(--sxw) * .035) 0 0;font:700 calc(var(--sxw) * .026)/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#3a3a38}
/* the speaker under the post: a headline in the site's style — the name, then what they do in the field colour (Amr, 2 Nov 13:17) */
.sx-cap{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:10px 28px;align-items:end;width:min(1180px,100%);margin:10px auto 0;padding:0 calc(var(--px) - 18px)}
/* the speaker's name sits up in the date row, in the empty space beside the date (Amr, 2 Nov 16:13: under the carousel it isn't seen); home.js sizes the headline to the date's height */
.sx-who{min-width:0;flex:1 1 360px;display:flex;flex-direction:column;justify-content:flex-end;padding-left:clamp(20px,2.6vw,44px);border-left:1px solid rgba(241,241,239,.16)}
.sx-who .f{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(241,241,239,.66)}
.sx-who .f i{display:block;width:10px;height:10px;background:var(--sxa);transition:background .9s}
.sx-who .f{flex-wrap:wrap;row-gap:7px}
.sx-who .f span{white-space:nowrap}
.sx-who .f em{font-style:normal;white-space:nowrap;margin-left:6px;padding:4px 7px 3px;background:var(--sxa);color:var(--sxk);transition:background .9s,color .9s}
.sx-who h3{margin:12px 0 12px;font:800 clamp(30px,4.4vw,72px)/1.02 var(--f-sans);letter-spacing:-.02em;text-transform:uppercase;display:flex;flex-wrap:wrap;align-content:flex-end;column-gap:.24em;row-gap:.06em}
.sx-who h3 .w{display:inline-block}
.sx-who h3 .br{flex-basis:100%;height:0} /* the name on its own line, what they do starts on the next */
.sx-who h3 .w.m{background:var(--sxa);color:var(--sxk);padding:0 .13em;margin:0 -.13em;transition:background .9s,color .9s}
.sx-who p{margin:0;font:600 12.5px/1.55 var(--f-mono);letter-spacing:.12em;color:rgba(241,241,239,.68);text-transform:uppercase}
.sx-who p .w{display:inline-block}
.sx-who.sx-in .w{animation:sxr .62s cubic-bezier(.2,.75,.1,1) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes sxr{from{transform:translateY(70%) scale(.96);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:none}}
.sx-ctl{grid-column:2;display:flex;align-items:center;gap:12px}
.sx-ctl .n{min-width:70px;text-align:right;font:600 13px/1 var(--f-mono);letter-spacing:.14em;color:rgba(241,241,239,.62)}
.sx-ctl .n b{font:800 22px/1 var(--f-sans);color:#f1f1ef;letter-spacing:0}
.sx-ctl button{all:unset;cursor:pointer;width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(241,241,239,.2);transition:background .25s,color .25s}
.sx-ctl button:hover{background:#f1f1ef;color:#0c0c0c}
.sx-ctl button:focus-visible,.sx-btns a:focus-visible{outline:2px solid #f1f1ef;outline-offset:2px}
.sx-ctl svg{width:20px;height:20px}
.sx-bar{grid-column:1/-1;height:2px;background:rgba(241,241,239,.16);position:relative;overflow:hidden;margin-top:10px}
.sx-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sxa)}
/* the buttons arrive with the closing card */
.sx-btns{grid-column:1/-1;display:none;gap:10px;flex-wrap:wrap;margin-top:6px}
.sx.is-more .sx-btns{display:flex;animation:sxup .7s cubic-bezier(.2,.75,.1,1) .45s both}
@keyframes sxup{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.sx-btns a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:18px 22px;font:700 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.sx-reg{background:var(--red);color:#fff;animation:sxp 2.6s ease-out infinite}
.sx-reg:hover{background:#f1f1ef;color:#0c0c0c}
.sx-all{border:1px solid rgba(241,241,239,.3);color:#f1f1ef}
.sx-all:hover{background:#f1f1ef;color:#0c0c0c}
@keyframes sxp{0%{box-shadow:0 0 0 0 rgba(193,39,45,.55)}70%{box-shadow:0 0 0 16px rgba(193,39,45,0)}100%{box-shadow:0 0 0 0 rgba(193,39,45,0)}}
/* the opening: the posts fly in from depth, then spin through every speaker */
.sx.intro .sx-sl{transition-duration:1.1s}
.sx.spin .sx-sl{transition-duration:.34s;transition-timing-function:cubic-bezier(.25,.7,.2,1)}
.sx.spin .sx-who .w{animation-duration:.22s;animation-delay:0s}
@media (max-width:720px){
  .sx{--sxw:min(76vw,calc((100svh - 230px) * .8))}
  .sx-dd{font-size:clamp(70px,24vw,104px)}
  .sx-hd{grid-template-columns:1fr}.sx-h{text-align:left}
  .sx-cap{grid-template-columns:1fr}
  .sx-ctl{grid-column:1;justify-content:space-between}
  .sx-who{flex-basis:100%;padding-left:0;border-left:0}
  .sx-who p{font-size:11px;letter-spacing:.1em}
  .sx-who .f{font-size:10px;letter-spacing:.08em}
  .sx-who .f em{margin-left:2px;padding:4px 5px 3px}
  .sx-btns a{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.sx-sl.more.on *,.sx-sl.more.on .mc{animation:none!important}.sx-reg{animation:none}.sx-sl,.sx::before{transition:none}.sx-sl.on img,.sx-sl.on .scan,.sx-who.sx-in .w,.sx.is-more .sx-btns{animation:none}}