/* ==========================================================================
   مؤتمر السرد الدولي الرابع — The 4th International Narrative Conference
   قسم اللغة العربية / كلية الآداب - الجامعة المستنصرية

   Design direction: a printed conference programme moved to the web.
   Ivory paper, ink text, one institutional green, aged gold used sparingly,
   hairline rules instead of floating cards, and typography doing the work
   that decoration used to do.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Layout primitives
     4.  Typography
     5.  Buttons & links
     6.  Masthead / navigation
     7.  Hero
     8.  Section heads
     9.  About
     10. Objectives
     11. Themes
     12. Publication panels
     13. Committees
     14. Dates
     15. Callout
     16. Baghdad plates
     17. Contact
     18. Footer
     19. Utilities (toast, reveal, motion)
     20. Responsive
     21. Reduced motion & print
   ========================================================================== */

/* 1. Tokens
   ------------------------------------------------------------------------ */
:root {
    /* Colour — the emblem greens and gold, muted to printing-ink values */
    --green: #14532B;
    --green-mid: #1E7A3E;
    --green-deep: #0A2E17;        /* the hero stage */
    --green-wash: #EAF1EC;
    --gold: #A67C15;
    --gold-ink: #8A6410;          /* AA-safe gold on paper */
    --gold-light: #E3BE63;        /* AA-safe gold on the dark stage */
    --gold-wash: #F2E9D2;
    --ink: #1B2A20;
    --ink-soft: #58685D;
    --paper: #FBF8F1;
    --paper-alt: #F4F0E5;
    --surface: #FFFFFF;
    --rule: #DFD8C6;
    --rule-strong: #C6BDA6;

    /* Type */
    --font-display: 'Amiri', 'Times New Roman', Georgia, serif;
    --font-text: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --t--2: 0.8125rem;   /* 13 — labels, captions */
    --t--1: 0.9375rem;   /* 15 — secondary text */
    --t-0: 1.0625rem;    /* 17 — body */
    --t-1: 1.1875rem;    /* 19 — lede */
    --t-2: 1.375rem;     /* 22 — h3 */
    --t-3: 1.75rem;      /* 28 — h2 */

    /* Space scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 88px;

    /* Shape */
    --r-sm: 6px;
    --r-md: 10px;
    --lift: 0 8px 28px rgba(27, 42, 32, 0.10);

    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --measure: 66ch;
    --nav-height: 74px;
    --t-fast: 150ms ease;
}

/* 2. Reset & base
   ------------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-text);
    font-size: var(--t-0);
    line-height: 1.85;
    color: var(--ink);
    background-color: var(--paper);
    overflow-x: hidden;
}

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

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-fast), border-color var(--t-fast);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

svg {
    flex-shrink: 0;
}

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

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

.skip-link {
    position: absolute;
    inset-inline-start: var(--s-4);
    top: -100px;
    z-index: 1200;
    padding: var(--s-3) var(--s-5);
    background: var(--green);
    color: var(--paper);
    border-radius: var(--r-sm);
    font-size: var(--t--1);
}

.skip-link:focus-visible {
    top: var(--s-4);
}

/* 3. Layout primitives
   ------------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: var(--s-5);
    min-width: 0;
}

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

.section--alt {
    background: var(--paper-alt);
}

.prose {
    max-width: var(--measure);
}

/* 4. Typography
   ------------------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    overflow-wrap: break-word;
}

p {
    overflow-wrap: break-word;
}

.channel-label,
.panel-email-label,
.footer-heading {
    font-size: var(--t--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold-ink);
}

/* 5. Buttons & links
   ------------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: var(--s-3) var(--s-6);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--t--1);
    font-weight: 700;
    text-align: center;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn-primary {
    background: var(--green);
    border-color: var(--green);
    color: var(--paper);
}

.btn-primary:hover {
    background: var(--green-mid);
    border-color: var(--green-mid);
}

/* Only ever sits on green, so it is the lighter gold: the darker one does not
   hold a 3:1 edge against the stage behind it. */
