/* Make <picture> transparent to layout so existing img CSS still applies */
picture {
    display: contents;
}

:root {
    --gold: rgba(220, 240, 255, 1);
    --accent-icy: rgba(220, 240, 255, 1); /* Crystalline Blue-White */
    --white: #f4f0eb;
    --ink: #0a0a0a;
    --surface: #141414;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --font-display: "Playfair Display", serif;
    --font-body: "Inter", sans-serif;
    --font-lexicon: "Evereska Lexicon", sans-serif;
    --font-logo: "Comfortaa", sans-serif;
}

@font-face {
    font-family: 'Evereska Lexicon';
    src: url('fonts/EvereskaLexiconFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.lexicon {
    font-family: 'Evereska Lexicon', sans-serif !important;
    text-transform: lowercase; /* Essential for rune mapping */
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.15em;
    text-decoration: none;
    position: relative;
}

.logo-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    overflow: visible;
    position: relative;
}

.logo-stack .logo-main {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    transition: transform 0.4s var(--ease);
}

.logo-stack .logo-phonetic {
    font-family: var(--font-lexicon);
    font-size: 1.1rem;
    color: var(--white);
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    margin-top: 4px;
    transition: 
        opacity 0.4s var(--ease),
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
    white-space: nowrap;
}

/* Staggered decryption reveal */
.nav-logo:hover .logo-phonetic {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.logo-stack:nth-child(1) .logo-phonetic { transition-delay: 0.05s; }
.logo-stack:nth-child(2) .logo-phonetic { transition-delay: 0.10s; }
.logo-stack:nth-child(3) .logo-phonetic { transition-delay: 0.15s; }
.logo-stack:nth-child(4) .logo-phonetic { transition-delay: 0.20s; }
.logo-stack:nth-child(5) .logo-phonetic { transition-delay: 0.25s; }
.logo-stack:nth-child(6) .logo-phonetic { transition-delay: 0.30s; }

.nav-logo:hover .logo-main {
    transform: translateY(-2px);
}

body {
    background: var(--ink);
    color: var(--white);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* Prevent empty top gap from WordPress admin bar styles if the bar is not rendered */
html:not(:has(#wpadminbar)) {
    margin-top: 0px !important;
}

a {
    color: inherit;
    text-decoration: none;
}

.index-nav {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.index-nav .logo-main {
    font-size: 1.8rem;
    opacity: 1; /* Always visible */
}

.index-nav .logo-phonetic {
    font-size: 1.1rem;
    opacity: 0;
    left: 0;
    width: 100%;
    text-align: center;
    transform: translateY(-12px);
    transition: 
        opacity 0.5s var(--ease),
        transform 0.5s var(--ease);
}

/* Removed staggered load delays */

@keyframes fade-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes decrypt-slide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 0.6; transform: translateY(0); } /* Ends at lower opacity */
}

.index-nav:hover .logo-main {
    transform: translateY(-3px);
}

.index-nav:hover .logo-phonetic {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 
        -1px 0 rgba(255,0,0,0.3), 
        1px 0 rgba(0,255,255,0.3),
        0 0 15px rgba(255,255,255,0.4);
    animation: holo-flicker 4s infinite;
}

/* Index Footer - Data Minimal */
.index-footer {
    position: fixed;
    /* Anchored close to the viewport bottom so it reads as a footer rather
       than as floating mid-low chrome. */
    bottom: 14px;
    z-index: 100;
    display: flex;
    align-items: center;
    pointer-events: none;
    padding: 0;
    border-top: none;
}

.index-footer--left {
    left: 60px;
}

.index-footer--center {
    left: 50%;
    transform: translateX(-50%);
}

.index-footer--right {
    right: 60px;
}

.terminal-access .status-tag {
    color: var(--white);
    opacity: 0.8;
    animation: simple-flicker 3s infinite;
}

@keyframes simple-flicker {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
    52% { opacity: 0.9; }
    54% { opacity: 0.6; }
}

.cipher-link {
    position: relative;
    display: inline-block;
}

.cipher-link .plain-text {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.cipher-link:hover .cipher-text {
    opacity: 0;
}

.cipher-link:hover .plain-text {
    opacity: 1;
}

.index-footer .footer-group {
    display: flex;
    gap: 20px;
    font-family: var(--font-logo);
    font-size: 9px; /* Back to refined small scale */
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--white);
    -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.5);
    opacity: 0.65; /* Slightly more opaque as requested */
    transition: opacity 0.5s var(--ease);
    pointer-events: auto;
}

.index-footer .footer-group:hover {
    opacity: 1; /* Powers up on hover */
}

.index-footer--center {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap; /* Prevent wrapping */
}

.index-footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.index-footer a:hover {
    color: var(--white);
}

.index-footer a.kofi-link,
.footer-links a.kofi-link {
    color: #ff5e5b;
    font-weight: 600;
}

.index-footer a.kofi-link:hover,
.footer-links a.kofi-link:hover {
    color: #ff8a88;
}

.index-footer .sep {
    opacity: 0.3;
}
.split-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

/* Film Grain Overlay */
.split-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05;
    pointer-events: none;
    z-index: 10;
    filter: brightness(100%) contrast(100%);
}

