/* ==========================================================================
   Kurdistan Private Institute — public site
   Palette and type are defined once here. Edit tokens, not call sites.
   ========================================================================== */

:root {
    /* Ground */
    --parchment:      #F7F2E8;
    --parchment-deep: #EEE4D3;
    --parchment-warm: #E7DAC4;

    /* Ink */
    --ink:        #191512;
    --ink-soft:   #463E36;
    --ink-muted:  #7C7065;

    /* Brand — sampled from the institute crest, then deepened where a bright
       flag colour would not hold contrast against the parchment ground.
       Crest values: crimson #D32645, green #338A54, gold #FCBD12. */
    --pomegranate:      #B02138;
    --pomegranate-deep: #7E1526;
    --saffron:          #D9A017;
    --wreath-green:     #2F7A4A;

    --rule: rgba(25, 21, 18, 0.14);
    --rule-strong: rgba(25, 21, 18, 0.28);

    /* Type */
    --display: "Fraunces", "Noto Kufi Arabic", Georgia, serif;
    --body: "Karla", "Noto Sans Arabic", system-ui, sans-serif;

    --measure: 62ch;
    --gutter: clamp(1.25rem, 5vw, 5.5rem);
    --section-y: clamp(5rem, 11vw, 9.5rem);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html[lang="ckb"] {
    --display: "Noto Kufi Arabic", "Fraunces", serif;
    --body: "Noto Sans Arabic", "Karla", system-ui, sans-serif;
    --measure: 58ch;
}

/* --------------------------------------------------------------- reset -- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
    background: var(--parchment);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* height:auto matters — with a width/height attribute on the tag, the height
   attribute acts as a presentational hint and beats any aspect-ratio we set,
   so a cropped image would silently render at its full natural height. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible {
    outline: 2px solid var(--pomegranate);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--saffron); color: var(--ink); }

.skip {
    position: absolute;
    inset-inline-start: var(--gutter);
    top: -100px;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--pomegranate);
    color: var(--parchment);
    transition: top 0.2s var(--ease);
}
.skip:focus { top: 0.75rem; }

/* Paper grain — gives the parchment some tooth instead of flat colour. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0.3;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ typography -- */

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.022em;
    font-variation-settings: "SOFT" 0, "WONK" 1;
}

html[lang="ckb"] h1,
html[lang="ckb"] h2,
html[lang="ckb"] h3,
html[lang="ckb"] h4 {
    line-height: 1.42;
    letter-spacing: 0;
    font-variation-settings: normal;
}

.kicker {
    font-family: var(--body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pomegranate);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.kicker::before {
    content: "";
    width: 2.25rem;
    height: 2px;
    background: var(--pomegranate);
    flex: none;
    transform: scaleX(0);
    transform-origin: var(--origin, left);
    transition: transform 0.7s var(--ease) 0.15s;
}
html[dir="rtl"] .kicker::before { --origin: right; }
[data-reveal].is-in .kicker::before,
.is-in.kicker::before { transform: scaleX(1); }
[data-reveal].is-in .kicker::before { transform: scaleX(1); }
html[lang="ckb"] .kicker { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }

p, h1, h2, h3, h4, li, dd { overflow-wrap: break-word; }

.lede {
    font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
    color: var(--ink-soft);
    max-width: var(--measure);
    line-height: 1.62;
}

/* ---------------------------------------------------------------- shell -- */

.wrap {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
/* the pill sets its own padding */
.wrap.nav__inner { padding-inline: clamp(0.9rem, 2.2vw, 1.9rem); }

section { position: relative; }

.band {
    padding-block: var(--section-y);
    border-top: 1px solid var(--rule);
}

/* Kilim band — a hooked-diamond motif from Kurdish weaving geometry.
   Used as a rule between major movements, not as filler. */
.kilim {
    height: 20px;
    background-repeat: repeat-x;
    background-size: auto 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cg fill='none' stroke='%23B02138' stroke-width='1.4'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z'/%3E%3Cpath d='M24 7 L31 0 L38 7 L31 14 Z'/%3E%3Cpath d='M14 7 H24 M38 7 H48'/%3E%3C/g%3E%3Cg fill='%232F7A4A'%3E%3Crect x='5.5' y='5.5' width='3' height='3'/%3E%3Crect x='29.5' y='5.5' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.75;
    animation: kilimDrift 40s linear infinite;
}
@keyframes kilimDrift {
    to { background-position-x: 96px; }
}

/* Reading progress across the top of the viewport. */
.progress {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 3px;
    z-index: 120;
    background: transparent;
    pointer-events: none;
}
.progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pomegranate);
    transform-origin: var(--origin, left);
}
html[dir="rtl"] .progress span { margin-inline-start: auto; }