.btn-gold {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: #231900;
}

.btn-gold:hover {
    background: #F0D493;
    border-color: #F0D493;
}

.btn-sm {
    min-height: 38px;
    padding: var(--s-2) var(--s-4);
    font-size: var(--t--2);
}

/* Quiet secondary action: a rule under the words, not a second button */
.link-action {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    font-size: var(--t--1);
    font-weight: 700;
    color: var(--green);
    border-bottom: 1px solid var(--rule-strong);
}

.link-action:hover {
    color: var(--green-mid);
    border-bottom-color: var(--green-mid);
}

.link-action--on-dark {
    color: var(--paper);
    border-bottom-color: rgba(251, 248, 241, 0.5);
}

.link-action--on-dark:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold-light);
}

.email-link {
    overflow-wrap: anywhere;
}

/* 6. Masthead / navigation
   ------------------------------------------------------------------------ */
.navbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
    background: rgba(251, 248, 241, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
}

.navbar.scrolled {
    border-bottom-color: var(--rule-strong);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wrapping rather than clipping is what keeps the masthead usable when the
       reader enlarges text to 200% without zooming the page. */
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    padding-block: var(--s-3);
    min-height: var(--nav-height);
}

.masthead {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    flex: 0 1 auto;
}

.masthead-mark {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.masthead-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Capped so the long English institution name wraps instead of pushing
       the menu onto a second row. */
    max-width: 250px;
    min-width: 0;
}

.masthead-org {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

.masthead-title {
    font-family: var(--font-display);
    font-size: var(--t--1);
    font-weight: 700;
    line-height: 1.25;
    color: var(--green);
}

.masthead:hover .masthead-title {
    color: var(--green-mid);
}

.nav-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    min-width: 0;
}

.nav-link {
    position: relative;
    display: block;
    padding-block: var(--s-2);
    font-size: 0.875rem;
    color: var(--ink-soft);
    border-bottom: 2px solid transparent;
}

.nav-link:hover {
    color: var(--ink);
}

.nav-link.active {
    color: var(--green);
    font-weight: 700;
    border-bottom-color: var(--green);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
}

.lang-switcher {
    min-height: 38px;
    padding: var(--s-2) var(--s-3);
    font-size: var(--t--2);
    font-weight: 500;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.lang-switcher:hover {
    color: var(--green);
    border-bottom-color: var(--green);
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
}

.mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    transition: transform var(--t-fast), opacity var(--t-fast);
}

.mobile-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Over the stage the masthead carries no bar of its own; it takes one the
   moment the reader scrolls. Below the nav breakpoint the menu opens onto a
   paper panel, so the treatment stays desktop-only. */
@media (min-width: 1121px) {
    .navbar:not(.scrolled) {
        background: transparent;
        backdrop-filter: none;
        border-bottom-color: transparent;
    }

    .navbar:not(.scrolled) .masthead-org {
        color: rgba(251, 248, 241, 0.78);
    }

    .navbar:not(.scrolled) .masthead-title {
        color: var(--paper);
    }

    .navbar:not(.scrolled) .lang-switcher {
        color: var(--paper);
        border-bottom-color: rgba(251, 248, 241, 0.5);
    }

    .navbar:not(.scrolled) .nav-link {
        color: rgba(251, 248, 241, 0.88);
    }

    .navbar:not(.scrolled) .nav-link.active {
        color: var(--gold-light);
        border-bottom-color: var(--gold-light);
    }

    .navbar:not(.scrolled) .nav-actions .btn-primary {
        background: transparent;
        border-color: rgba(251, 248, 241, 0.55);
        color: var(--paper);
    }

    .navbar:not(.scrolled) .nav-actions .btn-primary:hover {
        background: var(--paper);
        border-color: var(--paper);
        color: var(--green);
    }
}

/* 7. Hero
   ------------------------------------------------------------------------ */
/* The one deliberately theatrical moment on the site: a deep green stage with
   the courtyard held far back behind it, the college emblem, the title set in
   Amiri, and the two photographs mounted the way prints are mounted. A ruled
   rail of facts closes it, and the page returns to ivory paper below. */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--green-deep);
    color: var(--paper);
    border-bottom: 2px solid var(--gold);
}

