/*
Theme Name: Krykna
Theme URI: https://krykna.com
Author: Your Name
Description: Krykna custom theme
Version: 1.0.0
Text Domain: krykna
*/

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* ══════════════════════════════════════════
   VARIABLES
   ══════════════════════════════════════════ */
:root {
    /* ── Backgrounds — cold stone black, pulled from logo void ── */
    --bg-void:      #050507;
    --bg-deep:      #080810;
    --bg-base:      #0d0d18;
    --bg-surface:   #12121f;
    --bg-raised:    #191928;
    --bg-hover:     #202030;
    --bg-panel:     rgba(8,8,16,0.94);

    /* Card backgrounds */
    --bg-card-top:  rgba(20,20,32,0.98);
    --bg-card-bot:  rgba(10,10,18,1.0);
    --bg-card-row:  rgba(16,16,26,0.97);

    /* ── Ember — the creature's eye glow, pure amber-orange ── */
    --ember-dim:    #2a1200;
    --ember-mid:    #6b3000;
    --ember-core:   #c45800;
    --ember-bright: #e87010;
    --ember-glow:   #ff8c20;
    --ember-hot:    #ffaa40;

    /* ── Gold — the logo text & light streak, warm amber-gold ── */
    --gold-dim:     #1e1400;
    --gold-mid:     #4a3000;
    --gold-core:    #9a6a00;
    --gold-bright:  #d4900a;
    --gold-glow:    #f0b020;
    --gold-light:   #ffd060;

    /* ── Red — deep blood accent ── */
    --red-dim:      #2a0808;
    --red-mid:      #6a1010;
    --red-core:     #aa1818;
    --red-bright:   #cc2828;

    /* ── Text — cool stone/bone pulled from logo lettering ── */
    --text-primary:   #e8e0cc;   /* cool cream — stone face of the letters */
    --text-secondary: #b09060;   /* aged gold-grey */
    --text-muted:     #605040;   /* worn stone */
    --text-dim:       #28201a;   /* deep shadow */

    /* ── Border scale — keyed to gold-bright RGB 212,144,10 ── */
    --border-subtle:  rgba(212,144,10,0.08);
    --border-dim:     rgba(212,144,10,0.20);
    --border-gold:    rgba(212,144,10,0.50);
    --border-accent:  rgba(212,144,10,0.75);
    --border-ember:   rgba(196,88,0,0.50);

    /* Fonts */
    --font-display: 'Crimson Pro', serif;
    --font-body:    'DM Sans', sans-serif;

    /* Radius */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;

    /* Spacing scale */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  32px;
    --space-xl:  48px;
    --space-2xl: 64px;

    /* Letter-spacing scale */
    --tracking-tight:  0.03em;
    --tracking-normal: 0.08em;
    --tracking-wide:   0.15em;
    --tracking-wider:  0.22em;

    /* Transitions */
    --transition-fast: 0.15s;
    --transition-base: 0.20s;

    /* Layout */
    --container:        1320px;
    --container-narrow: 800px;
}

/* ══════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-void);
}

body {
    background-color: var(--bg-void);
    background-image:
        /* subtle cold noise grain — stone texture */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
        /* faint amber veins — like the eye glow bleeding into stone */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.04' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.50   0 0 0 0 0.20   0 0 0 0 0.00   0 0 0 14 -8'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23v)' opacity='0.12'/%3E%3C/svg%3E"),
        /* amber glow from top — logo creature radiating downward */
        radial-gradient(ellipse 60% 30% at 50% -2%, rgba(180,80,0,0.30) 0%, transparent 65%),
        /* deep amber ember from bottom — lava floor */
        radial-gradient(ellipse 80% 28% at 50% 108%, rgba(140,55,0,0.22) 0%, transparent 60%),
        /* cold edge darkening — cave walls closing in */
        linear-gradient(to right, rgba(2,2,6,0.7) 0%, transparent 16%, transparent 84%, rgba(2,2,6,0.7) 100%);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--gold-bright);
    text-decoration: none;
    transition: color var(--transition-base);
}
a:hover { color: var(--gold-glow); }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ══════════════════════════════════════════
   EYEBROW — pre-heading label (used in 3 templates)
   ══════════════════════════════════════════ */
.eyebrow {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-core);
    margin-bottom: var(--space-xs);
}

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-apply,
.btn-join-now,
.join-now,
.krykna-btn,
.guides-shortcode-wrap .btn,
.guides-shortcode-wrap .btn-primary,
.krykna-categories .btn-primary,
.krykna-categories .stretched-link,
button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: 12px var(--space-lg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-bright);
    background: linear-gradient(to bottom, rgba(26,22,10,0.98) 0%, rgba(16,14,6,1.0) 50%, rgba(12,10,4,1.0) 100%);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    white-space: nowrap;
    box-shadow: 0 3px 0 rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,180,60,0.10), inset 0 -1px 0 rgba(0,0,0,0.4);
    -webkit-appearance: none;
    appearance: none;
}

.btn-primary:hover,
.btn-apply:hover,
.btn-join-now:hover,
.join-now:hover,
.krykna-btn:hover,
.guides-shortcode-wrap .btn:hover,
.guides-shortcode-wrap .btn-primary:hover,
.krykna-categories .btn-primary:hover,
.krykna-categories .stretched-link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: linear-gradient(to bottom, rgba(60,45,8,1.0) 0%, rgba(40,30,6,1.0) 100%);
    border-color: var(--gold-glow);
    color: var(--gold-light);
    box-shadow: 0 3px 0 rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,190,70,0.18), 0 0 24px rgba(212,144,10,0.28);
    text-decoration: none;
}

.btn-secondary {
    border-color: var(--border-gold);
    color: var(--text-secondary);
    background: linear-gradient(to bottom, rgba(20,18,8,0.96) 0%, rgba(12,12,20,0.98) 100%);
}
.btn-secondary:hover { border-color: var(--gold-bright); color: var(--text-primary); }

.btn-ghost {
    background: transparent;
    border-color: rgba(212,144,10,0.25);
    color: var(--text-muted);
    box-shadow: none;
}
.btn-ghost:hover {
    background: rgba(212,144,10,0.06);
    border-color: var(--border-gold);
    color: var(--text-secondary);
    box-shadow: none;
}

.krykna-btn-discord,
.krykna-btn-discord:hover {
    font-family: var(--font-display) !important;
    letter-spacing: var(--tracking-wide) !important;
}
.krykna-btn-discord {
    background: linear-gradient(to bottom, rgba(68,76,222,0.95) 0%, rgba(50,56,190,1.0) 100%) !important;
    border-color: rgba(100,116,255,0.7) !important;
    color: #fff !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(180,190,255,0.2) !important;
}
.krykna-btn-discord:hover {
    background: linear-gradient(to bottom, rgba(88,100,242,1.0) 0%, rgba(68,76,222,1.0) 100%) !important;
    border-color: rgba(140,150,255,0.9) !important;
    color: #fff !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.6), 0 0 20px rgba(88,101,242,0.35) !important;
}

.krykna-btn:disabled,
.krykna-btn[disabled],
button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn-apply {
    font-size: 13px !important;
    padding: 14px 48px !important;
    margin-bottom: var(--space-sm);
    border-color: var(--gold-bright) !important;
}

.hero-btn-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}
.hero-btn-row .btn-apply { margin-bottom: 0; }

/* ══════════════════════════════════════════
   HEADER & NAV
   ══════════════════════════════════════════ */
#site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}
#site-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 20px; height: 20px;
    border-top: 1px solid var(--border-accent);
    border-left: 1px solid var(--border-accent);
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    transition: opacity 0.4s;
}
#site-header::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 20px; height: 20px;
    border-top: 1px solid var(--border-accent);
    border-right: 1px solid var(--border-accent);
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    transition: opacity 0.4s;
}
.scrolled #site-header::before,
.scrolled #site-header::after { opacity: 1; }

.primary-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 72px;
    padding: 0 var(--space-lg);
    position: relative;
    background: linear-gradient(to bottom, rgba(10,10,18,0.99) 0%, rgba(8,8,16,1.0) 100%);
    border-top: 1px solid var(--border-gold);
    border-bottom: 1px solid var(--border-dim);
    /* Full width on page load */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition:
        width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s;
}

/* Compact on scroll */
.scrolled .primary-nav {
    width: fit-content;
    max-width: 900px;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px));
}
.primary-nav::before {
    content: '';
    position: absolute;
    top: 1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,180,60,0.16) 20%, rgba(255,190,70,0.28) 50%, rgba(255,180,60,0.16) 80%, transparent);
    pointer-events: none;
}
.primary-nav::after {
    content: '';
    position: absolute;
    bottom: 1px; left: 12px; right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent);
    pointer-events: none;
}

.primary-nav-list {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0;
    width: 100%;
    position: relative;
    z-index: 2;
}

.nav-left  { display: flex; align-items: center; justify-content: flex-end; }
.nav-right { display: flex; align-items: center; justify-content: flex-start; }

.nav-left li, .nav-right li { list-style: none; position: relative; }

.nav-left li + li::before,
.nav-right li + li::before {
    content: '';
    position: absolute;
    left: 0; top: 15%;
    height: 70%; width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(212,144,10,0.45) 30%, rgba(212,144,10,0.45) 70%, transparent);
    pointer-events: none;
}

.nav-left  a,
.nav-right a {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(210,165,80,0.85);
    text-decoration: none;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
    transition: color var(--transition-base), background var(--transition-base);
    white-space: nowrap;
}
.nav-left  a::after,
.nav-right a::after {
    content: '';
    position: absolute;
    bottom: 6px; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity var(--transition-base), transform 0.25s;
}
.nav-left  a:hover,
.nav-right a:hover { color: var(--gold-light); background: rgba(212,144,10,0.07); }
.nav-left  a:hover::after,
.nav-right a:hover::after { opacity: 1; transform: scaleX(1); }

.nav-left  .current-menu-item a,
.nav-right .current-menu-item a,
.nav-left  .current_page_item a,
.nav-right .current_page_item a { color: var(--gold-light); background: rgba(212,144,10,0.09); }
.nav-left  .current-menu-item a::after,
.nav-right .current-menu-item a::after,
.nav-left  .current_page_item a::after,
.nav-right .current_page_item a::after { opacity: 1; transform: scaleX(1); }
.nav-left  .current-menu-item a::before,
.nav-right .current-menu-item a::before,
.nav-left  .current_page_item a::before,
.nav-right .current_page_item a::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 6px var(--gold-bright);
    flex-shrink: 0;
}

.nav-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28px;
    position: relative;
}
.nav-logo-item::before,
.nav-logo-item::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 5px; height: 5px;
    border: 1px solid var(--border-accent);
    background: rgba(212,144,10,0.15);
}
.nav-logo-item::before { left:  8px; }
.nav-logo-item::after  { right: 8px; }

.site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
    transition: opacity var(--transition-base);
}
.site-logo:hover { opacity: 0.85; color: var(--text-primary); }
.site-logo-placeholder { display: block; width: 60px; height: 72px; pointer-events: none; }

/* Nav logo on front page — hidden until hero logo is consumed by the nav */
.site-logo-nav-reveal {
    opacity: 0;
    transform: translateY(6px) scale(0.88);
    pointer-events: none;
    transition:
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-consumed .site-logo-nav-reveal {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.site-logo-img {
    height: 44px; width: auto;
    object-fit: contain;
    mix-blend-mode: lighten;
    filter: drop-shadow(0 0 8px rgba(212,144,10,0.35));
    transition: filter var(--transition-base);
}
.site-logo:hover .site-logo-img { filter: drop-shadow(0 0 14px rgba(212,144,10,0.55)); }

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 80vh;          /* grows taller if content exceeds this */
    display: flex; align-items: stretch; justify-content: center;
    overflow: hidden;
    background-color: #050507;
}

/* Hero inner — top-aligned column: logo near top, CTA directly below */
.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 5em;        /* 5em below menu */
    padding-bottom: var(--space-2xl);
    position: relative;
    z-index: 50;             /* below header (100) — logo scrolls behind nav */
    width: 100%;
}

/* CTA block — directly below the logo */
.hero-cta {
    margin-top: var(--space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.hero-cta-eyebrow {
    color: var(--ember-bright);
    letter-spacing: var(--tracking-wider);
    font-size: 11px;
}

.hero-cta-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3.5vw, 44px);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
    text-shadow:
        0 0 40px rgba(200,90,0,0.5),
        0 0 80px rgba(160,40,0,0.25),
        0 2px 6px rgba(0,0,0,0.95);
}

.hero-cta-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-xs);
}
/* Both buttons identical size */
.hero-cta-buttons .btn-apply,
.hero-cta-buttons .btn-secondary {
    font-size: 13px !important;
    padding: 14px 48px !important;
    margin-bottom: 0 !important;
}
.hero-bg,
#lightning-canvas,
.hero-sith,
.hero-bottom-edge {
    /* position:absolute children are clipped by overflow:hidden on .hero */
}

.hero-bg {
    position: absolute; inset: 0;
    background-image: url('https://thekrykna.eu/wp-content/uploads/2026/03/hero_bg-scaled.jpg');
    background-size: cover; background-position: center center; background-repeat: no-repeat;
    z-index: 0; filter: brightness(0.75);
}
.hero-bg::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(2,2,8,0.75) 0%, rgba(2,2,8,0.2) 25%, rgba(2,2,8,0.0) 50%, rgba(2,2,8,0.0) 65%, rgba(2,2,8,0.55) 85%, rgba(2,2,8,0.92) 100%);
    z-index: 1;
}
.hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(2,2,8,0.5) 0%, transparent 20%, transparent 80%, rgba(2,2,8,0.5) 100%);
    z-index: 1;
}
#lightning-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 3;
}

.hero-sith {
    position: absolute; bottom: 0;
    width: 38%; max-width: 620px; min-width: 280px;
    z-index: 5; pointer-events: none; display: flex; align-items: flex-end;
}
.hero-sith-right { right: 0; justify-content: flex-end; }
.hero-sith-left  { left: 0;  justify-content: flex-start; }
.hero-sith-img {
    position: relative; z-index: 2;
    width: 100%; height: auto; display: block;
    mix-blend-mode: lighten; opacity: 0.95;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.7) 68%, rgba(0,0,0,0.3) 82%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.7) 68%, rgba(0,0,0,0.3) 82%, rgba(0,0,0,0) 100%);
}
.hero-sith-right .hero-sith-img { transform: scaleX(-1); }
.hero-sith-left  .hero-sith-img { transform: scaleX(1);  }