/* ------------------------------------------------------------------ nav -- */

/* A pill that floats clear of the edges rather than a bar welded to the top.
   The surface lives on .nav__inner so the rounded ends read against whatever
   is scrolling underneath. */
.nav {
    /* fixed, not sticky: the pill floats over the hero photograph rather than
       reserving a strip of page above it. The hero carries enough top padding
       to clear it. */
    position: fixed;
    top: clamp(0.5rem, 1.4vw, 1rem);
    inset-inline: 0;
    z-index: 90;
    background: transparent;
    padding-inline: clamp(0.6rem, 2.4vw, 1.5rem);
    pointer-events: none;
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2.4vw, 2rem);
    height: clamp(64px, 7.4vw, 88px);
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: clamp(0.9rem, 2.2vw, 1.9rem);
    pointer-events: auto;

    border-radius: 999px;
    background: rgba(247, 242, 232, 0.72);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 1px 2px rgba(25, 21, 18, 0.06),
        0 10px 30px -12px rgba(25, 21, 18, 0.34);
    transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), height 0.35s var(--ease);
}
.nav.is-stuck .nav__inner {
    height: clamp(56px, 6vw, 72px);
    background: rgba(247, 242, 232, 0.88);
    box-shadow:
        0 1px 2px rgba(25, 21, 18, 0.08),
        0 14px 38px -14px rgba(25, 21, 18, 0.42);
}

.brand { display: flex; align-items: center; gap: 0.75rem; flex: none; }

/* The institute crest. Supplied as a knocked-out PNG, so it sits directly on
   whatever ground is behind it — parchment in the header, ink in the footer. */
.brand__mark {
    width: auto;
    height: clamp(42px, 4.4vw, 56px);
    flex: none;
}

.brand__name {
    font-family: var(--display);
    font-size: clamp(1.02rem, 1vw, 1.2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
/* Auto margins on both sides, so the links centre in whatever space is left
   between the crest and the controls rather than bunching against one edge. */
.nav__links {
    display: flex;
    gap: clamp(1.4rem, 2.4vw, 2.6rem);
    margin-inline: auto;
    white-space: nowrap;
}

.nav__links a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-soft);
    padding-block: 0.4rem;
    position: relative;
    transition: color 0.2s var(--ease);
}
.nav__links a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--pomegranate);
    transform: scaleX(0);
    transform-origin: var(--origin, left);
    transition: transform 0.32s var(--ease);
}
html[dir="rtl"] .nav__links a::after { --origin: right; }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a.is-current::after { transform: scaleX(1); }
.nav__links a.is-current { color: var(--ink); }

.nav__end { display: flex; align-items: center; gap: 0.85rem; flex: none; }

.lang {
    display: flex;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    overflow: hidden;
}
.lang button {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang button[aria-pressed="true"] { background: var(--pomegranate); color: var(--parchment); }

/* The in-menu copy of the toggle only exists for phones. Scoped rather than
   ordered, so it cannot be re-enabled by a later single-class rule. */
.nav__links .lang--menu { display: none; }

.btn {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.35rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1.5px solid var(--rule-strong);
    transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn--solid { background: var(--pomegranate); border-color: var(--pomegranate); color: var(--parchment); }
.btn--solid:hover { background: var(--pomegranate-deep); border-color: var(--pomegranate-deep); transform: translateY(-2px); }
.btn--ghost:hover { border-color: var(--pomegranate); color: var(--pomegranate); transform: translateY(-2px); }
.btn--lg { padding: 0.95rem 1.9rem; font-size: 0.9375rem; }

.btn__arrow { transition: transform 0.25s var(--ease); }
html[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(3px); }
html[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

.nav__toggle { display: none; }

/* ----------------------------------------------------------------- hero -- */

/* The campus photograph carries the hero; the copy sits over it on a scrim.
   The source is 1280px wide, so it upscales slightly past ~1400px viewports.
   A larger original is the one thing that would sharpen this up. */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(30rem, 76vh, 46rem);
    padding-block: clamp(6rem, 14vw, 9rem) clamp(2.75rem, 6vw, 4.5rem);
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    /* Slow drift so the hero breathes instead of sitting dead still. Long and
       shallow on purpose — anything faster reads as a screensaver. */
    animation: heroDrift 32s var(--ease) infinite alternate;
    will-change: transform;
}
@keyframes heroDrift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.11) translate3d(-1.6%, -1.2%, 0); }
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        rgba(9, 8, 6, 0.90) 0%,
        rgba(9, 8, 6, 0.72) 38%,
        rgba(9, 8, 6, 0.44) 72%,
        rgba(9, 8, 6, 0.34) 100%);
}

