/* ================================================================
   DR. SARWAR HUSSAIN NAQSHBANDI — PORTFOLIO
   "THE ILLUMINATED MANUSCRIPT" EDITION
   ----------------------------------------------------------------
   Direction : editorial / museum exhibit of an illuminated Na'at
               manuscript. Chiaroscuro of parchment reading-spreads
               and dark gold-lit exhibit panels.
   Palette   : Parchment · Ink · Deep pine-green · Antique gold leaf
   Type      : Marcellus (display) · EB Garamond (reading/couplets)
               Archivo (museum-caption labels) · Cormorant (HERO only)
   Signature : the shamsa rosette seal + gold ruled margins (jadwal)
   ================================================================ */


/* ----------------------------------------------------------------
   TOKENS
   ---------------------------------------------------------------- */
:root {
  /* ── Parchment (light grounds) ── */
  --paper       : #F7F1E3;
  --paper-alt   : #F0E7D2;
  --paper-deep  : #E8DCC1;

  /* ── Dark grounds (exhibit panels / footer) ── */
  --ink-950     : #130D07;
  --ink-900     : #1A130B;
  --ink-800     : #241A0F;
  --pine-950    : #0E2219;
  --pine-900    : #143329;
  --pine-800    : #1B4436;

  /* ── Ink text on light ── */
  --ink         : #1E140B;
  --ink-body    : #3A2A1A;
  --ink-read    : #34251A;
  --ink-soft    : #6A5236;

  /* ── Illumination gold ── */
  --gold        : #A97C33;
  --gold-deep   : #855E1D;   /* legible gold text on parchment (AA) */
  --gold-lt     : #C49A50;   /* HERO rule/tagline — unchanged value */
  --gold-leaf   : #DABE86;   /* bright gold on dark grounds */
  --gold-line   : rgba(169, 124, 51, 0.26);
  --gold-hair   : rgba(169, 124, 51, 0.16);
  --gold-glow   : rgba(218, 190, 134, 0.16);

  /* ── Jewel accent (restrained) ── */
  --pine        : #1C4B3C;
  --pine-lt     : #4E8A72;

  /* ── Text on dark grounds ── */
  --on-dark     : #EFE6D2;
  --on-dark-dim : #B9A986;
  --on-dark-gold: #DCC08A;

  /* ── Legacy aliases (keep untouched hero + about/contact CSS valid) ── */
  --ivory       : var(--paper);
  --ivory-alt   : var(--paper-alt);
  --ivory-deep  : var(--paper-deep);
  --footer-bg   : var(--ink-950);
  --ink-warm    : var(--on-dark);
  --ink-mid     : var(--ink-soft);
  --gold-muted  : var(--gold-line);

  /* ── Type ── */
  --ff-head     : 'Cormorant Garamond', Georgia, serif;   /* HERO ONLY */
  --ff-display  : 'Marcellus', Georgia, 'Times New Roman', serif;
  --ff-serif    : 'EB Garamond', Georgia, 'Times New Roman', serif;
  --ff-ui       : 'Archivo', system-ui, -apple-system, sans-serif;
  --ff-body     : var(--ff-ui);   /* legacy alias (was Lato) */

  /* Reading scale */
  --fs-body     : 1.1875rem;   /* 19px */
  --fs-body-sm  : 1.0625rem;   /* 17px */
  --fs-lead     : 1.3125rem;   /* 21px */
  --lh-body     : 1.75;

  /* ── Motion / rhythm ── */
  --ease        : cubic-bezier(0.16, 1, 0.3, 1);
  --dur         : 0.9s;
  --pad-v       : 132px;
  --gutter      : 64px;
  --maxw        : 1240px;

  /* Slightly wider bound used only by the navbar, announcement bar, and
     footer top row — the header's brand name + 9-item menu need a bit
     more room than --maxw allows to sit on one line with a real gap
     between the brand and the menu. Kept separate from --maxw so every
     other section (hero, about, contact, etc.) is untouched. */
  --maxw-header : 1300px;
}


/* ----------------------------------------------------------------
   RESET + BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--ff-serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
::selection { background: rgba(169, 124, 51, 0.22); color: var(--ink); }


/* ----------------------------------------------------------------
   LAYOUT UTILITY
   ---------------------------------------------------------------- */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ----------------------------------------------------------------
   SHARED — EYEBROW (museum caption)
   ---------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 26px;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin-right: 16px;
  opacity: 0.9;
}


/* ----------------------------------------------------------------
   SHARED — DIVIDER (illuminated hairline)
   ---------------------------------------------------------------- */
.divider {
  position: relative;
  width: 64px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin-block: 34px;
}
.divider::before {
  content: '';
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  transform: rotate(45deg);
}


/* ----------------------------------------------------------------
   SHARED — BUTTON
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 42px;
  padding: 15px 34px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform 260ms var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:hover svg { transform: translateX(5px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Gold variant */
.btn--gold { border-color: var(--gold); color: var(--gold-deep); }
.btn--gold:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-950); }
.btn--gold:focus-visible { outline-color: var(--gold); }

/* On dark exhibit panels */
.btn--on-dark { border-color: rgba(218, 190, 134, 0.5); color: var(--gold-leaf); }
.btn--on-dark:hover { background: var(--gold-leaf); border-color: var(--gold-leaf); color: var(--ink-950); }
.btn--on-dark:focus-visible { outline-color: var(--gold-leaf); }


/* ----------------------------------------------------------------
   SIGNATURE — SHAMSA SEAL + centered section openers
   ---------------------------------------------------------------- */
.shamsa { display: block; color: var(--gold); }
.shamsa--seal { width: 46px; height: 46px; margin-inline: auto; margin-bottom: 22px; }
/* seals glow gold-leaf on the dark exhibit grounds */
.book .shamsa, .hcrn .shamsa, .articles .shamsa, .footer .shamsa { color: var(--gold-leaf); }

.opener { text-align: center; }
.opener .eyebrow { justify-content: center; }
.opener .divider { margin-inline: auto; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.opener .divider::before { left: 50%; transform: translateX(-50%) rotate(45deg); }


/* ----------------------------------------------------------------
   SCROLL REVEAL
   ---------------------------------------------------------------- */
.sr {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sr.in { opacity: 1; transform: none; }

.sr-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.sr.in .sr-stagger > * { opacity: 1; transform: none; }
.sr.in .sr-stagger > *:nth-child(1) { transition-delay: .06s; }
.sr.in .sr-stagger > *:nth-child(2) { transition-delay: .16s; }
.sr.in .sr-stagger > *:nth-child(3) { transition-delay: .26s; }
.sr.in .sr-stagger > *:nth-child(4) { transition-delay: .36s; }
.sr.in .sr-stagger > *:nth-child(5) { transition-delay: .46s; }


/* ----------------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sr, .sr-stagger > * { opacity: 1; transform: none; }
  .ha { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  background: linear-gradient(180deg, rgba(247, 241, 227, 0.97) 0%, rgba(240, 231, 210, 0.93) 100%);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  border-bottom: 1px solid var(--gold-hair);
  transform: translateY(-100%);
  transition: transform 380ms var(--ease);
}
.navbar.show { transform: translateY(0); box-shadow: 0 18px 44px -30px rgba(19, 13, 7, 0.6); }

.navbar__inner {
  max-width: var(--maxw-header);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

/* Brand with shamsa mark */
.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-display);
  font-size: 1.24rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 200ms ease;
}
.navbar__brand .brand-seal { width: 24px; height: 24px; color: var(--gold); flex-shrink: 0; transition: transform 500ms var(--ease); }
/* Inert on desktop, where the name never runs out of room. It is the mobile
   safety net: if the name cannot fit beside the hamburger it ends in an
   ellipsis instead of shunting the button off the edge of the screen. */
