/* ============================================================================
   Labocine — SCIENCE NEW WAVE (/science-new-wave), revamped 2026-09.
   Scoped under `.sw`.

   Seven destinations became one page. The old version sent people to
   sciencenewwave.com for membership, luminaries, the festival and the store,
   and hid the manifesto, the benefits and the joining steps inside three
   modals nobody opened. All of it is now one scroll with its own nav.

   Same family as My Work, analytics and field notes: black ground, one
   luminous accent, Poppins, thin borders, generous type. The accent here is
   the wave's own — amber through cyan, the colours of the DNA mark — so the
   page belongs to Labocine but reads as Science New Wave.
   ============================================================================ */

html.sw-page, body.sw-page { background: #05070a !important; }
body.sw-page footer { color: #6d7683; text-align: center; font-size: 0.78rem; padding: 0 0 26px; }

.sw {
    --sw-nav: 56px;
    --sw-bg: #05070a;
    --sw-surface: rgba(17, 21, 27, 0.72);
    --sw-surface-2: #11151b;
    --sw-border: rgba(255, 255, 255, 0.1);
    --sw-border-strong: rgba(255, 255, 255, 0.22);
    --sw-text: #eef1f5;
    --sw-muted: #aab4c0;
    --sw-muted-2: #7b8694;
    --sw-amber: #ff9147;
    --sw-cyan: #43dcff;
    --sw-green: #34e08a;
    --sw-violet: #a98cff;
    --sw-glow: rgba(255, 145, 71, 0.5);
    --sw-maxw: 1500px;
    --sw-read: 760px;

    position: relative;
    min-height: 100vh;
    background: var(--sw-bg);
    color: var(--sw-text);
    font-family: "Poppins", "Open Sans", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 80px;
}
.sw *, .sw *::before, .sw *::after { box-sizing: border-box; }
/* `display` on a rule beats the hidden attribute, and several elements here
   set it. Without this, el.hidden = true does nothing. */
.sw [hidden] { display: none !important; }

/* styles.css sets `strong, body, h1..h6 { font-family: FuturaStd; font-weight: 300;
   color: #222 }` on every page. On a black page that paints every heading and
   every bold word near-black, in the wrong face. Colour and family are reset
   here; weight deliberately is NOT, because this selector (0,1,1) would then
   outrank the component rules that set it. */
.sw h1, .sw h2, .sw h3, .sw h4, .sw h5, .sw h6,
.sw strong, .sw b {
    color: inherit;
    font-family: inherit;
}
.sw img { max-width: 100%; }
.sw a { text-decoration: none; color: inherit; }
.sw ::selection { background: rgba(255, 145, 71, 0.3); }

.sw-wrap { width: min(var(--sw-maxw), 100% - 48px); margin-inline: auto; }
.sw-read { width: min(var(--sw-read), 100%); }

/* shared section furniture ------------------------------------------------ */
.sw-sec { padding: 74px 0 0; scroll-margin-top: calc(var(--sw-nav) + 50px); }
.sw-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sw-amber); margin: 0 0 14px;
}
.sw-eyebrow::before {
    content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6;
}
.sw-h2 {
    margin: 0 0 14px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.08;
    font-weight: 800; letter-spacing: -0.02em;
}
.sw-lede { margin: 0 0 26px; max-width: 68ch; color: var(--sw-muted); font-size: 1rem; line-height: 1.72; }
.sw-p { margin: 0 0 16px; color: var(--sw-muted); line-height: 1.78; }
.sw-p strong, .sw-lede strong { color: var(--sw-text); font-weight: 650; }
.sw-p a, .sw-lede a { color: var(--sw-cyan); border-bottom: 1px solid rgba(67, 220, 255, 0.35); }
.sw-p a:hover, .sw-lede a:hover { border-bottom-color: var(--sw-cyan); }

.sw-i { width: 1em; height: 1em; flex: none; }

