/* =========================================================================
   SPLITECH 2026 — design tokens from Figma "splitech" (Matrix Cyber palette)
   Fonts: Geist (UI/body) and Geist Mono (hero "12" glyphs), self-hosted
   from the official vercel/geist-font release v1.7.2. License: fonts/OFL.txt
   ========================================================================= */

@font-face{font-family:"Geist";src:url("../fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Matrix Cyber palette */
  --deep-void:#0A0F14;
  --white-signal:#E8FFFC;
  --neon-aqua:#5CEBD5;
  --dark-circuit:#111B22;
  --digital-teal:#3AAFAB;
  --midnight-steel:#1A2A35;
  --bright-cyan:#7DFFF2;
  --pale-glow:#B8FFF5;
  --shadow-teal:#1E3A42;
  --muted-cyan:#2A6B6E;

  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* content column: wider gutter + a hard cap so cards/sections don't
     keep sprawling wider (and flatter) as the viewport grows — this is
     what keeps the update/edition cards squarish instead of stretched */
  --container:1200px;
  --gutter:320px;
  --nav-h:72px;
  --ease:cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;
  background:var(--deep-void);
  color:var(--white-signal);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
/* h4/h5 were missing from this reset — the browser's default UA margin
   on h4 (~1.33em of its own font-size, so ~42px here) was stacking on
   top of .closing-half's flex gap, which is why steps 03/04 (h4) had a
   much bigger tag-to-heading gap than 01/02 (h3, already reset here) */
h1,h2,h3,h4,h5,p{margin:0}

.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
@media (max-width:1600px){:root{--gutter:160px}}
@media (max-width:1200px){:root{--gutter:80px}}
@media (max-width:900px){:root{--gutter:24px}}

/* ---------------------------------------------------------------- type -- */
.eyebrow{font:700 16px/24px var(--font-sans);letter-spacing:.0625em;color:var(--neon-aqua);text-transform:uppercase;margin:0 0 12px}
.caption{font:400 12px/16px var(--font-sans);letter-spacing:.125em;text-transform:uppercase;color:var(--neon-aqua)}
h1.h1,.h1{font:700 48px/1.1 var(--font-sans);color:var(--white-signal)}
h2.h2{font:700 34px/1.1 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;color:var(--white-signal)}
/* every h2 gets the 12-scramble-in effect (js/scramble.js) — clickable
   to replay it */
.scramble-h2{cursor:pointer}

.h2-large{font:700 32px/1.2 var(--font-sans);color:var(--white-signal)}
.h3{font:700 28px/1.25 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--white-signal)}
.body-lg{font:400 19px/29px var(--font-sans);color:var(--pale-glow)}
/* Authors page only — .body-lg is shared with other pages, so scoped to
   body.page-cfp rather than changed globally (.sub's override sits
   next to its own base rule further down, same reason) */
.page-cfp .body-lg{color:var(--white-signal)}
.body{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--pale-glow)}
.accent{color:var(--neon-aqua)}
.accent-bright{color:var(--bright-cyan)}
em.hl,.hl{color:var(--neon-aqua);font-style:normal}
/* inline span tokens, mapped 1:1 from the Figma text-style overrides (ts1-ts9) */
.t-teal{color:var(--digital-teal)}
.t-white{color:var(--white-signal)}
.t-aqua{color:var(--neon-aqua)}
.t-bright{color:var(--bright-cyan)}
.t-bold{font-weight:700}
.t-underline{text-decoration:underline}

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:100px;
  font:700 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;
  border:1px solid var(--neon-aqua);
  transition:transform .15s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.96)}
.btn-solid{background:var(--neon-aqua);color:var(--deep-void)}
.btn-solid:hover{background:var(--bright-cyan);border-color:var(--bright-cyan)}
.btn-outline{background:var(--dark-circuit);color:var(--neon-aqua)}
.btn-outline:hover{background:var(--midnight-steel)}
.btn-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:6px;background:var(--midnight-steel);
  border:1px solid var(--neon-aqua);color:var(--neon-aqua);
  font:600 14px var(--font-sans);letter-spacing:.02em;
  transition:background-color .2s var(--ease),transform .15s var(--ease);
}
.btn-link:hover{background:rgba(92,235,213,.12);transform:translateX(2px)}

/* ---------------------------------------------------------------- nav -- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gutter);height:var(--nav-h);
  background:var(--deep-void);
}
.nav.is-solid{box-shadow:0 1px 0 var(--midnight-steel)}
.nav-logo{display:block;width:96px;height:32px;flex:none}
.nav-logo img{width:100%;height:100%}
/* holds nav-items + nav-ctas; on desktop it just spreads them across the
   rest of the bar (items hug the logo, ctas hug the right edge — same
   visual result as the old two-group space-between, without duplicating
   markup for the mobile panel below) */
.nav-right{display:flex;align-items:center;justify-content:space-between;flex:1;margin-left:36px}
.nav-items{display:flex;align-items:center;gap:36px}
.nav-item{position:relative}
.nav-item > button, .nav-item > a{
  background:none;border:0;color:var(--neon-aqua);
  font:400 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;padding:8px 12px;
  transition:color .15s var(--ease);
}
.nav-item > a.active{
  color:var(--bright-cyan);font-weight:700;letter-spacing:.1071em;text-transform:uppercase;
}
.nav-item:hover > button,.nav-item > a:hover{color:var(--bright-cyan)}
.nav-item .chev{font-size:16px;transition:transform .2s var(--ease)}
.nav-item.open .chev{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:240px;
  background:var(--dark-circuit);border:1px solid var(--midnight-steel);border-radius:12px;
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.nav-item.open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown a{
  display:block;padding:10px 12px;border-radius:8px;
  font:400 14px/20px var(--font-sans);color:var(--pale-glow);text-transform:uppercase;
  transition:background-color .15s var(--ease),color .15s var(--ease);
}
.nav-dropdown a:hover{background:var(--midnight-steel);color:var(--bright-cyan)}
/* mobile-only flat stand-ins for the dropdown's links — see the media
   query below: the panel lists everything plainly instead of nesting
   another toggle inside the hamburger menu */
.nav-flat-link{display:none}
.nav-ctas{display:flex;align-items:center;gap:12px}
/* 20% smaller than the standard .btn — just in the nav, not the page CTAs */
.nav-ctas .btn{padding:8px 14px;font-size:10px}
.nav-burger{display:none;background:none;border:0;color:var(--neon-aqua);padding:8px;margin-left:16px;flex:none}

@media (max-width:1300px){
  .nav-burger{display:flex}
  .nav-right{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--deep-void);border-top:1px solid var(--midnight-steel);
    flex-direction:column;align-items:stretch;gap:20px;
    padding:20px var(--gutter) 28px;margin-left:0;
  }
  .nav.menu-open .nav-right{display:flex}
  .nav-items{flex-direction:column;align-items:stretch;gap:14px}
  /* flat panel: no nested dropdown-in-a-hamburger — the trigger button
     and its popover are swapped out for two plain links in the list */
  .nav-item-dropdown{display:none}
  .nav-flat-link{
    display:block;color:var(--neon-aqua);
    font:400 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;
    padding:14px 16px;
  }
  .nav-flat-link:hover{color:var(--bright-cyan)}
  .nav-ctas{flex-direction:column;align-items:stretch}
  .nav-ctas .btn{width:100%}
}

/* --------------------------------------------------------------- hero -- */
/* Full-bleed, edge to edge — no side margins, no height cap, no crop.
   Matches how it sits in Figma: a fixed 1440x900 (or 912x1140 "tall")
   image filling the section at its own aspect, full stop. A vh-based
   height cap was here before to guarantee the headline stayed in the
   first viewport, but it forced a crop that cut the animation itself
   off — showing the whole piece uncropped wins. */
.hero{
  position:relative;width:100%;
  aspect-ratio:1440/900;min-height:600px;
  container-type:inline-size;
  overflow:hidden;background:#04161C;
}
.hero.tall{aspect-ratio:912/1140}
.hero-canvas-wrap{position:absolute;inset:0}
/* width/height are set in JS (hero-animation.js sizeElement) — normally
   an exact fit now that .hero has no height cap fighting the aspect-ratio.
   Top-anchored as a safety net for the rare case a min-height/narrow-width
   combo still forces a mismatch: the coastline art itself sits in the
   upper part of the frame, so if anything must crop, crop the bottom. */
.hero-canvas-wrap canvas{display:block;width:100%;height:100%;position:absolute;left:50%;top:0;transform:translateX(-50%)}
/* first screen fit on desktop (team's request, 2026-10-22): overrides the
   "no height cap" note above. The hero is capped to the screen below the
   sticky nav; hero-animation.js then fits the art's height to it and
   spreads its cell grid across the full width (.hero.fit: edge to edge,
   nothing cropped, glyphs keep their shape), and sets --hero-scale, which
   shrinks the headline with the art's height so it keeps its place over the
   dark lower part; its left edge stays on the gutter, in line with the nav
   logo. Rejected before this: lifting the text (it lands on the busy middle
   of the animation, poor contrast), cropping the top of the art, and
   fitting the art narrower than the hero (empty sides).
   min-height:600px still wins on short windows. */
@media (min-width:1024px){.hero{max-height:calc(100svh - var(--nav-h))}}
.hero.fit .hero-inner{transform:scale(var(--hero-scale));transform-origin:var(--gutter) 100%}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,22,28,.25) 0%,rgba(4,22,28,.1) 30%,rgba(4,22,28,.55) 75%,rgba(4,22,28,.88) 100%);
}
/* horizontal inset is var(--gutter) — the same pixel value the nav uses —
   not cqw, so the headline lines up with the logo instead of drifting
   off on its own scale once the hero is full-bleed */
.hero-inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:1.11cqw;padding:0 var(--gutter) 10cqw;
}
.hero.tall .hero-inner{gap:1.8cqw;padding:0 var(--gutter) 12cqw}
.hero-tags{display:flex;gap:1.1cqw;flex-wrap:wrap}
/* border-radius fixed at 999px rather than cqw-scaled — a radius that
   scales with container width stops being "half the pill's height" (a
   true pill) once the container gets narrow, which is why these looked
   squared-off on phones specifically */
