/*

Theme Name: Raiders of the Tomb - Version 4.2 (Experimental)

Theme URI: https://raidersofthetomb.com

Author: Raiders of the Tomb

Author URI: https://raidersofthetomb.com

Description: Tema premium inspirado en Tomb Raider con Menú de Anillo 3D optimizado y Tablero de Expediciones V4.1 Experimental.

Version: 4.2.0-exp

Text Domain: raiders-theme

*/



/* ==========================================================================

   1. CSS CUSTOM PROPERTIES

   ========================================================================== */



:root {

    /* Backgrounds */

    --color-bg: #0a0a0a;

    --color-bg-card: #111;

    --color-bg-elevated: #161616;



    /* Text */

    --color-text: #fff;

    --color-text-secondary: rgba(255, 255, 255, 0.7);

    --color-text-muted: rgba(255, 255, 255, 0.5);



    /* Brand – Gold */

    --color-gold: #c8a45c;

    --color-gold-dark: #a07830;

    --color-gold-glow: rgba(200, 164, 92, 0.4);



    /* Typography */

    --font-main: 'Sofia Sans Semi Condensed', sans-serif;



    /* Layout */

    --max-width: 1400px;

}



/* ==========================================================================

   2. RESET & BASE

   ========================================================================== */



*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}



body {

    margin: 0;

    padding: 0;

    background-color: var(--color-bg);

    color: var(--color-text);

    font-family: var(--font-main);

    font-size: 16px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;

}



::selection {

    background-color: var(--color-gold);

    color: #000;

}



::-moz-selection {

    background-color: var(--color-gold);

    color: #000;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



ul,

ol {

    list-style: none;

}







/* ==========================================================================

   3. LAYOUT

   ========================================================================== */



.site-wrapper {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    position: relative;

}



.site-content {

    flex: 1;

    padding-top: 0; /* Hero is edge-to-edge */

}



.container {

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 40px;

}



/* ==========================================================================

   4. TYPOGRAPHY

   ========================================================================== */



h1,

h2,

h3,

h4,

h5,

h6 {

    color: var(--color-text);

    font-family: var(--font-main);

    line-height: 1.2;

    margin: 0 0 20px;

}



h1 {

    font-size: 4rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

}



h2 {

    font-size: 2.5rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}



h3 {

    font-size: 1.5rem;

    font-weight: 600;

}



h4 {

    font-size: 1.25rem;

    font-weight: 600;

}



h5 {

    font-size: 1.1rem;

    font-weight: 600;

}



h6 {

    font-size: 1rem;

    font-weight: 600;

}



p {

    line-height: 1.7;

    margin: 0 0 15px;

}



.section-tag {

    font-size: 0.75rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 3px;

    font-weight: 700;

    display: block;

    margin-bottom: 10px;

}



.section-heading {

    font-size: 2.5rem;

    color: var(--color-text);

    text-transform: uppercase;

    margin-bottom: 40px;

    letter-spacing: 1px;

    font-weight: 700;

}



/* ==========================================================================

   5. LINKS

   ========================================================================== */



a {

    color: var(--color-gold);

    text-decoration: none;

    transition: color 0.3s ease, text-shadow 0.3s ease;

}



a:hover,

a:focus {

    color: #fff;

    text-shadow: 0 0 12px var(--color-gold-glow);

}



a:focus-visible {

    outline: 2px solid var(--color-gold);

    outline-offset: 3px;

}



/* ==========================================================================

   6. SITE HEADER

   ========================================================================== */



.site-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(10, 10, 10, 0.75) !important;

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-bottom: 2px solid var(--color-gold);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    transition: background 0.4s ease, border-bottom 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;

}



.site-header.scrolled {

    background: rgba(10, 10, 10, 0.95) !important;

    border-bottom: 2px solid var(--color-gold);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

}



.header-inner {

    width: 100%;

    max-width: 100%;

    margin: 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 40px;

    box-sizing: border-box;

}



/* Header Group Layouts */

.header-left-group {

    display: flex;

    align-items: center;

    gap: 40px;

}



.header-right-group {

    display: flex;

    align-items: center;

    gap: 15px;

}



/* --- Logo --- */



.header-logo-link {

    display: flex;

    align-items: center;

    text-decoration: none;

}



.header-logo-link:hover {

    text-shadow: none;

}



.header-logo-img {

    height: 45px;

    width: auto;

}



/* --- Desktop Navigation --- */



.main-navigation ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    gap: 15px;

    align-items: center;

}



.main-navigation li a {

    color: rgba(255, 255, 255, 0.85);

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.85rem;

    letter-spacing: 1.5px;

    padding: 8px 16px;

    transition: all 0.3s ease;

    text-decoration: none;

    display: block;

    font-family: 'Sofia Sans Semi Condensed', var(--font-display), sans-serif;

    border-radius: 4px;

    border: 1px solid transparent;

}



.main-navigation li a:hover {

    color: var(--color-gold);

    background: rgba(200, 164, 92, 0.05);

    border-color: rgba(200, 164, 92, 0.2);

    text-shadow: 0 0 8px rgba(200, 164, 92, 0.4);

}



.main-navigation .current-menu-item a,

.main-navigation .current_page_item a {

    color: #fff !important;

    background: rgba(255, 255, 255, 0.05) !important;

    border: 1px solid rgba(200, 164, 92, 0.3) !important;

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

}



/* --- Golden CTA Backpack button --- */

.backpack-btn {

    background: linear-gradient(135deg, #e2b04c 0%, #c8a45c 100%) !important;

    color: #000 !important;

    font-family: 'Sofia Sans Semi Condensed', var(--font-display), sans-serif;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 0.82rem;

    padding: 8px 18px;

    border-radius: 4px;

    display: inline-flex !important;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    box-shadow: 0 4px 15px rgba(200, 164, 92, 0.3);

    transition: all 0.3s ease;

    border: 1px solid rgba(255, 255, 255, 0.25);

    height: 38px;

    box-sizing: border-box;

    cursor: pointer;

}



.backpack-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(200, 164, 92, 0.5);

    filter: brightness(1.1);

}



.backpack-btn img {

    width: 16px;

    height: 16px;

    filter: brightness(0) !important;

    transition: transform 0.3s ease;

    display: block;

}



.backpack-btn:hover img {

    transform: scale(1.1);

}



@media (max-width: 768px) {

    .backpack-btn {

        padding: 10px !important;

        border-radius: 50% !important;

        height: 38px !important;

        width: 38px !important;

        justify-content: center !important;

        margin-right: 0 !important;

    }

    .backpack-btn-text {

        display: none !important;

    }

}



/* --- Hamburger Toggle --- */



.nav-toggle {

    display: none; /* Hidden on desktop */

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 7px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    z-index: 2100;

    width: 44px;

    height: 44px;

}



.nav-toggle span {

    display: block;

    width: 30px;

    height: 2px;

    background: #fff;

    border-radius: 2px;

    transition: transform 0.35s ease, opacity 0.25s ease;

    transform-origin: center center;

}



/* X animation when open */

.nav-toggle.is-active span:nth-child(1) {

    transform: translateY(9px) rotate(45deg);

}



.nav-toggle.is-active span:nth-child(2) {

    opacity: 0;

    transform: scaleX(0);

}



.nav-toggle.is-active span:nth-child(3) {

    transform: translateY(-9px) rotate(-45deg);

}



/* --- Mobile Navigation Overlay --- */



.mobile-nav {

    position: fixed;

    inset: 0;

    background: rgba(5, 5, 5, 0.98);

    z-index: 2000;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.4s ease, visibility 0.4s ease;

}



.mobile-nav.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



.mobile-nav-logo img {

    width: 140px;

    margin-bottom: 40px;

}



.mobile-menu-list {

    list-style: none;

    padding: 0;

    margin: 0;

    text-align: center;

}



.mobile-menu-list li {

    margin-bottom: 5px;

}



.mobile-menu-list li a {

    color: #fff;

    font-size: 1.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 3px;

    padding: 15px 0;

    display: block;

    text-align: center;

    text-decoration: none;

    transition: color 0.3s ease;

    font-family: var(--font-main);

}



.mobile-menu-list li a:hover {

    color: var(--color-gold);

    text-shadow: 0 0 20px var(--color-gold-glow);

}



.mobile-nav-close {

    position: absolute;

    top: 30px;

    right: 30px;

    background: none;

    border: none;

    color: #fff;

    cursor: pointer;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: color 0.3s ease;

}



.mobile-nav-close:hover {

    color: var(--color-gold);

}



.mobile-nav-close svg {

    width: 28px;

    height: 28px;

}



/* --- Skip Link (Accessibility) --- */



.skip-link.screen-reader-text {

    position: absolute;

    left: -9999px;

    top: auto;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(1px, 1px, 1px, 1px);

    white-space: nowrap;

    background: var(--color-gold);

    color: #000;

    padding: 10px 20px;

    font-weight: 700;

    text-decoration: none;

    z-index: 100000;

}



.skip-link.screen-reader-text:focus {

    left: 10px;

    top: 10px;

    width: auto;

    height: auto;

    clip: auto;

    z-index: 99999;

    font-size: 0.9rem;

}



/* Screen-reader-text utility */

.screen-reader-text {

    border: 0;

    clip: rect(1px, 1px, 1px, 1px);

    clip-path: inset(50%);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

    word-wrap: normal !important;

}



/* ==========================================================================

   7. HERO SECTION

   ========================================================================== */



.hero-section {

    width: 100%;

    height: 100vh;

    position: relative;

    overflow: hidden;

}



.hero-bg {

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to bottom,

        rgba(10, 10, 10, 0.3) 0%,

        rgba(10, 10, 10, 0.1) 40%,

        rgba(10, 10, 10, 0.7) 80%,

        #0a0a0a 100%

    );

    z-index: 1;

}



.hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

    animation: fadeInUp 1.2s ease-out;

}



.hero-logo {

    max-width: 480px;

    width: 80%;

    height: auto;

    margin: 0 auto;

}



.hero-tagline {

    color: rgba(255, 255, 255, 0.6);

    font-size: 1.1rem;

    text-transform: uppercase;

    letter-spacing: 4px;

    margin-top: 20px;

    font-weight: 500;

    font-family: var(--font-main);

}



.hero-scroll-indicator {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    animation: float 2s ease-in-out infinite;

    text-decoration: none;

}



.hero-scroll-indicator:hover {

    text-shadow: none;

}



.scroll-text {

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 3px;

    color: rgba(255, 255, 255, 0.4);

}



.scroll-arrow {

    transform: rotate(90deg);

    display: flex;

}



.scroll-arrow img {

    width: 16px;

    height: auto;

    filter: brightness(0.5);

}



/* Hero Keyframes */



@keyframes float {

    0%,

    100% {

        transform: translateX(-50%) translateY(0);

    }

    50% {

        transform: translateX(-50%) translateY(8px);

    }

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ==========================================================================

   8. FEATURED CARDS SECTION

   ========================================================================== */



.featured-cards-section {

    padding: 80px 40px;

    max-width: var(--max-width);

    margin: 0 auto;

}



.featured-cards-inner {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.featured-card {

    position: relative;

    overflow: hidden;

    display: block;

    text-decoration: none;

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    aspect-ratio: 4 / 3;

}



.featured-card:hover {

    border-color: rgba(200, 164, 92, 0.5);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

}



.featured-card:focus-visible {

    outline: 2px solid var(--color-gold);

    outline-offset: 2px;

}



.featured-card-img {

    position: absolute;

    inset: 0;

}



.featured-card-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.featured-card:hover .featured-card-img img {

    transform: scale(1.06);

}



.featured-card-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to top,

        rgba(0, 0, 0, 0.85) 0%,

        rgba(0, 0, 0, 0.3) 50%,

        transparent 100%

    );

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 30px;

    z-index: 2;

}



.featured-card-tag {

    font-size: 0.7rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 3px;

    font-weight: 700;

    margin-bottom: 8px;

}



.featured-card-title {

    font-size: 1.5rem;

    color: #fff;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin: 0 0 8px;

    line-height: 1.2;

}



.featured-card-desc {

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.6);

    margin: 0;

    line-height: 1.5;

}



/* ==========================================================================

   9. MISSION / CTA SECTION

   ========================================================================== */



.mission-section {

    width: 100%;

    padding: 120px 40px;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    position: relative;

}



.mission-overlay {

    position: absolute;

    inset: 0;

    background: rgba(10, 10, 10, 0.8);

}



.mission-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: 0 auto;

    text-align: center;

}



.mission-title {

    font-size: 2.5rem;

    color: #fff;

    text-transform: uppercase;

    margin: 15px 0 25px;

    letter-spacing: 1px;

    font-weight: 700;

}



.mission-text {

    font-size: 1.05rem;

    color: rgba(255, 255, 255, 0.7);

    line-height: 1.8;

    margin-bottom: 30px;

}



.mission-deco img {

    max-width: 300px;

    opacity: 0.3;

    margin: 40px auto 0;

}



/* ==========================================================================

   10. LATEST POSTS / POST GRID

   ========================================================================== */



.latest-posts-section {

    padding: 80px 40px;

    max-width: var(--max-width);

    margin: 0 auto;

}



.post-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

    gap: 28px;

    margin-top: 40px;

}



.post-grid article {

    background: var(--color-bg-card);

    border: 1px solid rgba(255, 255, 255, 0.06);

    overflow: hidden;

    transition: all 0.4s ease;

    display: flex;

    flex-direction: column;

}



.post-grid article:hover {

    border-color: var(--color-gold);

    transform: translateY(-4px);

    box-shadow: 0 10px 20px rgba(200, 164, 92, 0.12), 0 20px 40px rgba(0, 0, 0, 0.4);

}



.post-thumbnail {

    aspect-ratio: 16 / 9;

    overflow: hidden;

}