/* Entrance. One staged rise, played once, driven entirely by CSS so nothing
   waits on JavaScript. Only opacity and transform are animated — the compositor
   handles both without laying the page out or repainting it. Each keyframe set
   declares a 'from' only, so the resting state stays wherever the rules below
   put it and is never duplicated here. */
@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@keyframes hero-ground {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
}

.hero-canvas::before,
.hero-crest,
.hero-title,
.hero-alt,
.hero-org,
.hero-actions,
.hero-figure,
.hero-meta {
    animation: hero-rise 520ms var(--ease-out) both;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

/* Bled well past the edges so the blur never leaves a pale rim on the stage. */
.hero-canvas::before {
    animation-name: hero-ground;
    animation-duration: 900ms;
    animation-timing-function: ease-out;
    content: '';
    position: absolute;
    inset: -60px;
    background: url('images/college-courtyard.jpg') center 38% / cover no-repeat;
    filter: blur(13px) saturate(0.55);
    opacity: 0.38;
}

.hero-canvas::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(110% 80% at 50% 0%, rgba(30, 122, 62, 0.38), transparent 65%),
        linear-gradient(to bottom, rgba(8, 40, 20, 0.9), rgba(8, 40, 20, 0.8) 52%, rgba(6, 30, 15, 0.95));
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    align-items: center;
    gap: var(--s-8);
    padding-block: calc(var(--nav-height-px, var(--nav-height)) + var(--s-8)) var(--s-8);
}

.hero-head {
    min-width: 0;
}

.hero-crest {
    animation-delay: 40ms;
    width: 92px;
    height: 92px;
    margin-bottom: var(--s-6);
    padding: 5px;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(251, 248, 241, 0.5), 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* The emblem is drawn as a disc, so the square corners are the only thing the
   circular mask removes. */
.hero-crest img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.hero-title {
    animation-delay: 130ms;
    font-size: clamp(2.25rem, 1.15rem + 4.4vw, 3.75rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--paper);
    text-wrap: balance;
    margin-bottom: var(--s-3);
}

/* Amiri sets Latin far wider than Arabic at the same size, so the English
   title takes a smaller optical size to hold the same measure. */
html[lang="en"] .hero-title {
    font-size: clamp(1.875rem, 1.1rem + 2.5vw, 2.75rem);
}

.hero-alt {
    animation-delay: 190ms;
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.85rem + 0.7vw, 1.375rem);
    line-height: 1.5;
    color: rgba(251, 248, 241, 0.84);
}

.hero-org {
    animation-delay: 250ms;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
    max-width: 46ch;
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(251, 248, 241, 0.22);
    font-size: var(--t--1);
    color: rgba(251, 248, 241, 0.88);
}

.hero-org-sep {
    color: var(--gold-light);
}

.hero-actions {
    animation-delay: 310ms;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5);
    margin-top: var(--s-6);
}

/* Two prints on a desk: the entrance behind, the courtyard laid across its
   corner. Overlapping rows rather than absolute placement, so the composition
   still has a height if one photograph ever fails to load. */
.hero-figure {
    animation-delay: 220ms;
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-block-end: var(--s-7);
}

/* The hairline a printed plate is ruled with, offset behind the first print. */
.hero-figure::before {
    content: '';
    position: absolute;
    inset-block-start: -18px;
    inset-inline-end: -18px;
    width: 58%;
    height: 56%;
    border: 1px solid rgba(227, 190, 99, 0.4);
    border-radius: 14px;
    pointer-events: none;
}

.hero-plate {
    min-width: 0;
    padding: 8px;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.36);
}

.hero-plate img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-sm);
}

.hero-plate--a {
    grid-area: 1 / 3 / 2 / 13;
}

.hero-plate--a img {
    object-position: center 42%;
}

