/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #111111; /* Sleek dark background to make photos pop */
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden; /* Ensure horizontal scrollbars don't appear when sliding */
}

/* Magazine Wrapper to maintain responsiveness */
.magazine-wrapper {
    width: 100%;
    max-width: 1000px; /* Reduced from 1200px */
    height: 65vh;      /* Reduced from 80vh for more top/bottom spacing */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* NEW: Controls the cinematic slide effect */
.shift-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* This transition runs exactly when the JavaScript changes the position */
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); 
    
    /* We start shifted 25% to the left so the closed cover is dead center */
    transform: translateX(-25%);
}

/* Make the main container transparent */
.magazine {
    background-color: transparent; 
}

/* Ensure the individual pages retain the paper color */
.page {
    background-color: #f7f7f7; /* Traditional magazine paper off-white */
    overflow: hidden;
}

.page-content {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

/* Editorial Typography */
h1, h2 {
    font-family: 'Bodoni Moda', serif;
    text-transform: uppercase;
    color: #111;
    letter-spacing: 2px;
}

/* Layout Styles */
.cover-layout {
    background-color: #1a1a1a;
    color: #fff;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.cover-layout h1 {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 300;
}

.text-layout {
    justify-content: center;
}

.text-layout h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.editorial-paragraph {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    font-weight: 300;
}

.photo-layout {
    padding: 0 !important; /* Full bleed image */
}

.magazine-photo {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-blend-mode: lighten;
    filter: brightness(.85);
}

.page-number {
    position: absolute;
    bottom: 20px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #888;
}

.text-layout .page-number { left: 40px; }
.photo-layout .page-number { right: 40px; color: #fff; z-index: 10; }

/* Split Layout */
.split-layout {
    display: flex;
    flex-direction: row !important;
    padding: 0 !important;
}

.split-left {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f7f7f7;
}

.split-right {
    flex: 1;
    background-size: cover;
    background-position: center;
}

.split-left .page-number {
    position: relative;
    bottom: 0;
    left: 0;
    margin-bottom: 20px;
    display: block;
}

/* Overlap Layout */
.overlap-layout {
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #e6e4df;
}

.overlap-image {
    width: 75%;
    height: 65%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    z-index: 1;
}

.overlap-text {
    position: absolute;
    font-size: 4rem;
    color: #111;
    z-index: 2;
    letter-spacing: 12px;
    bottom: 15%;
    text-shadow: 2px 2px 10px rgba(255,255,255,0.7);
}

/* Layout: Half Image, Half Text */
.half-layout {
    display: flex;
    flex-direction: column !important;
    padding: 0 !important;
    height: 100%;
    background-color: #f7f7f7;
}

.half-image {
    flex: 1;
    background-size: cover;
    background-position: center;
}

.half-text-area {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.half-text-area h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

/* Layout: Center Spanning Image */
.center-span-left, .center-span-right {
    width: 100%;
    height: 100%;
    background-size: 200% 100%; 
    background-repeat: no-repeat;
}

.center-span-left {
    background-position: left center;
}

.center-span-right {
    background-position: right center;
}

/* --- SPINE SPREAD LAYOUT --- */
.spine-left-layout, .spine-right-layout {
    display: flex;
    flex-direction: row !important; /* FIXED: Forces side-by-side */
    padding: 0 !important; /* FIXED: Removes default padding */
    height: 100%;
    background-color: #f7f7f7;
}

/* Left Page: Text on the left, Image on the right */
.spine-text-left {
    width: 50%;
    padding: 40px 20px 40px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.spine-img-left {
    width: 50%;
    background-size: 200% 100%;
    background-position: left center;
    background-repeat: no-repeat;
}

/* Right Page: Image on the left, Text on the right */
.spine-img-right {
    width: 50%;
    background-size: 200% 100%;
    background-position: right center;
    background-repeat: no-repeat;
}
.spine-text-right {
    width: 50%;
    padding: 40px 40px 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.spine-text-left h2, .spine-text-right h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}



.col-text h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

/* --- BACK COVER HALF (Top GIF, Bottom Text) --- */
.back-half-layout {
    display: flex;
    flex-direction: column !important;
    padding: 0 !important; /* FIXED: Allows GIF to touch top edges */
    height: 100%;
    background-color: #111; 
    color: #fff;
}

.back-half-gif {
    flex: 1;
    background-size: cover;
    background-position: center;
}

.back-half-text {
    flex: 1; 
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.framed-text h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

/* --- VOGUE EDITORIAL SPREAD --- */
.vogue-layout {
    background-color: #fff !important; /* Vogue uses crisp white */
    padding: 60px !important; /* Breathable margins */
}

/* Metadata (Top headers & Page numbers) */
.vogue-meta-header {
    position: absolute;
    top: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #111;
    width: calc(100% - 120px);
    display: flex;
    justify-content: space-between;
}

/* The "Exploring Trends" Headline */
.vogue-headline-quote {
    font-family: 'Bodoni Moda', serif;
    font-size: 4.5rem; /* Massive */
    font-weight: 700;
    line-height: 0.9;
    color: #111;
    margin-top: 40px;
    max-width: 90%;
    z-index: 5;
}

/* Editor's Note Block */
.vogue-editor-note {
    position: absolute;
    bottom: 80px;
    left: 60px;
    max-width: 250px;
}

.vogue-editor-note h4 {
    font-family: 'Bodoni Moda', serif;
    font-size: 1.2rem;
    border-top: 2px solid #111;
    padding-top: 10px;
}

/* Body Text Columns */
.vogue-columns {
    column-count: 2;
    column-gap: 30px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #333;
    text-align: justify;
    margin-top: 20px;
}

.vogue-subheadline {
    font-family: 'Bodoni Moda', serif;
    font-size: 1.8rem;
    margin-bottom: 20px;
    display: block;
}
.back-half-text h2 {
    color: #fff;
}

/* --- VOGUE-STYLE COVER OVERLAY --- */

.cover-text-overlay {
    position: absolute;
    top: 60px; /* Positions the main title near the top */
    left: 40px;
    right: 40px;
    text-align: center;
    z-index: 10;
    color: #fff; /* Assuming a typical fashion photo. Change to #111 if image is very light. */
    text-shadow: 0 4px 15px rgba(0,0,0,0.3); /* CRITICAL for readability over photos */
}

.cover-title {
    font-family: 'Magazine', sans-serif;                                            
    font-size: 5.5rem; /* Massive, iconic size */
    text-transform: uppercase;
    line-height: 0.85; /* Tightly stacked */
    letter-spacing: -2px; /* Tightly spaced letters for that sophisticated look */
    font-weight: 700;
    color: #000000cd;
    margin-bottom: 5px;
}

.cover-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 6px; /* Elegant, wide spacing */
    text-transform: uppercase;
    font-weight: 300;
}
/* --- COVER AUTHOR TAG --- */
.cover-author {
    position: absolute;
    bottom: 40px; /* Pushes it to the bottom */
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* Small, elegant size */
    letter-spacing: 3px;
    color: #ffffff; /* White text */
    text-transform: uppercase;
    z-index: 10; /* Ensures it stays above the photo */
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Subtle shadow for readability */
}
/* --- CUSTOM 60/40 VOGUE SPREAD (From Reference Image) --- */
.vogue-split-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 !important;
}

/* Left Page Image: Takes up 60% of the page width, touches the right spine */
.vogue-split-img-left {
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 10%;
    width: 45%;
    /* CSS Math: 100 / 60 = 1.666. This perfectly syncs the image scale! */
    background-size: 166.66% 100%; 
    background-position: left center;
}

/* The massive overlapping text */
.vogue-split-headline {
    position: absolute;
    top: 12%;
    left: 40px;
    font-family: 'Bodoni Moda', serif;
    font-size: 4.8rem;
    font-weight: 800;
    line-height: 0.95;
    color: #111;
    z-index: 10;
    width: 90%;
    letter-spacing: -2px;
}

/* Right Page Image: Takes up 40% of the page width, touches the left spine */
.vogue-split-img-right {
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 35%;
    /* CSS Math: 100 / 40 = 2.5. This perfectly syncs the right half! */
    background-size: 250% 100%; 
    background-position: right center;
    border-radius: 0 100px 0 0; /* The massive signature top-right curve */
}

/* Right Page Text Area */
.vogue-split-text-right {
    position: absolute;
    left: 45%; /* Pushed past the 40% image */
    top: 15%;
    right: 40px;
    z-index: 10;
}

.vogue-split-text-right h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

/* Matches the 2-column small text from the reference */
.vogue-split-text-right .vogue-columns {
    font-size: 0.75rem;
    line-height: 1.6;
    color: #666;
    column-count: 2;
    column-gap: 20px;
    text-align: left;
}
/* --- UNIFORM GLOBAL HEADERS & FOOTERS --- */
.global-meta-header {
    position: absolute;
    top: 30px;
    left: 40px;
    right: 40px;
    display: flex;
    justify-content: space-between;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #444;
    z-index: 50; /* Keeps it above images */
}

.global-page-number {
    position: absolute;
    bottom: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #111;
    z-index: 50;
    font-weight: 600;
}

/* Push page numbers toward the center spine */
.page-num-inner-left { 
    right: 40px; /* On a left page, the spine is on the right */
} 
.page-num-inner-right { 
    left: 40px; /* On a right page, the spine is on the left */
}
/* --- DARK THEME OVERRIDES --- */
.theme-dark {
    background-color: #111 !important;
    color: #fff !important;
}

/* Invert all headings */
.theme-dark h1, 
.theme-dark h2, 
.theme-dark h3, 
.theme-dark .vogue-subheadline,
.theme-dark .vogue-split-headline {
    color: #fff !important;
}

/* Soften body text for readability on black */
.theme-dark .editorial-paragraph,
.theme-dark .vogue-columns {
    color: #ccc !important; 
}

/* Invert Global Headers and Footers */
.theme-dark .global-meta-header {
    color: #aaa !important; /* Soft grey for the header */
}

.theme-dark .global-page-number {
    color: #fff !important; /* Bright white for page numbers */
}

/* Ensure layout containers become transparent so the dark background shows through */
.theme-dark.spine-left-layout,
.theme-dark.spine-right-layout,
.theme-dark.col-layout,
.theme-dark.framed-col-layout,
.theme-dark.vogue-split-container {
    background-color: #111 !important; 
}
/* --- 1. VERTICALLY CENTERED LAYOUTS --- */
.col-layout, .framed-col-layout {
    display: flex;
    flex-direction: row !important;
    align-items: center !important; /* Vertically centers the image & text, clearing the header! */
    justify-content: center;
    height: 100%;
    padding: 0 !important;
    gap: 0 !important; /* Removes gap so we can force them to overlap */
}

/* --- 2. SHORTER, WIDER FLOATING IMAGES --- */
.col-pic, .framed-pic {
    flex: none; /* Stops flexbox from squishing the image */
    width: 50%;  /* Made wider */
    height: 60%; /* Restricted height so it NEVER touches the top header */
    background-size: cover !important;
    background-position: center !important;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1; /* Sits below the text layer */
}

/* --- 3. OVERLAPPING TEXT AREA --- */
.col-text, .framed-text {
    flex: none;
    width: 55%; 
    padding: 0 40px !important; 
    position: relative;
    z-index: 5; /* Forces the text to float ABOVE the image */
}

/* Subtle shadow to ensure text is readable when it overlaps the photos */
.col-text h2, .framed-text h2 {
    text-shadow: 0 2px 15px rgba(255,255,255,0.8);
}
.theme-dark .col-text h2, .theme-dark .framed-text h2 {
    text-shadow: 0 2px 15px rgba(0,0,0,0.8);
}

/* --- 4. THE MAGAZINE OVERLAP TRICK --- */
/* This pulls the second item slightly over the first item to create the overlap */
.col-pic + .col-text,
.framed-pic + .framed-text,
.col-text + .col-pic,
.framed-text + .framed-pic {
    margin-left: -5%; 
}   
/* --- 2x2 ALTERNATING GRID (Pages 5 & 6) --- */
.grid-alt-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: 1fr 1fr;    /* Two equal rows */
    height: 100%;
    padding: 80px 40px !important; /* Clears top/bottom headers */
    gap: 20px;
    background-color: transparent;
}

.grid-img {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.grid-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

.grid-text h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    line-height: 1.2;
}

.grid-text p {
    font-size: 0.8rem;
    line-height: 1.6;
}
/* --- BACK COVER VIDEO LAYOUT --- */
.back-half-video-container {
    flex: 1; /* Takes up the top 50% */
    width: 100%;
    overflow: hidden;
    position: relative;
}

.back-half-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Forces the video to fill the box without squishing */
    display: block;
}