.hero-tags .tag{font-size:.90cqw;padding:.63cqw 1.25cqw;border-radius:999px;gap:.6cqw}
.hero.tall .hero-tags .tag{font-size:1.5cqw;padding:1cqw 2cqw;border-radius:999px}
.tag{
  display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border-radius:100px;
  background:var(--digital-teal);font:700 16px/24px var(--font-sans);text-transform:uppercase;
}
.tag .k{color:var(--midnight-steel)}
.tag .v{color:var(--white-signal)}
.hero-title{font:800 5.42cqw/1.05 var(--font-sans);color:var(--white-signal);letter-spacing:-.01em;margin:0}
.hero.tall .hero-title{font-size:8.5cqw}
.hero-sub{font:500 1.46cqw/1.3 var(--font-sans);letter-spacing:.03em;text-transform:uppercase;color:var(--white-signal);max-width:70%}
.hero.tall .hero-sub{font-size:2.4cqw}
/* hero tags and subtitle from tablet width up (team's request,
   2026-10-22); phones keep the cqw sizes above. Tags never below 14px: the
   cqw sizes made them 9-12px on tablets, and on desktop .fit shrank them
   further. Their padding and gap are in em, in the same proportions as the
   cqw values above, so the pill grows with the text; on .hero.fit the scale
   on .hero-inner is divided back out, so they keep at least their original
   size while the title shrinks. Subtitle 15% larger than above and never
   below 18px as seen (on .hero.fit it still shrinks with the title down to
   that floor). */
@media (min-width:600px){
  .hero-tags .tag{font-size:max(.9cqw,14px);padding:.7em 1.39em;gap:.667em}
  .hero.tall .hero-tags .tag{font-size:max(1.5cqw,14px);padding:.667em 1.333em}
  .hero.fit .hero-tags{gap:calc(1.1cqw / var(--hero-scale))}
  .hero.fit .hero-tags .tag{font-size:calc(max(.9cqw,14px) / var(--hero-scale));line-height:calc(24px / var(--hero-scale))}
  .hero.tall.fit .hero-tags .tag{font-size:calc(max(1.5cqw,14px) / var(--hero-scale))}
  .hero-sub{font-size:max(1.68cqw,18px)}
  .hero.tall .hero-sub{font-size:max(2.76cqw,18px)}
  .hero.fit .hero-sub{font-size:max(1.68cqw,calc(18px / var(--hero-scale)))}
  .hero.tall.fit .hero-sub{font-size:max(2.76cqw,calc(18px / var(--hero-scale)))}
}
/* phones (portrait, under 600px): title 15% above the tall 8.5cqw, and a
   larger subtitle and tags (team's request, 2026-10-22). The subtitle may
   use the full content width here instead of 70%, so each of its two lines
   still fits: the widest is about 20.5x the font size, and 3.6cqw leaves
   room down to 320px wide. The two tags only fit side by side below about
   10px, so at this size they wrap onto a row each (padding in em and line
   height 1.7, the tablet pills' proportions, so the pills stay slim). All three are capped at the tablet sizes at 600px (51px title,
   18px subtitle, 14px tags) so nothing jumps at the breakpoint. */
@media (max-width:599px){
  .hero.tall .hero-title{font-size:min(9.8cqw,51px)}
  .hero.tall .hero-sub{font-size:min(3.6cqw,18px);max-width:none}
  .hero.tall .hero-tags{gap:8px}
  .hero.tall .hero-tags .tag{font-size:min(3cqw,14px);line-height:1.7;padding:.667em 1.333em;gap:.667em}
}

/* same min-height on every page regardless of how much copy is in it,
   so Call for Papers' longer hero and Venue/Committee's shorter ones
   all read as the same band — content centers within it */
.plain-hero{min-height:640px;display:flex;align-items:center;background:var(--dark-circuit)}
/* align-items:flex-start (was default stretch) — without it the
   Submission Deadline pill had no explicit width, so it stretched to
   fill the full column and lost its pill shape, becoming a full-width
   bar instead of hugging its own text like the CTAs correctly do */
.plain-hero-inner{width:100%;padding:120px var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.plain-hero .h1{font:800 80px/1.05 var(--font-sans);letter-spacing:-.01em}
.plain-hero .sub{font:400 19px/29px var(--font-sans);color:var(--pale-glow);max-width:850px}
/* Authors page only override — moved after the base rule since both
   selectors tie at two classes' specificity and source order decides */
.page-cfp .sub{color:var(--white-signal)}
.accent-line{display:flex;align-items:center;gap:8px;padding:8px 12px;font:400 12px/16px var(--font-sans);letter-spacing:.125em;text-transform:uppercase;color:var(--neon-aqua)}

/* ---------------------------------------------------------- reveal -- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ------------------------------------------------------------ sections -- */
section{position:relative}
.section-pad{padding:120px var(--gutter)}
/* #topics is a heading directly introducing the toggle-list right after
   it — one logical unit split across two elements, not two independent
   sections, so it keeps its own tight coupling instead of the standard
   120px section-to-section rhythm */
#topics{padding-bottom:24px}
#topics + .section-pad{padding-top:0}
.section-header{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.section-header .body-lg{max-width:720px}

/* partners */
/* static, not a ticker — one copy, no motion; label stays left like every
   other section's eyebrow, only the logo strip itself is centered */
.partners{padding:120px var(--gutter);display:flex;flex-direction:column;gap:32px;background:var(--deep-void)}
.partners-track{display:flex}
.partners-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:24px 32px;width:100%}
/* three separate logo files (was one banner image). 48px keeps them the
   size they were inside that banner */
.partners-row img{height:48px;width:auto;filter:grayscale(1) brightness(1.6);opacity:.85}
.partners-row[aria-hidden]{display:none}
@media (max-width:900px){.partners-row{gap:20px}.partners-row img{height:36px}}

/* stats — an actual rotating ticker: one continuous line, scrolling on
   a seamless loop rather than wrapping or sitting static and overflowing */
.stats{padding:120px 0;background:var(--deep-void);overflow:hidden}
/* 2 copies only left a visible dead gap once the track was narrower than
   the viewport — the loop point (-50%) was landing past the end of the
   real content. 4 copies + a -25% loop keeps the strip filled at any
   reasonable viewport width. */
.stats-track{display:flex;width:max-content;animation:stats-marquee 32s linear infinite}
.stats-row{display:flex;flex-wrap:nowrap;gap:64px;padding-right:64px}
.stat{display:flex;align-items:baseline;gap:16px;flex:none;white-space:nowrap}
.stat .num{font:700 48px/1 var(--font-sans);color:var(--neon-aqua)}
.stat .lbl{font:400 24px/32px var(--font-sans);letter-spacing:.0417em;text-transform:uppercase;color:var(--white-signal)}
@keyframes stats-marquee{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media (prefers-reduced-motion:reduce){.stats-track{animation:none}}

/* description / submit CTA panel — left-aligned, flush with the gutter,
   not centered (the Figma frame is a stretch/left column, not a centered
   one) */
.desc-panel{padding:120px var(--gutter);display:flex;flex-direction:column;gap:48px}
.desc-panel .inner{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:1000px}
.desc-panel .body-lg{max-width:760px}
.hero-ctas{display:flex;gap:16px}
/* Call for Papers hero: two buttons + a link matched to their combined
   width. Grid column sized to max-content (the row's own natural
   width) so the link's width:100% below tracks it exactly. */
.cfp-ctas{display:grid;grid-template-columns:minmax(0,max-content);gap:16px;max-width:100%}
.cfp-ctas-row{display:flex;gap:16px;flex-wrap:wrap}
.cfp-ctas-link{width:100%}

/* shown at its own size, centered, inset by the same gutter as every
   other section — not force-cropped/stretched, and not full-bleed */
.image-banner{padding:120px var(--gutter);display:flex;justify-content:center;background:var(--deep-void)}
.image-banner img{width:auto;max-width:100%;height:auto;margin:0 auto}

/* max-width has to include the (now much bigger) gutter padding on top
   of the actual reading measure, or the text column collapses to almost
   nothing at the wide end */
.about-panel{padding:120px var(--gutter);display:flex;flex-direction:column;gap:24px;max-width:calc(1003px + var(--gutter) * 2)}
/* the hand-drawn SPLITECH mark that sits above the eyebrow in Figma
   (frame "description-section" #328:386, node 461:75295, 442x142) —
   never made it into the build. Figma's own frame gap is 48px between
   the mark and the text block below it — the panel's 24px flex gap
   (sized for eyebrow/heading/paragraph rhythm) is half that, which is
   why it read as glued together. Extra 24px margin makes up the gap. */
.about-mark{width:442px;max-width:100%;height:auto;margin-bottom:24px}

/* card grid — a single system shared by Updates, Journals and Editions,
   matching .venue-card's own proportions (16px radius, equal cells).
   auto-fit + minmax packs as many 240px+ columns as actually fit and
   always divides 100% of the row between them: no dead space when a row
   fits fewer than 4, no forced-nowrap squeeze that turns a card into a
   circle, and it collapses to one full-width centered column on mobile
   for free — no separate breakpoint needed. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px}
/* Updates / Editions: match .venue-card's own scale — 2 big columns
   instead of 3-4 small ones */
/* Updates / Editions: fixed column counts, not auto-fit — auto-fit picks
   however many 300px+ tracks happen to fit a given width, which at some
   widths was 3, orphaning the 4th card alone on its own row. Only 4, 2
   or 1 are allowed; at 2 the cards are capped and the row is centered
   instead of stretching to fill the width. */
.card-grid-lg{grid-template-columns:repeat(4,1fr)}
@media (max-width:1300px){
  .card-grid-lg{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
}
@media (max-width:640px){
  .card-grid-lg{grid-template-columns:minmax(0,420px);justify-content:center}
}

.card-lg{position:relative;aspect-ratio:5/4;border-radius:16px;overflow:hidden;border:2px solid var(--neon-aqua);display:flex;align-items:flex-end;padding:28px 32px}
.card-lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.card-lg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,20,.8) 0%,rgba(10,15,20,.2) 35%,rgba(92,235,213,.55) 90%);z-index:1}
.card-lg .card-title{position:relative;z-index:2;font:700 20px/1.2 var(--font-sans);text-transform:uppercase;color:var(--white-signal)}
/* card-flat now mirrors the journal-item pattern (cover box, then a
   separate caption below it) instead of overlaying text on a colour
   card — matches the Conference Venues / Journals reference cards */
/* border treatment matched to .venue-card exactly: dark by default,
   brightens to digital-teal on hover — was always-on bright neon-aqua
   here, which read as a much heavier stroke even at the same 2px width */