.hero-bottom-edge {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 6; pointer-events: none; height: 50px;
    background-image: url('https://thekrykna.eu/wp-content/uploads/2026/03/hero_bottom.png');
    background-repeat: repeat-x; background-size: auto 50px; background-position: bottom center;
}

.is-front-page #site-header  { z-index: 100; }
.is-front-page .hero-inner   { z-index: 50; } /* below header so logo passes behind nav */

/* Hero logo — size and pointer events */
.is-front-page .hero-logo-wrap {
    z-index: 50;
    pointer-events: none;
}
.is-front-page .hero-logo-wrap .hero-logo-img { pointer-events: auto; }

/* Hero logo image sizing — responsive */
.hero-logo-wrap img,
.hero-logo-wrap .hero-logo-img {
    max-width: min(520px, 72vw); /* default: medium screens */
    width: 100%;
    height: auto;
    display: block;
}
@media (min-width: 2200px) {
    .hero-logo-wrap img,
    .hero-logo-wrap .hero-logo-img {
        max-width: min(700px, 50vw); /* larger on ultrawide */
    }
}
@media (max-width: 1280px) {
    .hero-logo-wrap img,
    .hero-logo-wrap .hero-logo-img {
        max-width: min(420px, 78vw); /* slightly smaller on laptop */
    }
}
@media (max-width: 768px) {
    .hero-logo-wrap img,
    .hero-logo-wrap .hero-logo-img {
        max-width: min(320px, 85vw); /* compact on mobile */
    }
}

/* ══════════════════════════════════════════
   INFO STRIP
   ══════════════════════════════════════════ */
.info-strip { background: var(--bg-deep); padding: 0 0 var(--space-2xl); position: relative; z-index: 3; }
.info-strip::before {
    content: ''; display: block; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,144,10,0.4), rgba(240,160,20,0.85), rgba(212,144,10,0.4), transparent);
    margin-bottom: 2px;
}
.info-strip::after {
    content: ''; display: block; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
    margin-bottom: var(--space-xl);
}
.info-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

.info-panel {
    background: linear-gradient(to bottom, var(--bg-card-row) 0%, var(--bg-card-bot) 100%);
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--border-gold);
    padding: var(--space-md);
}
.info-panel:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.info-panel:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.info-panel-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: var(--space-sm); padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.info-panel-icon { color: var(--gold-bright); font-size: 18px; line-height: 1; }
.info-panel-title {
    font-family: var(--font-display); font-size: 11px; font-weight: 400;
    letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold-bright);
}

.info-item {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
    text-decoration: none; transition: padding-left var(--transition-base);
}
.info-item:last-child { border-bottom: none; }
.info-item:hover      { padding-left: 6px; }
.info-item-title { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: color var(--transition-base); }
.info-item:hover .info-item-title { color: var(--gold-glow); }
.info-item-date  { font-size: 11px; letter-spacing: var(--tracking-normal); text-transform: uppercase; color: var(--text-dim); }
.info-item-empty { font-size: 13px; color: var(--text-dim); font-style: italic; }

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   SITE-WIDE FOOTER
   ══════════════════════════════════════════ */
#site-footer {
    margin-top: 0;
}

/* ── CTA band: two-part split image, full width ── */
.footer-cta {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Top section — battlefield, capped height, crops to fill width */
.footer-cta-top {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    max-height: 480px;
    position: relative;
}

/* Footer battlefield lightning canvas */
#footer-lightning-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}

/* Footer smoke canvas */


.footer-cta-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50px;
    background-image: url('https://thekrykna.eu/wp-content/uploads/2026/03/hero_bottom.png');
    background-repeat: repeat-x;
    background-size: auto 50px;
    background-position: top center;
    transform: scaleY(-1);
    z-index: 3;
    pointer-events: none;
}

/* Border strip on bottom edge */
.footer-cta-top::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50px;
    background-image: url('https://thekrykna.eu/wp-content/uploads/2026/03/hero_bottom.png');
    background-repeat: repeat-x;
    background-size: auto 50px;
    background-position: bottom center;
    z-index: 3;
    pointer-events: none;
}

.footer-cta-top-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    filter: brightness(0.65);
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0) 100%
    );
}

/* Bottom section — stone frame, fixed height, cover scales it */
.footer-cta-bottom {
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, var(--bg-deep) 0%, var(--bg-base) 100%);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-cta-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.footer-cta-content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.footer-cta-eyebrow {
    color: var(--ember-bright);
    letter-spacing: var(--tracking-wider);
}

.footer-cta-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
    text-shadow:
        0 0 40px rgba(200,90,0,0.55),
        0 0 80px rgba(160,40,0,0.28),
        0 2px 6px rgba(0,0,0,0.95);
}

.footer-cta-text {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.6vw, 17px);
    line-height: 1.75;
    color: var(--text-secondary);
    text-shadow: 0 1px 8px rgba(0,0,0,0.9);
    max-width: 500px;
    margin: 0;
}

.footer-cta-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}
.footer-cta-buttons .btn-apply { margin-bottom: 0 !important; }

/* ── Nav + legal bar ── */
.footer-bar {
    background: linear-gradient(to bottom, rgba(4,4,10,1.0) 0%, rgba(2,2,6,1.0) 100%);
    border-top: 1px solid var(--border-dim);
    position: relative;
}
.footer-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212,144,10,0.35) 30%,
        rgba(212,144,10,0.6) 50%,
        rgba(212,144,10,0.35) 70%,
        transparent
    );
}

.footer-bar-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.footer-nav-list,
.footer-legal-list {
    display: flex;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.footer-nav-list a,
.footer-legal-list a {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}
.footer-nav-list a:hover { color: var(--gold-bright); }
.footer-legal-list a { color: var(--text-dim); }
.footer-legal-list a:hover { color: var(--text-muted); }

/* ── Copyright + IP disclaimer ── */
.footer-copyright {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}
.footer-copyright p {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: var(--tracking-normal);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}
.footer-disclaimer {
    color: var(--text-dim) !important;
    font-size: 9px !important;
    letter-spacing: var(--tracking-tight) !important;
    max-width: 780px;
    margin: 0 auto !important;
}

/* ══════════════════════════════════════════
   SECTION UTILITIES
   ══════════════════════════════════════════ */
.section-divider { display: flex; align-items: center; margin: var(--space-xl) 0; }
.section-divider::before,
.section-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to var(--dir, right), transparent, rgba(212,144,10,0.2) 20%, rgba(212,144,10,0.65) 60%, rgba(212,144,10,0.9) 100%);
}
.section-divider::after { --dir: left; }
.section-divider-mark {
    width: 8px; height: 8px; background: var(--gold-bright);
    transform: rotate(45deg); flex-shrink: 0; margin: 0 12px;
    box-shadow: 0 0 8px rgba(212,144,10,0.6);
}

.section-heading { text-align: center; margin-bottom: var(--space-xl); }
.section-heading h2 {
    font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 400;
    letter-spacing: var(--tracking-wide); color: var(--gold-bright);
    margin-bottom: 12px; text-shadow: 0 0 30px rgba(212,144,10,0.3);
}
.section-heading p { font-size: 16px; color: var(--text-secondary); max-width: 600px; margin: 0 auto; line-height: 1.7; }

/* ══════════════════════════════════════════
   FRONT PAGE — ABOUT SECTION
   ══════════════════════════════════════════ */
.front-about {
    background: var(--bg-deep);
    padding: var(--space-2xl) 0;
    position: relative;
    text-align: center;
}

/* Subtle top rule */
.front-about::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212,144,10,0.25) 20%,
        rgba(240,160,20,0.6) 50%,
        rgba(212,144,10,0.25) 80%,
        transparent
    );
}

.about-block {
    max-width: 860px;
    margin: 0 auto;
}

.about-block .about-eyebrow {
    margin-bottom: var(--space-sm);
}

/* H2 opening title */
.about-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--gold-bright);
    margin-bottom: var(--space-md);
    text-shadow: 0 0 40px rgba(212,144,10,0.25);
}

/* Base content styles */
.about-content {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-secondary);
    text-align: center;
}

.about-content > p {
    max-width: 720px;
    margin: 0 auto 1em;
}
.about-content > p:last-of-type { margin-bottom: 0; }

.about-content a {
    color: var(--gold-bright);
    text-decoration: underline;
    text-decoration-color: var(--border-dim);
    transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
.about-content a:hover {
    color: var(--gold-glow);
    text-decoration-color: var(--gold-glow);
}

/* ── Ornament separator (PHP-rendered) ── */
.about-separator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-xl) auto;
    max-width: 480px;
}
.about-separator-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-gold));
}
.about-separator .about-separator-line:last-child {
    background: linear-gradient(to left, transparent, var(--border-gold));
}
.about-separator-diamond {
    width: 7px;
    height: 7px;
    background: var(--gold-bright);
    transform: rotate(45deg);
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(212,144,10,0.8), 0 0 24px rgba(212,144,10,0.3);
}

/* ── Hide any WP separators that remain inside content sections ── */
.about-content .wp-block-separator { display: none; }

/* ── Base content styles (shared) ── */
.about-content {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-secondary);
    text-align: center;
}

.about-content a {
    color: var(--gold-bright);
    text-decoration: underline;
    text-decoration-color: var(--border-dim);
    transition: color var(--transition-base), text-decoration-color var(--transition-base);
}
.about-content a:hover {
    color: var(--gold-glow);
    text-decoration-color: var(--gold-glow);
}

/* ── Section 1: intro paragraphs ── */
.about-content--intro > p {
    max-width: 720px;
    margin: 0 auto 1em;
}
.about-content--intro > p:last-child { margin-bottom: 0; }

/* ── Section 2: What We Offer ── */
.about-content--offers h3.wp-block-heading {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    text-align: center;
    margin: 0 auto var(--space-xs);
    max-width: 720px;
}
.about-content--offers h3.wp-block-heading + p {
    font-size: 15px;
    color: var(--text-muted);
    letter-spacing: var(--tracking-normal);
    margin: 0 auto var(--space-xl);
    max-width: 560px;
}

/* Outer columns — 2-col grid */
.about-content--offers > .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin: 0;
    flex-wrap: unset !important;
    text-align: left;
}
/* Inner columns (inside each outer col) — also 2-col */
.about-content--offers .wp-block-column > .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    flex-wrap: unset !important;
    margin: 0;
}
/* Each inner column = card */
.about-content--offers .wp-block-column > .wp-block-columns > .wp-block-column {
    background: linear-gradient(to bottom, var(--bg-card-top) 0%, var(--bg-card-bot) 100%);
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--border-gold);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255,180,60,0.06), 0 4px 24px rgba(0,0,0,0.55);
    transition: border-color var(--transition-base), transform var(--transition-base);
    padding: 0 !important;
}
.about-content--offers .wp-block-column > .wp-block-columns > .wp-block-column:hover {
    border-color: var(--border-gold);
    transform: translateY(-2px);
}
/* Image flush to top */
.about-content--offers .wp-block-column > .wp-block-columns > .wp-block-column .wp-block-image {
    margin: 0 !important;
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
}
.about-content--offers .wp-block-column > .wp-block-columns > .wp-block-column .wp-block-image figure {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-subtle);
}
.about-content--offers .wp-block-column > .wp-block-columns > .wp-block-column .wp-block-image img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
    border: none !important;
    filter: brightness(0.85);
    transition: filter var(--transition-base);
    max-width: 100% !important;
    vertical-align: bottom;
}
.about-content--offers .wp-block-column > .wp-block-columns > .wp-block-column:hover .wp-block-image img {
    filter: brightness(1);
}
/* H4 in card */
.about-content--offers .wp-block-column > .wp-block-columns > .wp-block-column h4.wp-block-heading {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold-bright);
    margin: var(--space-sm) var(--space-md) 6px;
    padding: 0;
}
/* Paragraph in card */
.about-content--offers .wp-block-column > .wp-block-columns > .wp-block-column p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: left;
    margin: 0 var(--space-md) var(--space-sm) !important;
    padding: 0;
    max-width: none;
}

/* ── Section 3: No requirements + closing ── */
.about-no-req {
    position: relative;
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        rgba(20,14,4,0.97) 0%,
        rgba(28,18,6,0.99) 50%,
        rgba(20,14,4,0.97) 100%
    );
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--border-gold);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,180,60,0.06), 0 4px 32px rgba(0,0,0,0.6);
}
.about-no-req::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(212,144,10,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.about-no-req::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212,144,10,0.3) 20%,
        rgba(240,170,40,0.75) 50%,
        rgba(212,144,10,0.3) 80%,
        transparent
    );
}
/* H3 headings in close section */
.about-content--close h3.wp-block-heading {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    text-align: center;
    margin: 0 auto var(--space-md);
    max-width: 700px;
    position: relative;
    text-shadow: 0 0 30px rgba(212,144,10,0.15);
}
/* Body paragraphs in no-req section */
.about-content--close p {
    font-size: clamp(15px, 1.8vw, 17px);
    line-height: 1.85;
    color: var(--text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 1em;
    position: relative;
}
.about-content--close p:last-child { margin-bottom: 0; }

/* Final closing line "Step onto the bridge" — last H3 */
.about-content--close h3.wp-block-heading:last-of-type {
    font-size: clamp(16px, 2.2vw, 20px);
    font-style: italic;
    color: var(--text-muted);
    letter-spacing: var(--tracking-normal);
    font-weight: 400;
    margin-top: var(--space-lg);
    text-shadow: none;
}

/* ── Buttons (anywhere in about content) ── */
.about-content .wp-block-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-lg);
    position: relative;
}
.about-content .wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: var(--tracking-wider) !important;
    text-transform: uppercase !important;
    padding: 12px var(--space-lg) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--gold-bright) !important;
    background: linear-gradient(to bottom, rgba(26,22,10,0.98) 0%, rgba(16,14,6,1.0) 100%) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,180,60,0.10) !important;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base) !important;
    white-space: nowrap !important;
}
.about-content .wp-block-button__link:hover {
    background: linear-gradient(to bottom, rgba(60,45,8,1.0) 0%, rgba(40,30,6,1.0) 100%) !important;
    border-color: var(--gold-glow) !important;
    color: var(--gold-light) !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.7), 0 0 24px rgba(212,144,10,0.28) !important;
}
.about-content .wp-block-button + .wp-block-button .wp-block-button__link {
    border-color: var(--border-gold) !important;
    color: var(--text-secondary) !important;
    background: linear-gradient(to bottom, rgba(20,18,8,0.96) 0%, rgba(12,12,20,0.98) 100%) !important;
}
.about-content .wp-block-button + .wp-block-button .wp-block-button__link:hover {
    border-color: var(--gold-bright) !important;
    color: var(--text-primary) !important;
}

