:root {
            --primary-yellow: #FAFF00;
            --editorial-orange: #FF3F00;
            --deep-plum: #8E2657;
            --footer-bg: #5E173A;
            
            /* Supporting Magazine Tints */
            --tint-yellow: #FFFED2;
            --tint-orange: #FFD9C8;
            --tint-plum: #F7D5E6;
            
            --font-display: "Archivo Black", sans-serif;
            --font-body: "Public Sans", sans-serif;
            --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* --- LAYOUT RESET & BASELINES --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        body {
            font-family: var(--font-body);
            background-color: var(--tint-yellow);
            color: var(--deep-plum);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* --- PREMIUM IMAGING TRIMS & DUOTONES --- */
        .magazine-graphic-box {
            position: relative;
            background-color: var(--editorial-orange);
            overflow: hidden;
            width: 100%;
        }

        .magazine-graphic-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            mix-blend-mode: multiply;
            filter: grayscale(100%) contrast(130%);
            transition: var(--transition-smooth);
        }

        .magazine-graphic-box::after {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(180deg, transparent 30%, rgba(142, 38, 87, 0.9));
            pointer-events: none;
        }

        .magazine-graphic-box:hover img {
            mix-blend-mode: normal;
            filter: grayscale(0%) contrast(100%);
        }

        /* --- TICKERS & MONITORS --- */
        .breaking-ribbon-system {
            background-color: var(--editorial-orange);
            color: var(--primary-yellow);
            font-family: var(--font-display);
            text-transform: uppercase;
            font-size: 0.85rem;
            padding: 0.8rem 0;
            overflow: hidden;
            white-space: nowrap;
            position: fixed;
            top: 0; left: 0; width: 100%;
            z-index: 1000;
            border-bottom: 2px solid var(--deep-plum);
            letter-spacing: 0.05em;
        }

        .ticker-conveyor {
            display: inline-block;
            animation: tickerSlide 30s linear infinite;
        }

        .ticker-phrase {
            display: inline-block;
            padding-right: 5rem;
        }

        @keyframes tickerSlide {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }

        .reading-progress-tracker {
            position: fixed;
            top: 45px; left: 0; width: 100%; height: 6px;
            background: transparent;
            z-index: 1000;
        }

        .reading-progress-bar {
            height: 100%; width: 0%;
            background: var(--primary-yellow);
            box-shadow: 0 2px 10px rgba(255, 63, 0, 0.5);
        }

        /* --- PLATFORM NAVIGATION FRAMEWORK --- */
        header {
            background-color: var(--primary-yellow);
            border-bottom: 5px solid var(--deep-plum);
            padding: 1.25rem 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 47px; left: 0; width: 100%;
            z-index: 900;
        }

        .brand-logo-trigger {
            display: flex;
            align-items: center;
            gap: 14px;
            font-family: var(--font-display);
            font-size: 1.6rem;
            color: var(--deep-plum);
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: -0.03em;
        }

        .logo-img-icon {
            width: 32px;
            height: 32px;
            background-color: var(--editorial-orange);
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E") no-repeat center;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E") no-repeat center;
            mask-size: contain;
            -webkit-mask-size: contain;
        }

        nav.magazine-desk-links {
            display: flex;
            gap: 1.75rem;
            font-family: var(--font-display);
            font-size: 0.85rem;
            text-transform: uppercase;
        }

        nav.magazine-desk-links a {
            color: var(--deep-plum);
            text-decoration: none;
            transition: var(--transition-smooth);
            position: relative;
            padding-bottom: 4px;
        }

        nav.magazine-desk-links a:hover, nav.magazine-desk-links a.active {
            color: var(--editorial-orange);
        }

        /* Responsive Architecture Components */
        .menu-hamburger-icon {
            display: none;
            flex-direction: column;
            gap: 6px;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 999;
        }

        .menu-hamburger-icon span {
            display: block;
            width: 30px;
            height: 4px;
            background-color: var(--deep-plum);
            transition: var(--transition-smooth);
        }

        .menu-hamburger-icon.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
        .menu-hamburger-icon.open span:nth-child(2) { opacity: 0; }
        .menu-hamburger-icon.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

        .fullscreen-menu-portal {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100vh;
            background: var(--primary-yellow);
            z-index: 850;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 5rem 3rem;
            transform: translateY(-100%);
            transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
        }

        .fullscreen-menu-portal.open { transform: translateY(0); }
        .fullscreen-menu-portal a {
            font-family: var(--font-display);
            font-size: 3.5rem;
            color: var(--deep-plum);
            text-decoration: none;
            margin-bottom: 1rem;
            text-transform: uppercase;
            line-height: 1;
        }
        .fullscreen-menu-portal a:hover {
            color: var(--editorial-orange);
        }

        /* --- OVERSCOPE SYSTEM LAYOUTS --- */
        .editorial-view {
            display: none;
            padding-top: 110px;
        }

        .editorial-view.active-view { display: block; }

        section {
            padding: 8rem 3rem;
            border-bottom: 4px solid var(--deep-plum);
            position: relative;
        }

        .grid-columns-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5rem; }
        .grid-columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5rem; }
        .grid-columns-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
        
        .section-headline {
            font-family: var(--font-display);
            font-size: clamp(3rem, 7vw, 6.5rem);
            text-transform: uppercase;
            line-height: 0.9;
            margin-bottom: 5rem;
            letter-spacing: -0.03em;
        }

        .article-numbering {
            font-family: var(--font-display);
            font-size: 4.5rem;
            color: var(--editorial-orange);
            line-height: 0.9;
            margin-bottom: 1.5rem;
            display: block;
        }

        .pull-quote-magazine {
            font-family: var(--font-display);
            font-size: 2.25rem;
            line-height: 1.15;
            text-transform: uppercase;
            border-left: 12px solid var(--editorial-orange);
            padding-left: 2.5rem;
            margin: 3.5rem 0;
            letter-spacing: -0.01em;
        }

        /* --- HOME HERO LAYOUT --- */
        .home-hero-container {
            height: 120vh;
            display: flex;
            border-bottom: 5px solid var(--deep-plum);
            position: relative;
        }

        .hero-left-billboard {
            width: 70%;
            position: relative;
            height: 100%;
        }

        .hero-massive-title {
            position: absolute;
            bottom: 5rem;
            left: 4rem;
            font-family: var(--font-display);
            font-size: clamp(3.5rem, 9vw, 8.5rem);
            line-height: 0.85;
            color: #FFFFFF;
            text-transform: uppercase;
            text-shadow: 6px 6px 0px var(--deep-plum);
            z-index: 10;
        }

        .hero-right-stack {
            width: 30%;
            background-color: var(--deep-plum);
            display: flex;
            flex-direction: column;
        }

        .hero-stack-card {
            background-color: var(--primary-yellow);
            color: var(--deep-plum);
            padding: 3rem;
            border-bottom: 3px solid var(--deep-plum);
            cursor: pointer;
            transition: var(--transition-smooth);
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .hero-stack-card:hover {
            background-color: var(--editorial-orange);
            color: var(--primary-yellow);
        }

        .edition-marker-top {
            position: absolute;
            top: 2.5rem; left: 4rem;
            background: var(--editorial-orange);
            color: var(--primary-yellow);
            font-family: var(--font-display);
            padding: 0.6rem 1.2rem;
            font-size: 0.9rem;
            z-index: 20;
            text-transform: uppercase;
        }

        .vertical-side-label {
            position: absolute;
            right: calc(30% + 1.5rem);
            top: 50%;
            transform: translateY(-50%) rotate(-90deg);
            transform-origin: right center;
            font-family: var(--font-display);
            color: var(--primary-yellow);
            font-size: 1.1rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            z-index: 30;
            pointer-events: none;
            white-space: nowrap;
        }

        /* --- ARTICLE EXPANSION CARDS --- */
        .expansion-card-module {
            border: 4px solid var(--deep-plum);
            padding: 3rem;
            cursor: pointer;
            transition: var(--transition-smooth);
            background: rgba(255, 255, 255, 0.3);
        }

        .expansion-card-module:hover {
            background-color: var(--primary-yellow);
            transform: scale(1.02);
        }

        .expansion-hidden-block {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: var(--transition-smooth);
            font-size: 1rem;
            margin-top: 0;
        }

        .expansion-card-module:hover .expansion-hidden-block {
            max-height: 300px;
            opacity: 1;
            margin-top: 2rem;
            border-top: 3px dashed var(--deep-plum);
            padding-top: 1.5rem;
        }

        /* --- FORM INFRASTRUCTURES --- */
        .input-magazine-field {
            width: 100%;
            background: transparent;
            border: 4px solid var(--deep-plum);
            padding: 1.75rem;
            font-family: var(--font-display);
            font-size: 1.2rem;
            color: var(--deep-plum);
            margin-bottom: 2rem;
            text-transform: uppercase;
        }

        .input-magazine-field::placeholder {
            color: rgba(142, 38, 87, 0.45);
        }

        .btn-magazine-submit {
            background: var(--deep-plum);
            color: var(--primary-yellow);
            border: none;
            padding: 1.75rem 3.5rem;
            font-family: var(--font-display);
            text-transform: uppercase;
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition-smooth);
            width: 100%;
        }

        .btn-magazine-submit:hover {
            background: var(--editorial-orange);
            color: var(--primary-yellow);
        }

        .success-validation-ticker {
            display: none;
            background: var(--editorial-orange);
            color: var(--primary-yellow);
            font-family: var(--font-display);
            padding: 1.25rem;
            text-align: center;
            margin-top: 2rem;
            text-transform: uppercase;
            animation: pulseFlash 1.5s infinite alternate;
        }

        @keyframes pulseFlash {
            0% { opacity: 0.8; }
            100% { opacity: 1; }
        }

        /* --- MASTER FOOTER --- */
        footer {
            background-color: var(--footer-bg);
            color: var(--primary-yellow);
            padding: 8rem 3rem 0 3rem;
            border-top: 10px solid var(--editorial-orange);
        }

        .footer-logo {
            font-family: var(--font-display);
            font-size: clamp(3.5rem, 12vw, 10rem);
            line-height: 0.8;
            text-transform: uppercase;
            margin-bottom: 6rem;
            color: var(--primary-yellow);
            border-bottom: 8px solid var(--primary-yellow);
            padding-bottom: 3rem;
            cursor: pointer;
        }

        .footer-link-grid h5 {
            font-family: var(--font-display);
            text-transform: uppercase;
            font-size: 1.25rem;
            margin-bottom: 2rem;
            color: var(--editorial-orange);
            letter-spacing: 0.05em;
        }

        .footer-link-grid ul {
            list-style: none;
        }

        .footer-link-grid ul li {
            margin-bottom: 1rem;
        }

        .footer-link-grid ul li a {
            color: var(--primary-yellow);
            text-decoration: none;
            font-size: 1.1rem;
            transition: var(--transition-smooth);
        }

        .footer-link-grid ul li a:hover {
            color: var(--editorial-orange);
            padding-left: 8px;
        }

        .scrolling-footer-ticker-banner {
            background: var(--primary-yellow);
            color: var(--deep-plum);
            font-family: var(--font-display);
            text-transform: uppercase;
            font-size: 1.5rem;
            padding: 2rem 0;
            margin-top: 8rem;
            overflow: hidden;
            white-space: nowrap;
            border-top: 5px solid var(--deep-plum);
        }

        /* --- TIMELINE COMPONENT GRAPHICS --- */
        .timeline-track-wrapper {
            position: relative;
            margin: 4rem 0;
            padding-left: 3rem;
            border-left: 4px solid var(--primary-yellow);
        }
        .timeline-node-card {
            position: relative;
            margin-bottom: 3rem;
        }
        .timeline-node-card::before {
            content: '';
            position: absolute;
            left: calc(-3rem - 10px);
            top: 0;
            width: 16px;
            height: 16px;
            background: var(--editorial-orange);
            border: 4px solid var(--primary-yellow);
            border-radius: 50%;
        }

        /* --- RESPONSIVE TRANSLATIONS --- */
        @media (max-width: 1150px) {
            header { padding: 1rem 2rem; }
            section { padding: 5rem 2rem; }
            .home-hero-container { flex-direction: column; height: auto; }
            .hero-left-billboard { width: 100%; height: 65vh; }
            .hero-right-stack { width: 100%; height: auto; }
            .vertical-side-label { display: none; }
            .grid-columns-2, .grid-columns-3, .grid-columns-4 { grid-template-columns: 1fr; gap: 4rem; }
            nav.magazine-desk-links { display: none; }
            .menu-hamburger-icon { display: flex; }
        }