.card-flat{border-radius:16px;background:var(--dark-circuit);border:2px solid var(--midnight-steel);padding:24px;display:flex;flex-direction:column;gap:16px;transition:border-color .25s var(--ease)}
.card-flat:hover{border-color:var(--digital-teal)}
.card-flat .card-cover{width:100%;aspect-ratio:5/4;border-radius:8px;background:linear-gradient(160deg,var(--midnight-steel),var(--digital-teal))}
.card-flat .card-date{font:400 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;color:var(--muted-cyan)}
.card-flat .card-title{font:700 20px/1.2 var(--font-sans);text-transform:uppercase;color:var(--white-signal);white-space:pre-line}

/* journals — reverted to the plain block, no outer bordered card */
.journal-item{display:flex;flex-direction:column;gap:16px}
/* portrait 280x380 per Figma (SpliTech/Journal Item, node 94:113) — was
   landscape 5/4 here, which read as the wrong orientation entirely */
.journal-cover{width:100%;aspect-ratio:280/380;border-radius:8px;background:var(--shadow-teal);display:flex;align-items:center;justify-content:center;font:700 20px var(--font-sans);color:var(--muted-cyan);text-align:center;padding:16px}
.journal-info{display:flex;align-items:center;gap:10px}
.journal-info .name{font:400 16px/24px var(--font-sans);letter-spacing:.0625em;color:var(--white-signal)}
.if-badge{padding:4px 8px;background:var(--neon-aqua)}
.if-badge span{font:400 12px/16px var(--font-sans);letter-spacing:.125em;text-transform:uppercase;color:var(--deep-void)}

/* editions — every card the same width via the shared grid; each image
   keeps its own aspect, uncropped */
.editions{display:flex;flex-direction:column;gap:36px}
.edition-card{border-radius:16px;background:var(--dark-circuit);border:2px solid var(--midnight-steel);padding:24px;display:flex;flex-direction:column;gap:16px;transition:border-color .25s var(--ease)}
.edition-card:hover{border-color:var(--digital-teal)}
.edition-card img{width:100%;border-radius:8px}
.edition-card .card-title{font:700 20px/1.2 var(--font-sans);text-transform:uppercase;color:var(--white-signal)}

/* footer */
/* margin, not padding — margin sits outside the element and shows the
   body's black through it, so this is genuine black space between the
   last section's content and where the cyan block starts, matching the
   120px+120px=240px black gap every other section-to-section transition
   already has. footer-inner's own 120px padding is separate: that's
   just its internal breathing room for the Contact/Channels columns,
   not part of this gap. */
.footer{background:var(--neon-aqua);color:var(--deep-void);margin-top:120px}
/* halved from 120 — this is the mint block's own internal padding for
   its Contact/Channels/Privacy columns, separate from the black gap
   before it (.footer's own margin-top, untouched) */
.footer-inner{padding:60px var(--gutter);display:flex;flex-direction:column;gap:48px}
.footer-cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:16px;width:340px}
.footer-col .ftitle{font:700 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;color:var(--deep-void)}
.footer-col p,.footer-col a{font:400 14px/20px var(--font-sans);letter-spacing:.0357em;color:var(--deep-void);opacity:.85}
.footer-col a{display:block;text-decoration:underline;transition:opacity .15s var(--ease)}
.footer-col a:hover{opacity:1}
.footer-sep{height:1px;background:var(--deep-void);opacity:.25;border:0}
.footer-bottom{display:flex;flex-direction:column;gap:24px}
.social-row{display:flex;gap:12px}
.social-btn{width:32px;height:32px;border-radius:50%;background:var(--deep-void);display:flex;align-items:center;justify-content:center;transition:transform .15s var(--ease),background-color .15s var(--ease)}
.social-btn:hover{transform:translateY(-3px);background:var(--dark-circuit)}
.social-btn svg{width:16px;height:16px}

/* -------------------------------------------------------- back-to-top -- */
#back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:48px;height:48px;border-radius:50%;
  background:var(--dark-circuit);border:1px solid var(--neon-aqua);color:var(--neon-aqua);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s,background-color .15s var(--ease);
}
#back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
#back-to-top:hover{background:var(--midnight-steel);transform:translateY(-3px)}
#back-to-top svg{width:18px;height:18px}
@media (max-width:900px){#back-to-top{right:16px;bottom:16px;width:44px;height:44px}}
.footer-bottom .copyright{display:flex;justify-content:space-between;align-items:center;font:400 14px/20px var(--font-sans);color:var(--deep-void);opacity:.85}

/* ------------------------------------------------------------- steps -- */
.steps-section{padding:120px var(--gutter);display:flex;flex-direction:column;gap:64px;background:var(--deep-void)}
.steps-label{font:700 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;color:var(--neon-aqua)}
.steps-grid{display:flex;gap:20px;flex-wrap:wrap}
.step-card{flex:1 1 160px;min-width:0;background:var(--dark-circuit);border:1px solid var(--midnight-steel);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:20px;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.step-card:hover{border-color:var(--neon-aqua);transform:translateY(-4px)}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-num{font:700 28px var(--font-sans);letter-spacing:.05em;color:var(--neon-aqua)}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--midnight-steel)}
.step-card h4{font:700 18px var(--font-sans);color:var(--white-signal)}
.step-card p{font:400 17px/26px var(--font-sans);color:var(--white-signal)}

/* --------------------------------------------------------- detailed steps -- */
.detail-section{padding:120px var(--gutter);background:var(--deep-void);display:flex;flex-direction:column;gap:64px}
.detail-row{display:flex;gap:80px;padding:64px 0;border-top:1px solid var(--midnight-steel)}
.detail-row:first-of-type{border-top:1px solid var(--midnight-steel)}
.detail-left{width:340px;flex:none;display:flex;flex-direction:column;gap:12px}
/* unscoped so it also styles Step 03/04's badge-row .step-tag — was
   .detail-left-only, so those two got no color/size/case at all */
.step-tag{font:700 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;color:var(--neon-aqua)}
.detail-left h3{font:700 32px/1.2 var(--font-sans);color:var(--white-signal)}
.detail-right{flex:1;display:flex;flex-direction:column;gap:36px}
.detail-right p{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--white-signal)}
.detail-right strong{color:var(--white-signal);font-weight:700}

.guidelines-card{background:var(--dark-circuit);border:1px solid var(--digital-teal);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px}
.guidelines-card .gtitle{font:700 16px/24px var(--font-sans);color:var(--white-signal)}
.guidelines-card ul{display:flex;flex-direction:column;gap:8px}
.guidelines-card li{font:400 17px var(--font-sans);color:var(--white-signal)}
.guidelines-card b{color:var(--bright-cyan)}

.submission-steps{display:flex;flex-direction:column;gap:16px}
.sub-step{background:var(--dark-circuit);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.sub-step .lbl{font:700 16px/24px var(--font-sans);letter-spacing:.0625em;color:var(--bright-cyan)}
.sub-step .txt{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--white-signal)}

.timeline-row{display:flex;gap:16px;flex-wrap:wrap}
.timeline-box{flex:1 1 140px;min-width:0;padding:16px 20px;border-radius:16px;background:var(--dark-circuit);display:flex;flex-direction:column;gap:8px}
.timeline-box.extended{border:1px solid var(--midnight-steel)}
.timeline-box.final{background:var(--digital-teal);border:1px solid var(--neon-aqua)}
.timeline-box .tl-cap{font:400 12px/16px var(--font-sans);letter-spacing:.125em;text-transform:uppercase;color:var(--muted-cyan)}
.timeline-box.extended .tl-cap{color:var(--digital-teal)}
.timeline-box.final .tl-cap{color:var(--neon-aqua)}
.timeline-box .tl-date{font:700 16px/24px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;color:var(--muted-cyan)}
.timeline-box.extended .tl-date{color:var(--pale-glow)}
.timeline-box.final .tl-date{color:var(--dark-circuit)}

.program-block{display:flex;flex-direction:column;gap:16px}
.program-header h5{font:700 13px var(--font-sans);color:var(--neon-aqua);text-transform:uppercase;letter-spacing:.05em}
.program-block p{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--white-signal)}

.pro-program{background:var(--dark-circuit);border:1px solid var(--digital-teal);border-left:4px solid var(--digital-teal);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:16px}
.pro-program h5{font:700 13px var(--font-sans);color:var(--digital-teal);text-transform:uppercase;letter-spacing:.05em}
.pro-program .subtle{font:700 11px var(--font-sans);color:var(--muted-cyan);text-transform:uppercase}
.pro-program p{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--white-signal)}
.pro-links{display:flex;gap:10px;flex-wrap:wrap}

/* matched to .detail-row/.detail-left exactly — was gap:64/pad:0 and
   gap:20, vs .detail-row's gap:80/pad:64px 0 and .detail-left's gap:12,
   so steps 03/04 had visibly different spacing from 01/02 */
.closing-step{display:flex;gap:80px;padding:64px 0;flex-wrap:wrap}
.closing-half{width:340px;flex:none;display:flex;flex-direction:column;gap:12px}
.closing-half .badge-row{display:flex;align-items:center;gap:10px}
.closing-half .rule{width:16px;height:1px;background:var(--midnight-steel)}
.closing-half h4{font:700 32px/1.2 var(--font-sans);color:var(--white-signal)}

.final-steps{display:flex;flex-direction:column;gap:12px}
.final-step{background:var(--dark-circuit);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.final-step .lbl{font:700 13px var(--font-sans);letter-spacing:.02em;text-transform:uppercase;color:var(--neon-aqua)}
.final-step .lbl.cyan{color:var(--bright-cyan)}
.final-step .txt{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--white-signal)}
.final-step b{color:var(--white-signal)}

.edas-card{background:var(--dark-circuit);border:1px solid var(--neon-aqua);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.edas-card h5{font:700 13px var(--font-sans);color:var(--neon-aqua);text-transform:uppercase}
.check-row{display:flex;align-items:center;gap:8px}
.check-row .dot{width:4px;height:4px;border-radius:50%;background:var(--bright-cyan)}
.check-row span{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--white-signal)}

.visa-note{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;background:var(--midnight-steel);border:1px solid var(--neon-aqua);border-radius:8px;width:fit-content}
.visa-note svg{flex:none}
.visa-note span{font:400 17px/26px var(--font-sans);color:var(--white-signal)}
.visa-note b{color:var(--white-signal)}

