/*
Theme Name: Siraf
Theme URI: https://example.com/siraf
Author: Siraf Heritage
Author URI: https://example.com
Description: قالب یک‌صفحه‌ای وردپرس برای معرفی و روایت بندر تاریخی سیراف. طراحی شده بر پایه رنگ‌های خاکی، گرمابندری و تایپوگرافی وزیرمتن، با پشتیبانی دوزبانه فارسی/انگلیسی و افکت‌های اسکرول.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: siraf
Tags: one-page, custom-colors, rtl-language-support, translation-ready
*/


/* =========================================================
   ROOT
========================================================= */

:root{
    --cream:#f4e7d0;
    --cream-light:#fffaf1;
    --cream-dark:#e5cba5;

    --orange:#d96b32;
    --orange-light:#ef955c;
    --terracotta:#a94f2d;

    --brown:#5b3829;
    --brown-dark:#241712;
    --brown-soft:#806653;

    --ink:#30221c;
    --muted:#79695e;

    --white:#ffffff;

    --line:rgba(91,56,41,.14);

    --shadow:0 30px 90px rgba(36,23,18,.13);

    --radius:24px;

    /* Motion tokens: one shared easing language used across every
       hover/entrance effect in the theme, instead of ad-hoc timings. */
    --ease-out:cubic-bezier(.16,.84,.44,1);
    --ease-soft:cubic-bezier(.22,.68,0,1.02);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);

    --glow-orange:radial-gradient(circle, rgba(239,149,92,.28), transparent 70%);
}


/* =========================================================
   RESET
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--cream-light);
    color:var(--ink);
    font-family:"Vazirmatn",sans-serif;
    overflow-x:hidden;
}

body.en{
    font-family:Arial,sans-serif;
}

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

button{
    font-family:inherit;
}

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


/* =========================================================
   GRAIN
========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;

    pointer-events:none;

    opacity:.025;

    z-index:9998;

    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}


/* =========================================================
   SCROLL PROGRESS BAR
========================================================= */

.scroll-progress{
    position:fixed;

    top:0;
    right:0;
    left:0;

    z-index:10001;

    height:3px;

    background:transparent;

    pointer-events:none;
}

.scroll-progress-bar{
    height:100%;

    width:0%;

    background:linear-gradient(90deg, var(--orange), var(--orange-light));

    box-shadow:0 0 14px rgba(217,107,50,.6);

    transition:width .12s linear;

    transform-origin:right;
}

html[dir="ltr"] .scroll-progress-bar{
    transform-origin:left;
}

@media (prefers-reduced-motion: reduce){
    .scroll-progress{
        display:none;
    }
}


/* =========================================================
   LOADER
========================================================= */

.loader{
    position:fixed;
    inset:0;
    z-index:10000;

    background:var(--brown-dark);

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

    transition:opacity .8s var(--ease-soft), visibility .8s var(--ease-soft);
}

.loader::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(217,107,50,.22),
            transparent 55%
        );

    animation:loaderGlow 3s ease-in-out infinite;
}

.loader.hide{
    opacity:0;
    visibility:hidden;
}

.loader-inner{
    position:relative;

    text-align:center;

    animation:loaderRise .9s var(--ease-soft) both;
}

.loader-symbol{
    position:relative;

    width:82px;
    height:82px;

    border:1px solid rgba(239,149,92,.5);
    border-radius:50%;

    display:grid;
    place-items:center;

    color:var(--orange-light);

    font-family:"Playfair Display",serif;
    font-size:35px;

    animation:loaderPulse 2s infinite;
}

.loader-symbol::before{
    content:"";

    position:absolute;
    inset:-10px;

    border-radius:50%;

    border:1px solid transparent;
    border-top-color:rgba(239,149,92,.65);
    border-right-color:rgba(239,149,92,.25);

    animation:loaderSpin 1.6s linear infinite;
}

.loader-name{
    margin-top:20px;

    color:var(--cream);

    font-family:"Playfair Display",serif;

    font-size:15px;
    letter-spacing:8px;

    animation:loaderTracking 1.4s .2s var(--ease-soft) both;
}

@keyframes loaderPulse{

    50%{
        transform:scale(1.08);
        box-shadow:0 0 60px rgba(217,107,50,.18);
    }

}

@keyframes loaderSpin{
    to{ transform:rotate(360deg); }
}

@keyframes loaderGlow{
    0%,100%{ opacity:.6; }
    50%{ opacity:1; }
}

@keyframes loaderRise{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:none; }
}

@keyframes loaderTracking{
    from{ opacity:0; letter-spacing:2px; }
    to{ opacity:1; letter-spacing:8px; }
}

@media (prefers-reduced-motion: reduce){
    .loader-symbol,
    .loader-symbol::before,
    .loader::before{
        animation:none;
    }
}


/* =========================================================
   HEADER
========================================================= */

.header{
    position:fixed;

    top:0;
    right:0;
    left:0;

    z-index:1000;

    padding:20px 3.5%;

    transition:padding .5s var(--ease-out);
}

.header.scrolled{
    padding:10px 3.5%;
}

.nav{
    max-width:1500px;
    height:76px;

    margin:auto;

    padding:0 12px 0 24px;

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

    background:rgba(35,23,18,.38);

    border:1px solid rgba(255,255,255,.13);

    border-radius:20px;

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    box-shadow:0 0 0 rgba(15,9,7,0);

    transition:height .5s var(--ease-out), background .5s var(--ease-out), box-shadow .5s var(--ease-out);
}

.header.scrolled .nav{
    height:68px;
    background:rgba(35,23,18,.9);
    box-shadow:0 20px 50px rgba(15,9,7,.35);
}


/* LOGO */

.logo{
    display:flex;
    align-items:center;
    gap:13px;

    color:white;

    min-width:200px;
}

.logo-symbol{
    width:48px;
    height:48px;

    border:1px solid var(--orange-light);
    border-radius:50%;

    display:grid;
    place-items:center;

    color:var(--orange-light);

    font-family:"Playfair Display",serif;
    font-size:23px;

    transition:transform .5s var(--ease-spring), background .35s ease, color .35s ease;
}

.logo:hover .logo-symbol{
    transform:rotate(-12deg) scale(1.08);

    background:var(--orange);
    color:white;
}

.logo-title{
    font-size:16px;
    font-weight:900;
}

.logo-subtitle{
    margin-top:2px;

    color:rgba(255,255,255,.4);

    font-family:Arial,sans-serif;
    font-size:7px;
    letter-spacing:3px;
}


/* NAV */

.nav-links{
    display:flex;
    align-items:center;
    gap:30px;
}

.nav-link{
    position:relative;

    color:rgba(255,255,255,.68);

    font-size:11px;

    transition:color .3s ease, transform .3s var(--ease-out);
}