.hero-plate--b {
    grid-area: 1 / 1 / 2 / 8;
    align-self: end;
    z-index: 2;
    margin-block-end: calc(var(--s-7) * -1);
}

.hero-plate--b img {
    aspect-ratio: 3 / 2;
}

/* The rail: dates, venue and languages read as one ruled line under the stage. */
.hero-rail {
    position: relative;
    background: rgba(5, 26, 13, 0.5);
    border-top: 1px solid rgba(251, 248, 241, 0.2);
}

.hero-meta {
    animation-delay: 380ms;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) var(--s-7);
    padding-block: var(--s-5);
}

.hero-meta-item {
    min-width: 0;
}

.hero-meta dt {
    font-size: var(--t--2);
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--gold-light);
    margin-bottom: 4px;
}

.hero-meta dd {
    font-family: var(--font-display);
    font-size: var(--t-1);
    font-weight: 700;
    line-height: 1.4;
    color: var(--paper);
}

/* 8. Section heads
   ------------------------------------------------------------------------ */
.section-head {
    max-width: var(--measure);
    margin-bottom: var(--s-7);
}

/* A short gold tick above the title replaces the numeral that used to sit
   there; it draws itself in as the heading arrives. scaleX, not width, so the
   rule never asks the page to lay itself out again. */
.section-head::before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    margin-bottom: var(--s-4);
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms var(--ease-out) 140ms;
}

[dir="rtl"] .section-head::before {
    transform-origin: right center;
}

.section-head.visible::before {
    transform: none;
}

.section-title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
    color: var(--ink);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--rule);
}

.section-lede {
    margin-top: var(--s-4);
    font-size: var(--t-0);
    color: var(--ink-soft);
}

/* 9. About
   ------------------------------------------------------------------------ */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    align-items: center;
    gap: var(--s-8);
}

.portrait {
    min-width: 0;
}

.portrait img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 22%;
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
}

.portrait figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--gold);
}

.portrait-name {
    font-family: var(--font-display);
    font-size: var(--t--1);
    font-weight: 700;
    color: var(--ink);
}

.portrait-role {
    font-size: var(--t--2);
    line-height: 1.6;
    color: var(--ink-soft);
}

.lede {
    position: relative;
    font-size: var(--t-1);
    line-height: 2.05;
    padding-inline-start: var(--s-5);
    border-inline-start: 2px solid var(--gold);
}

/* 10. Objectives
   ------------------------------------------------------------------------ */
.goals-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-8);
}

.goal-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-4);
    padding-block: var(--s-5);
    border-top: 1px solid var(--rule);
    min-width: 0;
}

.goal-item:nth-child(1),
.goal-item:nth-child(2) {
    border-top: none;
    padding-top: 0;
}

.goal-num {
    font-family: var(--font-display);
    font-size: var(--t-3);
    line-height: 1;
    color: var(--gold);
}

.goal-item h3 {
    font-size: var(--t-2);
    margin-bottom: var(--s-2);
    color: var(--green);
}

.goal-item p {
    font-size: var(--t--1);
    line-height: 1.9;
    color: var(--ink-soft);
}

/* 11. Themes
   ------------------------------------------------------------------------ */
.themes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-8);
}

.theme-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-4);
    align-items: baseline;
    padding-block: var(--s-4);
    border-top: 1px solid var(--rule);
    min-width: 0;
}

.theme-item:nth-child(1),
.theme-item:nth-child(2) {
    border-top: none;
}

.theme-num {
    font-family: var(--font-display);
    font-size: var(--t--1);
    color: var(--gold-ink);
    min-width: 2ch;
}

.theme-text {
    font-size: var(--t-0);
    line-height: 1.7;
}

/* 12. Publication panels
   ------------------------------------------------------------------------ */
.panels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
}

.panel {
    min-width: 0;
    padding-inline-start: var(--s-5);
    border-inline-start: 1px solid var(--rule);
}

.panel:first-child {
    padding-inline-start: 0;
    border-inline-start: none;
}

.panel-title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-2);
    color: var(--green);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--rule);
}