.navbar__brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.navbar__brand:hover { color: var(--gold-deep); }
.navbar__brand:hover .brand-seal { transform: rotate(90deg); }
.navbar__brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Links */
.navbar__menu { display: flex; align-items: center; gap: 18px; }
.navbar__menu a {
  position: relative;
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-body);
  padding-block: 6px;
  transition: color 200ms ease;
}
.navbar__menu a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease);
}
.navbar__menu a:hover { color: var(--gold-deep); }
.navbar__menu a:hover::after,
.navbar__menu a[aria-current="page"]::after { transform: scaleX(1); }
.navbar__menu a[aria-current="page"] { color: var(--gold-deep); }
.navbar__menu a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 1px; }

/* Hamburger */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  /* Never give up its 44px touch target to make room for the brand */
  flex-shrink: 0;
}
.navbar__toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 240ms var(--ease), opacity 200ms ease; transform-origin: center; }
.navbar__toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navbar__toggle.open span:nth-child(2) { opacity: 0; }
.navbar__toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ================================================================
   SECTION 1 — HERO   (image + layout preserved; text refined)
   ================================================================ */
.hero {
  position: relative;
  width: 100%;
  height: min(100vh, 150vw);
  min-height: 480px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero__dim { position: absolute; inset: 0; background: rgba(20, 12, 4, 0.36); }
.hero__fade {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, rgba(14, 8, 3, 0.12) 30%, rgba(14, 8, 3, 0.60) 70%, rgba(14, 8, 3, 0.80) 100%);
}
.hero__content { position: absolute; inset-block-end: 152px; inset-inline: 0; text-align: center; padding-inline: 24px; }
.hero__name {
  font-family: var(--ff-display);           /* Marcellus — the site's display face, for cohesion */
  font-size: clamp(34px, 5.8vw, 74px);
  font-weight: 400;
  color: #F6EFDB;
  letter-spacing: 1px;
  line-height: 1.08;
  margin-bottom: 26px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 2px 30px rgba(0,0,0,0.5);
}
.hero__rule { width: 64px; height: 1px; background: var(--gold-lt); margin-inline: auto; margin-bottom: 24px; opacity: 0.9; }
.hero__tagline {
  font-family: var(--ff-ui);
  font-size: clamp(0.82rem, 1.4vw, 1.02rem);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ECDBAC;                            /* brighter warm gold — legible over the photo */
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 18px rgba(0,0,0,0.5);
}
.hero__scroll {
  position: absolute;
  inset-block-end: 36px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.hero__scroll:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 4px; border-radius: 2px; }
.hero__scroll-word { font-family: var(--ff-body); font-size: 9px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(212, 185, 120, 0.75); }
.hero__scroll-icon { width: 18px; height: 18px; color: rgba(212, 185, 120, 0.75); animation: bob 2.4s ease-in-out infinite; }
.hero__scroll-icon svg { width: 100%; height: 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.ha { opacity: 0; transform: translateY(20px); }
.ha.go { animation: riseIn 1s var(--ease) forwards; }
.ha--1 { animation-delay: 0.10s; }
.ha--2 { animation-delay: 0.42s; }
.ha--3 { animation-delay: 0.72s; }
.ha--4 { animation-delay: 1.05s; }
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }
/* ================================================================
   END HERO
   ================================================================ */


/* ================================================================
   SECTION 2 — ABOUT  (light reading spread, illuminated portrait)
   ================================================================ */
.about {
  position: relative;
  background: var(--paper);
  padding-block: calc(var(--pad-v) + 8px) var(--pad-v);
  overflow: hidden;
}
.about__wrap {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 92px;
  align-items: center;
}

/* Portrait framed like a manuscript plate: gold ruled margin + corner seals */
.about__figure { position: relative; }
.about__figure::before,
.about__figure::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  z-index: 2;
  pointer-events: none;
}
.about__figure::before { top: -10px; left: -10px; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); }
.about__figure::after { bottom: -10px; right: -10px; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }

.about__frame {
  position: relative;
  border: 1px solid var(--gold-line);
  padding: 12px;
  background: var(--paper-alt);
  overflow: hidden;
}
.about__frame::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold-hair);
  pointer-events: none;
  z-index: 3;
}
.about__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 620px;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}

.about__prose { position: relative; }
.about__heading {
  font-family: var(--ff-display);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: 0.2px;
}
.about__body {
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.85;
  max-width: 520px;
}


/* ================================================================
   SECTION 3 — HUZOOR JANTAY HAIN  (DARK EXHIBIT — the flagship)
   ================================================================ */
.book {
  position: relative;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(27, 68, 54, 0.45), transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--pine-950) 100%);
  color: var(--on-dark);
  padding-block: calc(var(--pad-v) + 12px);
  overflow: hidden;
}
/* faint hairline frame — the exhibit vitrine */
.book::before {
  content: '';
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(218, 190, 134, 0.14);
  pointer-events: none;
}
.book__watermark {
  position: absolute;
  inset-block-start: -70px;
  inset-inline-end: -30px;
  font-family: var(--ff-head);
  font-size: clamp(240px, 30vw, 460px);
  color: rgba(218, 190, 134, 0.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.book__wrap { position: relative; z-index: 1; }
.book__header { text-align: center; margin-bottom: 64px; }
.book__header .eyebrow { justify-content: center; color: var(--on-dark-gold); }
.book__header .eyebrow::before { background: var(--gold-leaf); }

.book__layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 88px;
  align-items: center;
}

/* Cover lit in a vitrine — gold rule + halo */
.book__cover-col { position: relative; }
.book__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(218, 190, 134, 0.35);
  padding: 10px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.3),
    0 40px 80px -30px rgba(0, 0, 0, 0.8),
    0 0 90px -20px var(--gold-glow);
}
.book__cover::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, var(--gold-glow), transparent 70%);
  filter: blur(24px);
}
.book__cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.book__text-col { position: relative; }
.book__byline {
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-gold);
  margin-bottom: 20px;
}
.book__title {
  font-family: var(--ff-display);
  font-size: clamp(52px, 6.6vw, 96px);
  font-weight: 400;
  color: var(--paper);
  line-height: 0.98;
  letter-spacing: 0.5px;
}
.book .divider { background: linear-gradient(to right, var(--gold-leaf), transparent); }
.book .divider::before { background: var(--gold-leaf); }
.book__desc {
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--on-dark);
  line-height: 1.85;
  max-width: 480px;
}
.book .btn { margin-top: 40px; }


/* ================================================================
   SECTION — MIDHAT  (light spread, the five-volume set)
   ================================================================ */
