/*==============================================================================
    The Nathan Family
    STORY PAGE OVERRIDES
    File    : css/story.css

    PURPOSE
    ---------------------------------------------------------------------------
    The reusable story system lives in framework.css. Keep this file limited
    to story-specific visual exceptions so the shared system remains the
    single source of truth.
==============================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&family=Lora:wght@400;500;600&display=swap');

/*==============================================================================
    STORY-SPECIFIC OVERRIDES

    Add rules below only when a particular story requires an intentional,
    documented visual exception. Do not repeat framework component styles.
==============================================================================*/

/* Anniversary artwork contains its own wording. Unlike a standard photographic
   hero, it must remain uncropped and must not carry another text overlay. */
.anniversary-hero{
    padding-top:64px;
    background:linear-gradient(180deg,#f7f0e7 0%,#efe4d6 100%);
    text-align:center;
}

.anniversary-hero__title{
    width:min(900px,90%);
    margin:0 auto;
    padding:38px 0 34px;
}

.anniversary-story .anniversary-hero h1{
    margin:0;
    color:var(--text);
    font-size:clamp(3rem,6vw,4.8rem);
    line-height:1;
    text-shadow:none;
}

.anniversary-story .anniversary-hero .story-subtitle{
    margin:18px 0 14px;
    color:var(--text-light);
    text-shadow:none;
}

.anniversary-story .anniversary-hero .story-meta{
    color:var(--text-light);
    text-shadow:none;
}

.anniversary-hero__image{
    display:block;
    width:min(1536px,100%);
    height:auto;
    margin:0 auto;
    object-fit:contain;
}

@media(max-width:720px){
    .anniversary-hero{
        padding-top:48px;
    }

    .anniversary-hero__title{
        padding:32px 0 28px;
    }

    .anniversary-story .anniversary-hero h1{
        font-size:clamp(2.6rem,13vw,3.6rem);
    }
}