/* ------------------------------------------------------------- toggles -- */
.toggle-list{border-radius:16px;overflow:hidden}
.toggle{background:var(--dark-circuit);border-top:1px solid var(--midnight-steel)}
.toggle:first-child{border-top:0;border-radius:16px 16px 0 0}
.toggle:last-child{border-radius:0 0 16px 16px}
.toggle-header{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:24px 32px;background:none;border:0;text-align:left;color:inherit;
  transition:background-color .2s var(--ease);
}
.toggle-header:hover{background:rgba(92,235,213,.05)}
.toggle.is-open .toggle-header{background:var(--midnight-steel)}
.toggle-title{font:700 18px var(--font-sans);color:var(--white-signal)}
.toggle-sub{font:400 12px/16px var(--font-sans);letter-spacing:.125em;text-transform:uppercase;color:var(--digital-teal)}
.toggle-icon{
  width:36px;height:36px;border-radius:50%;background:rgba(92,235,213,.1);
  display:flex;align-items:center;justify-content:center;flex:none;
  font:400 18px var(--font-sans);color:var(--neon-aqua);
  transition:transform .25s var(--ease),background-color .2s var(--ease);
}
.toggle.is-open .toggle-icon{transform:rotate(180deg)}
.toggle-body{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease);
}
.toggle.is-open .toggle-body{grid-template-rows:1fr}
.toggle-body-inner{overflow:hidden}
.toggle-body-pad{padding:0 32px 32px}
.toggle.is-open .toggle-body-pad{padding-top:28px}

.subtopics-grid{display:flex;gap:40px;flex-wrap:wrap}
.subtopics-col{flex:1;min-width:260px;display:flex;flex-direction:column;gap:12px}
.subtopic-item{display:flex;gap:12px;align-items:flex-start}
.subtopic-item .bullet{width:6px;height:6px;border-radius:50%;background:var(--neon-aqua);margin-top:9px;flex:none}
.subtopic-item span{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--white-signal)}
/* sub-group label inside a long subtopics column (Energy, e-Health, etc.
   have way more items than AI and came with natural groupings in the
   source list) — same small-caps treatment as .step-tag/.eyebrow */
.subtopic-group{font:700 13px var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--neon-aqua);margin-top:4px}
.subtopic-group:first-child{margin-top:0}
.toggle-open-title{font:700 28px/1.25 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--bright-cyan);margin-bottom:24px}

.faq-body-pad{padding:0 32px 24px;display:flex;flex-direction:column;gap:16px}
.toggle.is-open .faq-body-pad{padding-top:28px}
.faq-block{display:flex;flex-direction:column;gap:8px}
.faq-block .flbl{font:600 16px/24px var(--font-sans);letter-spacing:.0625em;color:var(--neon-aqua)}
.faq-block p{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--pale-glow);white-space:pre-line}

/* ------------------------------------------------------------ venues -- */
/* same equal-width, capped sizing as the update/edition cards, so every
   card family on the site reads as one consistent system */
.venues-cards{display:flex;gap:40px;flex-wrap:wrap}
/* flex-basis lowered from 360 to 320 so two cards' hypothetical size
   (320+320+40 gap=680) still fits at tablet widths like iPad (768px) —
   wrap checks basis before shrink, so 360 was wrapping to one column
   well before it needed to */
.venue-card{flex:1 1 320px;max-width:510px;background:var(--dark-circuit);border:2px solid var(--midnight-steel);border-radius:16px;padding:30px;display:flex;flex-direction:column;gap:24px;transition:border-color .25s var(--ease)}
.venue-card:hover{border-color:var(--digital-teal)}
.venue-card img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:12px}
.venue-card h3{font:700 18px var(--font-sans);color:var(--neon-aqua)}
/* reserves 2 lines regardless of how long the address text actually is,
   so the caption below it lands on the same row across sibling cards */
.venue-card .addr{font:400 19px/29px var(--font-sans);color:var(--white-signal);min-height:58px}
.venue-card .kind{font:400 12px/16px var(--font-sans);letter-spacing:.125em;text-transform:uppercase;color:var(--digital-teal)}

/* --------------------------------------------------------- committee -- */
.committee-block{padding:120px var(--gutter);display:flex;flex-direction:column;gap:32px}
.committee-grid{display:flex;gap:16px;flex-wrap:wrap}
.committee-card{width:340px;background:var(--midnight-steel);border:1px solid rgba(92,235,213,.2);border-radius:8px;padding:16px 20px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s var(--ease),transform .2s var(--ease)}
/* no lift/bounce — these cards aren't links to anywhere */
.committee-card:hover{border-color:var(--neon-aqua)}
.committee-card.flat{background:var(--dark-circuit);border:none}
.committee-card .name{font:700 18px var(--font-sans);color:var(--white-signal)}
.committee-card .role{font:700 13px var(--font-sans);color:var(--neon-aqua)}
.committee-card .org{font:400 19px/29px var(--font-sans);letter-spacing:.0625em;color:var(--pale-glow);opacity:.8}

.exec-row{display:flex;gap:40px;flex-wrap:wrap;padding:120px var(--gutter)}
.exec-col{display:flex;flex-direction:column;gap:24px}
.exec-col .section-header{margin-bottom:0}

/* --------------------------------------------------------- responsive -- */
@media (max-width:960px){
  .plain-hero .h1{font-size:52px}
  .detail-row,.closing-step{flex-direction:column}
  /* .closing-half too — it was left at its fixed 340px, wider than the
     content column on any phone under 388px, so steps 03/04 stuck out
     past the right gutter (and past the screen at 360px and below) */
  .detail-left,.closing-half{width:100%}
  .footer-cols{flex-direction:column}
  .footer-col{width:100%}
  .subtopics-grid{flex-direction:column}
}
/* phone widths — 52px was still tight for longer titles like "Venue &
   Accommodation" once the gutter has also collapsed */
@media (max-width:480px){
  .plain-hero .h1{font-size:38px}
  /* the pill's two spans are nowrap flex items, so at 16px bold the
     real "Submission Deadline   March 20, 2026" text is wider than the
     phone's available width — fit-content sizing correctly caps the
     pill at full width once its content can't fit on one line, which
     is why it looked like a stretched bar instead of a compact pill */
  .tag{font-size:12px;padding:6px 10px;gap:6px}
  /* once the two buttons no longer fit on one line, matching the link's
     width to their "combined row" stops meaning anything — go full
     width and stacked instead, cleanly, rather than an orphaned width
     that matches neither button */
  .cfp-ctas{grid-template-columns:1fr;width:100%}
  .cfp-ctas-row{flex-direction:column}
  .cfp-ctas-row .btn{width:100%}
  /* "Submit Professional Long/Short Paper" are ~320px of nowrap text —
     wider than the .pro-program card's inner width on a phone, so they
     stuck out past the card's right edge (and at 320px past the screen,
     making the whole page scroll sideways). Stack them at the card's
     width and let the label wrap, centered, instead. */
  .pro-links{flex-direction:column}
  .pro-links .btn{width:100%;white-space:normal;text-align:center}
  /* same fixed-340px problem on the committee page: let the cards
     shrink to the column instead of running past the screen edge.
     .exec-col needs the cap as well — as a flex item it is as wide as
     its widest card, so the card's own max-width had nothing narrower
     to be a percentage of */
  .committee-card,.exec-col{max-width:100%}
}
/* "Accommodation" alone is 305px wide at 38px — more than the 272px
   column of a 320px phone */
@media (max-width:360px){.plain-hero .h1{font-size:32px}}
/* venues-cards already flex-wraps naturally — it only needs to be forced
   to one column once two 360px cards genuinely can't sit side by side
   (was forced at 960px, which stacked it through the whole tablet range,
   e.g. iPad, for no reason) */
@media (max-width:700px){
  .venues-cards{flex-direction:column}
  /* full width instead of a capped card left-aligned with dead space
     next to it once it's down to one column */
  .venue-card{max-width:none}
}

/* the desktop vertical-spacing doubling reads as way too much air once
   the gutter has also collapsed down to mobile size — scale it back.
   One shared value for every section wrapper, same as the desktop rule
   above — six different numbers here was the same "why doesn't this
   match" bug as the desktop values, just at a second breakpoint. */
@media (max-width:900px){
  .plain-hero{min-height:0}
  .plain-hero-inner,
  .section-pad,
  .partners,
  .stats,
  .desc-panel,
  .image-banner,
  .about-panel,
  .footer-inner,
  .steps-section,
  .detail-section,
  .committee-block,
  .exec-row{padding-top:64px;padding-bottom:64px}
  .detail-row{padding-top:32px;padding-bottom:32px;gap:32px}
  .step-card{flex-basis:100%}
}

/* ---------- Previous sponsors (under the 2026 co-sponsors, above the stats strip) ---------- */
.past-sponsors-section{padding:0 var(--gutter) 120px;display:flex;flex-direction:column;gap:32px;background:var(--deep-void)}
#past-sponsors{scroll-margin-top:96px}
.past-sponsors{padding:24px 0;border-top:1px solid var(--midnight-steel);border-bottom:1px solid var(--midnight-steel)}
.past-sponsors-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 40px;align-items:center}
.past-sponsors-grid li{height:64px;display:flex;align-items:center}
.past-sponsors-grid img{height:52px;width:auto;max-width:100%;object-fit:contain;object-position:left center;filter:grayscale(1)}
/* stats strip scaled down to the logo row when it follows previous sponsors */
.past-sponsors-section + .stats{padding-top:24px;padding-bottom:96px}
.past-sponsors-section + .stats .stats-row{gap:48px;padding-right:48px}
.past-sponsors-section + .stats .stat{gap:12px;align-items:center;height:52px}
.past-sponsors-section + .stats .stat .num{font-size:36px}
.past-sponsors-section + .stats .stat .lbl{font-size:18px;line-height:24px}
@media (max-width:900px){
  .past-sponsors-section{padding:0 var(--gutter) 64px}
  .past-sponsors-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
  .past-sponsors-grid li{height:48px}
  .past-sponsors-grid img{height:40px}
  .past-sponsors-section + .stats .stat{height:36px}
  .past-sponsors-section + .stats .stat .num{font-size:26px}
  .past-sponsors-section + .stats .stat .lbl{font-size:14px}
}

/* ---------- Committee (homepage, between Journals and Previous editions) ---------- */
/* every chair is a compact row: small photo on the left, role / name /
   affiliation beside it. As photo cards the 15 of them ran to more than
   a screen on a desktop and three on a phone. The section itself is not
   .reveal: a .reveal too tall for 12% of it to fit the viewport never
   intersects and stays at opacity 0 with everything in it, so the rows
   reveal one by one instead */
