/*
 * Prof brand overlay — loaded after Casper's screen.css.
 * Palette per the source skeleton (Prof Website.docx):
 *   white / dark blue / muted gold, Chatham House / ODI inspired.
 */

:root {
    /* --- Brief palette (2026-05-20) --- */
    --ccss-navy:      #14213D;  /* ink */
    --ccss-midnight:  #1B2A4A;  /* deep ink */
    --ccss-gold:      #C8A96B;  /* hairline gold */
    --ccss-terracotta:#B4533A;  /* accent */
    --ccss-ivory:     #FBF7F0;  /* paper */
    --ccss-slate:     #334155;  /* slate grey */
    --ccss-grey:      #64748B;  /* intellectual grey */
    --ccss-green:     #2F6B55;  /* constructing green */

    /* Legacy aliases — existing rules continue to resolve. */
    --ccss-primary:   var(--ccss-navy);
    --ccss-accent:    var(--ccss-terracotta);
    --ccss-body:      #1A1A1A;
    --ccss-surface:   var(--ccss-ivory);
    --ccss-rule:      #E5E0D2;

    /* Spacing scale */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   40px;
    --space-xxl:  64px;
    --space-hero: 120px;

    /* Layout maxes */
    --content-max: 1280px;
    --reading-max: 760px;
    --visual-max:  1440px;

    /* Elevation + radii */
    --radius-card: 18px;
    --radius-btn:  10px;
    --shadow-card: 0 2px 8px rgba(15,23,42,0.06), 0 8px 32px rgba(15,23,42,0.05);
    --shadow-lift: 0 4px 16px rgba(15,23,42,0.08), 0 16px 48px rgba(15,23,42,0.08);

    /* Type stacks */
    --font-serif-ccss:    "Libre Baskerville", Georgia, "Times New Roman", serif;
    --font-serif-ccss-ar: "Noto Naskh Arabic", "Amiri", Georgia, serif;
    --font-body-ccss:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body-ccss-ar:  "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}

/* Map Casper's CSS variables (where it uses them) to brand. */
body {
    --ghost-accent-color: var(--ccss-accent);
    background: #FFFFFF;
    color: var(--ccss-body);
    font-family: var(--font-body-ccss);
}

/* Serif headings — applied site-wide for the brief's editorial feel.
   The override beats Source's `var(--gh-font-heading)` because we set
   font-family directly on the heading rules below. */
h1, h2, h3, h4,
.ccss-hero-title,
.ccss-section-title,
.ccss-fcard-title,
.ccss-prog-name,
.gh-article-title,
.gh-article-title.is-title,
.gh-card-title,
.gh-card-title.is-title,
.gh-footer-signup-header,
.gh-footer-signup-header.is-title {
    font-family: var(--font-serif-ccss);
    font-weight: 700;
    letter-spacing: -0.005em;
}

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
[lang="ar"] .ccss-hero-title,
[lang="ar"] .ccss-section-title,
[lang="ar"] .ccss-fcard-title,
[lang="ar"] .ccss-prog-name,
[lang="ar"] .gh-article-title,
[lang="ar"] .gh-card-title,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
    font-family: var(--font-serif-ccss-ar);
    letter-spacing: 0;
}

[lang="ar"] body {
    font-family: var(--font-body-ccss-ar);
}

a, .gh-content a {
    color: var(--ccss-accent);
}

a:hover {
    color: var(--ccss-primary);
}

.gh-canvas h1,
.gh-canvas h2,
.gh-canvas h3,
.gh-canvas h4 {
    color: var(--ccss-primary);
}

.gh-head .gh-head-brand,
.gh-head a {
    color: var(--ccss-primary);
}

/* Header hairline divider */
.gh-head {
    border-bottom: 1px solid var(--ccss-rule);
}

/* Subtle surface for callouts and cards */
.gh-card,
.gh-callout {
    background: var(--ccss-surface);
    border-color: var(--ccss-rule);
}

/* ---- RTL support for Arabic posts ---- */

/* Casper applies body classes per Ghost's body_class helper. We toggle
   direction via [lang] on .gh-content (set by post.hbs + page.hbs). */
.gh-content[lang="ar"] {
    direction: rtl;
    text-align: right;
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
    line-height: 1.85;  /* Arabic needs more leading */
}

.gh-content[lang="ar"] h1,
.gh-content[lang="ar"] h2,
.gh-content[lang="ar"] h3,
.gh-content[lang="ar"] h4 {
    text-align: right;
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
}

.gh-content[lang="ar"] ul,
.gh-content[lang="ar"] ol {
    padding-right: 2em;
    padding-left: 0;
}

.gh-content[lang="ar"] blockquote {
    border-right: 4px solid var(--ccss-accent);
    border-left: none;
    padding-right: 1.5em;
    padding-left: 0;
}

/* ---- IBM Plex Sans Arabic webfont via Google Fonts ---- */
/* Loaded in default.hbs <head> for non-blocking render. */

