:root {
    --site-bg: #050706;
    --site-text: #f4f4f2;
    --site-muted: rgba(244, 244, 242, 0.78);
    --site-gold: #e6b83f;
    --site-gold-bright: #f1c84f;
    --site-gold-dark: #8f6712;
    --site-glass: rgba(12, 14, 12, 0.64);
    --site-glass-deep: rgba(7, 9, 8, 0.78);
    --site-glass-border: rgba(255, 255, 255, 0.10);
    --site-glass-highlight: rgba(230, 184, 63, 0.16);
    --site-line: rgba(255, 255, 255, 0.14);
    --site-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--site-bg);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--site-text);
    background: var(--site-bg);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

.site-shell {
    min-height: 100svh;
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: var(--site-bg);
}

.hero__background,
.hero__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__background {
    z-index: -3;
    background-image: url('/assets/images/site/mot15-hero.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: scale(1.004);
}

.hero__veil {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(3, 6, 5, 0.95) 0%, rgba(3, 6, 5, 0.84) 20%, rgba(3, 6, 5, 0.61) 43%, rgba(3, 6, 5, 0.36) 68%, rgba(3, 6, 5, 0.50) 100%),
        linear-gradient(180deg, rgba(2, 4, 3, 0.30) 0%, rgba(2, 4, 3, 0.09) 42%, rgba(2, 4, 3, 0.43) 76%, rgba(2, 4, 3, 0.92) 100%);
}

.hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 19%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 7, 6, 0), rgba(5, 7, 6, 0.72));
}

.site-header {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    padding: 15px 42px 12px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
}

.site-brand__logo {
    display: block;
    width: 47px;
    height: 41px;
    object-fit: contain;
    filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.28));
}

.site-brand__copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.site-brand__copy strong {
    font-size: 13px;
    line-height: 1.05;
    letter-spacing: 1.15px;
    font-weight: 800;
    white-space: nowrap;
}

.site-brand__copy small {
    color: rgba(255, 255, 255, 0.63);
    font-size: 8px;
    line-height: 1.1;
    letter-spacing: 0.46px;
    white-space: nowrap;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 31px;
}

.site-nav__link {
    position: relative;
    padding: 10px 0 11px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    transition: color 180ms ease, opacity 180ms ease;
}

.site-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: var(--site-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.is-active {
    color: var(--site-gold-bright);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after {
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    width: 43px;
    height: 43px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)),
        rgba(8, 10, 9, 0.56);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -1px 0 rgba(230, 184, 63, 0.08);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #f4f4f2;
    transition: transform 220ms var(--site-ease), opacity 180ms ease;
}

.hero__content {
    position: absolute;
    z-index: 5;
    top: 160px;
    left: 42px;
    width: min(600px, calc(100vw - 84px));
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--site-gold-bright);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.hero__eyebrow-line {
    width: 23px;
    height: 1px;
    background: linear-gradient(90deg, var(--site-gold-bright), rgba(230, 184, 63, 0.18));
}

.hero__title {
    display: grid;
    margin: 17px 0 0;
    font-size: clamp(75px, 8.15vw, 118px);
    line-height: 0.89;
    letter-spacing: -6.7px;
    font-weight: 900;
}

.hero__title span {
    display: block;
}

.hero__title-white {
    color: #f5f5f3;
}

.hero__title-gold {
    color: var(--site-gold-bright);
    text-shadow: 0 10px 34px rgba(181, 124, 14, 0.08);
}

.hero__accent {
    position: relative;
    width: 66px;
    height: 9px;
    margin-top: 22px;
}

.hero__accent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, var(--site-gold-bright), rgba(230, 184, 63, 0.10));
}

.hero__accent span {
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--site-gold-bright);
    box-shadow: 0 0 10px rgba(241, 200, 79, 0.45);
}

.hero__description {
    max-width: 575px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.77);
    font-size: 18px;
    line-height: 1.55;
    font-weight: 400;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.hero-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.15px;
    text-decoration: none;
    transition:
        transform 180ms var(--site-ease),
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.hero-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.hero-button--primary {
    min-width: 180px;
    color: #070806;
    border: 1px solid rgba(255, 233, 157, 0.74);
    background: linear-gradient(180deg, #efc452 0%, #dda92f 76%, #c38d18 100%);
    box-shadow:
        0 7px 0 rgba(91, 60, 3, 0.72),
        0 13px 24px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.hero-button--glass {
    min-width: 218px;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
        rgba(8, 10, 9, 0.58);
    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.52),
        0 15px 30px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(15px) saturate(116%);
    -webkit-backdrop-filter: blur(15px) saturate(116%);
}

.hero-button:hover,
.hero-button:focus-visible {
    transform: translateY(-2px);
}

.hero-button--primary:hover,
.hero-button--primary:focus-visible {
    box-shadow:
        0 7px 0 rgba(91, 60, 3, 0.78),
        0 16px 34px rgba(190, 137, 22, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.hero-button--glass:hover,
.hero-button--glass:focus-visible {
    border-color: rgba(230, 184, 63, 0.28);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)),
        rgba(8, 10, 9, 0.64);
}

.network-card {
    position: absolute;
    z-index: 6;
    right: 42px;
    bottom: 84px;
    width: 420px;
    padding: 15px 15px 14px;
    border: 1px solid rgba(230, 184, 63, 0.15);
    border-radius: 20px;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 58%),
        linear-gradient(180deg, rgba(18, 19, 15, 0.82), rgba(7, 9, 8, 0.76));
    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 0 36px rgba(230, 184, 63, 0.018);
    backdrop-filter: blur(22px) saturate(112%);
    -webkit-backdrop-filter: blur(22px) saturate(112%);
}

.network-card__heading {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
}

.network-card__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 223, 113, 0.60);
    border-radius: 50%;
    background: var(--site-gold-bright);
    box-shadow: 0 0 12px rgba(241, 200, 79, 0.38);
}

.network-card__heading p,
.network-card__heading strong,
.network-card__item p {
    margin: 0;
}

.network-card__heading p {
    margin-bottom: 3px;
    color: var(--site-gold-bright);
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.network-card__heading strong {
    display: block;
    color: rgba(255, 255, 255, 0.76);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 700;
}

.network-card__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 9px;
}

.network-card__item {
    min-width: 0;
    padding: 10px 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.006)),
        rgba(8, 10, 9, 0.40);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.network-card__item span {
    display: block;
    margin-bottom: 5px;
    color: var(--site-gold-bright);
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.9px;
}

.network-card__item p {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.70);
    font-size: 10px;
    line-height: 1.15;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scroll-cue {
    position: absolute;
    z-index: 5;
    left: 42px;
    bottom: 38px;
    display: grid;
    justify-items: center;
    width: 56px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.scroll-cue__label {
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 4px;
    transform: translateX(2px);
}

.scroll-cue__line {
    width: 1px;
    height: 40px;
    margin-top: 11px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06));
}

.scroll-cue__ring {
    width: 16px;
    height: 16px;
    margin-top: -1px;
    border: 2px solid var(--site-gold-bright);
    border-radius: 50%;
    background: rgba(5, 7, 6, 0.35);
    box-shadow: 0 0 14px rgba(230, 184, 63, 0.10);
}

.site-brand:focus-visible,
.site-nav__link:focus-visible,
.hero-button:focus-visible,
.scroll-cue:focus-visible,
.nav-toggle:focus-visible {
    outline: 2px solid var(--site-gold-bright);
    outline-offset: 4px;
}

@media (max-width: 1180px) {
    .site-nav {
        gap: 24px;
    }

    .hero__title {
        font-size: clamp(72px, 9vw, 100px);
    }

    .network-card {
        width: 390px;
    }
}

@media (max-width: 900px) {
    .site-header {
        padding-inline: 28px;
    }

    .site-nav {
        gap: 18px;
    }

    .site-nav__link {
        font-size: 11px;
    }

    .hero__content {
        left: 28px;
        width: min(560px, calc(100vw - 56px));
    }

    .network-card {
        right: 28px;
    }

    .scroll-cue {
        left: 28px;
    }
}

/* Desktop short-viewport precision pass: preserve the 1440×1000 art direction
   while scaling the hero composition for common laptop/browser viewport heights. */
@media (min-width: 761px) and (max-height: 900px) {
    .hero__content {
        top: clamp(118px, 16vh, 144px);
    }

    .hero__title {
        font-size: clamp(82px, min(8.15vw, 11.2vh), 100px);
        line-height: 0.90;
        letter-spacing: -5px;
    }

    .hero__accent {
        margin-top: clamp(15px, 2vh, 18px);
    }

    .hero__description {
        margin-top: 11px;
        max-width: 520px;
        font-size: 16px;
        line-height: 1.5;
    }

    .hero__actions {
        margin-top: 20px;
    }

    .network-card {
        bottom: clamp(60px, 8.4vh, 76px);
    }
}

@media (max-width: 760px) {
    body.nav-open {
        overflow: hidden;
    }

    .hero__background {
        background-position: 50% center;
        transform: scale(1.002);
    }

    .hero__veil {
        background:
            linear-gradient(180deg, rgba(2, 4, 3, 0.46) 0%, rgba(2, 4, 3, 0.56) 44%, rgba(2, 4, 3, 0.77) 76%, rgba(2, 4, 3, 0.96) 100%),
            linear-gradient(90deg, rgba(2, 4, 3, 0.62) 0%, rgba(2, 4, 3, 0.38) 55%, rgba(2, 4, 3, 0.49) 100%);
    }

    .site-header {
        min-height: 72px;
        padding: 14px 20px 10px;
    }

    .site-brand {
        gap: 9px;
    }

    .site-brand__logo {
        width: 43px;
        height: 38px;
    }

    .site-brand__copy strong {
        font-size: 13px;
        letter-spacing: 0.9px;
    }

    .site-brand__copy small {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 31;
    }

    .nav-open .nav-toggle span:first-child {
        transform: translateY(4px) rotate(45deg);
    }

    .nav-open .nav-toggle span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }

    .site-nav {
        position: fixed;
        z-index: 30;
        top: 68px;
        right: 20px;
        display: grid;
        width: min(250px, calc(100vw - 40px));
        gap: 3px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 17px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
            rgba(7, 9, 8, 0.82);
        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.44),
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            inset 0 0 40px rgba(230, 184, 63, 0.015);
        backdrop-filter: blur(24px) saturate(118%);
        -webkit-backdrop-filter: blur(24px) saturate(118%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(0.97);
        transform-origin: top right;
        transition:
            opacity 180ms ease,
            visibility 180ms ease,
            transform 220ms var(--site-ease);
    }

    .nav-open .site-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .site-nav__link {
        padding: 13px 12px;
        border-radius: 10px;
        font-size: 12px;
    }

    .site-nav__link::after {
        display: none;
    }

    .site-nav__link:hover,
    .site-nav__link:focus-visible,
    .site-nav__link.is-active {
        color: var(--site-gold-bright);
        background: rgba(255, 255, 255, 0.045);
    }

    .hero__content {
        top: 124px;
        left: 20px;
        width: calc(100vw - 40px);
    }

    .hero__eyebrow {
        gap: 12px;
        font-size: 10px;
        letter-spacing: 2px;
    }

    .hero__eyebrow-line {
        width: 22px;
    }

    .hero__title {
        margin-top: 23px;
        font-size: clamp(56px, 16vw, 64px);
        line-height: 0.91;
        letter-spacing: -3.9px;
    }

    .hero__accent {
        margin-top: 21px;
    }

    .hero__description {
        margin-top: 13px;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.52;
    }

    .hero__desktop-break {
        display: none;
    }

    .hero__actions {
        display: grid;
        gap: 9px;
        margin-top: 30px;
    }

    .hero-button {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding-inline: 18px;
        border-radius: 12px;
        font-size: 13px;
        justify-content: center;
    }

    .hero-button--primary {
        min-height: 53px;
    }

    .network-card {
        right: 20px;
        bottom: 136px;
        left: 20px;
        width: auto;
        padding: 13px 12px 12px;
        border-radius: 17px;
    }

    .network-card__heading {
        gap: 8px;
        min-height: 29px;
    }

    .network-card__heading p {
        font-size: 8px;
    }

    .network-card__heading strong {
        font-size: 11px;
    }

    .network-card__grid {
        gap: 6px;
        margin-top: 9px;
    }

    .network-card__item {
        padding: 9px 8px 8px;
        border-radius: 10px;
    }

    .network-card__item span {
        font-size: 8px;
    }

    .network-card__item p {
        font-size: 9px;
    }

    .scroll-cue {
        left: 50%;
        bottom: 17px;
        transform: translateX(-50%);
        width: 75px;
    }

    .scroll-cue__label {
        font-size: 8px;
        letter-spacing: 4px;
    }

    .scroll-cue__line {
        height: 39px;
        margin-top: 12px;
    }

    .scroll-cue__ring {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 760px) and (max-height: 810px) {
    .hero {
        min-height: 810px;
    }

    .hero__content {
        top: 108px;
    }

    .hero__title {
        font-size: clamp(50px, 13.6vw, 58px);
    }

    .hero__description {
        font-size: 15px;
    }

    .hero__actions {
        margin-top: 20px;
    }
}

@media (max-width: 370px) {
    .site-header {
        padding-inline: 16px;
    }

    .hero__content {
        left: 16px;
        width: calc(100vw - 32px);
    }

    .hero__title {
        font-size: 51px;
    }

    .network-card {
        right: 16px;
        left: 16px;
    }

    .network-card__item {
        padding-inline: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — FULL-PAGE SLIDES + ARTICLE HIGHLIGHT (v2.29.54)
   ====================================================================== */

html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
}

.site-slide {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.site-header {
    position: fixed;
}

.article-section {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 28%, rgba(230, 184, 63, 0.055), transparent 28%),
        radial-gradient(circle at 18% 82%, rgba(230, 184, 63, 0.035), transparent 32%),
        linear-gradient(135deg, #0c0f0d 0%, #070908 48%, #050706 100%);
}

.article-section::before {
    content: '';
    position: absolute;
    z-index: -5;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 7, 6, 0.52), rgba(5, 7, 6, 0.05) 42%, rgba(5, 7, 6, 0.24)),
        linear-gradient(180deg, rgba(5, 7, 6, 0.28), rgba(5, 7, 6, 0.78));
}

.article-section__pattern {
    position: absolute;
    z-index: -4;
    inset: -12%;
    pointer-events: none;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        repeating-linear-gradient(135deg, transparent 0 78px, rgba(230, 184, 63, 0.038) 79px 80px, transparent 81px 160px);
    background-size: 72px 72px, 72px 72px, 320px 320px;
    transform: perspective(900px) rotateX(58deg) rotateZ(-8deg) scale(1.34);
    transform-origin: 52% 48%;
    animation: articlePatternDrift 18s ease-in-out infinite alternate;
}

.article-section__pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 54px, rgba(255, 255, 255, 0.014) 55px 56px, transparent 57px 112px);
    mix-blend-mode: screen;
}

.article-section__ambient {
    position: absolute;
    z-index: -3;
    width: 42vw;
    max-width: 640px;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.14;
    background: radial-gradient(circle, rgba(230, 184, 63, 0.48), rgba(230, 184, 63, 0.07) 44%, transparent 72%);
    animation: articleAmbientFloat 14s var(--site-ease) infinite alternate;
}

.article-section__ambient--one {
    top: -20%;
    right: -8%;
}

.article-section__ambient--two {
    left: 22%;
    bottom: -34%;
    width: 34vw;
    opacity: 0.09;
    animation-delay: -6s;
}

.article-section__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(285px, 0.68fr);
    gap: clamp(22px, 3vw, 48px);
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 104px 42px 66px;
}

.article-section__primary,
.article-section__secondary {
    min-width: 0;
}

.article-section__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--site-gold-bright);
}

.article-section__eyebrow span {
    display: block;
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--site-gold-bright), rgba(230, 184, 63, 0.15));
}

.article-section__eyebrow p {
    margin: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2.35px;
}

.article-section__title {
    display: grid;
    margin: 14px 0 0;
    font-size: clamp(56px, 5.7vw, 82px);
    line-height: 0.88;
    letter-spacing: -4.5px;
    font-weight: 900;
}

