/* =================================================================
   KDP – Foreign Relations Office | Premium dark-red theme
   ================================================================= */

/* Kurdish display font */
@font-face{
    font-family:'UniMahanNurhan';
    src:url('../fonts/UniMahanNurhan.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

:root{
    --kurdish:'UniMahanNurhan','Segoe UI',Tahoma,sans-serif;
    --dark-red:#230202;
    --burgundy:#5b0808;
    --deep-burgundy:#7a0e0e;
    --black-red:#120101;
    --gold:#d6a84a;
    --gold-light:#f3cf78;
    --cream:#f7efe2;
    --card-dark:#151010;
    --text-light:#f8f2e9;
    --text-muted:#b9a99a;

    --serif:'Georgia','Times New Roman',serif;
    --sans:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

    /* consistent gold divider line used across the site */
    --gold-line:1.5px solid rgba(214,168,74,.55);

    --maxw:100%;
    --nav-h:64px;   /* compact resting nav height; the sticky state raises this slightly */
    --gutter:40px;

    /* Brand bar + nav height. main.js overwrites this with the measured value; the
       fallback here is roughly the desktop height. */
    --header-h:240px;
    --viewport-h:100vh;
    /* S1 occupies the remaining first viewport below the measured header, so its
       lower edge and slider controls stay visible on every normal screen size. */
    --hero-h:max(400px,calc(var(--viewport-h) - var(--header-h)));
    --radius:8px;
    --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
    scroll-behavior:smooth;scroll-padding-top:var(--nav-h);
    scrollbar-width:thin;
    scrollbar-color:#94651f #170202;
} /* keep anchors clear of the sticky nav */
body{
    font-family:var(--sans);
    color:#241a17;
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
/* Slim premium scrollbar matching the burgundy-and-gold site palette. */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{
    background:#170202;
    box-shadow:inset 0 0 4px rgba(0,0,0,.55);
}
::-webkit-scrollbar-thumb{
    min-height:44px;border:2px solid #170202;border-radius:999px;
    background:linear-gradient(180deg,#b4862d 0%,#745017 100%);
    box-shadow:inset 0 0 0 1px rgba(255,225,150,.13);
}
::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#c99b3c 0%,#8d611d 100%);
}
::-webkit-scrollbar-corner{background:#170202}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.2}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
svg{fill:currentColor}

/* ---------- Reusable dark burgundy pattern background ----------
   Direct SVG, no overlays. Fallback maroon shows before the SVG loads. */
.kdp-pattern-bg{
    background-color:#260300;
    background-image:url("../images/background/background.svg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.kdp-pattern-bg-soft{
    background-color:#350500;
    background-image:url("../images/background/background.svg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.7rem 1.4rem;border-radius:4px;
    font-weight:600;font-size:.82rem;letter-spacing:.06em;
    text-transform:uppercase;cursor:pointer;border:none;
    transition:.25s ease;
}
.btn svg{width:16px;height:16px}
.btn-gold-outline{
    background:transparent;border:1.5px solid var(--gold);color:var(--gold);
}
.btn-gold-outline:hover{background:var(--gold);color:var(--black-red)}
.btn-gold{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#3a2300}
.btn-gold:hover{filter:brightness(1.07)}
.btn-red{background:linear-gradient(180deg,var(--deep-burgundy),var(--burgundy));color:var(--text-light)}
.btn-red:hover{filter:brightness(1.1)}

/* =================================================================
   HEADER
   ================================================================= */
.site-header{position:relative;z-index:30}

/* Top bar */
.topbar{
    background-color:#260300;
    background-image:url("../images/background/background.svg");
    background-size:cover;background-position:center;background-repeat:no-repeat;
    color:var(--text-muted);
    font-size:.78rem;
    border-bottom:var(--gold-line);
}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:1rem;flex-wrap:wrap}
.topbar-left{display:flex;gap:1.6rem;flex-wrap:wrap}
.topbar-item{display:inline-flex;align-items:center;gap:.4rem}
.topbar-item .ic{width:14px;height:14px;fill:var(--gold)}
.topbar-right{display:flex;align-items:center;gap:1rem}
.follow-label{color:var(--text-muted)}
.topbar-social{display:flex;gap:.55rem}
.topbar-social .soc{width:16px;height:16px;color:var(--text-muted);transition:.2s}
.topbar-social .soc:hover{color:var(--gold)}
.topbar-social svg{width:16px;height:16px}
.lang-links{display:flex;align-items:center;gap:.45rem}
.lang-links a{color:var(--text-muted);transition:.2s}
.lang-links a:hover,.lang-links a.active{color:var(--gold)}
.lang-links .divider{color:rgba(255,255,255,.2)}

/* Brand bar */
.brandbar{
    background-color:#260300;
    background-image:url("../images/background/background.svg");
    background-size:cover;background-position:center;background-repeat:no-repeat;
    border-bottom:1.5px solid rgba(214,168,74,.55);
}
.brandbar-inner{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:1.6rem;min-height:194px;direction:ltr;
}
.brand-en{color:var(--text-light);display:flex;flex-direction:column;letter-spacing:.05em}
.brand-en .brand-line-1{font-family:var(--serif);font-size:1.75rem;font-weight:700}
.brand-en .brand-line-2{font-family:var(--serif);font-size:1.35rem;color:var(--gold-light);letter-spacing:.12em}
.brand-logo img{height:164px;width:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.brand-ar{display:flex;flex-direction:column;text-align:right;color:var(--text-light)}
.brand-ar .brand-line-1{font-size:2.05rem;font-weight:700;color:var(--text-light)}
.brand-ar .brand-line-2{font-size:1.55rem;color:var(--gold-light)}

/* Navigation — sticks to the top of the viewport once the brand bar scrolls past */
.mainnav{
    position:sticky;top:0;z-index:60;
    background-color:var(--black-red);
    border-bottom:1.5px solid rgba(214,168,74,.55);
    transition:box-shadow .25s;
}
.mainnav.is-stuck{--nav-h:72px;box-shadow:0 6px 22px rgba(0,0,0,.45)}
.mainnav-inner{display:flex;align-items:center;min-height:var(--nav-h);transition:min-height .25s ease}

/* Logo + office name. Collapsed to nothing at the top of the page — the brand bar
   right above already shows both — and revealed once the nav sticks.
   visibility:hidden also keeps it out of the tab order while collapsed. */
.nav-brand{
    /* Above the breakpoint there is measured room for everything, so the brand holds
       its natural width; .nav-collapse absorbs any slack instead. */
    flex:0 0 auto;min-width:0;display:flex;align-items:center;gap:.6rem;order:1;
    max-width:0;opacity:0;visibility:hidden;overflow:hidden;white-space:nowrap;
    transition:max-width .3s ease,opacity .25s,visibility .25s,margin .3s;
}
.nav-brand img{height:64px;width:auto;flex:0 0 auto}
/* Desktop shows the logo alone — the office name would cost ~250px of bar width and
   force the links into the hamburger far too early. It is shown on mobile instead. */
.nav-brand-name{
    display:none;
    font-family:var(--serif);font-size:1.18rem;font-weight:700;
    color:#fff;letter-spacing:.04em;line-height:1.5;
    overflow:hidden;text-overflow:ellipsis;
}
/* Arabic and Kurdish glyphs (and their diacritics) sit well outside a Latin line
   box — at 1.15 the ellipsis clipping cut the tops and tails off. */
html[lang=ckb] .nav-brand-name,
html[lang=ar] .nav-brand-name{line-height:1.95;font-size:.95rem}
.mainnav.is-stuck .nav-brand{max-width:min(62vw,460px);opacity:1;visibility:visible;margin-inline-end:1.2rem}

/* Holds the page links. A row on desktop, the dropdown panel on mobile. */
.nav-collapse{flex:1 1 auto;order:2;display:flex;align-items:center;min-width:0}
/* nowrap: the links must never fall onto a second row — below the breakpoint they
   become the dropdown panel instead. */
.nav-menu{list-style:none;display:flex;gap:.4rem;flex-wrap:nowrap}
.nav-menu a{
    display:block;padding:1rem .8rem;color:var(--text-light);
    font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    white-space:nowrap;position:relative;transition:.2s;
}
.mainnav.is-stuck .nav-menu a{
    padding:1rem .8rem;font-size:.88rem;font-weight:650;letter-spacing:.045em;
}
.nav-menu a::after{
    content:"";position:absolute;left:.8rem;right:.8rem;bottom:8px;height:2px;
    background:var(--gold);transform:scaleX(0);transition:transform .25s;
}
.nav-menu a:hover{color:var(--gold-light)}
.nav-menu a.active{color:var(--gold)}
.nav-menu a.active::after,.nav-menu a:hover::after{transform:scaleX(1)}

.nav-search{position:relative}
.search-toggle{
    background:linear-gradient(180deg,var(--gold-light),var(--gold));
    border:none;cursor:pointer;width:38px;height:34px;border-radius:4px;
    display:flex;align-items:center;justify-content:center;color:var(--black-red);
}
.search-toggle svg{width:18px;height:18px}
.search-pop{
    position:absolute;right:0;top:46px;display:none;
    background:var(--card-dark);border:1px solid var(--gold);border-radius:6px;
    padding:.5rem;gap:.4rem;box-shadow:var(--shadow);width:280px;
}
.search-pop.open{display:flex}
.search-pop input{
    flex:1;background:#0d0606;border:1px solid rgba(214,168,74,.3);
    color:var(--text-light);padding:.5rem .6rem;border-radius:4px;
}
.search-pop button{background:var(--gold);border:none;border-radius:4px;width:36px;cursor:pointer;color:var(--black-red)}
.search-pop button svg{width:16px;height:16px;margin:auto}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;order:9}
.nav-toggle span{width:24px;height:2px;background:var(--gold);transition:transform .3s,opacity .2s}
/* Bars fold into an X while the panel is open */
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Language switcher (right side of nav) */
.lang-switcher{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;letter-spacing:.04em;flex:0 0 auto;order:3;white-space:nowrap}
.mainnav.is-stuck .lang-switcher{gap:.56rem;font-size:.84rem;font-weight:650;letter-spacing:.035em}
/* On desktop the bar carries the languages; the in-panel copy is unused. */
.lang-panel{display:none}
.lang-switcher a{color:var(--text-muted);transition:.2s;padding:.2rem .15rem}
.lang-switcher a:hover{color:var(--gold-light)}
.lang-switcher a.active{color:var(--gold)}
.lang-switcher .sep{color:rgba(214,168,74,.35)}
.kurdish-font,
.lang-ckb-label{font-family:var(--kurdish)}

/* RTL adjustments for Arabic / Kurdish */
[dir=rtl] .hero-label{border-left:none;border-right:3px solid var(--gold);padding-left:0;padding-right:.6rem}
[dir=rtl] .hero{direction:ltr}
[dir=rtl] .hero-content{padding:2.4rem 1.6rem 3.6rem 2.6rem;direction:rtl}
[dir=rtl] .breadcrumb .sep{transform:scaleX(-1);display:inline-block}
[dir=rtl] .date-badge{left:auto;right:0;border-radius:4px 0 0 0;border-right:none;border-left:1px solid rgba(214,168,74,.4)}
[dir=rtl] .read-more svg,[dir=rtl] .section-link svg,[dir=rtl] .btn svg{transform:scaleX(-1)}
[dir=rtl] .prose .lead,[dir=rtl] .article-content blockquote{border-left:none;border-right:4px solid var(--gold);padding-left:0;padding-right:1rem}

/* =================================================================
   HERO
   ================================================================= */
.hero-wrap{width:100%;background:var(--dark-red);overflow:hidden}
.hero-wrap>.container{max-width:none;padding:0}
.hero{position:relative;width:100%;height:var(--hero-h);min-height:var(--hero-h);overflow:hidden;user-select:none;touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain}
.hero.dragging{cursor:default}
.hero-track{display:flex;height:var(--hero-h);min-height:var(--hero-h);transition:transform .9s cubic-bezier(.22,.61,.36,1);will-change:transform}
.hero-slide{
    flex:0 0 100%;position:relative;min-width:0;height:var(--hero-h);min-height:var(--hero-h);background:var(--dark-red);
}
.hero-slide.active{opacity:1;visibility:visible}
.hero-slide::before{
    content:"";position:absolute;inset:0 auto 0 0;width:58%;z-index:1;pointer-events:none;
    background:url('../images/background/hero-overlay.png') left center / 100% 100% no-repeat;
}
.hero-content{
    position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    width:48%;min-height:var(--hero-h);padding:2.2rem clamp(1.4rem,4vw,3.5rem) 3rem;
    color:var(--text-light);
}
.hero-image{position:absolute;top:0;right:0;bottom:0;left:47%;z-index:0;overflow:hidden;background:var(--black-red)}
.hero-image img{
    display:block;width:100%;max-width:none;height:100%;min-height:var(--hero-h);
    object-fit:cover;object-position:center top;-webkit-user-drag:none;user-select:none;pointer-events:none;
}
.hero-image .hero-image-fill{display:none}
@media(min-width:641px){
    .hero-content{height:var(--hero-h);min-height:0;overflow:hidden}
    .hero h1,.hero p{
        display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
    }
    .hero h1{-webkit-line-clamp:3}
    .hero p{-webkit-line-clamp:3}
}
@media(max-width:640px){
    /* The stacked mobile slide must size to its image + copy. Keeping the desktop
       first-viewport minimum here left a device-dependent empty burgundy block
       below the copy and made S1 appear to jump as mobile browser chrome resized. */
    .hero{height:auto;min-height:0}
    .hero-track,.hero-slide{height:auto;min-height:0}
    .hero-track{align-items:flex-start}
    .hero-slide{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}
    .hero-slide::before{display:none}
    .hero-image{
        position:relative;inset:auto;grid-row:1;
        width:100%;aspect-ratio:16/10;background:var(--black-red);
    }
    .hero-image img{
        min-height:0;height:100%;width:100%;
        object-fit:contain;object-position:center;
    }
    .hero-image .hero-image-fill{
        display:block;position:absolute;z-index:0;inset:-14px;
        width:calc(100% + 28px);height:calc(100% + 28px);
        object-fit:cover;filter:blur(12px) brightness(.52);transform:scale(1.03);
    }
    .hero-image .hero-image-main{position:relative;z-index:1}
    .hero-content{
        position:relative;inset:auto;grid-row:2;justify-content:center;width:100%;min-width:0;min-height:0;overflow:hidden;
        padding:1rem 1.3rem 2.7rem;background:var(--dark-red);
    }
    .hero h1{
        max-width:100%;overflow-wrap:anywhere;
        font-size:1.35rem;line-height:1.18;margin-bottom:.35rem;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    .hero p{font-size:.82rem;line-height:1.45;max-width:100%;overflow-wrap:anywhere;margin-bottom:.7rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .hero-label{font-size:.65rem;margin-bottom:.4rem}
    .hero-content .btn{padding:.55rem 1rem;font-size:.72rem}
}
.hero-label{
    display:inline-block;color:var(--gold);font-size:.72rem;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem;
    border-left:3px solid var(--gold);padding-left:.6rem;
}
.hero h1{font-size:2.5rem;line-height:1.15;margin-bottom:1rem}
.hero p{color:var(--text-muted);font-size:.98rem;margin-bottom:1.6rem;max-width:480px}
/* Dash indicators, centered at the bottom */
.hero-dots{position:absolute;left:0;right:0;bottom:.85rem;z-index:6;display:flex;justify-content:center;align-items:center;gap:.6rem}
.hero-dots .dot{width:26px;height:3px;border-radius:2px;background:rgba(248,242,233,.4);cursor:pointer;font-size:0;transition:.25s}
.hero-dots .dot:hover{background:rgba(248,242,233,.7)}
.hero-dots .dot.active{background:var(--text-light);width:42px}
@media(max-width:640px){
    .hero-dots{
        top:calc(var(--hero-image-h, 220px) - 1.25rem);bottom:auto;
        filter:drop-shadow(0 1px 3px rgba(0,0,0,.9));
    }
}

/* Prev / next arrows on the sides, raised above center */
.hero-arrow{
    position:absolute;top:40%;transform:translateY(-50%);z-index:6;
    width:42px;height:42px;border:1px solid var(--gold);background:rgba(18,1,1,.32);
    color:var(--gold);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;
}
.hero-arrow:hover{background:var(--gold);color:var(--black-red)}
.hero-arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.hero-prev{left:1.2rem}
.hero-next{right:1.2rem}

.hero-aside{background:var(--black-red);padding:1.4rem}

/* Statements panel */
.statements-panel{color:var(--text-light)}
.statements-title{
    color:var(--gold);font-size:1rem;letter-spacing:.12em;margin-bottom:1rem;
    padding-bottom:.6rem;border-bottom:var(--gold-line);
}
.statements-list{display:flex;flex-direction:column;gap:.7rem}
.statement-item{
    display:flex;align-items:center;gap:.8rem;
    background:var(--card-dark);border:1px solid rgba(214,168,74,.14);
    border-radius:6px;padding:.8rem .9rem;transition:.2s;
}
.statement-item:hover{border-color:var(--gold);transform:translateX(3px)}
.statement-icon{flex:0 0 auto;color:var(--gold)}
.statement-icon svg{width:26px;height:26px}
.statement-text{display:flex;flex-direction:column;gap:.15rem;flex:1}
.statement-text em{color:var(--text-muted);font-size:.72rem;font-style:normal}
.statement-text strong{font-size:.86rem;font-weight:600;line-height:1.3;font-family:var(--sans)}
.statement-arrow{color:var(--gold)}
.statement-arrow svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.statements-all{width:100%;justify-content:center;margin-top:1rem}
.empty-mini{color:var(--text-muted);font-size:.85rem;padding:1rem 0}

/* =================================================================
   SECTIONS (light)
   ================================================================= */
.section{padding:3rem 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.8rem}
.section-title{
    font-size:1.5rem;color:var(--dark-red);
}
.section-link{color:var(--deep-burgundy);font-weight:600;font-size:.8rem;letter-spacing:.06em;display:inline-flex;align-items:center;gap:.4rem;text-transform:uppercase}
.section-link svg{width:16px;height:16px}
.section-link:hover{color:var(--gold)}

.home-mid{display:grid;grid-template-columns:1fr;align-items:start}

/* News grid + cards */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.news-card{
    position:relative;
    background:#fff;border:1px solid #e7dcc9;border-radius:var(--radius);
    overflow:hidden;box-shadow:0 6px 18px rgba(35,2,2,.06);
    display:flex;flex-direction:column;transition:.25s;
}
/* The whole card is one click target. The overlay hangs off .read-more rather than
   the title, because .news-card-title has overflow:hidden for its line clamp and
   would crop it. All three links in the card point at the same URL. */
.read-more::after{content:"";position:absolute;inset:0;z-index:2}
.news-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(35,2,2,.14);border-color:var(--gold)}
.news-card-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#2a1414}
.news-card-media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.news-card:hover .news-card-media img{transform:scale(1.05)}
.date-badge{
    position:absolute;bottom:0;left:0;
    background:linear-gradient(180deg,var(--deep-burgundy),var(--dark-red));
    color:var(--text-light);border:1px solid rgba(214,168,74,.4);border-left:none;border-bottom:none;
    border-radius:0 4px 0 0;padding:.24rem .55rem;text-align:center;line-height:1.02;box-shadow:var(--shadow);
}
.date-badge strong{display:block;font-size:.72rem;font-family:var(--sans)}
.date-badge em{font-style:normal;font-size:.6rem;color:var(--gold-light)}
.news-card-body{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.news-card-cat{color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;overflow-wrap:anywhere;word-break:normal}
.news-card-title{font-size:1.05rem;color:#241a17;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;word-break:normal}
/* Hover is driven from the card, since the overlay sits above the inner links */
.news-card:hover .news-card-title a{color:var(--deep-burgundy)}
.news-card-excerpt{color:#6b5d52;font-size:.88rem;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;word-break:normal}
.read-more{
    color:var(--deep-burgundy);font-weight:700;font-size:.74rem;letter-spacing:.08em;
    display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;
}
.read-more svg{width:15px;height:15px}
.read-more:hover{color:var(--gold)}

/* Latest-news slider (home) */
.news-slider{
    display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;padding-bottom:.5rem;cursor:grab;
    scrollbar-width:none;-ms-overflow-style:none;
}
.news-slider::-webkit-scrollbar{display:none}
.news-slider.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.news-slider:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.news-slider .news-card{flex:0 0 calc((100% - 3rem)/3);scroll-snap-align:start}
@media(max-width:1024px){.news-slider .news-card{flex-basis:calc((100% - 1.5rem)/2)}}
@media(max-width:560px){.news-slider .news-card{flex-basis:86%}}

/* S4: compact one-row news and activity sections */
.s4-section{padding:2.25rem 0 2.7rem}
.s4-section-head{align-items:center;margin-bottom:1rem}
.s4-section-head .section-title{
    position:relative;padding-left:0;font-family:var(--sans);font-size:.82rem;
    font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.s4-section-head .section-title a{
    position:relative;z-index:10;display:inline-flex;align-items:center;
    min-height:40px;padding:.35rem .2rem;color:inherit;
    pointer-events:auto;touch-action:manipulation;cursor:pointer;
}
.s4-section-head .section-title a:hover{color:var(--gold)}
[dir=rtl] .s4-section-head .section-title{padding-left:0;padding-right:0}
html[lang="ar"] .s4-section-head .section-title,
html[lang="ckb"] .s4-section-head .section-title{
    font-size:1.05rem;line-height:1.4;letter-spacing:0;text-transform:none;
}
.s4-news-marquee{
    width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior-inline:contain;touch-action:pan-x pan-y;cursor:grab;
    user-select:none;-webkit-user-select:none;
}
.s4-news-marquee::-webkit-scrollbar{display:none}
.s4-news-marquee.is-dragging{cursor:grabbing;scroll-behavior:auto}
[dir=rtl] .s4-news-marquee{direction:ltr}
[dir=rtl] .s4-news-marquee .news-card{direction:rtl}
.s4-news-track{
    display:flex;width:max-content;
    animation:s4-news-marquee-roll 80s linear infinite;
    will-change:transform;
}
.s4-news-marquee:hover .s4-news-track,
.s4-news-marquee.is-dragging .s4-news-track,
.s4-news-marquee.is-touching .s4-news-track{animation-play-state:paused}
@keyframes s4-news-marquee-roll{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
}
.s4-news-group{display:flex;gap:1rem;padding-right:1rem}
[dir=rtl] .s4-news-group{padding-right:0;padding-left:1rem}
.s4-news-track .news-card{
    flex:0 0 clamp(180px,calc((100vw - (2 * var(--gutter)) - 5rem) / 6),240px);
    width:clamp(180px,calc((100vw - (2 * var(--gutter)) - 5rem) / 6),240px);
    border-radius:6px;
}
.s4-news-track .news-card-media{aspect-ratio:16/10}
.s4-news-track .news-card-media img,
.s4-activity-row .news-card-media img{
    pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.s4-news-track .news-card-body{padding:.75rem .75rem .85rem;gap:.4rem}
.s4-news-track .news-card-cat,.s4-news-track .news-card-excerpt{display:none}
.s4-news-track .news-card-title{font-size:.88rem;line-height:1.35;-webkit-line-clamp:3}
.s4-news-track .read-more{font-size:.66rem;margin-top:.2rem}

.s4-activities{margin-top:2rem}
.s4-activity-carousel{
    display:grid;grid-template-columns:38px minmax(0,1fr) 38px;
    align-items:center;gap:.65rem;
}
.s4-activity-row{
    display:flex;gap:1.35rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
}
.s4-activity-row::-webkit-scrollbar{display:none}
.s4-activity-row .news-card{
    flex:0 0 calc((100% - 2.7rem)/3);min-width:0;scroll-snap-align:start;
    display:grid;grid-template-columns:minmax(125px,42%) minmax(0,58%);
    align-items:stretch;border:0;border-radius:0;background:transparent;box-shadow:none;
    overflow:visible;padding-right:1.1rem;
}
.s4-activity-row .news-card:not(:last-child)::before{
    content:"";position:absolute;right:0;top:4%;bottom:4%;width:1px;background:#dfd0bb;
}
[dir=rtl] .s4-activity-row .news-card{padding-right:0;padding-left:1.1rem}
[dir=rtl] .s4-activity-row .news-card:not(:last-child)::before{right:auto;left:0}
.s4-activity-row .news-card:hover{transform:none;box-shadow:none;border-color:transparent}
.s4-activity-row .news-card-media{height:165px;aspect-ratio:auto;border-radius:5px}
.s4-activity-row .news-card-body{padding:.3rem .15rem .3rem .8rem;gap:.35rem}
[dir=rtl] .s4-activity-row .news-card-body{padding:.3rem .8rem .3rem .15rem}
.s4-activity-row .news-card-cat{font-size:.63rem}
.s4-activity-row .news-card-title{font-size:1rem;line-height:1.3;-webkit-line-clamp:2}
.s4-activity-row .news-card-excerpt{font-size:.76rem;line-height:1.5;-webkit-line-clamp:3}
.s4-activity-row .read-more{font-size:.66rem;margin-top:.1rem}
.s4-activity-arrow{
    position:static;z-index:5;transform:none;
    width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
    border:1px solid rgba(91,8,8,.55);background:rgba(255,250,240,.94);
    color:var(--deep-burgundy);cursor:pointer;transition:.2s;
}
.s4-activity-arrow:hover{background:var(--deep-burgundy);color:#fff}
.s4-activity-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .s4-activity-arrow svg{transform:scaleX(-1)}
@media(max-width:1050px){
    .s4-news-track .news-card{flex-basis:clamp(180px,24vw,220px);width:clamp(180px,24vw,220px)}
    .s4-activity-row .news-card{flex-basis:calc((100% - 1.35rem)/2)}
}
@media(max-width:620px){
    .s4-section{padding:1.7rem 0 2rem}
    .s4-news-track .news-card{flex-basis:72vw;width:72vw}
    .s4-activity-carousel{grid-template-columns:34px minmax(0,1fr) 34px;gap:.35rem}
    .s4-activity-row .news-card{flex-basis:88%;grid-template-columns:42% 58%;padding-right:.7rem}
    [dir=rtl] .s4-activity-row .news-card{padding-right:0;padding-left:.7rem}
    .s4-activity-row .news-card-media{height:150px}
}

/* S5: publications, documents and featured statement */
.s5-section{
    position:relative;overflow:hidden;color:#f7efe5;
    border:0;
    background:#1b0807;
    box-shadow:none;
}
.s5-section::before{
    content:"";display:block;position:absolute;z-index:0;inset:0;
    background:url("../images/background/index/S3-BG.png") center / cover no-repeat;
    transform:rotate(180deg);pointer-events:none;
}
.s5-inner{
    position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    min-height:360px;padding-top:1.4rem;padding-bottom:.65rem;direction:ltr;
}
.s5-publications{
    position:relative;grid-column:1;grid-row:1;min-width:0;padding-right:2rem;
    border-right:1px solid rgba(214,168,74,.18);
}
[dir=rtl] .s5-publications{
    direction:rtl;grid-column:2;grid-row:1;padding-right:0;padding-left:2rem;
    border-right:0;border-left:1px solid rgba(214,168,74,.18);
}
.s5-publications>h2{
    position:relative;z-index:1;display:block;width:100%;white-space:normal;overflow:visible;line-height:1.35;
    color:#fff;font-size:.88rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
    margin:0 0 1rem;padding-left:.35rem;
}
[dir=rtl] .s5-publications>h2{padding-left:0;padding-right:.35rem}
.s5-tabs{
    position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1rem;
    border:1px solid rgba(214,168,74,.2);border-radius:5px;overflow:visible;
}
.s5-tabs button{
    position:relative;display:grid;place-items:center;min-height:34px;padding:.35rem .45rem;
    color:rgba(247,239,229,.65);font-size:.62rem;font-weight:700;letter-spacing:.035em;
    font-family:inherit;text-align:center;text-transform:uppercase;cursor:pointer;
    border:0;border-right:1px solid rgba(214,168,74,.16);background:transparent;
}
.s5-tabs button:last-child{border-right:0}
[dir=rtl] .s5-tabs button{border-right:0;border-left:1px solid rgba(214,168,74,.16)}
[dir=rtl] .s5-tabs button:last-child{border-left:0}
.s5-tabs button:hover{color:#f6d58d;background:rgba(108,25,18,.24)}
.s5-tabs button:focus-visible{z-index:2;outline:2px solid #e5b75a;outline-offset:2px}
.s5-tabs button.active{color:#f1c86e;background:rgba(108,25,18,.4)}
.s5-tabs button.active::after{
    content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
    width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
    border-top:7px solid #b28132;
}
.s5-document-panel{position:relative;z-index:1}
.s5-document-panel[hidden]{display:none}
.s5-document-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.s5-document-card{
    min-height:158px;display:flex;flex-direction:column;padding:.85rem .75rem .7rem;
    border:1px solid rgba(214,168,74,.24);border-radius:5px;
    background:linear-gradient(145deg,rgba(91,25,20,.34),rgba(31,7,6,.42));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.s5-document-heading{display:grid;grid-template-columns:34px minmax(0,1fr);gap:.55rem;align-items:start}
.s5-document-icon{
    width:34px;height:36px;display:grid;place-items:center;color:#e2b85a;
    border:1px solid rgba(214,168,74,.3);border-radius:4px;background:rgba(214,168,74,.08);
}
.s5-document-icon svg{
    width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;
}
.s5-document-card h3{
    color:#fff;font-size:.72rem;line-height:1.45;font-weight:650;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.s5-document-card>p{
    color:rgba(247,239,229,.62);font-size:.61rem;letter-spacing:.025em;margin:.75rem 0 .55rem;
}
.s5-document-card>a{
    display:inline-flex;align-items:center;gap:.35rem;width:max-content;margin-top:auto;
    color:#e9bb59;font-size:.64rem;font-weight:700;
}
.s5-document-card>a:hover{color:#ffe3a0}
.s5-document-card>a svg{
    width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
}
[dir=rtl] .s5-document-card>a svg{transform:scaleX(-1)}
.s5-empty{
    min-height:158px;display:grid;place-items:center;color:rgba(247,239,229,.62);
    border:1px dashed rgba(214,168,74,.25);border-radius:5px;font-size:.8rem;
}
.s5-statement{
    position:relative;grid-column:2;grid-row:1;min-width:0;min-height:410px;padding:0 1.3rem 0 2.2rem;overflow:hidden;
}
[dir=rtl] .s5-statement{direction:rtl;grid-column:1;grid-row:1;padding:0 2.2rem 0 1.3rem}
.s5-statement::before{
    content:"";position:absolute;left:2.2rem;right:1.3rem;top:.15rem;height:1px;
    background:linear-gradient(90deg,rgba(214,168,74,.25),rgba(214,168,74,.06));
}
[dir=rtl] .s5-statement::before{left:1.3rem;right:2.2rem}
.s5-statement-mark{
    position:absolute;z-index:0;right:1.2rem;left:auto;top:auto;bottom:.15rem;
    width:205px;max-width:38%;opacity:.2;
    filter:contrast(1.12) drop-shadow(0 3px 10px rgba(0,0,0,.2));
    pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
[dir=rtl] .s5-statement-mark{right:1.2rem;left:auto}
.s5-statement-copy{
    position:relative;z-index:2;max-width:46%;
    margin-inline-start:5%;margin-inline-end:auto;padding-top:1rem;
}
[dir=rtl] .s5-statement-copy{margin-inline-start:5%;margin-inline-end:auto}
.s5-quote-mark{
    display:block;height:43px;color:#e7b95c;font-family:Georgia,var(--serif);font-size:4rem;
    font-weight:700;line-height:1;
}
.s5-statement blockquote{
    color:#eee1d3;font-family:Georgia,var(--serif);font-size:clamp(1.1rem,1.65vw,1.52rem);
    font-style:italic;line-height:1.5;margin:0 0 1.15rem;
}
.s5-statement strong,
.s5-statement small{
    display:block;max-width:65%;margin-inline-start:0;margin-inline-end:auto;
}
.s5-statement strong{color:#e4b65a;font-family:Georgia,var(--serif);font-size:1.06rem;margin-bottom:.22rem}
.s5-statement small{color:rgba(247,239,229,.76);font-size:.8rem;line-height:1.45}
.s5-person{
    position:absolute;z-index:3;right:0;left:auto;bottom:0;width:min(31%,400px);max-height:475px;
    object-fit:contain;object-position:center bottom;pointer-events:none;user-select:none;
    -webkit-user-select:none;-webkit-user-drag:none;filter:drop-shadow(-14px 4px 20px rgba(0,0,0,.32));
}
[dir=rtl] .s5-person{right:auto;left:0;filter:drop-shadow(14px 4px 20px rgba(0,0,0,.32))}
html[lang=ar] .s5-document-card h3,
html[lang=ckb] .s5-document-card h3{font-size:.78rem}
html[lang=ar] .s5-tabs button,
html[lang=ckb] .s5-tabs button{font-size:.68rem;letter-spacing:0}

@media(max-width:980px){
    .s5-inner{grid-template-columns:1fr;padding-top:1.7rem;padding-bottom:0}
    .s5-publications,[dir=rtl] .s5-publications{
        grid-column:1;grid-row:1;padding:0 0 1.7rem;border:0;border-bottom:1px solid rgba(214,168,74,.18);
    }
    .s5-statement,[dir=rtl] .s5-statement{grid-column:1;grid-row:2;min-height:410px;padding:1.2rem 1rem 0}
    .s5-statement::before,[dir=rtl] .s5-statement::before{left:1rem;right:1rem;top:0}
    .s5-statement-copy{max-width:52%;padding-top:.5rem}
    .s5-person{right:0;bottom:0;width:min(48%,390px)}
}
@media(max-width:620px){
    .s5-inner{padding-top:1.35rem}
    .s5-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
    .s5-tabs button:nth-child(2){border-right:0}
    [dir=rtl] .s5-tabs button:nth-child(2){border-left:0}
    .s5-tabs button:nth-child(-n+2){border-bottom:1px solid rgba(214,168,74,.16)}
    .s5-document-grid{grid-template-columns:1fr}
    .s5-document-card{min-height:132px}
    .s5-statement,[dir=rtl] .s5-statement{min-height:500px;padding:1rem .25rem 0}
    .s5-statement-copy{max-width:100%;margin-inline:0;padding:0 .65rem 347px}
    .s5-quote-mark{height:32px;font-size:3.4rem}
    .s5-statement blockquote{font-size:1.1rem;line-height:1.45;margin-bottom:.55rem}
    .s5-statement strong,.s5-statement small{max-width:100%}
    .s5-person{
        right:50%;bottom:0;transform:translateX(50%);width:auto;max-width:94%;max-height:350px;
    }
    [dir=rtl] .s5-person{left:50%;right:auto;transform:translateX(-50%)}
    .s5-statement-mark,[dir=rtl] .s5-statement-mark{
        right:.25rem;left:auto;max-width:42%;transform:none;top:auto;bottom:.25rem;
    }
}

/* S6: transparent international engagement section */
.s6-section{
    position:relative;padding:clamp(2.6rem,5vw,4.8rem) 0;
    overflow:hidden;background:transparent;
}
.s6-inner{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.34fr);
    align-items:center;gap:clamp(.7rem,1.6vw,1.5rem);
}
.s6-map-panel{min-width:0}
.s6-map-panel h2{
    color:var(--deep-burgundy);font-size:clamp(.82rem,1vw,1rem);font-weight:800;
    letter-spacing:.095em;text-transform:uppercase;margin:0 0 1rem;
}
.s6-world-map{
    display:block;width:min(100%,820px);height:auto;object-fit:contain;
    pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
    filter:drop-shadow(0 8px 13px rgba(77,39,2,.08));
}
[dir=rtl] .s6-world-map{margin-left:auto}
.s6-stats{
    display:flex;flex-direction:column;border-left:1px solid rgba(91,8,8,.2);
    padding-left:clamp(.8rem,1.25vw,1.25rem);
}
[dir=rtl] .s6-stats{
    border-left:0;border-right:1px solid rgba(91,8,8,.2);
    padding-left:0;padding-right:clamp(.8rem,1.25vw,1.25rem);
}
.s6-stat{
    display:flex;flex-direction:column;gap:.12rem;padding:.72rem 0;
    border-bottom:1px solid rgba(91,8,8,.1);
}
.s6-stat:last-child{border-bottom:0}
.s6-stat strong{
    color:var(--deep-burgundy);font-family:var(--serif);font-size:clamp(1.65rem,2.2vw,2.35rem);
    font-weight:750;line-height:1;
}
.s6-stat span{color:#574943;font-size:clamp(.74rem,.85vw,.9rem);font-weight:600;line-height:1.35}
html[lang=ar] .s6-map-panel h2,
html[lang=ckb] .s6-map-panel h2{font-size:clamp(.9rem,1.08vw,1.08rem);letter-spacing:0}
html[lang=ar] .s6-stat span,
html[lang=ckb] .s6-stat span{font-size:clamp(.8rem,.92vw,.98rem)}

@media(max-width:780px){
    .s6-section{padding:2.4rem 0 2.8rem}
    .s6-inner{grid-template-columns:1fr;gap:1.4rem}
    .s6-map-panel h2{text-align:center;margin-bottom:.8rem}
    .s6-world-map{margin:0 auto}
    .s6-stats,[dir=rtl] .s6-stats{
        display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
        padding:0;border:0;border-top:1px solid rgba(91,8,8,.16);
    }
    .s6-stat{align-items:center;text-align:center;padding:1rem .5rem}
    .s6-stat:nth-child(odd){border-right:1px solid rgba(91,8,8,.1)}
    [dir=rtl] .s6-stat:nth-child(odd){border-right:0;border-left:1px solid rgba(91,8,8,.1)}
}

/* Featured statement card */
.featured-card{
    background:var(--dark-red);border:var(--gold-line);border-radius:var(--radius);
    padding:1.8rem;position:relative;overflow:hidden;box-shadow:0 10px 26px rgba(20,1,1,.28);
}
.featured-card .quote-mark{font-family:var(--serif);font-size:4rem;color:var(--gold);line-height:.6;display:block;height:2rem;position:relative;z-index:2}
.featured-card .watermark{
    position:absolute;right:-8px;bottom:-10px;width:170px;opacity:.22;pointer-events:none;z-index:0;
}
[dir=rtl] .featured-card .watermark{right:auto;left:-8px}
.featured-quote{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:#f2e9dc;margin:.6rem 0 1.4rem;position:relative;z-index:2}
.featured-sign{position:relative;z-index:2}
.featured-sign img{height:46px;margin-bottom:.5rem;opacity:.85}
.featured-sign strong{display:block;color:var(--gold-light);font-family:var(--serif)}
.featured-sign span{color:rgba(248,242,233,.72);font-size:.82rem}
.featured-head{margin-bottom:1.1rem}

/* S2: foreign-relations capabilities strip */
.role-section{
    margin-top:24px;
    background:transparent;
    color:#5c1515;
}
.role-inner{padding:1rem var(--gutter)}
.role-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.role-block{
    min-width:0;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:start;
    gap:.8rem;padding:.15rem 1.15rem;position:relative;
}
.role-block:not(:last-child)::after{
    content:"";position:absolute;top:0;right:0;width:1px;height:100%;
    background:linear-gradient(180deg,transparent,#decdb8 18%,#decdb8 82%,transparent);
}
[dir=rtl] .role-block:not(:last-child)::after{right:auto;left:0}
.role-icon{
    width:42px;height:42px;color:#761d1d;fill:none;stroke:currentColor;
    stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
}
.role-icon-image{
    object-fit:contain;
    filter:invert(14%) sepia(62%) saturate(1766%) hue-rotate(342deg) brightness(90%) contrast(99%);
    pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.role-copy{min-width:0}
.role-block h3{color:#681616;font-size:.93rem;font-weight:700;line-height:1.35;margin-bottom:.5rem}
.role-block p{
    color:#5e514b;font-size:.72rem;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
html[lang=ar] .role-block h3,
html[lang=ckb] .role-block h3{font-size:1rem}
html[lang=ar] .role-block p,
html[lang=ckb] .role-block p{font-size:.78rem;line-height:1.6}

/* S3: single admin-managed featured video */
.s3-section{
    position:relative;margin-top:24px;overflow:hidden;color:var(--text-light);
    background:#1b0807 url("../images/background/index/S3-BG.png") center / cover no-repeat;
}
.s3-section>.container{position:relative;z-index:2;padding-top:2rem;padding-bottom:2rem}
.s3-watermark{
    position:absolute;z-index:1;right:3.5%;bottom:20px;width:210px;opacity:.22;
    filter:drop-shadow(0 0 12px rgba(255,255,255,.12));
    pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
[dir=rtl] .s3-watermark{right:auto;left:3.5%}
.s3-video-layout{
    min-height:340px;display:grid;grid-template-columns:minmax(0,50%) minmax(0,50%);
    align-items:start;gap:4%;padding:0 2.6%;
}
.s3-media{
    position:relative;width:100%;height:340px;overflow:hidden;
    border:2px solid rgba(255,255,255,.9);
    border-radius:14px;background:#100303;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.s3-media video,.s3-media iframe{display:block;width:100%;height:100%;border:0;background:#000}
.s3-media video{object-fit:contain}
.s3-local-play{
    position:absolute;left:50%;top:50%;right:auto;bottom:auto;z-index:3;
    transform:translate(-50%,-50%);margin:0;padding:0;line-height:0;
    width:70px;height:70px;display:grid;place-items:center;border-radius:50%;
    border:2px solid rgba(255,255,255,.9);background:rgba(24,4,3,.82);
    color:#fff;cursor:pointer;box-shadow:0 5px 24px rgba(0,0,0,.55);transition:.25s;
}
.s3-local-play:hover{background:var(--burgundy);transform:translate(-50%,-50%) scale(1.06)}
.s3-local-play svg{display:block;width:30px;height:30px;fill:currentColor;margin:0}
.s3-local-play.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.s3-copy{min-width:0;padding:1rem 3rem 0 0}
[dir=rtl] .s3-copy{padding-right:0;padding-left:3rem;direction:rtl}
.s3-kicker{
    display:flex;align-items:center;gap:.65rem;color:var(--gold);font-size:.7rem;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;margin-bottom:.7rem;
}
.s3-kicker::after{content:"";height:1px;flex:1;background:rgba(214,168,74,.35)}
.s3-copy h2{
    color:#fff;font-size:clamp(1.65rem,2.5vw,2.35rem);line-height:1.2;margin-bottom:.85rem;
}
.s3-copy p{
    color:rgba(248,242,233,.75);font-size:.95rem;line-height:1.75;max-width:640px;
}
@media(max-width:760px){
    .s3-section{margin-top:14px}
    .s3-section>.container{padding:1.4rem 14px 1.6rem}
    .s3-video-layout{min-height:0;grid-template-columns:1fr;gap:1.15rem;padding:0}
    .s3-media{height:clamp(250px,64vw,340px);border-radius:12px}
    .s3-copy,[dir=rtl] .s3-copy{padding:0 .35rem;direction:inherit}
    .s3-copy h2{font-size:1.5rem}
    .s3-copy p{font-size:.86rem}
    .s3-watermark{width:150px;bottom:12px}
}

/* Gallery strip */
.gallery-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:.6rem}
.gallery-item{aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid #e2d6c1;background:#2a1414}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.3s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-more{
    grid-column:span 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
    background:linear-gradient(180deg,var(--deep-burgundy),var(--dark-red));color:var(--gold-light);
    border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:.05em;
}
.gallery-more svg{width:24px;height:24px}

/* =================================================================
   PAGE HEADER (inner pages)
   ================================================================= */
.page-header{
    position:relative;
    background-color:#260300;
    background-image:url("../images/background/background.svg");
    background-size:cover;background-position:center;background-repeat:no-repeat;
    color:var(--text-light);padding:2.6rem 0;border-bottom:var(--gold-line);
}
.page-header h1{font-size:2.3rem;letter-spacing:.04em}
.breadcrumb{margin-top:.6rem;font-size:.82rem;color:var(--text-muted)}
.breadcrumb a{color:var(--gold-light)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{margin:0 .45rem;color:rgba(255,255,255,.3)}

/* Larger premium header (e.g. News) */
.page-header-lg{padding:4.2rem 0 3.4rem;text-align:center}
.page-header-lg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,3,0,.35),rgba(38,3,0,.8));z-index:0}
.page-header-lg .container{position:relative;z-index:1}
.page-header-lg h1{font-size:3rem;letter-spacing:.06em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.page-header-lg .breadcrumb{display:flex;align-items:center;justify-content:center;margin-top:.9rem}
.back-home{
    position:absolute;top:0;left:0;display:inline-flex;align-items:center;gap:.45rem;
    padding:.5rem 1rem;border:1px solid rgba(214,168,74,.55);border-radius:999px;
    color:var(--gold-light);font-size:.8rem;font-weight:600;background:rgba(0,0,0,.22);
    transition:.2s;z-index:2;
}
.back-home:hover{background:var(--gold);color:var(--black-red);border-color:var(--gold)}
.back-home svg{width:16px;height:16px;fill:currentColor}
[dir=rtl] .back-home{left:auto;right:0}
[dir=rtl] .back-home svg{transform:scaleX(-1)}
@media(max-width:560px){
    .page-header-lg{padding:2.8rem 0 2.4rem}
    .page-header-lg h1{font-size:2.1rem}
    .back-home{position:static;margin:0 auto 1.1rem;justify-content:center;width:max-content}
}

/* =================================================================
   ABOUT KDP — full-width portrait hero
   ================================================================= */
.kdp-hero{
    position:relative;width:100%;background:var(--black-red);overflow:hidden;
    display:flex;align-items:flex-end;
    min-height:clamp(440px,72vh,640px);
    border-bottom:var(--gold-line);
}
@supports(height:100svh){
    /* svh ignores the collapsing browser chrome on mobile */
    .kdp-hero{min-height:clamp(440px,72svh,640px)}
}
.kdp-hero img{
    position:absolute;inset:0;width:100%;height:100%;
    /* Anchored high: a wide crop trims top and bottom, and the turban sits near the top edge */
    object-fit:cover;object-position:center 25%;
}
/* Deterrent against casual saving: pointer-events:none keeps hit-testing off the
   <img>, so a right-click lands on the section and the menu offers no image
   actions. The scrim above it also shields the picture. See .no-save in main.js. */
.no-save{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.no-save img{pointer-events:none;-webkit-user-drag:none}
/* Portrait screens crop the sides instead, so nudge the frame onto the subject */
@media(max-aspect-ratio:1/1){
    .kdp-hero img{object-position:47% center}
}
/* Scrim — only the bottom strip, enough to carry the caption without touching his face */
.kdp-hero::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(18,1,1,0) 45%,rgba(18,1,1,.55) 78%,rgba(18,1,1,.88) 100%);
}
.kdp-hero>.container{position:relative;z-index:2;padding-bottom:2.4rem}
.kdp-hero-caption{display:flex;flex-direction:column;gap:.35rem;color:var(--text-light)}
.kdp-hero-caption .name{
    font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:.02em;
    font-size:clamp(1.7rem,3.6vw,2.9rem);
    /* tight contact shadow + soft glow, so it holds up over the lighter parts of the photo */
    text-shadow:0 2px 6px rgba(0,0,0,.6),0 4px 22px rgba(0,0,0,.8);
}
.kdp-hero-caption .role{
    font-size:clamp(.88rem,1.25vw,1.08rem);color:var(--gold-light);letter-spacing:.06em;
    text-shadow:0 1px 4px rgba(0,0,0,.65),0 2px 14px rgba(0,0,0,.85);
}
@media(max-width:560px){
    .kdp-hero>.container{padding-bottom:1.8rem}
    /* Keep both lines unbroken rather than wrapping mid-phrase. They scale with the
       viewport so they always clear the 18px gutters, down to the narrowest phones. */
    .kdp-hero-caption .name{white-space:nowrap;font-size:min(1.7rem,7.2vw)}
    .kdp-hero-caption .role{white-space:nowrap;font-size:min(.88rem,3.3vw);letter-spacing:.03em}
}

/* -----------------------------------------------------------------
   About KDP — editorial layout
   Structure comes from typography and hairline rules, not from boxes:
   no card borders, no shadows, no filled panels.
   ----------------------------------------------------------------- */
.kdp-band{padding:4.6rem 0}
.kdp-band-tight{padding-top:0}
.kdp-band-light{background:var(--cream);color:#3a2d24}
.kdp-band-dark{
    position:relative;overflow:hidden;
    background-color:#1a0202;
    background-image:url("../images/background/diplomatic_background.svg");
    background-size:cover;background-position:center;
    border-top:var(--gold-line);border-bottom:var(--gold-line);
    color:var(--text-light);
}
.kdp-band-dark>.container{position:relative;z-index:2}

/* Establishment — framed map backdrop (glow + world map + gold frame are baked
   into first-bg.png). No dark wash: the image shows as-is. Content sits on the
   left; a faint KDP seal bleeds off the bottom-right, behind everything. */
.kdp-band-first{
    background-image:url("../images/about-kdp/first-bg.png");
    background-size:cover;background-position:center;
}
@media(min-width:861px){
    /* Landscape panel held near the image's 2:1 ratio, and filled exactly with
       100% 100% so the gold frame baked into first-bg.png always meets the
       section edges instead of being cropped away. */
    .kdp-band-first{min-height:min(50vw,720px);display:flex;align-items:center;background-size:100% 100%}
    .kdp-band-first>.container{width:100%}
}
.kdp-est{position:relative;z-index:2}
.kdp-est .kdp-kicker{color:var(--gold)}
.kdp-est-title{
    font-family:var(--serif);font-weight:700;line-height:1.04;letter-spacing:.01em;
    font-size:clamp(2rem,5vw,3.6rem);margin:.2rem 0 1.35rem;
    background:linear-gradient(180deg,#fbf1dc,#f3d68f 55%,#d3a03d);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kdp-est-lead{max-width:52%;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.85;color:rgba(248,242,233,.9)}
/* Bordered stat cards with an inner ornamental line */
.kdp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;max-width:62%;margin-top:2.6rem}
.kdp-stat{
    position:relative;text-align:center;padding:1.5rem 1rem;
    border:1px solid rgba(214,168,74,.38);
    background:linear-gradient(180deg,rgba(46,10,7,.46),rgba(18,2,2,.34));
}
.kdp-stat::before{content:"";position:absolute;inset:5px;border:1px solid rgba(214,168,74,.16);pointer-events:none}
.kdp-stat .v{display:block;font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.8rem);color:var(--gold-light);line-height:1.12;white-space:nowrap}
.kdp-stat .d{display:block;width:7px;height:7px;margin:.75rem auto;transform:rotate(45deg);background:rgba(214,168,74,.65)}
.kdp-stat .c{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,242,233,.72)}

/* Fully inside the panel (positive offsets) so it is never clipped by the edge */
.kdp-seal{
    position:absolute;right:clamp(1rem,2.2vw,2.6rem);bottom:clamp(1rem,2.2vw,2.6rem);
    width:clamp(200px,26vw,340px);
    mix-blend-mode:screen;opacity:.14;z-index:1;
    pointer-events:none;user-select:none;-webkit-user-drag:none;
}
[dir=rtl] .kdp-seal{right:auto;left:clamp(1rem,2.2vw,2.6rem)}

@media(max-width:860px){
    .kdp-est-lead,.kdp-stats{max-width:none}
    .kdp-stats{grid-template-columns:1fr;gap:.9rem}
    .kdp-stat .v{white-space:normal}
    .kdp-seal{width:min(190px,46vw);right:1rem;bottom:1rem;opacity:.1}
}

/* -----------------------------------------------------------------
   Vision & Principles — textured backdrop with a numbered two-column list
   ----------------------------------------------------------------- */
.kdp-band-second{
    background-image:url("../images/about-kdp/second-bg.png");
    background-size:cover;background-position:center;
}
.kdp-vision{position:relative;z-index:2}
.kdp-vision .kdp-kicker{color:var(--gold)}
/* thin gold underline carrying a single glowing point */
.kdp-underline{
    display:block;width:190px;max-width:52%;height:1px;margin:1.15rem 0 1.9rem;position:relative;
    background:linear-gradient(90deg,var(--gold),rgba(214,168,74,.08));
}
.kdp-underline::after{
    content:"";position:absolute;left:26%;top:50%;width:5px;height:5px;border-radius:50%;
    background:var(--gold-light);box-shadow:0 0 9px 2px rgba(243,207,120,.65);transform:translate(-50%,-50%);
}
.kdp-vision-lead{max-width:54%;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.85;color:rgba(248,242,233,.88);margin-bottom:2.6rem}

/* The list: row-major so numbers read 01,02 / 03,04 … 11 alone on the last row */
.kdp-principles-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 3.5rem}
.kdp-principle{
    display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1.3rem;
    padding:1.15rem .2rem;border-bottom:1px solid rgba(214,168,74,.24);
}
.pr-num{
    font-family:var(--serif);font-size:clamp(1.5rem,2vw,2rem);line-height:1;
    color:#d9a441;min-width:2.4ch;text-align:center;
}
.pr-text{
    border-left:1px solid rgba(214,168,74,.28);padding-left:1.3rem;
    font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.4;color:rgba(248,242,233,.92);
}
[dir=rtl] .pr-text{border-left:none;border-right:1px solid rgba(214,168,74,.28);padding-left:0;padding-right:1.3rem}
/* Light-band variant (e.g. About Us — Organizational Structure): dark ink and
   burgundy numerals so the same numbered directory reads on the cream surface */
.kdp-band-light .kdp-principle{border-bottom-color:rgba(122,106,92,.22)}
.kdp-band-light .pr-num{color:var(--deep-burgundy)}
.kdp-band-light .pr-text{color:#3a2d24;border-left-color:rgba(122,106,92,.3)}
/* The lone 11th item gets an ornamental frame */
.kdp-principle.is-framed{
    border:1px solid rgba(214,168,74,.45);padding:1.1rem 1.1rem 1.1rem .2rem;position:relative;
}
.kdp-principle.is-framed::before{
    content:"";position:absolute;inset:4px;border:1px solid rgba(214,168,74,.18);pointer-events:none;
}
/* Source note preceded by a diamond + short rule */
.kdp-source-mark{position:relative;padding-top:2rem;border-top:none;font-style:italic}
.kdp-source-mark::before{
    content:"";position:absolute;top:.7rem;left:0;width:170px;height:1px;
    background:linear-gradient(90deg,rgba(214,168,74,.7),rgba(214,168,74,0));
}
.kdp-source-mark::after{
    content:"";position:absolute;top:.7rem;left:0;width:7px;height:7px;
    transform:translate(-1px,-3px) rotate(45deg);background:var(--gold);
}
[dir=rtl] .kdp-source-mark::before,[dir=rtl] .kdp-source-mark::after{left:auto;right:0}

@media(max-width:760px){
    .kdp-vision-lead{max-width:none}
    .kdp-underline{max-width:60%}
    .kdp-principles-grid{grid-template-columns:1fr;gap:0}
}

/* Section head — kicker and title */
.kdp-head{margin-bottom:2.4rem}
.kdp-kicker{
    display:block;font-size:.78rem;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;color:var(--deep-burgundy);margin-bottom:.85rem;
}
/* Arabic/Kurdish are cursive: letter-spacing breaks the script and the glyphs
   read smaller, so drop the tracking/uppercase and scale the kicker up. */
html[lang=ar] .kdp-kicker,
html[lang=ckb] .kdp-kicker{font-size:.95rem;letter-spacing:0;text-transform:none}
.kdp-band-dark .kdp-kicker{color:var(--gold)}
.kdp-head h1,.kdp-head h2{
    font-size:clamp(1.75rem,3.4vw,2.7rem);line-height:1.15;color:var(--dark-red);
}
.kdp-band-dark .kdp-head h1,.kdp-band-dark .kdp-head h2{color:var(--text-light)}
/* Prose */
.kdp-measure{max-width:68ch}
.kdp-lead{font-family:var(--serif);font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.8;color:#40312a}
.kdp-band-dark .kdp-lead{color:rgba(248,242,233,.9)}
.kdp-body p{line-height:1.85;margin-bottom:1.15rem}
.kdp-body p:last-child{margin-bottom:0}
/* Drop cap opens the page */
.kdp-dropcap::first-letter{
    float:left;font-family:var(--serif);font-size:3.5em;line-height:.8;font-weight:700;
    padding:.05em .1em 0 0;color:var(--deep-burgundy);
}
[dir=rtl] .kdp-dropcap::first-letter{float:right;padding:.05em 0 0 .1em}
.kdp-source{
    margin-top:1.8rem;padding-top:1rem;border-top:1px solid rgba(122,106,92,.22);
    font-size:.8rem;line-height:1.65;color:#8a7663;max-width:68ch;
}
.kdp-band-dark .kdp-source{color:var(--text-muted);border-top-color:rgba(214,168,74,.2)}

/* Editorial list — gold numerals and hairlines in place of bullets and cards */
.kdp-list{list-style:none;margin:0;padding:0;counter-reset:kdpitem;border-bottom:1px solid rgba(122,106,92,.18)}
.kdp-list li{
    counter-increment:kdpitem;position:relative;
    padding:1rem 0 1rem 3rem;border-top:1px solid rgba(122,106,92,.18);
    font-size:1.02rem;line-height:1.6;
}
.kdp-list li::before{
    content:counter(kdpitem,decimal-leading-zero);position:absolute;left:0;top:1.2rem;
    font-family:var(--serif);font-size:.82rem;letter-spacing:.1em;color:var(--gold);
}
[dir=rtl] .kdp-list li{padding-left:0;padding-right:3rem}
[dir=rtl] .kdp-list li::before{left:auto;right:0}
.kdp-band-dark .kdp-list,.kdp-band-dark .kdp-list li{border-color:rgba(214,168,74,.18)}
.kdp-band-dark .kdp-list li{color:rgba(248,242,233,.88)}
/* Two even columns — auto-fit would leave an orphan on the last row */
.kdp-list-2col{display:grid;grid-template-columns:1fr;column-gap:3.5rem}
@media(min-width:760px){.kdp-list-2col{grid-template-columns:1fr 1fr}}

/* Nested clauses under a numbered goal */
.kdp-sublist{list-style:none;margin:.7rem 0 0;padding:0}
.kdp-sublist li{
    position:relative;padding:.45rem 0 .45rem 1.15rem;font-size:.95rem;line-height:1.6;color:#54443a;
}
.kdp-sublist li::before{content:"—";position:absolute;left:0;color:var(--gold)}
[dir=rtl] .kdp-sublist li{padding-left:0;padding-right:1.15rem}
[dir=rtl] .kdp-sublist li::before{left:auto;right:0}

/* Goal groups stack down the page */
.kdp-goal-group+.kdp-goal-group{margin-top:3rem}
.kdp-goal-group h3{
    font-family:var(--serif);font-size:1.2rem;color:var(--deep-burgundy);
    padding-bottom:.7rem;margin-bottom:.2rem;border-bottom:2px solid var(--gold);max-width:68ch;
}

/* Desktop: the intro and the goals were capped at a 68ch measure, leaving the
   right half of the page blank. Flow them across two columns to use the width,
   and nudge the type up a little. Mobile keeps the single-column measure. */
@media(min-width:861px){
    /* What is the KDP? — one single wide column (no split), larger type */
    .kdp-body.kdp-measure{max-width:none}
    .kdp-body.kdp-measure p{font-size:1.1rem}
    .kdp-body.kdp-measure .kdp-lead{font-size:clamp(1.18rem,1.55vw,1.42rem)}
    /* The Party's Goals */
    .kdp-goal-group h3{max-width:none;font-size:1.32rem}
    .kdp-goal-group .kdp-list.kdp-measure{max-width:none;columns:2;column-gap:3.6rem;column-rule:1px solid rgba(122,106,92,.16)}
    .kdp-goal-group .kdp-list li{break-inside:avoid;font-size:1.1rem}
}

/* Congress timeline — expandable, on a gold rail. Hairlines, no cards. */
.kdp-timeline{list-style:none;margin:0;padding:0;position:relative}
.kdp-timeline::before{
    content:"";position:absolute;left:5px;top:1.4rem;bottom:1.4rem;width:1px;
    background:linear-gradient(180deg,rgba(214,168,74,.6),rgba(214,168,74,.15));
}
[dir=rtl] .kdp-timeline::before{left:auto;right:5px}
.kdp-tl-item{position:relative;padding-left:2.3rem}
[dir=rtl] .kdp-tl-item{padding-left:0;padding-right:2.3rem}
.kdp-tl-item::before{
    content:"";position:absolute;left:0;top:1.4rem;width:11px;height:11px;border-radius:50%;
    background:var(--cream);border:2px solid var(--gold);z-index:1;
}
[dir=rtl] .kdp-tl-item::before{left:auto;right:0}
.kdp-tl-item details{border-top:1px solid rgba(122,106,92,.18)}
.kdp-tl-item:first-child details{border-top:none}
.kdp-tl-item:last-child details{border-bottom:1px solid rgba(122,106,92,.18)}
.kdp-tl-item summary{
    cursor:pointer;list-style:none;position:relative;padding:1.05rem 2.2rem 1.05rem 0;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;transition:color .2s;
}
[dir=rtl] .kdp-tl-item summary{padding:1.05rem 0 1.05rem 2.2rem}
.kdp-tl-item summary::-webkit-details-marker{display:none}
.kdp-tl-item summary:hover .tl-n{color:var(--deep-burgundy)}
.kdp-tl-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tl-n{font-family:var(--serif);font-size:1.1rem;color:var(--dark-red);transition:color .2s}
.tl-meta{font-size:.86rem;color:#7a6a5c}
/* Chevron affordance, flips when open */
.kdp-tl-item summary::after{
    content:"";position:absolute;right:.4rem;top:1.35rem;width:8px;height:8px;
    border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
    transform:rotate(45deg);transition:transform .25s;
}
[dir=rtl] .kdp-tl-item summary::after{right:auto;left:.4rem}
.kdp-tl-item details[open] summary::after{transform:rotate(-135deg)}
.tl-body{padding:0 0 1.3rem;font-size:.97rem;line-height:1.8;color:#40312a;max-width:68ch}

/* KDP election record — compact summaries with full, source-aware details. */
.kdp-election-section{border-top:1px solid rgba(122,106,92,.12)}
.kdp-election-head{display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-bottom:2rem;text-align:center}
.kdp-election-head>img{width:144px;height:144px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(76,20,16,.16))}
.kdp-election-head .kdp-head{margin:0 auto;display:flex;flex-direction:column;align-items:center}
.kdp-election-head .kdp-head p{margin:.65rem auto 0;max-width:70ch;color:#6e5b4e;line-height:1.65}
.kdp-election-list{display:flex;flex-direction:column;gap:.7rem}
.kdp-election-card{border:1px solid rgba(122,106,92,.2);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.kdp-election-card[open]{border-color:rgba(190,143,43,.55);box-shadow:0 14px 32px rgba(57,29,18,.08)}
.kdp-election-card>summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:1rem;padding:1rem 1.1rem;list-style:none;cursor:pointer}
.kdp-election-card>summary::-webkit-details-marker{display:none}
.kdp-election-card>summary:hover{background:#fffaf2}
.kdp-election-card>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.kdp-election-card>summary::after{content:"";grid-column:3;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s}
.kdp-election-card[open]>summary::after{transform:rotate(225deg)}
.election-summary-copy,.election-summary-result{display:flex;flex-direction:column;min-width:0}
.election-summary-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .55rem}
.election-summary-copy strong{font-family:var(--serif);font-size:1.08rem;color:var(--dark-red)}
.election-summary-title b{color:var(--dark-red);font-family:var(--serif);font-size:1.08rem;font-weight:700}
.election-summary-copy small{margin-top:.2rem;color:#7f7064;font-size:.79rem}
.election-summary-result{align-items:flex-end;padding:0 1rem;border-inline-end:1px solid #eadfce}
.election-summary-result b{font-family:var(--serif);font-size:1.12rem;color:var(--deep-burgundy)}
.election-summary-result small{margin-top:.08rem;color:#8a7664;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.election-summary-result.is-joint b{color:#7b6028}
.election-card-body{padding:1.25rem 1.35rem 1.4rem;border-top:1px solid #eee2d2;background:#fffdf9}
.election-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.election-tags span{display:flex;align-items:baseline;gap:.4rem;padding:.38rem .62rem;border-radius:18px;background:#f3ece2;color:#544338;font-size:.78rem;font-weight:650}
.election-tags small{color:#8b7868;font-size:.64rem;font-weight:750;text-transform:uppercase;letter-spacing:.045em}
.election-kdp-panel{margin:0 0 1.35rem;padding:1rem 1.1rem 1.1rem;border:1px solid rgba(221,180,84,.5);border-radius:12px;background:linear-gradient(135deg,#4b0b09 0%,#260403 100%);box-shadow:0 12px 26px rgba(56,9,6,.14)}
.election-result-heading{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.election-result-heading>img{flex:0 0 auto;width:62px;height:62px;padding:3px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 5px 14px rgba(0,0,0,.2)}
.election-result-heading>div{display:flex;flex:1;flex-direction:column;min-width:0}
.election-result-heading small{color:#d8b35e;font-size:.65rem;font-weight:750;letter-spacing:.055em;text-transform:uppercase}
.election-result-heading h3{margin:.18rem 0 0;color:#fff;font-family:var(--serif);font-size:1.25rem}
.election-result-heading>span{flex:0 0 auto;padding:.32rem .62rem;border:1px solid rgba(222,184,96,.45);border-radius:18px;background:rgba(255,255,255,.08);color:#f3d993;font-size:.68rem;font-weight:750}
.election-joint-panel{margin:0 0 1.35rem;padding:1rem 1.1rem;border:1px solid #dfc47d;border-radius:11px;background:linear-gradient(135deg,#fffaf0,#f6ecd4)}
.election-joint-warning{margin:.2rem 0 1rem;padding:.62rem .78rem;border-inline-start:3px solid #bc8b29;background:#fff4d9;color:#73571f;font-size:.78rem;font-weight:750}
.election-detail-section{margin:1.35rem 0}
.election-section-heading{display:flex;align-items:center;gap:.55rem;margin:0 0 .75rem}
.election-section-heading>span{width:18px;height:2px;background:var(--gold)}
.election-section-heading h3{margin:0;color:var(--deep-burgundy);font-family:var(--serif);font-size:1.04rem}
.election-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:1.15rem}
.election-stat{display:flex;flex-direction:column;justify-content:space-between;min-height:76px;padding:.72rem;border:1px solid #eadfce;border-radius:8px;background:#fff}
.election-stat small{color:#7d6c5f;font-size:.7rem;line-height:1.35}
.election-stat strong{margin-top:.4rem;color:#3d2c23;font-family:var(--serif);font-size:1.08rem}
.election-kdp-stats,.election-joint-stats,.election-overview-stats,.election-other-stats{margin-bottom:0}
.election-kdp-stats .election-stat{min-height:82px;border-color:rgba(231,197,116,.28);background:rgba(255,255,255,.07)}
.election-kdp-stats .election-stat small{color:#e2cfb0}
.election-kdp-stats .election-stat strong{color:#fff;font-size:1.22rem}
.election-joint-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.election-joint-stats .election-stat{border-color:#e1c987;background:rgba(255,255,255,.72)}
.election-joint-stats .election-stat strong{color:#715113}
.election-other-section{padding-top:1.1rem;border-top:1px solid #eadfce}
.election-other-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.election-facts{margin:1rem 0 0;padding:.8rem 1rem;border-radius:8px;background:rgba(255,255,255,.68)}
.election-facts p{margin:.25rem 0;color:#55443a;font-size:.84rem;line-height:1.55}
.election-detail-block{margin:1.35rem 0;padding-top:1.2rem;border-top:1px solid #eadfce}
.election-detail-block h3,.election-notes-grid h3{margin:0 0 .55rem;color:var(--deep-burgundy);font-family:var(--serif);font-size:1rem}
.election-detail-block ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .75rem;margin:0;padding:0;list-style:none}
.election-detail-block li{position:relative;padding:.55rem .65rem .55rem 1.25rem;border-bottom:1px solid #eadfce;color:#4f4036;font-size:.8rem;line-height:1.5}
.election-detail-block li::before{content:"";position:absolute;left:.35rem;top:.93rem;width:5px;height:5px;transform:rotate(45deg);background:var(--gold)}
[dir=rtl] .election-detail-block li{padding:.55rem 1.25rem .55rem .65rem}
[dir=rtl] .election-detail-block li::before{left:auto;right:.35rem}
.election-notes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1.1rem}
.election-notes-grid>div{padding:.9rem;border:1px solid #eadfce;border-radius:8px;background:#fff}
.election-notes-grid p{margin:0;color:#5c4a3e;font-size:.81rem;line-height:1.65}
.election-data-warning{margin-top:1rem;padding:.8rem 1rem;border:1px solid #efc8bf;border-inline-start:4px solid #9f332a;border-radius:7px;background:#fff2ef;color:#743026}
.election-data-warning strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.045em}
.election-data-warning p{margin:.35rem 0 0;font-size:.81rem;line-height:1.6}
.election-data-warning.is-source-correction{border-color:#dfc988;border-inline-start-color:#b58a2a;background:#fff8e7;color:#69511e}
.election-source{margin:1rem 0 0;color:#88796c;font-size:.72rem;line-height:1.55}
@media(max-width:860px){
    .election-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .election-notes-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
    .kdp-election-head{align-items:center;gap:.7rem}.kdp-election-head>img{width:112px;height:112px}
    .kdp-election-card>summary{grid-template-columns:minmax(0,1fr) 14px;gap:.75rem;padding:.9rem}
    .kdp-election-card>summary::after{grid-column:2;grid-row:1}
    .election-summary-result{grid-column:1/3;align-items:flex-start;padding:.5rem 0 0;border:0;border-top:1px solid #eee2d2}
    .election-card-body{padding:1rem .85rem 1.15rem}.election-stats,.election-detail-block ul{grid-template-columns:1fr 1fr}
    .election-kdp-panel,.election-joint-panel{padding:.85rem}
    .election-result-heading{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:.45rem .7rem}
    .election-result-heading>img{grid-column:1;grid-row:1/3;width:54px;height:54px}
    .election-result-heading>div{grid-column:2;grid-row:1}
    .election-result-heading>span{grid-column:2;grid-row:2;justify-self:start;margin:0}
}

/* Fourteenth Congress — party institutions */
.cc-statement{margin-top:3.4rem;padding-top:2.6rem;border-top:1px solid rgba(122,106,92,.22)}
.cc-title{font-family:var(--serif);color:var(--dark-red);font-size:clamp(1.6rem,2.5vw,2.25rem)}
.cc-intro{max-width:78ch;margin:.6rem 0 1.7rem;line-height:1.65;color:#6b5748;font-size:1.02rem}
.cc-sub{
    font-family:var(--serif);color:var(--deep-burgundy);font-size:1.18rem;
    margin:2.4rem 0 1.1rem;padding-bottom:.55rem;border-bottom:2px solid var(--gold);
}
/* Institution rosters: no ranks, vote totals or vote-order numerals. */
.kdp-namelist{
    list-style:none;margin:0 0 1rem;padding:0;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.2rem;
}
.kdp-namelist li{
    position:relative;min-width:0;padding:.72rem 0;
    border-bottom:1px solid rgba(122,106,92,.16);
    font-size:.96rem;font-weight:600;line-height:1.45;color:#33271f;
}
.cc-has-note{break-inside:avoid}
.cc-note{display:block;margin-top:.25rem;font-size:.75rem;font-weight:500;font-style:italic;line-height:1.5;color:#8a7663}
/* Political Bureau — name + role */
.cc-roles{list-style:none;margin:0 0 1.4rem;padding:0}
.cc-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.6rem}
.cc-roles li{
    display:flex;flex-direction:column;align-items:flex-start;gap:.16rem;
    min-width:0;padding:.78rem 0;border-bottom:1px solid rgba(122,106,92,.16);
}
[dir=rtl] .cc-roles li{align-items:flex-end}
.cc-name{font-family:var(--serif);font-weight:700;color:var(--dark-red);font-size:1.02rem}
.cc-role{font-size:.82rem;line-height:1.5;color:#7a6a5c}

@media(max-width:900px){
    .kdp-namelist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
    .cc-role-grid,.kdp-namelist{grid-template-columns:1fr}
    .cc-statement{margin-top:2.5rem;padding-top:2rem}
    .cc-sub{margin-top:2rem}
}

.kdp-extlink{color:var(--deep-burgundy);border-bottom:1px solid var(--gold)}
.kdp-extlink:hover{color:var(--dark-red)}

/* Founder — narrative column plus a hairline fact table */
.kdp-split{display:grid;grid-template-columns:1fr minmax(230px,290px);gap:3.5rem;align-items:start}
.kdp-facts{margin:0;border-top:2px solid var(--gold)}
.kdp-facts>div{padding:.9rem 0;border-bottom:1px solid rgba(122,106,92,.18)}
.kdp-facts dt{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8a7663;margin-bottom:.32rem}
.kdp-facts dd{margin:0;font-family:var(--serif);font-size:.98rem;line-height:1.5;color:#3a2d24}
.kdp-honorific{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:#8a7663;margin-bottom:1.8rem}
/* Founder portrait — framed, sits above the fact table in the founder aside */
.founder-photo{
    margin:0 0 1.8rem;overflow:hidden;border:2px solid rgba(214,168,74,.5);
    border-radius:8px;box-shadow:0 14px 32px rgba(35,2,2,.16);aspect-ratio:2/3;
}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(max-width:860px){.founder-photo{max-width:340px;margin-left:auto;margin-right:auto}}

/* Head of Office (About Us) — framed feature photo above the biography */
.hoo-photo{
    margin:0 auto 2.8rem;max-width:820px;overflow:hidden;border:2px solid rgba(214,168,74,.55);
    border-radius:8px;box-shadow:0 16px 38px rgba(35,2,2,.16);aspect-ratio:16/9;
}
.hoo-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(max-width:600px){.hoo-photo{aspect-ratio:3/2}}

/* -----------------------------------------------------------------
   About Kurdistan Region — city directory, light stat figures, pill lists
   ----------------------------------------------------------------- */
.kr-cities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 3.5rem}
.kr-city{border-top:1px solid rgba(122,106,92,.22);padding-top:1.1rem}
.kr-city-name{font-family:var(--serif);font-size:1.35rem;color:var(--dark-red);margin-bottom:.15rem}
.kr-city-sub{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a7663;margin-bottom:.7rem}
.kr-city p{line-height:1.75;color:#40312a;font-size:.98rem}

.kr-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem 2rem;margin:2.3rem 0 0;border-top:2px solid var(--gold);padding-top:1.9rem}
.kr-fig .v{display:block;font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);color:var(--deep-burgundy);line-height:1.02}
.kr-fig .c{display:block;margin-top:.45rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8a7663;line-height:1.4}

.kr-tags{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.kr-tags li{font-size:.88rem;color:#3a2d24;background:#fff;border:1px solid #e3d7c0;border-radius:999px;padding:.4rem 1rem}

@media(max-width:860px){.kr-cities{grid-template-columns:1fr;gap:1.7rem}}

/* Goals — grouped columns, hairlines only */
/* Leadership — dark section backdrop; each card is a simple gold-bordered dark
   panel (no PNG frame). Leader is a wide photo-left / text-right card; the two
   vice cards have a square photo on top (matches the square source photos, so it
   fills with no crop and no blank) and text below. */
/* This section has no background of its own — it sits on the page surface, so the
   heading keeps the default dark colours; only the cards carry the dark fills. */

.lead-card,.vice-card{
    position:relative;color:var(--text-light);overflow:hidden;
    background:linear-gradient(180deg,rgba(40,8,6,.5),rgba(16,2,2,.5));
    border:2px solid rgba(214,168,74,.62);border-radius:8px;
    box-shadow:0 12px 32px rgba(0,0,0,.32);
}
.lc-name,.vc-name{
    font-family:var(--serif);font-weight:700;line-height:1.05;
    /* White (was a gold gradient). -webkit-text-fill-color wins over any inherited
       background-clip:text so the glyphs render solid white. */
    background:none;color:#fff;-webkit-text-fill-color:#fff;
}
.lc-kicker,.vc-kicker{
    display:block;font-size:.7rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:#fff;
}
.lc-subtitle,.vc-subtitle{font-family:var(--serif);color:#f2e7d2}

/* About-KDP images (hero, leader, vice, founder, seals): deter casual saving and
   "open image in new tab" by taking hit-testing off the picture, while leaving all
   surrounding TEXT fully selectable/copyable. Client-side deterrent only. */
.kdp-hero img,.lc-photo img,.vc-photo img,.founder-photo img,.kdp-seal{
    pointer-events:none;-webkit-user-drag:none;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.lc-body,.vc-body{color:rgba(240,228,208,.82);line-height:1.72}

/* ---- Leader: wide landscape card ---- */
.lead-card{
    display:grid;grid-template-columns:42% 1fr;align-items:stretch;
    aspect-ratio:600/306;max-width:1040px;margin:0 auto 2rem;
}
.lc-photo{overflow:hidden}
.lc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.lc-text{
    display:flex;flex-direction:column;justify-content:center;
    padding:3% 5% 3% 4.2%;border-left:1px solid rgba(214,168,74,.35);
    background:url("../images/about-kdp/Current-Leader/bg-section.png") center/cover;
}
.lc-kicker{margin-bottom:.7rem}
.lc-name{font-size:clamp(1.5rem,3vw,2.7rem);margin-bottom:.7rem}
.lc-subtitle{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.5;margin-bottom:1.2rem}
.lc-body{font-size:clamp(.82rem,1vw,.98rem);border-top:1px solid rgba(214,168,74,.28);padding-top:1.1rem}

/* ---- Vice: two cards, photo on top / taller text below ---- */
.vice-row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:1040px;margin:0 auto}
.vice-card{display:flex;flex-direction:column}
/* Slightly shorter than the square source so the empty headroom is trimmed from
   the top (object-position biased low), while staying clear of the hairline. */
.vc-photo{aspect-ratio:8/7;overflow:hidden}
.vc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 70%;display:block}
.vc-text{
    display:flex;flex-direction:column;flex:1;padding:1.7rem 2rem 2rem;text-align:center;
    border-top:1px solid rgba(214,168,74,.35);
    background:url("../images/about-kdp/Current-Leader/bg-section.png") center/cover;
}
.vc-name{font-size:clamp(1.4rem,2.1vw,1.95rem);margin-bottom:.45rem}
.vc-kicker{margin-bottom:1rem}
.vc-subtitle{font-size:clamp(.9rem,1.05vw,1.02rem);line-height:1.45;text-align:left}
.vc-body{
    font-size:clamp(.82rem,.95vw,.92rem);text-align:left;
    margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(214,168,74,.24);
}

@media(max-width:860px){
    .kdp-split{grid-template-columns:1fr;gap:2.4rem}
    /* Stack the title above its date/place so neither is squeezed */
    .tl-n{flex:0 0 100%}
    /* Leader can't stay side-by-side on a phone — stack photo over text. */
    .lead-card{display:block;aspect-ratio:auto}
    .lc-photo img{width:100%;height:300px;object-position:center 15%}
    .lc-text{display:block;padding:1.6rem 1.4rem;border-left:none;border-top:1px solid rgba(214,168,74,.35)}
    .vice-row{grid-template-columns:1fr;gap:1.6rem}
    .lc-name,.vc-name{font-size:1.6rem;margin:.4rem 0}
    .lc-body,.vc-body{font-size:.92rem}
}
@media(max-width:560px){
    .kdp-band{padding:3rem 0}
    .kdp-list li{padding-left:2.4rem}
    [dir=rtl] .kdp-list li{padding-left:0;padding-right:2.4rem}
}

/* =================================================================
   NEWS LISTING PAGE
   ================================================================= */
.content-area{background:var(--cream);padding:2.5rem 0 3.5rem}
.news-search-tools{margin-bottom:2rem}
.news-search-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.7rem;background:rgba(255,255,255,.78);border:1px solid #e2d4bd;
    border-radius:10px;box-shadow:0 8px 24px rgba(35,2,2,.06);
}
.news-search-trigger{
    min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
    padding:.72rem 1.15rem;border:0;border-radius:7px;background:var(--deep-burgundy);
    color:#fff;font:inherit;font-size:.82rem;font-weight:800;letter-spacing:.025em;
    cursor:pointer;box-shadow:0 7px 18px rgba(91,0,3,.18);transition:.22s ease;
}
.news-search-trigger:hover{background:#750006;transform:translateY(-1px)}
.news-search-trigger:focus-visible{outline:3px solid rgba(214,168,74,.45);outline-offset:2px}
.news-search-trigger svg{
    width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;
}
.news-search-trigger-chevron{margin-inline-start:.25rem;transition:transform .25s ease}
.news-search-trigger.is-open .news-search-trigger-chevron{transform:rotate(180deg)}
.news-search-summary{display:flex;align-items:center;gap:1rem;padding-inline:.35rem}
.news-search-panel{
    position:relative;margin-top:.85rem;padding:1.25rem 1.35rem .85rem;
    overflow:hidden;background:#fff;border:1px solid #e3d6c1;border-radius:10px;
    box-shadow:0 10px 30px rgba(35,2,2,.07);
}
.news-search-panel[hidden]{display:none}
.news-search-panel.is-open{animation:newsFilterReveal .24s ease both}
@keyframes newsFilterReveal{
    from{opacity:0;transform:translateY(-7px)}
    to{opacity:1;transform:translateY(0)}
}
.news-search-panel::before{
    content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:linear-gradient(90deg,var(--deep-burgundy),var(--gold),var(--deep-burgundy));
}
.news-search-head{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;
}
.news-search-title{display:flex;align-items:center;gap:.65rem}
.news-search-title h2{color:var(--deep-burgundy);font-size:1.05rem;line-height:1.25;margin:0}
.news-search-title-icon{
    width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;
    color:#fff;border-radius:50%;background:var(--deep-burgundy);
}
.news-search-title-icon svg,
.news-clear-filters svg,
.news-filter-control>svg,
.news-filter-actions .btn svg{
    fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.news-search-title-icon svg{width:17px;height:17px}
.news-clear-filters{
    display:inline-flex;align-items:center;gap:.35rem;color:#6c5850;
    font-size:.73rem;font-weight:700;transition:.2s;
}
.news-clear-filters svg{width:14px;height:14px}
.news-clear-filters:hover{color:var(--deep-burgundy)}
.news-filters{
    display:grid;grid-template-columns:minmax(230px,1.45fr) minmax(160px,.8fr) minmax(145px,.65fr) minmax(145px,.65fr) auto;
    align-items:end;gap:.8rem;margin:0;padding:0;background:transparent;border:0;box-shadow:none;
}
.activity-filters{
    grid-template-columns:minmax(280px,1.5fr) minmax(165px,.7fr) minmax(165px,.7fr) auto;
}
.news-filter-field{display:flex;flex-direction:column;gap:.38rem;min-width:0}
.news-filter-field>span{
    color:#5d4e47;font-size:.68rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase;
}
.news-filter-control{position:relative;display:flex;align-items:center;min-width:0}
.news-filter-control>svg{
    position:absolute;z-index:1;left:.78rem;width:16px;height:16px;color:#91775f;pointer-events:none;
}
[dir=rtl] .news-filter-control>svg{left:auto;right:.78rem}
.news-filter-control input,
.news-filter-control select{
    width:100%;min-width:0;height:44px;padding:.66rem .8rem .66rem 2.35rem;
    border:1px solid #d9ccb6;border-radius:6px;background:#fff;
    color:#2d211d;font-family:inherit;font-size:.82rem;transition:.2s;
}
[dir=rtl] .news-filter-control input,
[dir=rtl] .news-filter-control select{padding-left:.8rem;padding-right:2.35rem}
.news-filter-control input:hover,
.news-filter-control select:hover{border-color:#bda785}
.news-filter-control input:focus,
.news-filter-control select:focus{
    outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,168,74,.14);
}
.news-filter-control input[type=date]{color-scheme:light}
.news-filter-actions .btn{
    height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    white-space:nowrap;border:0;padding:.65rem 1.1rem;
}
.news-filter-actions .btn svg{width:16px;height:16px}
.news-results-count{
    display:flex;align-items:baseline;justify-content:flex-end;gap:.35rem;
    color:#78665c;font-size:.72rem;white-space:nowrap;
}
.news-results-count strong{color:var(--deep-burgundy);font-size:.85rem}
@media(max-width:1100px){
    .news-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
    .news-filter-keywords{grid-column:1/-1}
    .news-filter-actions{grid-column:1/-1}
    .news-filter-actions .btn{width:100%}
}
@media(max-width:620px){
    .news-search-toolbar{align-items:stretch;flex-direction:column;padding:.6rem}
    .news-search-trigger{width:100%}
    .news-search-summary{justify-content:space-between;min-height:28px;padding:0 .3rem}
    .news-search-panel{padding:1.1rem .9rem .75rem}
    .news-search-head{align-items:flex-start;flex-wrap:wrap}
    .news-filters{grid-template-columns:1fr}
    .news-filter-keywords,.news-filter-actions{grid-column:1}
    .news-filter-control input,.news-filter-control select{font-size:.8rem}
}

.content-area .news-page-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));gap:1.15rem;
}
.news-page-grid .news-card-body{padding:.85rem .9rem 1rem;gap:.42rem}
.news-page-grid .news-card-cat{font-size:.63rem}
.news-page-grid .news-card-title{font-size:.94rem;line-height:1.32}
.news-page-grid .news-card-excerpt{font-size:.8rem;line-height:1.5;-webkit-line-clamp:2}
.news-page-grid .read-more{font-size:.68rem;margin-top:.18rem}
.news-page-grid .date-badge{padding:.3rem .5rem}
.news-page-grid .date-badge strong{font-size:.66rem}
.news-page-grid .date-badge em{font-size:.55rem}
@media(max-width:900px){
    .content-area .news-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
    .content-area .news-page-grid{grid-template-columns:1fr}
}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:.4rem;margin-top:2.6rem;flex-wrap:wrap}
.pagination a,.pagination span{
    min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border:1px solid #d9ccb6;border-radius:5px;color:#5b4a3e;font-size:.85rem;font-weight:600;background:#fff;transition:.2s;padding:0 .6rem;
}
.pagination a:hover{border-color:var(--gold);color:var(--deep-burgundy)}
.pagination .current{
    background:linear-gradient(180deg,var(--deep-burgundy),var(--dark-red));
    color:var(--gold-light);border-color:var(--dark-red);
}
.pagination .disabled{opacity:.4;pointer-events:none}

/* Empty state */
.empty-state{
    text-align:center;padding:3.5rem 1rem;background:#fff;border:1px dashed #d9ccb6;border-radius:var(--radius);color:#6b5d52;
}
.empty-state svg{width:54px;height:54px;color:var(--gold);margin-bottom:1rem}
.empty-state h3{color:var(--dark-red);margin-bottom:.4rem}

/* =================================================================
   NEWS DETAIL
   ================================================================= */
.article{background:#fff;border:1px solid #e7dcc9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.article-hero{
    position:relative;width:100%;aspect-ratio:16/9;
    max-height:clamp(320px,56.25vw,680px);overflow:hidden;
    display:grid;place-items:center;background:#1b090a;
}
.article-hero .article-image-backdrop{
    position:absolute;inset:-28px;z-index:0;width:calc(100% + 56px);height:calc(100% + 56px);
    object-fit:cover;object-position:center;filter:blur(24px) saturate(.9);
    opacity:.48;transform:scale(1.05);pointer-events:none;
}
.article-hero .article-image-main{
    position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;
    object-fit:contain;object-position:center;
    filter:drop-shadow(0 5px 18px rgba(0,0,0,.28));
}
.article-news-detail .article-hero{aspect-ratio:2/1;max-height:580px}
/* Inline images inside article/page body never overflow or blow up the layout */
.article-content img,.prose img{max-width:100%;height:auto;border-radius:6px;margin:1.1rem auto;object-fit:contain}
.article-body{padding:2rem 2.4rem 2.6rem}
.article-meta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;color:#6b5d52;font-size:.82rem;margin-bottom:1rem}
.article-meta .cat{
    background:var(--dark-red);color:var(--gold-light);padding:.25rem .7rem;border-radius:4px;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;
}
.article-body h1{font-size:2.1rem;color:var(--dark-red);margin-bottom:1.1rem;line-height:1.2}
.article-content{font-size:1rem;color:#33271f;line-height:1.85}
.article-content p{margin-bottom:1.1rem}
.article-content h2,.article-content h3{color:var(--deep-burgundy);margin:1.6rem 0 .8rem}
.article-content blockquote{
    border-left:4px solid var(--gold);background:#faf4e9;padding:1rem 1.3rem;margin:1.4rem 0;
    font-family:var(--serif);font-style:italic;color:#4a3a2e;
}
.related{margin-top:2.6rem}

/* =================================================================
   STATIC CONTENT PAGES
   ================================================================= */
.prose{background:#fff;border:1px solid #e7dcc9;border-radius:var(--radius);padding:2.2rem 2.6rem;box-shadow:0 6px 18px rgba(35,2,2,.05)}
.prose h1{color:var(--dark-red);font-size:clamp(1.5rem,2.6vw,2.05rem);margin:0 0 1.1rem;letter-spacing:.01em}
.prose h2{color:var(--dark-red);font-size:1.5rem;margin:1.8rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose h3{color:var(--deep-burgundy);font-size:1.15rem;margin:1.4rem 0 .6rem}
.prose p{margin-bottom:1.1rem;color:#33271f}
.prose ul{margin:0 0 1.1rem 1.2rem}
.prose li{margin-bottom:.5rem}
.prose .lead{font-size:1.12rem;font-family:var(--serif);color:#4a3a2e;border-left:4px solid var(--gold);padding-left:1rem}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin:1.6rem 0}
.info-card{background:#faf4e9;border:1px solid #ecdfc8;border-radius:6px;padding:1.2rem}
.info-card h4{color:var(--dark-red);margin-bottom:.4rem}
.info-card .big{font-family:var(--serif);font-size:1.8rem;color:var(--deep-burgundy)}

/* =================================================================
   CONTACT
   ================================================================= */
.contact-page{
    padding:clamp(1.8rem,3.3vw,3rem) 0 clamp(3rem,5vw,5rem);
    background:radial-gradient(circle at 92% 12%,rgba(214,168,74,.13),transparent 35%),#f7f1e7;
}
.contact-shell{max-width:1400px}
.contact-hero{
    position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;
    min-height:155px;overflow:hidden;margin-bottom:clamp(1rem,1.7vw,1.4rem);
    padding:clamp(1.2rem,2vw,1.75rem) clamp(1.35rem,3vw,2.6rem);
    border:1px solid rgba(214,168,74,.5);border-radius:18px;color:#fff;
    box-shadow:0 18px 40px rgba(35,2,2,.16);
}
.contact-hero::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg,rgba(18,1,1,.12),rgba(18,1,1,.35));
}
.contact-hero::after{
    content:"";position:absolute;inset-block:1.55rem;inset-inline-start:0;
    width:4px;border-radius:0 4px 4px 0;background:var(--gold);
}
.contact-hero-copy{position:relative;z-index:1;max-width:750px}
.contact-eyebrow{
    display:block;margin-bottom:.4rem;color:var(--gold-light);
    font-size:.76rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase;
}
.contact-hero h1{
    margin:0 0 .35rem;color:#fff;
    font-size:clamp(1.8rem,2.75vw,2.8rem);line-height:1.12;
}
.contact-intro{
    max-width:620px;color:rgba(255,255,255,.78);
    font-size:clamp(.96rem,1.15vw,1.1rem);line-height:1.65;
}
.contact-layout{
    display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);
    gap:clamp(1.1rem,2vw,1.7rem);align-items:stretch;
}
.contact-panel{
    min-width:0;display:flex;flex-direction:column;
    padding:clamp(1.35rem,2.3vw,2.1rem);
    border:1px solid #e7d9c7;border-radius:18px;background:#fffdfa;
    box-shadow:0 15px 35px rgba(35,2,2,.08);
}
.contact-panel-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.25rem}
.contact-panel-rule{flex:0 0 4px;align-self:stretch;min-height:28px;border-radius:3px;background:var(--gold)}
.contact-panel-head h2{
    color:var(--dark-red);font-size:clamp(1.35rem,1.8vw,1.75rem);line-height:1.25;
}
.contact-details{display:grid;gap:.85rem}
.contact-detail{
    display:flex;align-items:center;gap:1rem;min-width:0;
    padding:1.15rem;border:1px solid #ebdfd0;border-radius:12px;
    background:#faf5ed;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
a.contact-detail:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 8px 20px rgba(35,2,2,.08)}
a.contact-detail:focus-visible,.contact-map-head>a:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.contact-detail-icon{
    display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:10px;
    color:var(--gold-light);background:var(--dark-red);
}
.contact-detail-icon svg{width:21px;height:21px;fill:currentColor}
.contact-detail>span:last-child{min-width:0}
.contact-detail strong{display:block;margin-bottom:.15rem;color:var(--dark-red);font-size:.94rem}
.contact-detail small{
    display:block;max-width:100%;color:#66564e;font-size:.86rem;line-height:1.55;
    overflow-wrap:anywhere;
}
.contact-socials{
    display:flex;align-items:center;justify-content:space-between;
    gap:1rem;margin-top:auto;padding:1.3rem .15rem .1rem;
    border-top:1px solid #e9ddcc;
}
.contact-socials>strong{color:var(--dark-red);font-size:.92rem}
.contact-social-row{display:flex;align-items:center;gap:.75rem;direction:ltr}
.contact-social-row a{
    display:grid;place-items:center;width:40px;height:40px;
    border:1px solid #e9ddcc;border-radius:50%;background:#faf5ed;transition:transform .2s ease,border-color .2s ease;
}
.contact-social-row a:hover{transform:translateY(-3px);border-color:var(--gold)}
.contact-social-row a:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px;border-radius:50%}
.contact-social-row img{
    display:block;width:82%;height:82%;object-fit:contain;
    pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.contact-social-row .contact-social-x img{
    padding:13%;border-radius:50%;background:#fff;
}
.contact-map-card{
    min-width:0;display:flex;flex-direction:column;padding:clamp(.75rem,1.3vw,1rem);
    border:1px solid #e7d9c7;border-radius:18px;background:#fffdfa;
    box-shadow:0 15px 35px rgba(35,2,2,.08);
}
.contact-map-head{
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
    min-height:60px;padding:.2rem .35rem .85rem .5rem;
}
.contact-map-head>div{display:flex;align-items:center;gap:.65rem;min-width:0}
.contact-map-head h2{color:var(--dark-red);font-size:clamp(1.1rem,1.5vw,1.5rem)}
.contact-map-head>a{
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;flex:0 0 auto;
    min-height:40px;padding:.52rem .85rem;border-radius:8px;color:var(--gold-light);background:var(--dark-red);
    font-size:.78rem;font-weight:700;transition:background .2s ease,transform .2s ease;
}
.contact-map-head>a:hover{background:var(--burgundy);transform:translateY(-1px)}
.contact-map-head>a svg{width:15px;height:15px;fill:currentColor}
.contact-map-frame{
    flex:1;min-height:370px;overflow:hidden;border:1px solid #e8dfd0;border-radius:11px;background:#eee6d9;
}
.contact-map-frame iframe{display:block;width:100%;height:100%;min-height:370px;border:0}
.contact-map-footer{
    display:flex;align-items:center;gap:.65rem;min-height:48px;padding:.75rem .35rem .1rem;
    color:#66564e;font-size:.85rem;line-height:1.45;
}
.contact-map-footer-icon{display:grid;place-items:center;flex:0 0 24px;color:var(--burgundy)}
.contact-map-footer-icon svg{width:18px;height:18px}
[dir=rtl] .contact-map-head>a svg{transform:scaleX(-1)}
[dir=rtl] .contact-hero::after{border-radius:4px 0 0 4px}

@media(max-width:980px){
    .contact-layout{grid-template-columns:1fr}
    .contact-details{grid-template-columns:repeat(2,minmax(0,1fr))}
    .contact-detail{align-items:flex-start;flex-direction:column}
    .contact-socials{margin-top:1.5rem}
    .contact-map-frame,.contact-map-frame iframe{min-height:400px}
}
@media(max-width:680px){
    .contact-page{padding:1.1rem 0 3.2rem}
    .contact-hero,.contact-panel,.contact-map-card{border-radius:14px}
    .contact-hero{min-height:0;padding:1.25rem 1.2rem}
    .contact-hero h1{font-size:clamp(1.7rem,8vw,2.25rem)}
    .contact-panel{padding:1.4rem 1.15rem}
    .contact-details{grid-template-columns:1fr}
    .contact-detail{align-items:center;flex-direction:row;padding:1rem}
    .contact-socials{padding:1.1rem .1rem .1rem}
    .contact-map-head{align-items:flex-start;flex-direction:column;padding:.3rem .35rem .9rem}
    .contact-map-head>a{width:100%}
    .contact-map-frame,.contact-map-frame iframe{min-height:320px}
}

/* =================================================================
   FOOTER
   ================================================================= */
/* Everything below is scoped under .site-footer so it cannot leak into other
   sections. Palette variables are declared on the footer itself for the same
   reason. */
.site-footer{
    --f-black:#070303;
    --f-burgundy:#160503;
    --f-brown:#210907;
    --f-gold:#d6a84a;
    --f-gold-bright:#f3cf78;
    --f-gold-dark:#9c7526;
    --f-ivory:#f5e7ba;

    margin-top:auto;
    background-color:var(--f-black);
    color:var(--f-ivory);
}

/* ---------- A. Upper main footer ---------- */
.site-footer .footer-main{
    background:#160303;
    position:relative;
}
.site-footer .footer-main::before{display:none}
.site-footer .footer-main-inner{
    position:relative;z-index:1;
    display:flex;flex-direction:column;justify-content:center;
    align-items:center;
    gap:0 clamp(.5rem,1.2vw,1.4rem);
    max-width:1780px;margin:0 auto;direction:ltr;
    padding:clamp(.75rem,1.05vw,1.3rem) clamp(.9rem,1.8vw,2rem);
}
.site-footer .footer-col{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
html[dir=rtl] .site-footer .footer-col{direction:rtl}
/* Both side columns are stretched to the full row height and their content pinned
   to the same top offset, so "Contact Us" and "Follow Us" land on one line.
   Centring them (the grid default) staggers the headings, because the contact
   block is taller than the social block. */
.site-footer .footer-contact,
.site-footer .footer-follow{
    align-self:stretch;
    justify-content:flex-start;
    padding-top:clamp(1rem,3.4vw,2.9rem);
}

/* ---------- Decorative headings (Contact Us / Follow Us) ---------- */
.site-footer .footer-heading{
    display:flex;flex-direction:column;align-items:stretch;gap:clamp(.5rem,.9vw,.9rem);
    width:min(100%,clamp(124px,9.6vw,180px));margin:0 0 clamp(.5rem,1vw,.95rem);
}
.site-footer .f-heading-text{
    font-family:var(--serif);font-weight:700;
    font-size:clamp(.95rem,1.22vw,1.32rem);
    line-height:1.18;color:#fff;
    max-width:100%;letter-spacing:.01em;overflow-wrap:anywhere;
}
/* thin rule with a centred diamond */
.site-footer .f-orn{display:flex;align-items:center;gap:.4rem;width:100%}
.site-footer .f-orn::before,
.site-footer .f-orn::after{
    content:"";flex:1;height:1px;
    background:linear-gradient(90deg,rgba(214,168,74,0),rgba(214,168,74,.72),rgba(214,168,74,0));
}
.site-footer .f-orn i{
    width:5px;height:5px;flex:0 0 auto;transform:rotate(45deg);
    background:var(--f-gold);
}

/* ---------- Left column: contact ---------- */
/* fit-content + flex-start makes both rows share one left edge, so the two icon
   circles line up. Centring each row instead staggered them, because the address
   and the email are not the same length. The list as a whole stays centred. */
.site-footer .f-contact-list{
    list-style:none;display:flex;flex-direction:column;
    gap:clamp(.4rem,.78vw,.75rem);
    width:fit-content;max-width:100%;margin-inline:auto;direction:ltr;
    align-items:flex-start;
}
.site-footer .f-contact-list li{display:flex;align-items:center;gap:clamp(.45rem,.8vw,.8rem);text-align:start;max-width:100%}
.site-footer .f-icon-circle{
    flex:0 0 auto;
    width:clamp(30px,2.5vw,40px);height:clamp(30px,2.5vw,40px);
    display:grid;place-items:center;border:0;background:transparent;
}
.site-footer .f-icon-circle svg{width:64%;height:64%;fill:#fff}
.site-footer .f-contact-text{
    color:#fff;font-size:clamp(.76rem,.82vw,.98rem);
    line-height:1.4;overflow-wrap:anywhere;transition:color .25s;
}
.site-footer a.f-contact-text:hover{color:var(--f-gold-bright)}

/* ---------- Centre column: branding ---------- */
.site-footer .f-logo-wrap{position:relative;display:grid;place-items:center;margin-bottom:clamp(.3rem,.6vw,.7rem)}
.site-footer .f-logo{
    position:relative;
    width:clamp(98px,8.6vw,162px);height:auto;
}
/* Styled to match the brand bar in the header: line 1 cream serif, line 2 gold-light
   serif with wider tracking. Same variables the header uses, so the two stay in
   step if the palette ever changes. */
.site-footer .f-brand-name{
    font-family:var(--serif);font-weight:700;
    font-size:clamp(1rem,1.32vw,1.62rem);line-height:1.16;
    margin:0;
    color:#fff;
    /* .032em, not .05em: in the header the .05em is declared on the parent at 16px,
       so it inherits as 0.8px and computes to ~.032em against the larger brand font.
       This reproduces the tracking the header actually renders. */
    letter-spacing:.032em;
}
.site-footer .f-brand-sub{
    font-family:var(--serif);color:#fff;
    font-size:clamp(.76rem,1vw,1.12rem);line-height:1.3;
    margin:clamp(.25rem,.6vw,.55rem) 0 0;
    letter-spacing:.12em;
}

/* ---------- Complete footer navigation ---------- */
.site-footer .footer-nav{width:100%;margin-top:clamp(.9rem,1.5vw,1.5rem)}
.site-footer .footer-nav-list{
    list-style:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:.35rem clamp(.75rem,1.55vw,1.75rem);margin:0;padding:0;
}
.site-footer .footer-nav a{
    position:relative;display:block;padding:.38rem .15rem .52rem;
    color:#fff;font-size:clamp(.92rem,1vw,1.08rem);font-weight:650;
    line-height:1.35;letter-spacing:.025em;transition:color .2s ease;
}
.site-footer .footer-nav a::after{
    content:"";position:absolute;left:50%;right:50%;bottom:.12rem;height:2px;
    border-radius:999px;background:var(--f-gold);transition:left .2s ease,right .2s ease;
}
.site-footer .footer-nav a:hover,
.site-footer .footer-nav a:focus-visible,
.site-footer .footer-nav a.active{color:var(--f-gold-bright)}
.site-footer .footer-nav a:hover::after,
.site-footer .footer-nav a:focus-visible::after,
.site-footer .footer-nav a.active::after{left:0;right:0}
.site-footer .footer-nav a:focus-visible{outline:2px solid var(--f-gold-bright);outline-offset:4px}

/* ---------- Right column: social ---------- */
.site-footer .f-social-row{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,1.6vw,1.85rem);flex-wrap:wrap;direction:ltr}
.site-footer .f-social-btn{
    width:clamp(31px,3.1vw,48px);height:clamp(31px,3.1vw,48px);
    border-radius:50%;display:grid;place-items:center;
    overflow:visible;border:0;background:transparent;
    color:var(--f-gold);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,color .25s ease;
}
.site-footer .f-social-btn .f-social-icon{
    display:block;width:82%;height:82%;object-fit:contain;
    pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.site-footer .f-social-btn .f-social-icon-x{
    width:82%;height:82%;padding:13%;border-radius:50%;background:#fff;filter:none;
}
.site-footer .f-social-btn-x{background:transparent}
.site-footer .f-social-btn:hover{
    transform:translateY(-4px);
    border-color:var(--f-gold-bright);color:var(--f-gold-bright);
}
.site-footer .f-social-btn:focus-visible{outline:2px solid var(--f-gold-bright);outline-offset:4px}

/* ---------- Vertical separators ---------- */
.site-footer .footer-sep{
    position:relative;width:1px;justify-self:center;align-self:stretch;
    margin:clamp(.55rem,1.15vw,1.25rem) 0;
    background:linear-gradient(180deg,rgba(214,168,74,0),rgba(214,168,74,.42) 22%,rgba(214,168,74,.42) 78%,rgba(214,168,74,0));
}
/* bright separator bloom removed — flat gold hairlines only, for an official look */

/* ---------- B. Lower copyright bar ---------- */
.site-footer .footer-bottom{
    position:relative;
    background:var(--black-red); /* same tone as the nav bar; no SVG behind this band */
    border-top:1px solid rgba(214,168,74,.42);
}
/* copyright-border bloom removed — plain gold top border only, for an official look */
.site-footer .footer-bottom-inner{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    gap:clamp(.6rem,1.7vw,1.9rem);
    min-height:clamp(34px,2.6vw,44px);
    padding:.4rem clamp(.9rem,1.8vw,2rem);direction:ltr;
    max-width:1780px;margin:0 auto;
}
.site-footer .footer-bottom-social{
    position:absolute;right:clamp(.9rem,1.8vw,2rem);top:50%;transform:translateY(-50%);
    display:flex;align-items:center;justify-content:flex-end;gap:.45rem;direction:ltr;
}
.site-footer .footer-bottom-social .f-social-btn{width:28px;height:28px}
@media(max-width:900px){
    .site-footer .footer-main-inner{padding-bottom:5.75rem}
    .site-footer .footer-nav-list{
        display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
        width:min(100%,620px);gap:.5rem;margin-inline:auto;
    }
    .site-footer .footer-nav li{min-width:0}
    .site-footer .footer-nav a{
        display:flex;align-items:center;gap:.4rem;min-height:36px;
        padding:.44rem .55rem;border:1px solid rgba(214,168,74,.16);border-radius:6px;
        background:rgba(255,255,255,.025);color:#fff;
        font-size:clamp(.7rem,2.35vw,.8rem);font-weight:650;line-height:1.28;
        text-align:start;letter-spacing:.01em;
    }
    .site-footer .footer-nav a::after{display:none}
    .site-footer .footer-nav a:hover,
    .site-footer .footer-nav a:focus-visible{background:rgba(214,168,74,.09);border-color:rgba(214,168,74,.45)}
    .site-footer .footer-nav a.active{
        color:var(--f-gold-bright);background:rgba(214,168,74,.15);
        border-color:rgba(243,207,120,.72);box-shadow:inset 0 0 0 1px rgba(243,207,120,.08);
    }
    .site-footer .footer-bottom-inner{flex-wrap:nowrap}
    .site-footer .footer-bottom-social{
        position:absolute;right:.95rem;top:-4.15rem;transform:none;
        width:auto;justify-content:flex-end;padding:0;
    }
    .site-footer .footer-bottom-social .f-social-btn{width:32px;height:32px}
    .site-footer .f-copy{
        white-space:nowrap;font-size:clamp(.42rem,1.75vw,.72rem);line-height:1.45;
    }
    .site-footer .f-laurel{display:none}
}
.site-footer .f-copy{
    font-family:var(--serif);color:#fff;
    font-size:clamp(.73rem,.77vw,.93rem);line-height:1.5;
    text-align:center;margin:0;
}
.site-footer .f-laurel{flex:0 0 auto;display:block}
/* Supplied artwork: already gold and already correctly handed, so it is neither
   tinted nor mirrored. Sized by height so both sides match the copyright line. */
.site-footer .f-laurel img{height:clamp(20px,1.75vw,30px);width:auto;display:block}

/* Above the stacking breakpoint the title is sized to fit its column, so hold it on
   one line like the reference. Below it, wrapping is expected and allowed. */
@media (min-width:1101px){
    .site-footer .f-brand-name{white-space:nowrap}
}

/* ---------- Tablet / mobile ----------
   The three-column desktop arrangement is kept all the way down — phones get the
   same layout, only scaled. Nothing stacks and the gold rules stay in place. */
@media (max-width:1100px){
    .site-footer .footer-main-inner{gap:0 clamp(.35rem,1vw,1rem)}
    /* icon above text: a two-across row needs width the side columns no longer have.
       Rows go full-width here so the centred icons still share one x position. */
    .site-footer .f-contact-list{width:100%;align-items:stretch}
    .site-footer .f-contact-list li{flex-direction:column;align-items:center;text-align:center;gap:.3rem}
}
@media (max-width:860px){
    .site-footer .footer-main-inner{
        padding:clamp(.6rem,1.9vw,.95rem) clamp(.4rem,1.4vw,.85rem) 5.75rem;
        gap:0 clamp(.25rem,.8vw,.6rem);
    }
    .site-footer .footer-heading{margin-bottom:clamp(.5rem,1.6vw,.85rem)}
    .site-footer .f-heading-text{font-size:clamp(.72rem,1.8vw,.95rem)}
    .site-footer .f-contact-text{font-size:clamp(.56rem,1.3vw,.71rem)}
    .site-footer .f-icon-circle{width:clamp(24px,4vw,31px);height:clamp(24px,4vw,31px)}
    .site-footer .f-logo{width:clamp(76px,17vw,118px)}
    .site-footer .f-brand-name{font-size:clamp(.75rem,2vw,.99rem)}
    .site-footer .f-brand-sub{font-size:clamp(.6rem,1.5vw,.77rem)}
    .site-footer .f-social-btn{width:clamp(25px,4.7vw,36px);height:clamp(25px,4.7vw,36px)}
    .site-footer .f-social-row{gap:clamp(.4rem,1.4vw,.9rem)}
    .site-footer .footer-sep{margin:clamp(.5rem,1.6vw,1rem) 0}
    .site-footer .footer-sep::after{height:30px}
    .site-footer .f-copy{
        white-space:nowrap;font-size:clamp(.42rem,1.75vw,.72rem);line-height:1.45;
    }
    .site-footer .footer-bottom-inner{gap:.45rem;padding:.35rem .7rem;min-height:clamp(28px,5vw,36px)}
    .site-footer .footer-contact,
    .site-footer .footer-follow{padding-top:clamp(.6rem,2.4vw,1.4rem)}

    /* ---- Dial the glow right down ----
       At this scale the elements sit close together, so glows that read as
       "premium" on a wide screen overlap into a hazy, crowded mess. */
    .site-footer .f-heading-text{text-shadow:0 1px 3px rgba(0,0,0,.6)}
    .site-footer .f-orn i{box-shadow:none}
    .site-footer .f-icon-circle{
        box-shadow:none;
        border-color:rgba(214,168,74,.45);
    }
    .site-footer .f-social-btn{
        box-shadow:none;
        border-color:rgba(214,168,74,.5);
    }
    .site-footer .f-logo{filter:none}
    .site-footer .f-logo-wrap::before{
        background:radial-gradient(circle,rgba(214,168,74,.13),transparent 62%);
        filter:blur(4px);
    }
    .site-footer .footer-sep::after{
        height:22px;width:1px;
        box-shadow:0 0 5px rgba(243,207,120,.45);
    }
    .site-footer .footer-bottom::before{
        width:min(180px,42%);
        box-shadow:0 0 7px rgba(243,207,120,.4);
    }
    .site-footer .f-laurel img{height:clamp(15px,3.4vw,22px)}
}
@media (max-width:420px){
    /* the laurels cost width the copyright line needs at this size */
    .site-footer .f-laurel{display:none}
    .site-footer .f-orn i{width:4px;height:4px}
}

/* Kurdish/Arabic need a taller line box than the Latin serif allows */
html[lang=ckb] .site-footer .f-brand-name,
html[lang=ar]  .site-footer .f-brand-name{line-height:1.5}
html[lang=ckb] .site-footer .f-brand-name{font-family:var(--kurdish)}
html[lang=ckb] .site-footer .f-brand-sub{font-family:var(--kurdish);line-height:1.7}

@media (prefers-reduced-motion:reduce){
    .site-footer .f-social-btn{transition:none}
    .site-footer .f-social-btn:hover{transform:none}
}

/* =================================================================
   LAYOUT helpers
   ================================================================= */
body{display:flex;flex-direction:column;min-height:100vh}
.site-main{flex:1}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (min-width:1600px){:root{--gutter:64px}}
@media (min-width:2000px){:root{--gutter:90px}}

@media (max-width:1024px){
    .hero-grid{grid-template-columns:1fr}
    .hero-aside{order:2}
    .home-mid{grid-template-columns:1fr}
    .news-grid{grid-template-columns:repeat(2,1fr)}
    .role-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .gallery-strip{grid-template-columns:repeat(4,1fr)}
    .brand-en .brand-line-1{font-size:1.25rem}
    .brand-ar .brand-line-1{font-size:1.55rem}
    .brand-logo img{height:134px}
}
/* Collapse the nav into a scrollable dropdown at the point where the links would
   otherwise run into the language switcher. Measured, not guessed: logo + the 7 links
   + the 3 language links need 1169px in English (the widest), 1109px in Kurdish. */
@media (max-width:1200px){
    .nav-toggle{display:flex}
    /* The links panel is absolutely positioned here, so the brand is free to take
       the whole bar up to the hamburger instead of a fixed cap. */
    .nav-brand{order:1;min-width:0;gap:.5rem}
    .nav-brand img{height:56px}
    .mainnav.is-stuck .nav-brand img{height:64px}
    .nav-brand-name{display:block}
    .mainnav.is-stuck .nav-brand,
    .mainnav.nav-open .nav-brand{
        flex:1 1 auto;max-width:none;opacity:1;visibility:visible;margin-inline-end:.6rem;
    }
    /* Scale with the viewport so the name fits phone widths without ellipsising —
       the Arabic and Kurdish office names are considerably longer than the English. */
    .nav-brand-name{font-size:clamp(.92rem,4vw,1.18rem)}
    html[lang=ckb] .nav-brand-name,
    html[lang=ar] .nav-brand-name{font-size:clamp(.82rem,3.5vw,1.08rem)}
    .mainnav.is-stuck .nav-brand-name{font-size:clamp(1.02rem,4vw,1.32rem)}
    html[lang=ckb] .mainnav.is-stuck .nav-brand-name,
    html[lang=ar] .mainnav.is-stuck .nav-brand-name{font-size:clamp(.96rem,3.5vw,1.22rem)}

    .nav-collapse{
        position:absolute;left:0;right:0;top:100%;
        flex-direction:column;align-items:stretch;justify-content:flex-start;
        background:var(--black-red);border-top:var(--gold-line);
        box-shadow:0 14px 28px rgba(0,0,0,.45);
        /* Scroll inside the panel so every link stays reachable on short screens */
        max-height:0;overflow:hidden;
        transition:max-height .3s ease;
        overscroll-behavior:contain;
    }
    .nav-collapse.open{max-height:calc(100vh - var(--nav-h));overflow-y:auto}
    @supports (height:100dvh){
        .nav-collapse.open{max-height:calc(100dvh - var(--nav-h))}
    }

    .nav-menu{flex-direction:column;flex-wrap:nowrap;gap:0;width:100%}
    .nav-menu a{padding:.95rem 1.4rem;border-bottom:var(--gold-line)}
    .mainnav.is-stuck .nav-menu a{padding:1rem 1.4rem;font-size:.9rem}
    .nav-menu a::after{display:none}
    .nav-menu a.active{background:rgba(214,168,74,.08)}

    /* The left slot of the bar swaps: languages while resting at the top of the page,
       logo + office name once the nav sticks OR whenever the menu is open. */
    .lang-bar{
        order:2;margin-inline-end:auto;
        max-width:70vw;opacity:1;visibility:visible;overflow:hidden;
        transition:max-width .3s ease,opacity .25s,visibility .25s;
    }
    .mainnav.is-stuck .lang-bar,
    .mainnav.nav-open .lang-bar{max-width:0;opacity:0;visibility:hidden}

    /* Languages sit below the links, inside the scrolling panel */
    .lang-panel{
        display:flex;justify-content:center;gap:.75rem;
        width:100%;padding:1.15rem 1.4rem;font-size:.95rem;
    }
    .mainnav.is-stuck .lang-panel{padding:1.1rem 1.4rem;font-size:.92rem}
}
@media (max-width:820px){
    .brandbar-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.6rem;padding:1rem 0}
    .brand-en,.brand-ar{align-items:center;text-align:center}
    .brand-en .brand-line-1{font-size:1.35rem}
    .brand-en .brand-line-2{font-size:1.08rem}
    .brand-ar .brand-line-1{font-size:1.62rem}
    .brand-ar .brand-line-2{font-size:1.22rem}
    .brand-logo img{height:136px}
    .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
    :root{--gutter:18px}
    .news-grid{grid-template-columns:1fr}
    .gallery-strip{grid-template-columns:repeat(3,1fr)}
    .hero-content{padding:1rem 1.2rem 2.7rem}
    .hero h1{font-size:1.35rem;line-height:1.18;margin-bottom:.35rem}
    .hero p{font-size:.82rem;line-height:1.45;margin-bottom:.7rem;max-width:100%}
    .brand-logo img{height:122px}
    .topbar-left{display:none}
    .article-body{padding:1.4rem}
    .prose{padding:1.5rem}
    .article-hero{aspect-ratio:4/3;max-height:none}
    .article-news-detail .article-hero{aspect-ratio:16/11;max-height:none}
    .role-section{margin-top:14px}
    .role-inner{padding:1.2rem var(--gutter)}
    .role-grid{grid-template-columns:1fr}
    .role-block{padding:.7rem .25rem;grid-template-columns:44px minmax(0,1fr)}
    .role-block:not(:last-child)::after{
        top:auto;right:0;bottom:0;width:100%;height:1px;
        background:linear-gradient(90deg,transparent,#decdb8 18%,#decdb8 82%,transparent);
    }
    [dir=rtl] .role-block:not(:last-child)::after{right:0;left:auto}
    .role-block h3{margin-bottom:.35rem}
}

/* =====================================================================
   Office Activities + video embeds
   ===================================================================== */

/* Responsive video block (news & activity detail pages) */
.video-embed{position:relative;width:100%;aspect-ratio:16/9;margin:1.4rem 0 1.7rem;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.video-embed iframe,.video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.video-embed-file video{object-fit:contain}
@supports not (aspect-ratio:16 / 9){.video-embed{height:0;padding-bottom:56.25%}}
.video-link{margin:1.2rem 0}

/* Play badge on activity cards that carry a video */

/* Home office-activities: constrain to the Latest News column width so the
   activity cards are exactly the same size as the news cards (which sit in the
   1fr of the 1fr/360px home split). Full width once that split collapses. */
.activities-section .activities-inner{width:100%}
@media (max-width:1024px){.activities-section .activities-inner{width:100%}}

/* Article hero media slider (image + uploaded video) — swipe / scroll left to watch */
.article-media{position:relative}
.article-media .media-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.article-media .media-track::-webkit-scrollbar{display:none}
.article-media .media-track.dragging{cursor:grabbing;user-select:none}
.article-media .media-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;position:relative;display:grid;place-items:center;overflow:hidden;background:#120101}
/* Stop the browser's native image drag from hijacking a click-and-drag */
.article-media .media-slide img{-webkit-user-drag:none;user-select:none}
.article-media .media-slide-video{display:flex;align-items:center;justify-content:center}
.article-media .media-slide-video video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
/* YouTube / Vimeo slide — the iframe fills the slide like an image would */
.article-media .media-slide-embed{background:#000}
.article-media .media-slide-embed iframe{width:100%;height:100%;border:0;display:block}
/* Gallery arrows — bare chevrons, no disc. The button keeps a 48px box so the hit
   area stays comfortable; only the mark is visible. A drop-shadow carries it over
   light areas of a photo, which a flat chevron would otherwise disappear into. */
.media-nav{
    position:absolute;top:50%;z-index:5;
    width:48px;height:48px;padding:0;
    display:grid;place-items:center;
    border:none;background:none;
    color:var(--gold-light);cursor:pointer;
    transform:translateY(-50%);
    transition:color .25s,transform .25s;
}
.media-nav svg{
    width:30px;height:30px;display:block;
    fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(0,0,0,.45));
}
.media-nav:hover{color:#fff;transform:translateY(-50%) scale(1.12)}
.media-nav:active{transform:translateY(-50%) scale(.96)}
.media-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.media-nav.prev{left:16px}
.media-nav.next{right:16px}
.media-nav[hidden]{display:none}
[dir=rtl] .media-nav.prev{left:auto;right:16px}
[dir=rtl] .media-nav.next{right:auto;left:16px}
[dir=rtl] .media-nav svg{transform:scaleX(-1)}
@media (max-width:560px){
    .media-nav{width:44px;height:44px}
    .media-nav svg{width:26px;height:26px}
    .media-nav.prev{left:6px}
    .media-nav.next{right:6px}
    [dir=rtl] .media-nav.prev{left:auto;right:6px}
    [dir=rtl] .media-nav.next{right:auto;left:6px}
}
.article-media .media-dots{position:absolute;left:0;right:0;bottom:12px;z-index:5;display:flex;justify-content:center;gap:.5rem;margin:0}
.article-media .media-dots .dot{width:26px;height:3px;border-radius:2px;background:rgba(248,242,233,.45);cursor:pointer;font-size:0;transition:.25s}
.article-media .media-dots .dot:hover{background:rgba(243,207,120,.7)}
.article-media .media-dots .dot.active{background:var(--gold);width:40px}

/* News galleries use the same clean white slider treatment as the homepage. */
.article-news-detail .media-nav{color:#fff}
.article-news-detail .media-nav:hover{color:#fff}
.article-news-detail .media-dots .dot{background:rgba(255,255,255,.45)}
.article-news-detail .media-dots .dot:hover{background:rgba(255,255,255,.75)}
.article-news-detail .media-dots .dot.active{background:#fff}

/* Arabic / Kurdish UI sizing
   Fixed interface copy is raised slightly to match the visual weight of English.
   User-uploaded post text is intentionally excluded: hero h1/p, news/activity card
   titles and excerpts, article headings, and .article-content keep their own sizes. */
:is(html[lang=ar],html[lang=ckb]) .nav-menu a{
    font-size:.9rem;letter-spacing:0;text-transform:none;
}
:is(html[lang=ar],html[lang=ckb]) .mainnav.is-stuck .nav-menu a{font-size:.94rem}
:is(html[lang=ar],html[lang=ckb]) .nav-brand-name{font-size:1.05rem}
:is(html[lang=ar],html[lang=ckb]) .mainnav.is-stuck .nav-brand-name{font-size:1.18rem}
:is(html[lang=ar],html[lang=ckb]) .lang-switcher{font-size:.86rem}
:is(html[lang=ar],html[lang=ckb]) .mainnav.is-stuck .lang-switcher{font-size:.9rem}
:is(html[lang=ar],html[lang=ckb]) .btn{font-size:.88rem;letter-spacing:.025em}
:is(html[lang=ar],html[lang=ckb]) .hero-content .btn{font-size:.8rem}
:is(html[lang=ar],html[lang=ckb]) .section-head:not(.s4-section-head) .section-title{font-size:1.62rem}
:is(html[lang=ar],html[lang=ckb]) .section-link{font-size:.86rem;letter-spacing:.02em}
:is(html[lang=ar],html[lang=ckb]) .s4-section-head .section-title{font-size:1.12rem}
:is(html[lang=ar],html[lang=ckb]) .read-more{font-size:.79rem;letter-spacing:.025em}
:is(html[lang=ar],html[lang=ckb]) .s4-news-track .read-more,
:is(html[lang=ar],html[lang=ckb]) .s4-activity-row .read-more{font-size:.72rem}

:is(html[lang=ar],html[lang=ckb]) .role-block h3{font-size:1.06rem}
:is(html[lang=ar],html[lang=ckb]) .role-block p{font-size:.82rem;line-height:1.65}
:is(html[lang=ar],html[lang=ckb]) .s3-kicker{font-size:.76rem;letter-spacing:.06em}
:is(html[lang=ar],html[lang=ckb]) .s3-copy h2{font-size:clamp(1.75rem,2.6vw,2.48rem)}
:is(html[lang=ar],html[lang=ckb]) .s3-copy p{font-size:1rem}

:is(html[lang=ar],html[lang=ckb]) .s5-publications>h2{font-size:.96rem;letter-spacing:0}
:is(html[lang=ar],html[lang=ckb]) .s5-tabs button{font-size:.72rem;letter-spacing:0}
:is(html[lang=ar],html[lang=ckb]) .s5-document-card h3{font-size:.82rem}
:is(html[lang=ar],html[lang=ckb]) .s5-document-card>p{font-size:.67rem}
:is(html[lang=ar],html[lang=ckb]) .s5-document-card>a{font-size:.7rem}
:is(html[lang=ar],html[lang=ckb]) .s5-statement blockquote{font-size:clamp(1.18rem,1.72vw,1.62rem)}
:is(html[lang=ar],html[lang=ckb]) .s5-statement strong{font-size:1.12rem}
:is(html[lang=ar],html[lang=ckb]) .s5-statement small{font-size:.86rem}

:is(html[lang=ar],html[lang=ckb]) .s6-map-panel h2{
    font-size:clamp(1rem,1.15vw,1.16rem);letter-spacing:0;text-transform:none;
}
:is(html[lang=ar],html[lang=ckb]) .s6-stat span{font-size:clamp(.86rem,1vw,1.04rem)}
:is(html[lang=ar],html[lang=ckb]) .page-header h1{font-size:clamp(2.4rem,4vw,3.15rem);letter-spacing:0}
:is(html[lang=ar],html[lang=ckb]) .breadcrumb{font-size:.88rem}

:is(html[lang=ar],html[lang=ckb]) .news-search-trigger{font-size:.88rem}
:is(html[lang=ar],html[lang=ckb]) .news-search-title h2{font-size:1.12rem}
:is(html[lang=ar],html[lang=ckb]) .news-clear-filters{font-size:.78rem}
:is(html[lang=ar],html[lang=ckb]) .news-filter-field>span{font-size:.74rem;letter-spacing:0}
:is(html[lang=ar],html[lang=ckb]) .news-filter-control input,
:is(html[lang=ar],html[lang=ckb]) .news-filter-control select{font-size:.88rem}
:is(html[lang=ar],html[lang=ckb]) .news-results-count{font-size:.78rem}

:is(html[lang=ar],html[lang=ckb]) .prose{font-size:1.04rem}
:is(html[lang=ar],html[lang=ckb]) .prose .lead{font-size:1.18rem}
:is(html[lang=ar],html[lang=ckb]) .kdp-est-lead,
:is(html[lang=ar],html[lang=ckb]) .kdp-vision-lead{font-size:clamp(1.08rem,1.42vw,1.24rem)}
:is(html[lang=ar],html[lang=ckb]) .kdp-body p{font-size:1.04rem}
:is(html[lang=ar],html[lang=ckb]) .kdp-goal-group .kdp-list li{font-size:1.01rem}
:is(html[lang=ar],html[lang=ckb]) .tl-body{font-size:1.03rem}
:is(html[lang=ar],html[lang=ckb]) .kr-city p{font-size:1.04rem}
:is(html[lang=ar],html[lang=ckb]) .kr-tags li{font-size:.94rem}

:is(html[lang=ar],html[lang=ckb]) .site-footer .f-heading-text{font-size:clamp(1.02rem,1.3vw,1.4rem)}
:is(html[lang=ar],html[lang=ckb]) .site-footer .f-contact-text{font-size:clamp(.82rem,.9vw,1.04rem)}
:is(html[lang=ar],html[lang=ckb]) .site-footer .f-brand-name{font-size:clamp(1.06rem,1.4vw,1.7rem)}
:is(html[lang=ar],html[lang=ckb]) .site-footer .f-brand-sub{font-size:clamp(.82rem,1.06vw,1.18rem)}

@media(max-width:640px){
    :is(html[lang=ar],html[lang=ckb]) .nav-brand-name{font-size:clamp(.92rem,3.8vw,1.14rem)}
    :is(html[lang=ar],html[lang=ckb]) .mainnav.is-stuck .nav-brand-name{font-size:clamp(1rem,3.8vw,1.22rem)}
    :is(html[lang=ar],html[lang=ckb]) .page-header h1{font-size:2.2rem}
    :is(html[lang=ar],html[lang=ckb]) .s3-copy h2{font-size:1.62rem}
    :is(html[lang=ar],html[lang=ckb]) .s3-copy p{font-size:.92rem}
}

/* One-time scroll reveals (initialized by main.js on non-home public pages). */
.js-scroll-reveal .scroll-reveal{
    opacity:0;
    transform:translate3d(0,24px,0);
    will-change:opacity,transform;
}
.js-scroll-reveal .scroll-reveal.is-revealed{
    animation:page-scroll-reveal 700ms cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) both;
}
@keyframes page-scroll-reveal{
    from{opacity:0;transform:translate3d(0,24px,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
    .js-scroll-reveal .scroll-reveal{
        opacity:1;
        transform:none;
        animation:none;
        will-change:auto;
    }
}

/* Mobile branding: logo row followed by one localized identity block. */
@media(max-width:560px){
    .site-footer .footer-brand .f-logo{width:clamp(66px,17vw,82px)}
    html[lang] .site-footer .footer-brand .f-brand-name{font-size:.9rem;line-height:1.45}
    html[lang] .site-footer .footer-brand .f-brand-sub{font-size:.76rem;line-height:1.5;letter-spacing:.035em}
}
.brand-mobile{display:none}
@media(max-width:820px){
    .brandbar-inner>.brand-en,.brandbar-inner>.brand-ar{display:none}
    .brandbar-inner>.brand-logo{grid-row:1}
    .brand-mobile{display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--text-light);max-width:100%;text-align:center}
    .brand-mobile .brand-line-1{font-family:var(--serif);font-size:min(1.12rem,3.8vw);font-weight:700;line-height:1.5;white-space:nowrap}
    .brand-mobile .brand-line-2{font-size:min(.92rem,3.1vw);line-height:1.6;color:var(--gold-light);white-space:nowrap}
    html[lang=ckb] .brand-mobile .brand-line-1{font-family:var(--kurdish)}
}
@media(max-width:560px){
    .article .article-body h1{font-size:1.4rem;line-height:1.5}
}