/*==============================================================================
    The Nathan Family
    FRAMEWORK STYLESHEET
    Version : 2.0 (Milestone 3 - Foundation)
    Purpose : Master reusable stylesheet for TheNathanFamily.com

    NOTE
    ----
    This framework establishes the shared design system for the site.
    Page-specific styling belongs in:
        home.css
        story.css
        gallery.css
        about.css
        contact.css

    The Seoul Story navigation is the canonical navigation component.
==============================================================================*/

/*==============================================================================
    01. DESIGN TOKENS
==============================================================================*/

:root{

    /* Brand */
    --bg:#faf7f2;
    --paper:#ffffff;
    --text:#3f3a36;
    --text-light:#756e67;
    --light:var(--text-light);
    --accent:#c87b7b;
    --green:#73866b;
    --gold:#c8a97e;
    --border:#e8e2d8;

    /* Layout */
    --content-width:1100px;
    --reading-width:820px;

    /* Effects */
    --radius:18px;
    --shadow:0 10px 35px rgba(0,0,0,.08);
    --transition:.25s ease;
}

/*==============================================================================
    02. RESET
==============================================================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:"Lora",serif;
    line-height:1.7;
}

body.menu-open{
    overflow:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

/*==============================================================================
    03. TYPOGRAPHY
==============================================================================*/

h1,h2,h3,h4{
    font-family:"Cormorant Garamond",serif;
    font-weight:600;
    letter-spacing:.4px;
}

p{
    margin-bottom:1.4rem;
}

/*==============================================================================
    04. LAYOUT
==============================================================================*/

.container{
    width:min(var(--content-width),92%);
    margin-inline:auto;
}

.container-reading{
    width:min(var(--reading-width),92%);
    margin-inline:auto;
}

.section{
    padding:4rem 0;
}

/*==============================================================================
    05. CARD SYSTEM
==============================================================================*/

.card,
.story-card,
.update-card,
.tribute-card{
    background:var(--paper);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

/*==============================================================================
    06. BUTTONS
==============================================================================*/

.button,
.gallery-button{
    display:inline-block;
    padding:16px 34px;
    border-radius:999px;
    background:var(--gold);
    color:#fff;
    font-weight:600;
    transition:var(--transition);
}

.button:hover,
.gallery-button:hover{
    transform:translateY(-4px);
}

/*==============================================================================
    07. SEOUL NAVIGATION (SITE STANDARD)
==============================================================================*/

/* Hamburger */

.menu-toggle{

    position:fixed;
    top:24px;
    right:24px;

    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);

    color:var(--text);
    font-size:1.9rem;

    cursor:pointer;

    box-shadow:0 10px 28px rgba(0,0,0,.18);

    transition:all .25s ease;

    z-index:3000;
}

.menu-toggle:hover{
    transform:scale(1.08);
}

/* Overlay */

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:2000;
}

.overlay.active{
    opacity:1;
    visibility:visible;
}

/* Slide Menu */

.menu{
    position:fixed;
    top:0;
    right:-340px;

    width:340px;
    max-width:85%;
    height:100vh;

    background:#fffdf8;

    /* Isolate the shared component from page-level story typography. */
    font-family:"Lora",serif;
    font-size:1rem;
    line-height:1.7;

    padding:24px 28px;

    overflow-y:auto;

    box-shadow:-12px 0 35px rgba(0,0,0,.18);

    transition:right .3s ease;

    z-index:2500;
}

.menu.open{
    right:0;
}

/* Close */

.close-menu{
    position:absolute;
    top:16px;
    left:20px;
    border:none;
    background:none;
    font-size:2rem;
    color:#777;
    cursor:pointer;
}

/* Header */

.menu-header{
    text-align:center;
    margin-bottom:42px;
}

.menu-logo{
    width:115px;
    margin:0 auto 12px;
}

.menu .menu-title{
    margin:0;
    color:var(--green);
    font-size:1.55rem;
    line-height:1.2;
}