/* ---- Header language toggle (Arabic / English) ----
   Renders {{@site.secondary_navigation}} items as a small inline text link
   in the top-right of the nav, to the LEFT of Sign in / Subscribe. */
.prof-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-right: 0.75em;
}

.prof-lang-link {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1;
    color: var(--ccss-primary);
    text-decoration: none;
    border: none;
    padding: 0;
    white-space: nowrap;
}

.prof-lang-link:hover {
    color: var(--ccss-accent);
    text-decoration: underline;
}


/* =================================================================
 * Page & post typography — make sub-pages readable as long-form
 * documents (constrain width, lift hierarchy, soften line-height).
 * Applies to /about/, /programmes/, /constructing-sudan/, etc.
 * Posts inherit via the same .gh-content selector.
 * =============================================================== */

.gh-content.gh-canvas > *:not(.kg-width-wide):not(.kg-width-full) {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

.article-title.gh-canvas {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    font-size: 44px;
    line-height: 1.12;
    color: var(--ccss-primary);
    margin-bottom: 0.6em;
    margin-top: 0.6em;
}

.article-excerpt.gh-canvas {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    color: #4a4a4a;
    font-size: 19px;
    line-height: 1.5;
    margin-bottom: 2em;
}

.gh-content > h2 {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ccss-primary);
    margin-top: 2.4em;
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--ccss-rule);
}

.gh-content > h3 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ccss-primary);
    margin-top: 2em;
    margin-bottom: 0.4em;
}

.gh-content > p,
.gh-content > ul,
.gh-content > ol,
.gh-content > blockquote {
    font-size: 17.5px;
    line-height: 1.75;
    color: #1f1f1f;
    margin: 0 auto 1.4em;
}

.gh-content > ul,
.gh-content > ol {
    padding-left: 1.4em;
}

.gh-content > ul li + li,
.gh-content > ol li + li {
    margin-top: 0.5em;
}

.gh-content > blockquote {
    border-left: 3px solid var(--ccss-accent);
    padding-left: 1.2em;
    color: #333;
    font-style: italic;
}

.gh-content > hr {
    border: 0;
    border-top: 1px solid var(--ccss-rule);
    margin: 3em auto;
    max-width: 80px;
}