.about-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .about-content--offers > .wp-block-columns { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .about-content--offers .wp-block-column > .wp-block-columns { grid-template-columns: 1fr !important; }
    .about-no-req { padding: var(--space-lg) var(--space-md); }
    .about-content .wp-block-buttons { flex-direction: column; align-items: center; }
    .about-content .wp-block-button__link { width: 100% !important; max-width: 320px; }
}

/* ══════════════════════════════════════════
   FRONT PAGE — ACTIVITY HUB
   ══════════════════════════════════════════ */
.activity-hub {
    background: var(--bg-void);
    padding: var(--space-2xl) 0;
    position: relative;
}

.activity-hub::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212,144,10,0.2) 20%,
        rgba(212,144,10,0.5) 50%,
        rgba(212,144,10,0.2) 80%,
        transparent
    );
}

.activity-hub-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.activity-hub-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--gold-bright);
    text-shadow: 0 0 30px rgba(212,144,10,0.25);
}

/* ── Grid: left-panel (50%) | calendar (50%)
   Columns default:     [guides 25%] [events 25%] [calendar 50%]
   Columns detail-open: [detail  50%             ] [calendar 50%] ── */

.activity-hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: auto;
    gap: var(--space-sm);
    align-items: stretch;
}

/* Default placement */
.activity-col--guides   { grid-column: 1; grid-row: 1; }
.activity-col--events   { grid-column: 2; grid-row: 1; }
.activity-col--calendar { grid-column: 3; grid-row: 1; }

/* Detail col: hidden by default, JS sets grid placement when shown */
.activity-col--detail {
    display: none;
}

/* Left panel wrapper is just a pass-through — not a visual element */
.activity-left-panel {
    display: contents; /* children participate in outer grid directly */
}

/* detail col placement when visible — JS sets display:flex on it */
.activity-col--detail {
    grid-column: 1 / 3;
    grid-row: 1;
}

/* Responsive ≤1100px: stack calendar below, guides+events side by side */
@media (max-width: 1100px) {
    .activity-hub-grid {
        grid-template-columns: 1fr 1fr;
    }
    .activity-col--guides   { grid-column: 1; grid-row: 1; }
    .activity-col--events   { grid-column: 2; grid-row: 1; }
    .activity-col--calendar { grid-column: 1 / -1; grid-row: 2; }
    .activity-col--detail   { grid-column: 1 / -1; grid-row: 1; }
}

/* Responsive ≤640px: everything stacked */
@media (max-width: 640px) {
    .activity-hub-grid {
        grid-template-columns: 1fr;
    }
    .activity-col--guides,
    .activity-col--events,
    .activity-col--calendar,
    .activity-col--detail { grid-column: 1; grid-row: auto; }
}

/* ── Shared column shell ── */
.activity-col {
    background: linear-gradient(to bottom, var(--bg-card-top) 0%, var(--bg-card-bot) 100%);
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--border-gold);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.activity-col-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.activity-col-icon {
    color: var(--gold-core);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.activity-col-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-bright);
    margin: 0;
}

.activity-col-body {
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── CTA link at col bottom ── */
.activity-col-cta {
    display: inline-block;
    margin-top: auto;
    padding-top: var(--space-sm);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold-core);
    text-decoration: none;
    transition: color var(--transition-base);
}
.activity-col-cta:hover { color: var(--gold-glow); }

/* ── Empty state ── */
.activity-empty {
    font-size: 13px;
    color: var(--text-dim);
    font-style: italic;
    padding: var(--space-sm) 0;
}

/* ── Detail panel close button ── */
.activity-detail-close {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(212,144,10,0.08);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
    padding: 0;
}
.activity-detail-close:hover {
    background: rgba(212,144,10,0.16);
    border-color: var(--border-gold);
    color: var(--gold-bright);
}

/* ── Loading state ── */
.activity-detail-loading {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    padding: var(--space-md) 0;
    text-align: center;
}

/* ── Detail panel content ── */
.detail-image {
    margin: 0 calc(-1 * var(--space-md)) var(--space-md);
    margin-top: calc(-1 * var(--space-sm));
    overflow: hidden;
    border-bottom: 1px solid var(--border-subtle);
    max-height: 180px;
}
.detail-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    opacity: 0.85;
}

.detail-title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.2;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
}

.detail-meta-item {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
}
.detail-location::before {
    content: '⌖ ';
    color: var(--gold-core);
}

.detail-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}
.detail-description p { margin-bottom: 0.8em; }
.detail-description p:last-child { margin-bottom: 0; }

/* ── Requirements (operations) ── */
.detail-reqs {
    margin-bottom: var(--space-sm);
    padding: 12px var(--space-md);
    background: rgba(212,144,10,0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.detail-reqs-label {
    display: block;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-core);
    margin-bottom: var(--space-xs);
}
.detail-reqs-grid {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.detail-req {
    font-size: 12px;
    font-family: var(--font-display);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: var(--tracking-tight);
}
.req--tank { background: rgba(80,120,220,0.12); border: 1px solid rgba(80,120,220,0.3); color: #88aaee; }
.req--heal { background: rgba(60,180,80,0.12);  border: 1px solid rgba(60,180,80,0.3);  color: #88cc88; }
.req--dps  { background: rgba(212,144,10,0.12); border: 1px solid var(--border-dim);    color: var(--gold-bright); }

/* ── Signups section ── */
.detail-signups {
    margin-top: var(--space-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.detail-signups-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
}
.detail-signups-title {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-core);
}
.detail-signups-count {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
}
.count--yes   { color: #88cc88; }
.count--maybe { color: var(--gold-bright); }
.count--bench { color: var(--text-secondary); }
.count--none  { color: var(--text-dim); font-style: italic; }

/* ── Status pills for groups ── */
.status--yes   { color: #88cc88; }
.status--bench { color: var(--text-secondary); }
.status--maybe { color: var(--gold-bright); }
.status--no    { color: var(--text-dim); }

/* ── Roster ── */
.detail-roster-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.detail-roster-label {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.detail-roster-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.detail-roster-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 10px;
    background: rgba(212,144,10,0.04);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
.detail-roster-name {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
}
.detail-roster-role {
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}
.detail-roster-gate {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: var(--space-xs) 0;
}

/* ══════════════════════════════════════════
   ACTIVITY HUB — GUIDES COLUMN
   ══════════════════════════════════════════ */
.activity-guide-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    transition: padding-left var(--transition-fast);
}
.activity-guide-item:last-of-type { border-bottom: none; }
.activity-guide-item:hover { padding-left: 4px; }

.activity-guide-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}
.activity-guide-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity var(--transition-base);
}
.activity-guide-item:hover .activity-guide-thumb-img { opacity: 1; }

.activity-guide-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.activity-guide-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold-core);
}

.activity-guide-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-base);
}
.activity-guide-item:hover .activity-guide-name { color: var(--gold-bright); }

.activity-guide-date {
    font-size: 10px;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ══════════════════════════════════════════
   ACTIVITY HUB — EVENTS COLUMN
   ══════════════════════════════════════════ */
.activity-event-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.activity-event-item:last-of-type { border-bottom: none; }

/* Date badge */
.activity-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    background: rgba(212,144,10,0.08);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
}

.activity-event-day {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-bright);
}

.activity-event-mon {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold-core);
    margin-top: 2px;
}

.activity-event-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 2px;
}

/* Type pill */
.activity-event-type {
    display: inline-flex;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    width: fit-content;
    /* default: simple */
    color: var(--gold-core);
    background: rgba(212,144,10,0.1);
    border: 1px solid var(--border-dim);
}
.activity-event-type.type--complex {
    color: var(--ember-bright);
    background: rgba(196,88,0,0.12);
    border-color: var(--border-ember);
}
.activity-event-type.type--giveaway {
    color: #a0b4ff;
    background: rgba(88,101,242,0.1);
    border-color: rgba(88,101,242,0.3);
}

.activity-event-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-event-time {
    font-size: 11px;
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════
   ACTIVITY HUB — CALENDAR COLUMN
   ══════════════════════════════════════════ */
.activity-col--calendar .activity-col-body {
    padding: var(--space-sm);
}

/* Logged-out gate */
.activity-calendar-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
}
.activity-calendar-gate p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* FullCalendar overrides scoped to activity hub */
#activity-calendar {
    --fc-border-color:               var(--border-subtle);
    --fc-button-bg-color:            var(--bg-card-top);
    --fc-button-border-color:        var(--border-dim);
    --fc-button-text-color:          var(--text-secondary);
    --fc-button-hover-bg-color:      rgba(40,30,6,1.0);
    --fc-button-hover-border-color:  var(--border-gold);
    --fc-button-active-bg-color:     rgba(48,38,8,1.0);
    --fc-button-active-border-color: var(--border-accent);
    --fc-today-bg-color:             rgba(212,144,10,0.07);
    --fc-highlight-color:            rgba(212,144,10,0.08);
    --fc-event-bg-color:             rgba(180,75,0,0.85);
    --fc-event-border-color:         rgba(220,110,10,0.6);
    --fc-event-text-color:           var(--text-primary);
    --fc-page-bg-color:              transparent;
    --fc-neutral-bg-color:           rgba(18,18,28,0.5);
}

#activity-calendar .fc-toolbar-title {
    font-family: var(--font-display) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: var(--tracking-normal) !important;
    color: var(--text-primary) !important;
}

#activity-calendar .fc-col-header-cell-cushion {
    font-family: var(--font-display) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    color: var(--gold-core) !important;
    text-decoration: none !important;
}

#activity-calendar .fc-daygrid-day-number {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
}

#activity-calendar .fc-day-today .fc-daygrid-day-number {
    color: var(--gold-bright) !important;
    font-weight: 700 !important;
}

#activity-calendar .fc-button {
    font-family: var(--font-display) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 10px !important;
}

#activity-calendar .fc-event {
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    cursor: pointer !important;
}

#activity-calendar .fc-theme-standard td,
#activity-calendar .fc-theme-standard th {
    border-color: rgba(212,144,10,0.08) !important;
}

/* ══════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    width: 100%; padding: 10px 14px;
    background: rgba(6,6,12,0.96);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary); font-family: var(--font-body); font-size: 14px;
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--border-gold);
    box-shadow: 0 0 0 2px var(--border-subtle), inset 0 1px 3px rgba(0,0,0,0.4);
}
label {
    display: block; font-family: var(--font-display);
    font-size: 10px; font-weight: 400;
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 6px;
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4900a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px; cursor: pointer;
}
select option { background: #0a0a14; color: var(--text-primary); }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* ── Hero sith figures ── */
@media (max-width: 2199px) { .hero-sith { width: 28%; max-width: 480px; } }
@media (max-width: 1600px) { .hero-sith { width: 24%; max-width: 400px; } }
@media (max-width: 1280px) { .hero-sith { width: 20%; max-width: 320px; } }

/* ── Tablet — 900px ── */
@media (max-width: 900px) {
    .hero-sith-left  { display: none; }
    .hero-sith-right { width: 22%; min-width: 180px; }

    /* Info strip stacks */
    .info-strip-grid { grid-template-columns: 1fr; }
    .info-panel:first-child,
    .info-panel:last-child { border-radius: var(--radius-md); }

    /* Containers get breathing room */
    .container { padding-left: var(--space-md); padding-right: var(--space-md); }

    /* Page templates */
    .page-inner { padding: 0 var(--space-md); }
    .page-wrap  { padding-top: var(--space-xl); }
}

/* ── Mobile — 768px (matches mobile nav breakpoint) ── */
@media (max-width: 768px) {

    /* Hero */
    .hero { min-height: 90vw; height: auto; padding-bottom: 0; }
    .hero-inner { padding-top: 4em; padding-bottom: var(--space-xl); min-height: 90vw; }
    .hero-cta-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .hero-cta-buttons .btn-apply,
    .hero-cta-buttons .btn-secondary { width: auto; max-width: none; padding: 12px 28px !important; font-size: 11px !important; }
    .hero-sith-right { display: none; }

    /* Front page about */
    .front-about { padding: var(--space-xl) var(--space-md); }
    .about-block { padding: 0 var(--space-xs); }
    .about-content { font-size: 15px; }

    /* Activity hub header */
    .activity-hub { padding: var(--space-xl) 0; }
    .activity-hub-header { margin-bottom: var(--space-lg); }

    /* Activity hub grid — 2 cols at tablet */
    .activity-hub-grid { grid-template-columns: 1fr 1fr; }
    .activity-col--guides   { grid-column: 1; grid-row: 1; }
    .activity-col--events   { grid-column: 2; grid-row: 1; }
    .activity-col--calendar { grid-column: 1 / -1; grid-row: 2; }
    .activity-col--detail   { grid-column: 1 / -1; grid-row: 1; }

    /* Calendar gate on mobile */
    #activity-calendar .fc-toolbar-title { font-size: 13px !important; }
    #activity-calendar .fc-button { font-size: 8px !important; padding: 3px 7px !important; }

    /* Info strip */
    .info-strip { padding-bottom: var(--space-xl); }
    .info-strip-grid { grid-template-columns: 1fr; gap: 2px; }
    .info-panel { padding: var(--space-sm) var(--space-md); }

    /* Section titles */
    .section-heading h2 { font-size: clamp(20px, 5vw, 28px); }

    /* Buttons — full width on small screens */
    .btn-apply, .btn-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .hero-btn-row { flex-direction: column; align-items: center; }

    /* Page content */
    .page-wrap  { padding: var(--space-lg) 0 var(--space-xl); }
    .page-inner { padding: 0 var(--space-md); max-width: 100%; }
    .page-title { font-size: clamp(24px, 6vw, 36px); }
    .page-content h2,
    .guide-content h2 { font-size: 20px; }
    .page-content h3,
    .guide-content h3 { font-size: 17px; }
    .guide-content,
    .page-content  { font-size: 15px; }

    /* Stone cards */
    .krykna-card  { padding: var(--space-md); }
    .stone-card   { padding: var(--space-sm) var(--space-md); }

    /* Footer CTA */
    .footer-cta-content { padding: 0 var(--space-md); gap: var(--space-sm); }
    .footer-cta-buttons { flex-direction: column; align-items: center; }
    .footer-cta-buttons .btn-apply,
    .footer-cta-buttons .btn-secondary { width: 100%; max-width: 320px; }

    /* Footer bar */
    .footer-bar-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-sm);
    }
    .footer-nav-list,
    .footer-legal-list { justify-content: center; }
}