.midhat {
  position: relative;
  background: var(--paper-alt);
  padding-block: var(--pad-v);
  overflow: hidden;
}
.midhat__watermark {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: -30px;
  font-family: var(--ff-head);
  font-size: clamp(220px, 28vw, 440px);
  color: rgba(169, 124, 51, 0.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.midhat__inner { position: relative; z-index: 1; }
.midhat__header { text-align: center; margin-bottom: 76px; }
.midhat__header .eyebrow { justify-content: center; }
.midhat__title {
  font-family: var(--ff-display);
  font-size: clamp(54px, 7vw, 96px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.midhat__author {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-body);
}
.midhat__divider { margin-inline: auto; width: 72px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.midhat__divider::before { left: 50%; transform: translateX(-50%) rotate(45deg); }
.midhat__sub {
  font-family: var(--ff-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Volume set: asymmetric — Volume I featured on the left, II–V in a 2×2 */
.midhat__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}
.midhat__subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.midhat__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 26px;
  background: var(--paper);
  border: 1px solid var(--gold-line);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.midhat__card:hover {
  transform: translateY(-8px);
  border-color: rgba(169, 124, 51, 0.5);
  box-shadow: 0 30px 60px -28px rgba(30, 20, 11, 0.55);
}
/* roman numeral seal */
.midhat__vol {
  font-family: var(--ff-display);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-align: center;
  margin-bottom: 16px;
}
.midhat__cover {
  position: relative;
  aspect-ratio: 2 / 3;                 /* matches the cover artwork so the title isn't cropped */
  overflow: hidden;
  background: var(--ink-900);
  box-shadow: 0 16px 34px -20px rgba(30, 20, 11, 0.7);
}
.midhat__cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(218, 190, 134, 0.18);
  pointer-events: none;
}
.midhat__cover-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.midhat__info { text-align: center; margin-top: 18px; display: flex; flex-direction: column; flex: 1; }
.midhat__name { font-family: var(--ff-display); font-size: 1.32rem; font-weight: 400; color: var(--ink); letter-spacing: 0.3px; }
.midhat__desc {
  font-family: var(--ff-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-read);
  line-height: 1.6;
  margin-top: 10px;
  flex: 1;
}
.midhat__read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  font-family: var(--ff-ui);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 200ms ease;
}
.midhat__read svg { width: 13px; height: 13px; transition: transform 220ms var(--ease); }
.midhat__read:hover { color: var(--gold); }
.midhat__read:hover svg { transform: translateX(3px); }
.midhat__read:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* whole card clickable */
.midhat__read::after { content: ''; position: absolute; inset: 0; z-index: 2; }

/* Featured Volume I — larger cover + type, content centred in the tall card */
.midhat__card--featured { padding: 34px 30px; justify-content: center; }
.midhat__card--featured .midhat__vol { font-size: 0.98rem; margin-bottom: 22px; }
.midhat__card--featured .midhat__cover { align-self: center; width: 100%; max-width: 392px; }
.midhat__card--featured .midhat__info { flex: 0 0 auto; }
.midhat__card--featured .midhat__name { font-size: 1.95rem; }
.midhat__card--featured .midhat__desc { flex: 0 0 auto; font-size: 1.14rem; max-width: 34ch; margin-inline: auto; }
.midhat__card--featured .midhat__read { margin-top: 22px; }


/* ================================================================
   SECTION 4 — HCRN  (DARK EXHIBIT — the institution)
   ================================================================ */
.hcrn {
  position: relative;
  background:
    radial-gradient(110% 90% at 15% 100%, rgba(27, 68, 54, 0.5), transparent 60%),
    linear-gradient(180deg, var(--pine-950) 0%, var(--ink-950) 100%);
  color: var(--on-dark);
  padding-block: var(--pad-v);
  overflow: hidden;
}
.hcrn::before {
  content: '';
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(218, 190, 134, 0.12);
  pointer-events: none;
}
.hcrn__wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}
.hcrn__prose .eyebrow { color: var(--on-dark-gold); }
.hcrn__prose .eyebrow::before { background: var(--gold-leaf); }
.hcrn__heading {
  font-family: var(--ff-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 400;
  color: var(--paper);
  line-height: 1.14;
  margin-bottom: 18px;
}
.hcrn__sub {
  font-family: var(--ff-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-gold);
}
.hcrn .divider { background: linear-gradient(to right, var(--gold-leaf), transparent); }
.hcrn .divider::before { background: var(--gold-leaf); }
.hcrn__body {
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--on-dark);
  line-height: 1.85;
  max-width: 460px;
}

/* Institution plate — pointed-arch (mihrab) placeholder with shamsa */
.hcrn__media { position: relative; }
.hcrn__placeholder {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 40px;
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(78, 138, 114, 0.16), transparent 70%),
    rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(218, 190, 134, 0.28);
}
/* FIX 4: homepage institution image is landscape (building exterior photo).
   Tighter padding + a smaller mark keep the placeholder content within 3:2. */
.hcrn .hcrn__placeholder { aspect-ratio: 3 / 2; padding: 30px; gap: 18px; }
.hcrn__placeholder::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(218, 190, 134, 0.16);
  pointer-events: none;
}
.hcrn__arch { width: min(30%, 104px); color: var(--gold-leaf); }
.hcrn__placeholder-label {
  font-family: var(--ff-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  text-align: center;
  max-width: 240px;
  line-height: 1.7;
}


/* ================================================================
   SECTION 5 — NA'AT COLLECTION  (light — the discography)
   ================================================================ */
.naat { background: var(--paper); padding-block: var(--pad-v); }
.naat__wrap { text-align: center; }
.naat__header { margin-bottom: 66px; }
.naat__header .eyebrow { justify-content: center; }
.naat__heading {
  font-family: var(--ff-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.08;
  margin-bottom: 16px;
}
.naat__sub {
  font-family: var(--ff-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.naat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1040px;
  margin-inline: auto;
}

/* Streaming platform cards — always-on previews, brand-coloured logos.
   (The old hover/tap-to-reveal script is now inert: previews are static.) */
.stream-card {
  --brand: var(--gold);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-alt);
  border: 1px solid var(--gold-line);
  border-top: 3px solid var(--brand);
  overflow: hidden;
  text-align: left;
  transition: transform 320ms var(--ease), box-shadow 320ms ease;
}
.stream-card--spotify    { --brand: #1DB954; }
.stream-card--soundcloud { --brand: #FF5500; }
.stream-card--youtube    { --brand: #FF0000; }
.stream-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(30, 20, 11, 0.42);
}

/* head — brand logo (in its real colour) alongside the platform name */
.stream-card__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 22px;
  border-bottom: 1px solid var(--gold-line);
}
.stream-card__logo {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--brand);
}
.stream-card__logo svg { width: 100%; height: 100%; }
.stream-card__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stream-card__name {
  font-family: var(--ff-display);
  font-size: 1.32rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0.3px;
}
.stream-card__meta {
  font-family: var(--ff-ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* body — live embed / video list; fixed height keeps the row tidy */
.stream-card__body {
  position: relative;
  height: 420px;
  background: var(--paper);
}
.stream-card__embed { width: 100%; height: 100%; border: 0; display: block; }

/* body variant — scrollable list of real YouTube videos */
.stream-card__body--list {
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.stream-card__body--list::-webkit-scrollbar { width: 8px; }
.stream-card__body--list::-webkit-scrollbar-track { background: transparent; }
.stream-card__body--list::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 8px; border: 2px solid var(--paper); }
.stream-card__body--list::-webkit-scrollbar-thumb:hover { background: rgba(169, 124, 51, 0.5); }
.yt-list__fade {
  position: sticky;
  bottom: -6px;
  display: block;
  height: 46px;
  margin-top: -46px;
  background: linear-gradient(to top, var(--paper) 12%, transparent);
  pointer-events: none;
}

.yt-list { display: flex; flex-direction: column; gap: 2px; }
.yt-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 9px;
  border-radius: 3px;
  transition: background 180ms ease;
}
.yt-item:hover { background: rgba(255, 0, 0, 0.06); }
.yt-item:focus-visible { outline: 2px solid #FF0000; outline-offset: -2px; }
.yt-item__thumb {
  position: relative;
  flex: none;
  width: 116px;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: #0c0c0c;
}
.yt-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.yt-item__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.88;
  transition: opacity 180ms ease, transform 180ms ease;
}
.yt-item__play svg { width: 13px; height: 13px; fill: #fff; }
.yt-item:hover .yt-item__play,
.yt-item:focus-visible .yt-item__play { opacity: 1; transform: scale(1.08); }
.yt-item__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.yt-item__title {
  font-family: var(--ff-serif);
  font-size: 1.04rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-item__sub {
  font-family: var(--ff-ui);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* foot — CTA out to the platform */
.stream-card__foot {
  display: flex;
  align-items: center;
  padding: 16px 22px;
  border-top: 1px solid var(--gold-line);
}
.stream-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-ui);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 200ms ease, gap 200ms ease;
}
.stream-card__cta svg { width: 15px; height: 15px; }
.stream-card__cta:hover { color: var(--brand); gap: 13px; }
.stream-card__cta:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }


/* ================================================================
   SECTION — ARTICLES & DISCOURSE  (DARK EXHIBIT — matches Huzoor/HCRN)
   ================================================================ */
.articles {
  position: relative;
  background:
    radial-gradient(110% 90% at 15% 100%, rgba(27, 68, 54, 0.5), transparent 60%),
    linear-gradient(180deg, var(--pine-950) 0%, var(--ink-950) 100%);
  color: var(--on-dark);
  padding-block: var(--pad-v);
  overflow: hidden;
}
.articles__header { position: relative; text-align: center; margin-bottom: 76px; }
.articles__header .eyebrow { justify-content: center; color: var(--on-dark-gold); }
.articles__header .eyebrow::before { background: var(--gold-leaf); }
.articles__title {
  font-family: var(--ff-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  color: var(--paper);
  line-height: 1.08;
}
.articles__divider { margin-inline: auto; width: 72px; background: linear-gradient(to right, transparent, var(--gold-leaf), transparent); }
.articles__divider::before { left: 50%; transform: translateX(-50%) rotate(45deg); background: var(--gold-leaf); }
.articles__intro {
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--on-dark-dim);
  line-height: 1.8;
  max-width: 600px;
  margin-inline: auto;
}
.articles::before {
  content: '';
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(218, 190, 134, 0.12);
  pointer-events: none;
}
.articles > .container { position: relative; z-index: 1; }
.articles__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* Discourse cards — substantive previews (column visual / playable video) */
.discourse-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-alt);
  border: 1px solid var(--gold-line);
  overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.discourse-card--print { --accent: var(--pine); }
.discourse-card--video { --accent: #FF0000; }
.discourse-card:hover {
  transform: translateY(-6px);
  border-color: rgba(169, 124, 51, 0.45);
  box-shadow: 0 34px 66px -34px rgba(30, 20, 11, 0.42);
}

.discourse-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-900);
  border-bottom: 1px solid var(--gold-line);
}
.discourse-card__media img,
.discourse-card__media iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.discourse-card__media--image img { object-fit: cover; transition: transform 600ms var(--ease); }
.discourse-card:hover .discourse-card__media--image img { transform: scale(1.03); }

/* video card variant — scrollable list of real videos (same pattern as the
   Na'at YouTube card), replacing a single static image or embedded player */
.discourse-card__media--list {
  aspect-ratio: unset;
  height: 300px;
  overflow-y: auto;
  background: var(--paper);
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
}
.discourse-card__media--list::-webkit-scrollbar { width: 8px; }
.discourse-card__media--list::-webkit-scrollbar-track { background: transparent; }
.discourse-card__media--list::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 8px; border: 2px solid var(--paper); }
.discourse-card__media--list::-webkit-scrollbar-thumb:hover { background: rgba(169, 124, 51, 0.5); }