/* as many columns of at least 290px as fit, so a name always has room
   whatever the gutter is doing at that width. The max() term caps it at
   three (a third of the row, less the two 32px gaps, once that is the
   larger): 15 chairs fill three columns exactly. min(...,100%) lets the
   single column shrink on a screen narrower than 290px */
.chair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(min(290px,100%),calc((100% - 64px) / 3)),1fr));gap:28px 32px;margin-bottom:48px}
/* the 1fr rows above and below the three text lines keep the text
   centred on the photo whatever it wraps to */
.chair-card{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:20px;row-gap:2px}
/* the 2026 photos are square, portrait and landscape, so each is cropped
   to one frame; weighted to the top so a portrait keeps the head */
.chair-card img{grid-row:1 / -1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;border-radius:8px;background:var(--shadow-teal)}
.chair-card .role{grid-area:2 / 2;font:400 12px/16px var(--font-sans);letter-spacing:.125em;text-transform:uppercase;color:var(--digital-teal)}
.chair-card .name{grid-area:3 / 2;font:700 18px/1.25 var(--font-sans);color:var(--white-signal)}
.chair-card .org{grid-area:4 / 2;font:400 14px/20px var(--font-sans);letter-spacing:.0357em;color:var(--pale-glow);opacity:.8}
@media (max-width:1000px){
  .chair-grid{gap:20px 24px}
  .chair-card{grid-template-columns:72px minmax(0,1fr);column-gap:16px}
  .chair-card .name{font-size:16px}
}
@media (max-width:640px){.chair-grid{gap:16px}}

/* ---------- Technical Program Committee (homepage, under the chairs) ---------- */
/* the 169 names used to expand in place at body size: five screens of
   page on a desktop, sixteen on a phone. They open in a modal <dialog>
   instead, with its own scroll and a filter (js/tpc-dialog.js), so the
   page never gets longer. The bar borrows the accordion row's
   .toggle-title / .toggle-sub / .toggle-icon so it still reads as one */
.tpc-bar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 32px;border:0;border-radius:16px;background:var(--dark-circuit);color:inherit;text-align:left;transition:background-color .2s var(--ease)}
.tpc-bar:hover{background:var(--midnight-steel)}
.tpc-bar-text{display:flex;flex-direction:column;gap:6px}
.tpc-bar-cta{display:flex;align-items:center;gap:16px;flex:none;font:700 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;color:var(--neon-aqua)}
/* fixed height, so the panel does not resize as the filter narrows the
   list. padding:0 matters: a click that lands on the <dialog> itself is
   then always the backdrop, which is how the script closes it */
.tpc-dialog{width:min(1120px,calc(100vw - 48px));max-width:none;height:min(820px,calc(100vh - 48px));height:min(820px,calc(100dvh - 48px));max-height:none;padding:0;border:1px solid var(--midnight-steel);border-radius:16px;background:var(--dark-circuit);color:var(--white-signal);color-scheme:dark;overflow:hidden}
/* [open] only: display on the bare selector would show the closed dialog */
.tpc-dialog[open]{display:flex;flex-direction:column}
.tpc-dialog::backdrop{background:rgba(10,15,20,.8);backdrop-filter:blur(6px)}
.tpc-head{flex:none;display:flex;flex-direction:column;gap:20px;padding:28px 32px 20px;border-bottom:1px solid var(--midnight-steel)}
.tpc-head-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tpc-title{font:700 28px/1.25 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--white-signal)}
.tpc-close{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(92,235,213,.1);color:var(--neon-aqua);transition:background-color .2s var(--ease)}
.tpc-close:hover{background:rgba(92,235,213,.2)}
.tpc-close svg{width:16px;height:16px}
.tpc-search-row{display:flex;align-items:center;gap:16px}
/* 16px text: anything smaller makes iOS zoom the page on focus */
.tpc-search{flex:1;min-width:0;height:48px;padding:0 20px;border:1px solid var(--midnight-steel);border-radius:100px;background:var(--deep-void);color:var(--white-signal);font:400 16px/24px var(--font-sans);letter-spacing:.02em;outline:0;transition:border-color .2s var(--ease)}
.tpc-search::placeholder{color:var(--digital-teal);opacity:.8}
.tpc-search:focus{border-color:var(--neon-aqua)}
.tpc-status{flex:none;min-width:96px;text-align:right;font:400 12px/16px var(--font-sans);letter-spacing:.125em;text-transform:uppercase;color:var(--digital-teal)}
/* rows fill left to right, so the alphabetical order reads across and the
   list scrolls as one. overscroll-behavior stops the page behind taking
   over when the list hits either end */
.tpc-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--muted-cyan) transparent;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;align-content:start;padding:8px 32px 24px}
.tpc-list li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--midnight-steel)}
/* display:flex above outranks the browser's own [hidden] rule */
.tpc-list[hidden],.tpc-list li[hidden]{display:none}
.tpc-name{font:600 15px/22px var(--font-sans);letter-spacing:.02em;color:var(--white-signal)}
.tpc-org{font:400 13px/18px var(--font-sans);letter-spacing:.02em;color:var(--pale-glow);opacity:.75}
.tpc-empty{padding:64px 32px;text-align:center;font:400 16px/24px var(--font-sans);letter-spacing:.02em;color:var(--pale-glow)}
@media (prefers-reduced-motion:no-preference){
  .tpc-dialog[open]{animation:tpc-in .25s var(--ease)}
  .tpc-dialog[open]::backdrop{animation:tpc-fade .25s var(--ease)}
}
@keyframes tpc-in{from{opacity:0;transform:translateY(16px)}}
@keyframes tpc-fade{from{opacity:0}}
@media (max-width:1000px){.tpc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones: the dialog is the whole screen, one name per row */
@media (max-width:640px){
  .tpc-bar{padding:20px 24px}
  .tpc-bar-label{display:none}
  .tpc-dialog{width:100vw;height:100vh;height:100dvh;border:0;border-radius:0}
  .tpc-head{gap:16px;padding:20px 20px 16px}
  .tpc-title{font-size:20px}
  .tpc-search-row{flex-direction:column;align-items:stretch;gap:10px}
  .tpc-search{flex:none}
  .tpc-status{text-align:left}
  .tpc-list{grid-template-columns:minmax(0,1fr);padding:4px 20px 20px}
  .tpc-list li{padding:10px 0}
}

/* ---------- Organized by (homepage strip between the hero and the co-sponsors) ---------- */
/* no bottom padding: .partners below brings its own 120px, the same way
   .past-sponsors-section leaves its top to .partners */
.organizers-section{padding:120px var(--gutter) 0;display:flex;flex-direction:column;gap:32px;background:var(--deep-void)}
.org-logos{display:flex;flex-wrap:wrap;align-items:center;gap:32px 64px}
/* one shared height, each logo as wide as its own aspect ratio; contain
   so a logo capped by max-width on a phone letterboxes, not stretches */
.org-logos img{height:72px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
/* the Split tourist board logo is the only one supplied in colour (blue)
   and the only portrait one: shown white like the rest, as the 2026 site
   did, and at the full row height so it is not a sliver */
.past-sponsors-grid img.logo-tz-split{height:64px;filter:brightness(0) invert(1)}
/* logos stacked as a mark over small text: at the 52px logo height the
   text is unreadable, so they take the full row height as well */
.past-sponsors-grid img.logo-tall{height:64px}
@media (max-width:900px){
  .organizers-section{padding:64px var(--gutter) 0}
  .org-logos img{height:56px}
  .past-sponsors-grid img.logo-tz-split{height:48px}
  .past-sponsors-grid img.logo-tall{height:48px}
}

/* ---------- Supporters (under the previous sponsors, above the stats strip) ---------- */
/* the section reuses .past-sponsors-section and the sponsors grid, so the
   .past-sponsors-section + .stats rules still match the strip below it.
   The three logos are supplied in yellow, black and full colour: shown
   white, as the 2026 site did */
.supporters-grid img{filter:brightness(0) invert(1)}

/* ---------- Previous sponsors carousel (homepage) ---------- */
/* 52 logos made the grid nine rows deep: one row that loops sideways
   instead. sponsor-marquee.js doubles the list and adds .is-running;
   without it the row scrolls by hand. Spacing is padding on each li, not
   gap, so the doubled list is exactly twice as wide and -50% loops clean. */
.sponsor-marquee{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sponsor-marquee::-webkit-scrollbar{display:none}
.sponsor-marquee.is-running{overflow:hidden}
.sponsor-marquee .past-sponsors-grid{display:flex;flex-wrap:nowrap;width:max-content;gap:0}
.sponsor-marquee .past-sponsors-grid li{flex:none;padding-right:64px}
.sponsor-marquee .past-sponsors-grid img{max-width:none}
.sponsor-marquee.is-running .past-sponsors-grid{animation:sponsor-marquee 180s linear infinite}
.sponsor-marquee.is-running:hover .past-sponsors-grid{animation-play-state:paused}
@keyframes sponsor-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:900px){.sponsor-marquee .past-sponsors-grid li{padding-right:40px}}

/* hero "12th" links to the previous editions page */
.hero-edition-link{color:inherit;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.hero-edition-link:hover{color:var(--neon-aqua)}

/* ---------- Previous editions page ---------- */
/* Editions | Sponsors: text on a shared line, not buttons. The active tab
   is bold aqua with its own underline sitting on the line */
.edition-tabs{display:flex;gap:40px;margin:64px var(--gutter) 0;border-bottom:1px solid var(--midnight-steel)}
.edition-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 0 16px;cursor:pointer;font:400 20px/28px var(--font-sans);text-transform:uppercase;letter-spacing:.0625em;color:var(--white-signal)}
.edition-tab[aria-selected="true"]{font-weight:700;color:var(--neon-aqua);border-bottom-color:var(--neon-aqua)}
.edition-tab:focus-visible{outline:2px solid var(--neon-aqua);outline-offset:4px}
.page-editions #editions,
.page-editions #past-sponsors{padding-top:48px}
.page-editions [data-panel].is-hidden{display:none}
/* editions with only a logo (2018, 2019): shown whole on the card colour */
.edition-card img.edition-cover-logo{object-fit:contain;padding:12%;background:var(--deep-void)}
/* editions with no image at all (2016, 2017, 2020, 2021): the ordinal,
   in the same 5:4 box as the images so every card lines up */
.edition-cover-num{width:100%;aspect-ratio:5/4;border-radius:8px;background:var(--deep-void);display:flex;align-items:center;justify-content:center;font:800 64px/1 var(--font-sans);text-transform:uppercase;color:var(--neon-aqua)}
/* homepage: link from the editions row to the full page */
.editions-view-all{align-self:flex-start}

/* Organized by + Co-sponsored by on one line: the row owns the padding
   that the two sections had on their own; they stack again on phones */
.org-partners-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:48px 96px;padding:60px var(--gutter);background:var(--deep-void)}
.org-partners-row .organizers-section,
.org-partners-row .partners{padding:0}
/* organizer and co-sponsor logos share one height: at the organizers'
   72px both groups need ~1190px and wrap inside the 1120px content width */
.org-partners-row .org-logos img,
.org-partners-row .partners-row img{height:60px}
@media (max-width:900px){
  .org-partners-row{padding:32px var(--gutter)}
  .org-partners-row .org-logos img,
  .org-partners-row .partners-row img{height:48px}
}

/* ---------- Speakers (homepage, after the About panel) ---------- */
/* Keynote | Plenary use the same text-on-a-line tabs as the editions page */
.speaker-tabs{display:flex;gap:40px;margin-bottom:40px;border-bottom:1px solid var(--midnight-steel)}
/* one row per tab, 3 cards across on desktop; the rest scroll sideways */
.speaker-track{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 32px) / 3);gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.speaker-track::-webkit-scrollbar{display:none}
.speaker-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:16px;background:var(--dark-circuit);border:2px solid var(--midnight-steel)}
/* photo slot: placeholder mark until real photos arrive; the aqua bar
   under it is the accent from the 2026 speaker cards */