.post-thumbnail a {

    display: block;

    width: 100%;

    height: 100%;

}



.post-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.post-grid article:hover .post-thumbnail img {

    transform: scale(1.05);

}



.post-content-wrap {

    padding: 28px;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.post-category {

    font-size: 0.7rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

    margin-bottom: 10px;

    display: inline-block;

    text-decoration: none;

}



.post-category:hover {

    color: #fff;

}



.post-content-wrap .entry-title {

    font-size: 1.15rem;

    font-weight: 600;

    margin: 0 0 12px;

    line-height: 1.3;

}



.post-content-wrap .entry-title a {

    color: #fff;

    text-decoration: none;

    transition: color 0.3s ease;

}



.post-content-wrap .entry-title a:hover {

    color: var(--color-gold);

    text-shadow: none;

}



.entry-excerpt {

    font-size: 0.88rem;

    color: var(--color-text-secondary);

    line-height: 1.6;

    margin-bottom: 20px;

    flex: 1;

}



.read-more-link {

    font-size: 0.78rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: color 0.3s ease, gap 0.3s ease;

}



.read-more-link:hover {

    color: #fff;

    gap: 10px;

    text-shadow: none;

}



.read-more-link svg {

    transition: transform 0.3s ease;

    width: 14px;

    height: 14px;

    flex-shrink: 0;

}



.read-more-link:hover svg {

    transform: translateX(3px);

}



/* ==========================================================================

   11. PAGINATION

   ========================================================================== */



.posts-navigation,

.pagination {

    text-align: center;

    margin-top: 50px;

}



.nav-links {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

}



.nav-links a,

.nav-links .current,

.nav-links .dots {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 44px;

    height: 44px;

    margin: 0 2px;

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.85rem;

    letter-spacing: 1px;

    font-family: var(--font-main);

    transition: all 0.3s ease;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(15, 15, 15, 0.6);

    color: var(--color-text-secondary);

    text-decoration: none;

    box-sizing: border-box;

}



.nav-links a {

    color: var(--color-text-muted);

}



.nav-links a:hover {

    color: #fff;

    border-color: var(--color-gold);

    background: rgba(200, 164, 92, 0.08);

    box-shadow: 0 0 15px rgba(200, 164, 92, 0.2);

    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);

}



.nav-links .current {

    color: #000;

    background: var(--color-gold);

    border-color: var(--color-gold);

    box-shadow: 0 0 15px var(--color-gold-glow);

}



.nav-links .dots {

    border-color: transparent;

    background: transparent;

    color: var(--color-text-muted);

}



.nav-links a.prev,

.nav-links a.next {

    padding: 0 20px;

    min-width: auto;

}



/* Centered posts navigation */

.posts-navigation .nav-links {

    display: flex;

    justify-content: center;

}



.posts-navigation .nav-previous a,

.posts-navigation .nav-next a,

.posts-navigation .page-numbers {

    color: var(--color-gold);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    border: 1px solid rgba(200, 164, 92, 0.3);

    padding: 12px 18px;

    margin: 0 4px;

    transition: all 0.3s ease;

    display: inline-block;

}



.posts-navigation .nav-previous a:hover,

.posts-navigation .nav-next a:hover,

.posts-navigation .page-numbers:hover,

.posts-navigation .page-numbers.current {

    background: var(--color-gold);

    color: #000;

    text-shadow: none;

}



/* ==========================================================================

   12. BUTTONS

   ========================================================================== */



.btn-primary {

    display: inline-block;

    background: linear-gradient(135deg, #c8a45c, #a07830);

    color: #000;

    padding: 14px 40px;

    font-family: var(--font-main);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 0.85rem;

    border: none;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

    text-decoration: none;

    line-height: 1.4;

}



.btn-primary::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(

        90deg,

        transparent,

        rgba(255, 255, 255, 0.3),

        transparent

    );

    transition: left 0.5s ease;

}



.btn-primary:hover::before {

    left: 100%;

}



.btn-primary:hover {

    filter: brightness(1.15);

    box-shadow: 0 5px 25px var(--color-gold-glow);

    transform: translateY(-2px);

    color: #000;

    text-shadow: none;

}



.btn-primary:active {

    transform: translateY(0);

    box-shadow: 0 2px 10px var(--color-gold-glow);

}



/* Secondary / outline button */

.btn-secondary {

    display: inline-block;

    background: transparent;

    color: var(--color-gold);

    padding: 12px 36px;

    font-family: var(--font-main);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 0.85rem;

    border: 1px solid var(--color-gold);

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

    line-height: 1.4;

}



.btn-secondary:hover {

    background: var(--color-gold);

    color: #000;

    text-shadow: none;

    box-shadow: 0 5px 25px var(--color-gold-glow);

}



/* ==========================================================================

   13. SINGLE POST

   ========================================================================== */



.single-hero {

    width: 100%;

    height: 50vh;

    min-height: 350px;

    background-size: cover;

    background-position: center;

    position: relative;

}



.single-hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to bottom,

        transparent 50%,

        #0a0a0a 100%

    );

}



.single-post-content {

    max-width: 800px;

    margin: -60px auto 0;

    position: relative;

    z-index: 2;

    background: rgba(15, 15, 15, 0.95);

    padding: 60px;

    border-left: 3px solid var(--color-gold);

}



.single-post-content .entry-header {

    margin-bottom: 40px;

}



.single-post-content .entry-title {

    font-size: 2.2rem;

    line-height: 1.2;

    margin-bottom: 20px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Categories */



.entry-categories {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 15px;

}



.cat-badge {

    font-size: 0.7rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

    padding: 4px 12px;

    border: 1px solid rgba(200, 164, 92, 0.3);

    text-decoration: none;

    transition: all 0.3s ease;

    display: inline-block;

}



.cat-badge:hover {

    background: var(--color-gold);

    color: #000;

    text-shadow: none;

}



/* Entry Meta */



.entry-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    color: var(--color-text-muted);

    font-size: 0.85rem;

}



.entry-meta a {

    color: var(--color-text-muted);

    text-decoration: none;

    transition: color 0.3s ease;

}



.entry-meta a:hover {

    color: var(--color-gold);

    text-shadow: none;

}



.entry-meta svg {

    vertical-align: -2px;

    margin-right: 4px;

    opacity: 0.6;

    width: 14px;

    height: 14px;

}



.entry-border-deco {

    margin: 30px 0;

}



.entry-border-deco img {

    max-width: 200px;

    opacity: 0.2;

    margin: 0 auto;

    display: block;

}



/* Entry Content */



.entry-content {

    font-size: 1.05rem;

    line-height: 1.85;

    color: var(--color-text-secondary);

}



.entry-content p {

    margin-bottom: 20px;

}



.entry-content h2 {

    color: #fff;

    margin-top: 40px;

    margin-bottom: 20px;

    font-size: 1.8rem;

}



.entry-content h3 {

    color: #fff;

    margin-top: 40px;

    margin-bottom: 15px;

    font-size: 1.4rem;

}



.entry-content h4 {

    color: #fff;

    margin-top: 30px;

    margin-bottom: 12px;

}



.entry-content img {

    max-width: 100%;

    height: auto;

    margin: 30px 0;

}



.entry-content blockquote {

    border-left: 3px solid var(--color-gold);

    padding-left: 20px;

    margin: 30px 0;

    font-style: italic;

    color: rgba(255, 255, 255, 0.8);

    font-size: 1.1rem;

    line-height: 1.7;

}



.entry-content blockquote p {

    margin-bottom: 0;

}



.entry-content blockquote cite {

    display: block;

    font-size: 0.85rem;

    color: var(--color-gold);

    margin-top: 10px;

    font-style: normal;

    font-weight: 600;

}



.entry-content a {

    color: var(--color-gold);

    text-decoration: underline;

    text-decoration-color: rgba(200, 164, 92, 0.3);

    text-underline-offset: 3px;

    transition: text-decoration-color 0.3s ease, color 0.3s ease;

}



.entry-content a:hover {

    text-decoration-color: var(--color-gold);

    color: var(--color-gold);

    text-shadow: none;

}



.entry-content ul,

.entry-content ol {

    padding-left: 25px;

    margin-bottom: 20px;

    list-style: disc;

}



.entry-content ol {

    list-style: decimal;

}



.entry-content li {

    margin-bottom: 8px;

    line-height: 1.7;

}



.entry-content pre {

    background: var(--color-bg-card);

    border: 1px solid rgba(255, 255, 255, 0.08);

    padding: 20px;

    overflow-x: auto;

    margin: 25px 0;

    font-size: 0.9rem;

    line-height: 1.6;

}



.entry-content code {

    background: var(--color-bg-card);

    padding: 2px 6px;

    font-size: 0.9em;

    border: 1px solid rgba(255, 255, 255, 0.08);

}



.entry-content pre code {

    background: none;

    padding: 0;

    border: none;

}



.entry-content table {

    width: 100%;

    border-collapse: collapse;

    margin: 25px 0;

}



.entry-content th,

.entry-content td {

    padding: 12px 16px;

    text-align: left;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.entry-content th {

    color: var(--color-gold);

    font-weight: 700;

    text-transform: uppercase;

    font-size: 0.8rem;

    letter-spacing: 1px;

}



.entry-content hr {

    border: none;

    height: 1px;

    background: rgba(255, 255, 255, 0.08);

    margin: 40px 0;

}



/* Tags */



.entry-tags {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-top: 40px;

    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.tags-label {

    color: var(--color-text-muted);

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-right: 4px;

}



.tag-pill {

    font-size: 0.75rem;

    color: var(--color-text-muted);

    padding: 4px 10px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    text-decoration: none;

    transition: all 0.3s ease;

    display: inline-block;

}



.tag-pill:hover {

    border-color: var(--color-gold);

    color: var(--color-gold);

    text-shadow: none;

}



/* ==========================================================================

   14. POST NAVIGATION (Prev / Next)

   ========================================================================== */



.single-post-nav {

    max-width: 800px;

    margin: 40px auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.post-nav-link {

    padding: 25px;

    background: var(--color-bg-card);

    border: 1px solid rgba(255, 255, 255, 0.06);

    text-decoration: none;

    transition: all 0.3s ease;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.post-nav-link:hover {

    border-color: rgba(200, 164, 92, 0.3);

    background: var(--color-bg-elevated);

    text-shadow: none;

}



.post-nav-label {

    font-size: 0.75rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 6px;

}



.post-nav-title {

    font-size: 0.95rem;

    color: var(--color-text-secondary);

    line-height: 1.4;

}



.post-nav-next {

    text-align: right;

}



.post-nav-next .post-nav-label {

    justify-content: flex-end;

}



/* ==========================================================================

   15. PAGE TEMPLATE

   ========================================================================== */



.page-hero {

    width: 100%;

    height: 40vh;

    min-height: 280px;

    background-size: cover;

    background-position: center;

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding-bottom: 40px;

}



.page-hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to bottom,

        transparent 30%,

        #0a0a0a 100%

    );

}



.page-hero-title {

    position: relative;

    z-index: 2;

    font-size: 3rem;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

}



.page-content-wrap {

    max-width: 1000px;

    margin: 40px auto;

    padding: 60px;

    background: rgba(15, 15, 15, 0.9);

    border-left: 3px solid var(--color-gold);

}



.page-content-wrap .entry-content {

    font-size: 1.05rem;

    line-height: 1.8;

    color: var(--color-text-secondary);

}



/* ==========================================================================

   16. FOOTER

   ========================================================================== */



.site-footer {

    background: #050505;

    padding: 60px 40px 30px;

    position: relative;

    margin-top: 80px;

}



.site-footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(

        90deg,

        transparent,

        var(--color-gold),

        transparent

    );

    box-shadow: 0 0 20px var(--color-gold-glow);

}



.footer-inner {

    max-width: var(--max-width);

    margin: 0 auto;

}



/* Footer Top */



.footer-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;

    margin-bottom: 40px;

}



.footer-logo img {

    height: 35px;

    width: auto;

    opacity: 0.8;

    filter: brightness(0.9);

}



/* Footer Navigation */



.footer-navigation {

    display: flex;

    align-items: center;

}



.footer-menu-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}



.footer-menu-list li a {

    color: var(--color-text-muted);

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    text-decoration: none;

    transition: color 0.3s ease;

    font-family: var(--font-main);

    font-weight: 600;

}



.footer-menu-list li a:hover {

    color: var(--color-gold);

    text-shadow: none;

}



/* Footer Social */



.footer-social {

    display: flex;

    gap: 15px;

}



.social-link {

    color: var(--color-text-muted);

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    text-decoration: none;

}



.social-link:hover {

    color: var(--color-gold);

    border-color: var(--color-gold);

    text-shadow: none;

    box-shadow: 0 0 12px var(--color-gold-glow);

}



.social-link svg {

    width: 16px;

    height: 16px;

}



/* Footer Decorative Border */



.footer-border {

    text-align: center;

    margin: 30px 0;

}



.footer-border img {

    max-width: 200px;

    opacity: 0.15;

    margin: 0 auto;

}



/* Footer Bottom */



.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.footer-legal p {

    color: var(--color-text-muted);

    font-size: 0.78rem;

    margin: 0 0 5px;

    line-height: 1.5;

}



.footer-disclaimer {

    font-size: 0.7rem;

    color: rgba(255, 255, 255, 0.3);

    line-height: 1.5;

}



.footer-studio-logo img {

    height: 30px;

    opacity: 0.4;

    filter: grayscale(100%);

    transition: all 0.3s ease;

}



.footer-studio-logo img:hover {

    opacity: 0.7;

    filter: grayscale(0%);

}



/* ==========================================================================

   17. BACK TO TOP

   ========================================================================== */



