:root{
    --ink:#29213c;
    --purple:#351b50;
    --purple-2:#4a2368;
    --cream:#f6efe4;
    --paper:#fbf6ec;
    --teal:#0cae9e;
    --teal-dark:#087f78;
    --magenta:#c51c62;
    --gold:#efb41b;
    --orange:#f05b2e;
    --line:rgba(48,31,59,.13);
    --shadow:0 24px 60px rgba(43,25,54,.12);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:"Vazirmatn",Tahoma,Arial,sans-serif;
    line-height:1.9;
    overflow-x:hidden;
}

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

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

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

.section-wrap{
    width:min(1180px,calc(100% - 48px));
    margin-inline:auto;
}


/* =========================================================
   BACKGROUND MOTION
   ========================================================= */

.page-noise{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.page-noise::before,
.page-noise::after{
    content:"";
    position:absolute;
    width:clamp(280px,34vw,520px);
    height:clamp(280px,34vw,520px);
    border-radius:50%;
    filter:blur(55px);
    opacity:.10;
    will-change:transform;
}

.page-noise::before{
    background:var(--teal);
    top:8%;
    left:-8%;
    animation:ambientFloatA 18s ease-in-out infinite alternate;
}

.page-noise::after{
    background:var(--magenta);
    right:-10%;
    bottom:8%;
    animation:ambientFloatB 22s ease-in-out infinite alternate;
}

body > *:not(.page-noise){
    position:relative;
    z-index:1;
}

@keyframes ambientFloatA{
    0%{
        transform:translate3d(0,0,0) scale(1);
    }

    100%{
        transform:translate3d(45px,28px,0) scale(1.06);
    }
}

@keyframes ambientFloatB{
    0%{
        transform:translate3d(0,0,0) scale(1);
    }

    100%{
        transform:translate3d(-35px,-24px,0) scale(1.05);
    }
}


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

.site-header{
    height:82px;
    background:rgba(251,246,236,.96);
    backdrop-filter:blur(12px);

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    padding:0 max(24px,calc((100vw - 1180px)/2));

    position:sticky;
    top:0;
    z-index:30;

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

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    justify-self:start;
}

.brand-logo{
    width:44px;
    height:54px;
    object-fit:contain;
    object-position:center;
    flex:0 0 auto;
}

.brand-name{
    font-size:27px;
    letter-spacing:-1px;
}

.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;

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

    grid-column:2;
    white-space:nowrap;
}

.main-nav a{
    transition:.2s;
}

.main-nav a:hover{
    color:var(--magenta);
}

.nav-cta{
    background:var(--purple);
    color:white!important;
    padding:9px 17px;
    border-radius:10px;
}

.nav-cta span{
    margin-right:5px;
}

.header-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:10px;
}

.lang-switch{
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--purple);
    border-radius:9px;
    padding:7px 11px;
    font:700 12px "DM Sans",sans-serif;
    cursor:pointer;
}

.lang-en{
    display:none;
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 18px;
    position: relative;
}

.menu-toggle span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2.5px;
    left: 0;
    background-color: var(--purple);
    border-radius: 4px;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.menu-toggle span:nth-child(1) { top: 0px; }
.menu-toggle span:nth-child(2) { top: 7.75px; }
.menu-toggle span:nth-child(3) { top: 15.5px; }

.menu-toggle.open span:nth-child(1) {
    top: 7.75px;
    transform: rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
    top: 7.75px;
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .menu-toggle {
        display: block !important;
    }
}



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

.hero{
    min-height:660px;

    display:grid;
    grid-template-columns:1.02fr .98fr;

    direction:ltr;
    align-items:center;

    gap:45px;
    padding-block:42px;
}

.hero-copy{
    direction:rtl;
    padding-inline:18px;
}