/* ── Small mobile — 480px ── */
@media (max-width: 480px) {

    /* Tighter spacing throughout */
    :root {
        --space-2xl: 48px;
        --space-xl:  36px;
        --space-lg:  24px;
    }

    /* Hero */
    /* hero logo sizing handled by base + breakpoint rules above */

    /* Activity hub — single column */
    .activity-hub-grid { grid-template-columns: 1fr; gap: var(--space-xs); }
    .activity-col--guides,
    .activity-col--events,
    .activity-col--calendar,
    .activity-col--detail { grid-column: 1; grid-row: auto; }

    /* Hide calendar col on very small — send to full members page */
    .activity-col--calendar { display: none; }

    /* Event items */
    .activity-event-item { gap: 10px; }
    .activity-event-day  { font-size: 16px; }
    .activity-event-name { font-size: 12px; }

    /* Guide items */
    .activity-guide-item { gap: 10px; }
    .activity-guide-name { font-size: 12px; }

    /* Detail panel */
    .detail-title { font-size: 20px; }
    .detail-description { font-size: 13px; }

    /* Footer image shorter */
    .footer-cta-top-img { height: 220px; }

    /* Footer cta text */
    .footer-cta-text { font-size: 14px; }

    /* Cards full width */
    .krykna-card { padding: var(--space-sm); clip-path: none; }
}

/* ── 600px — previous rule kept intact ── */
@media (max-width: 600px) {
    .hero-sith-right { display: none; }
    .primary-nav     { min-width: unset; }
    .footer-cta-top-img {
        height: 280px;
        object-position: center 20%;
    }
}

/* ══════════════════════════════════════════
   MOBILE NAV
   ══════════════════════════════════════════ */

/* Hide mobile bar on desktop, hide desktop nav on mobile */
.mobile-bar        { display: none; }
.mobile-menu       { display: none; }
.mobile-menu-backdrop { display: none; }

@media (max-width: 768px) {

    /* Hide desktop nav */
    .primary-nav { display: none; }

    /* ── Mobile top bar ── */
    .mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 64px;
        padding: 0 var(--space-md);
        background: linear-gradient(to bottom, rgba(8,8,16,0.99) 0%, rgba(6,6,12,1.0) 100%);
        border-bottom: 1px solid var(--border-dim);
        position: relative;
        z-index: 200;
    }

    .mobile-bar-logo { display: flex; align-items: center; text-decoration: none; }
    .mobile-bar-logo-img { height: 36px; width: auto; }
    .mobile-bar-logo-text {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: var(--tracking-wide);
        color: var(--gold-bright);
        text-transform: uppercase;
    }

    /* ── Hamburger button ── */
    .mobile-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: rgba(212,144,10,0.06);
        border: 1px solid var(--border-dim);
        border-radius: var(--radius-sm);
        cursor: pointer;
        padding: 0;
        transition: background var(--transition-base), border-color var(--transition-base);
        position: relative;
        flex-shrink: 0;
    }
    .mobile-hamburger:hover {
        background: rgba(212,144,10,0.14);
        border-color: var(--border-gold);
    }

    .hbg-line {
        display: block;
        width: 20px;
        height: 1.5px;
        background: var(--gold-bright);
        border-radius: 2px;
        transform-origin: center;
        transition:
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity   0.25s ease,
            width     0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* X animation when open */
    .mobile-hamburger.is-open .hbg-line--top {
        transform: translateY(6.5px) rotate(45deg);
    }
    .mobile-hamburger.is-open .hbg-line--mid {
        opacity: 0;
        width: 0;
    }
    .mobile-hamburger.is-open .hbg-line--bot {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    /* Show mobile menu */
    .mobile-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        inset: 0;
        z-index: 200;
        background:
            radial-gradient(ellipse 80% 50% at 50% -10%, rgba(180,70,0,0.18) 0%, transparent 60%),
            linear-gradient(to bottom, rgba(8,6,14,0.99) 0%, rgba(4,4,10,1.0) 100%);
        overflow-y: auto;
        padding: var(--space-xl) var(--space-lg) var(--space-2xl);
        /* Slide in from right */
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    .mobile-menu.is-open {
        transform: translateX(0);
    }

    .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 199;
        background: rgba(2,2,8,0.7);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .mobile-menu-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Ember canvas */
    .mobile-menu-embers {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
    }

    .mobile-menu-close {
        position: absolute;
        top: var(--space-md);
        right: var(--space-md);
        width: 36px;
        height: 36px;
        background: rgba(212,144,10,0.08);
        border: 1px solid var(--border-dim);
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
        z-index: 2;
        flex-shrink: 0;
    }
    .mobile-menu-close:hover {
        background: rgba(212,144,10,0.18);
        border-color: var(--border-gold);
        color: var(--gold-bright);
    }

    /* Logo */
    .mobile-menu-logo {
        position: relative;
        z-index: 1;
        margin-top: var(--space-lg);
        margin-bottom: var(--space-sm);
    }
    .mobile-menu-logo-img {
        height: 80px;
        width: auto;
        filter: drop-shadow(0 0 30px rgba(212,144,10,0.35));
    }
    .mobile-menu-logo-text {
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 700;
        letter-spacing: var(--tracking-wide);
        color: var(--gold-bright);
        text-transform: uppercase;
        text-shadow: 0 0 30px rgba(212,144,10,0.5);
    }

    /* Divider */
    .mobile-menu-divider {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 320px;
        gap: var(--space-sm);
        margin: var(--space-sm) 0;
        position: relative;
        z-index: 1;
    }
    .mobile-menu-divider-line {
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--border-gold));
    }
    .mobile-menu-divider:last-of-type .mobile-menu-divider-line,
    .mobile-menu-divider .mobile-menu-divider-line:last-child {
        background: linear-gradient(to left, transparent, var(--border-gold));
    }
    .mobile-menu-divider-diamond {
        width: 6px;
        height: 6px;
        background: var(--gold-bright);
        transform: rotate(45deg);
        flex-shrink: 0;
        box-shadow: 0 0 8px rgba(212,144,10,0.8);
    }

    /* Nav list */
    .mobile-menu-nav,
    .mobile-menu-legal {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 320px;
    }

    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .mobile-menu-item { width: 100%; }

    .mobile-menu-link {
        display: block;
        width: 100%;
        padding: 14px 0;
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 400;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--text-primary);
        text-decoration: none;
        text-align: center;
        transition: color var(--transition-base), letter-spacing var(--transition-base);
        border-bottom: 1px solid var(--border-subtle);
    }
    .mobile-menu-list:last-child .mobile-menu-item:last-child .mobile-menu-link {
        border-bottom: none;
    }
    .mobile-menu-link:hover,
    .mobile-menu-link.is-active {
        color: var(--gold-bright);
        letter-spacing: var(--tracking-wider);
    }
    .mobile-menu-link--dim {
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: var(--tracking-normal);
        padding: 10px 0;
    }
    .mobile-menu-link--dim:hover {
        color: var(--text-muted);
        letter-spacing: var(--tracking-normal);
    }

    /* Members hub */
    .mobile-menu-hub {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-xs);
        margin-top: var(--space-xs);
    }
    .mobile-menu-hub-label {
        margin-bottom: 4px;
        color: var(--ember-bright);
    }
    .mobile-menu-hub-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 13px var(--space-md);
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        text-decoration: none;
        border-radius: var(--radius-md);
        background: linear-gradient(to bottom, var(--bg-card-top), var(--bg-card-bot));
        border: 1px solid var(--border-dim);
        border-top: 2px solid var(--border-gold);
        color: var(--text-primary);
        transition: border-color var(--transition-base), background var(--transition-base);
    }
    .mobile-menu-hub-link:hover {
        border-color: var(--border-gold);
        background: linear-gradient(to bottom, rgba(30,22,8,0.99), rgba(20,16,6,1));
        color: var(--gold-bright);
    }
    .mobile-menu-hub-link--login,
    .mobile-menu-hub-link--logout {
        border-top-color: var(--border-ember);
        background: linear-gradient(to bottom, rgba(30,14,4,0.99), rgba(18,8,2,1));
        color: var(--ember-bright);
    }
    .mobile-menu-hub-icon {
        font-size: 10px;
        color: var(--gold-core);
    }

    /* Stagger item entrance animations */
    .mobile-menu-item {
        opacity: 0;
        transform: translateX(24px);
        transition:
            opacity  0.3s ease,
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mobile-menu.is-open .mobile-menu-item {
        opacity: 1;
        transform: translateX(0);
    }
    .mobile-menu.is-open .mobile-menu-item:nth-child(1) { transition-delay: 0.08s; }
    .mobile-menu.is-open .mobile-menu-item:nth-child(2) { transition-delay: 0.13s; }
    .mobile-menu.is-open .mobile-menu-item:nth-child(3) { transition-delay: 0.18s; }
    .mobile-menu.is-open .mobile-menu-item:nth-child(4) { transition-delay: 0.23s; }
    .mobile-menu.is-open .mobile-menu-item:nth-child(5) { transition-delay: 0.28s; }
    .mobile-menu.is-open .mobile-menu-item:nth-child(6) { transition-delay: 0.33s; }
    .mobile-menu-hub {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.3s ease 0.35s, transform 0.3s ease 0.35s;
    }
    .mobile-menu.is-open .mobile-menu-hub {
        opacity: 1;
        transform: translateY(0);
    }

} /* end @media 768px */

/* ══════════════════════════════════════════
   ULTRAWIDE
   ══════════════════════════════════════════ */
@media (min-width: 2800px) {
    .hero { background-color: #050507; }
    .hero-bg::before {
        background:
            linear-gradient(to bottom, rgba(2,2,8,0.75) 0%, rgba(2,2,8,0.2) 25%, rgba(2,2,8,0) 50%, rgba(2,2,8,0) 65%, rgba(2,2,8,0.55) 85%, rgba(2,2,8,0.92) 100%),
            linear-gradient(to right, rgba(2,2,8,1.0) 0%, rgba(2,2,8,0.85) 4%, rgba(2,2,8,0.4) 10%, transparent 20%, transparent 80%, rgba(2,2,8,0.4) 90%, rgba(2,2,8,0.85) 96%, rgba(2,2,8,1.0) 100%);
    }
    .hero-inner       { padding-left: 20%; padding-right: 20%; }
    .hero-sith-right  { right: 20%; }
    .hero-sith-left   { left:  20%; }
    .hero-bottom-edge { left: 0; right: 0; }
    .container        { max-width: 60%; margin: 0 auto; }
}

/* ══════════════════════════════════════════
   STONE CARD — single canonical panel base
   .krykna-card and .krykna-spec-stats share this
   ══════════════════════════════════════════ */
.stone-card,
.krykna-card,
.krykna-spec-stats {
    background: linear-gradient(to bottom, var(--bg-card-top) 0%, var(--bg-card-bot) 100%);
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--border-gold);
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,180,60,0.06), 0 4px 24px rgba(0,0,0,0.55);
}

.stone-card         { padding: var(--space-md); }
.krykna-card        { padding: var(--space-lg); }
.krykna-spec-stats  { padding: var(--space-md); margin: var(--space-md) 0; }

.stone-card-angled,
.krykna-card {
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px));
}

/* ══════════════════════════════════════════
   PAGE & POST TEMPLATES
   ══════════════════════════════════════════ */
.page-wrap {
    background: var(--bg-void);
    padding: var(--space-2xl) 0 80px;
    min-height: 60vh; font-family: var(--font-body);
}
.page-inner { max-width: 860px; margin: 0 auto; }

.page-breadcrumb,
.guide-breadcrumb {
    display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap;
    font-size: 11px; letter-spacing: var(--tracking-normal); text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--space-lg);
    font-family: var(--font-display);
}
.page-breadcrumb a,
.guide-breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color var(--transition-base); }
.page-breadcrumb a:hover,
.guide-breadcrumb a:hover { color: var(--gold-bright); }
.page-breadcrumb span:last-child,
.guide-breadcrumb span:last-child { color: var(--text-secondary); }
.page-breadcrumb-sep,
.guide-breadcrumb-sep { font-size: 8px; color: var(--text-dim); }

.page-header {
    margin-bottom: 36px; padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle); position: relative;
}
.page-header::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 120px; height: 1px;
    background: linear-gradient(90deg, var(--gold-core), transparent);
}

.page-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.page-meta-item,
.guide-meta-date,
.guide-meta-author {
    font-size: 11px; letter-spacing: var(--tracking-normal);
    text-transform: uppercase; color: var(--text-muted); font-family: var(--font-display);
}

.page-title,
.guide-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px); font-weight: 700;
    letter-spacing: var(--tracking-tight); color: var(--text-primary);
    line-height: 1.1; margin: 0 0 var(--space-sm) 0;
    text-shadow: 0 2px 20px rgba(2,2,8,0.5);
}

.page-excerpt,
.guide-excerpt {
    font-size: 17px; color: var(--text-secondary);
    line-height: 1.7; margin: 0 0 var(--space-sm) 0;
    border-left: 2px solid var(--border-gold);
    padding-left: var(--space-sm);
}

.page-thumbnail,
.guide-thumbnail {
    margin-bottom: var(--space-xl); border-radius: var(--radius-lg);
    overflow: hidden; border: 1px solid var(--border-subtle);
}
.page-thumbnail-img,
.guide-thumbnail-img { width: 100%; height: auto; display: block; }

.page-content,
.guide-content { font-size: 16px; line-height: 1.8; color: var(--text-secondary); }

/* ── Collapse Gutenberg two-column layout used for spec stats ──
   The right column is now empty (spec stats moved to sidebar).
   Force all wp-block-columns to single column and hide empty cols. ── */
.guide-content .wp-block-columns {
    display: block !important;
    flex-wrap: unset !important;
}
.guide-content .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
}
/* Hide the empty right column */
.guide-content .wp-block-column:empty,
.guide-content .wp-block-column:not(:has(*)) {
    display: none !important;
}