.hero__inner {
    color: #fff;
    /* set from script as the hero scrolls out of view */
    opacity: var(--hero-fade, 1);
    transform: translateY(var(--hero-shift, 0px));
    will-change: opacity, transform;
}

/* The hero is above the fold, so it animates on load rather than waiting for
   an intersection that already happened. */
.hero [data-reveal] {
    animation: heroRise 0.9s var(--ease) both;
    animation-delay: var(--delay, 0ms);
    opacity: 1;
    transform: none;
}
@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

.hero__eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
    margin-bottom: 1.5rem;
}
html[lang="ckb"] .hero__eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }

.hero h1 {
    font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.9rem);
    font-weight: 600;
    max-width: 19ch;
    margin-bottom: 1.6rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.42);
}
.hero h1 em {
    font-style: italic;
    font-weight: 300;
    /* Crimson goes muddy on a dark photograph; the crest's gold does not. */
    color: var(--saffron);
}
html[lang="ckb"] .hero h1 {
    font-size: clamp(1.8rem, 1.1rem + 3.2vw, 3.5rem);
    font-weight: 700;
    max-width: 22ch;
}
html[lang="ckb"] .hero h1 em { font-style: normal; font-weight: 700; }

.hero .lede {
    color: rgba(255, 255, 255, 0.88);
    max-width: 54ch;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }
.hero .btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }

.hero__scroll {
    position: absolute;
    inset-inline-start: 50%;
    bottom: 1.25rem;
    width: 1px;
    height: 46px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 55%, rgba(255,255,255,0) 100%);
    animation: scrollCue 2.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes scrollCue {
    0%, 100% { transform: translateY(-8px) scaleY(0.7); opacity: 0.35; }
    50%      { transform: translateY(8px) scaleY(1); opacity: 1; }
}

.hero__place {
    margin-top: 2.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 760px) {
    .hero { min-height: clamp(28rem, 84vh, 38rem); }
    .hero__bg { object-position: center 40%; }
}

/* ---------------------------------------------------------------- stats -- */

.stats {
    background: var(--parchment-deep);
    border-block: 1px solid var(--rule);
}
.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.stat { padding-inline: clamp(0.75rem, 2vw, 2rem); border-inline-start: 1px solid var(--rule); }
.stat:first-child { border-inline-start: 0; padding-inline-start: 0; }

.stat__num {
    font-variant-numeric: tabular-nums;
    font-family: var(--display);
    font-size: clamp(2.1rem, 1.2rem + 3vw, 3.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--pomegranate);
}
.stat__label {
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
html[lang="ckb"] .stat__label { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }

/* ---------------------------------------------------------------- about -- */

.about__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 6vw, 5rem);
}
.about h2 {
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
    margin-top: 1.5rem;
}
html[lang="ckb"] .about h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); }

.about__body > * + * { margin-top: 1.35rem; }
.about__body p { max-width: var(--measure); color: var(--ink-soft); }

.quote {
    margin-top: 2.5rem;
    padding-inline-start: 1.6rem;
    border-inline-start: 3px solid var(--saffron);
    font-family: var(--display);
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
    font-style: italic;
    line-height: 1.4;
    color: var(--ink);
}
html[lang="ckb"] .quote { font-style: normal; line-height: 1.7; }

/* ---------------------------------------------------------- departments -- */

.dept {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: baseline;
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--rule);
    position: relative;
    isolation: isolate;
    transition: color 0.3s var(--ease);
}
.dept:last-child { border-bottom: 1px solid var(--rule); }

/* A colour wash that sweeps in from the reading edge on hover. */
.dept::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: calc(var(--gutter) * -0.4);
    /* clamped on small screens — see the media query below */
    background: var(--parchment-warm);
    transform: scaleX(0);
    transform-origin: var(--origin, left);
    transition: transform 0.42s var(--ease);
    z-index: -1;
}
html[dir="rtl"] .dept::before { --origin: right; }
.dept:hover { color: var(--ink); }
.dept:hover::before { transform: scaleX(1); }
.dept:hover .dept__num { color: var(--pomegranate); }
.dept:hover .dept__desc { color: var(--ink-soft); }