.discourse-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px 40px 38px;
}
.discourse-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  margin-bottom: 20px;
}
.discourse-card__brandlogo {
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.discourse-card__brandlogo--yt {
  height: 26px;
  width: auto;
  color: #FF0000;
  display: inline-flex;
  align-items: center;
}
.discourse-card__brandlogo--yt svg { height: 100%; width: auto; }
.discourse-card__brandname {
  font-family: var(--ff-display);
  font-size: 1.18rem;
  color: var(--ink);
  letter-spacing: 0.3px;
}
.discourse-card__title { font-family: var(--ff-display); font-size: clamp(28px, 3vw, 38px); font-weight: 400; color: var(--ink); line-height: 1.1; }
.discourse-card .divider { margin-block: 20px 24px; }
.discourse-card__desc {
  font-family: var(--ff-serif);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.76;
  flex: 1;
}
.discourse-card__desc em { font-style: italic; color: var(--ink); }
.discourse-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  align-self: flex-start;
  margin-top: 30px;
  font-family: var(--ff-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color 220ms ease, gap 220ms ease;
}
.discourse-card__cta svg { width: 16px; height: 16px; }
.discourse-card__cta:hover { color: var(--accent); gap: 15px; }
.discourse-card__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ================================================================
   FOOTER  (deep exhibit — closing colophon)
   ================================================================ */
:root {
  --footer-head : var(--gold-leaf);
  --footer-text : #D2C4AB;
  --footer-dim  : #A99B82;
}
.footer {
  position: relative;
  background:
    radial-gradient(1100px 480px at 84% -20%, rgba(27, 68, 54, 0.4), transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 62%);
  border-top: 1px solid rgba(218, 190, 134, 0.24);
  color: var(--footer-text);
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold-leaf), transparent);
  opacity: 0.65;
}
.footer__top {
  max-width: var(--maxw-header);
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
  gap: 60px 56px;
  padding-block: 96px 66px;
  align-items: start;
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold-leaf);
  letter-spacing: 0.3px;
  transition: color 200ms ease;
}
.footer__logo .brand-seal { width: 24px; height: 24px; color: var(--gold-leaf); }
.footer__logo:hover { color: #EBD3A0; }
.footer__logo:focus-visible { outline: 2px solid var(--gold-leaf); outline-offset: 4px; }
.footer__tagline {
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--footer-head);
  opacity: 0.9;
  margin-top: 18px;
}
.footer__blurb {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--footer-dim);
  max-width: 320px;
  margin-top: 18px;
}
.footer__heading {
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--footer-head);
  margin-bottom: 22px;
}
.footer__links, .footer__contact { display: grid; gap: 15px; }
.footer__links a, .footer__contact a, .footer__contact span {
  display: inline-block;
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--footer-text);
  transition: color 200ms ease;
}
.footer__links a:hover, .footer__contact a:hover { color: var(--footer-head); }
.footer__links a:focus-visible, .footer__contact a:focus-visible { outline: 2px solid var(--gold-leaf); outline-offset: 3px; }

.footer__news-text { font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 400; line-height: 1.65; color: var(--footer-dim); margin-bottom: 20px; max-width: 280px; }
.footer__field { display: flex; align-items: stretch; max-width: 320px; border: 1px solid rgba(218, 190, 134, 0.32); background: rgba(255,255,255,0.03); transition: border-color 200ms ease; }
.footer__field:focus-within { border-color: var(--gold-leaf); }
.footer__field input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 13px 15px; font-family: var(--ff-ui); font-size: 0.9rem; font-weight: 400; color: var(--on-dark); }
.footer__field input::placeholder { color: rgba(210, 196, 171, 0.5); }
.footer__field input:focus { outline: none; }
.footer__field button { flex-shrink: 0; width: 48px; display: flex; align-items: center; justify-content: center; border: 0; background: var(--gold-leaf); color: var(--ink-950); cursor: pointer; transition: background 200ms ease; }
.footer__field button:hover { background: #EBD3A0; }
.footer__field button svg { width: 16px; height: 16px; }
.footer__field button:focus-visible { outline: 2px solid var(--gold-leaf); outline-offset: 2px; }
.footer__news-note { margin-top: 12px; min-height: 1em; font-family: var(--ff-ui); font-size: 0.8rem; font-weight: 600; color: var(--gold-leaf); }

.footer__social { display: flex; gap: 14px; margin-top: 30px; }
.footer__link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(210, 196, 171, 0.28); color: var(--footer-text); transition: color 200ms ease, border-color 200ms ease; }
.footer__link svg { width: 18px; height: 18px; }
.footer__link:hover { color: var(--footer-head); border-color: rgba(218, 190, 134, 0.6); }
.footer__link:focus-visible { outline: 2px solid var(--gold-leaf); outline-offset: 3px; }

.footer__bottom { max-width: var(--maxw-header); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px 32px; border-top: 1px solid rgba(218, 190, 134, 0.16); }
.footer__copy { font-family: var(--ff-ui); font-size: 0.76rem; font-weight: 400; letter-spacing: 0.02em; color: var(--footer-dim); }
.footer__credit { font-family: var(--ff-serif); font-size: 1.05rem; font-style: italic; color: var(--footer-head); opacity: 0.78; }


