:root {
    --sanja-black: #050308;
    --sanja-ink: #0b0712;
    --sanja-panel: #120b1d;
    --sanja-panel-2: #1a1029;
    --sanja-line: rgba(203, 145, 255, .13);
    --sanja-line-red: rgba(151, 55, 232, .4);
    --sanja-red: #812dcc;
    --sanja-red-hot: #b256f3;
    --sanja-red-dark: #3e1269;
    --sanja-ember: #df8cff;
    --sanja-gold: #d8a7ff;
    --sanja-text: #f8efff;
    --sanja-muted: #ae99bc;
    --sanja-max: 1400px;
    --sanja-shadow: 0 30px 90px rgba(22, 3, 38, .62);
}

body.edition-violet {
    background:
        radial-gradient(circle at 82% 9%, rgba(126, 34, 194, .2), transparent 33rem),
        radial-gradient(circle at 14% 68%, rgba(77, 28, 115, .16), transparent 28rem),
        linear-gradient(150deg, #050308, #0c0712 55%, #050308);
}

.edition-violet .sanja-header {
    inset: 0 auto 0 0;
    width: 112px;
    height: 100vh;
    border: 0;
    border-right: 1px solid rgba(196, 117, 255, .16);
    background: rgba(8, 4, 13, .9);
    box-shadow: 20px 0 60px rgba(12, 2, 19, .34);
}
.edition-violet .sanja-header.is-scrolled { width: 112px; height: 100vh; background: rgba(8, 4, 13, .96); }
.edition-violet .sanja-header::after { inset: 8% -1px auto auto; width: 1px; height: 55%; background: linear-gradient(transparent, #be62ff, transparent); }
.edition-violet .sanja-header__inner { width: 100%; height: 100%; flex-direction: column; gap: 28px; padding: 22px 12px; }
.edition-violet .sanja-brand { min-width: 0; flex-direction: column; }
.edition-violet .sanja-brand__sigil {
    border-radius: 50%;
    border-color: rgba(192, 104, 255, .58);
    background: radial-gradient(circle, rgba(159, 72, 222, .45), rgba(37, 8, 61, .12));
    box-shadow: 0 0 34px rgba(166, 65, 239, .28), inset 0 0 22px rgba(213, 145, 255, .16);
}
.edition-violet .sanja-brand__sigil::before,
.edition-violet .sanja-brand__sigil::after { border-radius: 50%; }
.edition-violet .sanja-brand__copy { align-items: center; }
.edition-violet .sanja-brand__copy strong { font-size: 14px; letter-spacing: .12em; }
.edition-violet .sanja-brand__copy small { font-size: 7px; letter-spacing: .15em; }

.edition-violet .sanja-nav {
    flex: 1;
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
}
.edition-violet .sanja-nav > a,
.edition-violet .sanja-nav__group > a { justify-content: center; height: 54px; padding: 0 6px; font-size: 8px; letter-spacing: .09em; text-align: center; }
.edition-violet .sanja-nav > a::after,
.edition-violet .sanja-nav__group > a::after { left: auto; right: -13px; bottom: 50%; width: 2px; height: 0; transform: translateY(50%); }
.edition-violet .sanja-nav > a:hover::after,
.edition-violet .sanja-nav__group:hover > a::after,
.edition-violet .sanja-nav a.is-current::after { width: 2px; height: 32px; }
.edition-violet .sanja-nav__group { height: auto; }
.edition-violet .sanja-nav__dropdown { top: 0; left: calc(100% + 18px); transform: translate(12px, 0); }
.edition-violet .sanja-nav__group:hover .sanja-nav__dropdown,
.edition-violet .sanja-nav__group:focus-within .sanja-nav__dropdown { transform: translate(0, 0); }
.edition-violet .sanja-header__actions { flex-direction: column; gap: 10px; }
.edition-violet .sanja-realm-state { font-size: 7px; text-align: center; }
.edition-violet .sanja-header-cta { min-height: 42px; padding: 0 12px; font-size: 8px; }
.edition-violet .sanja-header-cta { border-color: rgba(196, 109, 255, .55); background: linear-gradient(135deg, #a64ce5, #4f147e); }
.edition-violet .sanja-dev-badge { border-color: rgba(192, 101, 255, .46); background: rgba(19, 7, 30, .9); }

.violet-orbit {
    position: absolute;
    z-index: 35;
    top: 120px;
    right: 5vw;
    width: 180px;
    height: 180px;
    pointer-events: none;
}
.violet-orbit span { position: absolute; inset: 0; border: 1px solid rgba(208, 139, 255, .16); border-radius: 50%; }
.violet-orbit span:nth-child(2) { inset: 22px; border-style: dashed; animation: violetSpin 18s linear infinite reverse; }
.violet-orbit span:nth-child(3) { inset: 48px; border-color: rgba(220, 160, 255, .3); box-shadow: 0 0 38px rgba(160, 64, 230, .13); }
.violet-orbit b { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(224, 173, 255, .62); font: 500 30px/1 var(--sanja-display); }
@keyframes violetSpin { to { transform: rotate(360deg); } }

.edition-violet .sanja-hero,
.edition-violet .sanja-feature-ribbon,
.edition-violet .sanja-main,
.edition-violet .sanja-footer { margin-left: 112px; }

.edition-violet .sanja-hero { min-height: 800px; height: 100vh; }
.edition-violet .sanja-hero::after {
    background:
        radial-gradient(circle at 54% 38%, transparent 0 19%, rgba(6,3,10,.12) 38%, rgba(6,3,10,.73) 80%),
        linear-gradient(90deg, rgba(6,3,10,.74), transparent 42%, rgba(6,3,10,.35)),
        linear-gradient(180deg, transparent 46%, rgba(6,3,10,.92));
}
.edition-violet .sanja-hero__slide:not(:first-of-type),
.edition-violet .sanja-hero__controls { display: none; }
.edition-violet .sanja-hero__slide:first-of-type { opacity: 1 !important; visibility: visible !important; }
.edition-violet .sanja-hero__slide:first-of-type .sanja-eyebrow,
.edition-violet .sanja-hero__slide:first-of-type h2,
.edition-violet .sanja-hero__slide:first-of-type .sanja-hero__content > p,
.edition-violet .sanja-hero__slide:first-of-type .sanja-hero__buttons { opacity: 1 !important; transform: none !important; animation: none !important; }
.edition-violet .sanja-hero__visual { background-position: center; filter: saturate(1.12) contrast(1.06); }
.edition-violet .sanja-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: min(calc(100% - 92px), var(--sanja-max));
    padding-top: clamp(270px, 34vh, 350px);
    text-align: right;
}
.edition-violet .sanja-hero h2 { max-width: 820px; font-size: clamp(58px, 6.8vw, 100px); line-height: .88; text-transform: uppercase; }
.edition-violet .sanja-hero h2 em { color: #e2b6ff; -webkit-text-stroke: 0; text-shadow: 0 0 42px rgba(180, 78, 242, .45); }
.edition-violet .sanja-eyebrow { color: #d9a4fa; }
.edition-violet .sanja-hero__content > p:not(.sanja-eyebrow) { max-width: 600px; color: #d1bddc; }
.edition-violet .sanja-hero__buttons { justify-content: flex-end; }
.edition-violet .sanja-button { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.edition-violet .sanja-button--primary { background: linear-gradient(135deg, #bd61f5, #6d22ab); box-shadow: 0 15px 42px rgba(128, 41, 196, .4); }
.edition-violet .sanja-button--ghost { border-color: rgba(210, 142, 255, .28); background: rgba(17, 7, 28, .56); }
.edition-violet .sanja-hero__scroll { left: 34px; right: auto; }

.edition-violet .sanja-feature-ribbon { margin-top: 0; }
.edition-violet .sanja-feature-ribbon__inner { width: min(calc(100% - 82px), var(--sanja-max)); gap: 18px; border: 0; background: transparent; box-shadow: none; }
.edition-violet .sanja-feature-card {
    min-height: 126px;
    border: 1px solid rgba(199, 120, 255, .16);
    background: linear-gradient(145deg, rgba(26, 11, 40, .91), rgba(9, 5, 15, .88));
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.edition-violet .sanja-feature-card > i { border-radius: 50%; border-color: rgba(206, 130, 255, .33); background: rgba(154, 57, 225, .12); }
.edition-violet .sanja-feature-card b { color: rgba(212, 148, 255, .05); }
.edition-violet .sanja-feature-card:hover { transform: translateY(-7px); background: rgba(74, 28, 104, .62); }

.edition-violet .sanja-main { width: auto; padding-right: max(42px, calc((100vw - 112px - var(--sanja-max)) / 2)); padding-left: max(42px, calc((100vw - 112px - var(--sanja-max)) / 2)); }
.edition-violet .sanja-content-grid { grid-template-columns: 330px minmax(0, 1fr); gap: 40px; }
.edition-violet .sanja-primary { grid-column: 2; }
.edition-violet .sanja-sidebar { grid-column: 1; grid-row: 1; }
.edition-violet .sanja-primary .page-hd,
.edition-violet .sanja-primary .content,
.edition-violet .sanja-sidebar .widget {
    border-color: rgba(199, 122, 255, .16);
    background-color: rgba(16, 8, 26, .88);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.edition-violet .sanja-footer { background: linear-gradient(rgba(7,3,11,.88), rgba(7,3,11,.98)), url('../images/editions/violet-eclipse/hero.webp') center / cover; }

@media (max-width: 1050px) {
    .edition-violet .sanja-content-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 760px) {
    .edition-violet .sanja-header { inset: 0 0 auto; width: 100%; height: 78px; }
    .edition-violet .sanja-header.is-scrolled { width: 100%; height: 70px; }
    .edition-violet .sanja-header__inner { flex-direction: row; padding: 0 18px; }
    .edition-violet .sanja-brand { flex-direction: row; }
    .edition-violet .sanja-brand__copy { align-items: flex-start; }
    .edition-violet .sanja-nav { height: auto; flex-direction: column; }
    .edition-violet .sanja-header__actions { flex-direction: row; }
    .violet-orbit { top: 112px; right: 0; width: 150px; height: 150px; }
    .edition-violet .sanja-hero,
    .edition-violet .sanja-feature-ribbon,
    .edition-violet .sanja-main,
    .edition-violet .sanja-footer { margin-left: 0; }
    .edition-violet .sanja-hero { min-height: 860px; height: 102svh; }
    .edition-violet .sanja-hero::after { background: linear-gradient(180deg, rgba(7,3,11,.1), rgba(7,3,11,.38) 42%, rgba(7,3,11,.96) 72%); }
    .edition-violet .sanja-hero__visual { background-position: 54% center; }
    .edition-violet .sanja-hero__content { align-items: flex-start; width: calc(100% - 40px); padding-top: 320px; text-align: left; }
    .edition-violet .sanja-hero h2 { font-size: clamp(43px, 13vw, 65px); }
    .edition-violet .sanja-hero__buttons { justify-content: flex-start; }
    .edition-violet .sanja-feature-ribbon { margin-top: 0; }
    .edition-violet .sanja-feature-ribbon__inner { width: calc(100% - 28px); grid-template-columns: 1fr; }
    .edition-violet .sanja-main { width: calc(100% - 32px); margin: 0 auto; padding-inline: 0; }
    .edition-violet .sanja-content-grid { grid-template-columns: 1fr; }
    .edition-violet .sanja-primary,
    .edition-violet .sanja-sidebar { grid-column: 1; }
    .edition-violet .sanja-sidebar { grid-row: auto; }
}