.page-content h1, .page-content h2, .page-content h3,
.page-content h4, .page-content h5, .page-content h6,
.guide-content h1, .guide-content h2, .guide-content h3,
.guide-content h4, .guide-content h5 {
    font-family: var(--font-display); color: var(--text-primary);
    letter-spacing: var(--tracking-tight); margin: 2em 0 0.6em; line-height: 1.2;
}
.page-content h2, .guide-content h2 { font-size: 26px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); position: relative; }
.page-content h2::after, .guide-content h2::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 1px; background: var(--gold-core); }
.page-content h3, .guide-content h3 { font-size: 20px; }
.page-content h4, .guide-content h4 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-bright); margin: 1.6em 0 0.5em; }
.page-content h5, .page-content h6, .guide-content h5 { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: var(--tracking-normal); color: var(--text-secondary); }
.page-content p, .guide-content p { margin-bottom: 1.2em; }
.page-content a, .guide-content a { color: var(--gold-bright); text-decoration: underline; text-decoration-color: var(--border-dim); transition: color var(--transition-base), text-decoration-color var(--transition-base); }
.page-content a:hover, .guide-content a:hover { color: var(--gold-glow); text-decoration-color: var(--gold-glow); }
.page-content strong, .guide-content strong { color: var(--text-primary); font-weight: 700; }
.page-content em,     .guide-content em     { color: var(--gold-core); font-style: italic; }
.page-content ul, .page-content ol, .guide-content ul, .guide-content ol { padding-left: var(--space-md); margin-bottom: 1.2em; }
.page-content li, .guide-content li { margin-bottom: 6px; }
.page-content ul li::marker, .guide-content ul li::marker { color: var(--gold-core); }
.page-content ol li::marker, .guide-content ol li::marker { color: var(--gold-core); font-weight: 700; }
.page-content blockquote, .guide-content blockquote { border-left: 2px solid var(--border-gold); padding: 14px var(--space-md); margin: var(--space-md) 0; background: var(--border-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-secondary); font-style: italic; }
.page-content code, .guide-content code { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 13px; font-family: monospace; color: var(--ember-bright); }
.page-content pre, .guide-content pre { background: rgba(4,4,10,0.92); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-md); overflow-x: auto; margin-bottom: 1.2em; }
.page-content pre code, .guide-content pre code { background: none; border: none; padding: 0; color: var(--text-primary); }
.page-content table, .guide-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: 14px; }
.page-content thead tr, .guide-content thead tr { background: var(--border-subtle); border-bottom: 1px solid var(--border-dim); }
.page-content th, .guide-content th { padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-bright); text-align: left; }
.page-content td, .guide-content td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-secondary); vertical-align: top; }
.page-content tr:hover td, .guide-content tr:hover td { background: rgba(212,144,10,0.03); }
.page-content img, .guide-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); margin: 12px 0; }
.page-content hr, .guide-content hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border-dim), transparent); margin: 36px 0; }
.page-content .wp-block-image { margin: 20px 0; }
.page-content .wp-block-image img { border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.page-content .wp-block-image figcaption { font-size: 12px; letter-spacing: var(--tracking-tight); color: var(--text-dim); text-align: center; margin-top: var(--space-xs); }
.page-content .wp-block-quote { border-left: 2px solid var(--border-gold); padding: 14px var(--space-md); margin: var(--space-md) 0; background: var(--border-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.page-content .wp-block-quote p { color: var(--text-secondary); font-style: italic; margin: 0; }
.page-content .wp-block-quote cite { display: block; font-size: 12px; letter-spacing: var(--tracking-normal); text-transform: uppercase; color: var(--text-dim); margin-top: var(--space-xs); font-style: normal; }
.page-content .wp-block-separator { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border-dim), transparent); margin: 36px 0; }
.page-content .wp-block-columns { display: flex; gap: var(--space-lg); margin-bottom: 1.4em; }
.page-content .wp-block-column  { flex: 1; }

.page-post-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 56px; padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); }
.page-post-nav-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(to bottom, var(--bg-card-row) 0%, var(--bg-card-bot) 100%);
    border: 1px solid var(--border-dim); border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--transition-base), transform var(--transition-fast);
    flex: 1; max-width: 48%;
}
.page-post-nav-item:hover { border-color: var(--border-gold); transform: translateY(-1px); }
.page-post-nav-next { text-align: right; }
.page-post-nav-label { font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-core); font-family: var(--font-display); }
.page-post-nav-title { font-family: var(--font-display); font-size: 14px; color: var(--text-primary); line-height: 1.3; }

.page-empty { text-align: center; padding: 80px 20px; }
.page-empty h1 { font-family: var(--font-display); font-size: 80px; font-weight: 700; color: rgba(212,144,10,0.2); line-height: 1; margin-bottom: var(--space-sm); letter-spacing: var(--tracking-normal); }
.page-empty h2 { font-family: var(--font-display); font-size: 24px; color: var(--text-primary); margin-bottom: 12px; }
.page-empty p  { color: var(--text-muted); margin-bottom: var(--space-lg); }

@media (max-width: 900px) {
    .page-wrap { padding: var(--space-xl) 0 var(--space-2xl); }
    .page-inner { max-width: 100%; }
    .page-post-nav { flex-direction: column; }
    .page-post-nav-item { max-width: 100%; }
    .page-post-nav-next { text-align: left; }
    .page-content .wp-block-columns { flex-direction: column; gap: var(--space-sm); }
}

/* ══════════════════════════════════════════
   KRYKNA PLUGIN UI
   ══════════════════════════════════════════ */

/* ── Wrapper ── */
.krykna-wrap {
    max-width: 80% !important;
    width: 80% !important;
    margin: 0 auto !important;
    padding: var(--space-xl) var(--space-lg);
    font-family: var(--font-body);
}
@media (min-width: 2200px) {
    .krykna-wrap { max-width: 70% !important; width: 70% !important; }
}
@media (max-width: 768px) {
    .krykna-wrap { max-width: 100% !important; width: 100% !important; padding: var(--space-lg) var(--space-md) !important; }
}

/* ── Members page — break out of page-inner/container constraints ── */
.members_area {
    width: 100%;
}
/* :has() for modern browsers */
.page-content:has(.members_area) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
.page-inner:has(.members_area),
.page-wrap:has(.members_area) .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
/* JS body class fallback for older browsers */
body.is-members-page .page-content,
body.is-members-page .page-inner,
body.is-members-page .page-wrap .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
/* Page header aligns with krykna-wrap */
.page-inner:has(.members_area) .page-header,
body.is-members-page .page-header {
    max-width: 65%;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}
@media (min-width: 2200px) {
    .page-inner:has(.members_area) .page-header,
    body.is-members-page .page-header {
        max-width: 80%;
        width: 80%;
    }
}
@media (max-width: 768px) {
    .page-inner:has(.members_area) .page-header,
    body.is-members-page .page-header {
        max-width: 100%;
        width: 100%;
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}
/* krykna-wrap inside members page is the width controller */
.members_area .krykna-wrap {
    max-width: 65% !important;
    width: 65% !important;
}
@media (min-width: 2200px) {
    .members_area .krykna-wrap { max-width: 80% !important; width: 80% !important; }
}
@media (max-width: 768px) {
    .members_area .krykna-wrap { max-width: 100% !important; width: 100% !important; padding: var(--space-lg) var(--space-md) !important; }
}

/* ── Card headings ── */
.krykna-card h3,
.krykna-card h3[style] {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: var(--tracking-wide) !important;
    color: var(--gold-bright) !important;
    margin: 0 0 var(--space-sm) 0 !important;
    text-shadow: 0 0 20px rgba(212,144,10,0.25) !important;
}

/* ── Divider ── */
.krykna-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,144,10,0.35) 20%, var(--border-gold) 50%, rgba(212,144,10,0.35) 80%, transparent);
    margin: var(--space-md) 0;
    border: none !important;
}

/* ── Subcards and inline #eee border panels ── */
.krykna-subcard,
.krykna-card [style*="border:1px solid #eee"],
.krykna-card [style*="border: 1px solid #eee"],
.krykna-card > div[style*="border"] {
    background: rgba(212,144,10,0.03) !important;
    border: 1px solid var(--border-dim) !important;
    border-left: 2px solid var(--border-gold) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-sm) var(--space-md) !important;
    margin-top: var(--space-sm) !important;
}

/* ── H4 headings ── */
.krykna-card h4,
.krykna-card h4[style] {
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: var(--tracking-wider) !important;
    text-transform: uppercase !important;
    color: var(--gold-core) !important;
    margin: 0 0 var(--space-xs) 0 !important;
}

/* ── Opacity body text ── */
.krykna-card [style*="opacity:.9"],
.krykna-card [style*="opacity: .9"],
.krykna-card [style*="opacity:.85"],
.krykna-card [style*="opacity:.8"] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}
.krykna-card [style*="font-size:13px"],
.krykna-card [style*="font-size: 13px"] {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
.krykna-card [style*="opacity:.9"] strong,
.krykna-card [style*="opacity: .9"] strong {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* ── Plain links → site style ── */
.krykna-card a:not(.krykna-btn):not([class*="btn"]) {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
    color: var(--gold-core) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--border-dim) !important;
    padding-bottom: 1px !important;
    transition: color var(--transition-base), border-color var(--transition-base) !important;
}
.krykna-card a:not(.krykna-btn):not([class*="btn"]):hover {
    color: var(--gold-bright) !important;
    border-bottom-color: var(--border-gold) !important;
}
.krykna-card [style*="border:1px solid #eee"] a,
.krykna-card [style*="border: 1px solid #eee"] a {
    color: var(--gold-bright) !important;
}

/* ── Delete event button ── */
.krykna-card button[style*="background:#fff"],
.krykna-card button[style*="background: #fff"] {
    background: linear-gradient(to bottom, rgba(140,20,20,0.9) 0%, rgba(100,10,10,1.0) 100%) !important;
    color: #ffaaaa !important;
    border-color: rgba(180,30,30,0.6) !important;
}
.krykna-card button[style*="background:#fff"]:hover,
.krykna-card button[style*="background: #fff"]:hover {
    background: linear-gradient(to bottom, rgba(180,30,30,1.0) 0%, rgba(130,15,15,1.0) 100%) !important;
    color: #fff !important;
}

/* ── Event title bold text ── */
.krykna-card [style*="font-weight:700"],
.krykna-card [style*="font-weight: 700"] {
    font-family: var(--font-display) !important;
    font-size: 15px !important;
    color: var(--text-primary) !important;
    letter-spacing: var(--tracking-tight) !important;
}

/* ── Event detail image ── */
.krykna-card img[style*="width:100%"] {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-subtle) !important;
    margin-bottom: var(--space-sm) !important;
}

/* ── Calendar sub-panels ── */
#krykna-cal-list [style*="border"],
#krykna-cal-selected [style*="border"] {
    border: 1px solid var(--border-subtle) !important;
    border-left: 2px solid var(--border-gold) !important;
    border-radius: var(--radius-md) !important;
    background: rgba(212,144,10,0.03) !important;
}

/* ── Rows ── */
.krykna-row { margin-bottom: var(--space-sm); }
.krykna-row label {
    display: block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.krykna-row input[type="text"],
.krykna-row input[type="email"],
.krykna-row input[type="password"],
.krykna-row input[type="number"],
.krykna-row select,
.krykna-row textarea {
    width: 100%;
    padding: 10px 14px;
    background: rgba(6,6,12,0.96);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    outline: none;
    -webkit-appearance: none;
}
.krykna-row input:focus, .krykna-row select:focus, .krykna-row textarea:focus {
    border-color: var(--border-gold);
    box-shadow: 0 0 0 2px var(--border-subtle), inset 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Custom checkbox ── */
.krykna-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(6,6,12,0.96);
    border: 1px solid var(--border-dim);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: border-color var(--transition-base), background var(--transition-base);
    flex-shrink: 0;
}
.krykna-row input[type="checkbox"]:checked {
    background: var(--gold-bright);
    border-color: var(--gold-bright);
}
.krykna-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: 2px solid rgba(0,0,0,0.85);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.krykna-row input[type="checkbox"]:hover { border-color: var(--border-gold); }

.krykna-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4900a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}
.krykna-row select option { background: #0a0a14; color: var(--text-primary); }

/* ── Messages ── */
.krykna-msg { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font-body); letter-spacing: var(--tracking-tight); border: 1px solid transparent; display: none; }
.krykna-msg:not(:empty) { display: block; }
.krykna-msg.error   { background: rgba(180,20,20,0.15); border-color: rgba(180,20,20,0.4); color: #ff8080; }
.krykna-msg.success { background: rgba(20,120,50,0.15); border-color: rgba(20,120,50,0.4); color: #60d890; }

/* ── Tabs ── */
.krykna-tabs { display: flex; gap: 4px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.krykna-tabs a { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 11px; font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: 9px 18px; background: linear-gradient(to bottom, var(--bg-card-row) 0%, rgba(10,10,18,0.98) 100%); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base); }
.krykna-tabs a:hover { color: var(--gold-bright); border-color: var(--border-gold); background: linear-gradient(to bottom, rgba(28,24,10,0.98) 0%, rgba(16,14,6,1.0) 100%); }
.krykna-tabs a.active, .krykna-tabs .active a { color: var(--gold-light); border-color: var(--border-accent); background: linear-gradient(to bottom, rgba(38,32,10,1.0) 0%, rgba(20,18,8,1.0) 100%); box-shadow: 0 0 12px rgba(212,144,10,0.15); }

/* ── Table ── */
.krykna-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 14px; }
.krykna-table thead tr { background: var(--border-subtle); border-bottom: 1px solid var(--border-dim); }
.krykna-table th { padding: 10px 14px; font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-bright); text-align: left; font-family: var(--font-display); }
.krykna-table td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-secondary); vertical-align: top; }
.krykna-table tbody tr:hover td { background: rgba(212,144,10,0.04); color: var(--text-primary); }

/* ── Action links ── */
.krykna-actions a { font-size: 11px; letter-spacing: var(--tracking-normal); text-transform: uppercase; color: var(--gold-core); text-decoration: none; margin-right: 12px; transition: color var(--transition-base); }
.krykna-actions a:hover { color: var(--gold-glow); }

/* ── Inline checkbox chips ── */
.krykna-inline-checks { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.krykna-inline-checks label { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: var(--tracking-tight); color: var(--text-secondary); background: rgba(212,144,10,0.05); border: 1px solid rgba(212,144,10,0.14); border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); margin: 0; text-transform: none; font-family: var(--font-body); }
.krykna-inline-checks label:hover { border-color: var(--border-gold); color: var(--text-primary); }
.krykna-inline-checks label:has(input:checked) { background: rgba(212,144,10,0.12); border-color: var(--border-gold); color: var(--gold-bright); }
.krykna-inline-checks label.is-disabled { opacity: 0.3; cursor: not-allowed; }
.krykna-inline-checks input[type="checkbox"] {
    width: 14px !important; height: 14px !important;
    appearance: none !important; -webkit-appearance: none !important;
    background: transparent !important; border: 1px solid var(--border-dim) !important;
    border-radius: 2px !important; flex-shrink: 0 !important; position: relative !important;
    transition: border-color var(--transition-fast), background var(--transition-fast) !important;
}
.krykna-inline-checks input[type="checkbox"]:checked {
    background: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
}
.krykna-inline-checks input[type="checkbox"]:checked::after {
    content: '' !important; position: absolute !important;
    left: 3px !important; top: 0px !important;
    width: 4px !important; height: 8px !important;
    border: 1.5px solid rgba(0,0,0,0.85) !important;
    border-top: none !important; border-left: none !important;
    transform: rotate(45deg) !important;
}

