/* tribeatmos1 (2026-10-20): per-element atmosphere for the 5 tribe subdomains
   (aether, air, earth, fire, water). Everything is scoped to body.xa so the
   rest of XElementia never sees it. The menu header (.header-nav) and the
   footer are NOT styled here on purpose. */

body.xa {
    --xa-btn: linear-gradient(135deg, var(--xa-glow) 0%, var(--xa-glow2) 100%);
    --xa-base: #07030f;
    --xa-sky: linear-gradient(180deg, #0a0010 0%, #1a0025 50%, #0a0015 100%);
    --xa-glow: var(--tribe-color, #8a6bff);
    --xa-glow2: var(--tribe-accent, #c4b5ff);
    --xa-card-a: rgba(20, 10, 34, 0.8);
    --xa-card-b: rgba(8, 4, 16, 0.86);
    --xa-line: rgba(255, 255, 255, 0.1);
    --xa-edge: color-mix(in srgb, var(--xa-glow) 70%, #ffffff 30%);
    --xa-title: linear-gradient(92deg, #ffffff 0%, var(--xa-glow2) 55%, var(--xa-glow) 100%);
    --xa-text: #e6e6ee;
}

body.xa--fire {
    --xa-btn: linear-gradient(135deg, #ff4d1a 0%, #ff9a2e 100%);
    --xa-base: #0b0201;
    --xa-sky:
        radial-gradient(120% 55% at 50% 112%, rgba(255, 96, 24, 0.5) 0%, rgba(255, 60, 10, 0.16) 45%, transparent 70%),
        radial-gradient(60% 40% at 8% 100%, rgba(255, 40, 0, 0.28) 0%, transparent 70%),
        radial-gradient(55% 40% at 94% 96%, rgba(255, 150, 0, 0.2) 0%, transparent 70%),
        radial-gradient(70% 45% at 50% -8%, rgba(120, 18, 6, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, #080100 0%, #160403 38%, #2a0803 78%, #3a0d02 100%);
    --xa-glow: #ff5a1f;
    --xa-glow2: #ffb23f;
    --xa-card-a: rgba(34, 9, 4, 0.8);
    --xa-card-b: rgba(12, 3, 2, 0.88);
    --xa-line: rgba(255, 120, 60, 0.2);
    --xa-title: linear-gradient(92deg, #fff4c9 0%, #ffc04a 38%, #ff7a2b 70%, #ff3d1f 100%);
    --xa-text: #f4e6df;
}

body.xa--water {
    --xa-btn: linear-gradient(135deg, #2a63ff 0%, #22b8ff 100%);
    --xa-base: #010915;
    --xa-sky:
        radial-gradient(90% 45% at 50% -12%, rgba(120, 205, 255, 0.34) 0%, rgba(60, 140, 255, 0.1) 45%, transparent 70%),
        radial-gradient(50% 38% at 12% 40%, rgba(30, 110, 220, 0.18) 0%, transparent 70%),
        radial-gradient(50% 40% at 90% 70%, rgba(20, 200, 220, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, #06305e 0%, #042247 26%, #021632 58%, #010a1b 100%);
    --xa-glow: #3b9dff;
    --xa-glow2: #5eeaff;
    --xa-card-a: rgba(4, 26, 56, 0.78);
    --xa-card-b: rgba(2, 12, 30, 0.86);
    --xa-line: rgba(110, 200, 255, 0.2);
    --xa-title: linear-gradient(92deg, #f0fbff 0%, #9fe6ff 40%, #4fb4ff 72%, #4a6dff 100%);
    --xa-text: #e1eefc;
}

body.xa--air {
    --xa-btn: linear-gradient(135deg, #1c86c9 0%, #4fc6f5 100%);
    --xa-base: #0a1a2c;
    --xa-sky:
        radial-gradient(80% 50% at 78% -6%, rgba(255, 255, 255, 0.2) 0%, rgba(190, 235, 255, 0.08) 45%, transparent 70%),
        radial-gradient(60% 40% at 10% 30%, rgba(140, 220, 255, 0.14) 0%, transparent 70%),
        radial-gradient(70% 45% at 50% 108%, rgba(120, 200, 255, 0.2) 0%, transparent 70%),
        linear-gradient(180deg, #123a5c 0%, #0f2f4d 30%, #0c2440 62%, #081a30 100%);
    --xa-glow: #7fdcff;
    --xa-glow2: #e9fbff;
    --xa-card-a: rgba(16, 44, 72, 0.74);
    --xa-card-b: rgba(8, 24, 44, 0.84);
    --xa-line: rgba(200, 240, 255, 0.22);
    --xa-title: linear-gradient(92deg, #ffffff 0%, #e2f8ff 35%, #9fe4ff 70%, #4fc8ff 100%);
    --xa-text: #e8f4fb;
}

body.xa--earth {
    --xa-btn: linear-gradient(135deg, #2b8a3a 0%, #8fb83c 100%);
    --xa-base: #050a04;
    --xa-sky:
        radial-gradient(70% 45% at 22% -8%, rgba(214, 222, 120, 0.16) 0%, rgba(120, 170, 60, 0.06) 45%, transparent 70%),
        radial-gradient(55% 40% at 92% 30%, rgba(60, 176, 67, 0.14) 0%, transparent 70%),
        radial-gradient(90% 45% at 50% 112%, rgba(150, 105, 40, 0.3) 0%, transparent 70%),
        linear-gradient(180deg, #0c1a0b 0%, #0b170a 34%, #10180a 66%, #1a160a 100%);
    --xa-glow: #49c95a;
    --xa-glow2: #d8b552;
    --xa-card-a: rgba(16, 28, 13, 0.82);
    --xa-card-b: rgba(7, 12, 6, 0.88);
    --xa-line: rgba(160, 210, 110, 0.18);
    --xa-title: linear-gradient(92deg, #f3ffd9 0%, #b8ef84 36%, #5fcf5a 66%, #d4ae4a 100%);
    --xa-text: #e8eedf;
}

body.xa--aether {
    --xa-btn: linear-gradient(135deg, #7356ff 0%, #d158d6 100%);
    --xa-base: #04020c;
    --xa-sky:
        radial-gradient(55% 40% at 18% 24%, rgba(147, 112, 219, 0.32) 0%, transparent 70%),
        radial-gradient(50% 38% at 84% 62%, rgba(230, 80, 200, 0.18) 0%, transparent 70%),
        radial-gradient(45% 32% at 62% 6%, rgba(70, 190, 255, 0.14) 0%, transparent 70%),
        radial-gradient(70% 45% at 40% 100%, rgba(100, 60, 220, 0.22) 0%, transparent 70%),
        linear-gradient(180deg, #0a0520 0%, #0b0624 40%, #08041a 70%, #04020c 100%);
    --xa-glow: #a98bff;
    --xa-glow2: #ff8fe0;
    --xa-card-a: rgba(22, 12, 48, 0.78);
    --xa-card-b: rgba(9, 5, 22, 0.87);
    --xa-line: rgba(190, 160, 255, 0.2);
    --xa-title: linear-gradient(92deg, #ffffff 0%, #e2d6ff 32%, #a98bff 64%, #ff9be3 100%);
    --xa-text: #ece8fb;
}

/* news.xelementia.com: the Nexus, where the five elements meet */
body.xa--news {
    --xa-btn: linear-gradient(135deg, #ff7a1a 0%, #ff4f8b 50%, #14b8ff 100%);
    --xa-base: #04050f;
    --xa-sky:
        radial-gradient(45% 35% at 10% 12%, rgba(169, 139, 255, 0.24) 0%, transparent 70%),
        radial-gradient(45% 35% at 92% 10%, rgba(127, 220, 255, 0.2) 0%, transparent 70%),
        radial-gradient(45% 40% at 4% 62%, rgba(73, 201, 90, 0.16) 0%, transparent 70%),
        radial-gradient(50% 40% at 12% 104%, rgba(255, 90, 31, 0.26) 0%, transparent 70%),
        radial-gradient(50% 40% at 92% 100%, rgba(59, 130, 255, 0.26) 0%, transparent 70%),
        radial-gradient(40% 30% at 50% 50%, rgba(20, 217, 255, 0.07) 0%, transparent 70%),
        linear-gradient(180deg, #070a1f 0%, #060818 45%, #05060f 100%);
    --xa-glow: #14d9ff;
    --xa-glow2: #ff9a3c;
    --xa-card-a: rgba(12, 16, 40, 0.8);
    --xa-card-b: rgba(6, 7, 20, 0.88);
    --xa-line: rgba(140, 200, 255, 0.18);
    --xa-title: linear-gradient(92deg, #ffb347 0%, #ff6a3d 22%, #ff7ad9 44%, #a98bff 62%, #5eeaff 82%, #7dff9c 100%);
    --xa-text: #e8ecf8;
}

/* ---------- page background (wins over header.css body !important) ---------- */
html body.xa {
    background: var(--xa-base) !important;
}

body.xa .tribe-container {
    color: var(--xa-text);
}

.xa-atmos {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.xa-atmos > * {
    position: absolute;
    inset: 0;
}

.xa-sky {
    background: var(--xa-sky);
}

.xa-fx {
    width: 100%;
    height: 100%;
}

.xa-vig {
    background:
        radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.xa-l1,
.xa-l2 {
    will-change: transform, opacity;
}

/* fire: breathing heat at the bottom + slow flame light sweeping */
.xa--fire .xa-l1 {
    inset: auto -10% -18% -10%;
    height: 60%;
    background: radial-gradient(50% 60% at 50% 100%, rgba(255, 110, 20, 0.55) 0%, rgba(255, 50, 0, 0.18) 50%, transparent 75%);
    animation: xaHeat 5.5s ease-in-out infinite;
}

.xa--fire .xa-l2 {
    inset: -20%;
    background:
        radial-gradient(28% 22% at 20% 80%, rgba(255, 140, 40, 0.16) 0%, transparent 70%),
        radial-gradient(26% 20% at 80% 70%, rgba(255, 70, 20, 0.16) 0%, transparent 70%);
    animation: xaSway 14s ease-in-out infinite alternate;
}

/* water: light shafts from the surface + a slow caustic glow */
.xa--water .xa-l1 {
    inset: -10% -20% 30% -20%;
    background: repeating-linear-gradient(100deg, transparent 0 7%, rgba(150, 220, 255, 0.07) 8% 10%, transparent 11% 17%, rgba(120, 200, 255, 0.05) 18% 19%, transparent 20% 26%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    transform-origin: 50% 0;
    animation: xaRays 16s ease-in-out infinite alternate;
}

.xa--water .xa-l2 {
    inset: -10% -10% 50% -10%;
    background:
        radial-gradient(30% 26% at 30% 20%, rgba(120, 220, 255, 0.14) 0%, transparent 70%),
        radial-gradient(26% 22% at 72% 12%, rgba(90, 170, 255, 0.14) 0%, transparent 70%);
    animation: xaSway 11s ease-in-out infinite alternate;
}

/* air: big soft clouds travelling across the sky */
.xa--air .xa-l1 {
    inset: 0 -60% 0 -60%;
    background:
        radial-gradient(14% 9% at 18% 22%, rgba(235, 248, 255, 0.13) 0%, transparent 70%),
        radial-gradient(18% 10% at 46% 58%, rgba(220, 242, 255, 0.1) 0%, transparent 70%),
        radial-gradient(12% 8% at 74% 34%, rgba(240, 250, 255, 0.12) 0%, transparent 70%),
        radial-gradient(16% 9% at 88% 80%, rgba(210, 238, 255, 0.09) 0%, transparent 70%);
    animation: xaDrift 70s linear infinite;
}

.xa--air .xa-l2 {
    inset: 0 -60% 0 -60%;
    background:
        radial-gradient(20% 12% at 30% 78%, rgba(200, 236, 255, 0.08) 0%, transparent 70%),
        radial-gradient(14% 8% at 62% 16%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    animation: xaDrift 110s linear infinite reverse;
}

/* earth: mountain ridges at the bottom + sunbeams through the canopy */
.xa--earth .xa-l1 {
    inset: auto 0 0 0;
    height: 34vh;
    min-height: 200px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 210 L120 150 L210 190 L330 96 L450 176 L560 120 L700 200 L820 110 L930 168 L1060 84 L1180 170 L1300 126 L1440 180 L1440 320 L0 320Z' fill='%2312240f' fill-opacity='.75'/%3E%3Cpath d='M0 250 L140 200 L260 236 L380 170 L520 240 L660 186 L780 246 L900 196 L1040 252 L1160 198 L1300 244 L1440 210 L1440 320 L0 320Z' fill='%230b1709' fill-opacity='.9'/%3E%3Cpath d='M0 290 L180 262 L360 286 L540 258 L720 292 L900 262 L1080 290 L1260 266 L1440 286 L1440 320 L0 320Z' fill='%23060d05'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    opacity: 0.85;
}

.xa--earth .xa-l2 {
    inset: -20% -10% 20% -30%;
    background: repeating-linear-gradient(118deg, transparent 0 9%, rgba(230, 220, 140, 0.06) 10% 12%, transparent 13% 21%, rgba(200, 230, 140, 0.045) 22% 23%, transparent 24% 32%);
    -webkit-mask-image: radial-gradient(70% 70% at 15% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(70% 70% at 15% 0%, #000 0%, transparent 75%);
    transform-origin: 0 0;
    animation: xaRays 18s ease-in-out infinite alternate;
}

/* aether: a slow arcane circle + drifting nebula */
.xa--aether .xa-l1 {
    inset: auto;
    left: 50%;
    top: 50%;
    width: min(120vmin, 1100px);
    height: min(120vmin, 1100px);
    margin: calc(min(120vmin, 1100px) / -2) 0 0 calc(min(120vmin, 1100px) / -2);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23c9b4ff'%3E%3Ccircle cx='200' cy='200' r='196' stroke-width='.8'/%3E%3Ccircle cx='200' cy='200' r='184' stroke-width='.5' stroke-dasharray='2 6'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='.7'/%3E%3Ccircle cx='200' cy='200' r='96' stroke-width='.6'/%3E%3Cpath d='M200 50 L330 275 L70 275Z M200 350 L70 125 L330 125Z' stroke-width='.7'/%3E%3Cpath d='M200 4 V40 M200 360 V396 M4 200 H40 M360 200 H396' stroke-width='.8'/%3E%3Ccircle cx='200' cy='200' r='40' stroke-width='.6' stroke-dasharray='1 4'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.1;
    animation: xaSpin 160s linear infinite;
}

.xa--aether .xa-l2 {
    inset: -15%;
    background:
        radial-gradient(30% 24% at 30% 30%, rgba(160, 110, 255, 0.16) 0%, transparent 70%),
        radial-gradient(26% 20% at 74% 66%, rgba(255, 110, 210, 0.12) 0%, transparent 70%);
    animation: xaSway 20s ease-in-out infinite alternate;
}

/* news: an elemental colour wheel in the middle (the motes circle it) + breathing auroras */
.xa--news .xa-l1 {
    inset: auto;
    left: 50%;
    top: 50%;
    width: min(150vmax, 2200px);
    height: min(150vmax, 2200px);
    margin: calc(min(150vmax, 2200px) / -2) 0 0 calc(min(150vmax, 2200px) / -2);
    background: conic-gradient(from 0deg, rgba(255, 90, 31, 0.1), rgba(59, 130, 255, 0.1), rgba(73, 201, 90, 0.09), rgba(127, 220, 255, 0.1), rgba(169, 139, 255, 0.11), rgba(255, 90, 31, 0.1));
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 70%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 70%);
    /* breathing only: spinning a layer this big cost a third of the frame rate */
    animation: xaBreath 9s ease-in-out infinite;
}

.xa--news .xa-l2 {
    inset: -15%;
    background:
        radial-gradient(26% 20% at 20% 30%, rgba(169, 139, 255, 0.12) 0%, transparent 70%),
        radial-gradient(24% 20% at 80% 75%, rgba(255, 120, 40, 0.1) 0%, transparent 70%),
        radial-gradient(24% 18% at 75% 20%, rgba(20, 217, 255, 0.1) 0%, transparent 70%);
    animation: xaSway 18s ease-in-out infinite alternate;
}

@keyframes xaBreath {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes xaHeat {
    0%, 100% { opacity: 0.75; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.08); }
}

@keyframes xaSway {
    from { transform: translate3d(-2%, 1%, 0) scale(1); }
    to { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
}

@keyframes xaRays {
    from { transform: rotate(-3deg) translateX(-2%); opacity: 0.75; }
    to { transform: rotate(3deg) translateX(2%); opacity: 1; }
}

@keyframes xaDrift {
    from { transform: translate3d(-18%, 0, 0); }
    to { transform: translate3d(18%, 0, 0); }
}

@keyframes xaSpin {
    to { transform: rotate(360deg); }
}

/* ---------- tribe hero (the big banner, not the menu header) ---------- */
body.xa .tribe-header {
    border-color: color-mix(in srgb, var(--xa-glow) 80%, #ffffff 20%);
    animation: xaHeroGlow 4s ease-in-out infinite;
    box-shadow: 0 0 28px color-mix(in srgb, var(--xa-glow) 55%, transparent);
}

body.xa .tribe-header-overlay {
    background:
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--xa-base) 55%, transparent) 100%),
        radial-gradient(120% 90% at 50% 50%, transparent 60%, color-mix(in srgb, var(--xa-base) 45%, transparent) 100%);
}

@keyframes xaHeroGlow {
    0%, 100% { box-shadow: 0 0 22px color-mix(in srgb, var(--xa-glow) 50%, transparent), 0 0 70px color-mix(in srgb, var(--xa-glow2) 14%, transparent); }
    50% { box-shadow: 0 0 40px color-mix(in srgb, var(--xa-glow) 70%, transparent), 0 0 110px color-mix(in srgb, var(--xa-glow2) 24%, transparent); }
}

/* ---------- sections: element glass ---------- */
body.xa .tribe-content-section {
    background:
        linear-gradient(90deg, transparent 6%, color-mix(in srgb, var(--xa-edge) 75%, transparent) 50%, transparent 94%) top / 100% 1px no-repeat,
        radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--xa-glow) 10%, transparent) 0%, transparent 70%),
        linear-gradient(160deg, var(--xa-card-a) 0%, var(--xa-card-b) 100%);
    border: 1px solid var(--xa-line);
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.25),
        inset 0 0 40px color-mix(in srgb, var(--xa-glow) 6%, transparent);
    /* no backdrop blur: re-blurring the moving background every frame is what costs the most */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.xa .section-title {
    background: var(--xa-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 14px color-mix(in srgb, var(--xa-glow) 35%, transparent));
}

body.xa .section-title::after {
    width: 88px;
    height: 3px;
    background: linear-gradient(90deg, var(--xa-glow2), var(--xa-glow) 55%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--xa-glow) 70%, transparent);
}

body.xa .tribe-about-content {
    background: linear-gradient(160deg, color-mix(in srgb, var(--xa-card-a) 80%, transparent), color-mix(in srgb, var(--xa-card-b) 85%, transparent));
    border-color: var(--xa-line);
    color: var(--xa-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.xa .social-link {
    background: linear-gradient(140deg, color-mix(in srgb, var(--xa-glow) 22%, transparent), rgba(0, 0, 0, 0.25));
    border-color: color-mix(in srgb, var(--xa-glow) 75%, transparent);
    color: var(--xa-edge);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

body.xa .social-link:hover {
    box-shadow: 0 0 22px color-mix(in srgb, var(--xa-glow) 60%, transparent), 0 6px 18px rgba(0, 0, 0, 0.35);
}

body.xa .btn-edit-tribe,
body.xa .btn-create-news {
    background: color-mix(in srgb, var(--xa-glow) 18%, rgba(0, 0, 0, 0.3));
    border-color: color-mix(in srgb, var(--xa-glow) 60%, transparent);
    color: var(--xa-edge);
}

body.xa .btn-edit-tribe:hover,
body.xa .btn-create-news:hover {
    background: color-mix(in srgb, var(--xa-glow) 32%, rgba(0, 0, 0, 0.3));
    border-color: var(--xa-glow);
}

/* team cards */
body.xa .team-member-card {
    background:
        linear-gradient(90deg, transparent 10%, color-mix(in srgb, var(--team-badge-color) 70%, transparent) 50%, transparent 90%) top / 100% 1px no-repeat,
        linear-gradient(170deg, color-mix(in srgb, var(--xa-card-a) 90%, var(--xa-glow) 10%), var(--xa-card-b));
    border-color: var(--xa-line);
}

body.xa .team-member-card:hover {
    background:
        linear-gradient(90deg, transparent 10%, var(--team-badge-color) 50%, transparent 90%) top / 100% 1px no-repeat,
        linear-gradient(170deg, color-mix(in srgb, var(--xa-card-a) 80%, var(--xa-glow) 20%), var(--xa-card-b));
    border-color: color-mix(in srgb, var(--xa-glow) 55%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--xa-glow) 35%, transparent), 0 12px 28px rgba(0, 0, 0, 0.55);
}

/* news cards (on the News hub each card keeps the colour of its tribe; sponsored and community cards keep their own look) */
body.xa .news-card:not([data-ad-card]):not(.news-card--community) {
    --xa-cc: var(--news-card-color, var(--xa-glow));
    background:
        linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--xa-cc) 55%, transparent) 50%, transparent 96%) top / 100% 1px no-repeat,
        linear-gradient(165deg, color-mix(in srgb, var(--xa-card-a) 90%, var(--xa-cc) 10%) 0%, var(--xa-card-b) 100%);
    border: 1px solid color-mix(in srgb, var(--xa-cc) 50%, transparent);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body.xa .news-card:not([data-ad-card]):not(.news-card--community):hover {
    background:
        linear-gradient(90deg, transparent 4%, var(--xa-cc) 50%, transparent 96%) top / 100% 1px no-repeat,
        linear-gradient(165deg, color-mix(in srgb, var(--xa-card-a) 82%, var(--xa-cc) 18%) 0%, var(--xa-card-b) 100%);
    border-color: color-mix(in srgb, var(--xa-cc) 85%, transparent);
    box-shadow: 0 0 26px color-mix(in srgb, var(--xa-cc) 40%, transparent), 0 14px 34px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}

/* gallery */
body.xa .gallery-item {
    border-color: color-mix(in srgb, var(--xa-glow) 30%, transparent);
    background: linear-gradient(160deg, var(--xa-card-a), var(--xa-card-b));
}

body.xa .gallery-item:hover {
    border-color: var(--xa-glow);
    box-shadow: 0 0 22px color-mix(in srgb, var(--xa-glow) 70%, transparent), 0 0 46px color-mix(in srgb, var(--xa-glow2) 30%, transparent), 0 15px 45px rgba(0, 0, 0, 0.6);
}

/* the "Filtering by #tag" chip has the hidden attribute but display:inline-flex kept it visible */
body.xa .news-hashtag-filter[hidden] {
    display: none;
}

/* upload tile + back-to-top in the element colours */
body.xa .gallery-upload-zone {
    background: linear-gradient(160deg, color-mix(in srgb, var(--xa-glow) 12%, transparent), rgba(0, 0, 0, 0.25)) !important;
    border-color: color-mix(in srgb, var(--xa-glow) 70%, transparent);
}

body.xa .gallery-upload-zone .upload-subtext,
body.xa .gallery-upload-zone .upload-formats,
body.xa .gallery-upload-zone .upload-size-limit {
    color: rgba(255, 255, 255, 0.62);
}

body.xa .gallery-upload-zone:hover {
    background: linear-gradient(160deg, color-mix(in srgb, var(--xa-glow) 22%, transparent), rgba(0, 0, 0, 0.2)) !important;
}

body.xa .back-to-top {
    background: var(--xa-btn);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--xa-glow) 45%, transparent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.xa .back-to-top:hover {
    box-shadow: 0 8px 26px color-mix(in srgb, var(--xa-glow) 65%, transparent);
}

body.xa .edit-btn {
    background: var(--xa-btn);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* sections rise in softly the first time they scroll into view (only when JS is on) */
body.xa.xa-rv .tribe-content-section {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

body.xa.xa-rv .tribe-content-section:not(.xa-in) {
    opacity: 0;
    transform: translateY(28px);
}

/* ---------- mobile: the banner grows with its content (the title was cut off) ---------- */
@media (max-width: 640px) {
    body.xa .tribe-header {
        height: auto;
        min-height: 240px;
    }

    body.xa .tribe-header-content {
        padding: 26px 14px 22px;
    }

    body.xa .tribe-aka-name {
        padding: 4px 44px;
        white-space: nowrap;
    }

    body.xa .edit-btn {
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 12px;
    }

    body.xa .tribe-header:has(.edit-btn) .tribe-header-content {
        padding-top: 46px;
    }
}

@media (max-width: 480px) {
    body.xa .tribe-header {
        min-height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xa-atmos *,
    body.xa .tribe-header {
        animation: none !important;
    }

    body.xa.xa-rv .tribe-content-section:not(.xa-in) {
        opacity: 1;
        transform: none;
    }
}