.menu-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0 16px;
}

.menu-divider span{
    flex:1;
    height:1px;
    background:var(--border);
}

.divider-flourish{
    color:var(--accent);
}

.menu .menu-quote p{
    margin:0;
    color:var(--text);
    font-family:"Lora",serif;
    font-size:1rem;
    font-weight:400;
    font-style:italic;
    line-height:1.4;
}

/* Links */

.menu hr{
    border:none;
    border-top:1px solid var(--border);
    margin:24px 0;
}

.menu a{
    display:block;
    padding:14px 12px;
    margin:6px 0;
    border-radius:12px;
    transition:all .25s ease;
    font-weight:600;
}

.menu a:hover{
    background:#faf7f2;
    color:var(--accent);
    padding-left:18px;
}

.menu a[aria-current="page"]{
    background:#faf7f2;
    color:var(--accent);
    padding-left:18px;
}

.menu-footer{
    margin-top:40px;
    text-align:center;
    color:var(--text-light);
    font-size:.85rem;
}

/*==============================================================================
    08. HERO
==============================================================================*/

.hero{
    position:relative;
    min-height:75vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.65));
}

.hero-content{
    position:relative;
    z-index:5;
    text-align:center;
    color:#fff;
}

/*==============================================================================
    09. STORY CONTENT SYSTEM

    Shared structure for every story page. Story documents opt in by adding
    the `story-page` class to the body element. This keeps story typography
    and spacing from affecting the homepage or other page types.
==============================================================================*/

.story-page{
    line-height:2;
}

.story-page h1,
.story-page h2,
.story-page h3{
    font-family:"Cormorant Garamond",serif;
    font-weight:600;
    letter-spacing:.5px;
}

.story-page h1{
    font-size:4.8rem;
    line-height:1;
    text-shadow:
        0 4px 18px rgba(0,0,0,.82),
        0 1px 3px rgba(0,0,0,.95);
}

.story-page h2{
    margin-bottom:28px;
    font-size:2.4rem;
}

.story-page p{
    margin-bottom:24px;
}

.story-page .hero{
    height:75vh;
    min-height:75vh;
}

.story-page .hero::before{

    /* Keep white story text readable over both bright and dark photographs. */
    background:linear-gradient(
        rgba(0,0,0,.42),
        rgba(0,0,0,.54),
        rgba(0,0,0,.70)
    );
}

.story-page .hero-content{
    width:90%;
    max-width:900px;
}

.story-page .hero p{
    margin:0;
}

.story-subtitle{
    margin:20px 0 18px;
    color:#f4f4f4;
    font-family:"Inter",sans-serif;
    font-size:1.4rem;
    text-shadow:
        0 2px 12px rgba(0,0,0,.82),
        0 1px 2px rgba(0,0,0,.95);
}

.story-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    color:rgba(255,255,255,.92);
    font-family:"Inter",sans-serif;
    font-size:.95rem;
    letter-spacing:.3px;
    text-shadow:
        0 2px 10px rgba(0,0,0,.82),
        0 1px 2px rgba(0,0,0,.95);
}

.meta-divider{
    opacity:.6;
}

.story-page .container{
    max-width:var(--reading-width);
    margin:0 auto;
    padding:60px 24px 50px;
}