.article-section__title span,
.article-section__title strong {
    display: block;
}

.article-section__title span {
    color: #f5f5f3;
}

.article-section__title strong {
    color: var(--site-gold-bright);
    font: inherit;
}

.glass-panel {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.012) 50%),
        rgba(9, 11, 9, 0.58);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 48px rgba(230, 184, 63, 0.012);
    backdrop-filter: blur(22px) saturate(116%);
    -webkit-backdrop-filter: blur(22px) saturate(116%);
}

.article-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, 0.92fr);
    min-height: 292px;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 22px;
}

.article-featured__media,
.article-mini__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #111511;
}

.article-featured__media::after,
.article-mini__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.article-featured__media::after {
    background:
        linear-gradient(180deg, rgba(4, 6, 5, 0.04), rgba(4, 6, 5, 0.16) 58%, rgba(4, 6, 5, 0.74)),
        linear-gradient(90deg, transparent 54%, rgba(6, 8, 7, 0.42));
}

.article-featured__media img,
.article-mini__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.78) contrast(1.05) brightness(0.74);
    transition: transform 700ms var(--site-ease), filter 500ms ease;
}

.article-featured__media img {
    object-position: 54% 49%;
}

.article-featured__media-label {
    position: absolute;
    z-index: 2;
    left: 18px;
    bottom: 15px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.article-featured__copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: 24px;
}

.article-meta {
    margin: 0;
    color: var(--site-gold-bright);
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.article-featured__copy h3,
.article-mini__copy h3 {
    margin: 0;
    color: #f4f4f2;
}

.article-featured__copy h3 {
    margin-top: 10px;
    font-size: clamp(22px, 2.3vw, 31px);
    line-height: 1.04;
    letter-spacing: -1.2px;
    font-weight: 850;
}

.article-summary {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    line-height: 1.5;
}

.article-link,
.article-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1px;
}

.article-link {
    margin-top: 18px;
}

.article-link svg,
.article-view-all svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--site-gold-bright);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.article-link--pending,
.article-view-all {
    cursor: default;
}

.article-view-all--active {
    cursor: pointer;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .article-view-all--active:hover,
    .article-view-all--active:focus-visible {
        color: var(--site-gold-bright);
    }
}

.article-section__secondary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 72px;
}

.article-mini {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    min-height: 137px;
    overflow: hidden;
    border-radius: 18px;
}

.article-mini__media::after {
    background: linear-gradient(90deg, rgba(4, 6, 5, 0.04), rgba(4, 6, 5, 0.46));
}

.article-mini__media--road img {
    object-position: 42% 54%;
}

.article-mini__media--family img {
    object-position: 70% 48%;
    transform: scale(1.08);
}

.article-mini__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 17px 16px;
}

.article-mini__copy h3 {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.18;
    letter-spacing: -0.35px;
    font-weight: 800;
}

.article-view-all {
    align-self: flex-end;
    min-height: 44px;
    margin-top: 2px;
}

.article-section__index {
    position: absolute;
    z-index: 3;
    right: 42px;
    bottom: 24px;
    color: rgba(255, 255, 255, 0.24);
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.8px;
}

/* Section-entry motion: content stages in only when Article is the active slide. */
.reveal-step {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    filter: blur(5px);
    transition:
        opacity 520ms var(--site-ease),
        transform 620ms var(--site-ease),
        filter 520ms ease;
    transition-delay: 0ms;
}

.article-section__secondary .reveal-step {
    transform: translate3d(28px, 0, 0);
}

.article-section.is-active .reveal-step {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.article-section.is-active .reveal-step--1 { transition-delay: 90ms; }
.article-section.is-active .reveal-step--2 { transition-delay: 170ms; }
.article-section.is-active .reveal-step--3 { transition-delay: 270ms; }
.article-section.is-active .reveal-step--4 { transition-delay: 390ms; }
.article-section.is-active .reveal-step--5 { transition-delay: 490ms; }
.article-section.is-active .reveal-step--6 { transition-delay: 590ms; }

.article-section.is-active .article-featured__media img {
    animation: articleMediaSettle 900ms var(--site-ease) both 220ms;
}

@media (hover: hover) and (pointer: fine) {
    .article-featured:hover,
    .article-mini:hover {
        border-color: rgba(230, 184, 63, 0.23);
    }

    .article-featured:hover .article-featured__media img,
    .article-mini:hover .article-mini__media img {
        transform: scale(1.035);
        filter: saturate(0.9) contrast(1.04) brightness(0.81);
    }
}

@keyframes articlePatternDrift {
    from {
        background-position: 0 0, 0 0, 0 0;
        transform: perspective(900px) rotateX(58deg) rotateZ(-8deg) scale(1.34) translate3d(-1.2%, -0.8%, 0);
    }
    to {
        background-position: 18px 10px, 14px 18px, 26px 18px;
        transform: perspective(900px) rotateX(58deg) rotateZ(-7deg) scale(1.36) translate3d(1.2%, 0.8%, 0);
    }
}

@keyframes articleAmbientFloat {
    from {
        transform: translate3d(-2%, -2%, 0) scale(0.96);
        opacity: 0.10;
    }
    to {
        transform: translate3d(4%, 3%, 0) scale(1.06);
        opacity: 0.17;
    }
}

@keyframes articleMediaSettle {
    from {
        transform: scale(1.045);
        filter: saturate(0.64) contrast(1.06) brightness(0.64) blur(1.8px);
    }
    to {
        transform: scale(1);
        filter: saturate(0.78) contrast(1.05) brightness(0.74) blur(0);
    }
}

@media (max-width: 1080px) and (min-width: 761px) {
    .article-section__inner {
        grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.78fr);
        gap: 22px;
        padding-inline: 28px;
    }

    .article-featured {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .article-featured__media {
        min-height: 210px;
    }

    .article-featured__copy {
        padding: 18px 20px 20px;
    }

    .article-section__index {
        right: 28px;
    }
}

@media (min-width: 761px) and (max-height: 900px) {
    .article-section__inner {
        padding-top: 86px;
        padding-bottom: 50px;
    }

    .article-section__title {
        margin-top: 10px;
        font-size: clamp(50px, min(5.6vw, 8.7vh), 70px);
    }

    .article-featured {
        min-height: 250px;
        margin-top: 17px;
    }

    .article-featured__copy {
        padding: 18px 20px;
    }

    .article-summary {
        margin-top: 9px;
        font-size: 12px;
    }

    .article-link {
        margin-top: 13px;
    }

    .article-section__secondary {
        gap: 11px;
        padding-top: 54px;
    }

    .article-mini {
        min-height: 118px;
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .article-mini__copy {
        padding: 14px;
    }
}

@media (max-width: 760px) {
    html {
        scroll-snap-type: y mandatory;
    }

    .article-section__pattern {
        inset: -18%;
        opacity: 0.30;
        background-size: 58px 58px, 58px 58px, 260px 260px;
        transform: perspective(850px) rotateX(62deg) rotateZ(-9deg) scale(1.48);
    }

    .article-section__ambient {
        width: 82vw;
        filter: blur(68px);
    }

    .article-section__ambient--one {
        top: -7%;
        right: -34%;
    }

    .article-section__ambient--two {
        left: -22%;
        bottom: -21%;
        width: 70vw;
    }

    .article-section__inner {
        display: block;
        min-height: 100vh;
        min-height: 100svh;
        padding: 92px 20px 56px;
    }

    .article-section__eyebrow {
        gap: 10px;
    }

    .article-section__eyebrow p {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .article-section__title {
        margin-top: 11px;
        font-size: clamp(45px, 13vw, 54px);
        line-height: 0.91;
        letter-spacing: -3px;
    }

    .article-featured {
        grid-template-columns: 1fr;
        min-height: 0;
        margin-top: 17px;
        border-radius: 18px;
    }

    .article-featured__media {
        height: 186px;
    }

    .article-featured__media-label {
        left: 13px;
        bottom: 11px;
        font-size: 7px;
        letter-spacing: 1.25px;
    }

    .article-featured__copy {
        padding: 15px 16px 16px;
    }

    .article-featured__copy h3 {
        margin-top: 8px;
        font-size: 21px;
    }

    .article-summary {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.45;
    }

    .article-link {
        margin-top: 12px;
        font-size: 9px;
    }

    .article-section__secondary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 10px;
        padding-top: 0;
    }

    .article-mini {
        display: block;
        min-height: 0;
        border-radius: 14px;
    }

    .article-mini__media {
        height: 72px;
    }

    .article-mini__copy {
        min-height: 80px;
        padding: 10px 11px 11px;
    }

    .article-mini__copy .article-meta {
        font-size: 7px;
    }

    .article-mini__copy h3 {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.18;
    }

    .article-view-all {
        grid-column: 1 / -1;
        justify-self: end;
        min-height: 34px;
        margin-top: -1px;
        font-size: 9px;
    }

    .article-section__index {
        right: 20px;
        bottom: 17px;
        font-size: 8px;
    }

    .article-section__secondary .reveal-step {
        transform: translate3d(0, 18px, 0);
    }
}

@media (max-width: 760px) and (max-height: 810px) {
    .article-section {
        min-height: 810px;
    }

    .article-section__inner {
        min-height: 810px;
        padding-top: 82px;
        padding-bottom: 44px;
    }

    .article-section__title {
        font-size: 43px;
    }

    .article-featured__media {
        height: 156px;
    }

    .article-featured__copy h3 {
        font-size: 19px;
    }

    .article-summary {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .article-mini__media {
        height: 60px;
    }

    .article-mini__copy {
        min-height: 70px;
    }
}

@media (max-width: 370px) {
    .article-section__inner {
        padding-inline: 16px;
    }

    .article-section__title {
        font-size: 42px;
    }

    .article-featured__media {
        height: 170px;
    }

    .article-mini__copy h3 {
        font-size: 10.5px;
    }

    .article-section__index {
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .article-section__pattern,
    .article-section__ambient,
    .article-section.is-active .article-featured__media img {
        animation: none !important;
    }

    .reveal-step,
    .article-section__secondary .reveal-step {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — ARTICLE REFINEMENT + SMART CIRCUIT LOADER (v2.29.55)
   ====================================================================== */

/* Smart loader: hidden by default; the head bootstrap reveals it only when
   the initial page load is still pending after the delay threshold. */
.site-loader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--site-gold-bright);
    background:
        radial-gradient(circle at 50% 46%, rgba(230, 184, 63, 0.055), transparent 28%),
        linear-gradient(145deg, #090c0a 0%, #050706 58%, #030403 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 420ms var(--site-ease),
        visibility 0s linear 420ms;
}

.site-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at center, #000 0 42%, transparent 76%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0 42%, transparent 76%);
}

html.site-loader-visible {
    overflow: hidden;
}

html.site-loader-visible .site-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

html.site-loader-leaving .site-loader {
    opacity: 0;
    transform: scale(1.018);
    filter: blur(2px);
    pointer-events: none;
}

.site-loader__board {
    position: relative;
    width: min(340px, 78vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    transform: translateZ(0);
}

.site-loader__circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(230, 184, 63, 0.18));
}

.site-loader__trace {
    opacity: 0.26;
    stroke-dasharray: 0.16 0.84;
    stroke-dashoffset: 1;
    animation: siteLoaderTrace 1.75s linear infinite;
}

.site-loader__trace--2,
.site-loader__trace--6,
.site-loader__trace--8 { animation-delay: -0.32s; }

.site-loader__trace--3,
.site-loader__trace--5,
.site-loader__trace--9 { animation-delay: -0.66s; }

.site-loader__trace--4,
.site-loader__trace--7,
.site-loader__trace--10 { animation-delay: -0.98s; }

.site-loader__nodes {
    fill: var(--site-gold-bright);
    stroke: none;
    opacity: 0.42;
    animation: siteLoaderNodes 1.8s ease-in-out infinite alternate;
}

.site-loader__chip {
    position: relative;
    display: grid;
    place-items: center;
    width: 116px;
    aspect-ratio: 1;
    border: 1px solid rgba(241, 200, 79, 0.34);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 48%),
        rgba(8, 10, 9, 0.84);
    box-shadow:
        0 26px 65px rgba(0, 0, 0, 0.42),
        0 0 0 9px rgba(230, 184, 63, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 40px rgba(230, 184, 63, 0.025);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    animation: siteLoaderChip 2.4s var(--site-ease) infinite alternate;
}

.site-loader__chip::before,
.site-loader__chip::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(230, 184, 63, 0.13);
    border-radius: inherit;
}

.site-loader__chip::before {
    inset: -9px;
}

.site-loader__chip::after {
    inset: -18px;
    opacity: 0.42;
}

.site-loader__chip-glow {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: rgba(230, 184, 63, 0.16);
    filter: blur(24px);
    animation: siteLoaderGlow 1.9s ease-in-out infinite alternate;
}

.site-loader__chip img {
    position: relative;
    z-index: 1;
    display: block;
    width: 72px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 7px 18px rgba(0, 0, 0, 0.38));
}

@keyframes siteLoaderTrace {
    0% {
        stroke-dashoffset: 1;
        opacity: 0.16;
    }
    42% {
        opacity: 0.88;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.16;
    }
}

@keyframes siteLoaderNodes {
    from {
        opacity: 0.26;
        filter: drop-shadow(0 0 2px rgba(241, 200, 79, 0.25));
    }
    to {
        opacity: 0.72;
        filter: drop-shadow(0 0 9px rgba(241, 200, 79, 0.72));
    }
}

@keyframes siteLoaderChip {
    from {
        transform: scale(0.985);
        border-color: rgba(241, 200, 79, 0.25);
    }
    to {
        transform: scale(1.015);
        border-color: rgba(241, 200, 79, 0.48);
    }
}

@keyframes siteLoaderGlow {
    from { opacity: 0.28; transform: scale(0.86); }
    to { opacity: 0.72; transform: scale(1.12); }
}

/* The Hero scroll cue belongs only to the active Hero slide. This prevents
   the ring/line from leaking into the next slide during mobile transitions. */
.scroll-cue {
    transition:
        opacity 260ms ease,
        transform 360ms var(--site-ease);
}

.hero:not(.is-active) .scroll-cue {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    pointer-events: none;
}

/* Article background: still photo-free, but now clearly alive. */
.article-section {
    background:
        radial-gradient(circle at 82% 24%, rgba(230, 184, 63, 0.10), transparent 31%),
        radial-gradient(circle at 12% 78%, rgba(230, 184, 63, 0.055), transparent 34%),
        linear-gradient(135deg, #0d100e 0%, #070908 46%, #040605 100%);
}

.article-section::after {
    content: '';
    position: absolute;
    z-index: -2;
    top: -22%;
    bottom: -22%;
    left: -32%;
    width: 42%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(108deg, transparent 5%, rgba(241, 200, 79, 0.05) 36%, rgba(241, 200, 79, 0.18) 50%, rgba(241, 200, 79, 0.045) 64%, transparent 94%);
    filter: blur(32px);
    transform: skewX(-14deg);
    animation: articleGoldSweep 11s ease-in-out infinite;
}

.article-section__pattern {
    inset: -16%;
    opacity: 0.54;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.040) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.036) 1px, transparent 1px),
        repeating-linear-gradient(135deg, transparent 0 74px, rgba(230, 184, 63, 0.080) 75px 76px, transparent 77px 150px);
    background-size: 68px 68px, 68px 68px, 300px 300px;
    animation: articlePatternDriftV22955 15s linear infinite;
}

.article-section__pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.46;
    background-image:
        radial-gradient(circle, rgba(241, 200, 79, 0.25) 0 1px, transparent 1.4px),
        linear-gradient(115deg, transparent 0 47%, rgba(230, 184, 63, 0.050) 48% 49%, transparent 50% 100%);
    background-size: 136px 136px, 260px 260px;
    background-position: 0 0, 0 0;
    animation: articleCircuitDrift 20s linear infinite reverse;
}

.article-section__pattern::after {
    opacity: 0.72;
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 52px, rgba(255, 255, 255, 0.024) 53px 54px, transparent 55px 108px);
}

.article-section__ambient {
    opacity: 0.21;
    filter: blur(72px);
    animation-duration: 11s;
}

.article-section__ambient--two {
    opacity: 0.14;
}