.hero-art{
    direction:ltr;
    position:relative;
    min-height:575px;

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

.character{
    width:min(100%,590px);
    height:570px;
    object-fit:contain;
    object-position:center;

    filter:saturate(1.04);
    mix-blend-mode:multiply;
}

.hero-art:after{
    content:"";
    position:absolute;
    inset:8% 5% 5% 8%;
    border:2px dashed rgba(53,27,80,.18);
    border-radius:42% 30% 44% 28%;
    transform:rotate(-5deg);
    pointer-events:none;
}

.paint-stroke{
    position:absolute;
    border-radius:999px;
    opacity:.9;
}

.stroke-a{
    width:240px;
    height:48px;
    background:var(--teal);
    left:4%;
    top:14%;
    transform:rotate(-14deg);
    z-index:-1;
}

.stroke-b{
    width:220px;
    height:44px;
    background:var(--gold);
    right:3%;
    bottom:13%;
    transform:rotate(19deg);
    z-index:-1;
}

.sun-disc{
    position:absolute;
    width:115px;
    height:115px;
    border-radius:50%;
    background:var(--gold);
    top:4%;
    left:11%;
    z-index:-2;
}

.doodle{
    position:absolute;
    color:var(--magenta);
    font-size:40px;
    z-index:3;
}

.one{
    right:8%;
    top:19%;
    transform:rotate(20deg);
}

.two{
    left:3%;
    bottom:21%;
    font-size:34px;
    transform:rotate(-15deg);
}

.star{
    right:1%;
    bottom:27%;
    color:var(--teal);
    font-size:31px;
}

.eyebrow,
.tiny-kicker{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--magenta);
    font-weight:900;
    font-size:13px;
}

.eyebrow-line{
    display:inline-block;
    width:35px;
    height:5px;
    background:var(--gold);
    border-radius:99px;
}

.hero h1{
    font-size:clamp(45px,6vw,76px);
    line-height:1.18;
    letter-spacing:-3px;
    margin:20px 0 18px;
    font-weight:900;
}

.hero h1 em,
.why h2 em{
    font-style:normal;
    color:var(--magenta);
}

.hero-lead{
    font-size:18px;
    max-width:560px;
    color:#5c5365;
}

.hero-actions{
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:28px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    padding:13px 23px;

    border-radius:12px;
    font-weight:800;
    border:1px solid transparent;
    transition:.25s;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-primary{
    background:var(--magenta);
    color:white;
    box-shadow:0 12px 25px rgba(197,28,98,.18);
}

.btn-ghost{
    border-color:var(--purple);
    color:var(--purple);
    background:rgba(255,255,255,.25);
}

.btn-light{
    background:var(--paper);
    color:var(--purple);
    margin-top:20px;
}

.hero-note{
    margin-top:27px;
    font-size:13px;
    font-weight:700;
    color:var(--purple);
}

.hero-note span:first-child{
    color:var(--gold);
    font-size:20px;
    margin-left:7px;
}


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

.intro-band{
    background:#eadfce;
    border-block:1px solid var(--line);
    position:relative;
    overflow:hidden;
}

.intro-band:before,
.intro-band:after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:45%;
    border:24px solid rgba(197,28,98,.13);
    transform:rotate(25deg);
}

.intro-band:before{
    left:-80px;
    top:-100px;
}

.intro-band:after{
    right:-80px;
    bottom:-100px;
    border-color:rgba(12,174,158,.13);
}

.intro-grid{
    min-height:175px;

    display:grid;
    grid-template-columns:1.1fr 1.4fr .6fr;

    gap:40px;
    align-items:center;
}

.intro-title h2,
.section-heading h2,
.topic-head h2,
.why h2,
.goals h2,
.exhibition h2,
.rights h2,
.submit-copy h2,
.contact-card h2,
.newsletter h2{
    margin:4px 0;
    font-size:34px;
    line-height:1.35;
    letter-spacing:-1.3px;
}

.mini-arrows{
    color:var(--teal);
    font-weight:900;
    letter-spacing:5px;
}

.intro-grid>p{
    font-size:16px;
    color:#5f5660;
    margin:0;
}