.dept__num {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--ink-muted);
    transition: color 0.3s var(--ease);
}
.dept__name { font-family: var(--display); font-size: clamp(1.25rem, 1rem + 1vw, 1.85rem); font-weight: 600; }
html[lang="ckb"] .dept__name { font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem); }
.dept__desc { color: var(--ink-soft); font-size: 0.9375rem; transition: color 0.3s var(--ease); }
/* -------------------------------------------------------------- learn -- */

.learn__title {
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
    margin-top: 1.5rem;
}
html[lang="ckb"] .learn__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); }

/* One column per department, its topics beneath. No carousel, no JS — the
   whole syllabus is visible at once and it stacks on a phone. */
.syllabus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.syllabus__head {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--pomegranate);
}
.syllabus__num {
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--ink-muted);
}
.syllabus__dept {
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    font-weight: 600;
}

.syllabus__list li {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--rule);
    transition: transform 0.3s var(--ease);
}
.syllabus__list li:hover { transform: translateX(4px); }
html[dir="rtl"] .syllabus__list li:hover { transform: translateX(-4px); }
.syllabus__list h3 {
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0.3rem;
}
.syllabus__list p {
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------- features -- */

.features { background: var(--parchment-deep); }
.features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-top: 3rem;
}
.feature {
    background: var(--parchment-deep);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    transition: background 0.3s var(--ease);
}
.feature:hover { background: var(--parchment); }
.feature__icon { color: var(--pomegranate); margin-bottom: 1.15rem; }
.feature h3 { font-size: 1.1875rem; margin-bottom: 0.6rem; }
.feature p { font-size: 0.9375rem; color: var(--ink-soft); }

/* ----------------------------------------------------------- admissions -- */

.adm__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.steps { counter-reset: step; }
.step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: 1.6rem;
    border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__n {
    counter-increment: step;
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 700;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--rule-strong);
    border-radius: 50%;
    color: var(--pomegranate);
    flex: none;
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.step p { font-size: 0.9375rem; color: var(--ink-soft); }

.callout {
    background: var(--parchment-warm);
    border: 1px solid var(--rule-strong);
    padding: clamp(2rem, 4vw, 3rem);
    position: sticky;
    top: 100px;
}
.callout h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-bottom: 1rem; }
.callout > p { color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 1.9rem; }
.callout .btn { border-color: var(--pomegranate); background: var(--pomegranate); color: var(--parchment); }
.callout .btn:hover { background: var(--pomegranate-deep); border-color: var(--pomegranate-deep); }

.callout__list { margin-bottom: 2rem; }
.callout__list li {
    display: flex;
    gap: 0.7rem;
    padding-block: 0.5rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
}
.callout__list li::before { content: "—"; color: var(--pomegranate); flex: none; }

/* ----------------------------------------------------------------- news -- */