.nav-link::after{
    content:"";

    position:absolute;

    right:0;
    bottom:-10px;

    width:0;
    height:2px;

    background:linear-gradient(90deg, var(--orange), var(--orange-light));
    border-radius:2px;

    box-shadow:0 0 10px rgba(239,149,92,.6);

    transition:width .4s var(--ease-out);
}

.nav-link:hover,
.nav-link.active{
    color:white;
    transform:translateY(-1px);
}

.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}


/* TOOLS */

.nav-tools{
    display:flex;
    align-items:center;
    gap:8px;
}

.lang-button{
    height:40px;

    padding:0 13px;

    display:flex;
    align-items:center;
    gap:7px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:11px;

    color:white;
    background:rgba(255,255,255,.05);

    cursor:pointer;

    font-size:10px;

    transition:background .35s ease, border-color .35s ease, transform .35s var(--ease-spring);
}

.lang-button:hover{
    background:var(--orange);
    border-color:var(--orange);
    transform:translateY(-2px);
}

.lang-button span:first-child{
    display:inline-block;
    transition:transform .5s var(--ease-spring);
}

.lang-button:hover span:first-child{
    transform:rotate(180deg);
}

.menu-button{
    display:none;

    width:42px;
    height:42px;

    border:1px solid rgba(255,255,255,.2);
    border-radius:11px;

    color:white;
    background:transparent;

    cursor:pointer;

    transition:background .3s ease, border-color .3s ease, transform .3s var(--ease-spring);
}

.menu-button:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.35);
    transform:scale(1.06);
}

.menu-button:active{
    transform:scale(.94);
}


/* =========================================================
   HERO
========================================================= */

.hero{
    min-height:100vh;

    position:relative;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:white;

    /* Falls back to a brand-color gradient when no hero image is set in
       تنظیمات سیراف → Hero; front-page.php overrides this with an inline
       background-image once an editor uploads one. */
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(217,107,50,.35),
            transparent 45%
        ),
        linear-gradient(
            90deg,
            rgba(28,18,13,.97) 0%,
            rgba(39,25,18,.94) 34%,
            rgba(91,56,41,.9) 70%,
            rgba(91,56,41,.85) 100%
        );
}

.hero-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    will-change:transform;
    z-index:0;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(180deg, rgba(28,18,13,.55), rgba(28,18,13,.8));

    z-index:1;
}

.hero-grid{
    z-index:2;
}

.hero-circle{
    z-index:2;
}

.hero::after{
    content:"";

    position:absolute;

    right:0;
    left:0;
    bottom:0;

    height:190px;

    background:linear-gradient(
        to top,
        var(--cream-light),
        transparent
    );

    z-index:3;
}


/* HERO DECOR */

.hero-grid{
    position:absolute;
    inset:0;

    opacity:.08;

    background-image:
        linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);

    background-size:90px 90px;

    mask-image:linear-gradient(
        90deg,
        black,
        transparent 85%
    );
}

.hero-circle{
    position:absolute;

    width:620px;
    height:620px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:50%;

    right:47%;
    top:50%;

    transform:translate(50%,-50%);

    animation:heroCircleSpin 90s linear infinite;
}

.hero-circle::before,
.hero-circle::after{
    content:"";

    position:absolute;

    inset:55px;

    border:1px solid rgba(255,255,255,.06);

    border-radius:50%;
}

.hero-circle::after{
    inset:110px;

    border-style:dashed;

    animation:heroCircleSpin 60s linear infinite reverse;
}

@keyframes heroCircleSpin{
    to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
    .hero-circle,
    .hero-circle::after{
        animation:none;
    }
}


/* HERO CONTENT */

.hero-content{
    position:relative;
    z-index:5;

    width:90%;
    max-width:1450px;

    margin:90px auto 0;
}

.hero-main{
    max-width:850px;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:13px;

    margin-bottom:28px;

    color:var(--orange-light);

    font-size:11px;
    font-weight:800;

    letter-spacing:.5px;
}

.eyebrow-line{
    width:50px;
    height:1px;

    background:var(--orange-light);
}

.hero h1{
    font-size:clamp(80px,13vw,190px);

    line-height:.78;

    font-weight:900;

    letter-spacing:-7px;

    color:var(--cream-light);

    animation:heroTitleIn 1.1s .1s var(--ease-soft) both;
}

body.en .hero h1{
    font-family:"Playfair Display",serif;
    letter-spacing:-8px;
}

.hero-subtitle{
    margin-top:35px;

    max-width:630px;

    color:var(--orange-light);

    font-size:clamp(18px,2.4vw,31px);

    font-weight:500;

    line-height:1.6;

    animation:heroIn 1s .2s both;
}

.hero-text{
    max-width:630px;

    margin-top:23px;

    color:rgba(255,255,255,.58);

    font-size:13px;

    line-height:2.15;

    animation:heroIn 1s .3s both;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:12px;

    margin-top:32px;

    animation:heroIn 1s .4s both;
}

.button{
    position:relative;

    min-height:51px;

    padding:0 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border-radius:10px;

    font-size:11px;
    font-weight:800;

    overflow:hidden;

    transition:transform .45s var(--ease-spring), background .35s ease, box-shadow .45s ease;
}

.button::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        115deg,
        transparent 20%,
        rgba(255,255,255,.35) 45%,
        transparent 70%
    );

    transform:translateX(-120%);

    transition:transform .7s var(--ease-out);

    pointer-events:none;
}

.button:hover::before{
    transform:translateX(120%);
}

.button:active{
    transform:scale(.96) !important;
}

.button-primary{
    color:white;

    background:var(--orange);

    box-shadow:0 18px 40px rgba(217,107,50,.2);
}

.button-primary:hover{
    transform:translateY(-4px);

    background:var(--orange-light);

    box-shadow:0 24px 55px rgba(217,107,50,.35);
}

.button-outline{
    color:white;

    border:1px solid rgba(255,255,255,.25);

    background:rgba(255,255,255,.04);
}

.button-outline:hover{
    transform:translateY(-4px);

    background:rgba(255,255,255,.1);

    box-shadow:0 18px 40px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion: reduce){
    .button::before{
        display:none;
    }
}


/* HERO INFO */

.hero-info{
    position:absolute;

    z-index:6;

    bottom:78px;

    right:5%;

    display:flex;
    align-items:center;

    gap:0;
}

html[dir="ltr"] .hero-info{
    right:auto;
    left:5%;
}

.hero-info-item{
    padding:0 25px;

    border-right:1px solid rgba(255,255,255,.2);
}

html[dir="ltr"] .hero-info-item{
    border-right:0;
    border-left:1px solid rgba(255,255,255,.2);
}

.hero-info-item:first-child{
    padding-right:0;
    border:0;
}