.gh-content a {
    color: var(--ccss-primary);
    text-decoration: underline;
    text-decoration-color: var(--ccss-accent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}

.gh-content a:hover {
    color: var(--ccss-accent);
}

/* RTL versions — Arabic pages need mirrored borders, padding, alignment */
.gh-content[dir="rtl"] > h2 {
    text-align: right;
}
.gh-content[dir="rtl"] > h3 {
    text-align: right;
}
.gh-content[dir="rtl"] > ul,
.gh-content[dir="rtl"] > ol {
    padding-right: 1.4em;
    padding-left: 0;
}
.gh-content[dir="rtl"] > blockquote {
    border-right: 3px solid var(--ccss-accent);
    border-left: 0;
    padding-right: 1.2em;
    padding-left: 0;
}

/* Larger header logo so the wordmark actually reads. Source caps logo
   height; override here. */
.gh-navigation .gh-navigation-logo img,
.gh-navigation .ccss-logo img {
    max-height: 50px;
    width: auto;
}

/* Force visible text on the AR subscribe button — Source's stock .gh-button
   has icon-hiding rules that swallowed our nested <span> structure. */
.ccss-subscribe-form .gh-button,
.ccss-subscribe-form .gh-button * {
    color: #FFFFFF !important;
    font-size: 14px !important;
    visibility: visible !important;
}

/* ---- Skip-to-content link (a11y) ---- */
.skip-link {
    position: absolute;
    left: 8px;
    top: -40px;
    z-index: 9999;
    padding: 8px 14px;
    background: var(--ccss-primary);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease-out;
}
.skip-link:focus {
    top: 8px;
    outline: 2px solid var(--ccss-accent);
    outline-offset: 2px;
}
[dir="rtl"] .skip-link {
    left: auto;
    right: 8px;
}

/* ---- Subscribe button contrast (a11y: WCAG AA on white) ----
   The default gold ~3.4:1 on white; darken to ~4.6:1 for AA. */
.gh-navigation .gh-button,
.gh-footer-signup .gh-button {
    background: #8B6A2C;
}
.gh-navigation .gh-button:hover,
.gh-footer-signup .gh-button:hover {
    background: #6F541F;
}

/* ---- RTL: mobile burger position ----
   Source places the burger on the left in LTR. Mirror to right in RTL. */
[dir="rtl"] .gh-navigation .gh-burger,
.is-ar .gh-burger {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================================
   CONTENT-AUDIT REDESIGN — 2026-05-19
   The rules below land the content/style/formatting recommendations
   from CONTENT-AUDIT.md.
   ============================================================ */

/* ---- 1. Body reading width + rhythm ----
   Academic prose reads best at 65-75ch. Anchor to column start. */
.gh-content > p,
.gh-content > ul,
.gh-content > ol,
.gh-content > blockquote,
.gh-content > h2,
.gh-content > h3,
.gh-content > h4 {
    max-width: 70ch;
    margin-left: 0;
    margin-right: 0;
}
.gh-content > p {
    font-size: 1.7rem;
    line-height: 1.65;
    color: #1F2937;
    margin: 0 0 1.6rem;
}
/* First paragraph after the page title gets a lead treatment when
   it's the introductory paragraph of a Ghost Page. */
.gh-content > p:first-of-type {
    font-size: 1.95rem;
    line-height: 1.55;
    color: #1A1A1A;
    margin-bottom: 2.4rem;
}
.gh-content > ul,
.gh-content > ol {
    font-size: 1.7rem;
    line-height: 1.6;
    color: #1F2937;
    padding-left: 2.2rem;
    margin: 0 0 2rem;
}
.gh-content > ul > li,
.gh-content > ol > li {
    margin: 0 0 0.6rem;
    padding-left: 0.4rem;
}
.gh-content > ul > li::marker {
    color: var(--ccss-accent);
}
.gh-content > blockquote {
    font-size: 2rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--ccss-primary);
    border-left: 4px solid var(--ccss-accent);
    padding: 0.6rem 0 0.6rem 2rem;
    margin: 2.4rem 0;
    background: linear-gradient(to right, rgba(182,141,64,0.05), transparent 60%);
}
[dir="rtl"] .gh-content > p,
[dir="rtl"] .gh-content > ul,
[dir="rtl"] .gh-content > ol,
[dir="rtl"] .gh-content > blockquote,
[dir="rtl"] .gh-content > h2,
[dir="rtl"] .gh-content > h3 {
    max-width: 70ch;
    margin-left: 0;
    margin-right: 0;
}
[dir="rtl"] .gh-content > ul,
[dir="rtl"] .gh-content > ol {
    padding-left: 0;
    padding-right: 2.2rem;
}
[dir="rtl"] .gh-content > blockquote {
    border-left: 0;
    border-right: 4px solid var(--ccss-accent);
    padding: 0.6rem 2rem 0.6rem 0;
    background: linear-gradient(to left, rgba(182,141,64,0.05), transparent 60%);
}

/* Inline emphasis inside the body — strong gets a subtle gold tint
   so key phrases catch the eye without shouting. */
.gh-content > p strong,
.gh-content > ul strong,
.gh-content > ol strong {
    color: var(--ccss-primary);
    font-weight: 700;
}
.gh-content > p em {
    color: var(--ccss-accent);
    font-style: italic;
}
.gh-content > p a {
    color: var(--ccss-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
.gh-content > p a:hover {
    color: var(--ccss-primary);
}

/* ---- 2. Article lede ----
   custom_excerpt rendered above the body becomes the lede: larger,
   serif italic, with a slightly muted color. */
.gh-article-excerpt {
    font-size: 2rem;
    line-height: 1.55;
    font-style: italic;
    color: #3D4659;
    max-width: 70ch;
    margin: 1rem 0 1.8rem;
    padding-left: 1.6rem;
    border-left: 3px solid var(--ccss-accent);
}
[dir="rtl"] .gh-article-excerpt {
    padding-left: 0;
    padding-right: 1.2rem;
    border-left: 0;
    border-right: 3px solid var(--ccss-accent);
}

/* ---- 3. Reading-time chip on post cards ---- */
.gh-card-rt {
    color: var(--ccss-accent);
    font-size: 0.85em;
}
.gh-card-sep {
    margin: 0 0.4em;
    opacity: 0.5;
}

/* ---- 4. Eyebrow style for sub-section headings ----
   Use `<h3 class="ccss-eyebrow">` for sub-sections inside long pages.
   Smaller, left-aligned, gold, uppercase letterspaced — the missing
   third level of hierarchy. */
.ccss-eyebrow,
.gh-content h3.ccss-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ccss-accent);
    text-align: left;
    margin-top: 2.4rem;
    margin-bottom: 0.6rem;
    border: 0;
}
[dir="rtl"] .ccss-eyebrow {
    text-align: right;
}

/* ---- Sticky transparent-to-solid navigation (brief Phase C) ----
   On the home template the nav floats transparent over the hero. On
   scroll past 32px (.is-scrolled added by JS) it becomes solid navy
   with ivory text. On every other template the nav is solid by default
   so the page chrome reads consistently. */
#gh-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.home-template #gh-navigation {
    background: var(--ccss-navy);
    box-shadow: var(--shadow-card);
}
.home-template #gh-navigation.is-scrolled {
    background: var(--ccss-navy);
    box-shadow: var(--shadow-card);
}
body:not(.home-template) #gh-navigation {
    background: var(--ccss-navy);
    box-shadow: var(--shadow-card);
}