@keyframes articlePatternDriftV22955 {
    0% {
        background-position: 0 0, 0 0, 0 0;
        transform: perspective(900px) rotateX(58deg) rotateZ(-8deg) scale(1.36) translate3d(-2.2%, -1.2%, 0);
    }
    50% {
        background-position: 34px 18px, 20px 34px, 46px 26px;
        transform: perspective(900px) rotateX(58deg) rotateZ(-7.2deg) scale(1.39) translate3d(1.4%, 0.8%, 0);
    }
    100% {
        background-position: 68px 36px, 40px 68px, 92px 52px;
        transform: perspective(900px) rotateX(58deg) rotateZ(-8deg) scale(1.36) translate3d(3.2%, 1.8%, 0);
    }
}

@keyframes articleCircuitDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 136px 68px, 260px 130px; }
}

@keyframes articleGoldSweep {
    0%, 12% {
        left: -36%;
        opacity: 0;
    }
    24% {
        opacity: 0.34;
    }
    58% {
        opacity: 0.18;
    }
    78%, 100% {
        left: 112%;
        opacity: 0;
    }
}

/* Extra Article highlights are a desktop-density enhancement only. Mobile
   intentionally keeps the verified 1 featured + 2 highlights composition. */
.article-mini--desktop-extra {
    display: none;
}

.article-mini__media--chapter img {
    object-position: 28% 60%;
}

.article-mini__media--story img {
    object-position: 84% 44%;
    transform: scale(1.08);
}

.article-section.is-active .reveal-step--7 { transition-delay: 660ms; }
.article-section.is-active .reveal-step--8 { transition-delay: 730ms; }

@media (min-width: 1181px) {
    .article-section__inner {
        grid-template-columns: minmax(0, 1.24fr) minmax(510px, 0.88fr);
        gap: clamp(24px, 2.4vw, 38px);
    }

    .article-section__secondary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-content: center;
        padding-top: 66px;
    }

    .article-mini,
    .article-mini--desktop-extra {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 132px;
    }

    .article-mini__copy {
        padding: 14px 13px;
    }

    .article-mini__copy h3 {
        font-size: 14px;
        line-height: 1.17;
    }

    .article-view-all {
        grid-column: 1 / -1;
        justify-self: end;
        margin-top: 0;
    }
}

@media (min-width: 1181px) and (max-height: 900px) {
    .article-section__inner {
        padding-top: 80px;
        padding-bottom: 44px;
    }

    .article-section__secondary {
        gap: 10px;
        padding-top: 50px;
    }

    .article-mini,
    .article-mini--desktop-extra {
        min-height: 112px;
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .article-mini__copy {
        padding: 11px 12px;
    }

    .article-mini__copy h3 {
        font-size: 12.5px;
    }
}

@media (max-width: 760px) {
    .site-loader__board {
        width: min(292px, 78vw);
    }

    .site-loader__chip {
        width: 102px;
        border-radius: 20px;
    }

    .site-loader__chip img {
        width: 64px;
    }

    .article-section__pattern {
        opacity: 0.43;
        background-size: 58px 58px, 58px 58px, 250px 250px;
    }

    .article-section__pattern::before {
        opacity: 0.34;
        background-size: 116px 116px, 230px 230px;
    }

    .article-section::after {
        width: 58%;
        animation-duration: 13s;
    }

    .article-mini--desktop-extra {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-loader__trace,
    .site-loader__nodes,
    .site-loader__chip,
    .site-loader__chip-glow,
    .article-section::after,
    .article-section__pattern::before {
        animation: none !important;
    }

    .site-loader__trace {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        opacity: 0.54;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — EDITORIAL ARTICLE + COMPOSITOR PERFORMANCE (v2.29.56)
   Visual output is preserved on mobile; desktop Article adopts the locked
   editorial panel composition. Motion work is confined to compositor-safe
   transforms/opacity and paused whenever its slide is not visible.
   ====================================================================== */

/* Serve the same Hero composition from a smaller decode surface on phones. */
@media (max-width: 760px) {
    .hero__background {
        background-image: url('/assets/images/site/mot15-hero-mobile.webp');
    }
}

/* Keep animated layers isolated so large fixed patterns do not invalidate
   unrelated content during scroll/slide transitions. */
.article-section__pattern,
.article-section__pattern::before,
.article-section::after,
.article-section__ambient {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.article-section__pattern {
    animation-name: articlePatternCompositorV22956;
    animation-timing-function: ease-in-out;
    will-change: transform;
}

.article-section__pattern::before {
    animation-name: articleCircuitCompositorV22956;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
}

.article-section::after {
    left: -32%;
    animation-name: articleGoldSweepCompositorV22956;
    will-change: transform, opacity;
}

.article-section__ambient {
    will-change: transform, opacity;
}

/* Do no animation work for a slide the visitor cannot see. */
.article-section:not(.is-active)::after,
.article-section:not(.is-active) .article-section__pattern,
.article-section:not(.is-active) .article-section__pattern::before,
.article-section:not(.is-active) .article-section__ambient {
    animation-play-state: paused !important;
}

.article-section.is-active::after,
.article-section.is-active .article-section__pattern,
.article-section.is-active .article-section__pattern::before,
.article-section.is-active .article-section__ambient {
    animation-play-state: running;
}

/* Promote only the short entry transition while Article is active. */
.article-section.is-active .reveal-step {
    will-change: transform, opacity, filter;
}

.article-section:not(.is-active) .reveal-step {
    will-change: auto;
}

.article-section.is-active .article-featured__media img,
.article-section.is-active .article-mini__media img {
    will-change: transform, filter;
}

.article-section:not(.is-active) .article-featured__media img,
.article-section:not(.is-active) .article-mini__media img {
    will-change: auto;
}

/* Loader animations consume no CPU/GPU once the overlay has been dismissed. */
.site-loader__trace,
.site-loader__nodes,
.site-loader__chip,
.site-loader__chip-glow {
    animation-play-state: paused;
}

html.site-loader-visible .site-loader__trace,
html.site-loader-visible .site-loader__nodes,
html.site-loader-visible .site-loader__chip,
html.site-loader-visible .site-loader__chip-glow {
    animation-play-state: running;
}

/* Browsers already throttle hidden tabs, but this is an explicit safety net
   for engines that continue compositor animations in the background. */
html.site-page-hidden .article-section::after,
html.site-page-hidden .article-section__pattern,
html.site-page-hidden .article-section__pattern::before,
html.site-page-hidden .article-section__ambient,
html.site-page-hidden .site-loader__trace,
html.site-page-hidden .site-loader__nodes,
html.site-page-hidden .site-loader__chip,
html.site-page-hidden .site-loader__chip-glow {
    animation-play-state: paused !important;
}

@keyframes articlePatternCompositorV22956 {
    0% {
        transform: perspective(900px) rotateX(58deg) rotateZ(-8deg) scale(1.36) translate3d(-2.2%, -1.2%, 0);
    }
    50% {
        transform: perspective(900px) rotateX(58deg) rotateZ(-7.2deg) scale(1.39) translate3d(1.4%, 0.8%, 0);
    }
    100% {
        transform: perspective(900px) rotateX(58deg) rotateZ(-8deg) scale(1.36) translate3d(3.2%, 1.8%, 0);
    }
}

@keyframes articleCircuitCompositorV22956 {
    0%, 100% {
        transform: translate3d(-1.8%, -1%, 0) scale(1.01);
        opacity: 0.43;
    }
    50% {
        transform: translate3d(2.4%, 1.6%, 0) scale(1.025);
        opacity: 0.50;
    }
}

@keyframes articleGoldSweepCompositorV22956 {
    0%, 12% {
        transform: translate3d(0, 0, 0) skewX(-14deg);
        opacity: 0;
    }
    24% {
        opacity: 0.34;
    }
    58% {
        opacity: 0.18;
    }
    78%, 100% {
        transform: translate3d(345%, 0, 0) skewX(-14deg);
        opacity: 0;
    }
}

/* Locked desktop editorial composition: one featured story + one unified
   glass publication rail. Mobile rules below 760px remain untouched. */
@media (min-width: 1181px) {
    .article-section__inner {
        grid-template-columns: minmax(0, 1.35fr) minmax(430px, 0.78fr);
        gap: clamp(28px, 2.8vw, 46px);
    }

    .article-section__secondary {
        display: flex;
        align-self: center;
        flex-direction: column;
        gap: 0;
        margin-top: 74px;
        padding-top: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 22px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.010) 48%),
            rgba(9, 11, 9, 0.58);
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.055),
            inset 0 0 48px rgba(230, 184, 63, 0.012);
        backdrop-filter: blur(22px) saturate(116%);
        -webkit-backdrop-filter: blur(22px) saturate(116%);
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        position: relative;
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 96px;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .article-section__secondary .article-mini:not(:last-of-type)::after {
        content: '';
        position: absolute;
        z-index: 3;
        right: 16px;
        bottom: 0;
        left: 16px;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.085) 12%, rgba(230, 184, 63, 0.075) 84%, transparent);
    }

    .article-section__secondary .article-mini__copy {
        padding: 14px 17px;
    }

    .article-section__secondary .article-mini__copy h3 {
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.18;
        letter-spacing: -0.3px;
    }

    .article-section__secondary .article-meta {
        font-size: 8px;
        letter-spacing: 1.15px;
    }

    .article-view-all {
        align-self: stretch;
        justify-content: flex-end;
        min-height: 56px;
        margin-top: 0;
        padding: 0 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        background: linear-gradient(90deg, transparent, rgba(230, 184, 63, 0.025));
    }

    @media (hover: hover) and (pointer: fine) {
        .article-section__secondary .article-mini:hover {
            border-color: transparent;
            background: rgba(255, 255, 255, 0.025);
        }
    }
}

@media (min-width: 1181px) and (max-height: 900px) {
    .article-section__secondary {
        margin-top: 56px;
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        min-height: 84px;
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .article-section__secondary .article-mini__copy {
        padding: 11px 14px;
    }

    .article-section__secondary .article-mini__copy h3 {
        font-size: 12.5px;
    }

    .article-view-all {
        min-height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-section__pattern,
    .article-section__pattern::before,
    .article-section::after,
    .article-section__ambient {
        animation: none !important;
        will-change: auto;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — SEPARATED EDITORIAL CARDS + LOW-END RENDER PASS (v2.29.57)
   Final visual language is preserved. The desktop publication rail remains
   aligned with v2.29.56, but each highlight is visibly independent. Runtime
   work is reduced during slide movement and on constrained mobile hardware.
   ====================================================================== */

/* Offscreen Article can keep its full scroll geometry without paying paint
   cost until it approaches the viewport. Unsupported engines ignore this. */
@supports (content-visibility: auto) {
    .article-section {
        content-visibility: auto;
        contain-intrinsic-size: 100vh;
        contain-intrinsic-size: 100svh;
    }
}

/* Large compositor hints are useful only while the layer is actually moving.
   Keeping them alive permanently can exhaust texture memory on low-end GPUs. */
.article-section__pattern,
.article-section__pattern::before,
.article-section::after,
.article-section__ambient,
.article-section .reveal-step,
.article-section .article-featured__media img,
.article-section .article-mini__media img {
    will-change: auto;
}

html:not(.site-slide-moving) .article-section.is-active .article-section__pattern {
    will-change: transform;
}

/* The root receives site-slide-moving during wheel/swipe/smooth-scroll. Pause
   decorative work while the browser is composing the slide transition, then
   resume the exact same background once the section has settled. */
html.site-slide-moving .article-section::after,
html.site-slide-moving .article-section__pattern,
html.site-slide-moving .article-section__pattern::before,
html.site-slide-moving .article-section__ambient {
    animation-play-state: paused !important;
}

html.site-slide-moving .article-section.is-active .reveal-step {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: none !important;
}

html.site-slide-moving .article-section.is-active .article-section__secondary .reveal-step {
    transform: translate3d(24px, 0, 0);
}

/* Desktop: retain the current editorial left/right composition while making
   the four highlights visually independent again. A single invisible blur
   plane on the rail preserves the glass character with one backdrop capture
   instead of four separate captures. */
@media (min-width: 1181px) {
    .article-section__secondary {
        position: relative;
        display: flex;
        align-self: center;
        flex-direction: column;
        gap: 9px;
        margin-top: 62px;
        padding-top: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: blur(22px) saturate(116%);
        -webkit-backdrop-filter: blur(22px) saturate(116%);
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        position: relative;
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 88px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 17px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.010) 48%),
            rgba(9, 11, 9, 0.58);
        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.055),
            inset 0 0 34px rgba(230, 184, 63, 0.010);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .article-section__secondary .article-mini::after {
        content: none !important;
    }

    .article-section__secondary .article-mini__copy {
        padding: 12px 15px;
    }

    .article-section__secondary .article-mini__copy h3 {
        margin-top: 6px;
        font-size: 13.5px;
        line-height: 1.17;
        letter-spacing: -0.28px;
    }

    .article-section__secondary .article-meta {
        font-size: 8px;
        letter-spacing: 1.12px;
    }

    .article-view-all {
        align-self: flex-end;
        justify-content: flex-end;
        min-height: 44px;
        margin-top: 2px;
        padding: 0 2px;
        border-top: 0;
        background: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
        .article-section__secondary .article-mini:hover {
            border-color: rgba(230, 184, 63, 0.23);
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.014) 48%),
                rgba(9, 11, 9, 0.60);
        }
    }
}

@media (min-width: 1181px) and (max-height: 900px) {
    .article-section__secondary {
        gap: 7px;
        margin-top: 48px;
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        min-height: 78px;
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .article-section__secondary .article-mini__copy {
        padding: 9px 13px;
    }

    .article-section__secondary .article-mini__copy h3 {
        font-size: 12.2px;
    }

    .article-view-all {
        min-height: 40px;
    }
}

/* Mobile keeps the verified 1 featured + 2 highlight composition. The two
   small cards share one invisible backdrop capture, so their visible borders,
   spacing, color and glass treatment remain unchanged while GPU work drops. */
@media (max-width: 760px) {
    .article-section__secondary {
        backdrop-filter: blur(22px) saturate(116%);
        -webkit-backdrop-filter: blur(22px) saturate(116%);
    }

    .article-section__secondary .article-mini {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Constrained devices keep the same pattern, glow and gold sweep, but the
       secondary ambient/circuit layers stay at their resting frame instead of
       maintaining several independent full-screen animations. */
    html.site-runtime-constrained .article-section__ambient,
    html.site-runtime-constrained .article-section__pattern::before {
        animation: none !important;
        will-change: auto !important;
    }

    html.site-runtime-constrained .reveal-step {
        filter: none;
        transition-property: opacity, transform;
    }

    html.site-runtime-constrained .article-section.is-active .article-featured__media img {
        animation-name: articleMediaSettleV22957Lite;
    }
}

@keyframes articleMediaSettleV22957Lite {
    from {
        transform: scale(1.025);
        filter: saturate(0.78) contrast(1.05) brightness(0.74);
    }
    to {
        transform: scale(1);
        filter: saturate(0.78) contrast(1.05) brightness(0.74);
    }
}

/* ======================================================================
   PUBLIC WEBSITE — GLOBAL NAV + NATIVE GALLERY SNAP + 3-CARD EDITORIAL (v2.29.58)
   The browser owns wheel/touch movement end-to-end. JavaScript observes the
   active slide only; it no longer forces the viewport during a gesture.
   ====================================================================== */

html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
    overscroll-behavior-y: contain;
}

body {
    overscroll-behavior-y: contain;
}

.site-shell {
    touch-action: pan-y;
}

.site-slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Navigation is a document-level layer now, not a child of the Hero slide.
   It therefore remains available over every current/future section. */
.site-header {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: auto;
    isolation: isolate;
}

/* v2.29.57's offscreen paint skipping was useful for static scrolling, but it
   can expose an unpainted frame while a low-end device is physically dragging
   into the next slide. There are only two slides at this stage, so Article is
   kept paint-ready at all times. */
@supports (content-visibility: auto) {
    .article-section {
        content-visibility: visible;
        contain-intrinsic-size: auto;
    }
}

/* Keep Article content present while the visitor is physically dragging the
   page, exactly like a photo already exists beside the current photo in a
   gallery. Entry motion is now intentionally subtle rather than hiding cards. */
.article-section .reveal-step {
    opacity: 0.985;
    filter: none;
    transform: translate3d(0, 4px, 0);
    transition:
        opacity 360ms var(--site-ease),
        transform 420ms var(--site-ease);
    transition-delay: 0ms;
}

.article-section__secondary .reveal-step {
    transform: translate3d(6px, 0, 0);
}

.article-section.is-active .reveal-step,
html.site-native-scrolling .article-section .reveal-step,
html.site-native-scrolling .article-section__secondary .reveal-step {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
}

/* During a physical gesture only decorative motion pauses; visible section
   pixels remain fully painted. This avoids motion competing with the scroll
   compositor without producing the blank/glitch frame seen in v2.29.57. */
html.site-native-scrolling .article-section::after,
html.site-native-scrolling .article-section__pattern,
html.site-native-scrolling .article-section__pattern::before,
html.site-native-scrolling .article-section__ambient {
    animation-play-state: paused !important;
}

/* Desktop composition requested by the user: one large featured story on the
   left and exactly three independent highlight cards stacked on the right. */
@media (min-width: 1181px) {
    .article-section__inner {
        grid-template-columns: minmax(0, 1.35fr) minmax(430px, 0.78fr);
        gap: clamp(28px, 2.8vw, 46px);
    }

    .article-section__secondary {
        position: relative;
        display: flex;
        align-self: center;
        flex-direction: column;
        gap: 14px;
        margin-top: 62px;
        padding-top: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: blur(22px) saturate(116%);
        -webkit-backdrop-filter: blur(22px) saturate(116%);
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        position: relative;
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 104px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 18px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.010) 48%),
            rgba(9, 11, 9, 0.58);
        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.055),
            inset 0 0 34px rgba(230, 184, 63, 0.010);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .article-section__secondary .article-mini::after {
        content: none !important;
    }

    .article-section__secondary .article-mini__copy {
        padding: 14px 16px;
    }

    .article-section__secondary .article-mini__copy h3 {
        margin-top: 7px;
        font-size: 13.5px;
        line-height: 1.18;
        letter-spacing: -0.28px;
    }

    .article-section__secondary .article-meta {
        font-size: 8px;
        letter-spacing: 1.12px;
    }

    .article-view-all {
        align-self: flex-end;
        justify-content: flex-end;
        min-height: 44px;
        margin-top: 0;
        padding: 0 2px;
        border-top: 0;
        background: transparent;
    }
}

