/* ------------------------------------------------------------------
           CORE VARIABLE DESIGN SYSTEM & SYSTEM RESET
        ------------------------------------------------------------------ */
        :root {
            --turquoise: #00B7B5;
            --bg-warm: #F9F8F6;
            --charcoal: #1C2321;
            --gray-line: rgba(28, 35, 33, 0.12);
            --gray-muted: #707775;
            --transition-editorial: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            --transition-fast: all 0.2s ease;
            --reading-width: 680px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            background-color: var(--bg-warm);
            color: var(--charcoal);
            font-family: "Lora", serif;
            font-weight: 400;
            line-height: 1.75;
            overflow-x: hidden;
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
        }

        /* Reading Progress Bar Indicator */
        #reading-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            background: var(--turquoise);
            width: 0%;
            z-index: 2000;
            transition: width 0.1s ease-out;
        }

        /* Global Structural Utilities */
        .container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 2.5rem;
        }
        
        .fine-line {
            width: 100%;
            height: 1px;
            background-color: var(--gray-line);
            border: none;
            margin: 0;
            transition: var(--transition-editorial);
        }

        .uppercase-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--gray-muted);
            font-weight: 600;
        }

        .turquoise-accent {
            color: var(--turquoise);
        }

        /* Subtle Fade Reveal Animations */
        .reveal-in {
            animation: slowFadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

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

        /* ------------------------------------------------------------------
           ULTRA-PREMIUM PRINT MASTHEAD HEADER SYSTEM
        ------------------------------------------------------------------ */
        header {
            width: 100%;
            background-color: var(--bg-warm);
            z-index: 1000;
            position: relative;
            transition: var(--transition-editorial);
        }

        header.sticky-header {
            position: fixed;
            top: 0;
            left: 0;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
            border-bottom: 1px solid var(--turquoise);
            animation: slideDown 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        header.sticky-header .top-line-masthead,
        header.sticky-header .masthead-sub-links,
        header.sticky-header .fine-line {
            display: none !important;
        }

        header.sticky-header .main-masthead-title {
            font-size: 2.2rem !important;
            padding: 0.6rem 0 0.2rem 0 !important;
        }

        header.sticky-header .navigation-line-masthead {
            padding: 0.5rem 0 0.8rem 0 !important;
        }

        @keyframes slideDown {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }

        .top-line-masthead {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
        }

        .main-masthead-title {
            font-size: 4.8rem;
            font-weight: 500;
            text-align: center;
            letter-spacing: -0.02em;
            line-height: 1.05;
            padding: 2.5rem 0 0.5rem 0;
            text-transform: uppercase;
            cursor: pointer;
            transition: var(--transition-editorial);
        }

        .masthead-sub-links {
            text-align: center;
            font-size: 0.8rem;
            letter-spacing: 0.15em;
            color: var(--gray-muted);
            text-transform: uppercase;
            margin-bottom: 2rem;
        }

        .navigation-line-masthead {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 0;
        }

        .nav-links-center {
            display: flex;
            gap: 2.5rem;
        }

        .nav-item {
            text-decoration: none;
            color: var(--charcoal);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            transition: var(--transition-fast);
        }

        .nav-item:hover, .nav-item.active-nav {
            color: var(--turquoise);
        }

        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 1px;
            background-color: var(--turquoise);
            transition: var(--transition-editorial);
        }

        .nav-item:hover::after, .nav-item.active-nav::after {
            width: 100%;
        }

        /* Responsible Hamburger Navigation */
        .hamburger-menu-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            z-index: 1100;
        }

        .hamburger-bar {
            display: block;
            width: 24px;
            height: 1px;
            background-color: var(--charcoal);
            margin: 6px 0;
            transition: var(--transition-editorial);
        }

        .hamburger-menu-toggle.open-active .hamburger-bar:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
            background-color: var(--turquoise);
        }

        .hamburger-menu-toggle.open-active .hamburger-bar:nth-child(2) {
            transform: translateY(-2px) rotate(-45deg);
            background-color: var(--turquoise);
        }

        /* ------------------------------------------------------------------
           SINGLE PAGE APPLICATION VIEW ARCHITECTURE
        ------------------------------------------------------------------ */
        .editorial-view {
            display: none;
            opacity: 0;
            transform: translateY(15px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .editorial-view.active-view {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        .sticky-padding-offset {
            padding-top: 60px;
        }

        /* ------------------------------------------------------------------
           EDITORIAL HERO AND PAGE SECTIONS
        ------------------------------------------------------------------ */
        .editorial-hero-cover {
            display: grid;
            grid-template-columns: 1.3fr 1fr;
            gap: 4rem;
            padding: 4rem 0;
            align-items: center;
        }

        .hero-cover-image-container {
            width: 100%;
            height: 680px;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--gray-line);
        }

        .editorial-real-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(15%) sepia(5%);
            transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .hero-cover-image-container:hover .editorial-real-image {
            transform: scale(1.03);
        }

        .hero-content-pane {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-right: 2rem;
        }

        .editorial-title-xl {
            font-size: 4rem;
            font-weight: 400;
            line-height: 1.1;
            margin: 1.5rem 0;
            text-transform: uppercase;
            letter-spacing: -0.01em;
        }

        .editorial-paragraph-intro {
            font-size: 1.2rem;
            color: var(--gray-muted);
            margin-bottom: 2.5rem;
            max-width: 480px;
        }

        .editorial-link-action {
            font-size: 0.85rem;
            text-decoration: none;
            color: var(--charcoal);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .editorial-link-action:hover {
            color: var(--turquoise);
            padding-left: 5px;
        }

        /* Section Layout: Editor Note Reading Column */
        .reading-column-section {
            padding: 8rem 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .reading-column-wrapper {
            max-width: var(--reading-width);
            text-align: left;
        }

        .reading-column-wrapper p {
            font-size: 1.15rem;
            margin-bottom: 1.8rem;
            color: #333937;
        }

        /* Section Layout: The Current Issue Feature Split */
        .current-issue-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            padding: 7rem 0;
            align-items: center;
        }

        /* Section Layout: Three Editorial Stories Grid */
        .editorial-stories-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            padding: 6rem 0;
        }

        .story-grid-card {
            display: flex;
            flex-direction: column;
        }

        .story-card-graphic {
            height: 380px;
            margin-bottom: 1.5rem;
            border: 1px solid var(--gray-line);
            overflow: hidden;
        }

        .story-grid-card h3 {
            font-size: 1.65rem;
            font-weight: 400;
            margin: 0.5rem 0 1rem 0;
            text-transform: uppercase;
            line-height: 1.3;
        }

        /* Section Layout: Signature Turquoise Banner Block */
        .turquoise-editorial-block {
            background-color: var(--turquoise);
            color: var(--bg-warm);
            padding: 8rem 0;
        }

        .horizontal-category-strip {
            display: flex;
            justify-content: space-between;
            margin-top: 5rem;
            border-top: 1px solid rgba(249, 248, 246, 0.2);
            padding-top: 2rem;
        }

        .strip-element-item {
            font-size: 1.3rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: var(--transition-editorial);
        }

        .strip-element-item:hover {
            opacity: 0.7;
            transform: translateY(-2px);
        }

        /* Section Layout: Long Editorial List Row Item Architecture */
        .editorial-archive-list {
            padding: 4rem 0;
        }

        .editorial-list-row {
            display: grid;
            grid-template-columns: 0.5fr 1.5fr 4fr 1.5fr auto;
            align-items: center;
            padding: 2.2rem 0;
            border-bottom: 1px solid var(--gray-line);
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            transition: var(--transition-editorial);
        }

        .editorial-list-row:hover {
            padding-left: 1.5rem;
            border-bottom-color: var(--turquoise);
            background-color: rgba(0, 183, 181, 0.02);
        }

        .editorial-list-row h4 {
            font-size: 1.4rem;
            font-weight: 400;
            text-transform: uppercase;
            transition: var(--transition-editorial);
        }

        .editorial-list-row:hover h4 {
            color: var(--turquoise);
            transform: translateX(5px);
        }

        /* Section Layout: Rest Architecture */
        .quiet-pause-section {
            padding: 10rem 0;
            text-align: center;
        }

        .quiet-pause-section h2 {
            font-size: 3.5rem;
            font-weight: 400;
            text-transform: uppercase;
            margin-bottom: 2rem;
            line-height: 1.2;
        }

        /* Section Layout: Ritual Vertical Sequence */
        .vertical-sequence-container {
            max-width: 800px;
            margin: 5rem auto;
            position: relative;
        }

        .sequence-node-step {
            display: grid;
            grid-template-columns: 0.8fr 2fr;
            gap: 3rem;
            margin-bottom: 4rem;
            padding-bottom: 2rem;
            border-bottom: 1px dashed var(--gray-line);
        }

        .sequence-node-step h4 {
            font-size: 1.5rem;
            text-transform: uppercase;
            font-weight: 400;
            color: var(--turquoise);
        }

        /* Section Layout: Field Notes Component Grid */
        .field-notes-journal-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4rem;
            padding: 6rem 0;
        }

        .field-note-card-paper {
            background-color: #F3F2EE;
            border: 1px solid var(--gray-line);
            padding: 4rem;
            position: relative;
        }

        .field-note-card-paper p.note-statement {
            font-size: 1.8rem;
            line-height: 1.4;
            margin: 2rem 0;
            text-transform: uppercase;
        }

        /* Pull Quotes Configuration */
        .editorial-magazine-pullquote {
            font-size: 2.2rem;
            line-height: 1.4;
            color: var(--turquoise);
            font-style: italic;
            border-left: 2px solid var(--turquoise);
            padding-left: 2.5rem;
            margin: 3.5rem 0;
            text-transform: uppercase;
        }

        /* Forms and Interactive States */
        .premium-input-frame {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--charcoal);
            padding: 1rem 0;
            font-family: "Lora", serif;
            font-size: 1.5rem;
            color: var(--charcoal);
            outline: none;
            margin-bottom: 2.5rem;
            transition: var(--transition-editorial);
        }

        .premium-input-frame:focus {
            border-bottom-color: var(--turquoise);
        }

        .premium-form-row-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

        .premium-editorial-btn {
            background: var(--charcoal);
            color: var(--bg-warm);
            border: none;
            padding: 1.2rem 3rem;
            font-family: "Lora", serif;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-size: 0.8rem;
            cursor: pointer;
            transition: var(--transition-fast);
            display: inline-block;
        }

        .premium-editorial-btn:hover {
            background: var(--turquoise);
            color: white;
        }

        .index-filter-pill-container {
            display: flex;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .index-filter-pill-btn {
            background: transparent;
            border: 1px solid var(--gray-line);
            padding: 0.5rem 1.5rem;
            border-radius: 30px;
            font-family: inherit;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .index-filter-pill-btn.active-pill, .index-filter-pill-btn:hover {
            background: var(--turquoise);
            color: white;
            border-color: var(--turquoise);
        }

        .newsletter-magazine-signup-panel {
            background-color: var(--turquoise);
            color: var(--bg-warm);
            padding: 6rem;
            text-align: center;
            margin: 6rem 0;
        }

        .newsletter-magazine-signup-panel input[type="email"] {
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--bg-warm);
            color: var(--bg-warm);
            text-align: center;
            width: 100%;
            max-width: 500px;
            font-size: 1.4rem;
            padding: 1rem;
            margin: 2rem 0;
            outline: none;
        }

        .newsletter-magazine-signup-panel input[type="email"]::placeholder {
            color: rgba(249, 248, 246, 0.5);
        }

        .form-feedback-message-state {
            margin-top: 1rem;
            font-size: 0.9rem;
            letter-spacing: 0.05em;
            display: none;
        }

        .form-feedback-message-state.success {
            color: #d1f7f5;
            display: block;
        }

        .form-feedback-message-state.error {
            color: #ffcdd2;
            display: block;
        }

        /* ------------------------------------------------------------------
           MAGAZINE SIGNATURE FOOTER SYSTEM
        ------------------------------------------------------------------ */
        footer {
            background-color: #FAF9F6;
            border-top: 1px solid var(--gray-line);
            padding: 6rem 0 3rem 0;
            margin-top: 8rem;
        }

        .footer-primary-layout {
            display: grid;
            grid-template-columns: 2fr repeat(4, 1fr);
            gap: 3rem;
            margin-bottom: 5rem;
        }

        .footer-brand-column h2 {
            font-size: 2.2rem;
            text-transform: uppercase;
            font-weight: 500;
            margin-bottom: 1rem;
            letter-spacing: -0.01em;
        }

        .footer-nav-column h4 {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 1.5rem;
            color: var(--charcoal);
        }

        .footer-nav-column ul {
            list-style: none;
        }

        .footer-nav-column ul li {
            margin-bottom: 0.75rem;
        }

        .footer-nav-column ul li a {
            text-decoration: none;
            color: var(--gray-muted);
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .footer-nav-column ul li a:hover {
            color: var(--turquoise);
        }

        /* ------------------------------------------------------------------
           RESPONSIVE VIEWPORT CONSTRAINTS SYSTEM
        ------------------------------------------------------------------ */
        @media (max-width: 1024px) {
            .main-masthead-title { font-size: 3.8rem; }
            .editorial-hero-cover { grid-template-columns: 1fr; gap: 2.5rem; }
            .hero-cover-image-container { height: 450px; }
            .current-issue-split { grid-template-columns: 1fr; gap: 3rem; }
            .editorial-stories-grid { grid-template-columns: 1fr; gap: 3rem; }
            .footer-primary-layout { grid-template-columns: 1fr 1fr; gap: 3rem; }
            .editorial-list-row { grid-template-columns: 0.5fr 3fr auto; }
            .editorial-list-row div:nth-child(2), .editorial-list-row div:nth-child(4) { display: none; }
        }

        @media (max-width: 768px) {
            .container { padding: 0 1.5rem; }
            .main-masthead-title { font-size: 2.5rem; padding: 1.5rem 0 0.5rem 0; }
            
            .nav-links-center {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--bg-warm);
                flex-direction: column;
                padding: 2rem;
                gap: 1.5rem;
                border-bottom: 1px solid var(--turquoise);
                box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            }
            
            .nav-links-center.mobile-active {
                display: flex !important;
            }
            
            .hamburger-menu-toggle { display: block; }
            .editorial-title-xl { font-size: 2.5rem; }
            .horizontal-category-strip { flex-direction: column; gap: 1.5rem; }
            .field-notes-journal-grid { grid-template-columns: 1fr; }
            .field-note-card-paper { padding: 2rem; }
            .newsletter-magazine-signup-panel { padding: 3rem 1.5rem; }
        }