.back-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 46px;

    height: 46px;

    border: 1.5px solid var(--color-gold);

    background: rgba(15, 15, 15, 0.9) !important;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 999;

    opacity: 0;

    pointer-events: none;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    text-decoration: none;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    color: var(--color-gold);

    border-radius: 50% !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);

}



.back-to-top.visible {

    opacity: 1;

    pointer-events: auto;

}



.back-to-top:hover {

    border-color: var(--color-gold);

    background: var(--color-gold) !important;

    color: #000 !important;

    box-shadow: 0 0 20px var(--color-gold-glow), 0 4px 15px rgba(0, 0, 0, 0.4);

    text-shadow: none;

    transform: translateY(-5px);

}



.back-to-top svg {

    transition: transform 0.3s ease;

}



.back-to-top:hover svg {

    transform: scale(1.15);

}



/* ==========================================================================

   17.5 FLOATING TABLE OF CONTENTS

   ========================================================================== */

.floating-toc {

    position: fixed;

    bottom: 95px;

    right: 30px;

    z-index: 999;

    font-family: var(--font-main);

}



.toc-toggle {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: rgba(15, 15, 15, 0.95);

    border: 1px solid var(--color-gold);

    color: var(--color-gold);

    padding: 12px 18px;

    border-radius: 30px;

    cursor: pointer;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(5px);

    transition: all 0.3s ease;

    font-family: var(--font-display);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 0.85rem;

}



.toc-toggle:hover {

    background: var(--color-gold);

    color: var(--color-bg);

}



.toc-content {

    position: absolute;

    bottom: calc(100% + 15px);

    right: 0;

    background: rgba(15, 15, 15, 0.95);

    border: 1px solid var(--color-gold);

    border-radius: 8px;

    width: 300px;

    max-height: 400px;

    overflow-y: auto;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(10px);

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    scrollbar-width: thin;

    scrollbar-color: var(--color-gold) #111;

}



.floating-toc.is-expanded .toc-content {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.toc-content::-webkit-scrollbar {

    width: 6px;

}

.toc-content::-webkit-scrollbar-track {

    background: #111;

    border-radius: 8px;

}

.toc-content::-webkit-scrollbar-thumb {

    background-color: var(--color-gold);

    border-radius: 8px;

}



.toc-list-nav {

    padding: 15px;

}



.toc-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.toc-item {

    margin-bottom: 8px;

}



.toc-item-h2 {

    font-weight: 700;

    margin-top: 12px;

}

.toc-item-h2:first-child {

    margin-top: 0;

}



.toc-item-h3 {

    padding-left: 15px;

    font-size: 0.9rem;

    position: relative;

}

.toc-item-h3::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 6px;

    height: 1px;

    background: var(--color-gold);

    opacity: 0.5;

}



.toc-link {

    color: var(--color-text-secondary);

    text-decoration: none;

    transition: color 0.2s ease;

    display: block;

    line-height: 1.4;

}



.toc-link:hover,

.toc-link.is-active {

    color: var(--color-gold);

}



@media (max-width: 768px) {

    .floating-toc {

        bottom: 80px;

        right: 20px;

    }

    .toc-toggle .toc-title {

        display: none; /* Hide text on mobile, just show icon */

    }

    .toc-toggle {

        padding: 12px;

        border-radius: 50%;

    }

    .toc-content {

        width: 260px;

        max-height: 300px;

        right: 0;

    }

}



/* ==========================================================================

   18. ANIMATIONS

   ========================================================================== */



@keyframes shimmer {

    0% {

        left: -100%;

    }

    100% {

        left: 100%;

    }

}