/* buttons ------------------------------------------------------------------ */
.sw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 20px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--sw-border-strong); background: rgba(255, 255, 255, 0.04);
    color: var(--sw-text); font: inherit; font-size: 0.85rem; font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.sw-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; transform: translateY(-1px); }
.sw-btn--go {
    background: linear-gradient(100deg, var(--sw-amber), #ffb877);
    border-color: transparent; color: #24160c; font-weight: 750;
    box-shadow: 0 12px 34px -14px var(--sw-glow);
}
.sw-btn--go:hover { background: linear-gradient(100deg, #ffa25f, #ffcb95); color: #24160c; }
.sw-btn--sm { padding: 9px 15px; font-size: 0.78rem; }

/* ══════════════════════════════════════════════ HERO ═══════════════════════ */
.sw-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(86vh, 760px); display: grid; align-items: center;
    padding: calc(var(--sw-nav) + 40px) 0 52px;
    border-bottom: 1px solid var(--sw-border);
}
.sw-hero__c {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
    display: block;
}
/* the CSS fallback when WebGL is unavailable or motion is unwelcome */
.sw-hero__aurora {
    position: absolute; inset: -20%; z-index: -3; pointer-events: none;
    background:
        radial-gradient(46% 40% at 22% 30%, rgba(255, 145, 71, 0.24), transparent 70%),
        radial-gradient(44% 38% at 78% 62%, rgba(67, 220, 255, 0.2), transparent 70%),
        radial-gradient(40% 36% at 52% 88%, rgba(169, 140, 255, 0.16), transparent 70%);
    filter: blur(20px);
}
.sw-hero__scrim {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        /* A pool of dark under the type so the strand never competes with a
           word — but tight, and only as dark as the words need. The earlier
           version was 0.88 across the middle and 0.8 at the top, which left the
           helix visible only in a thin band and at the extreme edges. */
        radial-gradient(46% 38% at 50% 47%, rgba(5, 7, 10, 0.82) 0%, rgba(5, 7, 10, 0.42) 62%, transparent 100%),
        linear-gradient(180deg, rgba(5, 7, 10, 0.5) 0%, rgba(5, 7, 10, 0.04) 26%, rgba(5, 7, 10, 0.5) 80%, var(--sw-bg) 100%);
}

.sw-hero__inner { position: relative; text-align: center; }
.sw-mark {
    width: min(720px, 86%); margin: 0 auto 16px; display: block;
    /* the wordmark ships as black line art; on black it has to be inverted */
    filter: invert(1) drop-shadow(0 0 26px rgba(255, 145, 71, 0.28));
}
.sw-tag {
    margin: 0 0 8px; font-size: clamp(0.82rem, 1.9vw, 1.06rem);
    font-weight: 750; letter-spacing: 0.34em; text-transform: uppercase;
    background: linear-gradient(96deg, var(--sw-amber), var(--sw-cyan) 62%, var(--sw-violet));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sw-hero__lede {
    margin: 18px auto 0; max-width: 60ch; color: var(--sw-muted);
    font-size: clamp(0.92rem, 1.5vw, 1.04rem); line-height: 1.75;
}

/* live counts across the bottom of the hero */
.sw-stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 26px auto 0; max-width: 900px;
}
.sw-stat {
    flex: 1 1 150px; min-width: 130px; padding: 15px 14px 13px; text-align: center;
    border: 1px solid var(--sw-border); border-radius: 14px;
    background: rgba(12, 16, 21, 0.6); backdrop-filter: blur(9px);
}
.sw-stat__n {
    display: block; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800;
    letter-spacing: -0.02em; line-height: 1;
}
.sw-stat__k {
    display: block; margin-top: 6px; font-size: 0.64rem; font-weight: 650;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-muted-2);
}
.sw-hero__acts { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 24px; }

/* your own sequence, when you are already in the wave */
.sw-badge {
    display: inline-flex; align-items: center; gap: 11px; margin: 0 auto;
    padding: 9px 9px 9px 15px; border-radius: 999px;
    border: 1px solid rgba(52, 224, 138, 0.4); background: rgba(52, 224, 138, 0.08);
    font-size: 0.78rem; color: var(--sw-text);
}
.sw-badge__k { font-weight: 650; }
.sw-badge__dna {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.16em;
    font-size: 0.76rem; color: var(--sw-green);
    background: rgba(0, 0, 0, 0.45); border-radius: 999px; padding: 5px 12px;
}

/* ══════════════════════════════════════ SECTION NAV ════════════════════════ */
.sw-nav {
    position: sticky; top: var(--sw-nav); z-index: 30;
    /* sticky needs an opaque ground or the page reads through it */
    background: rgba(5, 7, 10, 0.93); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sw-border);
}
.sw-nav__in {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    padding: 9px 0;
}
.sw-nav__in::-webkit-scrollbar { display: none; }
.sw-nav a {
    flex: none; padding: 9px 15px; border-radius: 999px; white-space: nowrap;
    font-size: 0.78rem; font-weight: 620; color: var(--sw-muted-2);
    transition: color 0.18s ease, background 0.18s ease;
}
.sw-nav a:hover { color: var(--sw-text); background: rgba(255, 255, 255, 0.06); }
.sw-nav a.is-on { color: #24160c; background: var(--sw-amber); }

/* ══════════════════════════════════════ MANIFESTO ══════════════════════════ */
.sw-dogma { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 26px; }
.sw-trait {
    position: relative; padding: 22px 20px 20px; border-radius: 16px;
    border: 1px solid var(--sw-border); background: var(--sw-surface);
    overflow: hidden; transition: border-color 0.22s ease, transform 0.22s ease;
}
.sw-trait:hover { border-color: var(--sw-border-strong); transform: translateY(-2px); }
.sw-trait::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 2px;
    background: linear-gradient(90deg, var(--sw-amber), var(--sw-cyan));
    opacity: 0.7;
}
.sw-trait__n {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.68rem; letter-spacing: 0.18em; color: var(--sw-muted-2);
    text-transform: uppercase; display: block; margin-bottom: 9px;
}
.sw-trait__t { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.4; }