/* Navigation text colour: ivory when nav is solid (default off-home
   AND scrolled-on-home). When transparent over hero, text is ivory too
   (the hero will sit on a dark backdrop). */
#gh-navigation .gh-navigation-logo,
#gh-navigation .gh-navigation-menu a,
#gh-navigation .gh-navigation-actions a,
#gh-navigation .gh-icon-button,
#gh-navigation .prof-lang-link {
    color: var(--ccss-ivory);
    transition: color 0.2s ease;
}
#gh-navigation .gh-navigation-logo .is-title {
    color: var(--ccss-ivory);
}
#gh-navigation .gh-navigation-logo img {
    /* Logo image stays visible by inverting / using a white-friendly
       variant. The header bg is navy, so the logo needs to read on it. */
    filter: brightness(0) invert(1);
}
/* Subscribe button stays gold-bordered so it pops on navy */
#gh-navigation .gh-button {
    background: var(--ccss-gold) !important;
    color: var(--ccss-navy) !important;
    border-radius: var(--radius-btn);
}
#gh-navigation .gh-button:hover {
    background: var(--ccss-ivory) !important;
}

/* ---- 7. Chip styling (used on featured + recent cards) ---- */
.ccss-chip,
.ccss-recent-chip,
.gh-card-tag {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(182, 141, 64, 0.12);
    color: #8B6A2C;
    border-radius: 999px;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

/* ---- 10. Post-card cleanup (publications + tag archives) ----
   Drop the cream backgrounds for a cleaner stacked list with a hairline
   separator and a hover state. */
.gh-feed .gh-card,
.gh-container .gh-card {
    background: #fff;
    border: 0;
    border-top: 1px solid var(--ccss-rule);
    border-radius: 0;
    padding: 1.4rem 0;
}
.gh-feed .gh-card:last-child,
.gh-container .gh-card:last-child {
    border-bottom: 1px solid var(--ccss-rule);
}
.gh-card-link {
    color: inherit;
    text-decoration: none;
}
.gh-card-wrapper {
    padding: 0;
}
.gh-card-tag {
    margin-bottom: 0.5rem;
}
.gh-card-title {
    color: var(--ccss-primary);
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0.2rem 0 0.5rem;
}
.gh-card-excerpt {
    color: #3D4659;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 0.6rem;
}
.gh-card-meta {
    color: #6A7080;
    font-size: 0.82rem;
}

/* ---- 11. Arabic-Indic digits on AR pages ----
   `font-feature-settings` switches OpenType numeric features when the
   font supports them. IBM Plex Sans Arabic ships Arabic-Indic via the
   "Arabic" Stylistic Set; older browsers will fall back to Western
   digits which is fine. */
[lang="ar"] {
    font-feature-settings: "ss01" 1, "ss05" 1;
}

/* ---- 12. Section title spacing (slightly tighter rhythm) ---- */
.ccss-section-title {
    font-size: 2.2rem;
    color: var(--ccss-primary);
    font-weight: 600;
}

/* ---- 13. Mobile featured tightening ---- */
@media (max-width: 600px) {
    .ccss-fcard-body {
        padding: 1rem 1.1rem 1.2rem;
    }
    .ccss-fcard.is-lead .ccss-fcard-title {
        font-size: 1.35rem;
    }
}

/* ---- 14. Publications channel header ---- */
.ccss-archive-header {
    padding: 4.8rem 2.4rem 2.4rem;
    text-align: center;
}
.ccss-archive-header h1 {
    color: var(--ccss-primary);
    font-size: clamp(3.2rem, 3.5vw, 4.2rem);
    margin: 0 0 0.8rem;
}
.ccss-archive-header p {
    color: #3D4659;
    font-size: 1.7rem;
    max-width: 56ch;
    margin: 0 auto;
}

/* ============================================================
   FORMATTING POLISH — 2026-05-19 (PM)
   Source's default centred-with-gold-underline H2/H3 works for
   homepage section dividers but turns long-form page bodies into
   disconnected floating stacks. Override to a calmer, left-aligned
   editorial treatment so page titles + section headings + body
   read as one unit.
   ============================================================ */

/* Body text + headings — left-aligned. Source defaults to centred
   on .gh-canvas which makes long-form pages read like wedding
   invitations. Force left alignment across the body. */
.gh-content,
.gh-canvas,
.gh-article-body,
section.gh-content.gh-canvas,
.gh-content > p,
.gh-canvas > p,
.gh-content > ul,
.gh-content > ol,
.gh-content > blockquote {
    text-align: left;
}
[lang="ar"] .gh-content,
[lang="ar"] .gh-canvas,
[lang="ar"] .gh-content > p,
[lang="ar"] .gh-content > ul,
[lang="ar"] .gh-content > ol,
[lang="ar"] .gh-content > blockquote,
[dir="rtl"] .gh-content > p,
[dir="rtl"] .gh-content > ul,
[dir="rtl"] .gh-content > ol {
    text-align: right;
}

/* Body headings — calm, left-aligned. A short gold rule above each
   h2 separates sections without resorting to centred underlines. */
.gh-content > h2,
.gh-canvas > h2,
.gh-article-body h2 {
    position: relative;
    text-align: left;
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--ccss-primary);
    margin: 4.4rem 0 1.4rem;
    padding-top: 1.4rem;
    padding-bottom: 0;
    border-bottom: 0;
    max-width: 70ch;
    width: 100%;
    justify-self: start;
}
.gh-content > h2::before,
.gh-canvas > h2::before,
.gh-article-body h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4.4rem;
    height: 3px;
    background: var(--ccss-accent);
    border-radius: 2px;
}
[dir="rtl"] .gh-content > h2::before {
    left: auto;
    right: 0;
}
.gh-content > h2::after,
.gh-canvas > h2::after,
.gh-article-body h2::after {
    content: none;
}
.gh-content > h3,
.gh-canvas > h3,
.gh-article-body h3 {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ccss-accent);
    margin: 2.8rem 0 0.6rem;
    padding-bottom: 0;
    border-bottom: 0;
    max-width: 70ch;
    width: 100%;
    justify-self: start;
}
.gh-content > h3::after,
.gh-canvas > h3::after {
    content: none;
}