@keyframes pulseGlow {

    0%,

    100% {

        box-shadow: 0 0 5px var(--color-gold-glow);

    }

    50% {

        box-shadow: 0 0 20px var(--color-gold-glow), 0 0 40px rgba(200, 164, 92, 0.15);

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



@keyframes slideInLeft {

    from {

        opacity: 0;

        transform: translateX(-30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* Scroll-triggered animation utility */



.animate-on-scroll {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.animate-on-scroll.is-visible {

    opacity: 1;

    transform: translateY(0);

}



/* Staggered delays */



.animate-on-scroll.delay-1 {

    transition-delay: 0.1s;

}



.animate-on-scroll.delay-2 {

    transition-delay: 0.2s;

}



.animate-on-scroll.delay-3 {

    transition-delay: 0.3s;

}



.animate-on-scroll.delay-4 {

    transition-delay: 0.4s;

}



/* ==========================================================================

   19. COMMENTS

   ========================================================================== */



.single-comments-wrap {

    max-width: 800px;

    margin: 40px auto;

}



.comments-area {

    background: var(--color-bg-card);

    border: 1px solid rgba(255, 255, 255, 0.06);

    padding: 40px;

}



.comments-title {

    font-size: 1.5rem;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 30px;

    font-weight: 700;

}



/* Comment list */



.comment-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.comment-list .comment {

    padding: 25px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.comment-list .comment:last-child {

    border-bottom: none;

}



.comment-author {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 10px;

}



.comment-author .avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 2px solid rgba(200, 164, 92, 0.3);

}



.comment-author .fn {

    font-weight: 600;

    color: #fff;

    font-size: 0.95rem;

}



.comment-author .fn a {

    color: #fff;

    text-decoration: none;

}



.comment-author .fn a:hover {

    color: var(--color-gold);

}



.comment-metadata {

    font-size: 0.78rem;

    color: var(--color-text-muted);

    margin-bottom: 12px;

}



.comment-metadata a {

    color: var(--color-text-muted);

    text-decoration: none;

}



.comment-metadata a:hover {

    color: var(--color-gold);

}



.comment-content {

    font-size: 0.95rem;

    color: var(--color-text-secondary);

    line-height: 1.7;

}



.comment-content p {

    margin-bottom: 10px;

}



.reply a {

    font-size: 0.75rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 700;

    text-decoration: none;

    transition: color 0.3s ease;

}



.reply a:hover {

    color: #fff;

    text-shadow: none;

}



/* Nested / child comments */

.comment-list .children {

    list-style: none;

    padding-left: 40px;

    margin: 0;

}



/* Comment Form */



.comment-respond {

    margin-top: 40px;

}



.comment-reply-title {

    font-size: 1.3rem;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 25px;

    font-weight: 700;

}



.comment-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.comment-form label {

    display: block;

    font-size: 0.8rem;

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 6px;

    font-weight: 600;

}



.comment-form input[type="text"],

.comment-form input[type="email"],

.comment-form input[type="url"],

.comment-form textarea {

    width: 100%;

    background: var(--color-bg);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: var(--color-text);

    padding: 14px 18px;

    font-family: var(--font-main);

    font-size: 0.95rem;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

    outline: none;

    appearance: none;

    -webkit-appearance: none;

}



.comment-form input[type="text"]:focus,

.comment-form input[type="email"]:focus,

.comment-form input[type="url"]:focus,

.comment-form textarea:focus {

    border-color: var(--color-gold);

    box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.15);

}



.comment-form textarea {

    min-height: 160px;

    resize: vertical;

}



.comment-form input[type="text"]::placeholder,

.comment-form input[type="email"]::placeholder,

.comment-form input[type="url"]::placeholder,

.comment-form textarea::placeholder {

    color: rgba(255, 255, 255, 0.25);

}



.comment-form .form-submit {

    margin-top: 10px;

}



.comment-form .submit {

    display: inline-block;

    background: linear-gradient(135deg, #c8a45c, #a07830);

    color: #000;

    padding: 14px 40px;

    font-family: var(--font-main);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-size: 0.85rem;

    border: none;

    cursor: pointer;

    transition: all 0.3s ease;

}



.comment-form .submit:hover {

    filter: brightness(1.15);

    box-shadow: 0 5px 25px var(--color-gold-glow);

    transform: translateY(-2px);

}



/* No-comments message */



.no-comments {

    color: var(--color-text-muted);

    font-size: 0.95rem;

    padding: 30px 0;

    text-align: center;

}



/* ==========================================================================

   20. SCROLLBAR

   ========================================================================== */



::-webkit-scrollbar {

    width: 8px;

}



::-webkit-scrollbar-track {

    background: #0a0a0a;

}



::-webkit-scrollbar-thumb {

    background: #333;

    border-radius: 4px;

    transition: background 0.3s ease;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--color-gold);

}



/* Firefox scrollbar */

* {

    scrollbar-width: thin;

    scrollbar-color: #333 #0a0a0a;

}



/* ==========================================================================

   21. WORDPRESS UTILITIES

   ========================================================================== */



/* WordPress alignment classes */

.alignwide {

    max-width: 1100px;

    margin-left: auto;

    margin-right: auto;

}



.alignfull {

    width: 100vw;

    margin-left: calc(-50vw + 50%);

    max-width: 100vw;

}



.alignleft {

    float: left;

    margin-right: 25px;

    margin-bottom: 15px;

}



.alignright {

    float: right;

    margin-left: 25px;

    margin-bottom: 15px;

}



.aligncenter {

    display: block;

    margin-left: auto;

    margin-right: auto;

}



/* Caption */

.wp-caption {

    max-width: 100%;

    margin-bottom: 20px;

}



.wp-caption img {

    display: block;

    margin: 0 auto;

}



.wp-caption-text {

    font-size: 0.8rem;

    color: var(--color-text-muted);

    text-align: center;

    margin-top: 8px;

    padding: 0 10px;

    font-style: italic;

}



/* WordPress galleries */

.gallery {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin: 30px 0;

}



.gallery-item {

    overflow: hidden;

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.gallery-item:hover img {

    transform: scale(1.05);

}



/* WordPress block editor embeds */

.wp-block-embed {

    margin: 30px 0;

}



.wp-block-embed__wrapper {

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    overflow: hidden;

}



.wp-block-embed__wrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



/* ==========================================================================

   22. SEARCH & 404

   ========================================================================== */



/* Search form */

.search-form {

    display: flex;

    max-width: 500px;

    margin: 0 auto;

}



.search-form .search-field {

    flex: 1;

    background: var(--color-bg-card);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-right: none;

    color: var(--color-text);

    padding: 14px 20px;

    font-family: var(--font-main);

    font-size: 0.95rem;

    outline: none;

}



.search-form .search-field:focus {

    border-color: var(--color-gold);

}



.search-form .search-submit {

    background: linear-gradient(135deg, #c8a45c, #a07830);

    color: #000;

    border: none;

    padding: 14px 24px;

    font-family: var(--font-main);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 0.85rem;

    cursor: pointer;

    transition: filter 0.3s ease;

}



.search-form .search-submit:hover {

    filter: brightness(1.15);

}



/* 404 Page */

.error-404-content {

    max-width: 600px;

    margin: 120px auto;

    text-align: center;

    padding: 60px 40px;

}



.error-404-content .error-code {

    font-size: 8rem;

    font-weight: 700;

    color: var(--color-gold);

    line-height: 1;

    margin-bottom: 20px;

    opacity: 0.6;

    letter-spacing: 10px;

}



.error-404-content h1 {

    font-size: 2rem;

    margin-bottom: 15px;

}



.error-404-content p {

    color: var(--color-text-secondary);

    margin-bottom: 30px;

}



/* ==========================================================================

   23. ARCHIVE / CATEGORY HEADER

   ========================================================================== */



.archive-header {

    padding: 140px 40px 60px;

    text-align: center;

    max-width: var(--max-width);

    margin: 0 auto;

}



.archive-header .section-tag {

    margin-bottom: 15px;

}



.archive-header .archive-title {

    font-size: 2.5rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 15px;

}



.archive-description {

    color: var(--color-text-secondary);

    font-size: 1rem;

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.7;

}



/* ==========================================================================

   24. WIDGET AREAS (Sidebar)

   ========================================================================== */



.widget-area {

    padding: 40px 0;

}



.widget {

    margin-bottom: 40px;

    padding: 25px;

    background: var(--color-bg-card);

    border: 1px solid rgba(255, 255, 255, 0.06);

}



.widget-title {

    font-size: 0.85rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

    margin-bottom: 20px;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.widget ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.widget ul li {

    padding: 8px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}



.widget ul li:last-child {

    border-bottom: none;

}



.widget ul li a {

    color: var(--color-text-secondary);

    text-decoration: none;

    font-size: 0.9rem;

    transition: color 0.3s ease;

}



.widget ul li a:hover {

    color: var(--color-gold);

    text-shadow: none;

}



/* ==========================================================================

   25. LOADING / PRELOADER

   ========================================================================== */



.site-preloader {

    position: fixed;

    inset: 0;

    background: var(--color-bg);

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: opacity 0.5s ease;

}



.site-preloader.loaded {

    opacity: 0;

    pointer-events: none;

}



.preloader-spinner {

    width: 40px;

    height: 40px;

    border: 2px solid rgba(200, 164, 92, 0.2);

    border-top-color: var(--color-gold);

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



/* ==========================================================================

   26. RESPONSIVE — Tablets (max-width: 1024px)

   ========================================================================== */



@media (max-width: 1024px) {

    h1 {

        font-size: 3rem;

    }



    h2,

    .section-heading {

        font-size: 2rem;

    }



    .featured-cards-inner {

        grid-template-columns: repeat(2, 1fr);

    }



    .header-inner {

        padding: 15px 30px;

    }



    .featured-cards-section,

    .latest-posts-section {

        padding: 60px 30px;

    }



    .mission-section {

        padding: 80px 30px;

    }



    .mission-title {

        font-size: 2rem;

    }



    .single-post-content {

        padding: 45px;

    }



    .page-content-wrap {

        padding: 45px;

    }



    .page-hero-title {

        font-size: 2.5rem;

    }



    .single-post-content .entry-title {

        font-size: 1.8rem;

    }



    .footer-top {

        gap: 25px;

    }



    .container {

        padding: 0 30px;

    }

}



/* ==========================================================================

   27. RESPONSIVE — Mobile (max-width: 768px)

   ========================================================================== */



@media (max-width: 768px) {

    /* Header */

    .nav-toggle {

        display: flex;

    }



    .main-navigation {

        display: none;

    }



    .header-inner {

        padding: 14px 20px;

    }



    .header-logo-img {

        height: 36px;

    }



    /* Hero */

    .hero-logo {

        max-width: 300px;

    }



    .hero-tagline {

        font-size: 0.9rem;

        letter-spacing: 3px;

    }



    .hero-bg {

        background-attachment: scroll; /* Fix for iOS */

    }



    .hero-scroll-indicator {

        bottom: 25px;

    }



    /* Featured Cards */

    .featured-cards-inner {

        grid-template-columns: 1fr;

        gap: 20px;

    }



    .featured-cards-section {

        padding: 50px 20px;

    }



    .featured-card {

        aspect-ratio: 16 / 9;

    }



    .featured-card-overlay {

        padding: 20px;

    }



    /* Post Grid */

    .post-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }



    .latest-posts-section {

        padding: 50px 20px;

    }



    /* Single Post */

    .single-post-content {

        padding: 30px;

        margin-top: -40px;

    }



    .single-post-content .entry-title {

        font-size: 1.5rem;

    }



    .single-hero {

        height: 40vh;

        min-height: 250px;

    }



    .entry-meta {

        gap: 12px;

    }



    /* Post Navigation */

    .single-post-nav {

        grid-template-columns: 1fr;

        gap: 15px;

    }



    .post-nav-next {

        text-align: left;

    }



    .post-nav-next .post-nav-label {

        justify-content: flex-start;

    }



    /* Page */

    .page-content-wrap {

        padding: 30px;

        margin: 20px auto;

    }



    .page-hero {

        height: 35vh;

        min-height: 220px;

    }



    .page-hero-title {

        font-size: 2rem;

    }



    /* Mission */

    .mission-section {

        padding: 60px 20px;

        background-attachment: scroll;

    }



    .mission-title {

        font-size: 1.8rem;

    }



    /* Footer */

    .site-footer {

        padding: 40px 20px 25px;

        margin-top: 50px;

    }



    .footer-top {

        flex-direction: column;

        align-items: flex-start;

    }



    .footer-menu-list {

        flex-wrap: wrap;

        gap: 12px;

    }



    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }



    /* Comments */

    .comments-area {

        padding: 25px;

    }



    .comment-list .children {

        padding-left: 20px;

    }



    /* General */

    .container {

        padding: 0 20px;

    }



    .section-heading {

        margin-bottom: 25px;

    }



    /* Archive */

    .archive-header {

        padding: 120px 20px 40px;

    }



    .archive-header .archive-title {

        font-size: 2rem;

    }



    /* Back to Top */

    .back-to-top {

        bottom: 20px;

        right: 20px;

        width: 40px;

        height: 40px;

    }



    /* 404 */

    .error-404-content {

        margin: 80px auto;

        padding: 40px 20px;

    }



    .error-404-content .error-code {

        font-size: 5rem;

    }



    /* Gallery */

    .gallery {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* ==========================================================================

   28. RESPONSIVE — Small phones (max-width: 480px)

   ========================================================================== */



@media (max-width: 480px) {

    h1 {

        font-size: 2.2rem;

    }



    h2,

    .section-heading {

        font-size: 1.6rem;

    }



    h3 {

        font-size: 1.2rem;

    }



    .hero-tagline {

        font-size: 0.85rem;

        letter-spacing: 2px;

    }



    .hero-logo {

        max-width: 240px;

    }



    .featured-card-title {

        font-size: 1.2rem;

    }



    .featured-card-tag {

        font-size: 0.65rem;

    }



    .featured-card-desc {

        font-size: 0.8rem;

    }



    .single-post-content {

        padding: 20px;

    }



    .single-post-content .entry-title {

        font-size: 1.3rem;

    }



    .page-content-wrap {

        padding: 20px;

    }



    .page-hero-title {

        font-size: 1.6rem;

    }



    .btn-primary {

        padding: 12px 28px;

        font-size: 0.8rem;

        letter-spacing: 2px;

    }



    .btn-secondary {

        padding: 10px 24px;

        font-size: 0.8rem;

        letter-spacing: 2px;

    }



    .mobile-menu-list li a {

        font-size: 1.4rem;

        letter-spacing: 2px;

    }



    .mission-title {

        font-size: 1.5rem;

    }



    .mission-text {

        font-size: 0.95rem;

    }



    .post-content-wrap {

        padding: 20px;

    }



    .post-content-wrap .entry-title {

        font-size: 1.05rem;

    }



    .entry-excerpt {

        font-size: 0.82rem;

    }



    .entry-content {

        font-size: 0.95rem;

        line-height: 1.75;

    }



    .entry-content blockquote {

        font-size: 1rem;

        padding-left: 15px;

    }



    .comments-area {

        padding: 20px;

    }



    .error-404-content .error-code {

        font-size: 4rem;

    }



    .archive-header .archive-title {

        font-size: 1.6rem;

    }



    .footer-logo img {

        height: 28px;

    }



    .gallery {

        grid-template-columns: 1fr 1fr;

        gap: 8px;

    }



    .nav-links a,

    .nav-links .current,

    .nav-links .dots {

        min-width: 38px;

        height: 38px;

        font-size: 0.78rem;

    }

}



/* ==========================================================================

   28. RAIDERS OF THE TOMB CUSTOM STYLES & REBRANDING

   ========================================================================== */



/* Fallback Text-based Premium Logo */

.site-logo-fallback {

    display: inline-flex;

    flex-direction: column;

    text-decoration: none;

    line-height: 1;

    font-family: var(--font-main);

    text-transform: uppercase;

    transition: all 0.3s ease;

}



.site-logo-fallback .logo-main {

    font-size: 1.6rem;

    font-weight: 800;

    color: #fff;

    letter-spacing: 3px;

    background: linear-gradient(180deg, #fff 0%, #c8a45c 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 15px rgba(200, 164, 92, 0.3);

}



.site-logo-fallback .logo-sub {

    font-size: 0.7rem;

    font-weight: 500;

    color: var(--color-gold);

    letter-spacing: 4px;

    margin-top: 2px;

    text-align: center;

    border-top: 1px solid rgba(200, 164, 92, 0.3);

    padding-top: 2px;

}



.site-logo-fallback:hover .logo-main {

    background: linear-gradient(180deg, #fff 0%, #fff 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 20px rgba(200, 164, 92, 0.8);

}



.site-logo-fallback:hover .logo-sub {

    color: #fff;

    border-top-color: rgba(255, 255, 255, 0.8);

}



/* Custom logo adjustment for header */

.header-logo-wrap {

    display: flex;

    align-items: center;

}

.header-logo-wrap .custom-logo-link img {

    height: 45px;

    width: auto;

    object-fit: contain;

}



.mobile-logo-wrap {

    margin-bottom: 40px;

    display: flex;

    justify-content: center;

}

.mobile-logo-wrap .custom-logo-link img {

    height: 40px;

    width: auto;

    object-fit: contain;

}



.footer-logo-wrap {

    display: flex;

    align-items: center;

}

.footer-logo-wrap .custom-logo-link img {

    height: 38px;

    width: auto;

    object-fit: contain;

}



/* Compact Hero style override */

.hero-compact {

    height: 40vh !important;

    min-height: 320px !important;

}



.hero-compact .hero-bg {

    background-attachment: scroll; /* Disable parallax on compact for cleaner look */

}



.hero-compact .hero-logo-wrap {

    display: flex;

    justify-content: center;

    margin-bottom: 10px;

}



.hero-logo-fallback .logo-main {

    font-size: 2.8rem;

    letter-spacing: 6px;

    background: linear-gradient(180deg, #fff 20%, #c8a45c 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.hero-logo-fallback .logo-sub {

    font-size: 0.95rem;

    letter-spacing: 8px;

    padding-top: 4px;

    margin-top: 4px;

}



/* Featured Alternating Columns Layout */

.featured-alternating-section {

    display: flex;

    flex-direction: column;

    background: var(--color-bg);

}



.alt-row {

    display: flex;

    min-height: 480px;

    width: 100%;

    align-items: stretch;

    position: relative;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}



.alt-row.row-odd {

    flex-direction: row;

}



.alt-row.row-even {

    flex-direction: row-reverse;

}



.alt-row-image-container {

    width: 50%;

    position: relative;

    overflow: hidden;

    min-height: 380px;

}



.alt-row-image {

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.alt-row:hover .alt-row-image {

    transform: scale(1.05);

}



.alt-row-image-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to right, rgba(10, 10, 10, 0.7) 0%, transparent 25%, transparent 75%, rgba(10, 10, 10, 0.7) 100%);

    z-index: 1;

}



.row-even .alt-row-image-overlay {

    background: linear-gradient(to left, rgba(10, 10, 10, 0.7) 0%, transparent 25%, transparent 75%, rgba(10, 10, 10, 0.7) 100%);

}



/* Rocky edges SVG overlays */

.rocky-edge {

    position: absolute;

    left: 0;

    width: 100%;

    height: 24px;

    z-index: 4;

    pointer-events: none;

}



.rocky-top {

    top: -1px;

}



.rocky-bottom {

    bottom: -1px;

}



/* Content column styling */

.alt-row-content-container {

    width: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px 80px;

    background: var(--color-bg);

    position: relative;

}



.alt-row-content {

    max-width: 500px;

    padding: 45px;

    border-left: 2px solid var(--color-gold);

    background: rgba(18, 18, 18, 0.7);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-top: 1px solid rgba(255, 255, 255, 0.04);

    border-right: 1px solid rgba(255, 255, 255, 0.02);

    border-bottom: 1px solid rgba(255, 255, 255, 0.02);

    position: relative;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

    transition: all 0.4s ease;

}



.alt-row:hover .alt-row-content {

    border-left-color: #fff;

    box-shadow: 0 15px 50px rgba(200, 164, 92, 0.1);

}



/* Corner decorations */

.alt-row-content::before {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 16px;

    height: 16px;

    border-top: 2px solid var(--color-gold);

    border-right: 2px solid var(--color-gold);

    pointer-events: none;

    transition: border-color 0.4s ease;

}



.alt-row-content::after {

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    width: 16px;

    height: 16px;

    border-bottom: 2px solid var(--color-gold);

    border-right: 2px solid var(--color-gold);

    pointer-events: none;

    transition: border-color 0.4s ease;

}



.alt-row:hover .alt-row-content::before,

.alt-row:hover .alt-row-content::after {

    border-color: #fff;

}



.alt-row-category {

    font-size: 0.7rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 3px;

    font-weight: 700;

    margin-bottom: 15px;

    display: block;

}



.alt-row-title {

    font-size: 2rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    line-height: 1.2;

    margin: 0 0 20px;

}



.alt-row-title a {

    color: #fff;

    text-decoration: none;

    transition: color 0.3s ease;

}



.alt-row-title a:hover {

    color: var(--color-gold);

    text-shadow: 0 0 10px var(--color-gold-glow);

}



.alt-row-excerpt {

    font-size: 0.9rem;

    color: var(--color-text-secondary);

    line-height: 1.75;

    margin-bottom: 30px;

}



.alt-row-excerpt p {

    margin: 0;

}



/* Responsiveness for alternating columns */

@media (max-width: 1024px) {

    .alt-row-content-container {

        padding: 40px;

    }

    .alt-row-title {

        font-size: 1.7rem;

    }

}



@media (max-width: 768px) {

    .alt-row {

        flex-direction: column !important; /* Stack vertically */

        min-height: auto;

    }

    

    .alt-row-image-container,

    .alt-row-content-container {

        width: 100% !important;

    }

    

    .alt-row-image-container {

        height: 280px;

        min-height: auto;

    }

    

    .alt-row-content-container {

        padding: 30px 20px;

    }

    

    .alt-row-content {

        padding: 30px 20px;

        max-width: 100%;

    }

    

    .alt-row-title {

        font-size: 1.5rem;

    }

    

    .hero-compact {

        height: 35vh !important;

        min-height: 260px !important;

    }

    

    .hero-logo-fallback .logo-main {

        font-size: 2.2rem;

        letter-spacing: 4px;

    }

    

    .hero-logo-fallback .logo-sub {

        font-size: 0.8rem;

        letter-spacing: 5px;

    }

}



/* ==========================================================================

   29. PRINT STYLES

   ========================================================================== */



@media print {

    .site-header,

    .site-footer,

    .hero-section,

    .back-to-top,

    .mobile-nav,

    .nav-toggle,

    .hero-scroll-indicator,

    .single-post-nav,

    .comments-area {

        display: none !important;

    }



    body {

        background: #fff;

        color: #000;

        font-size: 12pt;

    }



    .single-post-content {

        border-left: 2px solid #c8a45c;

        padding: 20px;

        margin: 0 auto;

        background: #fff;

    }



    .entry-content a {

        color: #000;

        text-decoration: underline;

    }



    .entry-content a::after {

        content: ' (' attr(href) ')';

        font-size: 0.8em;

        color: #666;

    }



    img {

        max-width: 100% !important;

    }



    h1, h2, h3 {

        color: #000;

        page-break-after: avoid;

    }



    p {

        orphans: 3;

        widows: 3;

    }

}



/* ==========================================================================

   30. REDUCED MOTION (Accessibility)

   ========================================================================== */



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }



    .hero-bg {

        background-attachment: scroll;

    }



    .mission-section {

        background-attachment: scroll;

    }



    .animate-on-scroll {

        opacity: 1;

        transform: none;

    }

}



/* ==========================================================================

   3D Inventory System

   ========================================================================== */



:root {

    --color-gold-bright: #ffdf91;

    --font-display: 'Cinzel', Georgia, serif;

}



/* Note: .backpack-btn styles have been refactored and moved to the Site Header section to match the playtombraider.com layout */



body.inventory-active {

    overflow: hidden;

}



body.inventory-active #page {

    filter: grayscale(100%) blur(4px);

    pointer-events: none;

    transition: filter 0.4s ease;

}



.inventory-overlay {

    position: fixed;

    top: 0; left: 0; width: 100vw; height: 100vh;

    z-index: 99999;

    opacity: 1;

    visibility: visible;

    transition: opacity 0.3s ease, visibility 0.3s ease;

}



.inventory-overlay.hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}



.inventory-overlay .site-wrapper {

    width: 100%;

    height: 100vh;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    z-index: 2;

    background: transparent;

}



.tr-vault-background {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background: radial-gradient(circle, rgba(20, 10, 10, 0.85) 0%, rgba(5, 2, 2, 0.98) 100%);

    z-index: 1;

}



.vault-header {

    text-align: center;

    padding-top: 4vh;

    z-index: 5;

    position: relative;

}



.vault-title {

    font-family: var(--font-display);

    font-size: 2.2rem;

    font-weight: 800;

    letter-spacing: 6px;

    color: var(--color-gold);

    text-shadow: 0 4px 8px rgba(0,0,0,0.8), 0 0 15px rgba(200, 164, 92, 0.4);

    text-transform: uppercase;

}



.ring-indicator-up {

    margin-top: 10px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 1.5rem;

    cursor: pointer;

    transition: transform 0.2s, color 0.2s;

    text-shadow: 0 2px 4px rgba(0,0,0,0.8);

    display: inline-block;

    animation: bounceUpDown 2s infinite ease-in-out;

}



.ring-indicator-up:hover {

    color: var(--color-gold-bright);

    transform: scale(1.2);

}



@keyframes bounceUpDown {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-5px); }

}



.vault-footer {

    text-align: center;

    padding-bottom: 5vh;

    z-index: 5;

    position: relative;

}



#active-name {

    font-family: var(--font-display);

    font-size: 1.8rem;

    font-weight: 800;

    letter-spacing: 4px;

    color: var(--color-gold);

    text-shadow: 0 3px 6px rgba(0,0,0,0.9), 0 0 10px rgba(200, 164, 92, 0.3);

    text-transform: uppercase;

}



.interaction-hint {

    color: rgba(255,255,255,0.4);

    font-size: 0.8rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-top: 5px;

}



.scene-container {

    width: 100%;

    height: 60vh;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    perspective: 1000px;

    z-index: 5;

    animation: ringEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

}



.scene-container.ring-exit-down {

    animation: ringExitDown 1s ease-in forwards;

}



@keyframes ringEntrance {

    0% { opacity: 0; }

    100% { opacity: 1; }

}



@keyframes ringExitDown {

    0% {

        transform: translateY(0) scale(1);

        opacity: 1;

    }

    100% {

        transform: translateY(30vh) scale(0.5);

        opacity: 0;

    }

}



.vault-items-container {

    width: 100%;

    height: 100%;

    position: relative;

}



.item {

    position: absolute;

    width: 140px;

    height: 140px;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: filter 0.3s, opacity 0.5s;

    filter: brightness(0.4);

    z-index: 5;

    pointer-events: none;

}



.item.active {

    filter: brightness(1.2) drop-shadow(0 0 20px rgba(200, 164, 92, 0.6));

    z-index: 100;

    pointer-events: auto;

    cursor: pointer;

}



.item-wrapper {

    width: 100%;

    height: 100%;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}



.item-front {

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    user-select: none;

    transition: transform 0.3s ease;

}



.item .icon {

    width: 220px;

    height: 220px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 6rem;

    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.7));

    transition: transform 0.3s ease;

}



.item .icon model-viewer,

model-viewer {

    width: 100%;

    height: 100%;

    display: block;

    outline: none;

}



.item.active:hover .item-front {

    transform: scale(1.15);

}



.item-inner {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 320px;

    background: rgba(15, 5, 5, 0.95);

    border: 2px solid var(--color-gold);

    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(200, 164, 92, 0.2);

    border-radius: 6px;

    padding: 2rem;

    z-index: 200;

}



.item.active.opened .item-inner {

    display: flex;

    flex-direction: column;

}



.item-inner h3 {

    font-family: var(--font-display);

    font-size: 1.3rem;

    color: var(--color-gold);

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 1.5rem;

    text-align: center;

    border-bottom: 1px solid rgba(200, 164, 92, 0.2);

    padding-bottom: 0.5rem;

}



.submenu {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.8rem;

}



.submenu li a {

    display: block;

    color: #e0e0e0;

    text-decoration: none;

    font-size: 1rem;

    font-weight: 700;

    padding: 0.6rem 1rem;

    background: rgba(20, 20, 20, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 4px;

    transition: all 0.2s ease;

    text-align: center;

    letter-spacing: 1px;

}



.submenu li a:hover {

    color: #000;

    background: var(--color-gold);

    border-color: var(--color-gold);

    box-shadow: 0 0 10px rgba(200, 164, 92, 0.8);

}



.scene-container.mode-opened .item:not(.opened) {

    opacity: 0;

    pointer-events: none;

}



.item.active.opened .item-front {

    transform: scale(2.2) translateY(-10px);

    opacity: 0.8;

    pointer-events: none;

    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.9));

    z-index: 10;

}



.vault-controls {

    position: absolute;

    bottom: 16%;

    width: 100%;

    display: flex;

    justify-content: center;

    z-index: 210;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.vault-controls.visible {

    opacity: 1;

    pointer-events: auto;

}



.btn-back {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background: rgba(10, 10, 10, 0.9);

    color: #fff;

    font-family: var(--font-main);

    font-size: 0.9rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    border: 1.5px solid var(--color-gold);

    padding: 0.6rem 1.8rem;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-back:hover {

    background: var(--color-gold);

    color: #000;

    box-shadow: 0 0 15px rgba(200, 164, 92, 0.8);

}



.subpages-wrapper {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    z-index: 500;

    pointer-events: none;

}



.subpage {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background-color: rgba(10, 10, 10, 0.95);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.4s ease, visibility 0.4s ease;

    padding: 2rem;

    text-align: center;

}



.subpage.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



.subpage-title {

    font-family: var(--font-display);

    color: var(--color-gold);

    font-size: 3rem;

    margin-bottom: 2rem;

    text-shadow: 0 4px 8px rgba(0,0,0,0.8);

}



.subpage-content {

    max-width: 800px;

    font-size: 1.2rem;

    line-height: 1.6;

    color: #eee;

    margin-bottom: 3rem;

}



.btn-close-subpage {

    position: fixed;

    bottom: 2.5rem;

    right: 2.5rem;

    z-index: 1000;

    background: rgba(10, 10, 10, 0.9);

    border: 2px solid var(--color-gold);

    color: var(--color-gold);

    padding: 0.8rem 2rem;

    font-family: var(--font-display);

    font-size: 1.1rem;

    cursor: pointer;

    transition: all 0.2s ease;

    border-radius: 4px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);

}



.btn-close-subpage:hover {

    background: var(--color-gold);

    color: #000;

    box-shadow: 0 0 15px rgba(200, 164, 92, 0.8);

}



.retro-player-container {

    width: 100%;

    max-width: 600px;

    margin: 0 auto 2rem;

    background: #050505;

    border: 3px solid #2a2a2a;

    border-radius: 8px;

    padding: 15px;

    box-shadow: 0 0 20px rgba(0,0,0,0.9), inset 0 0 10px rgba(0,0,0,0.8);

    position: relative;

}



.retro-player-container::before {

    content: '';

    position: absolute;

    top: 15px; left: 15px; right: 15px; bottom: 15px;

    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));

    background-size: 100% 2px, 3px 100%;

    pointer-events: none;

    z-index: 10;

}