@media (min-width: 1181px) and (max-height: 900px) {
    .article-section__secondary {
        gap: 11px;
        margin-top: 48px;
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        min-height: 96px;
        grid-template-columns: 98px minmax(0, 1fr);
    }

    .article-section__secondary .article-mini__copy {
        padding: 12px 14px;
    }

    .article-section__secondary .article-mini__copy h3 {
        font-size: 12.5px;
    }
}

@media (max-width: 760px) {
    /* Keep the verified mobile Article composition (featured + 2 highlights)
       and make the global burger/navigation layer explicitly persistent. */
    .site-header {
        z-index: 200;
    }

    .site-nav {
        z-index: 210;
    }

    .nav-toggle {
        z-index: 220;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-section .reveal-step,
    .article-section__secondary .reveal-step {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — STATIC ARTICLE MOTION + SKETCH-ALIGNED DESKTOP (v2.29.59)
   User-locked direction:
   - Navbar remains unchanged.
   - Article background keeps its visual pattern but has no continuous motion.
   - Article content/cards have no slide-entry animation.
   - Desktop keeps one featured card left + three independent cards right.
   - The right stack deliberately starts slightly above the featured card and
     ends slightly below it, matching the supplied layout sketch.
   - Mobile composition remains unchanged.
   ====================================================================== */

/* Article is fully painted in its final state before the viewport reaches it.
   This removes the visual fight between section motion and native scrolling. */
.article-section .reveal-step,
.article-section__secondary .reveal-step,
.article-section.is-active .reveal-step,
html.site-native-scrolling .article-section .reveal-step,
html.site-native-scrolling .article-section__secondary .reveal-step {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
    animation: none !important;
    will-change: auto !important;
}

/* Preserve the elegant static pattern/glow composition, but remove every
   Article background animation and compositor promotion. */
.article-section::after,
.article-section__pattern,
.article-section__pattern::before,
.article-section__pattern::after,
.article-section__ambient,
.article-section__ambient--one,
.article-section__ambient--two,
.article-section.is-active::after,
.article-section.is-active .article-section__pattern,
.article-section.is-active .article-section__pattern::before,
.article-section.is-active .article-section__ambient,
html.site-native-scrolling .article-section::after,
html.site-native-scrolling .article-section__pattern,
html.site-native-scrolling .article-section__pattern::before,
html.site-native-scrolling .article-section__ambient {
    animation: none !important;
    animation-play-state: paused !important;
    will-change: auto !important;
}

/* The previous moving gold sweep rested at opacity:0 when animation stopped.
   Keep it disabled completely so the background is deterministic/static. */
.article-section::after {
    display: none !important;
}

/* Disable only the media settle animation used when entering Article.
   Desktop hover interaction may still use the existing lightweight transition. */
.article-section.is-active .article-featured__media img,
.article-section.is-active .article-mini__media img,
html.site-runtime-constrained .article-section.is-active .article-featured__media img {
    animation: none !important;
    will-change: auto !important;
}

@media (min-width: 1181px) {
    /* Align both columns from one common top edge. The right stack then uses
       a controlled top offset relative to the heading/featured geometry. */
    .article-section__inner {
        align-items: start;
        grid-template-columns: minmax(0, 1.35fr) minmax(430px, 0.78fr);
        gap: clamp(28px, 2.8vw, 46px);
    }

    .article-section__secondary {
        display: flex;
        align-self: start;
        flex-direction: column;
        gap: clamp(16px, 2vh, 20px);
        margin-top: 0;
        padding-top: clamp(106px, 12vh, 120px);
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        display: grid;
        grid-template-columns: clamp(108px, 8vw, 124px) minmax(0, 1fr);
        min-height: clamp(124px, 16vh, 138px);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 18px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.010) 48%),
            rgba(9, 11, 9, 0.58);
        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.055),
            inset 0 0 34px rgba(230, 184, 63, 0.010);
        backdrop-filter: blur(22px) saturate(116%);
        -webkit-backdrop-filter: blur(22px) saturate(116%);
    }

    .article-section__secondary .article-mini__copy {
        padding: clamp(13px, 1.5vh, 16px) 17px;
    }

    .article-section__secondary .article-mini__copy h3 {
        margin-top: 7px;
        font-size: clamp(12.5px, 1vw, 14px);
        line-height: 1.18;
        letter-spacing: -0.28px;
    }

    .article-view-all {
        align-self: flex-end;
        justify-content: flex-end;
        min-height: 36px;
        margin-top: 0;
        padding: 0 2px;
    }
}

/* Common laptop/browser heights: preserve the same top/bottom overshoot while
   ensuring View All remains inside the slide. */
@media (min-width: 1181px) and (max-height: 900px) {
    .article-section__secondary {
        gap: 16px;
        padding-top: 106px;
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        min-height: 128px;
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .article-section__secondary .article-mini__copy {
        padding: 13px 15px;
    }

    .article-section__secondary .article-mini__copy h3 {
        font-size: 12.5px;
    }
}

/* Mobile stays visually identical; only Article-specific entrance/background
   motion is removed by the global rules above. */

/* ======================================================================
   PUBLIC WEBSITE — GALLERY HIGHLIGHT SLIDE (v2.29.60)
   User-locked direction:
   - Gallery must feel visually distinct from Article.
   - Featured album occupies the right side on desktop.
   - Album mosaic occupies the left side.
   - No section-entry/background animation; native scroll-snap stays primary.
   - Gallery images use existing WebP assets until the Gallery data source exists.
   ====================================================================== */

.gallery-section {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 22%, rgba(230, 184, 63, 0.075), transparent 28%),
        radial-gradient(circle at 14% 84%, rgba(230, 184, 63, 0.035), transparent 30%),
        linear-gradient(135deg, #0c0f0d 0%, #070908 48%, #050706 100%);
}

.gallery-section::before {
    content: '';
    position: absolute;
    z-index: -3;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 7, 6, 0.36), rgba(5, 7, 6, 0.04) 48%, rgba(5, 7, 6, 0.28)),
        linear-gradient(180deg, rgba(5, 7, 6, 0.18), rgba(5, 7, 6, 0.72));
}

.gallery-section__pattern {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        repeating-linear-gradient(135deg, transparent 0 88px, rgba(230, 184, 63, 0.025) 89px 90px, transparent 91px 178px);
    background-size: 64px 64px, 64px 64px, 356px 356px;
    transform: perspective(1000px) rotateX(60deg) rotateZ(-7deg) scale(1.35);
    transform-origin: 50% 48%;
}

.gallery-section__inner {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(132px, 15vh, 160px) 42px clamp(52px, 6vh, 68px);
}

.gallery-section__heading {
    margin: 0 0 clamp(20px, 2.6vh, 28px);
}

.gallery-section__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--site-gold-bright);
}

.gallery-section__eyebrow span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--site-gold);
}

.gallery-section__eyebrow p {
    margin: 0;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 2.15px;
}

.gallery-section__title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 9px 0 0;
    font-size: clamp(48px, 5.4vw, 76px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.gallery-section__title span,
.gallery-section__title strong {
    display: block;
}

.gallery-section__title span {
    color: var(--site-text);
}

.gallery-section__title strong {
    color: var(--site-gold-bright);
    font: inherit;
}

.gallery-section__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.35fr);
    gap: clamp(18px, 2.2vw, 30px);
    height: clamp(390px, 50vh, 500px);
    min-height: 0;
}

.gallery-section__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 44px;
    margin-top: clamp(10px, 1.4vh, 16px);
}

.gallery-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: 1.08fr 0.92fr 0.84fr;
    gap: 11px;
    min-width: 0;
    min-height: 0;
}

.gallery-tile,
.gallery-featured {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.105);
    background: rgba(10, 12, 10, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 20px 46px rgba(0, 0, 0, 0.22);
}

.gallery-tile {
    border-radius: 17px;
}

.gallery-tile--touring {
    grid-row: 1 / 3;
}

.gallery-tile--community {
    grid-column: 1 / 3;
}

.gallery-tile img,
.gallery-featured img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-tile--touring img {
    object-position: 31% 55%;
}

.gallery-tile--gathering img {
    object-position: 60% 42%;
}

.gallery-tile--chapter img {
    object-position: 76% 52%;
}

.gallery-tile--community img {
    object-position: center 65%;
}

.gallery-tile::after,
.gallery-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gallery-tile::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 32%, rgba(1, 3, 2, 0.74) 100%);
}

.gallery-tile__caption {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 11px;
    min-width: 0;
}

.gallery-tile__caption small,
.gallery-tile__caption strong {
    display: block;
}

.gallery-tile__caption small {
    color: var(--site-gold-bright);
    font-size: 7.5px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: 1.05px;
}

.gallery-tile__caption strong {
    margin-top: 4px;
    color: #f3f4f1;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 820;
    line-height: 1.15;
    letter-spacing: -0.018em;
}

.gallery-featured {
    border-radius: 23px;
}

.gallery-featured img {
    object-position: 56% 52%;
    filter: brightness(0.78) saturate(0.92);
}

.gallery-featured::after {
    background:
        linear-gradient(180deg, rgba(2, 4, 3, 0.02) 25%, rgba(2, 4, 3, 0.10) 48%, rgba(2, 4, 3, 0.86) 100%),
        linear-gradient(90deg, rgba(2, 4, 3, 0.12), rgba(2, 4, 3, 0.02) 62%);
}