/* ================================================================
   ABOUT PAGE  (about.html / template-about.php)
   ================================================================ */
.navbar__menu a[aria-current="page"] { color: var(--gold-deep); }

.ab-intro { background: var(--paper); padding-block: 160px var(--pad-v); }

/* Float, not grid: the plate sits in the left margin and the prose wraps around
   it, so once the text passes the plate's bottom edge it reclaims the full
   measure of the container instead of staying locked in a right-hand column.
   The wrap is a flow-root so the float can never escape the section padding.
   Nothing inside .ab-intro__prose may open its own formatting context (no
   overflow/flow-root/grid on the prose or its children) or the wrap breaks. */
.ab-intro__wrap { display: flow-root; }

.ab-intro__plate {
  float: inline-start;
  width: 38%;
  max-width: 400px;
  /* margin-top:0 pins the plate's top edge to the H1's top edge */
  margin: 0 var(--intro-gap, 76px) 46px 0;
}
.ab-intro__prose > :first-child { margin-top: 0; }

/* Only line boxes dodge a float — a block box with a background sits straight
   under it. The rule is given its own formatting context so it is pushed clear
   of the plate instead of being painted behind it. */
.ab-intro__prose .divider { display: flow-root; }

.ab-statement { font-family: var(--ff-display); font-size: clamp(28px, 3vw, 42px); font-weight: 400; color: var(--ink); line-height: 1.28; letter-spacing: 0.2px; }
.ab-lead { font-family: var(--ff-serif); font-size: var(--fs-lead); font-weight: 400; color: var(--ink-body); line-height: 1.85; text-wrap: pretty; }
.ab-text { font-family: var(--ff-serif); font-size: var(--fs-body); font-weight: 400; color: var(--ink-read); line-height: 1.8; margin-top: 22px; text-wrap: pretty; }
.ab-text em { font-style: italic; color: var(--ink); }
/* Gold-dash list, the same idiom the dark plates use for their objectives.
   Kept as block flow (not grid) so the dash can be set inline rather than
   absolutely — an absolute marker would anchor to the li's block box, which
   runs behind the plate.

   The list clears the plate so all three pillars start below the portrait at
   full width. Wrapping them around the plate split the set: the first sat
   beside the photo, the second broke across its bottom edge, and only the
   third ran full width — three different measures for one list. */
.ab-pillars { margin-top: 24px; clear: inline-start; }
.ab-pillars li { font-family: var(--ff-serif); font-size: var(--fs-body); font-weight: 400; color: var(--ink-read); line-height: 1.7; text-wrap: pretty; }
.ab-pillars li + li { margin-top: 15px; }
.ab-pillars li::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  transform: translateY(-2px);
  margin-inline-end: 12px;
}

/* The About plate carries a taller portrait than the home page: let the frame
   take the file's own 1624×2048 ratio instead of cropping it to the shared 3:4. */
.ab-intro .about__photo {
  aspect-ratio: 1624 / 2048;
  max-height: none;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* ----------------------------------------------------------------
   ROSTER OF CALLINGS — the eight entries ruled off a central jadwal
   spine, alternating left / right. Same dark exhibit ground as the
   home page's Huzoor / HCRN / Articles plates: a pine→ink gradient
   under a green radial bloom inside a gold jadwal frame.

   The spine descends from the shamsa seal, and every entry ties back
   to it with a hairline and a rotated-square node — the same rotated
   square that sits inside the shamsa and on .divider::before. The
   entries are callings, not a sequence, so nothing here is numbered.
   ---------------------------------------------------------------- */
.ab-roster {
  --spine-col : 86px;   /* width of the centre gutter the spine runs down */
  --node       : 9px;   /* diagonal of the rotated-square node */
  position: relative;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(27, 68, 54, 0.45), transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--pine-950) 100%);
  color: var(--on-dark);
  padding-block: 108px 120px;
}
.ab-roster::before {
  content: '';
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(218, 190, 134, 0.12);
  pointer-events: none;
}
.ab-roster > .container { position: relative; z-index: 1; }

.ab-roster__seal { position: relative; text-align: center; margin-bottom: 26px; }
.ab-roster__seal .shamsa { color: var(--gold-leaf); margin-bottom: 0; }
/* the seal's tail — the spine starts here, under the rosette */
.ab-roster__seal::after {
  content: '';
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, var(--gold-leaf), rgba(218, 190, 134, 0.34));
  transform: translateX(-50%);
  opacity: 0.55;
}

/* Held to a narrower measure than the container so the entries cluster around
   the spine rather than drifting to the section's outer edges. */
.ab-roster__list {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr var(--spine-col) 1fr;
  align-items: start;
  row-gap: 0;
}
/* Each entry rides up into the previous one's row, so the two sides interleave
   instead of reading as eight isolated rows. */
.ab-entry:nth-child(n + 2) { margin-top: -30px; }

/* The spine itself, drawn top-down when the section reveals */
.ab-roster__list::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(218, 190, 134, 0.34) 0%,
    rgba(218, 190, 134, 0.34) 88%,
    transparent 100%);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 1.5s var(--ease) 0.15s;
}
.ab-roster.in .ab-roster__list::before { transform: translateX(-50%) scaleY(1); }

/* Explicit placement: one entry per row, sides alternating. Auto-placement
   would pair rows 1+2 side by side and lose the stagger. */
.ab-entry { position: relative; }
.ab-entry:nth-child(1) { grid-area: 1 / 1; }
.ab-entry:nth-child(2) { grid-area: 2 / 3; }
.ab-entry:nth-child(3) { grid-area: 3 / 1; }
.ab-entry:nth-child(4) { grid-area: 4 / 3; }
.ab-entry:nth-child(5) { grid-area: 5 / 1; }
.ab-entry:nth-child(6) { grid-area: 6 / 3; }
.ab-entry:nth-child(7) { grid-area: 7 / 1; }
.ab-entry:nth-child(8) { grid-area: 8 / 3; }

/* Tie hairline: card edge → spine */
.ab-entry::before {
  content: '';
  position: absolute;
  inset-block-start: 38px;
  width: calc(var(--spine-col) / 2);
  height: 1px;
  background: rgba(218, 190, 134, 0.26);
}
/* Node: rotated square seated on the spine */
.ab-entry::after {
  content: '';
  position: absolute;
  inset-block-start: calc(38px - (var(--node) / 2));
  width: var(--node);
  height: var(--node);
  background: var(--gold-leaf);
  opacity: 0.85;
  transition: opacity 300ms var(--ease), box-shadow 300ms var(--ease);
}
.ab-entry:nth-child(odd)::before  { inset-inline-end: calc(var(--spine-col) / -2); }
.ab-entry:nth-child(even)::before { inset-inline-start: calc(var(--spine-col) / -2); }
.ab-entry:nth-child(odd)::after {
  inset-inline-end: calc(var(--spine-col) / -2);
  transform: translateX(50%) rotate(45deg);
}
.ab-entry:nth-child(even)::after {
  inset-inline-start: calc(var(--spine-col) / -2);
  transform: translateX(-50%) rotate(45deg);
}

/* The card — a parchment-tinted panel on the dark ground, ruled like the
   manuscript plates, with a gold corner tick on its outer corner. */
.ab-entry__card {
  position: relative;
  padding: 22px 26px 24px;
  background: linear-gradient(180deg, rgba(247, 241, 227, 0.045), rgba(247, 241, 227, 0.015));
  border: 1px solid rgba(218, 190, 134, 0.15);
  transition: border-color 340ms var(--ease), background 340ms var(--ease), transform 340ms var(--ease);
}
.ab-entry__card::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0.75;
}
.ab-entry:nth-child(odd) .ab-entry__card  { text-align: right; }
.ab-entry:nth-child(odd) .ab-entry__card::before  { top: -1px; left: -1px; border-top: 1px solid var(--gold-leaf); border-left: 1px solid var(--gold-leaf); }
.ab-entry:nth-child(even) .ab-entry__card::before { top: -1px; right: -1px; border-top: 1px solid var(--gold-leaf); border-right: 1px solid var(--gold-leaf); }