.sw-origin {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 34px; align-items: start;
    padding: 30px; border-radius: 20px;
    border: 1px solid var(--sw-border); background: var(--sw-surface);
}
.sw-origin__img { border-radius: 14px; overflow: hidden; border: 1px solid var(--sw-border); }
.sw-origin__img img { display: block; width: 100%; }
.sw-origin__cap {
    margin: 10px 0 0; font-size: 0.74rem; color: var(--sw-muted-2); line-height: 1.6;
}

/* ══════════════════════════════════════ MEMBERSHIP ═════════════════════════ */
.sw-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.sw-plan {
    display: flex; flex-direction: column; gap: 9px; padding: 24px 22px;
    border-radius: 18px; border: 1px solid var(--sw-border); background: var(--sw-surface);
}
.sw-plan--hero { border-color: rgba(255, 145, 71, 0.5); background: rgba(255, 145, 71, 0.06); }
.sw-plan__k {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sw-muted-2);
}
.sw-plan--hero .sw-plan__k { color: var(--sw-amber); }
.sw-plan__p { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.sw-plan__p i { font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--sw-muted-2); }
.sw-plan__d { margin: 0; font-size: 0.86rem; color: var(--sw-muted); line-height: 1.66; flex: 1; }

.sw-perks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }
.sw-perk {
    display: flex; gap: 14px; padding: 19px 20px; border-radius: 15px;
    border: 1px solid var(--sw-border); background: var(--sw-surface-2);
}
.sw-perk__ic {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; color: var(--sw-amber);
    background: rgba(255, 145, 71, 0.12); border: 1px solid rgba(255, 145, 71, 0.24);
}
.sw-perk__ic .sw-i { width: 17px; height: 17px; }
.sw-perk__t { margin: 0 0 5px; font-size: 0.92rem; font-weight: 700; }
.sw-perk__d { margin: 0; font-size: 0.83rem; color: var(--sw-muted); line-height: 1.62; }
.sw-perk__d a { color: var(--sw-cyan); }

