/* ==========================================================================
   الأربعينية الحسينية والرسالة النبوية
   The Arba'een of Imam Hussein and the Prophetic Message
   المؤتمر العلمي الدولي الخامس «المعرفة والرسالة الحسينية»
   الجامعة المستنصرية / كلية الآداب — مقر الأربعين الثقافي

   Design direction: a printed conference programme moved to the web.
   Ivory paper, ink text, one Husseini crimson, aged gold used sparingly,
   hairline rules instead of floating cards, and typography doing the work
   that decoration used to do. The palette is deliberately sober — the
   solemnity of the occasion, not the pageantry.

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

/* 1. Tokens
   ------------------------------------------------------------------------ */
:root {
    /* Colour — Husseini crimson and aged gold, muted to printing-ink values */
    --brand: #7A1220;
    --brand-mid: #A31B2C;
    --brand-deep: #240609;        /* the hero stage */
    --gold: #A67C15;
    --gold-ink: #8A6410;          /* AA-safe gold on paper */
    --gold-light: #E3BE63;        /* AA-safe gold on the dark stage */
    --gold-wash: #F2E9D2;
    --ink: #241A1B;
    --ink-soft: #6A585A;
    --paper: #FBF7F2;
    --paper-alt: #F5EFE6;
    --surface: #FFFFFF;
    --rule: #E1D6C7;
    --rule-strong: #C8B9A7;

    /* 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(36, 26, 27, 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(--brand-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(--brand);
    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(--brand);
    border-color: var(--brand);
    color: var(--paper);
}

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

/* Only ever sits on the crimson stage, 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(--brand);
    border-bottom: 1px solid var(--rule-strong);
}

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

.link-action--on-dark {
    color: var(--paper);
    border-bottom-color: rgba(251, 247, 242, 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, 247, 242, 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-4);
    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: 1px;
    /* The masthead carries the short forms of the two names (the full ones are
       in the footer and the document title), so both lines set on one line each
       and the menu keeps the row to itself. */
    max-width: 250px;
    min-width: 0;
}

.masthead-org {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.masthead-title {
    font-family: var(--font-display);
    font-size: var(--t--1);
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.nav-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    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(--brand);
    font-weight: 700;
    border-bottom-color: var(--brand);
}

.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(--brand);
    border-bottom-color: var(--brand);
}

.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: 1161px) {
    .navbar:not(.scrolled) {
        background: transparent;
        backdrop-filter: none;
        border-bottom-color: transparent;
    }

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

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

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

    .navbar:not(.scrolled) .nav-link {
        color: rgba(251, 247, 242, 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, 247, 242, 0.55);
        color: var(--paper);
    }

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

/* 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(--brand-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-series,
.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(163, 27, 44, 0.34), transparent 65%),
        linear-gradient(to bottom, rgba(46, 8, 13, 0.9), rgba(46, 8, 13, 0.8) 52%, rgba(30, 5, 8, 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, 247, 242, 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%;
}

/* The series line sits above the title: this is the fifth conference in a
   standing series, and the title alone does not say so. */
.hero-series {
    animation-delay: 100ms;
    font-size: var(--t--1);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--gold-light);
    margin-bottom: var(--s-3);
}

.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, 247, 242, 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, 247, 242, 0.22);
    font-size: var(--t--1);
    color: rgba(251, 247, 242, 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(26, 4, 7, 0.5);
    border-top: 1px solid rgba(251, 247, 242, 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 (supervisory board, keynotes)
   ------------------------------------------------------------------------ */
/* The opening paragraph is marked by its size and leading, not by a rule
   running down its edge. */
.lede {
    font-size: var(--t-1);
    line-height: 2.05;
}

.about-boards {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
    gap: var(--s-8);
    margin-top: var(--s-9);
    padding-top: var(--s-7);
    border-top: 1px solid var(--rule);
}

.board {
    min-width: 0;
}

.board-title {
    font-size: var(--t-2);
    color: var(--brand);
    margin-bottom: var(--s-5);
}

.board-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
}

.board-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
}

/* Portraits are cropped to a disc rather than shown at their own aspect
   ratio: the supplied files vary in framing, and a disc hides that. */
/* The portrait fills its column rather than sitting in it as a thumbnail. */
.board-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--paper-alt);
    border: 1px solid var(--rule);
}

.board-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.board-card > .board-photo {
    margin-bottom: var(--s-4);
}

.board-role {
    font-size: var(--t--2);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gold-ink);
}

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

.board-org {
    font-size: var(--t--2);
    line-height: 1.65;
    color: var(--ink-soft);
}

/* The two keynote speakers are the supervisory pair again, so they are set
   as a quiet ruled list rather than repeated as cards. */