.ab-entry__card:hover {
  border-color: rgba(218, 190, 134, 0.4);
  background: linear-gradient(180deg, rgba(247, 241, 227, 0.08), rgba(247, 241, 227, 0.03));
}
.ab-entry:nth-child(odd) .ab-entry__card:hover  { transform: translateX(-5px); }
.ab-entry:nth-child(even) .ab-entry__card:hover { transform: translateX(5px); }
.ab-entry:has(.ab-entry__card:hover)::after { opacity: 1; box-shadow: 0 0 0 4px var(--gold-glow); }

.ab-entry__role  { font-family: var(--ff-display); font-size: clamp(23px, 2.2vw, 30px); font-weight: 400; color: var(--gold-leaf); line-height: 1.2; letter-spacing: 0.2px; margin-bottom: 12px; text-wrap: balance; }
.ab-entry__where { font-family: var(--ff-ui); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-dark-dim); line-height: 1.65; text-wrap: pretty; }

/* Entries arrive from their own side of the spine */
.ab-roster .ab-entry { opacity: 0; transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.ab-roster .ab-entry:nth-child(odd)  { transform: translateX(-26px); }
.ab-roster .ab-entry:nth-child(even) { transform: translateX(26px); }
.ab-roster.in .ab-entry { opacity: 1; transform: none; }
.ab-roster.in .ab-entry:nth-child(1) { transition-delay: 0.20s; }
.ab-roster.in .ab-entry:nth-child(2) { transition-delay: 0.31s; }
.ab-roster.in .ab-entry:nth-child(3) { transition-delay: 0.42s; }
.ab-roster.in .ab-entry:nth-child(4) { transition-delay: 0.53s; }
.ab-roster.in .ab-entry:nth-child(5) { transition-delay: 0.64s; }
.ab-roster.in .ab-entry:nth-child(6) { transition-delay: 0.75s; }
.ab-roster.in .ab-entry:nth-child(7) { transition-delay: 0.86s; }
.ab-roster.in .ab-entry:nth-child(8) { transition-delay: 0.97s; }

/* Narrower centre gutter before the cards start to feel cramped */
@media (max-width: 1040px) {
  .ab-roster { --spine-col: 58px; }
  .ab-entry__card { padding: 22px 24px 24px; }
}

/* Single column: the spine moves to the left gutter, every card hangs off it */
@media (max-width: 780px) {
  .ab-roster { --spine-col: 34px; }
  /* Centre the 46px seal on the spine rather than on the text edge */
  .ab-roster__seal { text-align: left; }
  .ab-roster__seal .shamsa { margin-inline: calc((var(--spine-col) / 2) - 23px) 0; }
  .ab-roster__seal::after { inset-inline-start: calc(var(--spine-col) / 2); }

  .ab-roster__list { grid-template-columns: var(--spine-col) 1fr; row-gap: 20px; }
  .ab-roster__list::before { inset-inline-start: calc(var(--spine-col) / 2); }
  /* One column now — the interleave would stack cards on top of each other */
  .ab-entry:nth-child(n + 2) { margin-top: 0; }
  .ab-entry:nth-child(n) { grid-column: 2; }
  .ab-entry:nth-child(1) { grid-row: 1; }
  .ab-entry:nth-child(2) { grid-row: 2; }
  .ab-entry:nth-child(3) { grid-row: 3; }
  .ab-entry:nth-child(4) { grid-row: 4; }
  .ab-entry:nth-child(5) { grid-row: 5; }
  .ab-entry:nth-child(6) { grid-row: 6; }
  .ab-entry:nth-child(7) { grid-row: 7; }
  .ab-entry:nth-child(8) { grid-row: 8; }

  .ab-entry:nth-child(odd) .ab-entry__card { text-align: left; }
  .ab-entry:nth-child(n)::before { inset-inline-start: calc(var(--spine-col) / -2); inset-inline-end: auto; }
  .ab-entry:nth-child(n)::after  { inset-inline-start: calc(var(--spine-col) / -2); inset-inline-end: auto; transform: translateX(-50%) rotate(45deg); }
  .ab-entry:nth-child(odd) .ab-entry__card::before { top: -1px; left: -1px; right: auto; border-top: 1px solid var(--gold-leaf); border-left: 1px solid var(--gold-leaf); border-right: 0; }
  .ab-entry:nth-child(even) .ab-entry__card::before { top: -1px; left: -1px; right: auto; border-top: 1px solid var(--gold-leaf); border-left: 1px solid var(--gold-leaf); border-right: 0; }

  .ab-roster .ab-entry:nth-child(n) { transform: translateX(20px); }
  .ab-roster.in .ab-entry:nth-child(n) { transform: none; }
  .ab-entry:nth-child(odd) .ab-entry__card:hover,
  .ab-entry:nth-child(even) .ab-entry__card:hover { transform: translateX(4px); }
}

/* ----------------------------------------------------------------
   PULL QUOTE — cream ground, so the page alternates
   parchment → dark exhibit → parchment down its length.
   ---------------------------------------------------------------- */
.ab-quote {
  position: relative;
  background:
    radial-gradient(110% 90% at 15% 100%, rgba(232, 220, 193, 0.75), transparent 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-alt) 100%);
  color: var(--ink-body);
  padding-block: 128px;
  text-align: center;
}
.ab-quote::before {
  content: '';
  position: absolute;
  inset: 28px;
  border: 1px solid var(--gold-hair);
  pointer-events: none;
}
.ab-quote > .container { position: relative; z-index: 1; }
.ab-quote__mark { font-family: var(--ff-display); font-size: 120px; line-height: 0.5; color: var(--gold); opacity: 0.5; display: block; height: 60px; }
.ab-quote__text { font-family: var(--ff-serif); font-size: clamp(28px, 3.4vw, 46px); font-weight: 400; font-style: italic; color: var(--ink); line-height: 1.4; max-width: 920px; margin-inline: auto; text-wrap: pretty; }


/* ================================================================
   CONTACT PAGE  (contact.html / template-contact.php)
   ================================================================ */