.panel-icon {
    width: 20px;
    height: 20px;
    color: var(--gold);
}

.rule-list li {
    padding-block: var(--s-3);
    font-size: var(--t--1);
    line-height: 1.8;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule);
}

.rule-list li:last-child {
    border-bottom: none;
}

.panel-email {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-strong);
}

.panel-email-label {
    display: block;
    margin-bottom: var(--s-1);
}

.panel-email a {
    font-size: var(--t--1);
    font-weight: 700;
    color: var(--green);
    border-bottom: 1px solid var(--rule-strong);
}

.panel-email a:hover {
    color: var(--green-mid);
    border-bottom-color: var(--green-mid);
}

/* 13. Committees
   ------------------------------------------------------------------------ */
.tabs-scroller {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--rule);
}

.committee-tabs {
    display: flex;
    gap: var(--s-6);
    width: max-content;
    min-width: 100%;
}

.tab-btn {
    position: relative;
    min-height: 44px;
    padding-block: var(--s-2);
    font-size: var(--t--1);
    color: var(--ink-soft);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.tab-btn:hover {
    color: var(--ink);
}

.tab-btn.active {
    color: var(--green);
    font-weight: 700;
    border-bottom-color: var(--green);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.member-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-8);
}

.member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-3);
    border-top: 1px solid var(--rule);
    min-width: 0;
}

.member-row:nth-child(1),
.member-row:nth-child(2) {
    border-top: none;
}

.member-row.is-chair {
    padding-inline-start: var(--s-3);
    border-inline-start: 2px solid var(--gold);
}

.member-name {
    font-size: var(--t-0);
    font-weight: 500;
    line-height: 1.6;
    color: var(--ink);
    min-width: 0;
}

.member-org {
    grid-column: 1;
    font-size: var(--t--2);
    color: var(--ink-soft);
}

.member-role {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--t--2);
    color: var(--ink-soft);
    white-space: nowrap;
}

.member-row.is-chair .member-role {
    color: var(--gold-ink);
    font-weight: 700;
}

/* 14. Dates
   ------------------------------------------------------------------------ */
.date-wrap {
    max-width: 640px;
}

.date-block {
    padding: var(--s-7);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--green);
    border-radius: var(--r-md);
    text-align: center;
}

.date-eyebrow {
    font-size: var(--t--2);
    letter-spacing: 0.1em;
    color: var(--gold-ink);
    font-weight: 700;
    margin-bottom: var(--s-4);
}

.date-main {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--green);
}

.date-rule {
    width: 56px;
    height: 1px;
    margin: var(--s-5) auto;
    border: none;
    background: var(--gold);
}

.date-venue {
    font-size: var(--t--1);
    color: var(--ink-soft);
}

/* 15. Callout
   ------------------------------------------------------------------------ */
.callout {
    background: var(--green);
    color: var(--paper);
    padding-block: var(--s-8);
}

.callout-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
}

.callout-text {
    min-width: 0;
    flex: 1 1 420px;
}

.callout-title {
    font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
    color: var(--paper);
    margin-bottom: var(--s-2);
}

.callout-sub {
    font-size: var(--t--1);
    color: rgba(251, 248, 241, 0.82);
    max-width: 56ch;
}

.callout-channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) var(--s-7);
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(251, 248, 241, 0.22);
}

.callout-channels li {
    min-width: 0;
}

.channel-label {
    display: block;
    color: var(--gold-wash);
    margin-bottom: 2px;
}

.callout-channels a {
    font-size: var(--t--1);
    font-weight: 700;
    color: var(--paper);
    border-bottom: 1px solid rgba(251, 248, 241, 0.4);
}

.callout-channels a:hover {
    border-bottom-color: var(--paper);
}

/* 16. Baghdad plates
   ------------------------------------------------------------------------ */
.plates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
}

.plate {
    min-width: 0;
}

.plate img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
}

/* Al-Mutanabbi Street leads the plate page; 16/9 sits close to the source
   frame, so the crop stays honest. */
.plate--lead {
    grid-column: 1 / -1;
}