/* RTL mirror */
[lang="ar"] .gh-content > h2,
[lang="ar"] .gh-content > h3,
[dir="rtl"] .gh-content > h2,
[dir="rtl"] .gh-content > h3 {
    text-align: right;
}

/* Article title — left-aligned, sits with content */
.gh-article-title,
.gh-article-title.is-title {
    text-align: left;
    font-size: clamp(3rem, 3.2vw, 4rem);
    line-height: 1.2;
    max-width: 70ch;
    margin: 0 0 1.6rem;
    color: var(--ccss-primary);
}
[lang="ar"] .gh-article-title,
[lang="ar"] .gh-article-title.is-title {
    text-align: right;
}

/* Article excerpt position relative to article-title (kept) */

/* Page article-tag chip */
.gh-article-tag {
    display: inline-block;
    margin: 0;
}

/* Article meta — left-anchored under the title */
.gh-meta-share,
.gh-article-header > div:not(.article-image) {
    max-width: 70ch;
    margin-left: 0;
    margin-right: 0;
}

/* Page header (for Ghost Pages like /about/, /contact/) — left-anchored */
.gh-canvas > h1,
.gh-article-header.is-page > h1,
.gh-page-head,
.gh-page-head h1 {
    text-align: left;
    max-width: 70ch;
    margin: 0;
    color: var(--ccss-primary);
}
[lang="ar"] .gh-canvas > h1,
[lang="ar"] .gh-page-head h1 {
    text-align: right;
}

/* Body paragraphs already capped at 70ch + centered via max-width:auto.
   No additional change needed here. */

/* ---- Footer signup compactness ----
   Demote the global Portal-style signup from a dominant block to a
   slim row that doesn't overshadow short pages. */
.gh-footer-signup {
    padding-top: 3.2rem !important;
    padding-bottom: 4rem !important;
    max-width: 64rem;
    margin: 0 auto;
}
.gh-footer-signup .gh-footer-signup-header.is-title,
.gh-footer-signup h2 {
    font-size: 2rem !important;
    font-weight: 600;
    margin: 0 0 0.6rem !important;
    text-align: center;
    color: var(--ccss-primary);
}
.gh-footer-signup .gh-footer-signup-subhead.is-body,
.gh-footer-signup p {
    font-size: 1.5rem !important;
    line-height: 1.5;
    margin: 0 0 1.4rem !important;
    text-align: center;
    color: #3D4659;
}
.gh-footer-signup .gh-form {
    max-width: 38rem;
    margin: 0 auto;
}

/* ---- Motion: reveal on scroll (Phase J) ----
   Progressive enhancement only. Default state is visible so the page
   renders correctly without JS / in static captures. JS toggles
   .has-reveal on <html> when IntersectionObserver is supported, at
   which point sections start hidden and reveal on entering view. */
html.has-reveal .reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
html.has-reveal .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ccss-hero-visual {
        transition: none !important;
    }
    .ccss-prog,
    .ccss-fcard,
    .ccss-media-card,
    .gh-card {
        transition: none !important;
    }
}



/* =========================================================================
 * Personal site (source-prof) — hero, roles, cards, band, book, media,
 * subscribe, footer, timeline, publication lists.
 * ====================================================================== */

:root {
    --prof-ink: #14213D;
    --prof-accent: #B4533A;
    --prof-paper: #FBF7F0;
    --prof-gold: #C8A96B;
    --prof-rule: #E7E0D2;
    --prof-muted: #5B6470;
}