.story-page .story-card{
    margin-bottom:70px;
    padding:55px;
    background:var(--paper);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.memory-highlight{
    background:linear-gradient(135deg,#fffdf8 0%,#faf4ea 100%);
    border-left:8px solid var(--accent);
}

.memory-highlight h2{
    color:var(--accent);
}

.reflection{
    background:#fdfbf8;
    border:1px solid var(--border);
}

.reflection h2{
    color:var(--green);
}

.reflection p{
    color:#5d5650;
    font-size:1.08rem;
    font-style:italic;
}

.story-photo{
    margin:45px 0;
}

.story-photo img{
    display:block;
    width:100%;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.caption{
    margin-top:16px;
    color:var(--text-light);
    font-size:.92rem;
    font-style:italic;
    text-align:center;
}

.story-page blockquote{
    margin:50px 0;
    padding:22px 32px;
    border-left:5px solid var(--accent);
    color:var(--green);
    font-size:1.25rem;
    font-style:italic;
}

.looking-back{
    background:#fffaf5;
    border-left:8px solid var(--accent);
}

.story-page .gallery-button{
    padding:18px 40px;
    background:#c8a97e;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    font-family:"Inter",sans-serif;
    font-size:1rem;
    transition:.25s;
}

.story-page .gallery-button:hover{
    background:#b89668;
}

.story-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:50px;
    margin-top:60px;
    padding-top:35px;
    border-top:1px solid var(--border);
    font-family:"Inter",sans-serif;
}

.story-nav a{
    color:var(--green);
    font-weight:600;
    transition:.25s;
}

.story-nav a:hover{
    color:#c8a97e;
}

.story-nav-note{
    color:var(--text-light);
    font-style:italic;
}

.story-page footer:not(.site-standard-footer){
    margin-top:90px;
    padding:60px 20px;
    color:var(--text-light);
    font-family:"Inter",sans-serif;
    text-align:center;
}

.story-page .site-standard-footer{
    margin-top:0;
}

/*==============================================================================
    10. UTILITIES
==============================================================================*/

.text-center{text-align:center;}
.hidden{display:none!important;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}

/*==============================================================================
    11. FOOTER
==============================================================================*/

.site-footer,
footer{
    margin-top:5rem;
    padding:3.5rem 1.5rem;
    text-align:center;
    color:var(--text-light);
}

/* Shared global footer (rendered by footer.js). */
.site-standard-footer{
    margin:0;
    padding:0;
    background:#f1e9df;
    color:var(--text);
    font-family:"Inter","Segoe UI",sans-serif;
    text-align:left;
}

.site-standard-footer__inner{
    width:min(1180px,92%);
    margin:0 auto;
    padding:58px 0;
    display:grid;
    grid-template-columns:1.25fr .65fr 1fr;
    gap:80px;
}

.site-standard-footer h2{
    margin-bottom:14px;
    color:#513727;
    font-size:1.15rem;
}

.site-standard-footer p{
    margin:0;
    color:#6f665f;
    font-size:.85rem;
}

.site-standard-footer nav a{
    display:block;
    margin:5px 0;
    color:#6f665f;
    font-size:.82rem;
}

.site-standard-footer nav a:hover{ color:#ae7419; }

.site-standard-footer__reflection p{
    font-family:"Cormorant Garamond",serif;
    font-size:1.25rem;
    font-style:italic;
    line-height:1.55;
}

.site-standard-footer__reflection span{
    display:block;
    margin-top:12px;
    color:#ae7419;
    font-size:1.3rem;
}

.site-standard-footer__copyright{
    padding:16px max(4%,calc((100% - 1180px)/2));
    background:#4c3326;
    color:rgba(255,255,255,.85);
    font-size:.72rem;
}

/*==============================================================================
    12. RESPONSIVE
==============================================================================*/

@media(max-width:768px){

    .menu{
        width:300px;
    }

    .menu-toggle{
        top:18px;
        right:18px;
        width:52px;
        height:52px;
    }

    .hero{
        min-height:60vh;
    }

    .section{
        padding:3rem 0;
    }

    .story-page h1{
        font-size:2.6rem;
        line-height:1.1;
    }

    .story-page h2{
        font-size:2rem;
    }

    .story-page .hero{
        height:60vh;
        min-height:75vh;
    }

    .story-page .story-card{
        padding:30px;
    }

    .story-nav{
        flex-direction:column;
        gap:20px;
    }

    .site-standard-footer__inner{
        grid-template-columns:1fr;
        gap:35px;
    }
}

/*==============================================================================
    END OF FRAMEWORK
==============================================================================*/