.contact { background: var(--paper-alt); padding-block: 160px var(--pad-v); }
.contact__head { text-align: center; margin-bottom: 66px; }
.contact__head .eyebrow { justify-content: center; }
.contact__title { font-family: var(--ff-display); font-size: clamp(40px, 5vw, 62px); font-weight: 400; color: var(--ink); line-height: 1.08; }
.contact__head .divider { margin-inline: auto; width: 72px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.contact__head .divider::before { left: 50%; transform: translateX(-50%) rotate(45deg); }
.contact__intro { font-family: var(--ff-serif); font-size: var(--fs-lead); font-weight: 400; color: var(--ink-body); line-height: 1.8; max-width: 540px; margin-inline: auto; }

.contact__wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 76px; align-items: start; max-width: 1040px; margin-inline: auto; }
.field { display: grid; gap: 10px; margin-bottom: 24px; }
.field label { font-family: var(--ff-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 400; color: var(--ink); background: var(--paper); border: 1px solid var(--gold-line); padding: 14px 16px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.field textarea { resize: vertical; min-height: 150px; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder { color: rgba(106, 82, 54, 0.5); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169, 124, 51, 0.12); }
.contact-form__note { margin-top: 18px; min-height: 1.2em; font-family: var(--ff-ui); font-size: 0.85rem; font-weight: 600; color: var(--gold-deep); }

.contact-info__item { padding-block: 24px; border-bottom: 1px solid var(--gold-line); }
.contact-info__item:first-child { padding-top: 0; }
.contact-info__item:last-child { border-bottom: none; }
.contact-info__label { font-family: var(--ff-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.contact-info__value { font-family: var(--ff-serif); font-size: var(--fs-body); font-weight: 400; color: var(--ink-body); line-height: 1.6; transition: color 200ms ease; }
a.contact-info__value:hover { color: var(--gold-deep); }
.contact-social { display: flex; gap: 14px; margin-top: 2px; }
.contact-social__link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold-line); color: var(--ink-soft); transition: color 200ms ease, border-color 200ms ease; }
.contact-social__link svg { width: 18px; height: 18px; }
.contact-social__link:hover { color: var(--gold-deep); border-color: rgba(169, 124, 51, 0.5); }
.contact-social__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.contact-map { max-width: 1040px; margin: 66px auto 0; border: 1px solid var(--gold-line); box-shadow: 0 24px 52px -30px rgba(30, 20, 11, 0.4); line-height: 0; }
.contact-map iframe { width: 100%; height: 440px; border: 0; display: block; }

/* generic page.php */
.page-content { background: var(--paper); padding-block: 160px var(--pad-v); }
.page__head { text-align: center; margin-bottom: 48px; }
.page__body { max-width: 760px; margin-inline: auto; font-family: var(--ff-serif); font-size: var(--fs-body); line-height: 1.85; color: var(--ink-body); }
.page__body h2, .page__body h3 { font-family: var(--ff-display); color: var(--ink); margin-block: 1.2em 0.5em; }
.page__body p { margin-bottom: 1.1em; }


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Below this width the brand name + full inline menu (9 items) no longer
   have room to sit on one line without wrapping — switch to the hamburger
   menu here instead of at 900px so the inline nav is never shown cramped
   or broken. Threshold matches --maxw-header (see :root above). */
@media (max-width: 1300px) {
  /* The 48px minimum gap is desktop breathing room between the brand and the
     menu. Once the menu collapses to the hamburger it only steals width from
     the brand, so drop it to a value the narrowest phone can still afford. */
  .navbar__inner { height: 74px; gap: 16px; }
  /* Base sets flex-shrink:0 + nowrap, which made the brand refuse to give way
     and pushed the hamburger past the right edge, where overflow-x:hidden
     clipped it. From here the brand yields first and the button always fits.
     Padding and max-width are untouched, so the navbar still starts and ends
     flush with the announcement bar and the footer at every width. */
  .navbar__brand { flex-shrink: 1; min-width: 0; }
  .navbar__toggle { display: flex; }
  .navbar__menu {
    display: none;
    position: absolute;
    inset-block-start: 74px;
    inset-inline: 0;
    background: rgba(247, 241, 227, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-block: 12px;
    border-bottom: 1px solid var(--gold-line);
  }
  .navbar__menu.open { display: flex; }
  .navbar__menu li { width: 100%; }
  .navbar__menu a { display: block; padding: 15px 36px; font-size: 0.72rem; letter-spacing: 0.18em; }
}

@media (max-width: 1160px) {
  :root { --gutter: 48px; }
  .about__wrap, .hcrn__wrap { gap: 60px; }
  .ab-intro { --intro-gap: 56px; }
  .book__layout { gap: 60px; grid-template-columns: minmax(220px, 300px) 1fr; }
  .midhat__grid { gap: 20px; }
  .midhat__subgrid { gap: 16px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 52px 44px; }
}

@media (max-width: 900px) {
  :root { --pad-v: 92px; --gutter: 36px; }

  .about__wrap { grid-template-columns: 1fr; gap: 52px; }
  .about__figure { max-width: 380px; margin-inline: auto; }
  .about__body { max-width: 100%; }

  .book__layout { grid-template-columns: 1fr; gap: 48px; justify-items: center; text-align: center; }
  .book__cover-col { max-width: 300px; }
  .book__header { margin-bottom: 48px; }
  .book .divider, .book__desc { margin-inline: auto; }
  .book__desc { max-width: 560px; }
  .book::before, .hcrn::before { inset: 16px; }
  .ab-roster::before, .ab-quote::before { inset: 16px; }

  /* Stack: Volume I featured full-width on top, then II–V as a 2×2 below */
  .midhat__grid { grid-template-columns: 1fr; gap: 30px; }
  .midhat__card--featured { padding: 30px 26px; }
  .midhat__card--featured .midhat__cover { max-width: 360px; }

  .hcrn__wrap { grid-template-columns: 1fr; gap: 52px; }
  .hcrn__body { max-width: 100%; }
  .hcrn__media { max-width: 420px; }

  .naat__grid { grid-template-columns: 1fr; max-width: 460px; }

  .articles__cols { grid-template-columns: 1fr; gap: 32px; max-width: 560px; margin-inline: auto; }
  .discourse-card__body { padding: 30px 32px 34px; }

  .ab-intro { padding-top: 116px; }
  /* Unfloat: the plate becomes a full-bleed opener above the prose */
  .ab-intro__plate { float: none; width: 100%; max-width: 380px; margin: 0 auto 48px; }
  .contact { padding-top: 116px; }
  .contact__wrap { grid-template-columns: 1fr; gap: 48px; max-width: 580px; }

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

@media (max-width: 600px) {
  :root { --pad-v: 76px; --gutter: 22px; }

  /* Scales the brand only once it actually runs out of room. 4vw stays above
     the 1.24rem cap down to ~480px, which is where the brand + hamburger first
     stop fitting, so nothing changes on any width that was already fine — and
     on a normal phone the name still reads in full, never hitting the ellipsis. */
  .navbar__brand { font-size: clamp(0.9rem, 4vw, 1.24rem); gap: 10px; }

  .hero__content { inset-block-end: 110px; }

  .midhat__grid { gap: 26px; }
  .midhat__subgrid { gap: 14px; }
  .book__watermark { font-size: 200px; }

  .discourse-card__body { padding: 28px 26px 32px; }
  .stream-card__body { height: 380px; }


  .footer__top { grid-template-columns: 1fr; gap: 44px; padding-block: 66px 48px; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 12px; }
  .footer__blurb, .footer__news-text { max-width: 100%; }

  .ab-roster { padding-block: 84px 92px; }
  .ab-entry__card { padding: 20px 20px 22px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 520px; }
  .hero__content { inset-block-end: 88px; }
  .hero__name { font-size: 32px; }
}


/* ================================================================
   NEWS & EVENTS  (news.html / event feature pages)
   ----------------------------------------------------------------
   Same manuscript vocabulary as the rest of the site: centered
   shamsa openers, gold-ruled plates, illuminated dividers, and the
   card hover-lift used on Midhat / About. No new visual language.
   ================================================================ */

/* ── Listing page ── */
.news { background: var(--paper); padding-block: 160px var(--pad-v); }
.news__head { text-align: center; margin-bottom: 70px; }
.news__head .eyebrow { justify-content: center; }
.news__title {
  font-family: var(--ff-display);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.08;
}
.news__head .divider {
  margin-inline: auto;
  width: 72px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.news__head .divider::before { left: 50%; transform: translateX(-50%) rotate(45deg); }
.news__intro {
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.8;
  max-width: 580px;
  margin-inline: auto;
}

/* one column now; room for a stack of items later */
.news-list { display: grid; gap: 34px; max-width: 980px; margin-inline: auto; }

/* editorial listing card — banner beside a short summary; whole card links out */
.news-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  background: var(--paper-alt);
  border: 1px solid var(--gold-line);
  overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.news-card:hover {
  transform: translateY(-6px);
  border-color: rgba(169, 124, 51, 0.5);
  box-shadow: 0 34px 66px -34px rgba(30, 20, 11, 0.42);
}
.news-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.news-card__media {
  position: relative;
  min-height: 320px;
  background: var(--ink-900);
  border-right: 1px solid var(--gold-line);
  overflow: hidden;
}
.news-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 640ms var(--ease);
}
.news-card:hover .news-card__media img { transform: scale(1.035); }

.news-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 42px 46px 44px;
}
.news-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.news-card__meta span + span::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 12px;
  background: var(--gold);
  border-radius: 50%;
  transform: rotate(45deg);
  vertical-align: middle;
}
.news-card__title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.12;
}
.news-card .divider { margin-block: 20px 22px; }
.news-card__desc {
  font-family: var(--ff-serif);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink-body);
  line-height: 1.76;
}
.news-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 26px;
  font-family: var(--ff-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: gap 220ms var(--ease), color 200ms ease;
}
.news-card__cue svg { width: 16px; height: 16px; transition: transform 220ms var(--ease); }
.news-card:hover .news-card__cue { color: var(--gold); }
.news-card:hover .news-card__cue svg { transform: translateX(4px); }