.speaker-photo{aspect-ratio:5/4;margin-bottom:16px;border-radius:8px 8px 0 0;border-bottom:4px solid var(--neon-aqua);background:var(--deep-void);display:flex;align-items:center;justify-content:center;overflow:hidden}
.speaker-photo img{width:60%;height:auto;opacity:.3}
.speaker-photo img[src$=".jpg"],
.speaker-photo img[src$=".png"]{width:100%;height:100%;object-fit:cover;opacity:1}
.speaker-role{margin:0;font:400 14px/20px var(--font-sans);letter-spacing:.0625em;color:var(--neon-aqua)}
.speaker-name{margin:0;font:700 22px/1.2 var(--font-sans);color:var(--white-signal)}
.speaker-org{margin:8px 0 0;font:400 14px/20px var(--font-sans);color:var(--digital-teal)}
.speaker-talk{margin:0;font:400 15px/22px var(--font-sans);color:var(--pale-glow)}
/* arrows on the left, View more on the right; View more stays put when
   the arrows hide (a tab whose cards all fit) */
.speaker-foot{display:flex;align-items:center;gap:12px;margin-top:32px}
.speaker-foot .btn{margin-left:auto}
/* "View more" only when the row has at least 3 cards (team's request, 2026-10-22); with tabs, at least one tab's row must */
.card-carousel:not(:has(.card-track > :nth-child(3))) .speaker-foot .btn{display:none}
.speaker-nav{display:flex;gap:12px}
.speaker-nav[hidden]{display:none}
.speaker-arrow{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--midnight-steel);background:var(--dark-circuit);color:var(--neon-aqua);cursor:pointer;transition:background .2s var(--ease)}
.speaker-arrow:hover:not(:disabled){background:var(--midnight-steel)}
.speaker-arrow:disabled{opacity:.35;cursor:default}
@media (max-width:900px){.speaker-track{grid-auto-columns:calc((100% - 24px) / 2);gap:24px}}
@media (max-width:600px){.speaker-track{grid-auto-columns:80%}}

/* ---------- Speakers page ---------- */
/* every speaker in a plain grid, same card as the homepage row */
.speaker-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.page-speakers [data-panel]{padding-top:48px}
.page-speakers [data-panel].is-hidden{display:none}
@media (max-width:900px){.speaker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (max-width:600px){.speaker-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Symposia (homepage, under the speakers) ---------- */
/* same tabs, row and arrows as the speakers (card-carousel.js); one tab per
   symposium, one card per special session / poster session / workshop */
.symposium-name{margin:0 0 24px;font:400 16px/24px var(--font-sans);color:var(--pale-glow);max-width:860px}
.symposium-name a{color:var(--neon-aqua);margin-left:8px;white-space:nowrap}
.symposium-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:16px;background:var(--dark-circuit);border:2px solid var(--midnight-steel)}
.symposium-title{margin:0;font:700 20px/1.25 var(--font-sans);color:var(--white-signal)}
/* intros run 300-650 characters: cut at six lines so the row stays even;
   the full text is in each flyer */
.symposium-text{margin:0;font:400 15px/22px var(--font-sans);color:var(--pale-glow);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.symposium-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:12px}
/* cards with people and a one-sentence intro; the whole card opens the
   dialog, the title is the keyboard-focusable trigger */
.symposia-tabs{flex-wrap:wrap;row-gap:12px}
.symposium-card{cursor:pointer;transition:border-color .25s var(--ease)}
.symposium-card:hover{border-color:var(--digital-teal)}
.symposium-open{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.symposium-open:focus-visible{outline:2px solid var(--neon-aqua);outline-offset:4px;border-radius:4px}
.symposium-sub{margin:-4px 0 0;font:400 14px/20px var(--font-sans);color:var(--digital-teal)}
.symposium-text{-webkit-line-clamp:4}
.symposium-chair{color:var(--digital-teal)}
.symposium-people{list-style:none;margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--midnight-steel);display:flex;flex-direction:column;gap:8px}
.symposium-people li{display:flex;flex-direction:column;gap:1px}
.symposium-person{font:600 15px/20px var(--font-sans);color:var(--white-signal)}
.symposium-person-role{font:400 13px/18px var(--font-sans);color:var(--digital-teal)}
.symposium-more{font:400 13px/18px var(--font-sans);color:var(--neon-aqua)}
/* the dialog reuses the committee dialog's frame (.tpc-dialog), sized to
   its content instead of the fixed list height */
.symposium-dialog{width:min(820px,calc(100vw - 48px));height:auto;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
.symposium-dialog-title{margin:0;font:700 24px/1.25 var(--font-sans);color:var(--white-signal)}
.symposium-dialog-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 32px 32px;display:flex;flex-direction:column;gap:24px}
.symposium-dialog-body .symposium-people{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.symposium-body{display:flex;flex-direction:column;gap:12px}
.symposium-body p{margin:0;font:400 15px/24px var(--font-sans);color:var(--pale-glow)}
.symposium-dialog-body .symposium-links{margin:0;padding:0}
@media (max-width:640px){
  .symposium-dialog{width:100vw;max-height:none;height:100vh;height:100dvh}
  .symposium-dialog-body{padding:20px}
  .symposium-dialog-body .symposium-people{grid-template-columns:minmax(0,1fr)}
}
.symposium-dialog-body [data-sd="full"]{display:flex;flex-direction:column;gap:24px}

/* ---------- Section rhythm (all pages) ---------- */
/* one vertical space for every section wrapper instead of 120px set ten
   times over: sections now sit 2 x --section-y apart (112px desktop, 64px
   phones), the logo strips under the hero included, and the footer keeps
   the same distance from the last section */
:root{--section-y:56px}
@media (max-width:900px){:root{--section-y:32px}}
.section-pad,
.partners,
.stats,
.desc-panel,
.image-banner,
.about-panel,
.steps-section,
.detail-section,
.committee-block,
.exec-row,
.org-partners-row{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.past-sponsors-section{padding-bottom:var(--section-y)}
.past-sponsors-section + .past-sponsors-section,
.org-partners-row + .past-sponsors-section{padding-top:var(--section-y)}
.footer{margin-top:var(--section-y)}

/* ---------- Programme page ---------- */
/* day tabs on the shared text-on-a-line style, with the date under each */
.prog-tabs{margin:0 0 40px;flex-wrap:wrap;row-gap:12px}
.prog-tabs .edition-tab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.prog-tab-date{font:400 13px/18px var(--font-sans);letter-spacing:.02em;text-transform:none;color:var(--digital-teal)}
.prog-tab-mine{margin-left:auto}
/* filters in their own card on the left, the day on the right; the
   sidebar sticks while the day scrolls */
.prog-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:64px;align-items:start}
.prog-filters{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:16px;background:var(--dark-circuit);border:2px solid var(--midnight-steel)}
.prog-filters-title{margin:0;font:700 13px/18px var(--font-sans);letter-spacing:.0625em;text-transform:uppercase;color:var(--neon-aqua)}
.prog-group{border-top:1px solid var(--midnight-steel);padding-top:12px}
.prog-group summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;font:600 15px/22px var(--font-sans);color:var(--white-signal)}
.prog-group summary::-webkit-details-marker{display:none}
.prog-group summary::after{content:"+";font-weight:400;color:var(--neon-aqua)}
.prog-group[open] summary::after{content:"\2212"}
.prog-group-count{margin-right:auto;font-weight:400;color:var(--neon-aqua)}
/* one option per line, so no value is left stranded at the end of a row */
.prog-checks{display:flex;flex-direction:column;gap:2px;padding-top:8px}
.prog-check{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;font:400 14px/20px var(--font-sans);color:var(--pale-glow)}
.prog-check input{appearance:none;flex:none;width:16px;height:16px;margin:0;border:1.5px solid var(--digital-teal);border-radius:4px;display:grid;place-content:center;cursor:pointer}
.prog-check input::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--deep-void);transform:scale(0);transition:transform .15s var(--ease)}
.prog-check input:checked{background:var(--neon-aqua);border-color:var(--neon-aqua)}
.prog-check input:checked::before{transform:scale(1)}
.prog-check input:focus-visible{outline:2px solid var(--neon-aqua);outline-offset:2px}
.prog-check:hover{color:var(--white-signal)}
.prog-clear{align-self:flex-start;appearance:none;background:none;border:0;padding:0;cursor:pointer;font:400 14px/20px var(--font-sans);color:var(--neon-aqua);text-decoration:underline}
.prog-clear[hidden]{display:none}
.prog-note{margin:0;font:400 13px/18px var(--font-sans);color:var(--digital-teal)}
.prog-day{display:flex;flex-direction:column;gap:12px}
.prog-day[hidden]{display:none}
.prog-day-head{margin:0 0 8px;font:400 16px/24px var(--font-sans);color:var(--pale-glow)}
.prog-day-head strong{color:var(--white-signal)}
.prog-mine-list{display:flex;flex-direction:column;gap:12px}
.prog-mine-list .prog-day-head{margin-top:24px}
.prog-mine-list .prog-day-head:first-child{margin-top:0}
/* a slot groups the sessions that run in parallel; the time sits in the
   top row of every card, so it never drifts away from its session */