.slice {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: flex 0.8s var(--ease), filter 0.6s var(--ease);
    overflow: hidden;
    border-right: none;
    animation: slideIn 1.2s var(--ease) both;
}

.slice:nth-child(1) { animation-delay: 0.1s; }
.slice:nth-child(2) { animation-delay: 0.2s; }
.slice:nth-child(3) { animation-delay: 0.3s; }

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* No borders on slices */

.slice__bg {
    position: absolute;
    inset: -10%; /* Extra room for parallax */
    background-size: cover;
    background-position: center;
    filter: brightness(0.55) saturate(0.85);
    transition: transform 1.2s var(--ease), filter 0.8s var(--ease);
    z-index: 0;
    transform: translate(var(--px, 0), var(--py, 0));
}

.slice:hover {
    flex: 1.5;
}

.slice:hover .slice__bg {
    filter: brightness(0.4) saturate(0.9); /* Darker for ADA compliance */
    transform: scale(1.05);
}

/* Vignette overlay — softened to remove 'strip' look */
.slice::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
    transition: background 0.6s var(--ease);
}

.slice:hover::after {
    background: rgba(0, 0, 0, 0.1); /* Very minimal tint */
}

.slice__content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 40px;
    transition: transform 0.6s var(--ease);
    /* Radial glow to provide a 'reading floor' */
    background: radial-gradient(circle at center, rgba(0,0,0,0.7) 0%, transparent 80%);
}

.slice:hover .slice__content {
    transform: translateY(-20px);
}

.slice__label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--gold); /* Use gold for the label for better pop */
    margin-bottom: 20px;
    opacity: 0.9;
    font-weight: 600;
}

.slice__label.lexicon {
    font-family: var(--font-lexicon);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: rgba(220, 240, 255, 0.9); /* Icy Blue-White */
    -webkit-text-stroke: 0.4px rgba(220, 240, 255, 0.5);
    
    /* Enhanced Holographic Aberration */
    text-shadow: 
        -1px 0 rgba(255,0,0,0.3), 
        1px 0 rgba(0,255,255,0.4),
        0 0 10px rgba(0,200,255,0.3);
        
    opacity: 1; /* Full opacity for better pop */
    animation: holo-flicker 4s infinite;
    transition: all 0.5s var(--ease);
}

.slice:hover .slice__label.lexicon {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255,255,255,0.5); /* Stabilize on hover */
    animation: none;
}

