/*
Theme Name: Moonprism
Theme URI: https://moonprism.theme
Author: Moonprism Themes
Author URI: https://moonprism.theme
Description: Magazine and scrapbook theme with layering effects.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moonprism
Tags: full-width-template, custom-colors, custom-menu, editor-style, featured-images, theme-options
*/

:root {
    /* Full Color Palette */
    --mp-soft-pink: #ff75cc;
    --mp-icy-blue: #B0E0E6;
    --mp-bubblegum: #F9A8D4;
    --mp-true-red: #E31B23;
    --mp-hot-pink: #ff47bb;
    --mp-aqua: #7DD3FC;
    --mp-silver: #C0C0C0;
    --mp-evian-blue: #87CEEB;
    --mp-black: #000000;
    --mp-white: #FFFFFF;
    --mp-cream: #FFF8F0;
    --mp-blush: #FFF0F5;
    
    /* Theme Variables */
    --mp-primary: var(--mp-soft-pink);
    --mp-secondary: var(--mp-bubblegum);
    --mp-accent: var(--mp-hot-pink);
    --mp-bg: var(--mp-cream);
    --mp-bg-alt: var(--mp-blush);
    --mp-text: #1a1a1a;
    --mp-text-muted: #666666;
    --mp-heading: #1a1a1a;
    --mp-text-light: #FFFFFF;
    
    /* Cursor & Scrollbar */
    --mp-cursor-color: var(--mp-soft-pink);
    --mp-scrollbar-track: var(--mp-cream);
    --mp-scrollbar-thumb: var(--mp-bubblegum);
    
    /* Fonts - All specified */
    --mp-font-display: 'Playfair Display', serif;
    --mp-font-display-italic: 'Playfair Display', serif;
    --mp-font-heading: 'Cormorant Garamond', Georgia, serif;
    --mp-font-body: 'Libre Baskerville', Georgia, serif;
    --mp-font-serif-alt: 'EB Garamond', Georgia, serif;
    --mp-font-sans: 'Montserrat', sans-serif;
    --mp-font-script: 'Sacramento', cursive;
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--mp-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--mp-scrollbar-thumb); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--mp-soft-pink); }
* { scrollbar-width: thin; scrollbar-color: var(--mp-scrollbar-thumb) var(--mp-scrollbar-track); }

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.custom-cursor { cursor: none !important; }
.custom-cursor * { cursor: none !important; }
#cursor-dot { position: fixed; width: 8px; height: 8px; background: var(--mp-cursor-color); border-radius: 50%; pointer-events: none; z-index: 999999; transform: translate(-50%, -50%); transition: transform 0.1s, width 0.15s, height 0.15s, background 0.2s; }
#cursor-ring { position: fixed; width: 40px; height: 40px; border: 2px solid var(--mp-cursor-color); border-radius: 50%; pointer-events: none; z-index: 999998; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, border-color 0.2s; }
#cursor-dot.hover { width: 16px; height: 16px; background: var(--mp-hot-pink); }
#cursor-ring.hover { width: 60px; height: 60px; border-color: var(--mp-hot-pink); }

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--mp-bg); color: var(--mp-text); font-family: var(--mp-font-body); line-height: 1.7; min-height: 100vh; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mp-primary); text-decoration: none; transition: all 0.3s; }
a:hover { color: var(--mp-hot-pink); }