/* ── Spec stats ── */
.krykna-spec-stats h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: var(--tracking-normal); color: var(--text-primary); margin: 0 0 4px 0; }
.krykna-spec-stats a  { font-size: 11px; letter-spacing: var(--tracking-normal); text-transform: uppercase; color: var(--gold-core); }
.krykna-spec-stats a:hover { color: var(--gold-glow); }
.krykna-spec-stats table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); font-family: var(--font-body); }
.krykna-spec-stats thead th { font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-bright); padding: 8px 12px; border-bottom: 1px solid var(--border-dim); text-align: left; font-family: var(--font-display); }
.krykna-spec-stats tbody td { padding: 8px 12px; font-size: 14px; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.04); }
.krykna-spec-stats tbody tr:hover td { background: rgba(212,144,10,0.04); color: var(--text-primary); }

/* ── FULLCALENDAR ───────────────────────── */
.fc {
    --fc-border-color:               var(--border-subtle);
    --fc-button-bg-color:            var(--bg-card-top);
    --fc-button-border-color:        var(--border-gold);
    --fc-button-text-color:          rgba(210,165,80,0.9);
    --fc-button-hover-bg-color:      rgba(40,30,6,1.0);
    --fc-button-hover-border-color:  var(--border-accent);
    --fc-button-active-bg-color:     rgba(48,38,8,1.0);
    --fc-button-active-border-color: rgba(220,150,20,0.9);
    --fc-today-bg-color:             rgba(212,144,10,0.06);
    --fc-highlight-color:            rgba(212,144,10,0.08);
    --fc-event-bg-color:             rgba(180,75,0,0.85);
    --fc-event-border-color:         rgba(220,110,10,0.6);
    --fc-page-bg-color:              transparent;
    --fc-neutral-bg-color:           rgba(18,18,28,0.5);
    --fc-list-event-hover-bg-color:  rgba(212,144,10,0.06);
}
.fc-theme-standard td, .fc-theme-standard th { border-color: rgba(212,144,10,0.1) !important; }
.fc-col-header-cell { background: rgba(16,16,26,0.65) !important; }
.fc-col-header-cell-cushion { font-family: var(--font-display) !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: var(--tracking-wide) !important; text-transform: uppercase !important; color: var(--gold-core) !important; text-decoration: none !important; }
.fc-daygrid-day-number, .fc-daygrid-day-top a { font-family: var(--font-body) !important; font-size: 13px !important; color: var(--text-muted) !important; text-decoration: none !important; }
.fc-day-today .fc-daygrid-day-number { color: var(--gold-bright) !important; font-weight: 700 !important; }
.fc-toolbar-title { font-family: var(--font-display) !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: var(--tracking-normal) !important; color: var(--text-primary) !important; }
.fc-button { font-family: var(--font-display) !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: var(--tracking-wide) !important; text-transform: uppercase !important; border-radius: var(--radius-sm) !important; }
.fc-event { border-radius: var(--radius-sm) !important; font-family: var(--font-body) !important; font-size: 12px !important; }

/* ══════════════════════════════════════════
   ABOUT PAGE — Gutenberg block styles
   Scope: .page-content .is-about
   Add "is-about" as Additional CSS Class on the
   outermost Group block in the about page.
   ══════════════════════════════════════════ */

.page-content .is-about {
    font-family: var(--font-body);
}

/* ── Opening H2 ── */
.page-content .is-about > .wp-block-heading,
.page-content .is-about > .wp-block-group > .wp-block-heading {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--gold-bright);
    text-align: center;
    text-shadow: 0 0 40px rgba(212,144,10,0.3);
    margin-bottom: var(--space-md);
}

/* ── Intro hook paragraph (first <p> after the H2) ── */
.page-content .is-about > .wp-block-paragraph:first-of-type {
    font-family: var(--font-display);
    font-size: clamp(17px, 2.2vw, 22px);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    line-height: 1.55;
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-lg);
}

/* ── Body copy paragraphs ── */
.page-content .is-about > .wp-block-paragraph {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-secondary);
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2em;
}

/* ── Separators ── */
.page-content .is-about .wp-block-separator {
    border: none;
    height: 1px;
    background: none;
    position: relative;
    margin: var(--space-xl) auto;
    max-width: 480px;
    overflow: visible;
}
.page-content .is-about .wp-block-separator::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 50%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-gold));
}
.page-content .is-about .wp-block-separator::after {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 50%;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--border-gold));
}
/* Central diamond on separator */
.page-content .is-about .wp-block-separator.has-alpha-channel-opacity {
    border: none;
}
.page-content .is-about .wp-block-separator.is-style-wide {
    max-width: 100%;
}

/* ── What We Offer section — scoped to group with class is-about-offers ── */
.page-content .is-about-offers {
    text-align: center;
    margin-bottom: var(--space-xs);
}
.page-content .is-about-offers h3.wp-block-heading {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}
.page-content .is-about-offers > .wp-block-paragraph {
    font-size: 15px;
    color: var(--text-muted);
    letter-spacing: var(--tracking-normal);
    margin-bottom: var(--space-xl);
    text-align: center;
}

/* 4-column card grid */
.page-content .is-about-offers .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    flex: none; /* override the default flex layout */
}
.page-content .is-about-offers .wp-block-column {
    flex: none;
    /* Stone card styling */
    background: linear-gradient(to bottom, var(--bg-card-top) 0%, var(--bg-card-bot) 100%);
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--border-gold);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(255,180,60,0.06), 0 4px 24px rgba(0,0,0,0.55);
    transition: border-color var(--transition-base), transform var(--transition-base);
    padding: 0; /* override any default column padding */
}
.page-content .is-about-offers .wp-block-column:hover {
    border-color: var(--border-gold);
    transform: translateY(-2px);
}

/* Image flush to top — strip figure margin/padding */
.page-content .is-about-offers .wp-block-column .wp-block-image {
    margin: 0;
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
}
.page-content .is-about-offers .wp-block-column .wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 0;
    border: none;
    filter: brightness(0.85);
    transition: filter var(--transition-base);
}
.page-content .is-about-offers .wp-block-column:hover .wp-block-image img {
    filter: brightness(1);
}
/* Bottom border between image and text */
.page-content .is-about-offers .wp-block-column .wp-block-image figure {
    margin: 0;
    border-bottom: 1px solid var(--border-subtle);
}

/* H4 and paragraph inside card — add padding */
.page-content .is-about-offers .wp-block-column h4.wp-block-heading {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold-bright);
    margin: var(--space-sm) var(--space-md) 6px;
    padding: 0;
}
.page-content .is-about-offers .wp-block-column .wp-block-paragraph {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: left;
    margin: 0 var(--space-md) var(--space-sm);
    padding: 0;
    max-width: none;
}

/* ── No Requirements — emphasis block ── */
.page-content .is-about-no-req {
    position: relative;
    text-align: center;
    padding: var(--space-xl) var(--space-lg) !important;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        rgba(20,14,4,0.97) 0%,
        rgba(28,18,6,0.99) 50%,
        rgba(20,14,4,0.97) 100%
    ) !important;
    border: 1px solid var(--border-dim) !important;
    border-top: 2px solid var(--border-gold) !important;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,180,60,0.06), 0 4px 32px rgba(0,0,0,0.6);
}
.page-content .is-about-no-req::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(212,144,10,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.page-content .is-about-no-req::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212,144,10,0.3) 20%,
        rgba(240,170,40,0.75) 50%,
        rgba(212,144,10,0.3) 80%,
        transparent
    );
}
.page-content .is-about-no-req h3.wp-block-heading {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    position: relative;
    text-shadow: 0 0 30px rgba(212,144,10,0.2);
}
.page-content .is-about-no-req .wp-block-paragraph {
    font-size: clamp(15px, 1.8vw, 17px);
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
}

/* ── CTA close block ── */
.page-content .is-about-cta {
    text-align: center;
    padding: var(--space-lg) 0 var(--space-xs);
}
.page-content .is-about-cta h3.wp-block-heading {
    font-family: var(--font-display);
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: 400;
    letter-spacing: var(--tracking-normal);
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Buttons block — reuse our existing button styles */
.page-content .is-about-cta .wp-block-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}
/* Primary filled button */
.page-content .is-about-cta .wp-block-button:first-child .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: 12px var(--space-lg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-bright);
    background: linear-gradient(to bottom, rgba(26,22,10,0.98) 0%, rgba(16,14,6,1.0) 50%, rgba(12,10,4,1.0) 100%);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,180,60,0.10);
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
    white-space: nowrap;
}
.page-content .is-about-cta .wp-block-button:first-child .wp-block-button__link:hover {
    background: linear-gradient(to bottom, rgba(60,45,8,1.0) 0%, rgba(40,30,6,1.0) 100%);
    border-color: var(--gold-glow);
    color: var(--gold-light);
    box-shadow: 0 3px 0 rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,190,70,0.18), 0 0 24px rgba(212,144,10,0.28);
}
/* Secondary outline button */
.page-content .is-about-cta .wp-block-button:last-child .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: 12px var(--space-lg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-gold);
    background: linear-gradient(to bottom, rgba(20,18,8,0.96) 0%, rgba(12,12,20,0.98) 100%);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,0.7);
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}
.page-content .is-about-cta .wp-block-button:last-child .wp-block-button__link:hover {
    border-color: var(--gold-bright);
    color: var(--text-primary);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .page-content .is-about-offers .wp-block-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .page-content .is-about-no-req {
        padding: var(--space-lg) var(--space-md) !important;
    }
    .page-content .is-about-cta .wp-block-buttons {
        flex-direction: column;
        align-items: center;
    }
    .page-content .is-about-cta .wp-block-button__link {
        width: 100%;
        max-width: 320px;
    }
}
@media (max-width: 480px) {
    .page-content .is-about-offers .wp-block-columns {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════
   GUIDE ARCHIVE shortcode
   ══════════════════════════════════════════ */
.krykna-archive { font-family: var(--font-body); padding: var(--space-lg) 0; }
.krykna-archive form { display: flex; gap: 12px; margin-bottom: var(--space-lg); flex-wrap: wrap; }
.krykna-archive input[type="text"], .krykna-archive .form-control { flex: 1; min-width: 200px; padding: 10px 14px; background: rgba(6,6,12,0.96); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color var(--transition-base); }
.krykna-archive input[type="text"]:focus, .krykna-archive .form-control:focus { border-color: var(--border-gold); }
.krykna-archive select, .krykna-archive .form-select { padding: 10px 36px 10px 14px; background: rgba(6,6,12,0.96); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; outline: none; cursor: pointer; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4900a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.krykna-archive select option, .krykna-archive .form-select option { background: #0a0a14; color: var(--text-primary); }
.krykna-archive .card, .krykna-archive .col-12 > div { background: linear-gradient(to bottom, var(--bg-card-row) 0%, var(--bg-card-bot) 100%); border: 1px solid var(--border-dim); border-left: 2px solid var(--border-gold); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-xs); transition: border-color var(--transition-base), transform var(--transition-fast); }
.krykna-archive .card:hover, .krykna-archive .col-12 > div:hover { border-color: rgba(212,144,10,0.48); border-left-color: var(--gold-bright); transform: translateX(3px); }
.krykna-archive .card h5, .krykna-archive h5 { font-family: var(--font-display); font-size: 15px; font-weight: 400; letter-spacing: var(--tracking-tight); margin: 0 0 4px 0; }
.krykna-archive .card h5 a, .krykna-archive h5 a { color: var(--text-primary); text-decoration: none; transition: color var(--transition-base); }
.krykna-archive .card h5 a:hover, .krykna-archive h5 a:hover { color: var(--gold-bright); }
.krykna-archive small { font-size: 11px; letter-spacing: var(--tracking-normal); text-transform: uppercase; color: var(--text-muted); }
.krykna-archive .btn-group { display: flex; gap: 6px; }
.krykna-archive .btn, .krykna-archive .btn-sm { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base); border: 1px solid; }
.krykna-archive .btn-outline-secondary { background: transparent; border-color: var(--border-dim); color: var(--gold-core); }
.krykna-archive .btn-outline-secondary:hover { background: rgba(212,144,10,0.1); border-color: var(--border-gold); color: var(--gold-bright); }
.krykna-archive .btn-outline-primary { background: transparent; border-color: rgba(88,101,242,0.35); color: rgba(140,160,255,0.8); }
.krykna-archive .btn-outline-primary:hover { background: rgba(88,101,242,0.1); color: #a0b0ff; }
.krykna-archive .btn-outline-danger { background: transparent; border-color: rgba(180,30,30,0.35); color: rgba(220,80,80,0.8); }
.krykna-archive .btn-outline-danger:hover { background: rgba(180,30,30,0.1); color: #ff8080; }

/* ══════════════════════════════════════════
   GUIDE CATEGORIES shortcode
   ══════════════════════════════════════════ */
.krykna-categories { padding: var(--space-lg) 0; font-family: var(--font-body); }
.krykna-categories .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .krykna-categories .row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .krykna-categories .row { grid-template-columns: 1fr; } }

/* ── Card shell — fixed height, image fills it ── */
.krykna-categories .card {
    position: relative;
    height: 280px;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--border-gold);
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px));
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 28px rgba(0,0,0,0.6);
    /* No background — image fills everything */
    background: var(--bg-card-bot);
}
.krykna-categories .card:hover {
    border-color: var(--border-gold);
    transform: translateY(-4px);
    box-shadow: 0 14px 44px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,144,10,0.18);
}

/* ── Image fills full card ── */
.krykna-categories .card-img-top {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: brightness(0.7) saturate(0.85);
    transition: filter 0.4s ease, transform 0.5s ease;
    transform-origin: center;
    z-index: 0;
}
.krykna-categories .card:hover .card-img-top {
    filter: brightness(0.85) saturate(1.1);
    transform: scale(1.06);
}