@keyframes holo-flicker {
    0%, 100% { opacity: 0.6; transform: skew(0); }
    33% { opacity: 0.55; }
    34% { opacity: 0.7; transform: skew(0.5deg); }
    35% { opacity: 0.6; transform: skew(0); }
    66% { opacity: 0.58; }
    67% { opacity: 0.65; filter: contrast(1.2); }
    68% { opacity: 0.6; filter: contrast(1); }
}

.slice__title {
    font-family: var(--font-logo); /* Geometric/Clean */
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.35em; /* Wide spacing for elegance */
    margin-bottom: 24px;
    line-height: 1.2;
    color: rgba(235, 245, 255, 1);
    
    /* Ambient Depth - Center Aligned Shadows */
    text-shadow: 
        0 0 20px rgba(0,0,0,0.8),
        0 0 40px rgba(0,0,0,0.4);
        
    -webkit-font-smoothing: antialiased;
}

.slice__desc {
    font-size: 0.95rem;
    max-width: 320px;
    margin: 0 auto 32px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95); /* Maximum contrast for ADA */
    font-weight: 500; /* Balanced weight for legibility */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
    
    /* Aggressive Ambient Depth */
    text-shadow: 
        0 0 15px rgba(0,0,0,1),
        0 0 30px rgba(0,0,0,0.8);
}

.slice:hover .slice__desc {
    opacity: 1;
    transform: translateY(0);
}

.slice .btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--accent-icy);
    border: 1px solid var(--accent-icy);
    color: #000;
    mix-blend-mode: screen;
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0;
    transform: translateY(20px);
    transition: 
        opacity 0.5s var(--ease) 0.1s, 
        transform 0.6s var(--ease) 0.1s, 
        background 0.3s ease, 
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
}

.slice:hover .btn {
    opacity: 1;
    transform: translateY(0);
}

.slice .btn:hover {
    background: var(--white);
    border-color: var(--white);
    box-shadow: 0 0 30px rgba(220, 240, 255, 0.4);
    transform: translateY(-5px) !important; /* Override the magnetic script slightly for feel */
}

/* Hero Decipher Grid */
.hero__title-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.title-word {
    display: flex;
    gap: 8px;
    padding: 10px;
}

.title-spacer {
    width: 40px;
}

.title-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.stack-en {
    font-family: var(--font-logo);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-icy); /* Icy Blue Accent */
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
    opacity: 0.9;
}

.stack-ex {
    font-size: 2.2rem;
    color: var(--white);
    text-shadow: 0 0 15px rgba(255,255,255,0.2);
    line-height: 1;
}

@media (max-width: 1024px) {
    .hero__title-grid {
        gap: 10px;
    }
    .title-spacer {
        display: none;
    }
    .stack-ex {
        font-size: 1.5rem;
    }
}

/* Specific background images */
.slice--book .slice__bg {
    background-image: url('assets/ships/1000000682.png');
    background-image: image-set(
        url('assets/ships/1000000682.webp') type('image/webp'),
        url('assets/ships/1000000682.png') type('image/png')
    );
}
.slice--personnel .slice__bg {
    background-image: url('media/personnel_hero.png');
    background-image: image-set(
        url('media/personnel_hero.webp') type('image/webp'),
        url('media/personnel_hero.png') type('image/png')
    );
}
.slice--membership .slice__bg {
    background-image: url('media/ENLISTMENTFRM.png');
    background-image: image-set(
        url('media/ENLISTMENTFRM.png') type('image/png')
    );
}

/* Book mockup floating overlay for the first slice */
.slice--book .book-overlay {
    position: absolute;
    width: 420px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    z-index: 1;
    opacity: 1;
    filter: brightness(0.55) saturate(0.85) drop-shadow(0 30px 70px rgba(0,0,0,0.8));
    transition: transform 0.8s var(--ease), filter 0.8s var(--ease);
    pointer-events: none;
}

.slice--book:hover .book-overlay {
    transform: translate(-50%, -55%) rotate(0deg) scale(1.05);
    filter: brightness(0.75) saturate(1.1) drop-shadow(0 40px 90px rgba(0,0,0,0.9));
}