.plate--lead img {
    aspect-ratio: 16 / 9;
}

.plate figcaption {
    margin-top: var(--s-2);
    font-size: var(--t--2);
    color: var(--ink-soft);
}

/* 17. Contact
   ------------------------------------------------------------------------ */
.contact-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
}

.contact-item {
    min-width: 0;
    padding-inline-start: var(--s-5);
    border-inline-start: 1px solid var(--rule);
}

.contact-item:first-child {
    padding-inline-start: 0;
    border-inline-start: none;
}

.contact-label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t--2);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin-bottom: var(--s-3);
}

.contact-icon {
    width: 18px;
    height: 18px;
    color: var(--gold);
}

.contact-item p {
    font-size: var(--t-0);
    line-height: 1.8;
}

.contact-item a {
    color: var(--green);
    font-weight: 500;
    border-bottom: 1px solid var(--rule-strong);
}

.contact-item a:hover {
    color: var(--green-mid);
    border-bottom-color: var(--green-mid);
}

/* 18. Footer
   ------------------------------------------------------------------------ */
.footer {
    background: var(--ink);
    color: rgba(251, 248, 241, 0.78);
    padding-block: var(--s-7) var(--s-5);
    font-size: var(--t--1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: var(--s-7);
}

.footer-title {
    font-size: var(--t-2);
    color: var(--paper);
    margin-bottom: var(--s-2);
}

.footer-sub {
    font-size: var(--t--2);
    line-height: 1.7;
    margin-bottom: var(--s-3);
}

.footer-heading {
    color: var(--gold-wash);
    margin-bottom: var(--s-3);
}

.footer-nav li,
.footer-contact li {
    padding-block: var(--s-1);
    font-size: var(--t--2);
    overflow-wrap: anywhere;
}

.footer a:hover {
    color: var(--paper);
}

.footer-more-link {
    display: inline-block;
    font-size: var(--t--2);
    color: var(--gold-wash);
    border-bottom: 1px solid rgba(242, 233, 210, 0.4);
}

.footer-bottom {
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid rgba(251, 248, 241, 0.14);
    font-size: var(--t--2);
    text-align: center;
}

/* 19. Utilities
   ------------------------------------------------------------------------ */
.copy-toast {
    position: fixed;
    inset-block-end: var(--s-6);
    inset-inline-end: var(--s-6);
    z-index: 1100;
    padding: var(--s-3) var(--s-5);
    background: var(--green);
    color: var(--paper);
    border-radius: var(--r-sm);
    box-shadow: var(--lift);
    font-size: var(--t--1);
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.copy-toast.leaving {
    opacity: 0;
    transform: translateY(8px);
}

/* Scroll reveals. Opacity and transform only, and the observer stops watching
   each element the moment it fires, so nothing is measured while scrolling. */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* A short stagger down a list, capped so a long committee roll never trails. */
.reveal:nth-child(2) {
    transition-delay: 60ms;
}

.reveal:nth-child(3) {
    transition-delay: 120ms;
}

.reveal:nth-child(4) {
    transition-delay: 180ms;
}

.reveal:nth-child(n+5) {
    transition-delay: 220ms;
}

/* 20. Responsive
   ------------------------------------------------------------------------ */
/* The menu carries eight sections, so it folds well before phone widths. */
@media (max-width: 1120px) {
    .mobile-toggle {
        display: flex;
    }

    .nav-actions .btn {
        display: none;
    }

    .nav-menu {
        position: fixed;
        inset-block-start: var(--nav-height-px, var(--nav-height));
        inset-inline: 0;
        z-index: 999;
        display: block;
        max-height: calc(100dvh - var(--nav-height-px, var(--nav-height)));
        overflow-y: auto;
        padding: var(--s-4) var(--s-5) var(--s-7);
        background: var(--paper);
        border-top: 1px solid var(--rule);
        box-shadow: var(--lift);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    }

    .nav-menu.active {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: var(--t-0);
        border-bottom: 1px solid var(--rule);
    }

    .nav-link.active {
        border-bottom-color: var(--green);
    }
}

@media (max-width: 960px) {
    .about-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }

    .portrait {
        max-width: 240px;
    }

    /* Stacked, the prints are capped at their own resolution rather than being
       blown up to the full measure. */
    .hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-7);
        padding-block: calc(var(--nav-height-px, var(--nav-height)) + var(--s-7)) var(--s-7);
    }

    .hero-figure {
        width: 100%;
        max-width: 620px;
    }

    .panels,
    .contact-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }

    .panel,
    .contact-item {
        padding-inline-start: 0;
        border-inline-start: none;
        padding-top: var(--s-5);
        border-top: 1px solid var(--rule);
    }

    .panel:first-child,
    .contact-item:first-child {
        padding-top: 0;
        border-top: none;
    }

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

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .hero-crest {
        width: 76px;
        height: 76px;
    }

    .hero-plate--b {
        grid-area: 1 / 1 / 2 / 9;
        margin-block-end: calc(var(--s-6) * -1);
    }

    .hero-figure {
        padding-block-end: var(--s-6);
    }

    :root {
        --s-9: 56px;
        --s-8: 40px;
    }

    .goals-list,
    .themes-list,
    .member-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .goal-item:nth-child(2),
    .theme-item:nth-child(2),
    .member-row:nth-child(2) {
        border-top: 1px solid var(--rule);
    }

    .theme-item:nth-child(2) {
        padding-top: var(--s-4);
    }

    .plates {
        grid-template-columns: minmax(0, 1fr);
    }

    .plate--lead img {
        aspect-ratio: 3 / 2;
    }

    .callout-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .callout-inner .btn {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
    }

    .footer-bottom {
        text-align: start;
    }
}