.gallery-featured__badge {
    position: absolute;
    z-index: 3;
    top: 17px;
    left: 17px;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(8, 10, 8, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
    color: var(--site-gold-bright);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.25px;
}

.gallery-featured__copy {
    position: absolute;
    z-index: 3;
    left: 22px;
    right: 22px;
    bottom: 21px;
    max-width: 620px;
}

.gallery-featured__copy > p {
    margin: 0;
    color: var(--site-gold-bright);
    font-size: 8.5px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: 1.2px;
}

.gallery-featured__copy h3 {
    margin: 7px 0 0;
    color: #f5f6f3;
    font-size: clamp(25px, 2.25vw, 34px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
}

.gallery-featured__description {
    display: block;
    max-width: 500px;
    margin-top: 9px;
    color: rgba(244, 244, 242, 0.72);
    font-size: 12px;
    line-height: 1.48;
}

.gallery-featured__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 14px;
}

.gallery-open-album {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    font-size: 9.5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.9px;
    white-space: nowrap;
}

.gallery-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 44px;
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.gallery-open-album {
    padding: 0 15px;
    border: 1px solid rgba(241, 200, 79, 0.72);
    border-radius: 12px;
    background: linear-gradient(180deg, #efc452, #d9a82f);
    color: #090a08;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 213, 0.42),
        0 9px 20px rgba(0, 0, 0, 0.22);
}

.gallery-open-album svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gallery-view-all svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--site-gold-bright);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gallery-section__index {
    position: absolute;
    z-index: 3;
    right: 42px;
    bottom: 24px;
    color: rgba(255, 255, 255, 0.23);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.65px;
}

@media (min-width: 1181px) and (max-height: 900px) {
    .gallery-section__inner {
        padding-top: 116px;
        padding-bottom: 44px;
    }

    .gallery-section__heading {
        margin-bottom: 18px;
    }

    .gallery-section__title {
        margin-top: 7px;
        font-size: clamp(46px, 4.7vw, 64px);
    }

    .gallery-section__layout {
        height: clamp(350px, 49vh, 430px);
    }

    .gallery-featured__copy h3 {
        font-size: clamp(23px, 2vw, 30px);
    }
}

@media (max-width: 1180px) {
    .gallery-section__inner {
        padding-inline: 28px;
    }

    .gallery-section__layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

@media (max-width: 760px) {
    .gallery-section__pattern {
        opacity: 0.20;
        background-size: 54px 54px, 54px 54px, 300px 300px;
    }

    .gallery-section__inner {
        display: flex;
        min-height: 100svh;
        flex-direction: column;
        padding: 91px 20px 24px;
    }

    .gallery-section__heading {
        margin-bottom: 14px;
    }

    .gallery-section__eyebrow {
        gap: 10px;
    }

    .gallery-section__eyebrow span {
        width: 22px;
    }

    .gallery-section__eyebrow p {
        font-size: 8px;
        letter-spacing: 1.65px;
    }

    .gallery-section__title {
        gap: 9px;
        margin-top: 7px;
        font-size: clamp(39px, 12vw, 48px);
    }

    .gallery-section__layout {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    .gallery-featured {
        grid-row: 1;
        min-height: clamp(235px, 33svh, 275px);
        border-radius: 19px;
    }

    .gallery-featured__badge {
        top: 13px;
        left: 13px;
        min-height: 27px;
        padding-inline: 9px;
        font-size: 7px;
    }

    .gallery-featured__copy {
        left: 16px;
        right: 16px;
        bottom: 15px;
    }

    .gallery-featured__copy > p {
        font-size: 7.2px;
        letter-spacing: 0.95px;
    }

    .gallery-featured__copy h3 {
        margin-top: 5px;
        font-size: clamp(21px, 6.3vw, 25px);
    }

    .gallery-featured__description {
        display: none;
    }

    .gallery-featured__actions {
        margin-top: 10px;
    }

    .gallery-open-album {
        min-height: 36px;
        font-size: 8px;
        letter-spacing: 0.7px;
    }

    .gallery-section__footer {
        min-height: 40px;
        margin-top: 8px;
    }

    .gallery-view-all {
        min-height: 40px;
        font-size: 9px;
        letter-spacing: 0.9px;
    }

    .gallery-open-album {
        padding-inline: 12px;
        border-radius: 10px;
    }

    .gallery-mosaic {
        grid-row: 2;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 92px 82px;
        gap: 8px;
    }

    .gallery-tile {
        border-radius: 13px;
    }

    .gallery-tile--touring {
        grid-row: auto;
    }

    .gallery-tile--chapter {
        display: none;
    }

    .gallery-tile--community {
        grid-column: 1 / 3;
    }

    .gallery-tile__caption {
        left: 9px;
        right: 9px;
        bottom: 8px;
    }

    .gallery-tile__caption small {
        font-size: 6.4px;
        letter-spacing: 0.75px;
    }

    .gallery-tile__caption strong {
        margin-top: 2px;
        font-size: 10px;
    }

    .gallery-section__index {
        right: 20px;
        bottom: 11px;
        font-size: 7px;
        letter-spacing: 1.2px;
    }
}

@media (max-width: 380px) {
    .gallery-section__inner {
        padding-inline: 16px;
    }

    .gallery-section__title {
        font-size: 39px;
    }

    .gallery-featured {
        min-height: 230px;
    }

    .gallery-mosaic {
        grid-template-rows: 86px 76px;
    }

}

@media (hover: hover) and (pointer: fine) {
    .gallery-tile,
    .gallery-featured {
        transition: border-color 180ms ease, transform 180ms ease;
    }

    .gallery-tile:hover,
    .gallery-featured:hover {
        border-color: rgba(230, 184, 63, 0.34);
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-tile,
    .gallery-featured {
        transition: none !important;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — ONE GESTURE / ONE SLIDE CONTROLLER (v2.29.61)
   Visuals remain unchanged. On coarse pointers, vertical native panning is
   handed to the lightweight JS slide controller so a swipe can never stop
   between sections or skip multiple sections. Horizontal gestures and pinch
   zoom stay available. Without JS, the existing native scroll-snap remains
   the fallback.
   ====================================================================== */
@media (pointer: coarse) {
    html.site-slide-controller-ready .site-shell {
        touch-action: pan-x pinch-zoom;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — MOBILE GALLERY VERTICAL RHYTHM ALIGNMENT (v2.29.63)
   Mobile only. Match Gallery's vertical flow to the verified Article slide:
   keep the existing visual design, but stop the Gallery content grid from
   stretching to consume the remaining viewport height. The footer CTA now
   follows the mosaic naturally instead of being pushed toward the slide edge.
   Desktop is intentionally untouched.
   ====================================================================== */
@media (max-width: 760px) {
    .gallery-section__inner {
        display: block;
        min-height: 100vh;
        min-height: 100svh;
    }

    .gallery-section__layout {
        flex: none;
        align-content: start;
    }

    .gallery-section__footer {
        margin-top: 10px;
    }
}

/* Short mobile viewports use the same compact rhythm philosophy already used
   by Article: reduce media height rather than creating extra vertical travel. */
@media (max-width: 760px) and (max-height: 810px) {
    .gallery-section {
        min-height: 810px;
    }

    .gallery-section__inner {
        min-height: 810px;
        padding-top: 82px;
        padding-bottom: 44px;
    }

    .gallery-featured {
        min-height: 218px;
    }

    .gallery-mosaic {
        grid-template-rows: 86px 76px;
    }

    .gallery-section__footer {
        margin-top: 8px;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — EVENTS HIGHLIGHT SLIDE (v2.29.64)
   Events has its own visual language: a Featured Event on the left and a
   compact status timeline on the right. The global VIEW ALL EVENTS CTA is
   intentionally outside both cards, matching Article and Gallery hierarchy.
   No section-entry/background animation is introduced; the verified one-
   gesture/one-slide controller remains the only section transition.
   ====================================================================== */

.events-section {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 28%, rgba(230, 184, 63, 0.07), transparent 28%),
        radial-gradient(circle at 12% 86%, rgba(230, 184, 63, 0.03), transparent 30%),
        linear-gradient(135deg, #0d100e 0%, #070908 50%, #050706 100%);
}

.events-section::before {
    content: '';
    position: absolute;
    z-index: -3;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 7, 6, 0.34), rgba(5, 7, 6, 0.04) 54%, rgba(5, 7, 6, 0.30)),
        linear-gradient(180deg, rgba(5, 7, 6, 0.14), rgba(5, 7, 6, 0.72));
}

.events-section__pattern {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.019) 1px, transparent 1px),
        repeating-linear-gradient(118deg, transparent 0 116px, rgba(230, 184, 63, 0.022) 117px 118px, transparent 119px 234px);
    background-size: 64px 64px, 64px 64px, 468px 468px;
    transform: perspective(1000px) rotateX(61deg) rotateZ(-6deg) scale(1.34);
    transform-origin: 50% 48%;
}

.events-section__inner {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(128px, 14.5vh, 156px) 42px clamp(52px, 6vh, 68px);
}

.events-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(20px, 2.5vh, 28px);
}

.events-section__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--site-gold-bright);
}

.events-section__eyebrow span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--site-gold);
}

.events-section__eyebrow p {
    margin: 0;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 2.1px;
}

.events-section__title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 9px 0 0;
    font-size: clamp(48px, 5.4vw, 76px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.events-section__title span,
.events-section__title strong {
    display: block;
}

.events-section__title span {
    color: var(--site-text);
}

.events-section__title strong {
    color: var(--site-gold-bright);
    font: inherit;
}

.events-section__intro {
    max-width: 300px;
    margin: 0 0 3px;
    color: rgba(244, 244, 242, 0.60);
    font-size: 11px;
    font-weight: 520;
    line-height: 1.55;
    text-align: right;
}

.events-section__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(285px, 0.72fr);
    gap: clamp(18px, 2vw, 28px);
    height: clamp(365px, 49vh, 475px);
    min-height: 0;
}

.event-featured {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.105);
    border-radius: 23px;
    background: rgba(9, 11, 9, 0.76);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 20px 46px rgba(0, 0, 0, 0.22);
}

.event-featured > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 53% 52%;
    filter: brightness(0.70) saturate(0.86);
}

.event-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 4, 3, 0.20), rgba(2, 4, 3, 0.015) 58%),
        linear-gradient(180deg, rgba(2, 4, 3, 0.02) 30%, rgba(2, 4, 3, 0.12) 50%, rgba(2, 4, 3, 0.90) 100%);
}

.event-featured__status {
    position: absolute;
    z-index: 3;
    top: 17px;
    left: 17px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(230, 184, 63, 0.30);
    border-radius: 999px;
    background: rgba(8, 10, 8, 0.56);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
    color: var(--site-gold-bright);
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 1.2px;
}

.event-featured__status i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--site-gold-bright);
    box-shadow: 0 0 0 3px rgba(230, 184, 63, 0.12);
}

.event-featured__date {
    position: absolute;
    z-index: 3;
    top: 17px;
    right: 17px;
    display: grid;
    place-items: center;
    min-width: 76px;
    min-height: 72px;
    padding: 9px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 15px;
    background: rgba(8, 10, 8, 0.52);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
    text-align: center;
}

.event-featured__date strong {
    color: var(--site-gold-bright);
    font-size: 28px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.event-featured__date small {
    color: rgba(255, 255, 255, 0.78);
    font-size: 7.4px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.95px;
}

.event-featured__copy {
    position: absolute;
    z-index: 3;
    left: 22px;
    right: 22px;
    bottom: 21px;
    max-width: 680px;
}

.event-featured__copy > p {
    margin: 0;
    color: var(--site-gold-bright);
    font-size: 8.5px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: 1.2px;
}

.event-featured__copy h3 {
    max-width: 610px;
    margin: 7px 0 0;
    color: #f5f6f3;
    font-size: clamp(26px, 2.35vw, 35px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
}

.event-featured__description {
    display: block;
    max-width: 540px;
    margin-top: 9px;
    color: rgba(244, 244, 242, 0.72);
    font-size: 12px;
    line-height: 1.48;
}

.event-featured__action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    margin-top: 14px;
    padding: 0 15px;
    border: 1px solid rgba(241, 200, 79, 0.72);
    border-radius: 12px;
    background: linear-gradient(180deg, #efc452, #d9a82f);
    color: #090a08;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 213, 0.42),
        0 9px 20px rgba(0, 0, 0, 0.22);
    font-size: 9.5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.9px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.event-featured__action svg,
.events-view-all svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.event-featured__action svg {
    stroke: currentColor;
}

.event-timeline {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 20px 19px 18px;
    border-radius: 22px;
    overflow: hidden;
}

.event-timeline > h3 {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 1.25px;
}

.event-timeline__list {
    position: relative;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: calc(100% - 26px);
    margin-top: 16px;
    padding-left: 25px;
}

.event-timeline__list::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 10px;
    left: 6px;
    width: 1px;
    background: linear-gradient(var(--site-gold), rgba(255, 255, 255, 0.12));
}

.event-timeline__item {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 8px 0 10px;
}

.event-timeline__item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.event-timeline__marker {
    position: absolute;
    left: -23px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border: 2px solid var(--site-gold-bright);
    border-radius: 50%;
    background: #0b0e0c;
}

.event-timeline__item p,
.event-timeline__item strong,
.event-timeline__item small {
    display: block;
    margin: 0;
}

.event-timeline__item p {
    color: var(--site-gold-bright);
    font-size: 7.8px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 1px;
}

.event-timeline__item strong {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 820;
    line-height: 1.15;
    letter-spacing: -0.018em;
}

.event-timeline__item small {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.2;
}

.event-timeline__item--completed p,
.event-timeline__item--completed strong,
.event-timeline__item--completed small {
    color: rgba(255, 255, 255, 0.36);
}

.event-timeline__item--completed .event-timeline__marker {
    border-color: rgba(255, 255, 255, 0.28);
}

.events-section__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    margin-top: clamp(10px, 1.4vh, 16px);
}

.events-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 44px;
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.events-view-all svg {
    stroke: var(--site-gold-bright);
}

.events-section__index {
    position: absolute;
    z-index: 3;
    right: 42px;
    bottom: 24px;
    color: rgba(255, 255, 255, 0.23);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.65px;
}

@media (min-width: 1181px) and (max-height: 900px) {
    .events-section__inner {
        padding-top: 114px;
        padding-bottom: 44px;
    }

    .events-section__heading {
        margin-bottom: 18px;
    }

    .events-section__title {
        margin-top: 7px;
        font-size: clamp(46px, 4.7vw, 64px);
    }

    .events-section__layout {
        height: clamp(340px, 48vh, 420px);
    }

    .event-featured__copy h3 {
        font-size: clamp(23px, 2vw, 30px);
    }
}

@media (max-width: 1180px) {
    .events-section__inner {
        padding-inline: 28px;
    }

    .events-section__layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(275px, 0.9fr);
    }
}

@media (max-width: 760px) {
    .events-section__pattern {
        opacity: 0.18;
        background-size: 54px 54px, 54px 54px, 340px 340px;
    }

    .events-section__inner {
        min-height: 100vh;
        min-height: 100svh;
        padding: 91px 20px 24px;
    }

    .events-section__heading {
        display: block;
        margin-bottom: 14px;
    }

    .events-section__intro {
        display: none;
    }

    .events-section__eyebrow {
        gap: 10px;
    }

    .events-section__eyebrow span {
        width: 22px;
    }

    .events-section__eyebrow p {
        font-size: 8px;
        letter-spacing: 1.55px;
    }

    .events-section__title {
        gap: 9px;
        margin-top: 7px;
        font-size: clamp(39px, 12vw, 48px);
    }

    .events-section__layout {
        grid-template-columns: 1fr;
        gap: 10px;
        height: auto;
    }

    .event-featured {
        min-height: clamp(230px, 32svh, 270px);
        border-radius: 19px;
    }

    .event-featured__status {
        top: 12px;
        left: 12px;
        min-height: 27px;
        padding-inline: 9px;
        font-size: 6.8px;
        letter-spacing: 0.95px;
    }

    .event-featured__status i {
        width: 6px;
        height: 6px;
    }

    .event-featured__date {
        top: 12px;
        right: 12px;
        min-width: 62px;
        min-height: 59px;
        padding: 7px 6px 6px;
        border-radius: 13px;
    }

    .event-featured__date strong {
        font-size: 23px;
    }

    .event-featured__date small {
        font-size: 6.1px;
    }

    .event-featured__copy {
        left: 15px;
        right: 15px;
        bottom: 14px;
    }

    .event-featured__copy > p {
        font-size: 6.9px;
        letter-spacing: 0.9px;
    }

    .event-featured__copy h3 {
        max-width: 290px;
        margin-top: 5px;
        font-size: clamp(20px, 6vw, 24px);
    }

    .event-featured__description {
        display: none;
    }

    .event-featured__action {
        min-height: 36px;
        margin-top: 10px;
        padding-inline: 12px;
        border-radius: 10px;
        font-size: 8px;
        letter-spacing: 0.7px;
    }

    .event-timeline {
        min-height: 162px;
        padding: 14px;
        border-radius: 17px;
    }

    .event-timeline > h3 {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .event-timeline__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
        height: auto;
        margin-top: 10px;
        padding-left: 0;
    }

    .event-timeline__list::before,
    .event-timeline__marker {
        display: none;
    }

    .event-timeline__item {
        display: block;
        min-height: 62px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.085) !important;
        border-radius: 12px;
        background: rgba(8, 10, 8, 0.36);
    }

    .event-timeline__item--completed {
        grid-column: 1 / 3;
        min-height: 54px;
    }

    .event-timeline__item p {
        font-size: 6.6px;
        letter-spacing: 0.78px;
    }

    .event-timeline__item strong {
        margin-top: 3px;
        font-size: 10px;
    }

    .event-timeline__item small {
        margin-top: 3px;
        font-size: 7px;
    }

    .events-section__footer {
        min-height: 40px;
        margin-top: 8px;
    }

    .events-view-all {
        min-height: 40px;
        font-size: 9px;
        letter-spacing: 0.9px;
    }

    .events-section__index {
        right: 20px;
        bottom: 11px;
        font-size: 7px;
        letter-spacing: 1.2px;
    }
}

@media (max-width: 380px) {
    .events-section__inner {
        padding-inline: 16px;
    }

    .events-section__title {
        font-size: 39px;
    }

    .event-featured {
        min-height: 225px;
    }
}

@media (max-width: 760px) and (max-height: 810px) {
    .events-section__inner {
        padding-top: 82px;
        padding-bottom: 36px;
    }

    .event-featured {
        min-height: 210px;
    }

    .event-timeline {
        min-height: 154px;
    }

    .events-section__footer {
        margin-top: 7px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .event-featured,
    .event-timeline {
        transition: border-color 180ms ease, transform 180ms ease;
    }

    .event-featured:hover,
    .event-timeline:hover {
        border-color: rgba(230, 184, 63, 0.31);
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-featured,
    .event-timeline {
        transition: none !important;
    }
}


/* ======================================================================
   PUBLIC WEBSITE — SOSIAL MOT15 HIGHLIGHT SLIDE (v2.29.65)
   Social-first preview: featured community post + profile network. The login
   entry is intentionally secondary, while VIEW ALL SOSIAL remains the global
   CTA outside every card to match Article, Gallery and Events hierarchy.
   No continuous/background/entry animation is introduced.
   ====================================================================== */

.sosial-section {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 22%, rgba(230, 184, 63, 0.07), transparent 28%),
        radial-gradient(circle at 18% 82%, rgba(230, 184, 63, 0.025), transparent 32%),
        linear-gradient(135deg, #0d100e 0%, #070908 52%, #050706 100%);
}

.sosial-section::before {
    content: '';
    position: absolute;
    z-index: -3;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 7, 6, 0.12), rgba(5, 7, 6, 0.70));
}

.sosial-section__pattern {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    opacity: 0.20;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.019) 1px, transparent 1px);
    background-size: 56px 56px;
}

.sosial-section__inner {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(116px, 13.5vh, 148px) 42px clamp(48px, 5.6vh, 64px);
}

.sosial-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.sosial-section__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--site-gold-bright);
}

.sosial-section__eyebrow span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--site-gold);
}

.sosial-section__eyebrow p {
    margin: 0;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 2.1px;
}