html[dir="ltr"] .hero-info-item:first-child{
    padding-left:0;
}

.hero-info-number{
    color:var(--orange-light);

    font-family:"Playfair Display",serif;

    font-size:18px;
}

.hero-info-label{
    margin-top:3px;

    color:rgba(255,255,255,.45);

    font-size:8px;
}


/* SCROLL */

.hero-scroll{
    position:absolute;

    z-index:6;

    bottom:50px;

    left:5%;

    display:flex;
    align-items:center;
    gap:10px;

    color:rgba(255,255,255,.4);

    font-size:8px;

    letter-spacing:3px;
}

html[dir="ltr"] .hero-scroll{
    left:auto;
    right:5%;
}

.scroll-line{
    position:relative;

    width:55px;
    height:1px;

    background:rgba(255,255,255,.3);

    overflow:hidden;
}

.scroll-line::after{
    content:"";

    position:absolute;

    top:0;
    right:-30%;

    width:30%;
    height:100%;

    background:var(--orange-light);

    animation:scrollLineMove 1.8s ease-in-out infinite;
}

html[dir="ltr"] .scroll-line::after{
    right:auto;
    left:-30%;
}

@keyframes scrollLineMove{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(-130px); }
    100%{ transform:translateX(0); }
}

html[dir="ltr"] .scroll-line::after{
    animation-name:scrollLineMoveLtr;
}

@keyframes scrollLineMoveLtr{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(130px); }
    100%{ transform:translateX(0); }
}

@media (prefers-reduced-motion: reduce){
    .scroll-line::after{
        animation:none;
    }
}


@keyframes heroIn{

    from{
        opacity:0;
        transform:translateY(35px) scale(.98);
        filter:blur(6px);
    }

    to{
        opacity:1;
        transform:none;
        filter:blur(0);
    }

}

@keyframes heroTitleIn{

    from{
        opacity:0;
        transform:translateX(160px);
        filter:blur(8px);
    }

    to{
        opacity:1;
        transform:none;
        filter:blur(0);
    }

}

@media (prefers-reduced-motion: reduce){
    .hero h1,
    .hero-subtitle,
    .hero-text,
    .hero-actions{
        animation:none;
    }
}


/* =========================================================
   SECTION SYSTEM
========================================================= */

.section{
    width:90%;
    max-width:1400px;

    margin:auto;

    padding:125px 0;
}

.section-header{
    margin-bottom:55px;
}

.section-label{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:15px;

    color:var(--orange);

    font-size:10px;
    font-weight:900;

    letter-spacing:.5px;
}

.section-label::before{
    content:"";

    width:38px;
    height:2px;

    background:var(--orange);
}

.section-title{
    max-width:850px;

    color:var(--brown-dark);

    font-size:clamp(38px,5vw,70px);

    line-height:1.2;

    font-weight:900;

    letter-spacing:-2px;
}

.section-description{
    max-width:680px;

    margin-top:18px;

    color:var(--muted);

    font-size:13px;

    line-height:2.2;
}


/* =========================================================
   INTRO
========================================================= */

.intro-section{
    position:relative;

    overflow:hidden;
}

.intro-section::before{
    content:"SIRAF";

    position:absolute;

    top:30px;
    left:-100px;

    color:rgba(91,56,41,.025);

    font-family:"Playfair Display",serif;

    font-size:240px;

    font-weight:700;

    pointer-events:none;
}

.intro{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:90px;

    align-items:center;
}

html[dir="ltr"] .intro{
    grid-template-columns:1.1fr .9fr;
}


/* INTRO IMAGE */

.intro-visual{
    position:relative;

    min-height:620px;
}

.intro-image-main{
    position:absolute;

    top:0;
    right:8%;

    width:76%;
    height:535px;

    object-fit:cover;

    border-radius:28px;

    box-shadow:var(--shadow);
}

html[dir="ltr"] .intro-image-main{
    right:auto;
    left:8%;
}

.intro-image-small{
    position:absolute;

    left:0;
    bottom:0;

    width:49%;
    height:255px;

    object-fit:cover;

    border:12px solid var(--cream-light);

    border-radius:25px;

    box-shadow:0 25px 60px rgba(36,23,18,.18);
}

html[dir="ltr"] .intro-image-small{
    left:auto;
    right:0;
}

.intro-stamp{
    position:absolute;

    top:45px;
    left:0;

    width:115px;
    height:115px;

    display:grid;
    place-items:center;

    text-align:center;

    border-radius:50%;

    color:white;

    background:var(--orange);

    font-size:10px;
    font-weight:900;

    box-shadow:0 20px 50px rgba(217,107,50,.2);
}

html[dir="ltr"] .intro-stamp{
    left:auto;
    right:0;
}

.intro-stamp::after{
    content:"";

    position:absolute;

    inset:7px;

    border:1px solid rgba(255,255,255,.3);

    border-radius:50%;
}


/* INTRO TEXT */

.intro-text{
    color:var(--muted);

    font-size:14px;

    line-height:2.3;
}

.intro-highlight{
    margin-top:30px;

    padding:22px 25px;

    border-radius:15px;

    background:var(--cream);

    border-right:3px solid var(--orange);

    color:var(--brown);

    font-size:13px;
    font-weight:700;

    line-height:2;
}

html[dir="ltr"] .intro-highlight{
    border-right:0;
    border-left:3px solid var(--orange);
}

.intro-features{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:25px;
}

.intro-feature{
    position:relative;

    padding:17px;

    background:white;

    border:1px solid var(--line);

    border-radius:13px;

    overflow:hidden;

    transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s ease;
}

.intro-feature::before{
    content:"";

    position:absolute;
    inset:0;

    background:radial-gradient(
        260px circle at var(--mx,50%) var(--my,0%),
        rgba(217,107,50,.1),
        transparent 60%
    );

    opacity:0;

    transition:opacity .4s ease;

    pointer-events:none;
}

.intro-feature:hover::before{
    opacity:1;
}

.intro-feature:hover{
    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(36,23,18,.09);

    border-color:rgba(217,107,50,.3);
}

.intro-feature-icon{
    position:relative;

    display:inline-block;

    color:var(--orange);

    font-size:18px;

    margin-bottom:8px;

    transition:transform .5s var(--ease-spring);
}

.intro-feature:hover .intro-feature-icon{
    transform:scale(1.25) rotate(-8deg);
}

.intro-feature-title{
    color:var(--brown);

    font-size:12px;
    font-weight:900;
}

.intro-feature-text{
    margin-top:4px;

    color:var(--muted);

    font-size:9px;

    line-height:1.8;
}


/* =========================================================
   MARITIME STRIP
========================================================= */

.maritime{
    background:var(--brown-dark);

    color:white;

    position:relative;

    overflow:hidden;
}

.maritime::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(217,107,50,.16),
            transparent 35%
        );
}