.prog-slot{display:flex;flex-direction:column;gap:12px}
.prog-slot[hidden]{display:none}
.prog-item{display:flex;flex-direction:column;gap:10px;padding:20px 24px;border-radius:16px;background:var(--dark-circuit);border:2px solid var(--midnight-steel);transition:border-color .25s var(--ease)}
.prog-item[hidden]{display:none}
.prog-item.is-saved{border-color:var(--neon-aqua)}
.prog-item-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.prog-when{margin:0;font:700 18px/24px var(--font-sans);color:var(--white-signal)}
.prog-when span{margin-left:10px;font-weight:400;font-size:13px;color:var(--digital-teal)}
.prog-tag{margin:0;font:400 13px/18px var(--font-sans);letter-spacing:.0625em;color:var(--neon-aqua)}
.prog-room{padding:3px 10px;border-radius:100px;background:var(--neon-aqua);font:700 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--deep-void)}
.prog-title{margin:0;font:700 20px/1.3 var(--font-sans);color:var(--white-signal)}
.prog-code{color:var(--neon-aqua)}
.prog-people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.prog-people li{display:flex;flex-direction:column}
.prog-person{font:600 15px/20px var(--font-sans);color:var(--white-signal)}
.prog-person-role{font:400 13px/18px var(--font-sans);color:var(--digital-teal)}
.prog-desc{margin:0;font:400 15px/22px var(--font-sans);color:var(--pale-glow)}
/* save: a bookmark pill, outlined until saved, then filled */
.prog-add{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:8px 16px;border:1px solid var(--neon-aqua);border-radius:100px;background:transparent;cursor:pointer;font:700 13px/18px var(--font-sans);letter-spacing:.04em;color:var(--neon-aqua);transition:background-color .2s var(--ease),color .2s var(--ease)}
.prog-add:hover{background:rgba(92,235,213,.12)}
.prog-add:focus-visible{outline:2px solid var(--neon-aqua);outline-offset:3px}
.prog-add .prog-add-off{display:none}
.prog-add[aria-pressed="true"]{background:var(--neon-aqua);color:var(--deep-void)}
.prog-add[aria-pressed="true"] .prog-add-icon path{fill:currentColor}
.prog-add[aria-pressed="true"] .prog-add-on{display:none}
.prog-add[aria-pressed="true"] .prog-add-off{display:inline}
/* breaks: a quiet line, no card */
.prog-break{padding:14px 24px;border-radius:12px;border:1px dashed var(--midnight-steel);font:400 15px/22px var(--font-sans);color:var(--pale-glow)}
.prog-break-time{font-weight:700;color:var(--white-signal);margin-right:16px}
.prog-break[hidden]{display:none}
.prog-break-room{color:var(--digital-teal);margin-left:8px}
.prog-empty{margin:0;padding:32px 0;font:400 16px/24px var(--font-sans);color:var(--pale-glow)}
.prog-empty[hidden]{display:none}
@media (max-width:900px){
  .prog-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .prog-filters{position:static}
  .prog-tab-mine{margin-left:0}
}
/* the symposium's own card leads its tab, marked by the aqua frame */
.symposium-card-lead .speaker-role,.speaker-role-sub{align-self:flex-start;padding:4px 10px;border-radius:999px;font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.08em}
.symposium-card-lead .speaker-role{background:var(--neon-aqua);color:var(--deep-void);font-weight:700}
.speaker-role-sub{border:1px solid rgba(232,255,252,.35);color:rgba(232,255,252,.7)}
/* in the Special Sessions tab the label is filled, like the symposium one */
#symposia-special .speaker-role-sub{border-color:transparent;background:var(--neon-aqua);color:var(--deep-void);font-weight:700}
/* the filter card can outgrow the screen: it scrolls on its own so its
   bottom stays reachable while it sticks */
.prog-filters{max-height:calc(100vh - var(--nav-h) - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media (max-width:900px){.prog-filters{max-height:none;overflow:visible}}
/* homepage Updates: link to the full list, same button as the other rows */
.updates-view-more{margin-top:40px}
/* calendar icon: a plus until the session is added, then a tick */
.prog-add .prog-add-tick{display:none}
.prog-add[aria-pressed="true"] .prog-add-plus{display:none}
.prog-add[aria-pressed="true"] .prog-add-tick{display:inline}
.prog-add[aria-pressed="true"] .prog-add-icon path{fill:none}
.prog-mine-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:12px}
.prog-mine-tools[hidden]{display:none}
/* programme cards: 50% more room inside (padding 20/24 to 30/36, gaps up
   by half) and a hairline above the speakers so they read as their own
   block, apart from the title above and the description below */
.prog-item{padding:30px 36px;gap:16px}
.prog-tag{margin-top:2px}
.prog-title{margin-bottom:4px}
.prog-people{gap:14px 36px;padding:16px 0;border-top:1px solid var(--midnight-steel);border-bottom:1px solid var(--midnight-steel)}
.prog-people li{gap:2px}
.prog-add{margin-top:8px}
.prog-break{padding:20px 36px}
@media (max-width:900px){
  .prog-item{padding:24px;gap:14px}
  .prog-break{padding:16px 24px}
}
.prog-mine-empty{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.prog-mine-empty p{margin:0}

/* ---------- Tabs: smaller at every width ---------- */
/* the text-on-a-line tabs (editions, speakers, symposia, programme days)
   were 20px caps; 16px on desktop, 13px on phones. On phones each row stays
   on one line and scrolls sideways instead of wrapping into a stack; the
   line under the row is an inset shadow there, since a scrolling row would
   clip the active tab's underline sitting 1px over a real border */
.edition-tab{font-size:16px;line-height:24px;padding-bottom:12px}
.edition-tabs,.speaker-tabs{gap:32px}
.speaker-tabs{margin-bottom:32px}
.page-editions .edition-tabs{margin-top:48px}
@media (max-width:640px){
  .edition-tabs,.speaker-tabs,.symposia-tabs,.prog-tabs{flex-wrap:nowrap;gap:24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;border-bottom:0;box-shadow:inset 0 -1px 0 var(--midnight-steel)}
  .edition-tabs::-webkit-scrollbar,.speaker-tabs::-webkit-scrollbar{display:none}
  .edition-tab{flex:none;margin-bottom:0;padding-bottom:10px;font-size:13px;line-height:20px;letter-spacing:.05em;white-space:nowrap}
  .speaker-tabs{margin-bottom:24px}
  .prog-tab-date{font-size:12px;line-height:16px}
}

/* ---------- Update article (one page per update) ---------- */
/* update cards are links: the whole card opens the article */
a.card-flat{color:inherit;text-decoration:none}
a.card-flat:focus-visible{outline:2px solid var(--neon-aqua);outline-offset:4px}
.update-article{max-width:760px;display:flex;flex-direction:column;gap:24px}
.update-back{align-self:flex-start;font:400 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;color:var(--neon-aqua);text-decoration:none}
.update-back:hover{text-decoration:underline}
.update-date{margin:0;font:400 14px/20px var(--font-sans);letter-spacing:.0357em;text-transform:uppercase;color:var(--muted-cyan)}
.update-title{margin:0;font:800 48px/1.1 var(--font-sans);text-transform:uppercase;color:var(--white-signal)}
.update-cover{width:100%;aspect-ratio:16/9;border-radius:16px;background:linear-gradient(160deg,var(--midnight-steel),var(--digital-teal))}
/* a real cover photo is shown whole at its own aspect ratio, not cropped to the 16:9 placeholder box (team's request, 2026-10-22) */
img.update-cover{aspect-ratio:auto;height:auto}
.update-body{display:flex;flex-direction:column;gap:16px}
.update-body p{margin:0;font:400 17px/28px var(--font-sans);color:var(--pale-glow)}
.update-body h2{margin:16px 0 0;font:700 22px/1.25 var(--font-sans);color:var(--white-signal)}
.update-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font:400 17px/28px var(--font-sans);color:var(--pale-glow)}
.update-body strong{color:var(--white-signal);font-weight:600}
.update-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:640px){
  .update-article{gap:20px}
  .update-title{font-size:30px}
  .update-cover{border-radius:12px}
  .update-body p,.update-body ul{font-size:16px;line-height:26px}
}

/* ---------- Conference Chairs toggle (homepage) ---------- */
/* six chairs show (two rows of three on desktop), the button opens the rest */
.chair-grid.is-collapsed > :nth-child(n+7){display:none}
.chair-toggle{margin:-16px 0 48px}
.chair-toggle[hidden]{display:none}

/* ---------- Programme: sticky bar, pills, folded filters, card icons ---------- */
/* the day pills, the venue of the picked day and the Filter button share
   one bar that sticks under the nav, so the day and place stay in sight
   while the sessions scroll; the sessions take the full width */