/* ── Card body — liquid glass panel at bottom ── */
.krykna-categories .card-body {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: var(--space-md) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    text-align: left !important;
    z-index: 2;

    /* Liquid glass */
    background: rgba(8, 6, 16, 0.45) !important;
    backdrop-filter: blur(18px) saturate(160%) brightness(0.9);
    -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(0.9);

    /* Top border — gold shimmer separating glass from image */
    border-top: 1px solid rgba(212,144,10,0.35) !important;

    /* Subtle inner highlight — glass catching light */
    box-shadow: inset 0 1px 0 rgba(255,200,80,0.12), inset 0 -1px 0 rgba(0,0,0,0.3);

    /* Slide up on hover */
    transform: translateY(0);
    transition: transform 0.3s ease, background 0.3s ease;
}
.krykna-categories .card:hover .card-body {
    background: rgba(8, 6, 16, 0.55) !important;
    border-top-color: rgba(212,144,10,0.6) !important;
}

/* Remove the ::before gold line — border-top handles it now */
.krykna-categories .card-body::before { display: none; }

/* ── Category title ── */
.krykna-categories h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    color: var(--gold-bright);
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
    transition: color 0.2s;
}
.krykna-categories .card:hover h4 { color: var(--gold-glow); }

/* ── Description ── */
.krykna-categories .small,
.krykna-categories p {
    font-size: 12px;
    color: rgba(200,168,110,0.85);
    line-height: 1.55;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

/* ── Arrow indicator ── */
.krykna-categories .card-body::after {
    content: '›';
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    font-size: 20px;
    line-height: 1;
    color: rgba(212,144,10,0.4);
    transition: color 0.2s, transform 0.2s;
    font-family: serif;
}
.krykna-categories .card:hover .card-body::after {
    color: var(--gold-bright);
    transform: translateX(3px);
}

/* Hide the button — whole card is the link */
.krykna-categories .btn-primary,
.krykna-categories .stretched-link,
.krykna-categories a.btn,
.krykna-categories a.btn-sm,
.krykna-categories a.btn-primary,
.krykna-categories a.stretched-link,
.krykna-categories .card-body > a {
    display: none !important;
    visibility: hidden !important;
}

/* Whole card is clickable via JS */
.krykna-categories .card { position: relative; }
.krykna-categories .stretched-link::after { display: none; }

/* ══════════════════════════════════════════
   SKILL TREE — krykna/swtor-database plugin
   ══════════════════════════════════════════ */

/* ── Outer wrapper ── */
.krykna-skill-tree,
.kst-wrap,
[class*="skill-tree-wrap"],
[class*="skill_tree_wrap"] {
    font-family: var(--font-body);
    margin: var(--space-lg) 0;
}

/* ── Tree panel ── */
.kst-tree,
.krykna-skill-tree__panel,
[class*="skill-tree-panel"],
[class*="skill-tree-grid"] {
    background: linear-gradient(to bottom, rgba(8,10,22,0.98) 0%, rgba(5,6,14,1.0) 100%);
    border: 1px solid var(--border-dim);
    border-top: 2px solid var(--border-gold);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,180,60,0.06);
}

/* ── Tree title bar ── */
.kst-title,
.krykna-skill-tree__title,
[class*="skill-tree-title"],
[class*="skill-tree-header"],
[class*="skill_tree_title"] {
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: var(--tracking-wider) !important;
    text-transform: uppercase !important;
    color: var(--gold-bright) !important;
    text-align: center !important;
    padding: 10px var(--space-md) !important;
    background: rgba(212,144,10,0.06) !important;
    border-bottom: 1px solid var(--border-dim) !important;
    text-shadow: 0 0 20px rgba(212,144,10,0.4) !important;
    margin: 0 !important;
}

/* ── Tree body / content area ── */
.kst-body,
.krykna-skill-tree__body,
[class*="skill-tree-body"],
[class*="skill-tree-content"] {
    padding: var(--space-sm) var(--space-md);
}

/* ── Row — horizontal level ── */
.kst-row,
.krykna-skill-tree__row,
[class*="skill-tree-row"],
[class*="skill_tree_row"] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 0;
    position: relative;
}

/* ── Row level number ── */
.kst-row-level,
.krykna-skill-tree__level,
[class*="skill-tree-level"],
[class*="skill_tree_level"] {
    font-family: var(--font-display) !important;
    font-size: 10px !important;
    color: var(--text-dim) !important;
    min-width: 24px !important;
    text-align: right !important;
    padding-right: 6px !important;
    letter-spacing: var(--tracking-normal) !important;
    flex-shrink: 0 !important;
}

/* ── Node slot (empty placeholder) ── */
.kst-node,
.krykna-skill-tree__node,
[class*="skill-tree-node"],
[class*="skill_tree_node"],
[class*="skill-node"] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    position: relative;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* ── Node image ── */
.kst-node img,
.krykna-skill-tree__node img,
[class*="skill-tree-node"] img,
[class*="skill-node"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    opacity: 0.35;
    filter: grayscale(60%);
    transition: opacity 0.15s, filter 0.15s;
}

/* ── Active / chosen node ── */
.kst-node--active,
.kst-node.active,
.kst-node.chosen,
.krykna-skill-tree__node--active,
[class*="skill-tree-node"][class*="active"],
[class*="skill-tree-node"][class*="chosen"],
[class*="skill-node"][class*="active"],
[class*="skill-node"][class*="chosen"] {
    border: 1px solid rgba(0, 210, 255, 0.7) !important;
    background: rgba(0, 180, 220, 0.08) !important;
    box-shadow: 0 0 10px rgba(0,200,255,0.25), inset 0 0 8px rgba(0,180,220,0.1) !important;
}
.kst-node--active img,
.kst-node.active img,
.kst-node.chosen img,
[class*="skill-tree-node"][class*="active"] img,
[class*="skill-tree-node"][class*="chosen"] img,
[class*="skill-node"][class*="active"] img,
[class*="skill-node"][class*="chosen"] img {
    opacity: 1 !important;
    filter: none !important;
}

/* ── Gold-bordered node (right column / passives) ── */
.kst-node--passive,
.kst-node.passive,
[class*="skill-node"][class*="passive"] {
    border: 1px solid rgba(212,144,10,0.6) !important;
    background: rgba(212,144,10,0.06) !important;
    box-shadow: 0 0 8px rgba(212,144,10,0.2) !important;
}
.kst-node--passive img,
.kst-node.passive img,
[class*="skill-node"][class*="passive"] img {
    opacity: 1 !important;
    filter: none !important;
}

/* ── Empty/locked node ── */
.kst-node--empty,
.kst-node.empty,
.kst-node.locked,
[class*="skill-node"][class*="empty"],
[class*="skill-node"][class*="locked"] {
    opacity: 0.4 !important;
}

/* ── Node hover (on non-touch) ── */
@media (hover: hover) {
    .kst-node:hover,
    [class*="skill-tree-node"]:hover,
    [class*="skill-node"]:hover {
        transform: scale(1.12);
        z-index: 2;
        border-color: var(--border-gold) !important;
        box-shadow: 0 0 14px rgba(212,144,10,0.35) !important;
    }
    .kst-node:hover img,
    [class*="skill-tree-node"]:hover img,
    [class*="skill-node"]:hover img {
        opacity: 1 !important;
        filter: none !important;
    }
}

/* ── Connector lines between nodes ── */
.kst-connector,
[class*="skill-tree-connector"],
[class*="skill-connector"] {
    height: 2px;
    background: rgba(212,144,10,0.15);
    flex: 1;
    align-self: center;
    border-radius: 1px;
}
.kst-connector--active,
[class*="skill-connector"][class*="active"] {
    background: rgba(0,200,255,0.35) !important;
}

/* ── Tooltip ── */
.kst-tooltip,
[class*="skill-tree-tooltip"],
[class*="skill-tooltip"] {
    position: absolute;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(16,16,28,0.99), rgba(10,10,20,1.0));
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    min-width: 180px;
    max-width: 260px;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
.kst-tooltip-name,
[class*="skill-tooltip-name"],
[class*="skill-tooltip-title"] {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gold-bright) !important;
    margin-bottom: 4px !important;
}
.kst-tooltip-desc,
[class*="skill-tooltip-desc"],
[class*="skill-tooltip-body"] {
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    line-height: 1.5 !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .kst-node,
    [class*="skill-tree-node"],
    [class*="skill-node"] { width: 36px; height: 36px; }
    .kst-row,
    [class*="skill-tree-row"] { gap: 2px; }
}

/* ══════════════════════════════════════════
   GUIDE PAGES
   ══════════════════════════════════════════ */
.guide-archive-wrap, .guide-single-wrap { background: var(--bg-void); padding: var(--space-2xl) 0 80px; min-height: 60vh; font-family: var(--font-body); }

.guide-archive-header {
    margin: 0 auto var(--space-xl);
    max-width: var(--container);
    padding: 0 var(--space-lg);
}
.guide-archive-header h1 { font-family: var(--font-display); font-size: clamp(28px,4vw,44px); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text-primary); margin-bottom: 12px; }
.guide-archive-header p  { font-size: 16px; color: var(--text-secondary); line-height: 1.7; margin: 0; max-width: 640px; }

/* ── Guides page intro copy ── */
.guides-shortcode-wrap > p,
.guides-shortcode-wrap > ul,
.guides-shortcode-wrap > .wp-block-list {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--space-md);
}

/* Lead paragraphs */
.guides-shortcode-wrap > p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* Section headings disguised as paragraphs (no markup) */
.guides-shortcode-wrap > p:has(+ ul),
.guides-shortcode-wrap > p:not(:has(strong)):not(:empty) {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
}

/* First two paragraphs — editorial intro, slightly larger */
.guides-shortcode-wrap > p:first-of-type,
.guides-shortcode-wrap > p:nth-of-type(2) {
    font-size: 17px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0;
}

/* Bold highlights inside paragraphs */
.guides-shortcode-wrap > p strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Lists */
.guides-shortcode-wrap > .wp-block-list,
.guides-shortcode-wrap > ul {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guides-shortcode-wrap > .wp-block-list li,
.guides-shortcode-wrap > ul li {
    display: block;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 10px var(--space-md) 10px calc(var(--space-md) + 18px);
    background: rgba(212,144,10,0.03);
    border: 1px solid var(--border-dim);
    border-left: 2px solid var(--border-gold);
    border-radius: var(--radius-md);
    position: relative;
}

/* Diamond bullet */
.guides-shortcode-wrap > .wp-block-list li::before,
.guides-shortcode-wrap > ul li::before {
    content: '◆';
    color: var(--gold-core);
    font-size: 8px;
    position: absolute;
    left: var(--space-md);
    top: 14px;
}

.guides-shortcode-wrap > .wp-block-list li strong,
.guides-shortcode-wrap > ul li strong {
    color: var(--gold-bright);
    font-weight: 600;
}

/* External community links */
.guides-shortcode-wrap > .wp-block-list li a,
.guides-shortcode-wrap > ul li a {
    color: var(--gold-bright);
    text-decoration: none;
    border-bottom: 1px solid var(--border-dim);
    padding-bottom: 1px;
    transition: color var(--transition-base), border-color var(--transition-base);
}
.guides-shortcode-wrap > .wp-block-list li a:hover,
.guides-shortcode-wrap > ul li a:hover {
    color: var(--gold-glow);
    border-bottom-color: var(--border-gold);
}

/* Closing tagline paragraph */
.guides-shortcode-wrap > p:last-of-type {
    font-style: italic;
    color: var(--text-muted);
    font-size: 15px;
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
}

/* Spacer block — shrink the 100px spacer to something reasonable */
.guides-shortcode-wrap .wp-block-spacer {
    height: var(--space-2xl) !important;
}

.guide-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-bottom: var(--space-2xl); }
@media (max-width: 900px) { .guide-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .guide-category-grid { grid-template-columns: 1fr; } }

.guide-category-card { background: linear-gradient(to bottom, var(--bg-card-top) 0%, var(--bg-card-bot) 100%); border: 1px solid var(--border-dim); border-top: 2px solid var(--border-gold); border-radius: var(--radius-lg); padding: var(--space-md); text-decoration: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); position: relative; clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px)); }
.guide-category-card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 20px rgba(212,144,10,0.08); }
.guide-category-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.guide-category-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 12px rgba(212,144,10,0.3)); }
.guide-category-name { font-family: var(--font-display); font-size: 15px; font-weight: 400; letter-spacing: var(--tracking-normal); color: var(--text-primary); }
.guide-category-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.guide-category-cta  { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-core); margin-top: 4px; transition: color var(--transition-base); }
.guide-category-card:hover .guide-category-cta { color: var(--gold-glow); }

.guide-list { margin-top: var(--space-sm); }
.guide-list-heading { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: var(--tracking-normal); color: var(--text-primary); margin-bottom: var(--space-md); padding-bottom: 12px; border-bottom: 1px solid var(--border-dim); }
.guide-list-grid { display: flex; flex-direction: column; gap: var(--space-xs); }

.guide-card { display: flex; background: linear-gradient(to right, var(--bg-card-row) 0%, var(--bg-card-bot) 100%); border: 1px solid var(--border-subtle); border-left: 2px solid var(--border-gold); border-radius: var(--radius-md); text-decoration: none; overflow: hidden; transition: border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); }
.guide-card:hover { border-color: var(--border-gold); border-left-color: var(--gold-bright); transform: translateX(4px); box-shadow: -4px 0 20px rgba(212,144,10,0.1); }
.guide-card-pinned { border-left-color: var(--ember-bright); }
.guide-card-thumb { width: 140px; flex-shrink: 0; overflow: hidden; }
.guide-card-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity var(--transition-base); }
.guide-card:hover .guide-card-thumb-img { opacity: 1; }
.guide-card-body { padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 6px; flex: 1; }

.guide-pin-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ember-bright); background: rgba(196,88,0,0.15); border: 1px solid var(--border-ember); border-radius: var(--radius-sm); padding: 2px var(--space-xs); width: fit-content; }
.guide-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.guide-tag { display: inline-flex; font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-core); background: rgba(212,144,10,0.1); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 2px var(--space-xs); }
.guide-card-title { font-family: var(--font-display); font-size: 15px; font-weight: 400; letter-spacing: var(--tracking-tight); color: var(--text-primary); margin: 0; line-height: 1.3; transition: color var(--transition-base); }
.guide-card:hover .guide-card-title { color: var(--gold-bright); }
.guide-card-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guide-card-meta { display: flex; gap: var(--space-sm); font-size: 11px; letter-spacing: var(--tracking-normal); text-transform: uppercase; color: var(--text-dim); margin-top: auto; padding-top: 6px; }