.maritime-inner{
    position:relative;
    z-index:2;

    width:90%;
    max-width:1400px;

    margin:auto;

    padding:75px 0;

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:80px;

    align-items:center;
}

.maritime-title{
    color:var(--cream);

    font-size:clamp(32px,4vw,56px);

    line-height:1.25;

    font-weight:900;
}

.maritime-title span{
    color:var(--orange-light);
}

.maritime-description{
    margin-top:18px;

    max-width:650px;

    color:rgba(255,255,255,.48);

    font-size:12px;

    line-height:2.1;
}

.maritime-facts{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.maritime-fact{
    padding:25px 20px;

    border:1px solid rgba(255,255,255,.1);

    border-radius:15px;

    background:rgba(255,255,255,.035);

    transition:transform .4s var(--ease-out), background .4s ease, border-color .4s ease;
}

.maritime-fact:hover{
    transform:translateY(-5px);

    background:rgba(255,255,255,.07);

    border-color:rgba(239,149,92,.35);
}

.maritime-fact-number{
    display:inline-block;

    color:var(--orange-light);

    font-family:"Playfair Display",serif;

    font-size:27px;

    transition:transform .4s var(--ease-spring);
}

.maritime-fact:hover .maritime-fact-number{
    transform:scale(1.12) translateY(-2px);
}

.maritime-fact-text{
    margin-top:5px;

    color:rgba(255,255,255,.45);

    font-size:9px;
}


/* =========================================================
   HERITAGE CARDS
========================================================= */

.heritage-section{
    background:var(--cream);
}

.heritage-layout{
    display:grid;

    grid-template-columns:1fr 1.7fr;

    gap:18px;
}

html[dir="ltr"] .heritage-layout{
    grid-template-columns:1.7fr 1fr;
}

.heritage-intro{
    padding:45px;

    border-radius:25px;

    background:var(--brown);

    color:white;

    min-height:650px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;
}

.heritage-intro-label{
    color:var(--orange-light);

    font-size:10px;
    font-weight:900;
}

.heritage-intro h3{
    margin-top:13px;

    color:var(--cream);

    font-size:32px;

    line-height:1.35;
}

.heritage-intro p{
    margin-top:14px;

    color:rgba(255,255,255,.5);

    font-size:11px;

    line-height:2;
}

.heritage-link{
    margin-top:25px;

    color:var(--orange-light);

    font-size:10px;
    font-weight:900;
}

.heritage-cards{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

.heritage-card{
    min-height:316px;

    position:relative;

    overflow:hidden;

    border-radius:25px;

    background-size:cover;
    background-position:center;

    box-shadow:0 0 0 rgba(28,18,13,0);

    transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);

    display:block;
    color:inherit;
    text-decoration:none;
}

.heritage-card:first-child{
    grid-column:span 2;
    min-height:315px;
}

.heritage-card:hover{
    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(28,18,13,.35);
}

/* Zoomed background layer: inherits the card's (possibly inline)
   background-image so the photo can scale on hover without moving
   the card's own box or the text sitting on top of it. */
.heritage-card::before{
    content:"";

    position:absolute;
    inset:0;
    z-index:0;

    background:inherit;
    background-size:cover;
    background-position:center;

    transform:scale(1);

    transition:transform .7s var(--ease-out), filter .7s ease;
}

.heritage-card:hover::before{
    transform:scale(1.12);

    filter:brightness(.9);
}

.heritage-card::after{
    content:"";

    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(28,18,13,.95),
            rgba(28,18,13,.05) 70%
        );
}

/* Fallback gradients for heritage cards without a featured image yet.
   When a post has a featured image, front-page.php sets background-image
   inline, which overrides these. */
.heritage-card:nth-child(1){
    background-image:linear-gradient(135deg, var(--brown) 0%, var(--terracotta) 100%);
}

.heritage-card:nth-child(2){
    background-image:linear-gradient(135deg, var(--terracotta) 0%, var(--brown-dark) 100%);
}

.heritage-card:nth-child(3){
    background-image:linear-gradient(135deg, var(--brown-dark) 0%, var(--brown) 100%);
}

.heritage-card-content{
    position:absolute;

    right:27px;
    left:27px;
    bottom:25px;

    z-index:2;

    transition:transform .5s var(--ease-out);
}

.heritage-card:hover .heritage-card-content{
    transform:translateY(-4px);
}

.heritage-card-tag{
    display:inline-block;

    color:var(--orange-light);

    font-size:8px;
    font-weight:900;

    letter-spacing:1px;

    transition:letter-spacing .5s var(--ease-out);
}

.heritage-card:hover .heritage-card-tag{
    letter-spacing:2.5px;
}

.heritage-card h3{
    margin-top:7px;

    color:white;

    font-size:22px;
}

.heritage-card p{
    max-width:480px;

    margin-top:7px;

    color:rgba(255,255,255,.5);

    font-size:9px;

    line-height:1.8;
}


/* =========================================================
   TIMELINE
========================================================= */

.history-section{
    background:var(--cream-light);
}

.history{
    position:relative;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:0;

    margin-top:75px;
}

.history-line{
    position:absolute;

    top:20px;

    right:0;
    left:0;

    height:1px;

    background:var(--cream-dark);
}

.history-item{
    position:relative;

    padding:65px 20px 0;

    border-right:1px solid var(--line);

    transition:transform .4s var(--ease-out);
}

.history-item:hover{
    transform:translateY(-4px);
}

html[dir="ltr"] .history-item{
    border-right:0;
    border-left:1px solid var(--line);
}

.history-item:first-of-type{
    padding-right:0;
    border:0;
}

html[dir="ltr"] .history-item:first-of-type{
    padding-left:0;
}

.history-dot{
    position:absolute;

    top:10px;
    right:20px;

    width:21px;
    height:21px;

    border:6px solid var(--cream-light);

    border-radius:50%;

    background:var(--orange);

    box-shadow:0 0 0 1px var(--orange);

    transition:transform .4s var(--ease-spring), box-shadow .4s ease;
}

.history-item:hover .history-dot{
    transform:scale(1.35);

    box-shadow:0 0 0 1px var(--orange), 0 0 0 8px rgba(217,107,50,.18);
}

html[dir="ltr"] .history-dot{
    right:auto;
    left:20px;
}

.history-item:first-of-type .history-dot{
    right:0;
}

html[dir="ltr"] .history-item:first-of-type .history-dot{
    left:0;
}

.history-number{
    color:var(--orange);

    font-family:"Playfair Display",serif;

    font-size:25px;
}

.history-title{
    margin-top:8px;

    color:var(--brown);

    font-size:14px;
    font-weight:900;
}

.history-text{
    margin-top:10px;

    color:var(--muted);

    font-size:10px;

    line-height:2;
}


