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

:root{
    --bg:#F5F0E8;
    --primary:#8B7355;
    --secondary:#C4B5A0;
    --accent:#6B8E6E;
    --dark:#3D3530;
    --sepia:rgba(139,115,85,0.12);
}

html{scroll-behavior:smooth}

body{
    font-family:'Lato',sans-serif;
    font-weight:400;
    line-height:1.7;
    color:var(--dark);
    background:var(--bg);
    position:relative;
    overflow-x:hidden;
}

body::before{
    content:'';
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:1000;
}

h1,h2,h3{
    font-family:'Playfair Display',serif;
    font-weight:700;
    letter-spacing:0.02em;
    line-height:1.2;
}

/* NAV */
#main-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:900;
    padding:1rem 2rem;
    background:rgba(245,240,232,0.9);
    backdrop-filter:blur(8px);
}
.nav-inner{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo{
    font-family:'Playfair Display',serif;
    font-size:1.5rem;
    color:var(--dark);
    text-decoration:none;
    font-weight:700;
}
.nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--primary);
    color:var(--primary);
    padding:0.4rem 0.8rem;
    font-family:'Lato',sans-serif;
    cursor:pointer;
    border-radius:3px;
}
.nav-links{
    list-style:none;
    display:flex;
    gap:2rem;
}
.nav-links a{
    text-decoration:none;
    color:var(--primary);
    font-size:0.9rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    transition:color 0.3s;
}
.nav-links a:hover{color:var(--accent)}

@media(max-width:680px){
    .nav-toggle{display:block}
    .nav-links{
        display:none;
        position:absolute;
        top:100%;left:0;right:0;
        background:var(--bg);
        flex-direction:column;
        padding:1rem 2rem;
        gap:1rem;
    }
    .nav-links.open{display:flex}
}

/* HERO */
#hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:6rem 2rem 4rem;
    background:linear-gradient(180deg,var(--bg) 0%,var(--secondary) 100%);
    position:relative;
}
.hero-content h1{
    font-size:clamp(2.5rem,6vw,4.5rem);
    color:var(--dark);
    margin-bottom:1rem;
}
.subtitle{
    font-size:1.2rem;
    color:var(--primary);
    font-style:italic;
}

/* LEAF ORNAMENTS */
.leaf-ornament{
    display:block;
    margin:0 auto 1.5rem;
}
.leaf-ornament.small{margin-bottom:1rem}

/* SECTION DIVIDERS */
.section-divider{
    margin-top:-1px;
    line-height:0;
}
.section-divider svg{
    width:100%;
    height:60px;
    display:block;
}
.section-divider.torn svg{height:40px}

/* CONTENT SECTIONS */
.content-section{
    padding:5rem 2rem;
}
.section-inner{
    max-width:800px;
    margin:0 auto;
}
.content-section h2{
    font-size:2.2rem;
    color:var(--dark);
    margin-bottom:2rem;
    text-align:center;
}
.content-section p{
    margin-bottom:1.2rem;
    color:var(--dark);
    font-size:1.05rem;
}

/* DARK SECTION */
.dark-section{
    background:var(--dark);
    color:var(--bg);
}
.dark-section h2,.dark-section h3{color:var(--bg)}
.dark-section p,.dark-section .entry-date{color:var(--secondary)}

/* CHRONICLE */
.chronicle-entry{
    margin-bottom:3rem;
    padding-bottom:2rem;
    border-bottom:1px solid rgba(196,181,160,0.3);
}
.chronicle-entry:last-child{border-bottom:none}
.entry-date{
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--primary);
    display:block;
    margin-bottom:0.5rem;
}
.chronicle-entry h3{
    font-size:1.6rem;
    margin-bottom:0.8rem;
}

/* PHOTO SECTION / GALLERY */
.photo-section{
    position:relative;
}
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1.5rem;
    margin-top:2rem;
}
.gallery-item{
    border-radius:4px;
    overflow:hidden;
    position:relative;
}
.photo-placeholder{
    aspect-ratio:4/3;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.photo-placeholder::after{
    content:'';
    position:absolute;
    inset:0;
    background:var(--sepia);
    filter:url(#grain);
    pointer-events:none;
}
.photo-placeholder span{
    color:#F5F0E8;
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:1.1rem;
    z-index:1;
}

/* FORM */
.wabi-form{
    max-width:500px;
    margin:2rem auto 0;
}
.form-group{
    margin-bottom:1.5rem;
}
.form-group label{
    display:block;
    margin-bottom:0.4rem;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--primary);
}
.form-group input,.form-group textarea{
    width:100%;
    padding:0.8rem 1rem;
    border:1px solid var(--secondary);
    background:rgba(255,255,255,0.5);
    border-radius:3px;
    font-family:'Lato',sans-serif;
    font-size:1rem;
    color:var(--dark);
    transition:border-color 0.3s;
}
.form-group input:focus,.form-group textarea:focus{
    outline:none;
    border-color:var(--accent);
}
.submit-btn{
    display:block;
    width:100%;
    padding:1rem;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:3px;
    font-family:'Lato',sans-serif;
    font-size:1rem;
    letter-spacing:0.05em;
    cursor:pointer;
    transition:background 0.3s,transform 0.2s;
}
.submit-btn:hover{
    background:var(--primary);
    transform:translateY(-1px);
}

/* SHAKE ERROR */
@keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}
.shake{animation:shake 0.5s ease}

/* FOOTER */
#footer{
    text-align:center;
    padding:3rem 2rem;
    background:var(--dark);
    color:var(--secondary);
}
.footer-inner{max-width:800px;margin:0 auto}
#footer p{font-size:0.9rem}

/* FADE IN */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}
.fade-in{
    opacity:0;
    animation:fadeUp 0.8s ease forwards;
}