.sosial-section__title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 9px 0 0;
    font-size: clamp(48px, 5.4vw, 76px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.sosial-section__title span,
.sosial-section__title strong {
    display: block;
}

.sosial-section__title span {
    color: var(--site-text);
}

.sosial-section__title strong {
    color: var(--site-gold-bright);
    font: inherit;
}

.sosial-section__entry {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 11px;
    max-width: 330px;
}

.sosial-section__entry > p {
    max-width: 315px;
    margin: 0;
    color: rgba(244, 244, 242, 0.58);
    font-size: 11px;
    font-weight: 520;
    line-height: 1.52;
    text-align: right;
}

.sosial-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(230, 184, 63, 0.34);
    border-radius: 11px;
    background: rgba(12, 15, 12, 0.56);
    -webkit-backdrop-filter: blur(13px) saturate(110%);
    backdrop-filter: blur(13px) saturate(110%);
    color: rgba(255, 255, 255, 0.86);
    font-size: 8.8px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.9px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.sosial-login svg,
.sosial-view-all svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--site-gold-bright);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sosial-stories {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-top: clamp(14px, 1.9vh, 20px);
    overflow: hidden;
}

.sosial-story {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 11px 6px 6px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 999px;
    background: rgba(12, 15, 12, 0.46);
}

.sosial-story > div {
    min-width: 0;
}

.sosial-story strong,
.sosial-story small {
    display: block;
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sosial-story strong {
    color: rgba(255, 255, 255, 0.88);
    font-size: 9.5px;
    font-weight: 780;
    line-height: 1.1;
}

.sosial-story small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.40);
    font-size: 7.2px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sosial-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 33px;
    height: 33px;
    border: 2px solid #0b0e0c;
    border-radius: 50%;
    outline: 2px solid rgba(230, 184, 63, 0.72);
    outline-offset: 1px;
    background: linear-gradient(145deg, #323930, #151915);
    color: rgba(255, 255, 255, 0.88);
    font-size: 7.6px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

.sosial-avatar--national {
    background: linear-gradient(145deg, #4a4025, #171a15);
}

.sosial-section__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
    gap: clamp(18px, 2vw, 26px);
    height: clamp(345px, 45vh, 430px);
    margin-top: clamp(13px, 1.6vh, 18px);
}

.sosial-post,
.sosial-community {
    min-width: 0;
    min-height: 0;
    border-radius: 22px;
    overflow: hidden;
}

.sosial-post {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.sosial-post__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.sosial-post__identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.sosial-avatar--post {
    width: 38px;
    height: 38px;
    font-size: 8px;
}

.sosial-post__identity > div {
    min-width: 0;
}

.sosial-post__identity p,
.sosial-post__identity small {
    display: block;
    margin: 0;
}

.sosial-post__identity p {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.91);
    font-size: 10.5px;
    font-weight: 820;
    line-height: 1.1;
}

.sosial-post__identity small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.37);
    font-size: 7.5px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.35px;
}

.sosial-verified {
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--site-gold-bright);
    color: #090b09;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.sosial-post__more {
    color: rgba(255, 255, 255, 0.36);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}

.sosial-post__media {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.sosial-post__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 49%;
    filter: brightness(0.62) saturate(0.82);
}

.sosial-post__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 4, 3, 0.03), rgba(2, 4, 3, 0.08) 50%, rgba(2, 4, 3, 0.68) 100%);
}

.sosial-post__media > span,
.sosial-post__media > strong {
    position: absolute;
    z-index: 2;
    left: 17px;
}

.sosial-post__media > span {
    top: 15px;
    padding: 7px 9px;
    border: 1px solid rgba(230, 184, 63, 0.26);
    border-radius: 999px;
    background: rgba(6, 8, 6, 0.48);
    color: var(--site-gold-bright);
    font-size: 6.8px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 1px;
}

.sosial-post__media > strong {
    right: 17px;
    bottom: 14px;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(21px, 2.15vw, 30px);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.035em;
}

.sosial-post__body {
    padding: 10px 15px 12px;
}

.sosial-post__engagement {
    display: flex;
    align-items: center;
    gap: 17px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 7.8px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.25px;
}

.sosial-post__engagement span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.sosial-post__engagement b {
    color: var(--site-gold-bright);
    font-size: 12px;
    font-weight: 800;
}

.sosial-post__body > p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 8.5px;
    font-weight: 520;
    line-height: 1.42;
}

.sosial-post__body > p strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 820;
}

.sosial-community {
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.sosial-community__heading > p {
    margin: 0;
    color: var(--site-gold-bright);
    font-size: 7.5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 1.2px;
}

.sosial-community__heading h3 {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: clamp(17px, 1.55vw, 22px);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.sosial-community__accounts {
    display: grid;
    gap: 8px;
    margin-top: 13px;
}

.sosial-account {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(7, 9, 7, 0.32);
}

.sosial-account > div {
    min-width: 0;
}

.sosial-account strong,
.sosial-account small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sosial-account strong {
    color: rgba(255, 255, 255, 0.86);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
}

.sosial-account strong .sosial-verified {
    width: 11px;
    height: 11px;
    margin-left: 3px;
    font-size: 6.6px;
    vertical-align: 1px;
}

.sosial-account small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.36);
    font-size: 7.2px;
    font-weight: 650;
    line-height: 1;
}

.sosial-account > span:last-child {
    padding: 5px 7px;
    border: 1px solid rgba(230, 184, 63, 0.16);
    border-radius: 8px;
    color: var(--site-gold-bright);
    font-size: 6.3px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.45px;
}

.sosial-community__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
}

.sosial-community__stats > div {
    min-width: 0;
    padding: 10px 4px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.014);
    text-align: center;
}

.sosial-community__stats strong,
.sosial-community__stats span {
    display: block;
}

.sosial-community__stats strong {
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.sosial-community__stats span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.34);
    font-size: 6.3px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: 0.5px;
}

.sosial-section__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    margin-top: clamp(9px, 1.25vh, 14px);
}

.sosial-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 44px;
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .sosial-login:hover,
    .sosial-view-all:hover {
        color: var(--site-gold-bright);
    }
}

.sosial-login:focus-visible,
.sosial-view-all:focus-visible {
    outline: 2px solid var(--site-gold-bright);
    outline-offset: 4px;
}

.sosial-section__index {
    position: absolute;
    z-index: 3;
    right: 42px;
    bottom: 24px;
    color: rgba(255, 255, 255, 0.23);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.65px;
}

@media (min-width: 1181px) and (max-height: 900px) {
    .sosial-section__inner {
        padding-top: 106px;
        padding-bottom: 42px;
    }

    .sosial-section__title {
        margin-top: 7px;
        font-size: clamp(46px, 4.7vw, 64px);
    }

    .sosial-section__layout {
        height: clamp(320px, 43vh, 390px);
    }

    .sosial-stories {
        margin-top: 12px;
    }
}

@media (max-width: 1180px) {
    .sosial-section__inner {
        padding-inline: 28px;
    }

    .sosial-section__layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(285px, 0.92fr);
    }
}

@media (max-width: 760px) {
    .sosial-section__pattern {
        opacity: 0.16;
        background-size: 48px 48px;
    }

    .sosial-section__inner {
        min-height: 100vh;
        min-height: 100svh;
        padding: 90px 20px 24px;
    }

    .sosial-section__heading {
        display: block;
    }

    .sosial-section__eyebrow {
        gap: 10px;
    }

    .sosial-section__eyebrow span {
        width: 22px;
    }

    .sosial-section__eyebrow p {
        font-size: 8px;
        letter-spacing: 1.55px;
    }

    .sosial-section__title {
        gap: 8px;
        margin-top: 7px;
        font-size: clamp(38px, 11.7vw, 47px);
    }

    .sosial-section__entry {
        display: block;
        max-width: none;
        margin-top: 9px;
    }

    .sosial-section__entry > p {
        display: none;
    }

    .sosial-login {
        min-height: 36px;
        padding-inline: 12px;
        border-radius: 10px;
        font-size: 7.8px;
        letter-spacing: 0.7px;
    }

    .sosial-stories {
        gap: 7px;
        margin-top: 10px;
    }

    .sosial-story {
        flex: 1 1 0;
        padding: 5px 8px 5px 5px;
    }

    .sosial-story--desktop-extra {
        display: none;
    }

    .sosial-story strong {
        max-width: 68px;
        font-size: 7.8px;
    }

    .sosial-story small {
        max-width: 68px;
        font-size: 6.1px;
    }

    .sosial-avatar {
        width: 29px;
        height: 29px;
        font-size: 6.7px;
    }

    .sosial-section__layout {
        grid-template-columns: 1fr;
        gap: 9px;
        height: auto;
        margin-top: 10px;
    }

    .sosial-post,
    .sosial-community {
        border-radius: 18px;
    }

    .sosial-post {
        grid-template-rows: auto 178px auto;
    }

    .sosial-post__header {
        min-height: 49px;
        padding: 7px 11px;
    }

    .sosial-avatar--post {
        width: 31px;
        height: 31px;
    }

    .sosial-post__identity p {
        font-size: 8.7px;
    }

    .sosial-post__identity small {
        margin-top: 3px;
        font-size: 6.5px;
    }

    .sosial-post__media > span {
        top: 10px;
        left: 11px;
        padding: 6px 7px;
        font-size: 5.9px;
    }

    .sosial-post__media > strong {
        left: 11px;
        right: 11px;
        bottom: 10px;
        font-size: 20px;
    }

    .sosial-post__body {
        padding: 8px 11px 9px;
    }

    .sosial-post__engagement {
        gap: 12px;
        font-size: 6.5px;
    }

    .sosial-post__engagement b {
        font-size: 10px;
    }

    .sosial-post__body > p {
        max-height: 25px;
        margin-top: 6px;
        overflow: hidden;
        font-size: 7.2px;
        line-height: 1.35;
    }

    .sosial-community {
        padding: 12px;
    }

    .sosial-community__heading h3 {
        margin-top: 4px;
        font-size: 14px;
    }

    .sosial-community__accounts {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        margin-top: 8px;
    }

    .sosial-account {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 52px;
        padding: 7px 8px;
    }

    .sosial-account--member {
        display: none;
    }

    .sosial-account > span:last-child,
    .sosial-community__stats {
        display: none;
    }

    .sosial-account strong {
        font-size: 7.5px;
    }

    .sosial-account small {
        font-size: 6.2px;
    }

    .sosial-section__footer {
        min-height: 40px;
        margin-top: 7px;
    }

    .sosial-view-all {
        min-height: 40px;
        font-size: 9px;
        letter-spacing: 0.9px;
    }

    .sosial-section__index {
        right: 20px;
        bottom: 11px;
        font-size: 7px;
        letter-spacing: 1.2px;
    }
}

@media (max-width: 380px) {
    .sosial-section__inner {
        padding-inline: 16px;
    }

    .sosial-section__title {
        font-size: 38px;
    }

    .sosial-story:nth-child(3) {
        display: none;
    }
}

@media (max-width: 760px) and (max-height: 810px) {
    .sosial-section__inner {
        padding-top: 82px;
        padding-bottom: 34px;
    }

    .sosial-post {
        grid-template-rows: auto 158px auto;
    }

    .sosial-community {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .sosial-section__footer {
        margin-top: 5px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .sosial-post,
    .sosial-community,
    .sosial-login {
        transition: border-color 180ms ease;
    }

    .sosial-post:hover,
    .sosial-community:hover,
    .sosial-login:hover {
        border-color: rgba(230, 184, 63, 0.30);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sosial-post,
    .sosial-community,
    .sosial-login {
        transition: none !important;
    }
}


/* === v2.29.66 Collaboration homepage slide === */
.collaboration-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 80% 24%, rgba(230, 184, 63, 0.10), transparent 28%),
        radial-gradient(circle at 14% 92%, rgba(230, 184, 63, 0.04), transparent 24%),
        linear-gradient(135deg, #11140f 0%, #080a08 58%, #050605 100%);
}

.collaboration-section__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.85;
    background-image:
        linear-gradient(118deg, transparent 44%, rgba(230, 184, 63, 0.03) 45%, transparent 46%),
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 160px 160px, 50px 50px;
}

.collaboration-section__inner {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 106px clamp(24px, 4vw, 42px) 40px;
}

.collaboration-section__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.collaboration-section__eyebrow span {
    width: 28px;
    height: 1px;
    background: rgba(230, 184, 63, 0.92);
}

.collaboration-section__eyebrow p {
    margin: 0;
    color: rgba(230, 184, 63, 0.95);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.24em;
}

.collaboration-section__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(260px, 0.66fr);
    gap: 30px;
    align-items: end;
}

.collaboration-section__title {
    margin: 0;
    max-width: 680px;
    color: #f5f4ef;
    font-size: clamp(44px, 6.1vw, 76px);
    line-height: 0.92;
    font-weight: 900;
    letter-spacing: -0.058em;
}

.collaboration-section__title strong {
    color: #e6b83f;
    font-weight: 900;
}

.collaboration-section__pitch {
    margin: 0;
    max-width: 320px;
    padding-bottom: 6px;
    color: #a8aca4;
    font-size: 12px;
    line-height: 1.65;
    justify-self: end;
    text-align: left;
}

.collaboration-section__pitch strong {
    color: #f5f4ef;
    font-weight: 760;
}

.collaboration-opportunities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.collaboration-card {
    position: relative;
    min-height: 132px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 18px;
}

.collaboration-card::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(230, 184, 63, 0.78), transparent);
    opacity: 0.55;
}

.collaboration-card__number {
    color: rgba(230, 184, 63, 0.58);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.14em;
}

.collaboration-card h3 {
    margin: 20px 0 0;
    color: #f5f4ef;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: -0.015em;
}

.collaboration-card p {
    margin: 8px 0 0;
    color: #7d827a;
    font-size: 9px;
    line-height: 1.45;
}

.collaboration-section__closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 20px 20px;
    border-color: rgba(230, 184, 63, 0.18);
    background: linear-gradient(105deg, rgba(230, 184, 63, 0.07), rgba(14, 16, 14, 0.55) 48%, rgba(8, 10, 8, 0.65));
}

.collaboration-section__closing-copy small {
    display: block;
    color: #e6b83f;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.15em;
}

.collaboration-section__closing-copy strong {
    display: block;
    margin-top: 6px;
    color: #f5f4ef;
    font-size: 18px;
    line-height: 1.22;
    font-weight: 820;
    letter-spacing: -0.025em;
}

.collaboration-section__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.collaboration-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 15px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    user-select: none;
}

.collaboration-action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.collaboration-action--secondary {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 10, 8, 0.46);
    color: #f5f4ef;
}