/* =========================================================
   ATTRACTIONS
========================================================= */

.attractions{
    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:15px;
}

.attraction{
    position:relative;

    min-height:420px;

    padding:30px;

    display:block;
    color:inherit;
    text-decoration:none;

    border-radius:24px;

    overflow:hidden;

    color:white;

    background-size:cover;
    background-position:center;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    box-shadow:0 0 0 rgba(28,18,13,0);

    transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}

.attraction:hover{
    transform:translateY(-9px);

    box-shadow:0 32px 65px rgba(28,18,13,.4);
}

.attraction::before{
    content:"";

    position:absolute;
    inset:0;
    z-index:0;

    background:inherit;
    background-size:cover;
    background-position:center;

    transform:scale(1);

    transition:transform .7s var(--ease-out), filter .7s ease;
}

.attraction:hover::before{
    transform:scale(1.12);

    filter:brightness(.88);
}

.attraction::after{
    content:"";

    position:absolute;
    inset:0;
    z-index:1;

    background:linear-gradient(
        to top,
        rgba(29,18,13,.96),
        rgba(29,18,13,.05) 75%
    );
}

/* Fallback gradients for places without a featured image yet — overridden
   inline by front-page.php / single-siraf_place.php when one exists. */
.attraction:nth-child(1){
    background-image:linear-gradient(135deg, var(--brown) 0%, var(--terracotta) 100%);
}

.attraction:nth-child(2){
    background-image:linear-gradient(135deg, var(--terracotta) 0%, var(--brown-dark) 100%);
}

.attraction:nth-child(3){
    background-image:linear-gradient(135deg, var(--brown-dark) 0%, var(--brown) 100%);
}

.attraction-content{
    position:relative;

    z-index:2;

    transition:transform .5s var(--ease-out);
}

.attraction:hover .attraction-content{
    transform:translateY(-4px);
}

.attraction-number{
    color:var(--orange-light);

    font-family:"Playfair Display",serif;

    font-size:17px;
}

.attraction h3{
    margin-top:7px;

    color:white;

    font-size:21px;
}

.attraction p{
    margin-top:8px;

    color:rgba(255,255,255,.5);

    font-size:10px;

    line-height:1.9;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-section{
    background:var(--brown-dark);

    color:white;
}

.gallery-section .section-title{
    color:var(--cream);
}

.gallery-section .section-description{
    color:rgba(255,255,255,.43);
}

.gallery{
    display:grid;

    grid-template-columns:1.2fr .8fr .8fr;

    grid-auto-rows:220px;

    gap:12px;
}

.gallery-item{
    position:relative;

    overflow:hidden;

    border-radius:18px;

    display:block;
    color:inherit;
    text-decoration:none;

    box-shadow:0 0 0 rgba(0,0,0,0);

    transition:box-shadow .5s var(--ease-out);
}

.gallery-item:hover{
    box-shadow:0 25px 55px rgba(0,0,0,.4);
}

.gallery-zoom-cue{
    position:absolute;

    z-index:3;

    top:16px;
    left:16px;

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:white;

    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(6px);

    font-size:14px;

    opacity:0;
    transform:scale(.6) rotate(-20deg);

    transition:opacity .4s var(--ease-out), transform .4s var(--ease-spring);

    pointer-events:none;
}

.gallery-item:hover .gallery-zoom-cue{
    opacity:1;
    transform:scale(1) rotate(0);
}

.gallery-item:nth-child(1){
    grid-row:span 2;
}

.gallery-item:nth-child(4){
    grid-column:span 2;
}

.gallery-item img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .8s var(--ease-out), filter .8s ease;
}

.gallery-item::after{
    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(25,15,11,.85),
        transparent 55%
    );

    opacity:0;

    transition:opacity .4s ease;
}

.gallery-item:hover img{
    transform:scale(1.1) rotate(.6deg);

    filter:brightness(.92);
}

.gallery-item:hover::after{
    opacity:1;
}

.gallery-caption{
    position:absolute;

    z-index:2;

    right:20px;
    bottom:17px;

    color:white;

    font-size:10px;

    opacity:0;

    transform:translateY(12px);

    transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}

.gallery-item:hover .gallery-caption{
    opacity:1;

    transform:none;
}


/* =========================================================
   STORIES
========================================================= */

.stories{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

.story{
    position:relative;

    padding:38px;

    border:1px solid var(--line);

    border-radius:22px;

    background:white;

    overflow:hidden;

    transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s ease;
}

.story::before{
    content:"";

    position:absolute;

    top:0;
    right:0;
    left:0;

    height:3px;

    background:linear-gradient(90deg, var(--orange), var(--orange-light));

    transform:scaleX(0);
    transform-origin:right;

    transition:transform .5s var(--ease-out);
}

html[dir="ltr"] .story::before{
    transform-origin:left;
}

.story:hover::before{
    transform:scaleX(1);
}

.story:hover{
    transform:translateY(-7px);

    box-shadow:0 28px 65px rgba(36,23,18,.1);

    border-color:rgba(217,107,50,.2);
}

.story-top{
    display:flex;

    justify-content:space-between;

    align-items:center;
}

.story-category{
    color:var(--orange);

    font-size:9px;
    font-weight:900;
}

.story-date{
    color:#b4a59a;

    font-size:8px;
}

.story h3{
    margin-top:18px;

    color:var(--brown);

    font-size:22px;

    line-height:1.5;
}

.story p{
    margin-top:10px;

    color:var(--muted);

    font-size:11px;

    line-height:2;
}

.story-link{
    display:inline-block;

    margin-top:20px;

    color:var(--orange);

    font-size:9px;
    font-weight:900;

    transition:transform .35s var(--ease-out), color .35s ease;
}

.story-link:hover{
    color:var(--terracotta);

    transform:translateX(-4px);
}

html[dir="ltr"] .story-link:hover{
    transform:translateX(4px);
}


/* =========================================================
   JOIN
========================================================= */

.join-section{
    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(239,149,92,.2),
            transparent 25%
        ),
        var(--brown);
}

.join-section::before{
    content:"SIRAF";

    position:absolute;

    left:-70px;
    bottom:-100px;

    color:rgba(255,255,255,.025);

    font-family:"Playfair Display",serif;

    font-size:270px;

    font-weight:700;
}

.join-inner{
    position:relative;
    z-index:2;

    width:90%;
    max-width:1250px;

    margin:auto;

    padding:125px 0;

    text-align:center;
}

.join-inner .section-label{
    justify-content:center;

    color:var(--orange-light);
}

.join-inner .section-label::before{
    background:var(--orange-light);
}

.join-title{
    color:var(--cream);

    font-size:clamp(40px,5vw,70px);

    line-height:1.2;

    font-weight:900;
}