.board--keynotes {
    padding-inline-start: var(--s-6);
    border-inline-start: 1px solid var(--rule);
}

.keynote-row {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-top: 1px solid var(--rule);
}

.keynote-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.keynote-row:first-child {
    border-top: none;
    padding-top: 0;
}

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

.goal-group {
    min-width: 0;
}

.goal-group-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--rule-strong);
    font-size: var(--t-2);
    color: var(--brand);
}

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

.goal-points li {
    position: relative;
    padding-block: var(--s-4);
    padding-inline-start: var(--s-5);
    border-top: 1px solid var(--rule);
    font-size: var(--t--1);
    line-height: 1.9;
    color: var(--ink-soft);
}

.goal-points li:first-child {
    border-top: none;
}

.goal-points li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: calc(var(--s-4) + 0.75em);
    width: 10px;
    height: 1px;
    background: var(--gold);
}

/* 11. Themes (axes & sub-themes)
   ------------------------------------------------------------------------ */
.themes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--s-8);
    row-gap: var(--s-7);
}

.axis {
    min-width: 0;
}

.axis-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule-strong);
    font-size: var(--t-2);
}

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

.axis-title {
    color: var(--brand);
}

.axis-subs li {
    position: relative;
    padding-block: var(--s-3);
    padding-inline-start: var(--s-5);
    border-top: 1px solid var(--rule);
    font-size: var(--t--1);
    line-height: 1.8;
}

.axis-subs li:first-child {
    border-top: none;
}

.axis-subs li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: calc(var(--s-3) + 0.7em);
    width: 10px;
    height: 1px;
    background: var(--gold);
}

/* 11b. Paper guidelines
   ------------------------------------------------------------------------ */
.terms-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--s-8);
}

.term-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;
}

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

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

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

/* Where the papers actually go — set apart from the numbered rules so the
   submission address is not read as a ninth condition. */
.term-channel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-4);
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-strong);
}

.term-channel-note {
    font-size: var(--t--1);
    color: var(--ink-soft);
}

.term-channel a {
    font-weight: 700;
    color: var(--brand);
    border-bottom: 1px solid var(--gold);
}

.term-channel a:hover {
    color: var(--brand-mid);
}

/* 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(--brand);
    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 + .panel-email {
    margin-top: var(--s-3);
    padding-top: 0;
    border-top: none;
}

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

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

.panel-email a:hover {
    color: var(--brand-mid);
    border-bottom-color: var(--brand-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(--brand);
    font-weight: 700;
    border-bottom-color: var(--brand);
}

.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;
}

/* The chair is already named as such in the role column, so the row needs no
   marker of its own. */

.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
   ------------------------------------------------------------------------ */
/* Three dates now: two deadlines and the conference itself. They are set as
   one row so the run-up reads left-to-right (or right-to-left) in order. */
.date-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--s-5);
}

.date-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: var(--s-6) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    text-align: center;
}

/* The conference days themselves carry the brand rule; the deadlines do not,
   so the eye lands on the event rather than on the paperwork. */
.date-block.is-key {
    border-color: var(--rule-strong);
}

.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.25rem, 0.95rem + 1.1vw, 1.625rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--brand);
}

.date-block.is-key .date-main {
    font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
}

.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(--brand);
    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, 247, 242, 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, 247, 242, 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, 247, 242, 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);
}

/* The first plate of each band carries it — the Kadhimiya shrine in Baghdad,
   the Hussein shrine in Karbala; 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-line {
    display: block;
}

.contact-line + .contact-line {
    margin-top: var(--s-2);
}

.contact-line-label {
    display: inline-block;
    min-width: 5ch;
    margin-inline-end: var(--s-2);
    font-size: var(--t--2);
    font-weight: 700;
    color: var(--gold-ink);
}

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

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

/* 18. Footer
   ------------------------------------------------------------------------ */
.footer {
    background: var(--ink);
    color: rgba(251, 247, 242, 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, 247, 242, 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(--brand);
    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: 1160px) {
    .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(--brand);
    }
}

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

    /* Stacked, the keynote list keeps a rule above it rather than beside it. */
    .board--keynotes {
        padding-inline-start: 0;
        border-inline-start: none;
        padding-top: var(--s-5);
        border-top: 1px solid var(--rule);
    }

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

    /* 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,
    .terms-list,
    .member-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .goals-list {
        gap: var(--s-7);
    }

    /* In one column the second entry no longer starts a fresh column, so it
       needs the rule that the two-column layout gave it for free. */
    .term-item:nth-child(2),
    .member-row:nth-child(2) {
        border-top: 1px solid var(--rule);
    }

    .term-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-group-title,
    .axis-head,
    .term-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;
    }
}