.retro-player-container iframe {

    width: 100%;

    border: none;

    display: block;

    border-radius: 4px;

}



.allies-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 1.5rem;

    width: 100%;

    max-width: 800px;

    margin: 0 auto;

}



.ally-card {

    display: flex;

    align-items: center;

    gap: 1rem;

    background: rgba(15, 5, 5, 0.8);

    border: 2px solid #5a4a2a;

    padding: 1.2rem;

    border-radius: 6px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 10px rgba(0,0,0,0.5);

}



.ally-card:hover {

    background: rgba(40, 10, 10, 0.9);

    border-color: var(--color-gold);

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(200, 164, 92, 0.3);

}



.ally-icon {

    font-size: 2.5rem;

    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8));

}



.ally-info {

    text-align: left;

}



.ally-info h4 {

    color: var(--color-gold);

    font-family: var(--font-display);

    font-size: 1.2rem;

    margin: 0 0 0.3rem 0;

    letter-spacing: 1px;

}



.ally-info span {

    color: #aaa;

    font-size: 0.9rem;

    font-family: var(--font-main);

}



@media (max-width: 768px) {

    .vault-title { font-size: 1.8rem; }

    #active-name { font-size: 1.4rem; }

    .item, .item .icon { width: 100px; height: 100px; font-size: 3rem; }

    .allies-grid { grid-template-columns: 1fr; }

    .btn-close-subpage {

        bottom: 1.5rem;

        right: 1.5rem;

        padding: 0.6rem 1.5rem;

        font-size: 0.9rem;

    }

    .article-container {

        padding: 2rem 1.5rem;

    }

    .article-container .subpage-title {

        font-size: 1.8rem;

    }

    .article-body p {

        font-size: 1.05rem;

        text-align: left;

    }

}



#page-revista {

    display: block;

    padding: 3rem 1rem;

    overflow-y: auto;

    text-align: center;

}



.article-container {

    max-width: 800px;

    margin: 0 auto 3rem auto;

    text-align: left;

    background: #fcf9f2;

    color: #1a1a1a;

    padding: 3rem 4rem;

    border: 1px solid #dcd3b6;

    border-radius: 2px;

    font-family: 'Georgia', serif;

    line-height: 1.8;

    box-shadow: 0 10px 40px rgba(0,0,0,0.8);

}



.article-container .subpage-title {

    color: #1a1a1a;

    text-shadow: none;

    font-size: 2.5rem;

    margin-bottom: 0.5rem !important;

    text-align: center;

    border-bottom: 2px solid #1a1a1a;

    padding-bottom: 1rem;

}



.article-meta {

    font-family: var(--font-main);

    color: #666;

    font-size: 0.95rem;

    display: flex;

    flex-direction: column;

    margin-bottom: 2rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid #ddd;

    text-align: center;

    font-style: italic;

}



.article-body p {

    margin-bottom: 1.5rem;

    color: #333;

    font-size: 1.15rem;

    text-align: justify;

}



.article-body > p:nth-of-type(2):first-letter {

    font-size: 4rem;

    font-weight: bold;

    float: left;

    margin-right: 0.5rem;

    line-height: 0.8;

    color: #8a1c1c;

    font-family: var(--font-display);

}



.ambient-sound {

    font-style: italic;

    color: #999 !important;

    text-align: center;

    font-family: var(--font-main);

    font-size: 0.9rem;

}



.speaker-nora {

    color: #8a1c1c;

    font-weight: bold;

    font-family: var(--font-main);

    text-transform: uppercase;

    font-size: 0.9em;

}

.speaker-julian {

    color: #2c4a63;

    font-weight: bold;

    font-family: var(--font-main);

    text-transform: uppercase;

    font-size: 0.9em;

}



.editor-note {

    background: #f0ebe1;

    border-left: 4px solid #8a1c1c;

    padding: 1.5rem;

    margin-top: 3rem;

    font-style: italic;

    color: #222;

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 1rem;

    max-width: 900px;

    margin: 0 auto;

}



.gallery-item {

    border: 2px solid #332;

    border-radius: 4px;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}



.gallery-item:hover {

    border-color: var(--color-gold);

    transform: scale(1.05);

    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.25);

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    filter: sepia(0.3);

    transition: filter 0.3s ease;

}



.gallery-item:hover img {

    filter: sepia(0);

}



.audio-track-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    max-width: 600px;

    margin: 0 auto;

}



.audio-track {

    display: flex;

    align-items: center;

    background: #111;

    border: 1px solid #333;

    padding: 1rem;

    border-radius: 4px;

    transition: all 0.2s ease;

}



.audio-track:hover {

    background: #1a1a1a;

    border-color: #555;

}



.track-btn {

    width: 40px;

    height: 40px;

    background: var(--color-gold);

    color: #000;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    margin-right: 1.5rem;

    cursor: pointer;

    font-size: 1.2rem;

    transition: transform 0.2s;

}



.track-btn:hover {

    transform: scale(1.1);

}



.track-info {

    display: flex;

    flex-direction: column;

    text-align: left;

    flex-grow: 1;

}



.track-title {

    font-family: var(--font-display);

    color: #fff;

    font-size: 1.1rem;

    margin-bottom: 0.2rem;

}



.track-duration {

    font-family: 'Courier New', Courier, monospace;

    color: #777;

    font-size: 0.9rem;

}



.pda-container {

    display: flex;

    gap: 1.5rem;

    max-width: 1200px;

    margin: 0 auto;

    align-items: stretch;

}



.pda-player-col {

    flex: 2.2;

}



.pda-list-col {

    flex: 1.1;

    background: rgba(10, 10, 10, 0.85);

    border: 1px solid #332;

    border-radius: 4px;

    padding: 1.2rem;

    max-height: 480px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

}



.pda-playlist-title {

    font-family: var(--font-display);

    color: var(--color-gold);

    font-size: 0.95rem;

    margin-bottom: 0.8rem;

    border-bottom: 1px solid #332;

    padding-bottom: 0.5rem;

    text-align: left;

    letter-spacing: 1px;

}