.collaboration-action--primary {
    border: 1px solid rgba(255, 230, 149, 0.38);
    background: linear-gradient(180deg, #edc65a, #c89528);
    color: #080908;
}

.collaboration-section__network {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 3px;
    color: #747970;
    font-size: 8px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.collaboration-section__network strong {
    color: #a7aaa3;
    font-weight: 750;
}

.collaboration-section__index {
    position: absolute;
    right: 20px;
    bottom: 12px;
    color: rgba(255, 255, 255, 0.20);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.16em;
}

@media (max-width: 1180px) {
    .collaboration-section__hero {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .collaboration-section__pitch {
        max-width: 560px;
        justify-self: start;
    }

    .collaboration-opportunities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collaboration-section__closing {
        grid-template-columns: 1fr;
    }

    .collaboration-section__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .collaboration-section__inner {
        justify-content: flex-start;
        gap: 12px;
        padding: 84px 18px 28px;
    }

    .collaboration-section__title {
        font-size: 46px;
        line-height: 0.93;
    }

    .collaboration-section__pitch {
        max-width: 340px;
        font-size: 10px;
        line-height: 1.55;
        padding-bottom: 0;
    }

    .collaboration-opportunities {
        gap: 8px;
        margin-top: 2px;
    }

    .collaboration-card {
        min-height: 100px;
        padding: 12px;
        border-radius: 15px;
    }

    .collaboration-card h3 {
        margin-top: 12px;
        font-size: 11px;
    }

    .collaboration-card p {
        display: none;
    }

    .collaboration-section__closing {
        gap: 12px;
        padding: 14px;
        border-radius: 16px;
    }

    .collaboration-section__closing-copy small {
        font-size: 7px;
    }

    .collaboration-section__closing-copy strong {
        font-size: 15px;
    }

    .collaboration-section__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .collaboration-action {
        width: 100%;
        min-height: 42px;
        font-size: 9px;
        letter-spacing: 0.075em;
    }

    .collaboration-section__network {
        display: none;
    }

    .collaboration-section__index {
        right: 20px;
        bottom: 11px;
        font-size: 7px;
        letter-spacing: 0.14em;
    }
}

@media (max-width: 380px) {
    .collaboration-section__inner {
        padding-inline: 16px;
    }

    .collaboration-section__title {
        font-size: 40px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .collaboration-card,
    .collaboration-section__closing,
    .collaboration-action {
        transition: border-color 180ms ease;
    }

    .collaboration-card:hover,
    .collaboration-section__closing:hover,
    .collaboration-action:hover {
        border-color: rgba(230, 184, 63, 0.30);
    }
}

@media (prefers-reduced-motion: reduce) {
    .collaboration-card,
    .collaboration-section__closing,
    .collaboration-action {
        transition: none !important;
    }
}

/* ======================================================================
   PUBLIC WEBSITE — DESKTOP-NATIVE SECTION COMPOSITION (v2.29.67)
   Desktop-only refinement for Article, Gallery, Events, Sosial and
   Collaboration. Mobile composition remains on the previously verified rules.
   Club copy uses the required MOT15 INDONESIA naming.
   ====================================================================== */

.event-timeline__item--desktop-extra,
.sosial-account--desktop-extra,
.sosial-community__pulse-label {
    display: none;
}

@media (min-width: 1181px) {
    /* ---------- ARTICLE: editorial magazine composition ---------- */
    .article-section__inner {
        width: 100%;
        max-width: 1480px;
        margin-inline: auto;
        grid-template-columns: minmax(0, 1.14fr) minmax(390px, 0.86fr);
        gap: clamp(18px, 1.8vw, 28px);
        align-items: start;
        padding: 116px clamp(42px, 4.8vw, 74px) 46px;
    }

    .article-section__title {
        margin-top: 11px;
        font-size: clamp(52px, 4.8vw, 68px);
        line-height: 0.91;
        letter-spacing: -0.052em;
    }

    .article-featured {
        grid-template-columns: minmax(0, 1.16fr) minmax(235px, 0.84fr);
        min-height: 300px;
        margin-top: 18px;
        border-radius: 20px;
    }

    .article-featured__copy {
        padding: 20px;
    }

    .article-featured__copy h3 {
        font-size: clamp(22px, 1.9vw, 28px);
    }

    .article-summary {
        font-size: 11px;
        line-height: 1.46;
    }

    .article-section__secondary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        gap: 12px;
        align-self: start;
        padding-top: 96px;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .article-section__secondary .article-mini,
    .article-section__secondary .article-mini--desktop-extra {
        min-height: 0;
        border-radius: 17px;
    }

    .article-section__secondary .article-mini:nth-of-type(1) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(150px, 0.88fr) minmax(0, 1.12fr);
        min-height: 178px;
    }

    .article-section__secondary .article-mini:nth-of-type(2),
    .article-section__secondary .article-mini:nth-of-type(3) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 92px minmax(0, 1fr);
        min-height: 166px;
    }

    .article-section__secondary .article-mini:nth-of-type(1) .article-mini__copy {
        padding: 17px;
    }

    .article-section__secondary .article-mini:nth-of-type(1) .article-mini__copy h3 {
        font-size: 15px;
        line-height: 1.16;
    }

    .article-section__secondary .article-mini:nth-of-type(2) .article-mini__copy,
    .article-section__secondary .article-mini:nth-of-type(3) .article-mini__copy {
        justify-content: flex-start;
        padding: 11px 12px 13px;
    }

    .article-section__secondary .article-mini:nth-of-type(2) .article-mini__copy h3,
    .article-section__secondary .article-mini:nth-of-type(3) .article-mini__copy h3 {
        margin-top: 5px;
        font-size: 11.5px;
        line-height: 1.18;
    }

    .article-view-all {
        grid-column: 1 / -1;
        justify-self: end;
        align-self: end;
        min-height: 38px;
        margin-top: -2px;
    }

    /* ---------- GALLERY: curated exhibition wall ---------- */
    .gallery-section__inner {
        width: 100%;
        max-width: 1480px;
        margin-inline: auto;
        padding: 116px clamp(42px, 4.8vw, 74px) 46px;
    }

    .gallery-section__heading {
        margin-bottom: 18px;
    }

    .gallery-section__title {
        font-size: clamp(52px, 4.8vw, 68px);
    }

    .gallery-section__layout {
        grid-template-columns: minmax(0, 1.18fr) minmax(350px, 0.82fr);
        gap: 14px;
        height: clamp(350px, 43vh, 400px);
    }

    .gallery-mosaic {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) minmax(0, 0.88fr);
        grid-template-rows: 1fr 0.82fr;
        gap: 10px;
    }

    .gallery-tile--touring {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .gallery-tile--gathering {
        grid-column: 2;
        grid-row: 1;
    }

    .gallery-tile--chapter {
        grid-column: 3;
        grid-row: 1;
    }

    .gallery-tile--community {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    .gallery-tile,
    .gallery-featured {
        border-radius: 17px;
    }

    .gallery-featured__copy {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .gallery-featured__copy h3 {
        font-size: clamp(22px, 1.9vw, 28px);
    }

    .gallery-featured__description {
        max-width: 420px;
        font-size: 10.5px;
        line-height: 1.44;
    }

    .gallery-section__footer {
        min-height: 38px;
        margin-top: 10px;
    }

    /* ---------- EVENTS: desktop event hub ---------- */
    .events-section__inner {
        width: 100%;
        max-width: 1480px;
        margin-inline: auto;
        padding: 112px clamp(42px, 4.8vw, 74px) 44px;
    }

    .events-section__heading {
        margin-bottom: 18px;
    }

    .events-section__title {
        font-size: clamp(52px, 4.8vw, 68px);
    }

    .events-section__intro {
        max-width: 340px;
        font-size: 10.5px;
    }

    .events-section__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
        gap: 14px;
        height: clamp(350px, 43vh, 405px);
    }

    .event-featured {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.92fr);
        border-radius: 20px;
        background: rgba(8, 10, 8, 0.82);
    }

    .event-featured > img {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        height: 100%;
        object-position: 50% 52%;
    }

    .event-featured::after {
        inset: 0 auto 0 0;
        width: 54%;
        background:
            linear-gradient(180deg, rgba(2, 4, 3, 0.02) 28%, rgba(2, 4, 3, 0.14) 62%, rgba(2, 4, 3, 0.72) 100%),
            linear-gradient(90deg, rgba(2, 4, 3, 0.13), rgba(2, 4, 3, 0.02) 75%);
    }

    .event-featured__status {
        top: 15px;
        left: 15px;
    }

    .event-featured__date {
        top: 15px;
        right: calc(46% + 15px);
        min-width: 68px;
        min-height: 66px;
    }

    .event-featured__copy {
        position: relative;
        z-index: 3;
        grid-column: 2;
        grid-row: 1;
        left: auto;
        right: auto;
        bottom: auto;
        max-width: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 22px 20px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 46%),
            rgba(7, 9, 7, 0.86);
    }

    .event-featured__copy h3 {
        max-width: none;
        font-size: clamp(21px, 1.7vw, 27px);
        line-height: 1.02;
    }

    .event-featured__description {
        max-width: none;
        font-size: 10.5px;
        line-height: 1.44;
    }

    .event-featured__action {
        align-self: flex-start;
        min-height: 39px;
        margin-top: 12px;
        padding-inline: 13px;
    }

    .event-timeline {
        padding: 16px 17px 14px;
        border-radius: 20px;
    }

    .event-timeline__item--desktop-extra {
        display: flex;
    }

    .event-timeline__list {
        grid-template-rows: repeat(4, minmax(0, 1fr));
        height: calc(100% - 24px);
        margin-top: 12px;
    }

    .event-timeline__item {
        padding: 5px 0 7px;
    }

    .event-timeline__item strong {
        margin-top: 4px;
        font-size: clamp(11px, 0.9vw, 13px);
    }

    .event-timeline__item small {
        margin-top: 3px;
        font-size: 8px;
    }

    .events-section__footer {
        min-height: 38px;
        margin-top: 10px;
    }

    /* ---------- SOSIAL: social ecosystem preview ---------- */
    .sosial-section__inner {
        width: 100%;
        max-width: 1480px;
        margin-inline: auto;
        padding: 108px clamp(42px, 4.8vw, 74px) 44px;
    }

    .sosial-section__title {
        font-size: clamp(50px, 4.7vw, 66px);
    }

    .sosial-section__entry {
        max-width: 360px;
    }

    .sosial-section__entry > p {
        max-width: 350px;
        font-size: 10.5px;
    }

    .sosial-stories {
        gap: 8px;
        margin-top: 13px;
    }

    .sosial-story {
        padding: 5px 10px 5px 5px;
    }

    .sosial-section__layout {
        grid-template-columns: minmax(0, 1.14fr) minmax(390px, 0.86fr);
        gap: 14px;
        height: clamp(350px, 42vh, 390px);
        margin-top: 12px;
    }

    .sosial-post,
    .sosial-community {
        border-radius: 20px;
    }

    .sosial-post {
        grid-template-rows: 56px minmax(0, 1fr) auto;
    }

    .sosial-post__header {
        min-height: 56px;
        padding: 8px 13px;
    }

    .sosial-post__media > strong {
        font-size: clamp(20px, 1.8vw, 27px);
    }

    .sosial-post__body {
        padding: 9px 13px 10px;
    }

    .sosial-post__body > p {
        margin-top: 6px;
        font-size: 8px;
    }

    .sosial-community {
        display: grid;
        grid-template-rows: auto auto auto auto;
        align-content: start;
        padding: 15px;
    }

    .sosial-community__heading h3 {
        font-size: clamp(16px, 1.35vw, 19px);
    }

    .sosial-community__accounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 11px;
    }

    .sosial-account--desktop-extra {
        display: grid;
    }

    .sosial-account {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 62px;
        padding: 8px;
    }

    .sosial-account > span:last-child {
        display: none;
    }

    .sosial-account strong {
        font-size: 8.5px;
    }

    .sosial-community__pulse-label {
        display: block;
        margin: 12px 0 0;
        color: var(--site-gold-bright);
        font-size: 7px;
        font-weight: 850;
        line-height: 1;
        letter-spacing: 1.15px;
    }

    .sosial-community__stats {
        margin-top: 7px;
    }

    .sosial-section__footer {
        min-height: 38px;
        margin-top: 9px;
    }

    /* ---------- COLLABORATION: corporate sponsorship deck ---------- */
    .collaboration-section__inner {
        width: 100%;
        max-width: 1480px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.95fr);
        grid-template-rows: auto auto auto auto;
        column-gap: clamp(38px, 4vw, 64px);
        row-gap: 18px;
        align-content: center;
        justify-content: stretch;
        min-height: 100vh;
        min-height: 100svh;
        padding: 114px clamp(42px, 4.8vw, 74px) 44px;
    }

    .collaboration-section__eyebrow {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .collaboration-section__hero {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 15px;
        min-width: 0;
    }

    .collaboration-section__title {
        max-width: 700px;
        font-size: clamp(50px, 4.6vw, 66px);
        line-height: 0.93;
    }

    .collaboration-section__pitch {
        justify-self: start;
        max-width: 520px;
        padding: 0;
        font-size: 11.5px;
        line-height: 1.58;
    }

    .collaboration-opportunities {
        grid-column: 2;
        grid-row: 2 / 4;
        align-self: center;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 14px 17px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 21px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008) 48%),
            rgba(9, 11, 9, 0.62);
        box-shadow:
            0 24px 54px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(20px) saturate(112%);
        -webkit-backdrop-filter: blur(20px) saturate(112%);
    }

    .collaboration-opportunities::before {
        content: 'PARTNERSHIP OPPORTUNITIES';
        display: block;
        padding: 2px 8px 11px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 9px;
        font-weight: 850;
        line-height: 1;
        letter-spacing: 1.25px;
    }

    .collaboration-card {
        position: relative;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 10px;
        min-height: 0;
        padding: 14px 34px 14px 8px;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .collaboration-card::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: 8px;
        left: auto;
        bottom: auto;
        width: auto;
        height: auto;
        background: none;
        color: rgba(230, 184, 63, 0.84);
        opacity: 1;
        transform: translateY(-50%);
        font-size: 17px;
        line-height: 1;
    }

    .collaboration-card__number {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        color: rgba(230, 184, 63, 0.82);
    }

    .collaboration-card h3 {
        grid-column: 2;
        margin: 0;
        font-size: 13px;
    }

    .collaboration-card p {
        grid-column: 2;
        margin: 4px 0 0;
        font-size: 8.5px;
        line-height: 1.4;
    }

    .collaboration-section__closing {
        grid-column: 1;
        grid-row: 3;
        display: block;
        align-self: start;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .collaboration-section__closing-copy {
        display: none;
    }

    .collaboration-section__actions {
        justify-content: flex-start;
        gap: 12px;
    }

    .collaboration-action--primary {
        min-height: 44px;
        padding-inline: 16px;
    }

    .collaboration-action--secondary {
        min-height: 44px;
        padding: 0 4px;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.86);
    }

    .collaboration-section__network {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .collaboration-section__index {
        right: clamp(42px, 4.8vw, 74px);
        bottom: 18px;
    }
}

@media (min-width: 1181px) and (max-height: 900px) {
    .article-section__inner,
    .gallery-section__inner,
    .events-section__inner,
    .sosial-section__inner,
    .collaboration-section__inner {
        padding-top: 98px;
        padding-bottom: 36px;
    }

    .article-section__title,
    .gallery-section__title,
    .events-section__title,
    .sosial-section__title {
        font-size: clamp(46px, 4.2vw, 60px);
    }

    .article-featured {
        min-height: 260px;
    }

    .article-section__secondary {
        padding-top: 84px;
    }

    .article-section__secondary .article-mini:nth-of-type(1) {
        min-height: 154px;
    }

    .article-section__secondary .article-mini:nth-of-type(2),
    .article-section__secondary .article-mini:nth-of-type(3) {
        min-height: 144px;
        grid-template-rows: 78px minmax(0, 1fr);
    }

    .gallery-section__layout,
    .events-section__layout,
    .sosial-section__layout {
        height: clamp(320px, 42vh, 360px);
    }

    .collaboration-section__title {
        font-size: clamp(46px, 4.1vw, 58px);
    }

    .collaboration-card {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

@media (max-width: 1180px) {
    .event-timeline__item--desktop-extra,
    .sosial-account--desktop-extra,
    .sosial-community__pulse-label {
        display: none !important;
    }
}


/* ======================================================================
   PUBLIC WEBSITE — FOOTER UI (v2.29.68)
   Mobile follows the approved compact footer composition. Desktop preserves
   the same hierarchy and expands it horizontally. The footer is the final
   controlled slide so it remains reachable with the existing one-gesture
   navigation without adding a separate navigation item.
   ====================================================================== */
.site-footer {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 22%, rgba(230, 184, 63, 0.065), transparent 27%),
        linear-gradient(135deg, #0d100d 0%, #070907 58%, #050605 100%);
}

.site-footer__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 48px 48px;
}

.site-footer__inner {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 112px clamp(24px, 4.8vw, 74px) 48px;
}

.site-footer__panel {
    width: min(100%, 1180px);
    padding: clamp(24px, 3.2vw, 38px) clamp(24px, 3.4vw, 42px) 20px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(17, 20, 16, 0.78), rgba(7, 9, 7, 0.66));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: clamp(28px, 4vw, 58px);
    align-items: end;
}

.site-footer__identity {
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-footer__logo-wrap {
    flex: 0 0 auto;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    padding: 10px;
    border: 1px solid rgba(230, 184, 63, 0.20);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(31, 35, 29, 0.84), rgba(10, 12, 10, 0.72));
}

.site-footer__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-footer__brand-copy {
    min-width: 0;
}


.site-footer__brand-copy > strong {
    display: block;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.site-footer__brand-copy > small {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 10px;
    line-height: 1.3;
}

.site-footer__contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 23px;
    flex-wrap: wrap;
}

.site-footer__contact-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(12, 14, 12, 0.56);
    color: rgba(255, 255, 255, 0.90);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
}