.join-description{
    max-width:680px;

    margin:20px auto 0;

    color:rgba(255,255,255,.5);

    font-size:12px;

    line-height:2.1;
}

.join-options{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:13px;

    margin-top:45px;
}

.join-option{
    position:relative;

    padding:30px 20px;

    border:1px solid rgba(255,255,255,.1);

    border-radius:18px;

    background:rgba(255,255,255,.04);

    overflow:hidden;

    transition:transform .45s var(--ease-out), border-color .45s ease, background .45s ease, box-shadow .45s ease;
}

.join-option::before{
    content:"";

    position:absolute;
    inset:0;

    background:radial-gradient(
        220px circle at var(--mx,50%) var(--my,0%),
        rgba(239,149,92,.12),
        transparent 60%
    );

    opacity:0;

    transition:opacity .4s ease;

    pointer-events:none;
}

.join-option:hover::before{
    opacity:1;
}

.join-option:hover{
    transform:translateY(-6px);

    border-color:rgba(239,149,92,.35);

    background:rgba(255,255,255,.07);

    box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.join-icon{
    position:relative;

    width:52px;
    height:52px;

    margin:auto;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:var(--orange-light);

    background:rgba(217,107,50,.15);

    font-size:20px;

    transition:transform .5s var(--ease-spring), background .4s ease;
}

.join-icon::before{
    content:"";

    position:absolute;
    inset:-8px;

    border-radius:50%;

    border:1px solid rgba(239,149,92,.4);

    opacity:0;
    transform:scale(.7);

    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

.join-option:hover .join-icon{
    transform:scale(1.1) rotate(8deg);

    background:rgba(217,107,50,.3);
}

.join-option:hover .join-icon::before{
    opacity:1;
    transform:scale(1);
}

.join-option h3{
    margin-top:15px;

    color:white;

    font-size:14px;
}

.join-option p{
    margin-top:8px;

    color:rgba(255,255,255,.4);

    font-size:9px;

    line-height:1.9;
}

.join-button{
    margin-top:35px;
}


/* =========================================================
   LOCATION
========================================================= */

.location{
    display:grid;

    grid-template-columns:.7fr 1.3fr;

    gap:18px;
}

html[dir="ltr"] .location{
    grid-template-columns:1.3fr .7fr;
}

.location-card{
    padding:45px;

    border-radius:24px;

    background:var(--cream);
}

.location-card h3{
    color:var(--brown-dark);

    font-size:30px;
}

.location-card p{
    margin-top:15px;

    color:var(--muted);

    font-size:11px;

    line-height:2;
}

.location-details{
    display:grid;

    gap:12px;

    margin-top:28px;
}

.location-detail{
    display:flex;

    align-items:center;

    gap:11px;

    color:var(--brown);

    font-size:10px;
}

.location-detail-icon{
    color:var(--orange);

    font-size:17px;
}

.map{
    position:relative;

    min-height:430px;

    overflow:hidden;

    border-radius:24px;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(217,107,50,.25),
            transparent 55%
        ),
        linear-gradient(160deg, var(--brown-dark) 0%, var(--brown) 100%);
}

.map-grid{
    position:absolute;
    inset:0;

    opacity:.25;

    background-image:
        linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);

    background-size:60px 60px;
}

.map-point{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:68px;
    height:68px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--orange);

    color:white;

    font-size:24px;

    box-shadow:
        0 0 0 16px rgba(217,107,50,.18),
        0 0 0 36px rgba(217,107,50,.07);

    animation:mapPulse 2s infinite;
}

.map-label{
    position:absolute;

    top:calc(50% + 75px);
    left:50%;

    transform:translateX(-50%);

    padding:9px 16px;

    color:white;

    background:rgba(36,23,18,.85);

    border:1px solid rgba(255,255,255,.15);

    border-radius:8px;

    font-size:9px;
}

@keyframes mapPulse{

    50%{
        box-shadow:
            0 0 0 23px rgba(217,107,50,.11),
            0 0 0 48px rgba(217,107,50,.03);
    }

}


/* =========================================================
   FOOTER
========================================================= */

footer{
    background:#19100c;

    color:white;
}

.footer{
    width:90%;
    max-width:1400px;

    margin:auto;

    padding:80px 0 35px;
}

.footer-grid{
    display:grid;

    grid-template-columns:1.5fr repeat(3,1fr);

    gap:60px;
}

.footer-brand{
    font-family:"Playfair Display",serif;

    color:var(--orange-light);

    font-size:38px;
}

.footer-description{
    max-width:390px;

    margin-top:15px;

    color:rgba(255,255,255,.35);

    font-size:10px;

    line-height:2;
}

.footer-column h4{
    color:var(--cream);

    font-size:12px;

    margin-bottom:20px;
}

.footer-column a{
    position:relative;

    display:block;

    margin-bottom:12px;

    padding-right:0;

    color:rgba(255,255,255,.38);

    font-size:10px;

    width:fit-content;

    transition:color .35s ease, padding-right .35s var(--ease-out), transform .35s var(--ease-out);
}

html[dir="ltr"] .footer-column a{
    padding-right:0;
    padding-left:0;

    transition:color .35s ease, padding-left .35s var(--ease-out), transform .35s var(--ease-out);
}

.footer-column a::before{
    content:"←";

    position:absolute;

    right:-16px;

    opacity:0;

    transition:opacity .35s ease, transform .35s var(--ease-out);

    transform:translateX(6px);
}

html[dir="ltr"] .footer-column a::before{
    content:"→";

    right:auto;
    left:-16px;

    transform:translateX(-6px);
}

.footer-column a:hover{
    color:var(--orange-light);

    padding-right:20px;

    transform:translateX(-2px);
}

html[dir="ltr"] .footer-column a:hover{
    padding-right:0;
    padding-left:20px;

    transform:translateX(2px);
}

.footer-column a:hover::before{
    opacity:1;
    transform:translateX(0);
}

.footer-bottom{
    margin-top:60px;

    padding-top:20px;

    display:flex;

    justify-content:space-between;

    border-top:1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.22);

    font-size:8px;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu{
    position:fixed;

    z-index:950;

    inset:0;

    display:flex;

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

    background:rgba(35,23,18,.98);

    transform:translateY(-100%);

    transition:transform .6s var(--ease-soft);
}

.mobile-menu.open{
    transform:translateY(0);
}

.mobile-links{
    display:grid;

    gap:25px;

    text-align:center;
}

.mobile-links a{
    color:var(--cream);

    font-size:23px;

    font-weight:800;

    opacity:0;

    transform:translateY(18px);

    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s ease;

    transition-delay:calc(var(--link-index, 0) * .06s);
}

.mobile-menu.open .mobile-links a{
    opacity:1;

    transform:none;
}

.mobile-links a:hover{
    color:var(--orange-light);
}

