@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Inter:wght@400;500;700&family=Permanent+Marker&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');

:root {
    --paper: #fcfbf9;
    --ink: #1c1c1c;
    --ink-light: #555;
    --red: #cc3a3a;
    --blue-light: #8ebade;

    --font-display: 'Permanent Marker', cursive;
    --font-script: 'Caveat', cursive;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;

    --torn-edge-h: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1200 20" xmlns="http://www.w3.org/2000/svg"><path d="M0,20 L0,10 L15,14 L30,6 L45,16 L60,4 L75,12 L90,8 L105,17 L120,5 L135,15 L150,7 L165,13 L180,9 L195,18 L210,6 L225,14 L240,5 L255,16 L270,8 L285,13 L300,4 L315,15 L330,7 L345,17 L360,9 L375,12 L390,6 L405,18 L420,5 L435,14 L450,8 L465,16 L480,4 L495,13 L510,7 L525,17 L540,9 L555,12 L570,6 L585,18 L600,5 L615,14 L630,8 L645,16 L660,4 L675,13 L690,7 L705,17 L720,9 L735,12 L750,6 L765,18 L780,5 L795,14 L810,8 L825,16 L840,4 L855,13 L870,7 L885,17 L900,9 L915,12 L930,6 L945,18 L960,5 L975,14 L990,8 L1005,16 L1020,4 L1035,13 L1050,7 L1065,17 L1080,9 L1095,12 L1110,6 L1125,18 L1140,5 L1155,14 L1170,8 L1185,16 L1200,4 L1200,20 Z" fill="%23fcfbf9"/></svg>');
    --torn-edge-v: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 20 1200" xmlns="http://www.w3.org/2000/svg"><path d="M20,0 L10,0 L14,15 L6,30 L16,45 L4,60 L12,75 L8,90 L17,105 L5,120 L15,135 L7,150 L13,165 L9,180 L18,195 L6,210 L14,225 L5,240 L16,255 L8,270 L13,285 L4,300 L15,315 L7,330 L17,345 L9,360 L12,375 L6,390 L18,405 L5,420 L14,435 L8,450 L16,465 L4,480 L13,495 L7,510 L17,525 L9,540 L12,555 L6,570 L18,585 L5,600 L14,615 L8,630 L16,645 L4,660 L13,675 L7,690 L17,705 L9,720 L12,735 L6,750 L18,765 L5,780 L14,795 L8,810 L16,825 L4,840 L13,855 L7,870 L17,885 L9,900 L12,915 L6,930 L18,945 L5,960 L14,975 L8,990 L16,1005 L4,1020 L13,1035 L7,1050 L17,1065 L9,1080 L12,1095 L6,1110 L18,1125 L5,1140 L14,1155 L8,1170 L16,1185 L4,1200 L20,1200 Z" fill="%23fcfbf9"/></svg>');
}

html {
    scroll-behavior: smooth;
}

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

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- HERO SECTION --- */
.hero {
    position: relative;
    height: 80vh;
    min-height: 500px;
    background-color: #a3c1dd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Wrap the image for smooth JS parallax scale & translate without breaking layout */
.hero-img-wrapper {
    position: absolute;
    top: -10%; left: -10%;
    width: 120%; height: 120%;
    z-index: 1;
}

.hero-img {
    width: 100%; height: 100%;
    object-fit: cover;
    will-change: transform;
}

/* Made "Saveur life" text more visible and premium */
.hero-title {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(4rem, 15vw, 12rem);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -2px;
    transform: rotate(-3deg);
    /* Using strong modern text shadows instead of overlay blend mode to ensure max visibility */
    text-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 5px 10px rgba(0,0,0,0.4);
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-title:hover {
    transform: rotate(-2deg) scale(1.02);
}

.hero-torn-bottom {
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 30px;
    background-image: var(--torn-edge-h);
    background-size: 100% 100%;
    z-index: 20;
}

/* --- LAYOUT --- */
.layout-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    padding: 4rem 4rem 6rem;
    position: relative;
}

/* --- SIDEBAR --- */
.sidebar {
    position: relative;
    padding-right: 2rem;
    padding-top: 2rem;
}

.sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: -10px;
    width: 20px; height: 20px;
    border-top: 4px solid var(--red);
    border-left: 4px solid var(--red);
}