/* Tablet + Mobile responsive */
@media (max-width: 1024px) {
    .split-container {
        flex-direction: column;
        height: auto; /* Allow scrolling if content is long */
        min-height: 100vh;
    }
    
    .slice {
        flex: 1;
        min-height: 250px;
        border-right: none;
        border-bottom: none;
        transition: flex 0.6s var(--ease);
    }
    
    .slice:hover, .slice:active {
        flex: 2;
    }

    .slice__content {
        padding: 20px;
    }

    .slice__title {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    .slice__desc, .btn {
        opacity: 1;
        transform: none;
        max-width: 100%;
    }

    .slice__desc {
        font-size: 0.8rem;
        margin-bottom: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Rescale book mockup for mobile */
    .slice--book .book-overlay {
        width: 180px;
        transform: translate(-50%, -50%) rotate(-3deg);
        opacity: 0.6;
    }

    .slice--book:hover .book-overlay, 
    .slice--book:active .book-overlay {
        transform: translate(-50%, -60%) rotate(0deg) scale(1.1);
        opacity: 0.8;
    }
}

/* Portrait tablets (769–1024px portrait): page is scrollable (slices stacked) and
   horizontal space is tight, so footers flow at the bottom of the scroll rather
   than overlay fixed over slice content, and the center footer is dropped.
   Landscape tablets (e.g. iPad 1024×768 landscape) skip this and keep the desktop
   3-footer fixed overlay since they have plenty of width and barely scroll. */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .index-footer--center {
        display: none;
    }

    .index-footer {
        position: static;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        text-align: center;
        padding: 8px 5%;
        opacity: 1;
    }

    .index-footer--left {
        padding-top: 48px;
        border-top: 1px solid rgba(220, 240, 255, 0.08);
    }

    .index-footer--right {
        padding-bottom: 48px;
    }

    .index-footer .footer-group {
        justify-content: center;
        pointer-events: auto;
        flex-wrap: wrap;
    }
}

/* Phone-only (≤768px): hide top nav, cull center footer, stack remaining footers */
@media (max-width: 768px) {
    .index-nav {
        display: none;
    }

    .index-footer--center {
        display: none;
    }

    .index-footer {
        position: static;
        width: 100%;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        justify-content: center;
        text-align: center;
        padding: 12px 5%;
        opacity: 1;
        box-sizing: border-box;
    }

    .index-footer--left {
        padding-top: 40px;
        border-top: 1px solid rgba(220, 240, 255, 0.08);
    }

    .index-footer--right {
        padding-bottom: 40px;
    }

    .index-footer .footer-group {
        gap: 12px;
        font-size: 8px;
    }

    .index-footer .cipher-text {
        display: none; /* Hide alien runes for mobile clarity */
    }

    .index-footer .plain-text {
        position: relative;
        opacity: 1;
    }
}

/* TACTICAL LOCK-ON REVEAL */
.personnel-card__name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.1); /* Encrypted/Low-power state */
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 15px;
    transition: color 1.2s var(--ease), text-shadow 1.2s var(--ease);
}

.personnel-card__name::before,
.personnel-card__name::after {
    content: '';
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    border: 1px solid var(--gold);
    opacity: 0;
    transition: all 0.8s var(--ease);
}

.personnel-card__name::before { left: -10px; border-right: 0; transform: translateX(-10px); }
.personnel-card__name::after { right: -10px; border-left: 0; transform: translateX(10px); }