.intro-badge{
    justify-self:end;
    background:var(--teal);
    color:white;

    padding:18px 25px;
    min-width:175px;

    transform:rotate(-2deg);

    box-shadow:7px 7px 0 rgba(53,27,80,.13);
    border-radius:7px;
}

.intro-badge strong{
    display:block;
    font-size:25px;
}

.intro-badge span{
    font-size:12px;
}


/* =========================================================
   NEWS
   ========================================================= */

.news-section{
    padding-block:80px;
}

.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:28px;
}

.heading-doodle{
    font-size:32px;
    color:var(--magenta);
}

.news-grid{
    display:grid;
    grid-template-columns:1.25fr .9fr;
    gap:25px;
}

.news-card{
    background:white;
    border:1px solid var(--line);
    border-radius:22px;
    padding:30px;

    box-shadow:0 15px 35px rgba(45,25,55,.05);

    display:grid;
    grid-template-columns:auto 1fr;
    gap:17px;

    position:relative;
    overflow:hidden;
}

.news-card:after{
    content:"";
    position:absolute;
    width:110px;
    height:7px;
    background:var(--gold);
    left:-22px;
    top:25px;
    transform:rotate(-18deg);
}

.news-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    background:#f7e5ef;
    color:var(--magenta);
    display:grid;
    place-items:center;
    font-size:26px;
}

.date-pill{
    font-size:11px;
    font-weight:800;
    color:var(--magenta);
    background:#f8e8ef;
    padding:5px 9px;
    border-radius:99px;
}

.news-card h3{
    font-size:24px;
    margin:12px 0 7px;
}

.news-card p{
    color:#6b6370;
    margin:0;
    font-size:14px;
}

.text-link{
    grid-column:2;
    font-weight:800;
    color:var(--magenta);
    font-size:13px;
    margin-top:10px;
}


/* =========================================================
   VISUAL CARD
   ========================================================= */

.visual-card{
    min-height:270px;
    border-radius:22px;
    overflow:hidden;
    position:relative;

    background-color:#fff!important;

    box-shadow:
        1px 1px 6px #b1b0b0,
        -1px -1px 6px #b1b0b0;
}

.visual-collage{
    position:absolute;
    inset:0;

    background-image:url('assets/idea2.jpg');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;

    background-color:transparent!important;
}

.visual-caption{
    position:absolute;
    right:0;
    bottom:0;
    left:0;

    z-index:2;

    color:#e7e7e7;

    text-shadow:
        2px 2px 3px #222121,
        -2px -2px 3px #222121;

    background:linear-gradient(
        transparent,
        rgba(20,10,35,.75)
    );

    padding:45px 25px 22px;
}

.visual-caption strong{
    display:block;
    font-size:32px;
}

.visual-caption span{
    font-size:16px;
}

.visual-caption small{
    display:block;
    margin-top:2px;
    opacity:.75;
    font-size:16px;
}


/* =========================================================
   AGE CARDS
   ========================================================= */

.age-section{
    padding-block:0 80px;
}

.age-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.age-card{
    background:var(--paper);

    min-height:180px;

    padding:25px;

    border-radius:0 0 24px 24px;
    border-top:7px solid;

    display:flex;
    gap:18px;

    box-shadow:0 14px 30px rgba(43,25,54,.05);

    overflow:hidden;
}

.age-card.teal{
    border-color:var(--teal);
}

.age-card.gold{
    border-color:var(--gold);
}

.age-card.coral{
    border-color:var(--orange);
}

.age-icon{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.age-icon img{
    display:block;
    height:136px;
    width:180px;
    object-fit:contain;
}

.age-card strong{
    font-size:19px;
}

.age-card p{
    font-size:13px;
    color:#6c6470;
    margin:8px 0 0;
}


/* =========================================================
   TOPICS
   ========================================================= */

.topics{
    background:var(--purple);
    color:white;
    padding-block:85px;

    position:relative;
    overflow:hidden;
}

.topics:before{
    content:"";
    position:absolute;
    inset:0;

    opacity:.18;

    background-image:url('assets/subject.png');
    background-position:center;
    background-size:cover;
}

.topic-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    position:relative;
}