.sidebar::after {
     content: '';
     position: absolute;
     bottom: -40px; right: 2rem;
     width: 20px; height: 20px;
     border-bottom: 4px solid var(--red);
     border-right: 4px solid var(--red);
}

.sidebar-divider {
    position: absolute;
    top: 0; bottom: -100px; right: 0;
    width: 20px;
    background-image: var(--torn-edge-v);
    background-size: 100% 100%;
    transform: rotate(180deg);
    z-index: 10;
}

.nav-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: var(--ink);
    transform: rotate(-2deg);
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.nav-item {
    position: relative;
    group: nav;
}

.nav-item::before {
    content: '>';
    position: absolute;
    left: -15px; top: 2px;
    color: transparent;
    font-family: monospace;
    font-weight: bold;
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
    transform: translateX(-10px);
}

.nav-item:hover::before {
    color: var(--red);
    transform: translateX(0);
}

.nav-label {
    font-family: var(--font-script);
    font-size: 1.8rem;
    color: var(--blue-light);
    text-decoration: none;
    display: inline-block; /* need this for transform transition */
    margin-bottom: 0.2rem;
    transform: rotate(-2deg);
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-label:hover {
    color: var(--red);
    transform: rotate(0deg) scale(1.05) translateX(5px);
}

.nav-desc {
    font-size: 0.75rem;
    color: var(--ink-light);
    text-align: left;
    line-height: 1.4;
    transition: color 0.3s ease;
}
.nav-item:hover .nav-desc {
    color: var(--ink);
}

.stamp-icon {
    width: 56px; height: 56px;
    margin: 1rem auto;
    display: block;
    color: var(--ink);
    opacity: 0.35;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.stamp-icon:hover {
    transform: rotate(15deg) scale(1.1);
    opacity: 0.7;
}


/* --- CONTENT AREA --- */
.content-area {
    padding-left: 3rem;
    padding-top: 2rem;
    position: relative;
}

.article-meta {
    font-family: var(--font-script);
    color: var(--ink-light);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.article-title {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
    max-width: 800px;
    letter-spacing: -1px;
}

.article-body {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    position: relative;
    max-width: 100%;
}

.text-columns {
    flex: 1;
    column-count: 2;
    column-gap: 2.5rem;
    font-size: 0.95rem; /* slightly larger for premium legibility */
    line-height: 1.7;
    color: var(--ink);
    text-align: justify;
}

.text-columns p {
    margin-bottom: 1.5rem;
    break-inside: avoid;
}

.drop-cap {
    float: left;
    font-family: var(--font-serif);
    font-size: 5.5rem;
    color: var(--red);
    line-height: 0.8;
    padding-top: 0.1em;
    padding-right: 0.1em;
    font-weight: 900;
}

/* --- POLAROID --- */
.polaroid-wrapper {
    position: sticky;
    top: 100px; /* Floating elegantly as you scroll */
    width: 320px;
    flex-shrink: 0;
    transform: rotate(4deg);
    z-index: 30;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.polaroid-wrapper:hover {
    transform: rotate(0deg) scale(1.05) translateY(-10px);
    z-index: 40;
}

/* Added glassmorphism for premium feel */
.polaroid {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 12px 12px 50px 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.05);
    position: relative;
    border: 1px solid rgba(255,255,255,0.4);
}

.polaroid-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    filter: sepia(0.1) contrast(1.05);
}

.polaroid-blue-base {
    background-color: var(--blue-light);
    padding: 1.5rem;
    margin-top: -40px;
    position: relative;
    z-index: -1;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.polaroid-text {
    font-family: var(--font-script);
    color: white;
    font-size: 2.2rem;
    text-align: center;
    margin-top: 30px;
}

.polaroid-sub {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.9);
    text-align: center;
    margin-top: 5px;
}

/* Added subtle animation to the tapes */
.tape {
    position: absolute;
    width: 60px; height: 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.tape-tl { top: -8px; left: -15px; transform: rotate(-45deg); }
.tape-tr { top: -8px; right: -15px; transform: rotate(45deg); }


/* --- STORY GRID SECTION --- */
.story-grid-section {
    padding: 4rem 4rem 10rem;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.horizontal-tear {
    width: 100%;
    height: 30px;
    background-image: var(--torn-edge-h);
    background-size: 100% 100%;
    margin-bottom: 4rem;
    transform: scaleY(-1);
}

.grid-header {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--ink);
    margin-bottom: 3rem;
    text-align: center;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem 2rem;
}

.story-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.story-card.large {
    grid-column: span 2;
    grid-row: span 2;
}

.story-img-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    margin-bottom: 1.5rem;
    overflow: hidden;
    background: #e3e3e3;
    border-radius: 4px; /* subtle softness */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.story-card.large .story-img-container {
    padding-bottom: 60%;
}
.story-card:hover .story-img-container {
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

.story-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.story-card:hover .story-img {
    transform: scale(1.08);
}

.story-cat {
    position: absolute;
    top: 15px; left: -10px;
    background: var(--red);
    color: white;
    font-family: var(--font-script);
    padding: 0.3rem 1.2rem;
    font-size: 1.3rem;
    transform: rotate(-5deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 2;
    transition: transform 0.3s ease;
}
.story-card:hover .story-cat {
    transform: rotate(-2deg) scale(1.05);
}

.story-title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.8rem;
    transition: color 0.3s ease;
}
.story-card:hover .story-title {
    color: var(--red);
}

.story-card.large .story-title {
    font-size: 2.5rem;
}

.story-excerpt {
    font-size: 0.9rem;
    color: var(--ink-light);
    line-height: 1.6;
}

/* --- NEWSLETTER --- */
.newsletter {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    padding: 4rem 3rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    text-align: center;
    position: relative;
    transform: rotate(1deg);
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.newsletter:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}
.newsletter::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: calc(100% + 20px); height: calc(100% + 20px);
    transform: translate(-50%, -50%);
    border: 2px dashed #ccc;
    z-index: -1;
    pointer-events: none;
}

.newsletter-title {
    font-family: var(--font-script);
    font-size: 3.5rem;
    color: var(--red);
    margin-bottom: 1rem;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.newsletter-input {
    padding: 1rem 1.5rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    font-family: var(--font-sans);
    width: 350px;
    background: white;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}
.newsletter-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(204,58,58,0.2);
}

.newsletter-btn {
    background: var(--ink);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 1rem 2.5rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
}
.newsletter-btn:hover {
    background: var(--red);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(204,58,58,0.3);
}

/* --- ANIMATION UTILITIES (Premium Reveal) --- */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
    .text-columns { column-count: 1; }
    .polaroid-wrapper { width: 280px; }
}

@media (max-width: 900px) {
    .layout-grid { grid-template-columns: 1fr; padding: 2rem; }
    .sidebar { padding-right: 0; border-bottom: 2px dashed #ddd; padding-bottom: 2rem; margin-bottom: 2rem; }
    .sidebar-divider { display: none; }
    .sidebar::after { display: none; }
    .content-area { padding-left: 0; }
    .article-body { flex-direction: column; gap: 2rem; }
    .polaroid-wrapper { position: relative; top: auto; width: 100%; max-width: 380px; margin: 2rem auto; transform: rotate(0); }
    .story-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .text-columns { column-count: 1; }
    .story-grid { grid-template-columns: 1fr; }
    .story-card.large { grid-column: span 1; grid-row: span 1; }
    .hero-title { font-size: 4rem; }
    .newsletter-form { flex-direction: column; align-items: center; }
    .newsletter-input { width: 100%; }
}