.pda-playlist-items {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.pda-video-item {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    padding: 0.6rem;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s ease;

    text-align: left;

    border: 1px solid transparent;

}



.pda-video-item:hover {

    background: rgba(200, 164, 92, 0.08);

    border-color: rgba(200, 164, 92, 0.2);

}



.pda-video-item.active {

    background: rgba(200, 164, 92, 0.15);

    border-color: var(--color-gold);

}



.pda-video-thumb {

    width: 80px;

    height: 45px;

    background: #000;

    border-radius: 2px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border: 1px solid #222;

    overflow: hidden;

}



.pda-video-info {

    display: flex;

    flex-direction: column;

}



.pda-video-name {

    font-family: var(--font-main);

    font-size: 0.9rem;

    color: #fff;

    font-weight: 600;

    line-height: 1.2;

}



.pda-video-duration {

    font-family: var(--font-main);

    font-size: 0.75rem;

    color: #888;

    margin-top: 0.1rem;

}



@media (max-width: 768px) {

    .pda-container {

        flex-direction: column;

    }

    .pda-list-col {

        max-height: 200px;

    }

}



#page-sobremi {

    display: flex;

    flex-direction: column;

    padding: 3rem 1rem;

    overflow-y: auto;

    align-items: center;

}



.passport-container {

    display: flex;

    width: 100%;

    max-width: 900px;

    background: #472d1a;

    border: 8px solid #2d1c10;

    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.6);

    padding: 1.5rem;

    gap: 1.5rem;

    margin: 2rem auto;

    position: relative;

}



.passport-container::after {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 6px;

    height: 100%;

    background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.6));

    box-shadow: 0 0 10px rgba(0,0,0,0.5);

    z-index: 10;

}



.passport-page {

    flex: 1;

    background: #fdfaf0;

    border-radius: 4px;

    padding: 2.2rem;

    color: #3d2f26;

    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

    position: relative;

    overflow: hidden;

    min-height: 480px;

}



.left-page {

    border-right: 1px solid #e0d9c5;

}



.passport-header-page {

    display: flex;

    flex-direction: column;

    align-items: center;

    border-bottom: 2px double #8c7b65;

    padding-bottom: 0.8rem;

    margin-bottom: 1.5rem;

}



.passport-country {

    font-family: var(--font-display);

    font-size: 1.1rem;

    font-weight: 700;

    letter-spacing: 2px;

    color: #6a4f3b;

}



.passport-doc {

    font-family: var(--font-main);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 1px;

    color: #8c7b65;

    margin-top: 2px;

}



.passport-body {

    display: flex;

    gap: 1.5rem;

}



.passport-photo-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.8rem;

}



.passport-photo {

    width: 110px;

    height: 130px;

    background: #e0d9c5;

    border: 3px solid #8c7b65;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);

}



.passport-stamp {

    font-family: var(--font-display);

    font-size: 0.8rem;

    font-weight: 700;

    color: rgba(140, 20, 20, 0.6);

    border: 2px dashed rgba(140, 20, 20, 0.6);

    padding: 0.3rem 0.6rem;

    border-radius: 4px;

    transform: rotate(-12deg);

    letter-spacing: 1px;

    text-transform: uppercase;

}



.passport-details {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 0.8rem;

    text-align: left;

}



.detail-field {

    display: flex;

    flex-direction: column;

    border-bottom: 1px solid rgba(140, 123, 101, 0.3);

    padding-bottom: 0.3rem;

}



.detail-field label {

    font-family: var(--font-main);

    font-size: 0.65rem;

    font-weight: 700;

    color: #8c7b65;

    letter-spacing: 0.5px;

}



.detail-field span {

    font-family: var(--font-main);

    font-size: 0.95rem;

    font-weight: 600;

    color: #403024;

    text-transform: uppercase;

    margin-top: 1px;

}



.right-page {

    border-left: 1px solid #fff;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding-top: 2.5rem;

}



.passport-watermark {

    position: absolute;

    bottom: -20px;

    right: -10px;

    font-family: var(--font-display);

    font-size: 10rem;

    font-weight: 700;

    color: rgba(140, 123, 101, 0.05);

    pointer-events: none;

    user-select: none;

}



.passport-title {

    font-family: var(--font-display);

    font-size: 1.4rem;

    color: #6a4f3b;

    margin-bottom: 1.5rem;

    letter-spacing: 1px;

    text-align: left;

    border-bottom: 1px solid rgba(140, 123, 101, 0.3);

    padding-bottom: 0.5rem;

}



.passport-text {

    font-family: 'Sofia Sans Semi Condensed', var(--font-main);

    font-size: 1.05rem;

    line-height: 1.5;

    color: #4c3c32;

    margin-bottom: 1rem;

    text-align: justify;

    text-indent: 1.5rem;

}



@media (max-width: 900px) {

    .passport-container {

        flex-direction: column;

        border-right: 8px solid #2d1c10;

        padding: 1rem;

    }

    .passport-container::after {

        display: none;

    }

    .passport-page {

        min-height: auto;

        padding: 1.5rem;

    }

    .passport-body {

        flex-direction: column;

        align-items: center;

    }

    .passport-details {

        width: 100%;

    }

}



/* ==========================================================================

   Comments section

   ========================================================================== */

.single-comments-wrap {

    max-width: 800px;

    margin: 4rem auto 0;

    padding: 3rem 2rem;

    background: #0d0d0d;

    border: 1px solid rgba(200, 164, 92, 0.15);

    border-radius: 4px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



.comments-title,

.comment-reply-title {

    font-family: var(--font-display);

    color: var(--color-gold);

    font-size: 1.6rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 2rem;

    border-bottom: 1px solid rgba(200, 164, 92, 0.2);

    padding-bottom: 0.8rem;

}



.comment-list {

    list-style: none;

    padding: 0;

    margin: 0 0 3rem;

}



.comment-list .comment {

    margin-bottom: 2rem;

    padding-bottom: 2rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.comment-body {

    display: flex;

    gap: 1.5rem;

    position: relative;

}



.comment-meta {

    flex-shrink: 0;

}



.comment-meta img.avatar {

    border-radius: 4px;

    border: 1.5px solid var(--color-gold);

    background: #151515;

}



.comment-content {

    flex-grow: 1;

    color: #cccccc;

    font-size: 1rem;

    line-height: 1.6;

}



.comment-metadata {

    margin-bottom: 0.5rem;

    font-size: 0.85rem;

    color: #888888;

}



.comment-author .fn {

    font-family: var(--font-display);

    color: var(--color-gold);

    font-weight: 700;

    font-style: normal;

    font-size: 1.05rem;

}



.comment-metadata a {

    color: #888888;

    text-decoration: none;

    transition: color 0.2s;

}



.comment-metadata a:hover {

    color: var(--color-gold);

}



.comment-reply-link {

    display: inline-block;

    font-family: var(--font-display);

    color: var(--color-gold);

    font-size: 0.85rem;

    text-transform: uppercase;

    text-decoration: none;

    border: 1px solid rgba(200, 164, 92, 0.3);

    padding: 0.3rem 0.8rem;

    border-radius: 3px;

    margin-top: 0.5rem;

    transition: all 0.2s;

}



.comment-reply-link:hover {

    background: var(--color-gold);

    color: #0a0a0a;

}



.comment-respond {

    margin-top: 3rem;

}



.comment-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.comment-form label {

    display: block;

    font-family: var(--font-display);

    color: var(--color-gold);

    font-size: 0.9rem;

    margin-bottom: 0.5rem;

    text-transform: uppercase;

}



.comment-form textarea,

.comment-form input[type="text"],

.comment-form input[type="email"],

.comment-form input[type="url"] {

    width: 100%;

    background: #121212;

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #ffffff;

    padding: 0.8rem;

    border-radius: 4px;

    font-family: inherit;

    font-size: 1rem;

    transition: border-color 0.2s, box-shadow 0.2s;

}



.comment-form textarea:focus,

.comment-form input:focus {

    border-color: var(--color-gold);

    box-shadow: 0 0 8px rgba(200, 164, 92, 0.2);

    outline: none;

}



.submit-comment-btn {

    align-self: flex-start;

    cursor: pointer;

    border: none;

}



.no-comments {

    text-align: center;

    color: #777;

    font-style: italic;

    margin: 2rem 0;

}



/* Cassette Deck Styles */

.cassette-deck {

    max-width: 480px;

    width: 100%;

    margin: 2rem auto;

    background: #111;

    border: 2px solid var(--color-gold);

    border-radius: 8px;

    padding: 24px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(200, 164, 92, 0.05);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}



.deck-lcd {

    width: 100%;

    background: #0d1a12;

    border: 2px solid #1a2f22;

    border-radius: 4px;

    padding: 12px;

    font-family: monospace;

    color: #39ff14;

    text-shadow: 0 0 4px rgba(57, 255, 20, 0.6);

    font-size: 0.95rem;

    letter-spacing: 2px;

    text-align: center;

    box-shadow: inset 0 0 10px rgba(0,0,0,0.9);

    line-height: 1.4;

}



.lcd-line-1 { font-size: 0.8rem; opacity: 0.85; margin-bottom: 2px; }

.lcd-line-2 { font-weight: bold; margin-bottom: 2px; }

.lcd-line-3 { color: var(--color-gold); text-shadow: 0 0 4px rgba(200, 164, 92, 0.4); }



.cassette-tape {

    width: 240px;

    height: auto;

}



.tape-svg {

    width: 100%;

    height: auto;

    display: block;

}



.tape-reel {

    transform-origin: center;

    animation: tapeSpin 6s linear infinite;

}



.reel-left {

    transform-origin: 105px 80px;

}



.reel-right {

    transform-origin: 195px 80px;

}



@keyframes tapeSpin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



.deck-controls {

    display: flex;

    gap: 15px;

    width: 100%;

    justify-content: center;

}



.deck-btn {

    flex: 1;

    max-width: 120px;

    background: #181818;

    border: 1px solid #444;

    color: #888;

    padding: 8px 16px;

    border-radius: 4px;

    font-family: var(--font-display);

    font-size: 0.85rem;

    letter-spacing: 1px;

    cursor: not-allowed;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

}



.deck-btn.btn-rec {

    color: rgba(255, 0, 0, 0.4);

}



.rec-dot {

    width: 8px;

    height: 8px;

    background-color: currentColor;

    border-radius: 50%;

    display: inline-block;

}



/* Floating Music Player */

.floating-spotify {

    position: fixed;

    bottom: 20px;

    left: 20px;

    z-index: 9999;

    display: flex;

    align-items: center;

    gap: 12px;

    transition: all 0.3s ease;

    opacity: 0;

    pointer-events: none;

    visibility: hidden;

}



.floating-spotify.show-widget {

    opacity: 1;

    pointer-events: auto;

    visibility: visible;

}



.spotify-toggle-btn {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #111;

    border: 2px solid var(--color-gold);

    color: var(--color-gold);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.5);

    transition: all 0.3s ease;

    flex-shrink: 0;

}



.spotify-toggle-btn:hover {

    background: var(--color-gold);

    color: #000;

    box-shadow: 0 0 15px rgba(200, 164, 92, 0.6);

    transform: scale(1.05);

}



.spotify-card {

    position: absolute;

    bottom: 65px;

    left: 0;

    max-height: 0;

    width: 300px;

    overflow: hidden;

    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;

    opacity: 0;

    pointer-events: none;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.8);

    border: 1px solid var(--color-gold);

}



.floating-spotify.active .spotify-card {

    max-height: 280px;

    opacity: 1;

    pointer-events: auto;

}



.floating-spotify.active .spotify-toggle-btn {

    background: var(--color-gold);

    color: #000;

}



/* Mini Media Bar Styles */

.mini-media-bar {

    background: rgba(15, 15, 15, 0.95);

    border: 1px solid var(--color-gold);

    border-radius: 25px;

    height: 50px;

    display: flex;

    align-items: center;

    padding: 0 16px;

    gap: 12px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.5);

    min-width: 250px;

    width: auto;

    max-width: 400px;

    overflow: hidden;

    transition: all 0.3s ease;

}



.media-control-btn {

    background: transparent;

    border: none;

    color: #888;

    font-size: 1rem;

    cursor: pointer;

    transition: color 0.2s, transform 0.1s;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



.media-control-btn.active {

    color: var(--color-gold);

    text-shadow: 0 0 8px rgba(200, 164, 92, 0.6);

}



/* Volume Wrap & Slide-out Slider */

.media-volume-wrap {

    position: relative;

    display: flex;

    align-items: center;

}



.media-volume-slider-container {

    width: 0;

    overflow: hidden;

    transition: width 0.3s ease;

    display: flex;

    align-items: center;

}



.media-volume-wrap:hover .media-volume-slider-container,

.media-volume-wrap:focus-within .media-volume-slider-container {

    width: 70px;

    margin-left: 6px;

}



#media-volume-slider {

    width: 70px;

    height: 4px;

    -webkit-appearance: none;

    background: #333;

    outline: none;

    border-radius: 2px;

    cursor: pointer;

}



#media-volume-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--color-gold);

    cursor: pointer;

    box-shadow: 0 0 4px #000;

}



/* Close button for floating player */

.btn-close-player {

    background: transparent;

    border: none;

    color: #666;

    font-size: 0.85rem;

    cursor: pointer;

    padding: 0 0 0 4px;

    margin-left: auto;

    transition: color 0.2s, transform 0.15s;

    line-height: 1;

}



.btn-close-player:hover {

    color: var(--color-gold);

    transform: scale(1.2);

}



.media-control-btn:hover {

    color: var(--color-gold);

    transform: scale(1.15);

}



/* Playlist styles */

.media-playlist {

    background: rgba(10, 10, 10, 0.95);

    height: 278px;

    overflow-y: auto;

    padding: 8px 0;

}



/* Custom scrollbar for playlist */