@media (max-width: 520px) {
    .container {
        padding-inline: var(--s-4);
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: var(--s-3);
    }

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

    .hero-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-4);
    }

    /* On a phone the hero reads as a poster: emblem, title and call to action
       on one centre axis, and the two prints held as a single composition
       rather than two full-width cards stacked down the screen. */
    .hero-inner {
        gap: var(--s-6);
        padding-block: calc(var(--nav-height-px, var(--nav-height)) + var(--s-6)) var(--s-6);
    }

    .hero-head {
        text-align: center;
    }

    .hero-crest {
        margin-inline: auto;
    }

    /* Stacked and centred, so the separator is never left hanging at the end
       of a line. */
    .hero-org {
        flex-direction: column;
        align-items: center;
        gap: var(--s-1);
        max-width: none;
        margin-inline: auto;
    }

    .hero-org-sep {
        display: none;
    }

    .hero-figure {
        padding-block-end: var(--s-6);
    }

    /* Wider than the desktop share of the column, so the entrance still carries
       the composition at 360px. */
    .hero-plate--a {
        grid-area: 1 / 2 / 2 / 13;
    }

    .hero-plate--b {
        grid-area: 1 / 1 / 2 / 7;
    }

    /* Too little room at this width for the offset rule to read as one. */
    .hero-figure::before {
        display: none;
    }

    .hero-rail {
        text-align: center;
    }

    .masthead-org {
        display: none;
    }

    /* Tight enough that the switcher and the toggle stay on the masthead's own
       row: the English title needed 220px and pushed them onto a second one. */
    .nav-container {
        column-gap: var(--s-3);
    }

    .masthead-text {
        max-width: 144px;
    }

    .masthead-title {
        font-size: var(--t--2);
    }

    .date-block {
        padding: var(--s-5);
    }

    .goal-item,
    .theme-item {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-2);
    }

    .member-row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the affiliation belongs with the name; the role closes the entry. */
    .member-org {
        order: 1;
    }

    .member-role {
        grid-column: 1;
        grid-row: auto;
        order: 2;
    }
}

/* 21. Reduced motion & print
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

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

    .section-head::before {
        transform: none;
    }
}

@media print {
    .navbar,
    .callout,
    .skip-link,
    .copy-toast {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    .tab-content {
        display: block;
    }
}