.news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 3rem;
}
.post { border-top: 2px solid var(--pomegranate); padding-top: 1.25rem; }
.post time {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pomegranate);
}
html[lang="ckb"] .post time { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.post h3 { font-size: 1.25rem; margin-block: 0.7rem 0.6rem; }
.post p { font-size: 0.9375rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- contact -- */

.contact { background: var(--parchment-deep); }
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.contact__list { margin-top: 2.5rem; }
.contact__list > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
}
.contact__list dt {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-top: 0.2rem;
}
html[lang="ckb"] .contact__list dt { letter-spacing: 0; text-transform: none; font-size: 0.875rem; }
.contact__list a:hover { color: var(--pomegranate); }

/* --------------------------------------------------------------- footer -- */

.footer { background: var(--parchment-warm); border-top: 1px solid var(--rule-strong); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    padding-bottom: 3rem;
}
.footer .footer__blurb { margin-top: 1.5rem; color: var(--ink-soft); font-size: 0.9375rem; max-width: 38ch; }
.footer h4 {
    font-family: var(--body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pomegranate);
    margin-bottom: 1.1rem;
}
html[lang="ckb"] .footer h4 { letter-spacing: 0; text-transform: none; font-size: 0.875rem; }
.footer li { padding-block: 0.35rem; }
.footer li a { font-size: 0.9375rem; color: var(--ink-soft); transition: color 0.2s var(--ease); }
.footer li a:hover { color: var(--pomegranate); }
.footer__base {
    border-top: 1px solid var(--rule);
    padding-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

/* A persistent way back to the application form once the hero CTA is out of
   sight. Slides up after the hero and hides again at the footer. */
.apply-dock {
    position: fixed;
    inset-inline: 0;
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    z-index: 85;
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(140%);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.apply-dock.is-shown { opacity: 1; transform: none; }
.apply-dock .btn { pointer-events: auto; box-shadow: 0 12px 30px -10px rgba(25, 21, 18, 0.5); }

/* ------------------------------------------------------------- reveals -- */

[data-reveal] {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Children stagger in one after another rather than the whole block landing
   at once — the single biggest thing that stops a page feeling like print. */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: 60ms; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 150ms; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 240ms; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 330ms; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 420ms; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 510ms; }

/* Rows slide in from the reading edge. */
[data-slide] {
    opacity: 0;
    transform: translateX(-34px);
    transition: opacity 0.75s var(--ease), transform 0.85s var(--ease);
    transition-delay: var(--delay, 0ms);
}
html[dir="rtl"] [data-slide] { transform: translateX(34px); }
[data-slide].is-in { opacity: 1; transform: none; }

/* The hero headline arrives a word at a time. */
.word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    animation: wordRise 0.75s var(--ease) both;
    animation-delay: calc(var(--w, 0) * 65ms + 120ms);
}
@keyframes wordRise {
    to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1000px) {
    .about__grid, .adm__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
    .callout { position: static; }
    .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dept { grid-template-columns: 3rem minmax(0, 1fr); }
    .dept__desc { grid-column: 2; }
}

@media (max-width: 760px) {
    .nav__links {
        position: fixed;
        inset: calc(clamp(64px, 7.4vw, 88px) + 1.5rem) clamp(0.6rem, 2.4vw, 1.5rem) auto;
        border-radius: 18px;
        box-shadow: 0 18px 40px -16px rgba(25, 21, 18, 0.4);
        flex-direction: column;
        gap: 0;
        background: rgba(247, 242, 232, 0.97);
        backdrop-filter: blur(18px);
        border: 1px solid var(--rule);
        padding: 0.5rem 1.4rem 1rem;
        transform: translateY(-140%);
        transition: transform 0.4s var(--ease);
        margin-inline-start: 0;
    }
    .nav__links.is-open { transform: none; }
    .nav__links a { padding-block: 0.8rem; font-size: 1.05rem; border-bottom: 1px solid var(--rule); }
    .nav__toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule-strong); border-radius: 999px; }
    .nav__end { margin-inline-start: auto; }
    .nav__cta { display: none; }
    .brand__mark { height: 38px; }
    .brand__name { font-size: 0.9rem; }
}

/* The wordmark is long enough that on a narrow phone it pushed the language
   toggle and the menu button clean off the screen. The crest carries the name
   on its own ribbon, so the text can go. */
@media (max-width: 560px) {
    .dept::before { inset-inline: 0; }

    /* the bar keeps only the crest, the wordmark and the menu button */
    .nav__end .lang { display: none; }
    .nav__links .lang--menu {
        display: flex;
        align-self: flex-start;
        margin-top: 0.9rem;
    }
    .footer .brand__name { position: static; font-size: 0.95rem; }

    .nav__inner { position: relative; }
    .brand { gap: 0; min-width: 0; }
    .brand__mark { height: 38px; }

    /* Centred in the bar rather than trailing the crest. Absolutely placed so
       it centres on the bar itself, not on the space left between the crest
       and the controls, and small enough that it cannot reach either. */
    .nav .brand__name {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* Pinned to the gap between the crest and the controls, not centred on
           the whole bar — the two sides are not symmetric, so bar-centring
           walks the text straight under the language toggle. */
        inset-inline-start: 3.1rem;
        inset-inline-end: 3.6rem;
        overflow: hidden;
        text-align: center;
        line-height: 1.08;
        letter-spacing: 0;
        pointer-events: none;
    }
    html[lang="en"] .nav .brand__name {
        font-family: "Dancing Script", "Fraunces", cursive;
        font-weight: 700;
        /* One line, shrinking with the viewport so it always fits between the
           crest and the menu button. */
        font-size: clamp(1.05rem, 5.4vw, 1.7rem);
        white-space: nowrap;
    }
    html[lang="ckb"] .nav .brand__name {
        font-size: clamp(0.82rem, 3.7vw, 1.2rem);
        white-space: nowrap;
    }
    .lang button { padding: 0.35rem 0.5rem; font-size: 0.7rem; }
    .nav__toggle { width: 36px; height: 36px; }
    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0; }
    .stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
    .contact__list > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
    .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

@media print {
    .nav, .footer { display: none; }
    body { background: #fff; }
    body::after { display: none; }
}