body { background: #FFFFFF; }

/* Headings: serif everywhere (personal-editorial) */
.prof-hero-title, .prof-section-title, .prof-band-title, .prof-card-title,
.prof-subscribe-title, .prof-wordmark-name {
    font-family: var(--font-serif-ccss);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--prof-ink);
}
[lang="ar"] .prof-hero-title, [lang="ar"] .prof-section-title, [lang="ar"] .prof-band-title,
[lang="ar"] .prof-card-title, [lang="ar"] .prof-subscribe-title, .prof-wordmark-name.is-ar {
    font-family: var(--font-serif-ccss-ar);
    letter-spacing: 0;
}

/* Wordmark in the nav */
.prof-wordmark-name { font-size: 1.35rem; line-height: 1; white-space: nowrap; }
.gh-navigation.prof-nav .nav a { font-weight: 500; }
.gh-navigation.prof-nav .nav a:hover { color: var(--prof-gold); }
.gh-navigation.prof-nav .prof-wordmark-name { color: var(--ccss-ivory); }

/* Eyebrow */
.prof-eyebrow {
    font-family: var(--font-body-ccss);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--prof-accent);
    margin: 0 0 0.75rem;
}
[lang="ar"] .prof-eyebrow { letter-spacing: 0; text-transform: none; font-family: var(--font-body-ccss-ar); font-size: 0.95rem; }
.prof-eyebrow.is-on-dark { color: var(--prof-gold); }