.topic-head h2{
    font-size:36px;
    margin:5px 0;
}

.topic-head p{
    opacity:.7;
}

.tiny-kicker.light{
    color:#f3bd2b;
}

.topic-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;

    margin-top:35px;
    position:relative;
}

.topic-card{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;

    padding:28px 22px;
    min-height:205px;

    transition:.25s;
}

.topic-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.11);
}

.topic-symbol{
    font-size:38px;
    margin-bottom:10px;
}

.flower{
    color:#f3bd2b;
}

.family{
    color:#ef5b87;
}

.hope{
    color:#2ec4b5;
}

.peace{
    color:#8bc2ff;
}

.topic-card h3{
    margin:0;
    font-size:21px;
}

.topic-card p{
    font-size:13px;
    opacity:.7;
}


/* =========================================================
   WHY
   ========================================================= */

.why{
    display:grid;
    grid-template-columns:.9fr 1.1fr;

    gap:75px;
    align-items:center;

    padding-block:100px;

    direction:ltr;
}

.why-copy{
    direction:rtl;
}

.why h2{
    font-size:47px;
    margin:12px 0 20px;
}

.why p{
    color:#625a68;
    max-width:670px;
}

.why-art{
    height:472px;

    position:relative;

    border-radius:53% 57% 52% 53%;
    overflow:hidden;

    background-image:url('assets/mountain.png');
    background-position:center;
    background-size:cover;

    box-shadow:
        2px 2px 7px #626262,
        -2px -2px 5px #626262;
}

.quote-card{
    display:inline-block;

    background:white;

    padding:13px 20px;

    border-right:6px solid var(--magenta);

    font-weight:800;

    margin-top:10px;

    box-shadow:0 12px 25px rgba(43,25,54,.07);
}


/* =========================================================
   GOALS
   ========================================================= */

.goals{
    padding-block:30px 100px;
}

.goal-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:0;

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

.goal-item{
    display:grid;
    grid-template-columns:58px 1fr;

    gap:14px;

    padding:22px 8px;

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

    align-items:start;
}

.goal-item:nth-child(odd){
    border-left:1px solid var(--line);
    padding-left:28px;
}

.goal-item span{
    font-size:12px;
    color:var(--magenta);
    font-weight:900;
    padding-top:3px;
}

.goal-item p{
    margin:0;
    font-size:14px;
}


/* =========================================================
   EXHIBITION
   ========================================================= */

.exhibition{
    background:linear-gradient(
        110deg,
        var(--teal-dark),
        #148b80 50%,
        #3e2357
    );

    color:white;

    padding-block:70px;

    overflow:hidden;
    position:relative;
}

.exhibition:after{
    content:"✦ ✿ ✦";

    position:absolute;

    left:-10px;
    bottom:-35px;

    font-size:140px;

    opacity:.08;
}

.exhibition-inner{
    display:grid;
    grid-template-columns:1fr 1.2fr;

    gap:60px;

    align-items:center;
}

.exhibition h2{
    font-size:42px;
}

.exhibition p{
    opacity:.78;
}

.exhibition-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.exhibition-cards>div{
    padding:25px;

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

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

    border-radius:20px;
}

.exhibition-cards span{
    display:block;
    font-size:32px;
    color:#f4be22;
}

.exhibition-cards strong{
    display:block;
    font-size:18px;
    margin:5px 0;
}

.exhibition-cards small{
    opacity:.7;
}


/* =========================================================
   RIGHTS
   ========================================================= */

.rights{
    display:grid;
    grid-template-columns:90px 1fr;

    gap:25px;
    align-items:start;

    padding-block:90px;
}