/* Dark Mode Alternative */
body.dark-mode { --mp-bg: #0a0a0a; --mp-bg-alt: #1a1a1a; --mp-text: #FFFFFF; --mp-text-muted: rgba(255,255,255,0.7); --mp-heading: #FFFFFF; --mp-scrollbar-track: #0a0a0a; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--mp-font-heading); color: var(--mp-heading); font-weight: 500; line-height: 1.2; }
.headline-display { font-family: var(--mp-font-display); font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 700; line-height: 1; }
.headline-elegant { font-family: var(--mp-font-heading); font-size: clamp(2rem, 6vw, 4rem); font-weight: 400; font-style: italic; }
.headline-script { font-family: var(--mp-font-script); font-size: clamp(2rem, 5vw, 3.5rem); }
.headline-modern { font-family: var(--mp-font-sans); font-size: clamp(1.5rem, 4vw, 2.5rem); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 300; }
.text-glow { text-shadow: 0 0 20px var(--mp-primary), 0 0 40px var(--mp-primary); }
.gradient-text { background: linear-gradient(135deg, var(--mp-soft-pink), var(--mp-icy-blue), var(--mp-bubblegum)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gradientShift 5s ease infinite; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ============================================
   FULL-WIDTH PAGE SEGMENTS
   ============================================ */
.magazine-scroll { width: 100%; }
.page-segment { position: relative; width: 100%; min-height: 100vh; overflow: hidden; }

/* Segment Backgrounds - Multiple Types */
.segment-bg { position: absolute; inset: 0; z-index: 0; }
.segment-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
.segment-bg-color { background-color: var(--segment-bg-color, transparent); }
.segment-bg-gradient { background: var(--segment-gradient); }
.segment-bg-image { background-image: var(--segment-bg-image); background-size: cover; background-position: center; background-attachment: var(--segment-bg-attachment, scroll); }
.segment-bg-video, .segment-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.segment-bg-overlay { position: absolute; inset: 0; background: var(--segment-overlay, rgba(0,0,0,0.3)); }

/* ============================================
   INFINITE LAYER SYSTEM
   ============================================ */
.layer-container { position: relative; width: 100%; min-height: 100vh; z-index: 1; }

.layer { position: absolute; transition: all 0.4s ease; }
.layer-static { position: relative; }

/* Z-Index */
.z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; }
.z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; } .z-100 { z-index: 100; }

/* Position by Percentage */
.top-0 { top: 0; } .top-5 { top: 5%; } .top-10 { top: 10%; } .top-15 { top: 15%; } .top-20 { top: 20%; } .top-25 { top: 25%; } .top-30 { top: 30%; } .top-40 { top: 40%; } .top-50 { top: 50%; } .top-60 { top: 60%; } .top-70 { top: 70%; } .top-80 { top: 80%; } .top-90 { top: 90%; }
.left-0 { left: 0; } .left-5 { left: 5%; } .left-10 { left: 10%; } .left-15 { left: 15%; } .left-20 { left: 20%; } .left-25 { left: 25%; } .left-30 { left: 30%; } .left-40 { left: 40%; } .left-50 { left: 50%; }
.right-0 { right: 0; } .right-5 { right: 5%; } .right-10 { right: 10%; } .right-15 { right: 15%; } .right-20 { right: 20%; } .right-25 { right: 25%; } .right-30 { right: 30%; }
.bottom-0 { bottom: 0; } .bottom-5 { bottom: 5%; } .bottom-10 { bottom: 10%; } .bottom-15 { bottom: 15%; } .bottom-20 { bottom: 20%; } .bottom-25 { bottom: 25%; } .bottom-30 { bottom: 30%; }

/* Transforms */
.center-x { transform: translateX(-50%); }
.center-y { transform: translateY(-50%); }
.center-xy { transform: translate(-50%, -50%); }

/* Rotations */
.rotate-n20 { transform: rotate(-20deg); } .rotate-n15 { transform: rotate(-15deg); } .rotate-n10 { transform: rotate(-10deg); } .rotate-n5 { transform: rotate(-5deg); } .rotate-n3 { transform: rotate(-3deg); }
.rotate-3 { transform: rotate(3deg); } .rotate-5 { transform: rotate(5deg); } .rotate-10 { transform: rotate(10deg); } .rotate-15 { transform: rotate(15deg); } .rotate-20 { transform: rotate(20deg); }

/* Sizes */
.w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-33 { width: 33.333%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-66 { width: 66.666%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%; }
.max-w-200 { max-width: 200px; } .max-w-300 { max-width: 300px; } .max-w-400 { max-width: 400px; } .max-w-500 { max-width: 500px; } .max-w-600 { max-width: 600px; } .max-w-700 { max-width: 700px; } .max-w-800 { max-width: 800px; }

/* ============================================
   SCRAPBOOK ELEMENTS
   ============================================ */
.polaroid { background: white; padding: 15px 15px 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.polaroid img { width: 100%; }
.polaroid-caption { color: #333; font-family: var(--mp-font-script); font-size: 1.2em; text-align: center; margin-top: 10px; }

.frame-white { border: 10px solid white; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.frame-black { border: 10px solid black; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.frame-pink { border: 10px solid var(--mp-soft-pink); box-shadow: 0 0 30px var(--mp-soft-pink); }

.tape { position: absolute; width: 100px; height: 30px; background: rgba(255,248,220,0.85); box-shadow: 0 2px 5px rgba(0,0,0,0.15); z-index: 10; }
.tape-pink { background: rgba(255,117,204,0.7); }
.tape-blue { background: rgba(176,224,230,0.7); }

.sticker { display: inline-block; padding: 8px 16px; border-radius: 20px; font-family: var(--mp-font-sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.sticker-pink { background: var(--mp-bubblegum); color: #880E4F; }
.sticker-blue { background: var(--mp-icy-blue); color: #01579B; }
.sticker-hot { background: var(--mp-hot-pink); color: white; }

/* ============================================
   SOCIAL LINKS (Text Style)
   ============================================ */
.social-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: center; }
.social-link { color: var(--mp-soft-pink); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: color 0.3s ease; }
.social-link:hover { color: var(--mp-hot-pink); }

/* ============================================
   HOVER EFFECTS
   ============================================ */
.hover-grow { transition: transform 0.3s ease; }
.hover-grow:hover { transform: scale(1.05); }

.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

.hover-glow { transition: box-shadow 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px var(--mp-soft-pink), 0 0 60px var(--mp-bubblegum); }

.hover-shine { position: relative; overflow: hidden; }
.hover-shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s; pointer-events: none; }
.hover-shine:hover::before { left: 100%; }

.hover-rotate { transition: transform 0.4s ease; }
.hover-rotate:hover { transform: rotate(0deg) scale(1.02); }

.hover-blur { filter: blur(3px); transition: filter 0.3s ease; }
.hover-blur:hover { filter: blur(0); }

.hover-grayscale { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-grayscale:hover { filter: grayscale(0%); }

.hover-pink-overlay { position: relative; }
.hover-pink-overlay::after { content: ''; position: absolute; inset: 0; background: var(--mp-soft-pink); opacity: 0; transition: opacity 0.3s; mix-blend-mode: multiply; pointer-events: none; }
.hover-pink-overlay:hover::after { opacity: 0.4; }

/* ============================================
   BUTTONS
   ============================================ */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; background: var(--mp-soft-pink); color: white; border: none; border-radius: 50px; font-family: var(--mp-font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn:hover { background: var(--mp-hot-pink); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255,117,204,0.4); color: white; }

.btn-outline { background: transparent; border: 2px solid var(--mp-soft-pink); color: var(--mp-soft-pink); }
.btn-outline:hover { background: var(--mp-soft-pink); color: white; }

.btn-glow { animation: btnGlow 2s ease-in-out infinite; }
@keyframes btnGlow { 0%, 100% { box-shadow: 0 0 20px var(--mp-soft-pink); } 50% { box-shadow: 0 0 40px var(--mp-soft-pink), 0 0 60px var(--mp-bubblegum); } }

.btn-shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: btnShine 3s infinite; pointer-events: none; }
@keyframes btnShine { 0% { left: -100%; } 50%, 100% { left: 100%; } }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(10px, -10px); } 50% { transform: translate(0, -15px); } 75% { transform: translate(-10px, -5px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.anim-fade { animation: fadeIn 1s ease forwards; }
.anim-fade-up { animation: fadeInUp 0.8s ease forwards; }
.anim-fade-down { animation: fadeInDown 0.8s ease forwards; }
.anim-fade-left { animation: fadeInLeft 0.8s ease forwards; }
.anim-fade-right { animation: fadeInRight 0.8s ease forwards; }
.anim-float { animation: float 4s ease-in-out infinite; }
.anim-float-slow { animation: floatSlow 6s ease-in-out infinite; }
.anim-pulse { animation: pulse 2s ease-in-out infinite; }
.anim-drift { animation: drift 8s ease-in-out infinite; }

/* Delays */
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; }

/* Scroll Reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================
   LAYOUT STYLES (Matching Sample Images)
   ============================================ */

/* Snapshots - 3x3 grid on white background */
.layout-snapshots { background: #FFFFFF; }
.layout-snapshots .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 40px; max-width: 1200px; margin: 0 auto; }
.layout-snapshots .polaroid { background: white; padding: 15px 15px 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

/* Dreamy - Soft overlapping images */
.layout-dreamy { background: #FFFFFF; }
.layout-dreamy .hero-title { font-family: var(--mp-font-display); font-size: 4rem; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: #ccc; position: absolute; top: 0; left: 0; right: 0; text-align: center; z-index: 1; }
.layout-dreamy .article-title { font-family: var(--mp-font-display-italic); font-size: 3rem; font-style: italic; margin-bottom: 20px; }
.layout-dreamy .drop-cap::first-letter { font-size: 4rem; float: left; line-height: 1; margin-right: 10px; font-family: var(--mp-font-display); color: var(--mp-soft-pink); }
.layout-dreamy .columns { column-count: 2; column-gap: 40px; text-align: justify; }
.layout-dreamy .image-stack { position: relative; }
.layout-dreamy .image-stack img { position: absolute; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

/* Blossom - Close-ups with pink accents */
.layout-blossom { background: #FFFFFF; }
.layout-blossom .collage-container { position: relative; min-height: 100vh; }
.layout-blossom .collage-item { position: absolute; }
.layout-blossom .pink-accent { background: var(--mp-bubblegum); padding: 20px; }
.layout-blossom .flower-doodle { font-size: 3rem; color: var(--mp-bubblegum); opacity: 0.5; }

/* Diary - Photo and handwritten notes */
.layout-diary { background: #FFF8F0; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.layout-diary .photo-side { background: #f5f5f5; }
.layout-diary .photo-side img { filter: grayscale(100%); }
.layout-diary .notes-side { padding: 40px; font-family: 'Sacramento', cursive; font-size: 1.3rem; line-height: 2; color: var(--mp-hot-pink); background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="30"><line x1="0" y1="29" x2="100" y2="29" stroke="%23ddd" stroke-width="1"/></svg>'); }
.layout-diary .sticky-note { background: #fff0f5; padding: 15px; transform: rotate(2deg); box-shadow: 2px 2px 5px rgba(0,0,0,0.1); }

/* Memories - scattered items on white */
.layout-memories { background: #FFFFFF; position: relative; min-height: 100vh; }
.layout-memories .item { position: absolute; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.layout-memories .item-polaroid { background: white; padding: 10px 10px 30px; }
.layout-memories .item-note { background: #fffef0; padding: 15px; font-family: 'Sacramento', cursive; }
.layout-memories .item-ticket { background: #f5f5f0; border: 1px dashed #ccc; padding: 10px; }

/* Spotlight - Photo grid with big typography overlay */
.layout-spotlight { background: #FFFFFF; position: relative; }
.layout-spotlight .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px; }
.layout-spotlight .big-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--mp-font-display); font-size: 8rem; color: var(--mp-soft-pink); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.1em; z-index: 10; pointer-events: none; }
.layout-spotlight .script-overlay { font-family: 'Sacramento', cursive; font-size: 2rem; color: var(--mp-hot-pink); position: absolute; }

/* Bubbly - Playful collage with overlapping photos */
.layout-bubbly { background: var(--mp-bubblegum); position: relative; min-height: 100vh; }
.layout-bubbly .photo-cluster { position: absolute; }
.layout-bubbly .photo-cluster img { border: 3px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.layout-bubbly .text-bubble { background: rgba(255,255,255,0.9); border-radius: 20px; padding: 15px 25px; font-size: 0.9rem; }
.layout-bubbly .heart-deco { color: var(--mp-hot-pink); font-size: 1.5rem; }

/* Classic - Drop cap, columns, centered portrait */
.layout-classic { background: #FFF8F0; padding: 60px; }
.layout-classic .article-header { text-align: center; margin-bottom: 40px; }
.layout-classic .portrait { max-width: 400px; margin: 0 auto 40px; }
.layout-classic .content-columns { column-count: 3; column-gap: 30px; text-align: justify; font-family: var(--mp-font-serif-alt); }
.layout-classic .drop-cap::first-letter { font-size: 5rem; float: left; line-height: 0.8; margin-right: 15px; font-family: var(--mp-font-display); color: var(--mp-true-red); }

/* Sweetheart - Cute pattern background with photos */
.layout-sweetheart { background: var(--mp-bubblegum); background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><text x="15" y="35" font-size="20" fill="%23ffffff40">🐰</text></svg>'); }
.layout-sweetheart .photo-frame { background: white; padding: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
.layout-sweetheart .grid-left { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Bazaar - Large faded header with ethereal images */
.layout-bazaar { background: #FFFFFF; }
.layout-bazaar .masthead { font-family: var(--mp-font-display); font-size: 10vw; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,0,0,0.08); position: absolute; top: 0; width: 100%; text-align: center; }
.layout-bazaar .feature-title { font-family: var(--mp-font-script); font-size: 4rem; font-style: italic; }
.layout-bazaar .intro-text { font-style: italic; color: #666; margin-bottom: 30px; }
.layout-bazaar .text-columns { column-count: 2; column-gap: 40px; text-align: justify; }
.layout-bazaar .ethereal-images { position: relative; }
.layout-bazaar .ethereal-images img { opacity: 0.9; mix-blend-mode: multiply; }

/* Editorial - Center portrait with text columns */
.layout-editorial { background: #f9f6f2; }
.layout-editorial .center-portrait { max-width: 50%; margin: 0 auto; }
.layout-editorial .side-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.layout-editorial .drop-cap::first-letter { font-size: 6rem; float: left; line-height: 0.8; margin-right: 15px; font-family: var(--mp-font-display); color: #c41e3a; }
.layout-editorial .text-wrap { text-align: justify; font-size: 0.9rem; line-height: 1.8; }

/* Zine - Mixed text and scattered photos */
.layout-zine { background: #FFFFFF; padding: 40px; }
.layout-zine .zine-header { font-family: 'Courier New', monospace; font-size: 2.5rem; font-weight: bold; margin-bottom: 20px; }
.layout-zine .photo-scatter { position: relative; }
.layout-zine .photo-scatter img { position: absolute; box-shadow: 3px 3px 10px rgba(0,0,0,0.15); }
.layout-zine .typewriter-text { font-family: 'Courier New', monospace; font-size: 0.85rem; line-height: 1.6; }

/* Collage - Overlapping photos on colored bg */
.layout-collage { background: #e8d4e8; position: relative; min-height: 100vh; overflow: hidden; }
.layout-collage .collage-photo { position: absolute; border: 3px solid white; box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.layout-collage .text-overlay { position: absolute; font-size: 0.8rem; max-width: 200px; }

/* Moodboard - Scattered polaroids with decorations */
.layout-moodboard { background: #FFFFFF; position: relative; min-height: 100vh; }
.layout-moodboard .mood-item { position: absolute; }
.layout-moodboard .polaroid-frame { background: white; padding: 10px 10px 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.layout-moodboard .bow-deco { font-size: 3rem; color: var(--mp-bubblegum); }
.layout-moodboard .handwritten { font-family: 'Sacramento', cursive; font-size: 1.2rem; color: #666; }

/* Lookbook - 4x4 grid with ribbon decorations */
.layout-lookbook { background: #FFFFFF; padding: 40px; }
.layout-lookbook .lookbook-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; max-width: 1000px; margin: 0 auto; }
.layout-lookbook .lookbook-item { background: white; padding: 8px 8px 30px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.layout-lookbook .ribbon { position: absolute; width: 100px; height: auto; }

/* Popstar - Big pink typography with photos */
.layout-popstar { background: linear-gradient(180deg, #ffd1dc 0%, #ffb6c1 100%); position: relative; overflow: hidden; }
.layout-popstar .mega-title { font-family: var(--mp-font-display); font-size: 15vw; font-weight: 900; color: #ff69b4; text-shadow: 4px 4px 0 #fff; text-transform: uppercase; letter-spacing: -0.02em; }
.layout-popstar .photo-layer { position: absolute; }
.layout-popstar .callout { background: white; border-radius: 20px; padding: 10px 20px; font-weight: bold; }
.layout-popstar .heart { color: #ff1493; }

/* Poetry - Photo with oversized flower and text */
.layout-poetry { background: #FFFFFF; display: grid; grid-template-columns: 2fr 1fr; min-height: 100vh; }
.layout-poetry .photo-section { position: relative; }
.layout-poetry .overlay-flower { position: absolute; right: -100px; top: 50%; transform: translateY(-50%); font-size: 20rem; opacity: 0.3; }
.layout-poetry .verse-section { padding: 60px 40px; display: flex; flex-direction: column; justify-content: flex-end; }
.layout-poetry .verse { font-family: 'EB Garamond', serif; font-size: 1rem; line-height: 1.8; font-style: italic; }

/* Minimal - Clean white with flower doodles */
.layout-minimal { background: #FFFFFF; }
.layout-minimal .photo-cluster { position: relative; }
.layout-minimal .flower-doodle { position: absolute; font-size: 2rem; color: var(--mp-bubblegum); opacity: 0.6; }
.layout-minimal .brand-mark { font-family: var(--mp-font-display); font-size: 1.5rem; letter-spacing: 0.3em; opacity: 0.3; }

/* Split - Two column layout */
.layout-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.layout-split .left-col { background: #f5f5f5; }
.layout-split .right-col { background: #FFFFFF; padding: 60px; }

/* Scatter - Free-form positioned items */
.layout-scatter { background: #FFFFFF; position: relative; min-height: 100vh; }
.layout-scatter .scatter-item { position: absolute; }

/* Grid - Clean grid layout */
.layout-grid { background: #FFFFFF; }
.layout-grid .photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 40px; }

/* Magazine Cover - Full bleed with overlays */
.layout-cover { background: #FFFFFF; position: relative; min-height: 100vh; }
.layout-cover .cover-image { position: absolute; inset: 0; object-fit: cover; }
.layout-cover .cover-title { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); font-family: var(--mp-font-display); font-size: 8vw; color: white; text-shadow: 2px 2px 20px rgba(0,0,0,0.5); }
.layout-cover .cover-text { position: absolute; color: white; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); }

/* Hide header/footer via body class */
body.hide-header .site-header { display: none !important; }
body.hide-footer .site-footer { display: none !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .layer:not(.layer-static) { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin-bottom: 30px; padding: 20px; }
    .layer-container { display: flex; flex-direction: column; min-height: auto; padding: 60px 20px; }
    .page-segment { min-height: auto; }
}

@media (max-width: 768px) {
    .headline-display { font-size: 2rem; }
    .headline-elegant { font-size: 1.8rem; }
}