/* Buttons */
.prof-btn-primary, .prof-btn-secondary {
    display: inline-block;
    padding: 0.8rem 1.4rem;
    border-radius: 10px;
    font-family: var(--font-body-ccss);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.prof-btn-primary { background: var(--prof-ink); color: #fff !important; border: 1.5px solid var(--prof-ink); }
.prof-btn-primary:hover { background: var(--prof-accent); border-color: var(--prof-accent); transform: translateY(-1px); }
.prof-btn-secondary { background: transparent; color: var(--prof-ink) !important; border: 1.5px solid var(--prof-ink); }
.prof-btn-secondary:hover { background: var(--prof-ink); color: #fff !important; }
.prof-btn-primary.is-on-dark { background: var(--prof-gold); border-color: var(--prof-gold); color: var(--prof-ink) !important; }
.prof-btn-primary.is-on-dark:hover { background: #fff; border-color: #fff; }
.prof-btn-secondary.is-on-dark { border-color: rgba(255,255,255,0.7); color: #fff !important; }
.prof-btn-secondary.is-on-dark:hover { background: rgba(255,255,255,0.12); }
.prof-inline-link { color: var(--prof-accent); font-weight: 600; text-decoration: none; }
.prof-inline-link:hover { text-decoration: underline; }

/* Sections */
.prof-section { padding: 4.5rem 0; }
.prof-section + .prof-section { border-top: 1px solid var(--prof-rule); }
.prof-section-inner { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.prof-section-head { max-width: 720px; margin-bottom: 2rem; }
.prof-section-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; margin: 0; }
.prof-section-more { margin: 2rem 0 0; }
.prof-section-more a { color: var(--prof-accent); font-weight: 600; text-decoration: none; }
.prof-section-more a:hover { text-decoration: underline; }

/* Hero */
.prof-hero { background: var(--prof-paper); border-bottom: 1px solid var(--prof-rule); }
.prof-hero-inner {
    max-width: 1160px; margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 4vw, 3rem);
    display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.prof-hero-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 0 0 1.2rem; }
.prof-hero-lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--prof-ink); margin: 0 0 1rem; font-weight: 500; }
.prof-hero-intro p { font-size: 1.05rem; line-height: 1.7; color: #2B3340; margin: 0 0 1rem; max-width: 60ch; }
.prof-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.prof-hero-visual { margin: 0; justify-self: end; width: 100%; max-width: 420px; }
.prof-hero-visual img {
    width: 100%; height: auto; display: block; border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20,33,61,0.18);
    border: 6px solid #fff;
}
.prof-home.is-ar .prof-hero-visual { justify-self: start; }

/* Roles strip */
.prof-roles { background: var(--prof-ink); color: #fff; }
.prof-roles-list {
    list-style: none; margin: 0 auto; padding: 1.75rem clamp(1.25rem, 4vw, 3rem);
    max-width: 1160px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.prof-roles-list li { display: flex; flex-direction: column; gap: 0.25rem; border-inline-start: 2px solid var(--prof-gold); padding-inline-start: 0.9rem; }
.prof-role-title { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--prof-gold); font-weight: 600; }
[lang="ar"] .prof-role-title { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.prof-role-org { font-size: 0.95rem; line-height: 1.4; color: #fff; }

/* Cards */
.prof-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.prof-card { background: #fff; border: 1px solid var(--prof-rule); border-radius: 16px; transition: transform .2s ease, box-shadow .2s ease; }
.prof-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(20,33,61,0.10); }
.prof-card-link { display: block; padding: 1.5rem; text-decoration: none; color: inherit; height: 100%; }
.prof-chip { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prof-accent); margin-bottom: 0.6rem; }
[lang="ar"] .prof-chip { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.prof-card-title { font-size: 1.2rem; line-height: 1.3; margin: 0 0 0.6rem; }
.prof-card-excerpt { font-size: 0.95rem; line-height: 1.55; color: #3B4350; margin: 0 0 0.9rem; }
.prof-card-meta { font-size: 0.82rem; color: var(--prof-muted); margin: 0; }

/* Band (Cognisance Centre) */
.prof-band { background: linear-gradient(135deg, #14213D 0%, #1B2A4A 60%, #22304F 100%); color: #fff; padding: 4.5rem 0; }
.prof-band-inner { max-width: 860px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.prof-band-title { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.2; margin: 0 0 1rem; }
.prof-band-desc { color: rgba(255,255,255,0.85); font-size: 1.05rem; line-height: 1.65; margin: 0 0 1.75rem; }
.prof-band-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Book */
.prof-book { background: var(--prof-paper); }
.prof-book-inner { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: center; }
.prof-book-cover { margin: 0; }
.prof-book-cover img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 16px 40px rgba(20,33,61,0.18); }
.prof-book-desc { font-size: 1.05rem; line-height: 1.65; color: #2B3340; margin: 1rem 0 1.5rem; max-width: 60ch; }
.prof-book-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0; }

/* Media */
.prof-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.prof-media-card { display: block; text-decoration: none; color: var(--prof-ink); border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--prof-rule); }
.prof-media-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.prof-media-title { display: block; padding: 0.9rem 1rem 1rem; font-weight: 600; font-size: 0.98rem; line-height: 1.4; }
.prof-media-card:hover .prof-media-title { color: var(--prof-accent); }

/* Subscribe */
.prof-subscribe { background: #fff; }
.prof-subscribe-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.prof-subscribe-title { font-size: 1.6rem; margin: 0 0 0.5rem; }
.prof-subscribe-desc { color: #3B4350; margin: 0; line-height: 1.6; }
.prof-subscribe-form .gh-form { max-width: 460px; }
.prof-subscribe-form .gh-button { background: var(--prof-ink); }

/* Footer */
.prof-footer { background: var(--prof-ink); color: rgba(255,255,255,0.85); padding: 3.5rem 0 1.5rem; margin-top: 4rem; }
.prof-footer-inner { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.prof-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.14); }
.prof-footer-brand { font-family: var(--font-serif-ccss); font-size: 1.35rem; font-weight: 700; color: #fff; text-decoration: none; }
.prof-footer.is-ar .prof-footer-brand { font-family: var(--font-serif-ccss-ar); }
.prof-footer-statement { margin: 0.9rem 0 0; font-size: 0.95rem; line-height: 1.6; max-width: 40ch; }
.prof-footer-coltitle { font-family: var(--font-body-ccss); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--prof-gold); margin: 0 0 0.9rem; }
.prof-footer.is-ar .prof-footer-coltitle { letter-spacing: 0; text-transform: none; font-size: 0.95rem; font-family: var(--font-body-ccss-ar); }
.prof-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.prof-footer-links a, .prof-footer-contact a, .prof-footer-social a { color: #fff; text-decoration: none; }
.prof-footer-links a:hover, .prof-footer-contact a:hover, .prof-footer-social a:hover { color: var(--prof-gold); }
.prof-footer-contact { margin: 0 0 0.75rem; }
.prof-footer-social { display: flex; gap: 1.2rem; margin: 0 0 1rem; }
.prof-footer-social a { display: inline-flex; align-items: center; gap: 0.4rem; }
.prof-footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.prof-footer-newsletter-desc { margin: 0 0 0.5rem; font-size: 0.9rem; }
.prof-footer .gh-form { max-width: 360px; }
.prof-footer .gh-form-input { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.25); }
.prof-footer .gh-button { background: var(--prof-gold); color: var(--prof-ink); }
.prof-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.25rem; font-size: 0.85rem; }
.prof-footer-lang a { color: #fff; text-decoration: none; }
.prof-footer-lang a:hover { color: var(--prof-gold); }

/* Career timeline (page body HTML: <ol class="prof-timeline">) */
.gh-content .prof-timeline { list-style: none; margin: 2rem 0; padding: 0; border-inline-start: 2px solid var(--prof-rule); }
.gh-content .prof-timeline li { position: relative; padding: 0 0 1.75rem 1.75rem; margin: 0; }
[dir="rtl"] .gh-content .prof-timeline li { padding: 0 1.75rem 1.75rem 0; }
.gh-content .prof-timeline li::before {
    content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%;
    background: var(--prof-accent); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--prof-accent);
}
[dir="rtl"] .gh-content .prof-timeline li::before { left: auto; right: -7px; }
.gh-content .prof-timeline .prof-tl-year { display: block; font-family: var(--font-body-ccss); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--prof-accent); font-weight: 600; margin-bottom: 0.25rem; }
.gh-content .prof-timeline .prof-tl-title { display: block; font-family: var(--font-serif-ccss); font-weight: 700; font-size: 1.15rem; color: var(--prof-ink); margin-bottom: 0.3rem; }
.gh-content .prof-timeline p { margin: 0; font-size: 0.98rem; color: #3B4350; }
.gh-content .prof-timeline .prof-tl-cat { display: inline-block; margin-inline-start: 0.5rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prof-muted); font-weight: 600; }

/* Publication / article link lists (page body HTML: <ul class="prof-links">) */
.gh-content h3.prof-year { font-family: var(--font-body-ccss); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--prof-accent); margin: 2.25rem 0 0.75rem; }
.gh-content .prof-links { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.gh-content .prof-links li { padding: 0.7rem 0; border-bottom: 1px solid var(--prof-rule); margin: 0; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.gh-content .prof-links a { color: var(--prof-ink); text-decoration: none; font-weight: 500; line-height: 1.45; }
.gh-content .prof-links a:hover { color: var(--prof-accent); text-decoration: underline; }
.gh-content .prof-links .prof-link-src { font-size: 0.8rem; color: var(--prof-muted); white-space: nowrap; }
.gh-content .prof-bookcard { display: grid; grid-template-columns: 180px 1fr; gap: 1.5rem; align-items: start; background: var(--prof-paper); border: 1px solid var(--prof-rule); border-radius: 14px; padding: 1.5rem; margin: 1.5rem 0 2rem; }
.gh-content .prof-bookcard img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 24px rgba(20,33,61,0.15); margin: 0; }
.gh-content .prof-bookcard h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.gh-content .prof-bookcard p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.gh-content .prof-contact-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.gh-content .prof-contact-actions a { text-decoration: none; }
.gh-content .prof-form { display: grid; gap: 1rem; max-width: 560px; margin: 1.5rem 0; }
.gh-content .prof-form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.9rem; }
.gh-content .prof-form input, .gh-content .prof-form textarea { font: inherit; padding: 0.7rem 0.85rem; border: 1px solid #C9C2B4; border-radius: 8px; background: #fff; }
.gh-content .prof-form button { justify-self: start; }
.prof-pubs-feed { border-top: 1px solid var(--prof-rule); margin-top: 3rem; }

/* Responsive */
@media (max-width: 960px) {
    .prof-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .prof-hero-visual { justify-self: center !important; max-width: 320px; order: -1; }
    .prof-roles-list { grid-template-columns: repeat(2, 1fr); }
    .prof-cards, .prof-media-grid { grid-template-columns: 1fr 1fr; }
    .prof-book-inner { grid-template-columns: 200px 1fr; gap: 2rem; }
    .prof-subscribe-inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .prof-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .prof-section { padding: 3rem 0; }
    .prof-roles-list { grid-template-columns: 1fr; gap: 1rem; }
    .prof-cards, .prof-media-grid { grid-template-columns: 1fr; }
    .prof-book-inner { grid-template-columns: 1fr; }
    .prof-book-cover { max-width: 220px; }
    .prof-footer-cols { grid-template-columns: 1fr; }
    .prof-footer-bottom { flex-direction: column; align-items: flex-start; }
    .gh-content .prof-bookcard { grid-template-columns: 1fr; }
    .gh-content .prof-bookcard img { max-width: 200px; }
    .gh-content .prof-links li { flex-direction: column; gap: 0.2rem; }
}

/* Nav actions: Source paints this block with the site background colour; keep it transparent on the ink header */
#gh-navigation .gh-navigation-actions { background: transparent; }
#gh-navigation .gh-search { color: var(--ccss-ivory); }
.gh-content .prof-contact-actions { justify-content: flex-start; }

/* Contact form (self-hosted /forms/contact) */
.gh-content .prof-form { max-width: 620px; }
.gh-content .prof-form > div { display: grid; gap: 0.35rem; }
.gh-content .prof-form label { font-weight: 600; font-size: 0.9rem; }
.gh-content .prof-form input:focus, .gh-content .prof-form textarea:focus { outline: 2px solid var(--prof-accent, #B4533A); outline-offset: 2px; }
.gh-content .prof-form .cf-notice { margin: 0; padding: 0.9rem 1.1rem; border-radius: 8px; font-weight: 600; }
.gh-content .prof-form .cf-ok { background: #E7F1EC; color: #1F4D3A; border: 1px solid #BFDCCB; }
.gh-content .prof-form .cf-err { background: #FDECEE; color: #8B2A2A; border: 1px solid #F1C2C7; }
.gh-content .prof-form .cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gh-content .prof-form[dir="rtl"] { text-align: right; }