.rights-icon{
    width:72px;
    height:72px;

    border-radius:20px;

    background:#f4e0e9;
    color:var(--magenta);

    display:grid;
    place-items:center;

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

.rights h2{
    margin-top:10px;
}

.rights p{
    max-width:900px;
    color:#665e6b;
    font-size:14px;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.submit-section{
    background:var(--magenta);
    color:white;
    overflow:hidden;
}

.submit-inner{
    display:grid;
    grid-template-columns:1fr .8fr;

    align-items:center;

    min-height:450px;

    gap:30px;
}

.submit-copy h2{
    font-size:45px;
    max-width:650px;
}

.submit-copy p{
    opacity:.82;
    max-width:580px;
}


/* =========================================================
   PDF CARDS
   ========================================================= */

.submission-art{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.card-box{
    width:min(700px,100%);
    min-height:350px;
    height:auto;

    background-color:#1a89bc;

    border-radius:15px;

    box-shadow:
        1px 1px 5px #5b5b5b,
        -1px -1px 5px #5b5b5b;

    padding:20px;

    box-sizing:border-box;

    position:relative;
    right:auto;

    display:grid;

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

    gap:18px;

    align-items:center;
}

.pdf-card{
    width:100%;
    min-width:0;
    height:150px;

    border-radius:10px;

    text-align:center;

    margin:0;

    background-color:#1a89bc;

    box-shadow:
        2px 2px 5px #026394,
        -2px -2px 5px #026394;

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

    padding:15px;
}

.pdf-card h2{
    font-size:20px;
    margin:0;
    word-break:break-word;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact{
    padding-block:85px;
}

.contact-card{
    background:var(--paper);

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

    padding:35px 40px;

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

    gap:50px;

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

.contact-card h2{
    font-size:38px;
}

.contact-card p{
    color:#6a616e;
}

.contact-details{
    display:grid;
    gap:12px;
}

.contact-details>a,
.contact-details>div{
    display:grid;
    grid-template-columns:50px 1fr;

    column-gap:12px;

    padding:14px 0;

    border-bottom:1px dashed var(--line);
}

.contact-details span{
    grid-row:span 2;

    width:44px;
    height:44px;

    border-radius:12px;

    background:#efe0ea;
    color:var(--magenta);

    display:grid;
    place-items:center;
}

.contact-details b{
    font-size:14px;
}

.contact-details small{
    color:#6b6370;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter{
    background:#eadfce;
    padding-block:55px;
}

.newsletter-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:35px;
}

.newsletter h2{
    font-size:27px;
}

.newsletter form{
    display:flex;

    width:min(470px,100%);

    background:white;

    padding:5px;

    border-radius:13px;

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

.newsletter input{
    border:0;
    outline:0;

    background:transparent;

    flex:1;

    padding:10px 13px;

    font-family:inherit;
}

.newsletter button{
    border:0;

    background:var(--magenta);
    color:white;

    border-radius:9px;

    padding:0 22px;

    font-family:inherit;
    font-weight:800;

    cursor:pointer;
}


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

.site-footer{
    background:var(--purple);
    color:white;
    padding-top:48px;
}

.footer-grid{
    display:grid;

    grid-template-columns:1.1fr 1fr 1.3fr .5fr;

    gap:25px;

    align-items:start;
}

.footer-brand .brand-name{
    font-size:32px;
}

.footer-brand p{
    margin:0;
    opacity:.55;
    font-size:12px;
}

.footer-org{
    font-size:13px;
}

.footer-org small{
    opacity:.5;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;

    gap:10px 22px;

    font-size:12px;
    opacity:.75;
}

.socials{
    display:flex;
    gap:8px;
    justify-content:end;
}

.socials a{
    width:34px;
    height:34px;

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

    border-radius:50%;

    display:grid;
    place-items:center;
}

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

    padding-block:16px;

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

    display:flex;
    justify-content:space-between;

    font-size:11px;

    opacity:.5;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast{
    position:fixed;

    right:25px;
    bottom:25px;

    background:var(--purple);
    color:white;

    padding:13px 18px;

    border-radius:12px;

    box-shadow:var(--shadow);

    transform:translateY(120px);
    opacity:0;

    transition:.3s;

    z-index:50;

    font-size:13px;

    max-width:calc(100vw - 40px);
}

.toast.show{
    transform:none;
    opacity:1;
}


/* =========================================================
   ANIMATION
   ========================================================= */

.reveal{
    opacity:0;
    transform:translateY(18px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}

.revealed{
    opacity:1;
    transform:none;
}


/* =========================================================
   ENGLISH
   ========================================================= */

body.en{
    font-family:"DM Sans",Arial,sans-serif;
    direction:ltr;
}

body.en .hero-copy,
body.en .why-copy{
    direction:ltr;
}

body.en .hero-art{
    direction:ltr;
}

body.en .main-nav{
    font-size:13px;
}

body.en .nav-cta span{
    margin:0 0 0 5px;
}

body.en .eyebrow-line{
    order:2;
}

body.en .hero-note span:first-child{
    margin:0 7px 0 0;
}

body.en .intro-badge{
    justify-self:end;
}

body.en .goal-item:nth-child(odd){
    border-left:0;
    border-right:1px solid var(--line);

    padding-left:8px;
    padding-right:28px;
}

body.en .quote-card{
    border-right:0;
    border-left:6px solid var(--magenta);
}

body.en .lang-fa{
    display:none;
}

body.en .lang-en{
    display:inline;
}

body.en .age-card{
    text-align:left;
}

body.en .age-grid{
    direction:ltr;
}


/* =========================================================
   TABLET
   1050px
   ========================================================= */

@media(max-width:1050px){

    .section-wrap{
        width:min(100% - 40px,1180px);
    }

    .main-nav{
        gap:17px;
        font-size:12px;
    }

    .site-header{
        padding-inline:20px;
    }

    .hero{
        gap:25px;
    }

    .hero h1{
        font-size:clamp(42px,6vw,62px);
    }

    .intro-grid{
        grid-template-columns:1fr 1.3fr;
        gap:25px;
        padding-block:30px;
    }

    .intro-badge{
        display:none;
    }

    .topic-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

}


/* =========================================================
   TABLET / MOBILE
   900px
   ========================================================= */

@media(max-width:900px){

    .section-wrap{
        width:min(100% - 32px,1180px);
    }

    /* HEADER */

/* HEADER — mobile */

.site-header{
    height:70px;

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

    padding-inline:16px;

    background:var(--paper);   /* به‌جای backdrop-filter */
    position: sticky;
    top: 0;
    z-index: 99999 !important; 
}

.main-nav {
    display: none;
    position: fixed;
    top: 74px;
    right: 14px;
    left: 14px;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.75); 
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
                inset 0 1px 1px rgba(255, 255, 255, 0.6);
    
    border-radius: 20px;
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.main-nav a {
    padding: 12px 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.main-nav a:hover {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
}

.main-nav.open{
    display:flex;
}

.main-nav a{
    padding:11px 14px;
    border-radius:10px;
    white-space:nowrap;
}

.main-nav a:hover{
    background:rgba(53,27,80,.06);
}

.nav-cta{
    text-align:center;
    margin-top:6px;
}

.brand{ order:1; justify-self:auto; }
.header-actions{ order:2; }
.menu-toggle{ display:block; }

/* فقط در موبایل: لوگو راست، دکمه‌ها چپ */
.brand{ order:1; justify-self:auto; }
.header-actions{ order:2; }
.menu-toggle{ display:block; }



    /* HERO */

    .hero{
        grid-template-columns:1fr;

        gap:10px;

        padding-top:20px;
        padding-bottom:30px;

        min-height:auto;
    }

    .hero-art{
        order:1;
        min-height:420px;
    }

    .hero-copy{
        order:2;
        padding-bottom:45px;
    }

    .character{
        height:420px;
        width:92%;
    }


    /* INTRO */

    .intro-grid{
        grid-template-columns:1fr;
        gap:20px;

        padding-block:35px;

        min-height:auto;
    }

    .intro-badge{
        display:block;
        justify-self:start;
    }


    /* NEWS */

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


    /* AGE */

    .age-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .age-card{
        min-height:190px;

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:22px 18px;
    }

    .age-icon img{
        width:160px;
        height:110px;
    }


    /* WHY */

    .why{
        grid-template-columns:1fr;

        gap:40px;

        padding-block:70px;
    }

    .why-art{
        height:390px;
        order:1;
    }

    .why-copy{
        order:2;
    }


    /* GOALS */

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

    .goal-item:nth-child(odd){
        border-left:0;
        padding-left:8px;
    }


    /* EXHIBITION */

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


    /* SUBMIT */

    .submit-inner{
        grid-template-columns:1fr;

        min-height:auto;

        padding-block:60px;
    }

    .submission-art{
        width:100%;
    }

    .card-box{
        width:100%;
        max-width:650px;
        right:auto;

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


    /* CONTACT */

    .contact-card{
        grid-template-columns:1fr;
        gap:30px;
    }


    /* FOOTER */

    .socials{
        justify-content:start;
    }
}


/* =========================================================
   MOBILE
   600px
   ========================================================= */

@media(max-width:600px){

    .section-wrap{
        width:calc(100% - 30px);
    }


    /* HEADER */

    .brand-logo{
        width:38px;
        height:46px;
    }

    .brand-name{
        font-size:23px;
    }

    .header-actions{
        gap:6px;
    }

    .lang-switch{
        padding:6px 9px;
    }


    /* HERO */

    .hero-art{
        min-height:350px;
    }

    .character{
        height:350px;
        width:98%;
    }

    .hero h1{
        font-size:clamp(35px,10vw,43px);
        letter-spacing:-2px;
    }

    .hero-lead{
        font-size:16px;
    }

    .hero-actions{
        width:100%;
    }

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

    .stroke-a{
        width:150px;
    }

    .stroke-b{
        width:140px;
    }

    .sun-disc{
        width:80px;
        height:80px;
    }

    .doodle{
        font-size:28px;
    }


    /* TITLES */

    .intro-title h2,
    .section-heading h2,
    .topic-head h2,
    .goals h2{
        font-size:28px;
    }

    .why h2,
    .submit-copy h2{
        font-size:35px;
    }

    .exhibition h2{
        font-size:32px;
    }

    .rights h2{
        font-size:29px;
    }


    /* NEWS */

    .news-section{
        padding-block:55px;
    }

    .news-card{
        grid-template-columns:1fr;
        padding:22px;
    }

    .news-icon{
        width:45px;
        height:45px;
    }

    .news-card h3{
        font-size:21px;
    }

    .text-link{
        grid-column:auto;
    }

    .visual-card{
        min-height:230px;
    }

    .visual-caption{
        padding:35px 18px 18px;
    }

    .visual-caption strong{
        font-size:26px;
    }


    /* AGE */

    .age-section{
        padding-bottom:55px;
    }

    .age-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .age-card{
        width:100%;
        min-height:auto;

        flex-direction:row;

        text-align:right;

        align-items:center;

        padding:20px 16px;

        gap:14px;
    }

    .age-icon img{
        width:105px;
        height:90px;
    }

    .age-card strong{
        font-size:17px;
    }

    .age-card p{
        font-size:12px;
        line-height:1.8;
    }


    /* TOPICS */

    .topics{
        padding-block:60px;
    }

    .topic-head{
        display:block;
    }

    .topic-head p{
        margin-top:10px;
    }

    .topic-grid{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:25px;
    }

    .topic-card{
        min-height:auto;
        padding:22px 18px;
    }


    /* WHY */

    .why{
        padding-block:60px;
    }

    .why-art{
        height:320px;
    }


    /* GOALS */

    .goals{
        padding-block:20px 60px;
    }

    .goal-item{
        grid-template-columns:45px 1fr;
        gap:10px;
        padding:18px 4px;
    }

    .goal-item p{
        font-size:13px;
    }


    /* EXHIBITION */

    .exhibition{
        padding-block:55px;
    }

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

    .exhibition-cards>div{
        padding:20px;
    }


    /* RIGHTS */

    .rights{
        grid-template-columns:1fr;
        gap:15px;

        padding-block:60px;
    }

    .rights-icon{
        margin-bottom:-5px;
    }

    .rights p{
        font-size:13px;
    }


    /* SUBMIT */

    .submit-inner{
        padding-block:50px;
    }

    .submit-copy h2{
        font-size:32px;
    }

    .submit-copy p{
        font-size:14px;
    }


    /* PDF */

    .card-box{
        width:100%;

        min-height:auto;

        padding:15px;

        grid-template-columns:1fr 1fr;

        gap:12px;
    }

    .pdf-card{
        height:120px;
        padding:10px;
    }

    .pdf-card h2{
        font-size:17px;
    }


    /* CONTACT */

    .contact{
        padding-block:60px;
    }

    .contact-card{
        padding:25px 20px;
        border-radius:20px;
    }

    .contact-card h2{
        font-size:30px;
    }


    /* NEWSLETTER */

    .newsletter{
        padding-block:40px;
    }

    .newsletter-inner{
        display:block;
    }

    .newsletter form{
        margin-top:20px;
    }

    .newsletter button{
        padding-inline:15px;
    }


    /* FOOTER */

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

    .footer-links{
        margin-top:10px;
    }

    .footer-bottom{
        display:block;
    }

    .footer-bottom span{
        display:block;
        margin-top:5px;
    }


    /* TOAST */

    .toast{
        right:15px;
        left:15px;
        bottom:15px;

        max-width:none;

        text-align:center;
    }
}


/* =========================================================
   VERY SMALL PHONES
   400px
   ========================================================= */

@media(max-width:400px){

    .section-wrap{
        width:calc(100% - 24px);
    }

    .site-header{
        padding-inline:12px;
    }

    .brand-logo{
        width:34px;
        height:42px;
    }

    .brand-name{
        font-size:20px;
    }

    .hero h1{
        font-size:32px;
        letter-spacing:-1.5px;
    }

    .hero-art{
        min-height:300px;
    }

    .character{
        height:300px;
    }

    .age-card{
        padding:16px 12px;
    }

    .age-icon img{
        width:85px;
        height:75px;
    }

    .age-card strong{
        font-size:16px;
    }

    .age-card p{
        font-size:11px;
    }

    .card-box{
        grid-template-columns:1fr;
        gap:12px;
    }

    .pdf-card{
        height:95px;
    }

    .pdf-card h2{
        font-size:16px;
    }

    .newsletter form{
        flex-direction:column;
        gap:5px;
        padding:6px;
    }

    .newsletter button{
        height:42px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .page-noise::before,
    .page-noise::after{
        animation:none;
    }

    .btn,
    .topic-card,
    .reveal{
        transition:none;
    }
}

/* --- HAMBURGER BUTTON OVERRIDE --- */
button.menu-toggle {
    display: none;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 26px !important;
    height: 18px !important;
    position: relative !important;
    outline: none !important;
}

@media (max-width: 900px) {
    button.menu-toggle {
        display: block !important;
    }
}

button.menu-toggle span {
    display: block !important;
    position: absolute !important;
    width: 100% !important;
    height: 2.5px !important;
    left: 0 !important;
    background-color: var(--purple, #351b50) !important;
    border-radius: 4px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button.menu-toggle span:nth-child(1) {
    top: 0px !important;
    transform: rotate(0deg) !important;
}

button.menu-toggle span:nth-child(2) {
    top: 8px !important;
    opacity: 1 !important;
}

button.menu-toggle span:nth-child(3) {
    top: 16px !important;
    transform: rotate(0deg) !important;
}

/* حالت باز (تبدیل به X) */
button.menu-toggle.open span:nth-child(1) {
    top: 8px !important;
    transform: rotate(45deg) !important;
}

button.menu-toggle.open span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}

button.menu-toggle.open span:nth-child(3) {
    top: 8px !important;
    transform: rotate(-45deg) !important;
}