.personnel-card__name-scan {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #fff;
    box-shadow: 0 0 15px #fff, 0 0 5px var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

.personnel-card.revealed .personnel-card__name {
    color: var(--white);
    text-shadow: 0 0 10px rgba(255,255,255,0.4);
    transition-delay: 0.3s;
}

.personnel-card.revealed .personnel-card__name::before {
    opacity: 0.6; left: 0; transform: translateX(0);
}

.personnel-card.revealed .personnel-card__name::after {
    opacity: 0.6; right: 0; transform: translateX(0);
}

.personnel-card.revealed .personnel-card__name-scan {
    animation: tactical-beam 1.2s var(--ease) forwards;
    animation-delay: 0.4s;
}

@keyframes tactical-beam {
    0% { transform: scaleX(0); opacity: 0; }
    30% { transform: scaleX(1); opacity: 1; }
    70% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}

.personnel-card.revealed .personnel-card__name {
    animation: chroma-glitch 0.6s var(--ease) 0.6s;
}

@keyframes chroma-glitch {
    0% { text-shadow: 3px 0 #f0f, -3px 0 #0ff; transform: skewX(0deg); opacity: 0.8; }
    20% { text-shadow: -3px 0 #f0f, 3px 0 #0ff; transform: skewX(3deg); }
    40% { text-shadow: 2px 0 #f0f, -2px 0 #0ff; transform: skewX(-2deg); }
    100% { text-shadow: 0 0 10px rgba(255,255,255,0.4); transform: skewX(0deg); opacity: 1; }

}

/* Book Mockup Enhancements */
.book-cover img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: saturate(1.6);
    transition: filter 0.4s var(--ease);
}

.book-cover:hover img {
    filter: saturate(1.8);
}

/* MAILING LIST MODAL */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--ease);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: #05080a;
    border: 1px solid rgba(220, 240, 255, 0.15);
    padding: 70px 50px;
    max-width: 500px;
    width: 95%;
    position: relative;
    box-shadow: 0 50px 120px rgba(0,0,0,0.9);
    transform: translateY(20px);
    transition: transform 0.6s var(--ease);
    overflow: hidden; /* Clip the starfield */
}

.modal-bg {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    background: url('media/universe.png') center/cover no-repeat;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
    animation: modal-drift 40s linear infinite;
}

@keyframes modal-drift {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-5%, -2%); }
    100% { transform: translate(0, 0); }
}

.modal-scanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-icy), transparent);
    opacity: 0.3;
    z-index: 1;
    animation: modal-scan 6s linear infinite;
    pointer-events: none;
}

@keyframes modal-scan {
    0% { top: 0; }
    100% { top: 100%; }
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.modal-close:hover {
    color: var(--white);
    transform: scale(1.1);
}

.modal-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.modal-form {
    position: relative;
    z-index: 2;
}

.modal-input {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(220, 240, 255, 0.1);
    padding: 16px 20px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: all 0.4s var(--ease);
    box-sizing: border-box;
    margin-bottom: 20px;
}

.modal-input:focus {
    border-color: var(--accent-icy);
    background: rgba(220, 240, 255, 0.05);
    box-shadow: 0 0 20px rgba(220, 240, 255, 0.1);
}

.modal-form .btn--primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-icy);
    color: #05080a;
    font-weight: 700;
    letter-spacing: 0.2em;
    border: 1px solid var(--accent-icy);
    box-shadow: 0 5px 15px rgba(220, 240, 255, 0.2);
    transition: all 0.4s var(--ease);
    padding: 14px 20px;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
}

.modal-form .btn--primary:hover {
    background: var(--white);
    border-color: var(--white);
    box-shadow: 0 0 30px rgba(220, 240, 255, 0.4);
    transform: translateY(-2px);
}
/* ─── SECRET MEMBER NAV LINK ─────────────────────────────────────────────── */
/* Injected by JS only when sessionStorage has an active tier.                */
.nav-member-link {
    color: var(--accent-icy) !important;
    opacity: 0.75;
    text-shadow: 0 0 12px rgba(220, 240, 255, 0.4);
    transition: opacity 0.3s, text-shadow 0.3s;
}

.nav-member-link:hover,
.nav-member-link.active {
    opacity: 1 !important;
    text-shadow: 0 0 20px rgba(220, 240, 255, 0.7) !important;
}