.site-footer__contact-button--whatsapp {
    border-color: rgba(230, 184, 63, 0.26);
    background: linear-gradient(180deg, rgba(230, 184, 63, 0.105), rgba(12, 14, 12, 0.62));
}

.site-footer__contact-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #e6b83f;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer__social-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.site-footer__social-block > p {
    margin: 0;
    color: #e6b83f;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.16em;
}

.site-footer__social-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 13px;
    flex-wrap: wrap;
}

.site-footer__social-item {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(12, 14, 12, 0.52);
    color: rgba(255, 255, 255, 0.88);
    user-select: none;
}

.site-footer__social-item svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer__social-item:nth-child(2) svg,
.site-footer__social-item:nth-child(3) svg {
    fill: currentColor;
    stroke: none;
}

.site-footer__social-item > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-footer__divider {
    height: 1px;
    margin: 29px 0 16px;
    background: linear-gradient(90deg, rgba(230, 184, 63, 0.22), rgba(255, 255, 255, 0.055), transparent);
}

.site-footer__bottom {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-footer__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: 0.055em;
}

.site-footer__bottom strong {
    color: rgba(255, 255, 255, 0.66);
    font-weight: 750;
}

.site-footer__mark {
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    padding: 5px;
    border: 1px solid rgba(230, 184, 63, 0.18);
    border-radius: 50%;
}

.site-footer__mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.82;
}

@media (max-width: 760px) {
    .site-footer__inner {
        align-items: center;
        padding: 82px 16px 24px;
    }

    .site-footer__panel {
        width: 100%;
        padding: 22px 18px 15px;
        border-radius: 22px;
    }

    .site-footer__main {
        display: block;
    }

    .site-footer__identity {
        align-items: flex-start;
        gap: 14px;
    }

    .site-footer__logo-wrap {
        width: 64px;
        height: 64px;
        padding: 8px;
        border-radius: 16px;
    }


    .site-footer__brand-copy > strong {
        margin-top: 0;
        font-size: 20px;
    }

    .site-footer__brand-copy > small {
        margin-top: 6px;
        font-size: 9px;
    }

    .site-footer__contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 18px;
    }

    .site-footer__contact-button {
        width: 100%;
        min-height: 44px;
        padding-inline: 11px;
        font-size: 8.5px;
    }

    .site-footer__social-block {
        align-items: flex-start;
        margin-top: 22px;
    }

    .site-footer__social-list {
        justify-content: flex-start;
        gap: 8px;
        margin-top: 11px;
    }

    .site-footer__social-item {
        width: 43px;
        height: 43px;
        border-radius: 11px;
    }

    .site-footer__divider {
        margin: 24px 0 14px;
    }

    .site-footer__bottom {
        position: relative;
        min-height: 38px;
        padding-right: 40px;
    }

    .site-footer__bottom p {
        max-width: 250px;
        font-size: 7.5px;
    }

    .site-footer__mark {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 380px) {
    .site-footer__inner {
        padding-inline: 14px;
    }

    .site-footer__panel {
        padding-inline: 16px;
    }

    .site-footer__contact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) and (max-height: 720px) {
    .site-footer__inner {
        align-items: flex-start;
        padding-top: 76px;
        padding-bottom: 18px;
    }

    .site-footer__panel {
        padding-top: 17px;
        padding-bottom: 12px;
    }

    .site-footer__logo-wrap {
        width: 56px;
        height: 56px;
    }

    .site-footer__contact,
    .site-footer__social-block {
        margin-top: 14px;
    }

    .site-footer__divider {
        margin-top: 17px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .site-footer__contact-button,
    .site-footer__social-item {
        transition: border-color 180ms ease, background-color 180ms ease;
    }

    .site-footer__contact-button:hover,
    .site-footer__social-item:hover {
        border-color: rgba(230, 184, 63, 0.30);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer__contact-button,
    .site-footer__social-item {
        transition: none !important;
    }
}

/* v2.29.70 — live homepage Network statistics. */
.network-card__item .network-card__stat-label {
    min-height: 18px;
    margin-bottom: 7px;
    font-size: 8px;
    line-height: 1.08;
    letter-spacing: 0.65px;
    white-space: normal;
}

.network-card__item .network-card__stat-value {
    overflow: visible;
    color: rgba(255, 255, 255, 0.90);
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.35px;
    white-space: nowrap;
    text-overflow: clip;
}

@media (max-width: 760px) {
    .network-card__item .network-card__stat-label {
        min-height: 17px;
        font-size: 7px;
        letter-spacing: 0.45px;
    }

    .network-card__item .network-card__stat-value {
        font-size: 17px;
    }
}

/* ======================================================================
   v2.29.78 — Footer Administration entry
   A discreet utility login is exposed in the public footer while the
   existing Administration authentication route and workflow remain intact.
   ====================================================================== */
.site-footer__utility {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    flex: 0 0 auto;
}

.site-footer__admin-login {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.34);
    font-size: 7.5px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    white-space: nowrap;
}

.site-footer__admin-login svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer__admin-login:focus-visible {
    outline: 2px solid rgba(230, 184, 63, 0.78);
    outline-offset: 2px;
    color: #e6b83f;
    border-color: rgba(230, 184, 63, 0.28);
}

@media (max-width: 760px) {
    .site-footer__bottom {
        padding-right: 0;
    }

    .site-footer__utility {
        gap: 8px;
    }

    .site-footer__admin-login {
        min-height: 40px;
        padding-inline: 8px;
        font-size: 7px;
    }

    .site-footer__mark {
        position: static;
        right: auto;
        bottom: auto;
    }
}

@media (hover: hover) and (pointer: fine) {
    .site-footer__admin-login {
        transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
    }

    .site-footer__admin-login:hover {
        color: #e6b83f;
        border-color: rgba(230, 184, 63, 0.22);
        background: rgba(230, 184, 63, 0.055);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer__admin-login {
        transition: none !important;
    }
}

/* === v2.29.84 Join Member modal === */
.hero-button--join {
    font-family: inherit;
    cursor: pointer;
}

body.join-member-open {
    overflow: hidden;
}

.join-member-dialog {
    width: min(560px, calc(100% - 28px));
    max-width: 560px;
    max-height: calc(100dvh - 28px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    color: #f2f3f4;
    background: transparent;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.join-member-dialog::backdrop {
    background: rgba(3, 4, 5, 0.78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.join-member-dialog__panel {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background: #101216;
}

.join-member-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.join-member-dialog__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #c8ad76;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.join-member-dialog__header h2,
.join-member-success h2 {
    margin: 0;
    color: #f5f5f3;
    font-size: 24px;
    line-height: 1.14;
    font-weight: 800;
}

.join-member-dialog__header p {
    max-width: 410px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.56);
    font-size: 11px;
    line-height: 1.6;
}

.join-member-dialog__close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.54);
    background: transparent;
    cursor: pointer;
}

.join-member-dialog__close svg,
.join-member-select__trigger svg,
.join-member-select__search svg,
.join-member-success__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.join-member-dialog__close svg {
    width: 16px;
    height: 16px;
}

.join-member-form {
    padding: 21px 24px 23px;
}

.join-member-form__trap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.join-member-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.join-member-field {
    display: block;
    min-width: 0;
    margin-bottom: 15px;
}

.join-member-field > span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.join-member-field > span b {
    color: #c8ad76;
    font-weight: 800;
}

.join-member-field > input,
.join-member-select__trigger,
.join-member-select__search {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: #0b0d10;
}

.join-member-field > input {
    height: 46px;
    padding: 0 13px;
    outline: none;
    color: #f0f1f2;
    font-family: inherit;
    font-size: 12px;
}

.join-member-field > input::placeholder,
.join-member-select__search input::placeholder {
    color: rgba(255, 255, 255, 0.29);
}

.join-member-field > input:focus,
.join-member-select__trigger:focus-visible,
.join-member-select__search:focus-within {
    border-color: rgba(200, 173, 118, 0.5);
    outline: none;
}

.join-member-select {
    min-width: 0;
}

.join-member-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 0 13px;
    color: rgba(255, 255, 255, 0.42);
    font-family: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.join-member-select__trigger.is-selected {
    color: rgba(255, 255, 255, 0.92);
}

.join-member-select__trigger:disabled {
    opacity: 0.38;
    cursor: default;
}

.join-member-select__trigger svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.join-member-select__dropdown {
    margin-top: 7px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    background: #121519;
}

.join-member-select__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 41px;
    padding: 0 10px;
}

.join-member-select__search svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: rgba(255, 255, 255, 0.4);
}

.join-member-select__search input {
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    color: #f0f1f2;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
}

.join-member-select__results {
    max-height: 210px;
    margin-top: 6px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.join-member-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.join-member-select__option strong,
.join-member-select__option small {
    display: block;
}

.join-member-select__option strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
}

.join-member-select__option small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
    line-height: 1.35;
}

.join-member-select__empty {
    margin: 0;
    padding: 14px 10px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    line-height: 1.5;
}

.join-member-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #0c0e11;
    cursor: pointer;
}

.join-member-check input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: #c8ad76;
}

.join-member-check strong,
.join-member-check small {
    display: block;
}

.join-member-check strong {
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    line-height: 1.42;
    font-weight: 700;
}

.join-member-check small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 9px;
    line-height: 1.45;
}

.join-member-field--city {
    margin: 15px 0 0;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.join-member-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 19px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.join-member-form__footer p {
    max-width: 285px;
    margin: 0;
    color: rgba(255, 255, 255, 0.38);
    font-size: 8px;
    line-height: 1.55;
}

.join-member-form__submit,
.join-member-success button {
    flex: 0 0 auto;
    min-height: 43px;
    padding: 0 17px;
    border: 1px solid rgba(200, 173, 118, 0.38);
    border-radius: 9px;
    color: #e2cfa6;
    background: rgba(200, 173, 118, 0.11);
    font-family: inherit;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.07em;
    cursor: pointer;
}

.join-member-form__submit:disabled {
    opacity: 0.5;
    cursor: wait;
}

.join-member-form__message {
    min-height: 17px;
    margin: 9px 0 0;
    color: #d0b477;
    font-size: 9px;
    line-height: 1.45;
    text-align: right;
}

.join-member-success {
    padding: 48px 28px;
    text-align: center;
}

.join-member-success__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border: 1px solid rgba(200, 173, 118, 0.3);
    border-radius: 50%;
    color: #d6bf8e;
}

.join-member-success__icon svg {
    width: 22px;
    height: 22px;
}

.join-member-success p {
    max-width: 350px;
    margin: 9px auto 22px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    line-height: 1.6;
}

.join-member-success button {
    min-width: 96px;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.68);
    background: transparent;
}

.join-member-dialog [hidden] {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .join-member-dialog__close,
    .join-member-select__option,
    .join-member-form__submit,
    .join-member-success button {
        transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
    }

    .join-member-dialog__close:hover,
    .join-member-success button:hover {
        color: #d9c49a;
        border-color: rgba(200, 173, 118, 0.24);
    }

    .join-member-select__option:hover {
        background: rgba(255, 255, 255, 0.045);
    }

    .join-member-form__submit:hover {
        background: rgba(200, 173, 118, 0.17);
    }
}

@media (max-width: 600px) {
    .join-member-dialog {
        width: calc(100% - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 15px;
    }

    .join-member-dialog__panel {
        border-radius: 15px;
    }

    .join-member-dialog__header {
        padding: 19px 17px 16px;
    }

    .join-member-dialog__header h2,
    .join-member-success h2 {
        font-size: 21px;
    }

    .join-member-dialog__header p {
        font-size: 10px;
    }

    .join-member-form {
        padding: 17px;
    }

    .join-member-form__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .join-member-field > input,
    .join-member-select__search input {
        font-size: 16px;
    }

    .join-member-select__trigger {
        font-size: 12px;
    }

    .join-member-form__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .join-member-form__footer p {
        max-width: none;
    }

    .join-member-form__submit {
        width: 100%;
    }

    .join-member-form__message {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .join-member-dialog__close,
    .join-member-select__option,
    .join-member-form__submit,
    .join-member-success button {
        transition: none !important;
    }
}

/* ======================================================================
   v2.29.92 — Home mobile viewport-fit correction
   Keep the approved visual direction, but remove the old short-viewport
   810px minimum that could make Android browser chrome push the Hero out of
   one visible slide. Mobile Hero content and Network stats now share normal
   document flow inside the visible viewport, preventing CTA/card overlap.
   ====================================================================== */
@media (max-width: 760px) {
    .hero {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100svh;
        padding: clamp(84px, 13svh, 112px) 0 clamp(58px, 9svh, 78px);
    }

    @supports (height: 100dvh) {
        .hero {
            min-height: 100dvh;
        }
    }

    .hero__content {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin: 0 20px;
        flex: 0 0 auto;
    }

    .hero__eyebrow {
        gap: 10px;
        font-size: clamp(9px, 2.65vw, 10px);
        letter-spacing: 1.8px;
    }

    .hero__title {
        margin-top: clamp(12px, 1.9svh, 18px);
        font-size: clamp(47px, min(14.6vw, 7.7svh), 61px);
        line-height: 0.91;
        letter-spacing: clamp(-3.8px, -0.95vw, -3px);
    }

    .hero__accent {
        height: 7px;
        margin-top: clamp(10px, 1.6svh, 16px);
    }

    .hero__description {
        margin-top: clamp(7px, 1.25svh, 11px);
        font-size: clamp(13px, 3.75vw, 15px);
        line-height: 1.42;
    }

    .hero__actions {
        gap: clamp(6px, 1svh, 9px);
        margin-top: clamp(11px, 1.8svh, 17px);
    }

    .hero-button,
    .hero-button--primary {
        min-height: clamp(44px, 6.5svh, 50px);
    }

    .network-card {
        position: relative;
        inset: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        margin: clamp(9px, 1.6svh, 15px) 20px 0;
        padding: clamp(10px, 1.6svh, 13px) 11px 10px;
        flex: 0 0 auto;
    }

    .network-card__heading {
        min-height: 25px;
    }

    .network-card__grid {
        gap: 6px;
        margin-top: clamp(6px, 1svh, 9px);
    }

    .network-card__item {
        min-height: 0;
        padding: 7px 7px 6px;
    }

    .network-card__item .network-card__stat-label {
        min-height: 15px;
        margin-bottom: 5px;
        font-size: 6.6px;
        line-height: 1.08;
    }

    .network-card__item .network-card__stat-value {
        font-size: clamp(15px, 4.4vw, 17px);
    }

    .scroll-cue {
        bottom: clamp(8px, 1.4svh, 14px);
    }

    .scroll-cue__label {
        font-size: 7px;
        letter-spacing: 3.2px;
    }

    .scroll-cue__line {
        height: clamp(22px, 4.4svh, 34px);
        margin-top: clamp(7px, 1.2svh, 10px);
    }

    .scroll-cue__ring {
        width: 13px;
        height: 13px;
    }
}

/* Extra compact pass for Android/iOS visual viewports shortened by browser UI.
   Touch targets stay at least 44px; only spacing and decorative scale tighten. */
@media (max-width: 760px) and (max-height: 700px) {
    .hero {
        padding-top: 80px;
        padding-bottom: 50px;
    }

    .site-header {
        min-height: 66px;
        padding-top: 11px;
    }

    .site-brand__logo {
        width: 39px;
        height: 35px;
    }

    .hero__title {
        margin-top: 10px;
        font-size: clamp(45px, min(13.8vw, 7.25svh), 52px);
    }

    .hero__accent {
        margin-top: 8px;
    }

    .hero__description {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.35;
    }

    .hero__actions {
        margin-top: 9px;
        gap: 5px;
    }

    .hero-button,
    .hero-button--primary {
        min-height: 44px;
    }

    .network-card {
        margin-top: 8px;
        padding-top: 9px;
        padding-bottom: 8px;
    }

    .network-card__heading {
        min-height: 23px;
    }

    .network-card__heading strong {
        font-size: 10px;
    }

    .network-card__grid {
        margin-top: 5px;
    }

    .network-card__item {
        padding-top: 6px;
        padding-bottom: 5px;
    }

    .scroll-cue__line {
        height: 20px;
    }
}

@media (max-width: 370px) and (max-height: 700px) {
    .hero__content,
    .network-card {
        margin-right: 16px;
        margin-left: 16px;
    }
}