.media-playlist::-webkit-scrollbar {

    width: 6px;

}



.media-playlist::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.3);

}



.media-playlist::-webkit-scrollbar-thumb {

    background: var(--color-gold-dark);

    border-radius: 3px;

}



.playlist-item {

    display: flex;

    align-items: center;

    padding: 8px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.78rem;

    color: #bbb;

    font-family: monospace;

}



.playlist-item:hover {

    background: rgba(200, 164, 92, 0.08);

    color: var(--color-gold);

}



.playlist-item.active {

    background: rgba(200, 164, 92, 0.15);

    color: var(--color-gold);

    border-left: 3px solid var(--color-gold);

    padding-left: 13px; /* account for border */

}



.playlist-item .track-idx {

    width: 24px;

    color: #555;

    flex-shrink: 0;

}



.playlist-item.active .track-idx {

    color: var(--color-gold);

}



.playlist-item .track-name {

    flex: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.media-track-title {

    flex: 1;

    font-family: monospace;

    font-size: 0.72rem;

    color: var(--color-gold);

    white-space: nowrap;

    overflow: hidden;

    position: relative;

    width: 120px;

}



.media-track-title span {

    display: inline-block;

    padding-left: 100%;

    animation: marquee 12s linear infinite;

}



@keyframes marquee {

    0% { transform: translate3d(0, 0, 0); }

    100% { transform: translate3d(-100%, 0, 0); }

}



body.inventory-active .floating-spotify {

    opacity: 0;

    pointer-events: none;

    visibility: hidden;

}



.btn-activate-player {

    background: #111;

    border: 2px solid var(--color-gold);

    color: var(--color-gold);

    padding: 12px 30px;

    font-family: var(--font-display);

    font-size: 1rem;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: all 0.3s ease;

    border-radius: 4px;

    box-shadow: 0 4px 15px rgba(200, 164, 92, 0.2);

    text-transform: uppercase;

}



.btn-activate-player:hover {

    background: var(--color-gold);

    color: #000;

    box-shadow: 0 0 20px rgba(200, 164, 92, 0.6);

    transform: translateY(-2px);

}



/* ==========================================================================

   19. SEARCH OVERLAY & LUPA STYLE

   ========================================================================== */



/* Search Toggle Button in Header */

.search-toggle-btn {

    background: transparent;

    border: none;

    color: var(--color-text-muted);

    cursor: pointer;

    padding: 8px;

    margin-right: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    border-radius: 50%;

}



.search-toggle-btn:hover {

    color: var(--color-gold);

    transform: scale(1.1);

    background: rgba(255, 255, 255, 0.05);

}



/* Fullscreen Search Overlay */

.search-overlay {

    position: fixed;

    inset: 0;

    z-index: 100000; /* Ensure it is above the inventory */

    background: rgba(5, 5, 5, 0.94);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    pointer-events: none;

    visibility: hidden;

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

}



.search-overlay.active {

    opacity: 1;

    pointer-events: auto;

    visibility: visible;

}



/* Close Button */

.search-overlay-close {

    position: absolute;

    top: 30px;

    right: 40px;

    background: transparent;

    border: none;

    color: #888;

    font-size: 2.2rem;

    cursor: pointer;

    transition: all 0.3s ease;

    line-height: 1;

}



.search-overlay-close:hover {

    color: var(--color-gold);

    transform: rotate(90deg) scale(1.1);

}



/* Inner Wrap */

.search-overlay-inner {

    width: 100%;

    max-width: 750px;

    padding: 40px 20px;

    transform: translateY(30px);

    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

}



.search-overlay.active .search-overlay-inner {

    transform: translateY(0);

}



.search-overlay-title {

    font-family: var(--font-display);

    font-size: 1.6rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #fff;

    text-align: center;

    margin-bottom: 25px;

    font-weight: 700;

}



/* Search Form */

.search-overlay-form {

    width: 100%;

    margin-bottom: 35px;

}



.search-input-wrap {

    position: relative;

    display: flex;

    align-items: center;

    border-bottom: 2px solid rgba(255, 255, 255, 0.1);

    transition: border-color 0.3s ease;

}



.search-input-wrap:focus-within {

    border-color: var(--color-gold);

}



.search-overlay .search-field {

    width: 100%;

    background: transparent;

    border: none;

    color: #fff;

    font-size: 1.5rem;

    padding: 15px 60px 15px 0;

    outline: none;

    font-family: var(--font-main);

}



.search-overlay .search-field::placeholder {

    color: #555;

    font-style: italic;

}



.search-overlay .search-submit {

    position: absolute;

    right: 0;

    background: transparent;

    border: none;

    color: #777;

    cursor: pointer;

    padding: 10px;

    transition: color 0.3s ease, transform 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}



.search-overlay .search-submit:hover {

    color: var(--color-gold);

    transform: scale(1.1);

}



/* Suggestion Tags */

.search-suggestions {

    text-align: center;

}



.suggestions-title {

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: #555;

    margin-bottom: 15px;

    font-weight: 600;

}



.suggestion-tags {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

}



.suggestion-tag {

    font-size: 0.78rem;

    color: var(--color-text-muted);

    padding: 6px 14px;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.07);

    text-decoration: none;

    transition: all 0.3s ease;

}



.suggestion-tag:hover {

    border-color: var(--color-gold);

    color: var(--color-gold);

    background: rgba(200, 164, 92, 0.05);

}



/* Admin Search Action Button */

.admin-search-options {

    margin-top: 20px;

    display: flex;

    justify-content: center;

}



.admin-action-btn {

    background: rgba(200, 164, 92, 0.08);

    border: 1px solid rgba(200, 164, 92, 0.2);

    color: var(--color-gold);

    padding: 8px 18px;

    font-family: var(--font-main);

    font-size: 0.8rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    letter-spacing: 1px;

    text-transform: uppercase;

    display: flex;

    align-items: center;

    gap: 8px;

}



.admin-action-btn:hover,

.admin-action-btn.active {

    background: var(--color-gold);

    color: #000;

    border-color: var(--color-gold);

    box-shadow: 0 0 15px rgba(200, 164, 92, 0.4);

}



/* Mobile search responsive overrides */

@media (max-width: 768px) {

    .search-overlay-close {

        top: 20px;

        right: 20px;

        font-size: 1.8rem;

    }

    .search-overlay-title {

        font-size: 1.3rem;

    }

    .search-overlay .search-field {

        font-size: 1.25rem;

    }

    .search-toggle-btn {

        margin-right: 8px;

        padding: 6px;

    }

}





/* ==========================================================================

   TIMELINE / CORCHO — CORKBOARD INVESTIGATION PANEL

   Namespaced under #page-timeline to avoid style collisions.

   ========================================================================== */



/* --- Design System Variables --- */

#page-timeline {

    --folder-manila-bg: #e2cb9f;

    --folder-manila-border: #7a5c36;

    --tab-inactive: #cbb287;

    --paper-card: #fdfaf3;

    --text-dark: #1a1510;

    --postit-cyan: #5cd0e6;

    --postit-pink: #f06ca0;

    --postit-green: #7be098;

    --yarn-red: #dc2626;

    --yarn-red-dark: #991b1b;

}



/* --- Timeline Subpage Panel Overrides (Full Viewport Scrollable) --- */

#page-timeline.subpage {

    position: fixed;

    top: 0; left: 0;

    width: 100vw; height: 100vh;

    display: block;

    justify-content: flex-start;

    align-items: stretch;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 25px 0 120px 0;

    z-index: 9999;

    text-align: left;

    background-color: rgba(10, 10, 10, 0.96);

}



/* --- Corkboard Wrapper (21:9 Ultrawide with Drop-In Entrance Animation) --- */

#page-timeline .corkboard-wrapper {

    width: 96%;

    max-width: 2400px;

    margin: 0 auto 40px auto;

    background: url('img/corkboard-bg.webp') repeat #8a572a;

    background-size: 800px auto;

    border: 18px solid #341e12;

    border-image: linear-gradient(to bottom, #4a2d1b, #261309) 1;

    border-radius: 6px;

    box-shadow:

        inset 0 0 100px rgba(0,0,0,0.85),

        0 30px 80px rgba(0,0,0,0.9);

    position: relative;

    padding: 40px 45px 55px 45px;

    min-height: 85vh;

}



#page-timeline.active .corkboard-wrapper {

    animation: corkboardDropIn 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;

}



@keyframes corkboardDropIn {

    0% {

        opacity: 0;

        transform: translateY(-90px) scale(0.96);

    }

    100% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



#page-timeline .corkboard-wrapper::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    box-shadow: inset 0 0 120px rgba(0,0,0,0.7);

    pointer-events: none;

    z-index: 2;

}



/* --- Board Header --- */

#page-timeline .board-header {

    text-align: center;

    margin-bottom: 28px;

    position: relative;

    z-index: 10;

}



#page-timeline .board-title {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-size: 2.8rem;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #fff;

    text-shadow: 0 4px 15px rgba(0,0,0,0.95), 0 0 25px rgba(200,164,92,0.4);

}



#page-timeline .board-subtitle {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    color: #f7e1a0;

    font-size: 1.05rem;

    letter-spacing: 3px;

    margin-top: 8px;

    text-transform: uppercase;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.9);

}



/* --- Guide Label --- */

#page-timeline .folder-guide-label {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 0.95rem;

    color: #ffe082;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    gap: 12px;

    position: relative;

    z-index: 10;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);

}



#page-timeline .folder-guide-label::after {

    content: '';

    flex: 1;

    height: 2px;

    background: linear-gradient(90deg, rgba(255, 224, 130, 0.7), transparent);

}



/* --- Unified Banner Note --- */

#page-timeline .unified-banner-note {

    background: #fce882;

    color: #2b1f0d;

    border: 2px solid #b8860b;

    padding: 8px 14px;

    border-radius: 4px;

    font-weight: 700;

    font-size: 0.85rem;

    letter-spacing: 0.5px;

    margin-bottom: 22px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.18);

    text-transform: uppercase;

    display: flex;

    align-items: center;

    gap: 10px;

}



/* --- Manila Folder Tabs --- */

#page-timeline .folder-tabs-header {

    display: flex;

    gap: 8px;

    position: relative;

    z-index: 10;

    padding-left: 5px;

    flex-wrap: wrap;

}



#page-timeline .tab-btn {

    flex: 1;

    min-width: 200px;

    background: var(--tab-inactive);

    color: #1a1510;

    padding: 14px 18px;

    border-radius: 8px 8px 0 0;

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 1rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    border: 2px solid var(--folder-manila-border);

    border-bottom: none;

    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 -4px 10px rgba(0,0,0,0.3);

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: all 0.25s ease;

    user-select: none;

}



#page-timeline .tab-window-label {

    background: #fff;

    border: 1px solid rgba(0,0,0,0.3);

    padding: 3px 8px;

    border-radius: 3px;

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 0.78rem;

    color: #111;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);

}



#page-timeline .tab-btn:hover {

    background: #d8be92;

    transform: translateY(-4px);

}



#page-timeline .tab-btn.active {

    background: var(--folder-manila-bg);

    transform: translateY(0);

    z-index: 20;

    border-color: #5c3e1e;

    box-shadow:

        inset 0 2px 4px rgba(255,255,255,0.6),

        0 -6px 15px rgba(0,0,0,0.4);

    padding-bottom: 18px;

    margin-bottom: -3px;

}



/* --- Opened Manila Folder & Red Yarn Layer --- */

#page-timeline .opened-manila-folder {

    background: var(--folder-manila-bg);

    border: 3px solid #7a5c36;

    border-radius: 6px;

    padding: 45px 40px;

    position: relative;

    z-index: 15;

    box-shadow:

        0 25px 60px rgba(0,0,0,0.7),

        inset 0 0 35px rgba(139,94,60,0.2);

    background-image: radial-gradient(rgba(139,94,60,0.06) 1px, transparent 0);

    background-size: 20px 20px;

    min-height: 550px;

}



/* Dynamic Adaptive SVG Layer — z-index: 20 (above paper 15, below pin heads 25) */

#page-timeline .yarn-overlay-svg {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

    pointer-events: none;

    z-index: 20;

    overflow: visible;

}



#page-timeline .yarn-overlay-svg path.string-main {

    fill: none !important;

    stroke: var(--yarn-red);

    stroke-width: 2.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    opacity: 0.6;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));

}



#page-timeline .yarn-overlay-svg circle.pin-loop {

    fill: none;

    stroke: var(--yarn-red-dark);

    stroke-width: 2.8;

    opacity: 0.85;

    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));

}



#page-timeline .yarn-overlay-svg path.tail-string {

    fill: none;

    stroke: var(--yarn-red);

    stroke-width: 2.5;

    stroke-linecap: round;

    opacity: 0.7;

    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));

}



/* Era Panels */

#page-timeline .era-folder-content {

    display: none;

    position: relative;

    z-index: 15;

    animation: tlFolderOpen 0.35s ease-out forwards;

}



#page-timeline .era-folder-content.active {

    display: block;

}



@keyframes tlFolderOpen {

    from { opacity: 0; transform: translateY(10px); }

    to   { opacity: 1; transform: translateY(0); }

}



/* --- Cards Grid (21:9 Ultrawide Responsive) --- */

#page-timeline .cards-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 36px 30px;

    align-items: start;

}



/* --- Document Card --- */

#page-timeline .card-document {

    background: var(--paper-card);

    color: var(--text-dark);

    padding: 24px;

    border-radius: 3px;

    box-shadow:

        0 12px 30px rgba(0,0,0,0.4),

        0 2px 6px rgba(0,0,0,0.2);

    border: 1px solid #dcd0b9;

    position: relative;

    z-index: 15;

    transition: box-shadow 0.25s ease, border-color 0.25s ease, z-index 0.25s ease;

    cursor: pointer;

}