.prog-bar{position:sticky;top:var(--nav-h);z-index:20;margin:0 0 24px;padding:12px 0;background:var(--deep-void);box-shadow:0 1px 0 var(--midnight-steel)}
.prog-bar-row{display:flex;align-items:center;gap:16px}
.prog-tabs.edition-tabs{flex:0 1 auto;min-width:0;margin:0;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:0;box-shadow:none}
.prog-tabs::-webkit-scrollbar{display:none}
.prog-tabs .edition-tab{flex:none;flex-direction:row;align-items:baseline;gap:8px;margin:0;padding:7px 14px;border:1px solid var(--midnight-steel);border-radius:100px;font:700 13px/18px var(--font-sans);letter-spacing:.05em;white-space:nowrap;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.prog-tabs .edition-tab:hover{border-color:var(--digital-teal)}
.prog-tabs .edition-tab[aria-selected="true"]{background:var(--neon-aqua);border-color:var(--neon-aqua);color:var(--deep-void)}
.prog-tabs .prog-tab-date{font:400 12px/18px var(--font-sans);letter-spacing:.02em}
.prog-tabs .edition-tab[aria-selected="true"] .prog-tab-date{color:var(--deep-void)}
.prog-tab-mine{margin-left:0}
.prog-venue{min-width:0;margin:0 0 10px;display:flex;align-items:center;gap:6px;font:400 14px/20px var(--font-sans);color:var(--pale-glow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog-venue[hidden]{display:none}
.prog-venue::before{content:"";flex:none;width:16px;height:16px;background:var(--neon-aqua);-webkit-mask:var(--i-pin) center/contain no-repeat;mask:var(--i-pin) center/contain no-repeat}
.prog-filter-toggle{flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--neon-aqua);border-radius:100px;background:transparent;cursor:pointer;font:700 13px/18px var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--neon-aqua)}
.prog-filter-toggle[aria-expanded="true"]{background:var(--neon-aqua);color:var(--deep-void)}
.prog-filter-toggle[aria-expanded="true"] .prog-group-count{color:var(--deep-void)}
.prog-filter-toggle:focus-visible{outline:2px solid var(--neon-aqua);outline-offset:3px}
/* the filter panel opens under the bar row, Location and Type side by side */
.prog-filters,.prog-filters[hidden]{position:static}
.prog-filters[hidden]{display:none}
.prog-filters{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 32px;max-height:calc(100vh - var(--nav-h) - 120px);max-height:calc(100dvh - var(--nav-h) - 120px);overflow-y:auto}
.prog-filters .prog-group{border-top:0;padding-top:0}
.prog-filters .prog-group:nth-of-type(2) .prog-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));column-gap:16px}
.prog-filters .prog-clear,.prog-filters .prog-note{grid-column:1 / -1}
.prog-layout{display:block}
.prog-day:not(.prog-mine) > .prog-day-head{display:none}
/* cards: 20% more inner space, type and room as quiet icon lines */
.prog-item{gap:12px;padding:24px 29px}
.prog-meta{margin:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.prog-meta .prog-tag,.prog-meta .prog-room{display:inline-flex;align-items:center;gap:6px;padding:0;border-radius:0;background:none;font:400 13px/18px var(--font-sans);letter-spacing:.04em;text-transform:none}
.prog-meta .prog-tag{color:var(--neon-aqua)}
.prog-meta .prog-room{color:var(--pale-glow)}
.prog-when{display:flex;align-items:center;gap:8px}
.prog-when span{margin-left:2px}
.prog-when::before,.prog-tag::before,.prog-room::before,.prog-people::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.prog-when::before{--i:var(--i-clock);background:var(--neon-aqua)}
.prog-room::before{--i:var(--i-pin)}
.prog-people{position:relative;padding-left:28px}
.prog-people::before{--i:var(--i-person);position:absolute;left:0;top:18px;background:var(--digital-teal)}
.prog-tag::before{--i:var(--i-tag)}
@media (max-width:900px){
  .prog-bar-row{flex-wrap:wrap;row-gap:10px}
  .prog-tabs.edition-tabs{flex:none;width:calc(100% + 2 * var(--gutter));order:-1;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scroll-padding:0 var(--gutter)}
  .prog-filters{grid-template-columns:minmax(0,1fr)}
  .prog-filters .prog-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .prog-item{padding:22px 24px}
}
:root{--i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.75V8l2.25 1.5'/%3E%3C/svg%3E");--i-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14.5s-4.75-4.1-4.75-7.75a4.75 4.75 0 0 1 9.5 0C12.75 10.4 8 14.5 8 14.5z'/%3E%3Ccircle cx='8' cy='6.75' r='1.6'/%3E%3C/svg%3E");--i-person:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5' r='2.6'/%3E%3Cpath d='M2.75 14.25c0-2.9 2.35-4.6 5.25-4.6s5.25 1.7 5.25 4.6'/%3E%3C/svg%3E");--i-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2.5h5.5l6.5 6.5-5 5-6.5-6.5V2.5z'/%3E%3Ccircle cx='5' cy='5.5' r='1'/%3E%3C/svg%3E")}
.prog-item[data-type="Tutorial"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4.25C6.5 3.2 4.5 2.75 1.75 2.75v10c2.75 0 4.75.45 6.25 1.5 1.5-1.05 3.5-1.5 6.25-1.5v-10c-2.75 0-4.75.45-6.25 1.5zM8 4.25v10'/%3E%3C/svg%3E")}
.prog-item[data-type="Networking"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='5.25' r='2.1'/%3E%3Ccircle cx='11.25' cy='6' r='1.75'/%3E%3Cpath d='M1.5 13.75c0-2.4 1.8-3.9 4-3.9s4 1.5 4 3.9M10.25 9.9c2.35-.35 4.25 1.05 4.25 3.85'/%3E%3C/svg%3E")}
.prog-item[data-type="Industry"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 14.25V2.75h3v6.5l4-2.5v2.5l4-2.5v7.5zM1.75 14.25h12.5'/%3E%3C/svg%3E")}
.prog-item[data-type="Workshop"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.75 2.25a3.25 3.25 0 0 0-3 4.4L2.4 11a1.5 1.5 0 0 0 2.1 2.1l4.35-4.35a3.25 3.25 0 0 0 4.4-3l-2 1.4-1.75-.6-.4-1.8z'/%3E%3C/svg%3E")}
.prog-item[data-type="Opening"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 14.5V2M3.5 2.75h9l-2 3.25 2 3.25h-9'/%3E%3C/svg%3E")}
.prog-item[data-type="Keynote"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.75' y='1.75' width='4.5' height='7.5' rx='2.25'/%3E%3Cpath d='M3.25 7.75a4.75 4.75 0 0 0 9.5 0M8 12.5v2'/%3E%3C/svg%3E")}
.prog-item[data-type="Special session"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75l1.95 3.95 4.35.65-3.15 3.05.75 4.35L8 11.7l-3.9 2.05.75-4.35L1.7 6.35l4.35-.65z'/%3E%3C/svg%3E")}
.prog-item[data-type="Symposium"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75l6 3.5H2zM2 14.25h12M4 7.5v4.5M8 7.5v4.5M12 7.5v4.5'/%3E%3C/svg%3E")}
.prog-item[data-type="Social"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 1.75h7L11 6a3 3 0 0 1-6 0zM8 9v5.25M5.5 14.25h5'/%3E%3C/svg%3E")}
.prog-item[data-type="Poster session"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.75' y='1.75' width='12.5' height='9' rx='1.25'/%3E%3Cpath d='M5 10.75l-1.5 3.5M11 10.75l1.5 3.5M4.25 8.25l2.5-2.5 2 2 1.5-1.5 1.5 1.5'/%3E%3C/svg%3E")}
.prog-item[data-type="Plenary"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.25 6v4h2.5l6.5 3.5V2.5L4.75 6zM13.5 6.25v3.5'/%3E%3C/svg%3E")}
.prog-item[data-type="Panel"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 2.75h8.5v6H5.5L2.75 11V8.75h-1zM12.25 5.75h2v5.75h-1.25v1.75l-2.25-1.75h-3.5v-1.5'/%3E%3C/svg%3E")}
.prog-item[data-type="Technical session"] .prog-tag::before{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='8' height='8' rx='1.25'/%3E%3Cpath d='M6.5 1.75V4M9.5 1.75V4M6.5 12v2.25M9.5 12v2.25M1.75 6.5H4M1.75 9.5H4M12 6.5h2.25M12 9.5h2.25'/%3E%3C/svg%3E")}

/* ---------- Nav: sticky at every width, full-screen menu on phones ---------- */
/* the burger opens a panel that covers the page under the bar, links
   centred and larger; the page behind stops scrolling and the burger
   turns into a close (X), see main.js */
@media (max-width:1300px){
  .nav-right{position:fixed;top:var(--nav-h);bottom:0;border-top:1px solid var(--midnight-steel);justify-content:center;align-items:center;gap:40px;padding:32px var(--gutter);overflow-y:auto;overscroll-behavior:contain}
  .nav-items{align-items:center;gap:8px}
  .nav-flat-link,.nav-items > .nav-item > a{display:block;padding:12px 16px;text-align:center;font:400 20px/28px var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--neon-aqua)}
  .nav-ctas{width:100%;max-width:320px}
  body:has(.nav.menu-open){overflow:hidden}
}

/* ---------- Programme bar, take 3 ---------- */
/* venue on top, the four day pills, then My calendar on the left and
   Filter on the right, so My calendar no longer hides at the end of the
   swipe row */
.prog-bar-sub{margin-top:10px;justify-content:space-between}
.prog-tab-mine.edition-tab{flex:none;display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border:1px solid var(--midnight-steel);border-radius:100px;font:700 13px/18px var(--font-sans);letter-spacing:.05em;white-space:nowrap;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.prog-tab-mine.edition-tab:hover{border-color:var(--digital-teal)}
.prog-tab-mine.edition-tab[aria-selected="true"]{background:var(--neon-aqua);border-color:var(--neon-aqua);color:var(--deep-void)}
.prog-tab-mine .prog-mine-icon{color:var(--neon-aqua)}
.prog-tab-mine[aria-selected="true"] .prog-mine-icon,
.prog-tab-mine[aria-selected="true"] .prog-tab-date{color:var(--deep-void)}
.prog-tab-mine .prog-tab-date{font:700 13px/18px var(--font-sans);color:var(--neon-aqua)}
.prog-tab-mine .prog-tab-date:empty{display:none}

/* ---------- Homepage rows that scroll sideways ---------- */
/* updates, journals and editions use the speakers' row and arrows
   (card-carousel.js): three cards a slide on desktop (journals too, their
   covers are tall), two on tablets, and on phones one and a bit, journals
   two a slide */
.card-row{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 32px) / 3);gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.card-row::-webkit-scrollbar{display:none}
.card-row > *{scroll-snap-align:start}
@media (max-width:900px){.card-row{grid-auto-columns:calc((100% - 24px) / 2);gap:24px}}
@media (max-width:600px){
  .card-row{grid-auto-columns:80%}
  .card-row-journals{grid-auto-columns:calc((100% - 16px) / 2);gap:16px}
  .card-row-journals .journal-cover{font-size:15px;padding:12px}
}

/* cards inside a sideways row don't run their own scroll reveal: the row's
   section already fades in, and a card that only reveals once it is
   scrolled into the row slid up and got clipped at the row's top edge */
.card-row > .reveal,
.card-track > .reveal{opacity:1;transform:none;transition:border-color .25s var(--ease)}

/* journal name and impact factor: the badge never breaks over two lines;
   in narrow cards it drops under the name instead */
.journal-info{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
.if-badge{flex:none;white-space:nowrap}
/* phone menu: the two buttons ~30% taller with larger type, closer to the
   20px links above them and easier to hit */
@media (max-width:1300px){.nav-ctas .btn{padding:14px 20px;font-size:14px;line-height:20px}}
/* journal card: name on one line (cut with ... when too long), the impact
   factor badge always on its own row under it */
.journal-info{flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.journal-info .name{max-width:100%;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}