.nav-links { display: flex; gap: 6px; justify-content: center; margin-top: var(--space-xl); }
.nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; background: linear-gradient(to bottom, var(--bg-card-row) 0%, var(--bg-card-bot) 100%); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: 11px; font-weight: 400; letter-spacing: var(--tracking-normal); color: var(--text-secondary); text-decoration: none; transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base); }
.nav-links .page-numbers:hover, .nav-links .page-numbers.current { border-color: var(--border-accent); color: var(--gold-bright); background: linear-gradient(to bottom, rgba(55,30,8,1.0) 0%, rgba(16,14,6,1.0) 100%); }

.guide-single { min-width: 0; }
.guide-header { margin-bottom: var(--space-lg); }
.guide-header-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-sm); }
.guide-edit-link { display: inline-flex; font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 4px 12px; text-decoration: none; transition: color var(--transition-base), border-color var(--transition-base); font-family: var(--font-display); }
.guide-edit-link:hover { color: var(--gold-bright); border-color: var(--border-gold); }
.guide-empty { color: var(--text-muted); font-style: italic; padding: var(--space-xl) 0; text-align: center; }

/* ── Two-column layout: content + sidebar ── */
.guide-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-xl);
    align-items: start;
}

/* ── Sticky sidebar ── */
.guide-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

/* ── TOC card ── */
.guide-toc {
    padding: 0;
    overflow: hidden;
}
.guide-toc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(212,144,10,0.04);
}
.guide-toc-icon {
    color: var(--gold-bright);
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}
.guide-toc-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--gold-bright);
    margin: 0;
}
.guide-toc-list {
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0;
    counter-reset: none;
}
.guide-toc-item {
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.guide-toc-item:last-child { border-bottom: none; }
.guide-toc-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px var(--space-md);
    text-decoration: none;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    transition: color var(--transition-base), background var(--transition-base), padding-left var(--transition-base);
}
.guide-toc-link:hover {
    color: var(--gold-bright);
    background: rgba(212,144,10,0.05);
    padding-left: calc(var(--space-md) + 4px);
}
.guide-toc-link.is-active {
    color: var(--gold-bright);
    background: rgba(212,144,10,0.07);
}
.guide-toc-num {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--border-gold);
    min-width: 16px;
    flex-shrink: 0;
    line-height: 1.6;
}
.guide-toc-link:hover .guide-toc-num,
.guide-toc-link.is-active .guide-toc-num { color: var(--gold-bright); }

/* ── Responsive: stack on narrow screens ── */
/* ── Mobile sidebar toggle — hidden on desktop ── */
.guide-sidebar-toggle  { display: none; }
.guide-sidebar-backdrop { display: none; }

@media (max-width: 1024px) {
    .guide-layout {
        grid-template-columns: 1fr;
    }

    /* Sidebar becomes a fixed slide-in drawer from the right */
    .guide-sidebar {
        position: fixed !important;
        top: 0;
        right: 0;
        width: min(320px, 85vw);
        height: 100dvh;
        overflow-y: auto;
        z-index: 500;
        background: linear-gradient(to bottom, var(--bg-card-top) 0%, var(--bg-card-bot) 100%);
        border-left: 2px solid var(--border-gold);
        padding: var(--space-xl) var(--space-md) var(--space-xl);
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        /* Hidden off-screen by default */
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        order: 0;
        box-shadow: -8px 0 40px rgba(0,0,0,0.7);
    }
    .guide-sidebar.is-open {
        transform: translateX(0);
    }

    /* Backdrop */
    .guide-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 499;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s;
    }
    .guide-sidebar-backdrop.is-open {
        opacity: 1;
        pointer-events: all;
    }

    /* Toggle button — fixed pill on the right edge */
    .guide-sidebar-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 498;
        background: linear-gradient(to bottom, var(--bg-card-top) 0%, var(--bg-card-bot) 100%);
        border: 1px solid var(--border-gold);
        border-right: none;
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        padding: 14px 10px;
        cursor: pointer;
        transition: background var(--transition-base), border-color var(--transition-base),
                    transform var(--transition-base), right 0.35s cubic-bezier(0.4,0,0.2,1);
        box-shadow: -4px 0 16px rgba(0,0,0,0.55), inset 1px 0 0 rgba(255,180,60,0.08);
    }
    .guide-sidebar-toggle:hover {
        background: linear-gradient(to bottom, rgba(38,32,10,1.0) 0%, rgba(20,18,8,1.0) 100%);
        border-color: var(--gold-bright);
    }
    /* Shift toggle left when sidebar is open */
    .guide-sidebar-toggle.is-open {
        right: min(320px, 85vw);
    }

    .guide-sidebar-toggle-icon {
        font-size: 16px;
        line-height: 1;
        color: var(--gold-core);
        transition: color var(--transition-base);
        display: block;
    }
    .guide-sidebar-toggle:hover .guide-sidebar-toggle-icon,
    .guide-sidebar-toggle.is-open .guide-sidebar-toggle-icon {
        color: var(--gold-bright);
    }

    /* Close X when open */
    .guide-sidebar-toggle.is-open #gsb-toc-icon::before { content: '✕'; }
    .guide-sidebar-toggle.is-open #gsb-toc-icon { font-size: 0; }
    .guide-sidebar-toggle.is-open #gsb-toc-icon::before {
        font-size: 16px;
        color: var(--gold-bright);
        display: block;
        line-height: 1;
    }
    .guide-sidebar-toggle.is-open #gsb-stats-icon { display: none; }
}
@media (max-width: 768px) {
    .guide-layout { gap: var(--space-lg); }
    .guide-sidebar { width: min(300px, 92vw); }
    .guide-sidebar-toggle.is-open { right: min(300px, 92vw); }
}

/* ══════════════════════════════════════════
   GUIDES PAGE — Bootstrap shortcode overrides
   ══════════════════════════════════════════ */
.guides-shortcode-wrap { padding: 0 3em var(--space-2xl); max-width: var(--container); margin: 0 auto; }
.guides-shortcode-wrap .container, .guides-shortcode-wrap .container-fluid { max-width: 100%; padding: 0; margin: 0; }
.guides-shortcode-wrap .py-4 { padding-top: 0 !important; padding-bottom: 0 !important; }
.guides-shortcode-wrap .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin: 0 0 var(--space-xl) 0; }
@media (max-width: 900px) { .guides-shortcode-wrap .row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .guides-shortcode-wrap .row { grid-template-columns: 1fr; } }
.guides-shortcode-wrap .col-md-4, .guides-shortcode-wrap .col-sm-6, .guides-shortcode-wrap .col-12 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; }

.guides-shortcode-wrap .card { position: relative !important; height: 280px !important; overflow: hidden; cursor: pointer; border-radius: var(--radius-lg) !important; border: 1px solid var(--border-dim) !important; border-top: 2px solid var(--border-gold) !important; clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px)); transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 28px rgba(0,0,0,0.6) !important; background: var(--bg-card-bot) !important; display: block !important; }
.guides-shortcode-wrap .card:hover { border-color: var(--border-gold) !important; transform: translateY(-4px); box-shadow: 0 14px 44px rgba(0,0,0,0.7) !important; }
.guides-shortcode-wrap .card-img-top { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; margin: 0 !important; padding: 0 !important; filter: brightness(0.7) saturate(0.85); transition: filter 0.4s ease, transform 0.5s ease; z-index: 0; }
.guides-shortcode-wrap .card:hover .card-img-top { filter: brightness(0.85) saturate(1.1); transform: scale(1.06); }
.guides-shortcode-wrap .card-body { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: var(--space-md) !important; display: flex !important; flex-direction: column !important; gap: 5px !important; text-align: left !important; z-index: 2; background: rgba(8,6,16,0.45) !important; backdrop-filter: blur(18px) saturate(160%) brightness(0.9); -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(0.9); border-top: 1px solid rgba(212,144,10,0.35) !important; box-shadow: inset 0 1px 0 rgba(255,200,80,0.12), inset 0 -1px 0 rgba(0,0,0,0.3); transition: background 0.3s; }
.guides-shortcode-wrap .card:hover .card-body { background: rgba(8,6,16,0.55) !important; border-top-color: rgba(212,144,10,0.6) !important; }
.guides-shortcode-wrap .card-body::before { display: none !important; }
.guides-shortcode-wrap .card-body::after { content: '›'; position: absolute; bottom: var(--space-md); right: var(--space-md); font-size: 20px; line-height: 1; color: rgba(212,144,10,0.4); transition: color 0.2s, transform 0.2s; font-family: serif; }
.guides-shortcode-wrap .card:hover .card-body::after { color: var(--gold-bright); transform: translateX(3px); }
.guides-shortcode-wrap .card-body h4 { font-family: var(--font-display) !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: var(--tracking-wide) !important; color: var(--gold-bright) !important; margin: 0 !important; text-shadow: 0 1px 8px rgba(0,0,0,0.8); transition: color 0.2s; }
.guides-shortcode-wrap .card:hover h4 { color: var(--gold-glow) !important; }
.guides-shortcode-wrap .card-body .small, .guides-shortcode-wrap .card-body p { font-size: 12px !important; color: rgba(200,168,110,0.85) !important; line-height: 1.55 !important; margin: 0 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
/* Hide the button */
.guides-shortcode-wrap .btn,
.guides-shortcode-wrap .btn-sm,
.guides-shortcode-wrap .btn-primary,
.guides-shortcode-wrap .stretched-link,
.guides-shortcode-wrap a.btn,
.guides-shortcode-wrap a.btn-sm,
.guides-shortcode-wrap a.btn-primary,
.guides-shortcode-wrap a.stretched-link,
.guides-shortcode-wrap .card-body > a { display: none !important; visibility: hidden !important; }

.guides-shortcode-wrap .btn, .guides-shortcode-wrap .btn-sm, .guides-shortcode-wrap .btn-primary { display: inline-flex !important; align-items: center !important; font-family: var(--font-display) !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: var(--tracking-wide) !important; text-transform: uppercase !important; color: var(--text-primary) !important; background: linear-gradient(to bottom, rgba(28,24,10,0.98) 0%, rgba(16,14,6,1.0) 100%) !important; border: 1px solid var(--gold-bright) !important; border-radius: var(--radius-sm) !important; padding: 9px 22px !important; text-decoration: none !important; transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base) !important; box-shadow: 0 2px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,180,60,0.10) !important; position: relative !important; }
.guides-shortcode-wrap .btn:hover, .guides-shortcode-wrap .btn-primary:hover { background: linear-gradient(to bottom, rgba(55,44,8,1.0) 0%, rgba(28,24,10,1.0) 100%) !important; border-color: var(--gold-glow) !important; color: var(--gold-light) !important; }

.guides-shortcode-wrap .card { position: relative; }
.guides-shortcode-wrap .stretched-link::after { display: none; }

.guides-shortcode-wrap .krykna-archive { padding: 0; }
.guides-shortcode-wrap .krykna-archive form, .guides-shortcode-wrap .krykna-archive .row.g-2 { display: flex !important; gap: 12px !important; margin-bottom: var(--space-md) !important; grid-template-columns: unset !important; }
.guides-shortcode-wrap .krykna-archive .col-md-9, .guides-shortcode-wrap .krykna-archive .col-md-3 { width: auto !important; max-width: none !important; flex: 1 !important; padding: 0 !important; }
.guides-shortcode-wrap .krykna-archive .col-md-3 { flex: 0 0 180px !important; }
.guides-shortcode-wrap .krykna-archive .row.g-3 { display: flex !important; flex-direction: column !important; gap: var(--space-xs) !important; margin: 0 !important; }
.guides-shortcode-wrap .krykna-archive .col-12 { padding: 0 !important; }
.guides-shortcode-wrap .krykna-archive .card { clip-path: none !important; border-left: 2px solid var(--border-gold) !important; border-top: 1px solid var(--border-dim) !important; border-radius: var(--radius-md) !important; transition: border-color var(--transition-base), transform var(--transition-fast) !important; }
.guides-shortcode-wrap .krykna-archive .card:hover { transform: translateX(4px) !important; border-left-color: var(--gold-bright) !important; border-color: rgba(212,144,10,0.48) !important; }
.guides-shortcode-wrap .krykna-archive .card-body { display: flex !important; justify-content: space-between !important; align-items: center !important; text-align: left !important; padding: 14px var(--space-md) !important; gap: var(--space-sm) !important; }
.guides-shortcode-wrap .krykna-archive .card-body h5 { font-family: var(--font-display) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: var(--tracking-tight) !important; margin: 0 0 4px 0 !important; }
.guides-shortcode-wrap .krykna-archive .card-body h5 a { color: var(--text-primary) !important; text-decoration: none !important; transition: color var(--transition-base) !important; }
.guides-shortcode-wrap .krykna-archive .card:hover h5 a { color: var(--gold-bright) !important; }
.guides-shortcode-wrap .krykna-archive small { font-size: 11px !important; letter-spacing: var(--tracking-normal) !important; text-transform: uppercase !important; color: var(--text-muted) !important; display: block !important; }
.guides-shortcode-wrap .krykna-archive .btn-group { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }
.guides-shortcode-wrap .krykna-archive .btn-outline-secondary { background: transparent !important; border-color: var(--border-dim) !important; color: var(--gold-core) !important; font-size: 10px !important; padding: 4px 10px !important; box-shadow: none !important; }
.guides-shortcode-wrap .krykna-archive .btn-outline-secondary:hover { background: rgba(212,144,10,0.1) !important; border-color: var(--border-gold) !important; color: var(--gold-bright) !important; }
.guides-shortcode-wrap .krykna-archive .btn-outline-primary { background: transparent !important; border-color: rgba(88,101,242,0.35) !important; color: rgba(140,160,255,0.8) !important; font-size: 10px !important; padding: 4px 10px !important; box-shadow: none !important; }
.guides-shortcode-wrap .krykna-archive .btn-outline-primary:hover { background: rgba(88,101,242,0.1) !important; color: #a0b0ff !important; }
.guides-shortcode-wrap .krykna-archive .btn-outline-danger { background: transparent !important; border-color: rgba(180,30,30,0.35) !important; color: rgba(220,80,80,0.8) !important; font-size: 10px !important; padding: 4px 10px !important; box-shadow: none !important; }
.guides-shortcode-wrap .krykna-archive .btn-outline-danger:hover { background: rgba(180,30,30,0.1) !important; color: #ff8080 !important; }
.guides-shortcode-wrap .krykna-archive h5 a { display: flex !important; align-items: center !important; gap: 6px !important; }

@media (max-width: 600px) {
    .guides-shortcode-wrap { padding: 0 var(--space-md) var(--space-xl); }
    .guides-shortcode-wrap .row { grid-template-columns: 1fr; }
}