#page-timeline .card-document:hover {

    box-shadow:

        0 22px 50px rgba(0,0,0,0.65),

        0 0 22px rgba(200,164,92,0.5);

    border-color: #c8a45c;

    z-index: 40;

}



/* --- Chronological Step Badge --- */

#page-timeline .step-num-badge {

    position: absolute;

    top: 14px; left: 14px;

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 0.82rem;

    color: #fff;

    background: #8c4c1d;

    padding: 2px 7px;

    border-radius: 3px;

    letter-spacing: 1px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.3);

}



/* --- Pushpins (z-index 25, above yarn 20) --- */

#page-timeline .pin-tack-top {

    position: absolute;

    top: -12px;

    left: 50%;

    transform: translateX(-50%);

    width: 24px; height: 24px;

    background: radial-gradient(circle at 35% 35%, #ff5252, #990000);

    border-radius: 50%;

    box-shadow:

        0 5px 10px rgba(0,0,0,0.6),

        inset 0 -2px 4px rgba(0,0,0,0.5),

        inset 0 2px 4px rgba(255,255,255,0.7);

    z-index: 25;

    border: 1px solid #ff9999;

}



#page-timeline .pin-tack-top.brass {

    background: radial-gradient(circle at 35% 35%, #ffe082, #b8860b);

    border-color: #fff3b0;

}



/* --- Card Inner Elements --- */

#page-timeline .doc-year {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 1.4rem;

    color: #8c4c1d;

    letter-spacing: 1px;

    margin-bottom: 4px;

    margin-top: 8px;

}



#page-timeline .doc-title {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 1.22rem;

    line-height: 1.25;

    color: #1a1510;

    margin-bottom: 14px;

    text-transform: uppercase;

}



/* --- Polaroid Photo --- */

#page-timeline .polaroid-box {

    background: #fff;

    padding: 9px 9px 26px 9px;

    box-shadow: 0 5px 12px rgba(0,0,0,0.25);

    margin-bottom: 14px;

    transform: rotate(-1deg);

}



#page-timeline .polaroid-box img {

    width: 100%; height: 165px;

    object-fit: cover;

    display: block;

    filter: contrast(1.05) sepia(0.1);

}



#page-timeline .polaroid-caption-text {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 500;

    font-size: 0.88rem;

    color: #44372a;

    text-align: center;

    margin-top: 6px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



#page-timeline .doc-excerpt {

    font-size: 0.92rem;

    line-height: 1.55;

    color: #383027;

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 500;

    margin-bottom: 14px;

}



/* --- Post-it Notes --- */

#page-timeline .postit-note {

    padding: 12px 14px;

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 0.9rem;

    line-height: 1.35;

    letter-spacing: 0.5px;

    border-radius: 2px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.25);

    margin-top: 12px;

    transform: rotate(2deg);

    border-left: 4px solid rgba(0,0,0,0.2);

}



#page-timeline .postit-note.cyan  { background: var(--postit-cyan); color: #0f172a; }

#page-timeline .postit-note.pink  { background: var(--postit-pink); color: #fff; transform: rotate(-2deg); }

#page-timeline .postit-note.green { background: var(--postit-green); color: #064e3b; transform: rotate(1.5deg); }



/* --- Inspect Folder Link --- */

#page-timeline .inspect-folder-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 0.9rem;

    color: #8c4c1d;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-top: 16px;

    transition: color 0.2s;

}



#page-timeline .inspect-folder-link:hover { color: #111; }



/* --- Dossier Modal --- */

#page-timeline .modal-overlay {

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0,0,0,0.88);

    backdrop-filter: blur(14px);

    z-index: 2000;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



#page-timeline .modal-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



#page-timeline .dossier-modal-content {

    background: #f7eee0;

    color: #221c16;

    max-width: 820px; width: 100%;

    max-height: 88vh;

    overflow-y: auto;

    border-radius: 6px;

    box-shadow: 0 30px 80px rgba(0,0,0,0.95);

    border: 14px solid #423223;

    padding: 42px;

    position: relative;

    transform: scale(0.9) translateY(20px);

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



#page-timeline .modal-overlay.active .dossier-modal-content {

    transform: scale(1) translateY(0);

}



#page-timeline .close-modal-btn {

    position: absolute;

    top: 18px; right: 22px;

    background: #8c4c1d;

    color: #fff;

    border: none;

    width: 38px; height: 38px;

    border-radius: 50%;

    font-size: 1.3rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 6px rgba(0,0,0,0.4);

    transition: background 0.2s;

}



#page-timeline .close-modal-btn:hover { background: #b52b2b; }



#page-timeline .dossier-header-meta {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 700;

    font-size: 0.9rem;

    color: #8c4c1d;

    letter-spacing: 1px;

    border-bottom: 2px dashed #b8a686;

    padding-bottom: 10px;

    margin-bottom: 20px;

    text-transform: uppercase;

}



#page-timeline .dossier-main-title {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-size: 2.3rem;

    font-weight: 700;

    color: #1a1510;

    text-transform: uppercase;

    line-height: 1.2;

    margin-bottom: 18px;

}



#page-timeline .dossier-body-text {

    font-size: 1.02rem;

    line-height: 1.7;

    color: #2b231a;

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 500;

}



#page-timeline .dossier-body-text p { margin-bottom: 16px; }



#page-timeline .voice-recorder-widget {

    background: #1c1712;

    color: var(--color-accent, #c3a355);

    padding: 18px 22px;

    border-radius: 6px;

    margin: 24px 0;

    display: flex;

    align-items: center;

    gap: 16px;

    border: 2px solid var(--color-accent, #c3a355);

    box-shadow: inset 0 0 14px rgba(0,0,0,0.9);

}



#page-timeline .tape-play-button {

    background: var(--color-accent, #c3a355);

    color: #111;

    border: none;

    width: 44px; height: 44px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 1.1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    transition: transform 0.2s;

}



#page-timeline .tape-play-button:hover { transform: scale(1.08); background: #fff; }



#page-timeline .tape-details {

    font-family: var(--font-din, 'Sofia Sans Semi Condensed', sans-serif);

    font-weight: 500;

    font-size: 0.9rem;

}



/* --- Timeline Subpage Content Overrides --- */

#page-timeline .timeline-subpage-content {

    padding: 0;

    max-width: none;

}



/* --- Responsive --- */

@media (max-width: 992px) {

    #page-timeline .corkboard-wrapper {

        padding: 20px;

        border-width: 10px;

        width: 100%;

    }

    #page-timeline .board-title { font-size: 2rem; }

    #page-timeline .tab-btn { min-width: 140px; padding: 10px; font-size: 0.85rem; }

    #page-timeline .yarn-overlay-svg { display: none; }

}











   16. RAIDERSZONE VINTAGE TRIBUTE STYLES (Version 3.5.1)


   ========================================================================== */


:root {


    --rz-blue: #83b5ca;


    --rz-blue-dark: #5b879a;


    --rz-blue-glow: rgba(131, 181, 202, 0.2);


}





/* 1. Article Container Modifier (post_class injects tag-raiderszone) */


.single-post-content.tag-raiderszone {


    border-color: rgba(131, 181, 202, 0.2);


    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(131, 181, 202, 0.05);


    background-color: #0f181c;


    background-image: 


        radial-gradient(at top right, rgba(131, 181, 202, 0.08) 0%, transparent 60%),


        radial-gradient(at bottom left, rgba(131, 181, 202, 0.04) 0%, transparent 50%);


    position: relative;


    overflow: hidden;


}





/* 2. Vintage Header Banner (Homage) */


.rz-tribute-banner {


    background: var(--rz-blue);


    padding: 15px 30px;


    display: flex;


    align-items: center;


    justify-content: space-between;


    border-bottom: 3px solid rgba(0, 0, 0, 0.15);


    box-sizing: border-box;


    margin: -60px -60px 40px -60px; /* Pull to the top and sides of the container's 60px padding */


}





.rz-logo-wrapper {


    display: flex;


    align-items: center;


    gap: 15px;


}





.rz-logo-img {


    height: 38px;


    width: auto;


    display: block;


    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));


}





.rz-banner-title {


    font-family: 'Sofia Sans Semi Condensed', sans-serif;


    font-weight: 800;


    font-size: 1rem;


    letter-spacing: 2px;


    color: #ffffff;


    text-transform: uppercase;


    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);


}





.rz-banner-badge {


    background: rgba(255, 255, 255, 0.2);


    color: #ffffff;


    font-family: 'Sofia Sans Semi Condensed', sans-serif;


    font-weight: 700;


    font-size: 0.75rem;


    padding: 4px 10px;


    border-radius: 20px;


    letter-spacing: 1px;


    text-transform: uppercase;


    border: 1px solid rgba(255, 255, 255, 0.3);


    text-shadow: 0 1px 2px rgba(0,0,0,0.2);


}





/* 3. Vintage Warning Note */


.rz-warning-note {


    background: rgba(131, 181, 202, 0.08);


    border: 1px solid rgba(131, 181, 202, 0.25);


    border-left: 4px solid var(--rz-blue);


    border-radius: 6px;


    padding: 18px 22px;


    margin-bottom: 30px;


    box-sizing: border-box;


}





.rz-warning-title {


    font-family: 'Sofia Sans Semi Condensed', sans-serif;


    font-weight: 700;


    color: var(--rz-blue);


    text-transform: uppercase;


    margin-top: 0;


    margin-bottom: 6px;


    letter-spacing: 1px;


    font-size: 0.95rem;


    display: flex;


    align-items: center;


    gap: 8px;


}





.rz-warning-text {


    margin: 0;


    font-size: 0.92rem;


    line-height: 1.5;


    color: rgba(255, 255, 255, 0.75);


}





/* 4. Vintage Footer Watermark */


.rz-tribute-footer {


    background: rgba(0, 0, 0, 0.4);


    border-top: 1px solid rgba(255, 255, 255, 0.05);


    padding: 15px 40px;


    font-family: 'Sofia Sans Semi Condensed', sans-serif;


    font-size: 0.8rem;


    color: rgba(255, 255, 255, 0.4);


    letter-spacing: 1px;


    text-transform: uppercase;


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin: 40px -60px -60px -60px; /* Pull to bottom and sides of the container's 60px padding */


}





/* Responsive adjustments for banner & footer */


@media (max-width: 1024px) {


    .tag-raiderszone .rz-tribute-banner {


        margin: -45px -45px 30px -45px;


    }


    .tag-raiderszone .rz-tribute-footer {


        margin: 30px -45px -45px -45px;


    }


}





@media (max-width: 768px) {


    .rz-tribute-banner {


        padding: 12px 20px;


        margin: -30px -30px 20px -30px;


    }


    .rz-logo-img {


        height: 30px;


    }


    .rz-banner-title {


        font-size: 0.85rem;


    }


    .rz-banner-badge {


        font-size: 0.65rem;


        padding: 2px 8px;


    }


    .rz-tribute-footer {


        padding: 15px 20px;


        margin: 20px -30px -30px -30px;


        font-size: 0.75rem;


        flex-direction: column;


        gap: 5px;


        text-align: center;


    }


}





@media (max-width: 480px) {


    .tag-raiderszone .rz-tribute-banner {


        margin: -20px -20px 20px -20px;


    }


    .tag-raiderszone .rz-tribute-footer {


        margin: 20px -20px -20px -20px;


    }


}





/* 5. Accents Override for RaidersZone posts */


.tag-raiderszone .cat-badge {


    background: rgba(131, 181, 202, 0.15) !important;


    border-color: var(--rz-blue) !important;


    color: var(--rz-blue) !important;


    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;


}





.tag-raiderszone .cat-badge:hover {


    background: var(--rz-blue) !important;


    color: #0d232e !important;


}





.tag-raiderszone .entry-content a {


    color: var(--rz-blue);


    border-color: var(--rz-blue);


}





.tag-raiderszone .entry-content a:hover {


    color: #ffffff;


}





/* 6. RaidersZone Grid Card Styles (Search Results, Category Archives, Homepage Grid) */


.post-grid article.tag-raiderszone {


    position: relative;


    border-color: rgba(131, 181, 202, 0.15) !important;


    background-color: #0f181c !important; /* Soft dark-blue tint for the card background */


    transition: all 0.3s ease;


}





.post-grid article.tag-raiderszone:hover {


    border-color: var(--rz-blue) !important;


    box-shadow: 0 5px 15px rgba(131, 181, 202, 0.25) !important;


}





/* Float a beautiful vintage RZ logo badge in the top-right corner of the cards */


.post-grid article.tag-raiderszone::after {


    content: "";


    position: absolute;


    top: 15px;


    right: 15px;


    width: 36px;


    height: 36px;


    background-image: url('img/RZ_Minilogo.png');


    background-size: contain;


    background-repeat: no-repeat;


    background-position: center;


    z-index: 10;


    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) opacity(0.85);


    pointer-events: none;


    transition: all 0.3s ease;


}





.post-grid article.tag-raiderszone:hover::after {


    filter: drop-shadow(0 0 8px rgba(131, 181, 202, 0.6)) opacity(1);


    transform: scale(1.08);


}





/* Category badge override on grid cards */


.post-grid article.tag-raiderszone .post-category {


    background: rgba(131, 181, 202, 0.15) !important;


    color: var(--rz-blue) !important;


    border: 1px solid var(--rz-blue) !important;


}





/* Title and links text color overrides for RZ grid cards */


.post-grid article.tag-raiderszone .entry-title a {


    color: #ffffff !important;


}





.post-grid article.tag-raiderszone .entry-title a:hover {


    color: var(--rz-blue) !important;


}





.post-grid article.tag-raiderszone .read-more-link {


    color: var(--rz-blue) !important;


}





.post-grid article.tag-raiderszone .read-more-link:hover {


    color: #ffffff !important;


}