/* ── Event feature page ──
   Rebuilt on the homepage's own system: parchment openers, a dark
   pine-green exhibit band (Huzoor / HCRN treatment) for the film, a
   parchment gallery band, and the shared reading column. Values are
   reused from the tokens and homepage sections, not invented here. */

/* 1 — HEADER (parchment opener) */
.event-head { background: var(--paper); padding-block: 160px var(--pad-v); text-align: center; }
.event-head__inner { max-width: 860px; margin-inline: auto; }
.event-head .eyebrow { justify-content: center; }
.event-title {
  font-family: var(--ff-display);
  font-size: clamp(44px, 5.6vw, 74px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: 0.3px;
}
.event-head .divider {
  margin: 36px auto 40px;
  width: 72px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.event-head .divider::before { left: 50%; transform: translateX(-50%) rotate(45deg); }

/* prominent key-detail row — echoes the About stats plate (label + value) */
.event-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.event-fact { position: relative; padding: 6px 22px; text-align: center; }
.event-fact + .event-fact::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 6px;
  width: 1px;
  background: var(--gold-line);
}
.event-fact__label {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.event-fact__value {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0.3px;
}

/* 2 — VIDEO (dark pine-green exhibit band, matches Huzoor / HCRN) */
.event-video {
  position: relative;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(27, 68, 54, 0.45), transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--pine-950) 100%);
  color: var(--on-dark);
  padding-block: var(--pad-v);
  overflow: hidden;
}
.event-video::before {
  content: '';
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(218, 190, 134, 0.14);
  pointer-events: none;
}
.event-video__inner { position: relative; z-index: 1; text-align: center; }
.event-video .shamsa { color: var(--gold-leaf); }
.event-video .eyebrow { justify-content: center; color: var(--on-dark-gold); }
.event-video .eyebrow::before { background: var(--gold-leaf); }
.event-video__title {
  font-family: var(--ff-display);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 400;
  color: var(--paper);
  line-height: 1.1;
}
.event-video__sub {
  font-family: var(--ff-serif);
  font-size: var(--fs-body-sm);
  font-style: italic;
  color: var(--on-dark-dim);
  margin-top: 14px;
}
.event-video__frame {
  position: relative;
  max-width: 940px;
  margin: 54px auto 0;
  border: 1px solid rgba(218, 190, 134, 0.35);
  padding: 10px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 40px 80px -30px rgba(0, 0, 0, 0.8),
    0 0 90px -20px var(--gold-glow);
}
.event-video__frame video { display: block; width: 100%; height: auto; background: #000; }

/* 3 — SLIDER (parchment gallery band) */
.event-slider-sec { background: var(--paper-alt); padding-block: var(--pad-v); }
.event-slider-sec__head { text-align: center; margin-bottom: 54px; }
.event-slider-sec__head .eyebrow { justify-content: center; }
.event-slider-sec__title {
  font-family: var(--ff-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.08;
}

.cslider { max-width: 620px; margin-inline: auto; }
.cslider__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border: 1px solid var(--gold-line);
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(30, 20, 11, 0.5);
}
.cslider__stage::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--gold-hair);
  pointer-events: none;
  z-index: 5;
}
.cslider__slide {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: var(--paper);
  cursor: zoom-in;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease);
  z-index: 1;
}
.cslider__slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.cslider__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

.cslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 241, 227, 0.9);
  border: 1px solid var(--gold-line);
  color: var(--ink);
  cursor: pointer;
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.cslider__arrow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cslider__arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cslider__arrow svg { width: 18px; height: 18px; }
.cslider__arrow--prev { inset-inline-start: 22px; }
.cslider__arrow--next { inset-inline-end: 22px; }

.cslider__dots { display: flex; justify-content: center; gap: 15px; margin-top: 26px; }
.cslider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--gold);
  background: transparent;
  transform: rotate(45deg);
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.cslider__dot.is-active { background: var(--gold); }
.cslider__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.event-slider-sec__caption {
  margin-top: 30px;
  text-align: center;
  font-family: var(--ff-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* reading column */
.event-body { background: var(--paper); padding-block: var(--pad-v); }
.event-body__inner { max-width: 720px; margin-inline: auto; }
.event-prose p {
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--ink-read);
  line-height: 1.9;
  margin-bottom: 1.3em;
}
.event-prose p:last-child { margin-bottom: 0; }

/* on-brand centered pull-quote with an illuminated hairline above */
.event-quote {
  margin: 52px auto;
  max-width: 600px;
  text-align: center;
  font-family: var(--ff-serif);
  font-size: clamp(24px, 2.8vw, 34px);
  font-style: italic;
  color: var(--ink);
  line-height: 1.42;
}
.event-quote::before {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  margin: 0 auto 28px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.event-back { text-align: center; margin-top: 56px; }

/* LIGHTBOX — full-screen viewer, dark exhibit ground, gold-leaf controls */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(14, 8, 3, 0.94);
  animation: lbfade 240ms var(--ease);
}
.lightbox[hidden] { display: none; }
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(1080px, 88vw);
}
.lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
  border: 1px solid rgba(218, 190, 134, 0.3);
  box-shadow: 0 40px 90px -30px #000;
}
.lightbox__caption {
  margin-top: 16px;
  font-family: var(--ff-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  text-align: center;
  max-width: 62ch;
  line-height: 1.6;
}
.lightbox__close {
  position: absolute;
  inset-block-start: clamp(14px, 3vw, 30px);
  inset-inline-end: clamp(14px, 3vw, 30px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(218, 190, 134, 0.5);
  color: var(--gold-leaf);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(218, 190, 134, 0.5);
  color: var(--gold-leaf);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.lightbox__arrow svg { width: 22px; height: 22px; }
.lightbox__arrow--prev { inset-inline-start: clamp(10px, 3vw, 30px); }
.lightbox__arrow--next { inset-inline-end: clamp(10px, 3vw, 30px); }
.lightbox__close:hover,
.lightbox__arrow:hover { background: var(--gold-leaf); color: var(--ink-950); }
.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible { outline: 2px solid var(--gold-leaf); outline-offset: 3px; }


/* ── News & Events + Event responsive ── */
@media (max-width: 900px) {
  .news { padding-top: 118px; }
  .news-card { grid-template-columns: 1fr; }
  .news-card__media {
    min-height: 240px;
    border-right: none;
    border-bottom: 1px solid var(--gold-line);
  }

  .event-head { padding-top: 118px; }
  .event-facts { flex-direction: column; gap: 22px; }
  .event-fact { padding: 0; }
  .event-fact + .event-fact::before { display: none; }
  .event-video::before { inset: 16px; }
  .cslider { max-width: 520px; }
}

@media (max-width: 600px) {
  .news { padding-top: 100px; }
  .news-card__body { padding: 32px 26px 34px; }

  .event-head { padding-top: 100px; }
  .event-video__frame { padding: 7px; }
  .cslider__arrow { width: 40px; height: 40px; }
  .cslider__arrow--prev { inset-inline-start: 12px; }
  .cslider__arrow--next { inset-inline-end: 12px; }
  .lightbox__arrow { width: 44px; height: 44px; }
}