.sw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sw-step {
    position: relative; padding: 22px 20px; border-radius: 16px;
    border: 1px solid var(--sw-border); background: var(--sw-surface);
}
.sw-step__n {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.78rem; font-weight: 800; margin-bottom: 12px;
    background: var(--sw-amber); color: #24160c;
}
.sw-step__t { margin: 0 0 6px; font-size: 0.98rem; font-weight: 700; }
.sw-step__d { margin: 0; font-size: 0.85rem; color: var(--sw-muted); line-height: 1.66; }
.sw-step__d a { color: var(--sw-cyan); }

/* ══════════════════════════════════════ LUMINARIES ═════════════════════════ */
.sw-lum { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 40px; align-items: start; }
.sw-lum__list { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.sw-lum__list li {
    display: flex; gap: 11px; align-items: flex-start;
    font-size: 0.88rem; color: var(--sw-muted); line-height: 1.6;
}
.sw-lum__list .sw-i { color: var(--sw-amber); margin-top: 3px; width: 15px; height: 15px; }

.sw-faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sw-face { display: block; border-radius: 13px; overflow: hidden; position: relative; }
.sw-face__img {
    display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
    background: #161b22; transition: transform 0.4s ease, filter 0.3s ease;
    filter: grayscale(1) contrast(1.04);
}
.sw-face:hover .sw-face__img { transform: scale(1.07); filter: none; }
.sw-face__n {
    position: absolute; inset: auto 0 0; padding: 22px 9px 8px;
    font-size: 0.66rem; font-weight: 650; line-height: 1.25;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
    opacity: 0; transition: opacity 0.25s ease;
}
.sw-face:hover .sw-face__n { opacity: 1; }

/* ══════════════════════════════════════ COMMUNITY ══════════════════════════ */
.sw-tools { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 20px; }
.sw-search { position: relative; flex: 1 1 260px; min-width: 200px; }
.sw-search .sw-i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--sw-muted-2); pointer-events: none;
}
.sw-in {
    width: 100%; padding: 12px 15px 12px 40px; border-radius: 999px;
    border: 1px solid var(--sw-border); background: var(--sw-surface-2);
    color: var(--sw-text); font: inherit; font-size: 0.86rem;
}
.sw-in::placeholder { color: var(--sw-muted-2); }
.sw-in:focus { outline: none; border-color: var(--sw-amber); box-shadow: 0 0 0 3px rgba(255, 145, 71, 0.14); }
.sw-chip {
    padding: 10px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--sw-border); background: var(--sw-surface-2);
    color: var(--sw-muted); font: inherit; font-size: 0.78rem; font-weight: 620;
    transition: all 0.18s ease;
}
.sw-chip:hover { color: var(--sw-text); border-color: var(--sw-border-strong); }
.sw-chip.is-on { background: var(--sw-amber); border-color: transparent; color: #24160c; }
.sw-count { margin-left: auto; font-size: 0.78rem; color: var(--sw-muted-2); }

.sw-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sw-card {
    display: block; padding: 16px 14px 15px; border-radius: 16px; text-align: center;
    border: 1px solid var(--sw-border); background: var(--sw-surface);
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.sw-card:hover { border-color: var(--sw-border-strong); transform: translateY(-3px); background: var(--sw-surface-2); }
.sw-card__av { position: relative; width: 74px; margin: 0 auto 11px; }
.sw-card__av img {
    display: block; width: 74px; height: 74px; border-radius: 50%; object-fit: cover;
    background: #161b22; border: 1px solid var(--sw-border);
}
/* the DNA mark says at a glance that this person is in the wave */
.sw-card__dna {
    position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px;
    border-radius: 50%; background: #05070a; border: 1px solid rgba(255, 145, 71, 0.5);
    display: grid; place-items: center; padding: 3px;
}
.sw-card__dna img { width: 100%; height: 100%; border: 0; border-radius: 0; background: none; }
.sw-card__n {
    font-size: 0.84rem; font-weight: 680; line-height: 1.3; margin-bottom: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-card__t {
    font-size: 0.71rem; color: var(--sw-muted-2); line-height: 1.4; min-height: 2em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-card__seq {
    margin-top: 9px; font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(255, 145, 71, 0.7);
}
.sw-more { display: flex; justify-content: center; margin-top: 22px; }

.sw-empty {
    grid-column: 1 / -1; padding: 46px 20px; text-align: center;
    color: var(--sw-muted-2); font-size: 0.88rem;
}

/* ══════════════════════════════════════ FESTIVAL ═══════════════════════════
   The loudest thing on the page, and deliberately so: full bleed, its own
   colour, a ticker and a live clock. */
.sw-sec--flush { padding-left: 0; padding-right: 0; }

.sw-fest {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 0 0 52px;
    border-block: 1px solid rgba(255, 145, 71, 0.3);
    background:
        radial-gradient(90% 130% at 8% 0%, rgba(255, 145, 71, 0.2), transparent 58%),
        radial-gradient(80% 120% at 92% 100%, rgba(67, 220, 255, 0.16), transparent 56%),
        radial-gradient(60% 90% at 50% 40%, rgba(169, 140, 255, 0.1), transparent 70%),
        #0a0d12;
}
/* a whisper of grain, so the gradients do not band on a big screen */
.sw-fest__grain {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.sw-fest__in { position: relative; z-index: 1; padding-top: 40px; }

/* ---- the ticker ---- */
.sw-marquee {
    position: relative; z-index: 1; overflow: hidden; padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(0, 0, 0, 0.24);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.sw-marquee__t {
    display: inline-flex; align-items: center; gap: 18px; white-space: nowrap;
    animation: sw-slide 34s linear infinite;
    font-size: 0.76rem; font-weight: 750; letter-spacing: 0.24em; text-transform: uppercase;
}
.sw-marquee__t span { color: var(--sw-text); }
.sw-marquee__t i { color: var(--sw-amber); font-style: normal; }
@keyframes sw-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- headline ---- */
.sw-fest__head {
    display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center;
    margin-bottom: 32px;
}
.sw-eyebrow--on { color: var(--sw-amber); }
.sw-fest__title {
    margin: 0 0 12px; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.06;
    font-weight: 800; letter-spacing: -0.025em;
}
.sw-fest__title span {
    background: linear-gradient(100deg, var(--sw-amber), var(--sw-cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sw-fest__lede { margin: 0; max-width: 60ch; color: var(--sw-muted); line-height: 1.72; }
.sw-fest__ed {
    font-size: clamp(4rem, 12vw, 9.5rem); font-weight: 800; line-height: 0.8;
    letter-spacing: -0.05em; opacity: 0.9;
    background: linear-gradient(160deg, var(--sw-amber), var(--sw-violet) 70%, var(--sw-cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- the clock ---- */
.sw-cd {
    padding: 24px 26px; border-radius: 18px; margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(8px);
}
.sw-cd__k {
    font-size: 0.66rem; font-weight: 750; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--sw-amber); margin-bottom: 12px;
}
.sw-cd__row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sw-cd__u { display: flex; flex-direction: column; align-items: center; min-width: 68px; }
.sw-cd__u b {
    font-size: clamp(1.8rem, 4.4vw, 3rem); font-weight: 800; line-height: 1;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.sw-cd__u i {
    font-style: normal; margin-top: 6px; font-size: 0.62rem; font-weight: 650;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-muted-2);
}
.sw-cd__s {
    font-size: clamp(1.4rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.1;
    color: var(--sw-muted-2); opacity: 0.5;
}
.sw-cd__d { margin: 14px 0 0; font-size: 0.84rem; color: var(--sw-muted); }
.sw-cd.is-live { border-color: rgba(52, 224, 138, 0.5); background: rgba(52, 224, 138, 0.08); }
.sw-cd.is-live .sw-cd__k { color: var(--sw-green); }

/* ---- what happens ---- */
.sw-fbits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 40px; }
.sw-fbit {
    padding: 20px 19px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.3);
    transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}
.sw-fbit:hover {
    border-color: rgba(255, 145, 71, 0.45); transform: translateY(-3px);
    background: rgba(0, 0, 0, 0.44);
}
.sw-fbit__ic {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    margin-bottom: 13px; color: var(--sw-amber);
    background: rgba(255, 145, 71, 0.14); border: 1px solid rgba(255, 145, 71, 0.28);
}
.sw-fbit__ic .sw-i { width: 18px; height: 18px; }
.sw-fbit__t { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; }
.sw-fbit__d { margin: 0; font-size: 0.83rem; color: var(--sw-muted); line-height: 1.64; }

/* ---- previous editions ---- */
.sw-fest__pasth { margin-bottom: 16px; }
.sw-fest__pt { margin: 0 0 4px; font-size: 1.15rem; font-weight: 750; }
.sw-fest__ps { margin: 0; font-size: 0.85rem; color: var(--sw-muted-2); }

.sw-rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
    gap: 12px; overflow-x: auto; overflow-y: hidden;
    padding-bottom: 10px; scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.sw-rail::-webkit-scrollbar { height: 6px; }
.sw-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 99px; }
.sw-ed {
    scroll-snap-align: start; display: flex; flex-direction: column;
    border-radius: 15px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.34);
    transition: border-color 0.22s ease, transform 0.22s ease;
}
.sw-ed:hover { border-color: rgba(255, 145, 71, 0.5); transform: translateY(-3px); }
.sw-ed__img { display: block; overflow: hidden; }
.sw-ed__img img {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    background: #161b22; transition: transform 0.5s ease;
}
.sw-ed:hover .sw-ed__img img { transform: scale(1.06); }
.sw-ed__meta {
    display: flex; gap: 9px; align-items: baseline; padding: 12px 14px 0;
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.sw-ed__meta b { color: var(--sw-amber); font-weight: 750; }
.sw-ed__meta i { color: var(--sw-muted-2); font-style: normal; }
.sw-ed__t {
    padding: 6px 14px 15px; font-size: 0.86rem; font-weight: 640; line-height: 1.42;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ══════════════════════════════════════ VIDEOS ═════════════════════════════ */
.sw-vids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sw-vid {
    position: relative; display: block; border-radius: 15px; overflow: hidden;
    border: 1px solid var(--sw-border); background: var(--sw-surface-2); cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.sw-vid:hover { border-color: var(--sw-border-strong); transform: translateY(-3px); }
.sw-vid__img {
    display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #161b22;
}
.sw-vid__b { padding: 13px 14px 14px; }
.sw-vid__n { margin: 0 0 3px; font-size: 0.87rem; font-weight: 680; }
.sw-vid__t { margin: 0; font-size: 0.73rem; color: var(--sw-muted-2); }
.sw-vid__play {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
}

/* the player, opened over the page */
.sw-lb {
    position: fixed; inset: 0; z-index: 4000; display: none;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(3, 5, 7, 0.9); backdrop-filter: blur(10px);
}
.sw-lb.is-open { display: flex; }
.sw-lb__box { width: min(940px, 100%); }
.sw-lb__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sw-lb__n { font-size: 1rem; font-weight: 700; }
.sw-lb__x {
    margin-left: auto; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; color: var(--sw-text);
    border: 1px solid var(--sw-border-strong); background: rgba(255, 255, 255, 0.05);
}
.sw-lb__x:hover { background: rgba(255, 255, 255, 0.14); }
.sw-lb video {
    width: 100%; border-radius: 16px; border: 1px solid var(--sw-border);
    background: #000; display: block;
}

/* ══════════════════════════════════════ CLOSING ════════════════════════════ */
.sw-cta {
    margin-top: 58px; padding: 44px 36px; border-radius: 22px; text-align: center;
    border: 1px solid var(--sw-border);
    background:
        radial-gradient(70% 120% at 50% 0%, rgba(255, 145, 71, 0.14), transparent 65%),
        var(--sw-surface-2);
}
.sw-cta h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.sw-cta p { margin: 0 auto 24px; max-width: 56ch; color: var(--sw-muted); line-height: 1.72; }

/* ---- arrival ----
   Added by script only, so nothing depends on JavaScript to become visible. */
.sw-rise { opacity: 0; transform: translateY(15px); }
.sw-rise.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.62s cubic-bezier(.2,.7,.3,1), transform 0.62s cubic-bezier(.2,.7,.3,1);
}

/* ══════════════════════════════════════ RESPONSIVE ═════════════════════════
   Written after the rules they override: for equal specificity, source order
   decides, so these must come last to win. */
@media (max-width: 1180px) {
    .sw-grid, .sw-faces { grid-template-columns: repeat(4, 1fr); }
    .sw-vids { grid-template-columns: repeat(3, 1fr); }
    .sw-fbits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
    .sw-wrap { width: calc(100% - 34px); }
    .sw-sec { padding-top: 72px; }
    .sw-dogma, .sw-steps { grid-template-columns: repeat(2, 1fr); }
    .sw-plans { grid-template-columns: 1fr; }
    .sw-perks { grid-template-columns: 1fr; }
    .sw-origin, .sw-lum { grid-template-columns: 1fr; gap: 26px; }
    .sw-vids { grid-template-columns: repeat(2, 1fr); }
    /* the giant edition numeral moves above the headline rather than beside it */
    .sw-fest__head { grid-template-columns: 1fr; gap: 12px; }
    .sw-fest__ed { order: -1; line-height: 0.85; }
    .sw-cd__u { min-width: 58px; }
}
@media (max-width: 640px) {
    .sw-grid, .sw-faces { grid-template-columns: repeat(3, 1fr); }
    .sw-dogma { grid-template-columns: 1fr; }
    .sw-steps { grid-template-columns: 1fr; }
    .sw-hero { min-height: auto; padding-top: calc(var(--sw-nav) + 40px); }
    /* On a narrow screen the text column fills the frame, so the centre pool
       of dark swallowed the whole strand. Tighten it to just behind the words. */
    .sw-hero__scrim {
        background:
            radial-gradient(64% 30% at 50% 44%, rgba(5, 7, 10, 0.84) 0%, rgba(5, 7, 10, 0.4) 66%, transparent 100%),
            linear-gradient(180deg, rgba(5, 7, 10, 0.44) 0%, rgba(5, 7, 10, 0.02) 22%, rgba(5, 7, 10, 0.42) 82%, var(--sw-bg) 100%);
    }
    .sw-stat { flex: 1 1 44%; }
    .sw-cta { padding: 34px 22px; }
    .sw-count { margin-left: 0; width: 100%; }
    .sw-fbits { grid-template-columns: 1fr; }
    .sw-fest { padding-bottom: 40px; }
    .sw-fest__in { padding-top: 30px; }
    .sw-cd { padding: 20px 18px; }
    /* four units and three colons will not sit on one phone line */
    .sw-cd__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .sw-cd__s { display: none; }
    .sw-cd__u { min-width: 0; }
    .sw-rail { grid-auto-columns: minmax(200px, 1fr); }
    .sw-marquee__t { font-size: 0.68rem; letter-spacing: 0.18em; animation-duration: 26s; }
}
@media (max-width: 420px) {
    .sw-grid, .sw-faces { grid-template-columns: repeat(2, 1fr); }
    .sw-vids { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .sw * { animation: none !important; transition: none !important; }
    .sw-card:hover, .sw-vid:hover, .sw-trait:hover, .sw-fbit:hover, .sw-ed:hover { transform: none; }
    /* the ticker holds still rather than sliding */
    .sw-marquee__t { animation: none; }
    .sw-rise { opacity: 1; transform: none; }
}