/* RIVET — Events surface.
   Duo law: ONE duo per surface.
   · Live / upcoming  → THE CATALYST (purple → orange, white ink) — announcements.
   · The archive      → THE DUSK (slate → purple, white ink) — muted authority, a vault.
   Magenta is never a duo partner; it lands as the single moment on the dark end
   (the live dot). Bounded bands and cards only — never a full-bleed page. */

/* ============ EVENTS HERO — the GTM OS hero composition (ovhero), retinted
   to Catalyst: centred column · rotating-gradient pill · italic accent ·
   mono pulsing checks · figure below at 840px ============ */
.evhero{ padding-block:clamp(48px,7vw,104px) clamp(20px,3vw,32px) }
.evhero__grid{ display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,44px); align-items:center; justify-items:center; text-align:center; max-width:980px; margin-inline:auto }
.evhero__grid > div{ display:flex; flex-direction:column; align-items:center; gap:18px }
/* pill — rotating duo border, the OS signature treatment */
.evpill{ position:relative; display:inline-flex; border-radius:12px; padding:1px; overflow:hidden; isolation:isolate; margin-bottom:0 }
.evpill::before{ content:""; position:absolute; left:50%; top:50%; width:260%; aspect-ratio:1; transform:translate(-50%,-50%); background:conic-gradient(var(--violet),#FF8A47,var(--magenta),var(--violet)); animation:pillspin 7s linear infinite; z-index:-1 }
.evpill__in{ display:inline-flex; align-items:center; gap:8px; border-radius:11px; padding:7px 16px; background:#0a0413; font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#FFC49B; border:0 }
@media (prefers-reduced-motion:reduce){ .evpill::before{ animation:none } }
.evhero h1{ font-size:clamp(2.1rem,1.4rem+2.9vw,3.5rem); letter-spacing:-.032em; line-height:1.04; margin:0; max-width:22ch; text-wrap:balance }
.evhero h1 em{ font-style:italic; color:#FFA871 }
.evhero .lead{ margin:0; max-width:62ch }
/* checks — one mono row with pulsing dots, not a vertical checkbox list */
.evchecks{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; font-family:var(--font-mono); font-size:.8rem; color:rgba(255,255,255,.8) }
.evchecks li{ display:inline-flex; align-items:center; gap:9px; line-height:1.4 }
.evchecks i{ flex:none; width:7px; height:7px; margin:0; border:0; border-radius:50%; background:#FF8A47; box-shadow:0 0 8px #FF8A47; animation:dotpulse 2s ease-in-out infinite }
.evchecks i::after{ content:none }
.evchecks li:nth-child(2) i{ animation-delay:-.66s } .evchecks li:nth-child(3) i{ animation-delay:-1.33s }
.evhero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:2px }
.evtrust{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:rgba(255,255,255,.56) }
/* hero visual — the live next-session card */
.evcard{ text-decoration:none; position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(20px,2.4vw,28px); color:#fff; background:linear-gradient(140deg,#4a0fd8 0%, #8b2bc4 46%, #FF8A47 100%); box-shadow:0 34px 74px -34px rgba(255,138,71,.55); isolation:isolate }
.evcard::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:32px 32px; -webkit-mask:radial-gradient(76% 82% at 16% 8%,#000,transparent 76%); mask:radial-gradient(76% 82% at 16% 8%,#000,transparent 76%) }
.evcard__pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.3); border-radius:var(--r-pill); padding:6px 11px }
.evcard__k{ display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); margin:20px 0 8px }
.evcard__t{ display:block; font-size:clamp(1.05rem,.95rem+.5vw,1.32rem); font-weight:600; line-height:1.24; letter-spacing:-.015em; color:#fff }
.evcard__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.22) }
.evcard__meta span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; color:rgba(255,255,255,.82) }
.evcard__meta b{ color:#fff; font-weight:600 }
.evcard__go{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; min-height:44px; font-weight:600; font-size:.94rem; color:#fff; text-decoration:none }
.evcard__go .arr{ transition:transform .2s ease }
.evcard:hover .evcard__go .arr{ transform:translateX(4px) }
/* hero figure position — matches .ovhero .figslot (centred, 840px cap) */
.evhero .evcard{ width:100%; max-width:840px; text-align:left }
/* mono aha caption under the hero figure — the Feel-Clever naming rule */
.evfigcap{ margin-top:14px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em; color:rgba(255,255,255,.56); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; justify-content:center }
.evfigcap b{ color:#FFA871; font-weight:500 }
@media (max-width:920px){ .evhero h1{ max-width:none } }
@keyframes pillspin{ to{ transform:translate(-50%,-50%) rotate(1turn) } }
@keyframes dotpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }

/* ============ TOPICS RIBBON — the marquee teaser under the hero
   (modelsribbon on OS Overview): what actually gets worked on ============ */
.evribbon{ border-block:1px solid rgba(255,255,255,.12); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent) }
.evribbon__track{ display:flex; gap:34px; width:max-content; padding:14px 0; animation:evribbon 34s linear infinite }
.evribbon__track span{ flex:none; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em; color:rgba(255,255,255,.78); display:inline-flex; gap:9px; align-items:center }
.evribbon__track b{ color:#FFA871; font-weight:500 }
@keyframes evribbon{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .evribbon__track{ animation:none } }

/* ============ POSTER RAIL — event one-sheets, OSN/Netflix browse behaviour
   Art-directed inside the Voice range (tone 1–3) so the wall reads as one
   studio rather than a rainbow: one duo per surface, three intensities. ============ */
.evrailshell{ position:relative }
.evrailshell__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px }
.evrailshell__nav{ display:flex; gap:8px; flex:none }
.evrailbtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,.7); border:1px solid rgba(23,18,38,.16); color:#0d0a18; transition:background .18s ease, border-color .18s ease, opacity .18s ease }
.evrailbtn:hover:not(:disabled){ background:#fff; border-color:rgba(160,60,10,.45) }
.evrailbtn:disabled{ opacity:.3; cursor:default }
.evrailbtn:focus-visible{ outline:2px solid var(--violet); outline-offset:2px }
.evrailtrack{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding:6px 0 22px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter) }
.evrailtrack::-webkit-scrollbar{ display:none }

/* the one-sheet */
.evpo{ position:relative; flex:none; width:clamp(184px,20vw,232px); aspect-ratio:2/3; border-radius:14px; overflow:hidden; text-decoration:none; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; padding:14px; isolation:isolate; color:#0d0a18; border:1px solid rgba(255,255,255,.5); box-shadow:0 16px 34px -22px rgba(160,60,10,.42); transition:transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s cubic-bezier(.16,1,.3,1) }
.evpo:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 28px 56px -24px rgba(160,60,10,.55); z-index:2 }
.evpo:focus-visible{ outline:2px solid var(--violet); outline-offset:3px }
/* poster art: the duo field at three intensities */
.evpo__art{ position:absolute; inset:0; z-index:-1 }
.evpo--t1 .evpo__art{ background:linear-gradient(158deg,#FFF0C4 0%,#F7CE6A 54%,#F0A94E 100%) }
.evpo--t2 .evpo__art{ background:linear-gradient(158deg,#FFDC9A 0%,#F5B053 52%,#EE8636 100%) }
.evpo--t3 .evpo__art{ background:linear-gradient(158deg,#FFB775 0%,#F2823C 50%,#C9531A 100%) }
.evpo__grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(23,18,38,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(23,18,38,.09) 1px,transparent 1px); background-size:26px 26px; -webkit-mask:linear-gradient(#000,transparent 72%); mask:linear-gradient(#000,transparent 72%) }
/* the loop rail — the poster's brand signature, an arc not a funnel */
.evpo__ring{ position:absolute; right:-34%; top:14%; width:86%; aspect-ratio:1; border-radius:50%; border:1.6px solid rgba(255,255,255,.5); border-right-color:transparent; transform:rotate(-18deg) }
.evpo__ring::after{ content:""; position:absolute; left:6%; top:52%; width:64%; aspect-ratio:1; border-radius:50%; border:1.6px solid rgba(13,10,24,.14); border-left-color:transparent }
.evpo__top{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:8px }
.evpo__tag{ font-family:var(--font-mono); font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(13,10,24,.72) }
.evpo__badge{ font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 8px; border-radius:var(--r-pill); background:rgba(255,255,255,.62); border:1px solid rgba(23,18,38,.14); color:#0d0a18; white-space:nowrap; display:inline-flex; align-items:center; gap:5px }
.evpo__badge--live{ background:var(--magenta); border-color:transparent; color:#fff }
.evpo__badge--live i{ width:5px; height:5px; border-radius:50%; background:#fff; animation:dotpulse 1.8s ease-in-out infinite }
.evpo__bot{ position:relative; display:flex; flex-direction:column; gap:6px }
.evpo__kind{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(13,10,24,.66) }
.evpo__t{ font-size:1rem; font-weight:650; line-height:1.22; letter-spacing:-.018em; color:#0d0a18; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden }
.evpo__meta{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; color:rgba(13,10,24,.7) }
.evpo__who{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.04em; color:rgba(13,10,24,.56) }
/* CTA slides up on hover — reward, never required (it is in the aria-label too) */
.evpo__cta{ position:absolute; left:14px; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:#0d0a18; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9); border-radius:var(--r-pill); padding:8px 12px; opacity:0; transform:translateY(8px); transition:opacity .22s ease, transform .26s cubic-bezier(.16,1,.3,1) }
.evpo:hover .evpo__cta, .evpo:focus-visible .evpo__cta{ opacity:1; transform:none }
.evpo:hover .evpo__bot, .evpo:focus-visible .evpo__bot{ padding-bottom:38px; transition:padding-bottom .26s cubic-bezier(.16,1,.3,1) }
@media (hover:none){ .evpo__cta{ display:none } }
@media (prefers-reduced-motion:reduce){ .evpo, .evpo__cta{ transition:none } .evpo:hover{ transform:none } }
.evrail{ position:sticky; top:64px; z-index:40; background:rgba(8,3,18,.84); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-block:1px solid rgba(255,255,255,.12) }
.evrail__in{ display:flex; gap:6px; overflow-x:auto; padding:10px var(--gutter); scrollbar-width:none }
.evrail__in::-webkit-scrollbar{ display:none }
.evrail a{ flex:none; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; text-decoration:none; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); padding:7px 14px; min-height:36px; display:inline-flex; align-items:center; transition:color .18s ease, border-color .18s ease, background .18s ease }
.evrail a:hover{ color:#fff; border-color:rgba(255,138,71,.5); background:rgba(255,138,71,.12) }

/* ============ CATALYST band — the live/next hero ============ */
.evband{ position:relative; overflow:hidden; border-radius:var(--r-xl); color:#fff; padding:clamp(24px,3.4vw,40px); background:linear-gradient(134deg,var(--violet) 0%, #7a1fd0 46%, var(--orange,#FF8A47) 100%); isolation:isolate; }
.evband::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:34px 34px; -webkit-mask:radial-gradient(80% 90% at 18% 10%,#000,transparent 78%); mask:radial-gradient(80% 90% at 18% 10%,#000,transparent 78%); }
.evband__grid{ display:grid; grid-template-columns:1.35fr .8fr; gap:clamp(20px,3vw,44px); align-items:center; }
.evband .eyebrow{ color:#fff; opacity:.9 }
.evband .eyebrow::before{ background:#fff }
.evband h2{ color:#fff; font-size:clamp(1.5rem,1.1rem+1.7vw,2.3rem); letter-spacing:-.025em; line-height:1.12; margin:.35em 0 0; text-wrap:pretty }
.evband p{ color:rgba(255,255,255,.86); line-height:1.6; margin:.7em 0 0; max-width:52ch }
.evband__cta{ display:flex; flex-wrap:wrap; gap:11px; margin-top:20px }
.evband .btn--magenta{ background:var(--magenta); border-color:var(--magenta); color:#fff }
.evband .btn--ghost{ background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.5); color:#fff }
.evband .btn--ghost:hover{ background:rgba(0,0,0,.3); border-color:#fff }
/* next-session card inside the band */
.evnext{ border-radius:var(--r-lg); padding:20px; background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.evnext__pill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:var(--r-pill); padding:5px 10px }
.evnext__dot{ width:6px; height:6px; border-radius:50%; background:var(--magenta); animation:evpulse 2.2s ease-out infinite }
@keyframes evpulse{ 0%{box-shadow:0 0 0 0 rgba(255,0,212,.6)} 70%{box-shadow:0 0 0 8px rgba(255,0,212,0)} 100%{box-shadow:0 0 0 0 rgba(255,0,212,0)} }
.evnext b{ display:block; font-size:1.02rem; line-height:1.3; color:#fff; margin:12px 0 8px; letter-spacing:-.01em }
.evnext__when{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:rgba(255,255,255,.78) }
.evnext__cd{ display:block; font-family:var(--font-mono); font-size:.86rem; color:#fff; margin-top:6px; font-weight:600 }
@media (prefers-reduced-motion:reduce){ .evnext__dot{ animation:none } }
@media (max-width:860px){ .evband__grid{ grid-template-columns:1fr } }

/* ============ Upcoming sessions ============ */
.evx{ display:grid; grid-template-columns:76px 1fr auto; gap:clamp(14px,2vw,26px); align-items:center; padding:clamp(16px,2vw,22px); border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s }
.evx + .evx{ margin-top:12px }
.evx:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -22px rgba(23,18,38,.45); border-color:color-mix(in oklab,var(--violet) 26%,var(--line)) }
.evx--next{ border-color:color-mix(in oklab,var(--orange,#FF8A47) 42%,var(--line)); box-shadow:0 14px 32px -24px color-mix(in oklab,var(--orange,#FF8A47) 70%,transparent) }
.evx__date{ text-align:center; border-radius:var(--r-md); padding:10px 6px; background:linear-gradient(160deg,color-mix(in oklab,var(--violet) 10%,#fff),color-mix(in oklab,var(--orange,#FF8A47) 9%,#fff)); border:1px solid var(--line-soft) }
.evx__date b{ display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; color:var(--violet) }
.evx__date span{ display:block; font-size:1.5rem; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1.1 }
.evx__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:7px }
.evx__kind{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); background:color-mix(in oklab,var(--violet) 9%,#fff); border:1px solid color-mix(in oklab,var(--violet) 18%,var(--line)); border-radius:var(--r-pill); padding:3px 9px }
.evx__who{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; color:var(--fg-mute) }
.evx__cd{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:#8a3b00; background:color-mix(in oklab,var(--orange,#FF8A47) 15%,#fff); border:1px solid color-mix(in oklab,var(--orange,#FF8A47) 34%,var(--line)); border-radius:var(--r-pill); padding:3px 9px }
.evx__cd i{ width:5px; height:5px; border-radius:50%; background:var(--magenta) }
.evx h3{ font-size:clamp(1rem,.9rem+.45vw,1.16rem); letter-spacing:-.015em; line-height:1.25; margin:0 0 6px }
.evx p{ color:var(--fg-soft); font-size:.9rem; line-height:1.55; margin:0 0 8px; max-width:62ch }
.evx__time{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; color:var(--fg-mute) }
.evx__go{ white-space:nowrap; font-weight:600; font-size:.9rem; color:var(--violet); text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:44px }
.evx__go .arr{ transition:transform .2s ease }
.evx:hover .evx__go .arr{ transform:translateX(4px) }
@media (max-width:760px){ .evx{ grid-template-columns:60px 1fr; gap:14px } .evx__go{ grid-column:1 / -1; justify-content:flex-start } }

/* ============ DUSK archive — the vault ============ */
.arcband{ position:relative; overflow:hidden; border-radius:var(--r-xl); color:#fff; padding:clamp(26px,3.6vw,46px); background:linear-gradient(146deg,var(--slate-x,#4A4A68) 0%, #3a2f6e 52%, var(--violet) 100%); isolation:isolate }
.arcband::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:34px 34px; -webkit-mask:linear-gradient(#000,transparent 84%); mask:linear-gradient(#000,transparent 84%) }
.arcband .eyebrow{ color:#fff; opacity:.88 }
.arcband .eyebrow::before{ background:#fff }
.arcband h2{ color:#fff; font-size:clamp(1.45rem,1.1rem+1.5vw,2.15rem); letter-spacing:-.025em; line-height:1.14; margin:.35em 0 0 }
.arcband p{ color:rgba(255,255,255,.82); line-height:1.6; margin:.7em 0 0; max-width:58ch }
.arcband__count{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; opacity:.9; margin-top:14px; display:block }
.arcgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; margin-top:clamp(20px,2.6vw,30px) }
.arx{ position:relative; display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--r-lg); text-decoration:none; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); transition:background .2s, transform .2s cubic-bezier(.16,1,.3,1), border-color .2s }
.arx:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); border-color:rgba(255,255,255,.34) }
.arx:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.arx__lock{ position:absolute; top:14px; right:14px; color:rgba(255,255,255,.55); transition:color .2s }
.arx:hover .arx__lock{ color:var(--magenta) }
.arx__when{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.66) }
.arx__t{ font-size:.95rem; font-weight:600; line-height:1.34; letter-spacing:-.01em; color:#fff; padding-right:22px }
.arx__foot{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px }
.arx__kind{ font-family:var(--font-mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.14); border-radius:var(--r-pill); padding:3px 8px }
.arx__who{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.05em; color:rgba(255,255,255,.6); align-self:center }

/* ============ Mega feature — live next session ============ */
.mf-ev{ display:flex; flex-direction:column; gap:6px }
.mf-ev__cd{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:#fff; font-weight:600 }