@media (prefers-reduced-motion: reduce){
    .mobile-links a{
        opacity:1;
        transform:none;
        transition:color .3s ease;
    }
}


/* =========================================================
   REVEAL
========================================================= */

.reveal{
    opacity:0;

    transform:translateY(35px) scale(.98);
    filter:blur(4px);

    transition:
        opacity .9s var(--ease-out),
        transform .9s var(--ease-out),
        filter .9s var(--ease-out);
}

.reveal.visible{
    opacity:1;

    transform:none;
    filter:blur(0);
}

/* Stagger groups: main.js تگ [data-reveal-group] هر بچه مستقیمش رو
   .reveal-item می‌کنه و یک --reveal-delay پلکانی می‌ده. وقتی خودِ
   گروه وارد دید بشه، .visible به گروه اضافه می‌شه و همه‌ی بچه‌ها با
   تأخیر خودشون ظاهر می‌شن. */

.reveal-item{
    opacity:0;

    transform:translateY(22px) scale(.97);

    transition:
        opacity .7s var(--ease-out),
        transform .7s var(--ease-out);

    transition-delay:var(--reveal-delay, 0s);
}

[data-reveal-group].visible .reveal-item{
    opacity:1;

    transform:none;
}

@media (prefers-reduced-motion: reduce){
    .reveal,
    .reveal-item{
        opacity:1;
        transform:none;
        filter:none;
        transition:none;
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .nav-links{
        display:none;
    }

    .menu-button{
        display:block;
    }

    .intro,
    html[dir="ltr"] .intro{
        grid-template-columns:1fr;
    }

    .intro-visual{
        order:-1;
    }

    .maritime-inner{
        grid-template-columns:1fr;
    }

    .heritage-layout,
    html[dir="ltr"] .heritage-layout{
        grid-template-columns:1fr;
    }

    .heritage-intro{
        min-height:400px;
    }

    .history{
        grid-template-columns:1fr 1fr;
        gap:35px;
    }

    .history-line{
        display:none;
    }

    .history-item,
    .history-item:first-of-type{
        padding:55px 20px 0;
        border:0;
    }

    .history-dot,
    .history-item:first-of-type .history-dot{
        right:20px;
    }

    html[dir="ltr"] .history-dot,
    html[dir="ltr"] .history-item:first-of-type .history-dot{
        right:auto;
        left:20px;
    }

    .attractions{
        grid-template-columns:1fr 1fr;
    }

    .attraction:last-child{
        grid-column:span 2;
    }

    .location,
    html[dir="ltr"] .location{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}


@media(max-width:700px){

    .header{
        padding:10px 3%;
    }

    .nav{
        height:64px;

        padding:0 9px 0 15px;

        border-radius:14px;
    }

    .logo{
        min-width:auto;
    }

    .logo-symbol{
        width:39px;
        height:39px;

        font-size:18px;
    }

    .logo-title{
        font-size:13px;
    }

    .hero{
        min-height:850px;

        background-position:center;
    }

    .hero-content{
        margin-top:75px;
    }

    .hero h1{
        font-size:74px;

        letter-spacing:-4px;
    }

    .hero-subtitle{
        font-size:19px;
    }

    .hero-text{
        font-size:11px;
    }

    .hero-actions{
        flex-direction:column;

        align-items:stretch;
    }

    .hero-actions .button{
        width:100%;
    }

    .hero-info{
        display:none;
    }

    .hero-scroll{
        display:none;
    }

    .hero-circle{
        width:400px;
        height:400px;

        right:-20%;
    }

    .section{
        padding:80px 0;
    }

    .section-title{
        font-size:36px;
    }

    .intro-visual{
        min-height:430px;
    }

    .intro-image-main{
        height:380px;
    }

    .intro-image-small{
        height:190px;
    }

    .intro-features{
        grid-template-columns:1fr;
    }

    .maritime-inner{
        padding:65px 0;
    }

    .maritime-facts{
        grid-template-columns:1fr 1fr;
    }

    .heritage-cards{
        grid-template-columns:1fr;
    }

    .heritage-card:first-child{
        grid-column:auto;
    }

    .history{
        grid-template-columns:1fr;
    }

    .attractions{
        grid-template-columns:1fr;
    }

    .attraction:last-child{
        grid-column:auto;
    }

    .gallery{
        grid-template-columns:1fr 1fr;
        grid-auto-rows:160px;
    }

    .gallery-item:nth-child(1){
        grid-row:span 1;
    }

    .gallery-item:nth-child(4){
        grid-column:auto;
    }

    .stories{
        grid-template-columns:1fr;
    }

    .join-options{
        grid-template-columns:1fr;
    }

    .location-card{
        padding:30px;
    }

    .map{
        min-height:330px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer-bottom{
        display:block;

        line-height:2;
    }

}


/* =======================================================
   SIRAF 2.0 — BREADCRUMB, SINGLE, ARCHIVE, SEARCH, 404
======================================================== */

.siraf-breadcrumb{
    max-width:1200px;
    margin:0 auto;
    padding:140px 40px 0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--muted);
}

.siraf-breadcrumb a{
    color:var(--muted);
    text-decoration:none;
    transition:color .2s ease;
}

.siraf-breadcrumb a:hover{
    color:var(--orange);
}

.siraf-breadcrumb .sep{
    opacity:.5;
}

.siraf-breadcrumb .current{
    color:var(--ink);
    font-weight:600;
}

/* ---- Archive / single page header ---- */

.siraf-page-header{
    max-width:1200px;
    margin:0 auto;
    padding:30px 40px 50px;
}

.siraf-page-header .section-label{
    margin-bottom:14px;
}

.siraf-page-header .section-title{
    margin-bottom:16px;
}

.siraf-page-header .section-description{
    max-width:680px;
}

.siraf-filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.siraf-filter-pill{
    display:inline-flex;
    align-items:center;
    padding:8px 18px;
    border-radius:999px;
    border:1px solid var(--line);
    color:var(--brown-soft);
    font-size:13px;
    text-decoration:none;
    transition:all .2s ease;
    background:var(--white);
}

.siraf-filter-pill:hover,
.siraf-filter-pill.active{
    background:var(--orange);
    border-color:var(--orange);
    color:var(--white);
}

/* ---- Generic archive grid (falls back to .story/.heritage-card styling
       per post type is preferred; this is the shared wrapper) ---- */

.siraf-archive-grid{
    max-width:1200px;
    margin:0 auto;
    padding:0 40px 100px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.siraf-archive-empty{
    max-width:1200px;
    margin:0 auto;
    padding:0 40px 120px;
    color:var(--muted);
    font-size:16px;
}

.siraf-card{
    background:var(--white);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
    transition:transform .35s ease, box-shadow .35s ease;
}

.siraf-card:hover{
    transform:translateY(-6px);
    box-shadow:0 40px 100px rgba(36,23,18,.18);
}

.siraf-card-image{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    background:var(--cream);
}

.siraf-card-body{
    padding:24px 26px 28px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}

.siraf-card-tag{
    display:inline-block;
    align-self:flex-start;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--orange);
    font-weight:700;
}

.siraf-card-title{
    font-family:'Playfair Display', serif;
    font-size:20px;
    color:var(--ink);
    line-height:1.4;
}

.siraf-card-excerpt{
    font-size:14px;
    color:var(--muted);
    line-height:1.8;
    flex:1;
}

.siraf-card-meta{
    font-size:12.5px;
    color:var(--brown-soft);
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* ---- Pagination ---- */

.siraf-pagination{
    max-width:1200px;
    margin:0 auto;
    padding:0 40px 120px;
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}

.siraf-pagination a,
.siraf-pagination span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid var(--line);
    color:var(--ink);
    text-decoration:none;
    font-size:14px;
    transition:all .2s ease;
}

.siraf-pagination a:hover,
.siraf-pagination .current{
    background:var(--orange);
    border-color:var(--orange);
    color:var(--white);
}

/* ---- Single post ---- */

.siraf-single-hero{
    max-width:1200px;
    margin:0 auto;
    padding:10px 40px 40px;
}

.siraf-single-hero img{
    width:100%;
    max-height:520px;
    object-fit:cover;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.siraf-single-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
    margin:18px 0 6px;
    font-size:13.5px;
    color:var(--muted);
}

.siraf-single-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.siraf-single-body{
    max-width:800px;
    margin:0 auto;
    padding:0 40px 80px;
}

.siraf-single-body .entry-content{
    font-size:17px;
    line-height:2;
    color:var(--ink);
}

.siraf-single-body .entry-content p{
    margin-bottom:22px;
}

.siraf-single-body .entry-content h2,
.siraf-single-body .entry-content h3{
    font-family:'Playfair Display', serif;
    color:var(--brown-dark);
    margin:36px 0 16px;
}

.siraf-single-body .entry-content img{
    border-radius:18px;
    max-width:100%;
    height:auto;
}

.siraf-artifact-specs{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 28px;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px 30px;
    margin-bottom:36px;
}

.siraf-artifact-spec dt{
    font-size:12px;
    color:var(--brown-soft);
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:6px;
}

.siraf-artifact-spec dd{
    font-size:15.5px;
    color:var(--ink);
    font-weight:600;
    line-height:1.6;
}

.siraf-terms{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:30px;
}

.siraf-terms a{
    font-size:12.5px;
    padding:6px 14px;
    border-radius:999px;
    background:var(--cream);
    color:var(--brown-soft);
    text-decoration:none;
    transition:all .2s ease;
}

.siraf-terms a:hover{
    background:var(--orange);
    color:var(--white);
}

.siraf-related{
    max-width:1200px;
    margin:0 auto;
    padding:0 40px 110px;
}

.siraf-related-title{
    font-family:'Playfair Display', serif;
    font-size:24px;
    color:var(--brown-dark);
    margin-bottom:24px;
}

.siraf-related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.siraf-map-embed{
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    margin-top:24px;
    height:320px;
}

.siraf-map-embed iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

/* ---- Search form + results ---- */

.siraf-search-form{
    max-width:640px;
    margin:0 auto;
    padding:30px 40px 10px;
    display:flex;
    gap:10px;
}

.siraf-search-form input[type="search"]{
    flex:1;
    padding:16px 20px;
    border-radius:14px;
    border:1px solid var(--line);
    background:var(--white);
    font-family:inherit;
    font-size:15px;
    color:var(--ink);
}

.siraf-search-form input[type="search"]:focus{
    outline:2px solid var(--orange);
    outline-offset:2px;
}

.siraf-search-form button{
    padding:0 26px;
    border-radius:14px;
    border:none;
    background:var(--orange);
    color:var(--white);
    font-family:inherit;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease;
}

.siraf-search-form button:hover{
    background:var(--terracotta);
}

.siraf-result-type{
    display:inline-block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--orange);
    margin-bottom:6px;
}

/* ---- 404 ---- */

.siraf-404{
    max-width:720px;
    margin:0 auto;
    padding:180px 40px 140px;
    text-align:center;
}

.siraf-404-code{
    font-family:'Playfair Display', serif;
    font-size:120px;
    line-height:1;
    color:var(--cream-dark);
    margin-bottom:10px;
}

.siraf-404-title{
    font-size:28px;
    color:var(--brown-dark);
    margin-bottom:14px;
    font-family:'Playfair Display', serif;
}

.siraf-404-text{
    color:var(--muted);
    margin-bottom:34px;
    line-height:1.9;
}

.siraf-404-search{
    display:flex;
    gap:10px;
    max-width:480px;
    margin:0 auto 30px;
}

.siraf-404-search input[type="search"]{
    flex:1;
    padding:14px 18px;
    border-radius:12px;
    border:1px solid var(--line);
    font-family:inherit;
}

.siraf-404-search button{
    padding:0 22px;
    border-radius:12px;
    border:none;
    background:var(--orange);
    color:var(--white);
    cursor:pointer;
}

/* ---- Accessibility helpers ---- */

.skip-link{
    position:absolute;
    right:10px;
    top:-60px;
    background:var(--brown-dark);
    color:var(--white);
    padding:12px 22px;
    border-radius:10px;
    z-index:9999;
    text-decoration:none;
    transition:top .2s ease;
}

.skip-link:focus{
    top:10px;
}

@media (prefers-reduced-motion: reduce){
    *{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

@media (max-width:900px){
    .siraf-archive-grid,
    .siraf-related-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:640px){
    .siraf-archive-grid,
    .siraf-related-grid{
        grid-template-columns:1fr;
    }

    .siraf-artifact-specs{
        grid-template-columns:1fr;
        padding:20px 22px;
    }
    .siraf-breadcrumb,
    .siraf-page-header,
    .siraf-single-hero,
    .siraf-single-body,
    .siraf-related,
    .siraf-archive-grid,
    .siraf-archive-empty,
    .siraf-pagination{
        padding-right:20px;
        padding-left:20px;
    }

    .siraf-404-code{
        font-size:80px;
    }
}

/* Header quick-search form */
.nav-search-form{
    display:flex;
    align-items:center;
}

.nav-search-form input[type="search"]{
    width:120px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 14px;
    font-family:inherit;
    font-size:12px;
    background:transparent;
    color:inherit;
    transition:width .25s ease, border-color .2s ease;
}

.nav-search-form input[type="search"]:focus{
    width:170px;
    outline:none;
    border-color:var(--orange);
}

@media (max-width:1080px){
    .nav-search-form{
        display:none;
    }
}