/* ==========================================================================
   Bayan Academy - "The Illuminated Curriculum"
   An editorial site whose single idea is the illuminated mushaf: a drawn gold
   frame, calligraphy as art, verse-roundel numerals, marginalia, a colophon.
   MAS brand (blue #084898 / green #58b840) + gold-leaf illumination.
   ========================================================================== */

/* ---------- Fonts ---------- */
:root {
  /* Brand, sampled from the MAS CNJ logo */
  --blue:        #084898;
  --blue-2:      #0a3f80;
  --ink:         #0e2038;   /* deep manuscript ink */
  --ink-2:       #1d3350;
  --night:       #071b33;   /* darkest field */
  --green:       #58b840;
  --green-deep:  #3f8f2b;

  /* Gold leaf - the illumination. Semantic: marks what is precious/ornamental. */
  --gold:        #b8862f;
  --gold-2:      #d8ab4e;
  --gold-3:      #f0d693;
  --gold-leaf:   linear-gradient(135deg, #8a5f18 0%, #d9ac4d 22%, #f6e6b0 45%, #cf9c38 62%, #8a5f18 100%);

  /* Parchment - layered, not flat */
  --paper:       #f6efe1;   /* main ground */
  --paper-2:     #efe6d3;   /* recessed */
  --paper-3:     #fbf7ee;   /* raised */
  --paper-edge:  #e4d8be;
  --hair:        rgba(14, 32, 56, 0.16);
  --hair-soft:   rgba(14, 32, 56, 0.09);

  --text:        #24303f;
  --text-soft:   #5a6572;
  --on-dark:     #f3ecdb;
  --on-dark-soft:#c9b98f;

  /* Type */
  --display: "Fraunces", "Hoefler Text", Georgia, serif;
  --sans:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic:  "Amiri", "Fraunces", serif;

  /* Fluid editorial scale - dramatic, viewport-aware */
  --t-eyebrow: clamp(0.68rem, 0.63rem + 0.2vw, 0.78rem);
  --t-small:   clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem);
  --t-body:    clamp(1.02rem, 0.97rem + 0.24vw, 1.18rem);
  --t-lead:    clamp(1.3rem, 1.1rem + 0.9vw, 1.85rem);
  --t-h3:      clamp(1.5rem, 1.2rem + 1.4vw, 2.35rem);
  --t-h2:      clamp(2.1rem, 1.4rem + 3vw, 3.9rem);
  --t-h1:      clamp(3.2rem, 1.6rem + 7vw, 7.4rem);
  --t-mega:    clamp(6rem, 3rem + 16vw, 20rem);   /* calligraphy as art */

  --wrap: 1240px;
  --measure: 62ch;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--text);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
  overflow-x: clip;
}
/* Layered parchment atmosphere (not a flat fill) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(216, 171, 78, 0.10), transparent 60%),
    radial-gradient(90% 70% at -10% 100%, rgba(8, 72, 152, 0.06), transparent 55%),
    linear-gradient(180deg, var(--paper-3), var(--paper) 30%, var(--paper-2));
}
/* Paper grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0; color: var(--ink); font-optical-sizing: auto; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold-2); color: var(--night); }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 4px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 1rem; top: -120px; z-index: 300;
  background: var(--ink); color: var(--on-dark); padding: 0.7rem 1.1rem; border-radius: 3px;
  font-family: var(--sans); transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Shared editorial atoms ---------- */
.wrap { width: min(100% - clamp(2rem, 8vw, 9rem), var(--wrap)); margin-inline: auto; }

.gold-text {
  background: var(--gold-leaf); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Manuscript eyebrow: small caps, hairline, roundel - not a filled pill */
.rubric {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--sans); font-weight: 500;
  font-size: var(--t-eyebrow); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.6rem;
}
.rubric::before {
  content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg);
  background: var(--gold-2); box-shadow: 0 0 0 3px rgba(184, 134, 47, 0.18);
}
.rubric--light { color: var(--gold-3); }

/* Calligraphic Arabic label used as art */
.calligraphy { font-family: var(--arabic); direction: rtl; line-height: 1; }

/* Numerals as verse roundels */
.roundel {
  display: inline-grid; place-items: center; flex: none;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  font-family: var(--display); font-size: 1.35rem; color: var(--night);
  background: var(--gold-leaf);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 16px -8px rgba(184, 134, 47, 0.7);
  font-variant-numeric: lining-nums;
}

/* Link with a drawn underline (purposeful micro-interaction) */
.link-draw {
  font-family: var(--sans); font-weight: 500; color: var(--blue);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease); padding-bottom: 2px;
}
.link-draw:hover, .link-draw:focus-visible { background-size: 100% 1.5px; }

/* Primary action - one confident CTA. Solid gold, no metallic gradient, no shine sweep. */
.cta {
  --c: var(--night);
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--sans); font-weight: 500; font-size: var(--t-small);
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 1.05em 2em; position: relative; isolation: isolate;
  color: var(--c); background: var(--gold-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -14px rgba(7, 27, 51, 0.7);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cta:hover, .cta:focus-visible { background: #e3ba5c; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 14px 26px -14px rgba(7, 27, 51, 0.8); }
.cta:active { transform: none; background: var(--gold); }
.cta svg { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease); }
.cta:hover svg { transform: translateX(3px); }
.cta--ink { background: var(--ink); color: var(--on-dark); box-shadow: 0 14px 30px -18px rgba(14, 32, 56, 0.9); }
.cta--ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--hair);
  box-shadow: none;
}
.cta--ghost:hover { border-color: var(--gold); }
.cta--on-dark.cta--ghost { color: var(--on-dark); border-color: rgba(243, 236, 219, 0.28); }
.cta--on-dark.cta--ghost:hover { border-color: var(--gold-3); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 239, 225, 0.86);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
@media (min-width: 921px) {
  .site-header { background: rgba(246, 239, 225, 0.72); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
}
.site-header.is-scrolled { border-bottom-color: var(--hair-soft); background: rgba(246, 239, 225, 0.96); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; }
.brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand img { height: 40px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-family: var(--display); font-weight: 500; font-size: 1.18rem; color: var(--ink); letter-spacing: 0.01em; }
.brand-text span { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 0.3rem; }
.nav a:not(.cta) {
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); padding: 0.6rem 0.9rem; position: relative;
}
.nav a:not(.cta)::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.42rem; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav a:not(.cta):hover::after, .nav a:not(.cta):focus-visible::after { transform: scaleX(1); }
.nav .cta { margin-left: 0.6rem; padding: 0.7em 1.3em; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 46px; height: 46px; padding: 11px; position: relative; z-index: 103; }
.nav-toggle span { display: block; height: 1.6px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle span + span { margin-top: 6px; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(7, 27, 51, 0.5); z-index: 99; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease); }
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); z-index: 101;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 0.2rem;
    padding: 5rem 2rem 2rem; background: var(--paper-3);
    box-shadow: -30px 0 80px -40px rgba(7, 27, 51, 0.7);
    border-left: 1px solid var(--gold);
    transform: translateX(100%); transition: transform 0.5s var(--ease); overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a:not(.cta) { font-size: 1.25rem; letter-spacing: 0.04em; text-transform: none; font-family: var(--display); padding: 0.8rem 0.2rem; border-bottom: 1px solid var(--hair-soft); }
  .nav a:not(.cta)::after { display: none; }
  .nav .cta { margin: 1.2rem 0 0; justify-content: center; }
  body.nav-open { overflow: hidden; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }
}

/* ==========================================================================
   HERO - the illuminated opening (unwan)
   ========================================================================== */
.hero {
  position: relative; color: var(--on-dark); overflow: clip;
  background:
    radial-gradient(130% 90% at 78% 0%, rgba(88, 184, 64, 0.16), transparent 52%),
    radial-gradient(120% 110% at 12% 108%, rgba(216, 171, 78, 0.2), transparent 55%),
    linear-gradient(155deg, #0a2646, var(--night) 55%, #05132a);
}
.hero__grain { position: absolute; inset: 0; z-index: 0; opacity: 0.35; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
/* Eight-point star-and-cross lattice (khatam), drawn as hairlines and faded toward the text */
.hero__lattice { position: absolute; inset: 0; z-index: 0; opacity: 0.11; color: var(--gold-3); pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 85% 50%, #000 25%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 85% 50%, #000 25%, transparent 75%); }

.hero__inner { position: relative; z-index: 2; padding-block: clamp(1.2rem, 0.8rem + 2vw, 2.2rem) clamp(1.8rem, 1.2rem + 2.5vw, 3rem); }

/* Illuminated frame drawn around the opening */
.frame { position: relative; padding: clamp(1.6rem, 1rem + 3vw, 3rem) clamp(1.4rem, 0.5rem + 4vw, 4.5rem); }
.frame__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; color: var(--gold-2); overflow: visible; }
.frame__svg rect { fill: none; stroke: currentColor; }
.frame__corner { position: absolute; width: clamp(34px, 6vw, 62px); height: clamp(34px, 6vw, 62px); color: var(--gold-2); z-index: 2; }
.frame__corner--tl { top: 8px; left: 8px; }
.frame__corner--tr { top: 8px; right: 8px; transform: scaleX(-1); }
.frame__corner--bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.frame__corner--br { bottom: 8px; right: 8px; transform: scale(-1); }

.hero__content { position: relative; z-index: 3; }
/* Basmala as the headpiece (unwan) of the frame: centred, flanked by hairlines, tall line box for the harakat */
.hero__bism {
  display: flex; align-items: center; justify-content: center; gap: clamp(0.9rem, 2.5vw, 1.8rem);
  font-family: var(--arabic); direction: rtl; font-size: clamp(1.55rem, 1rem + 2.2vw, 2.7rem); line-height: 1.75;
  color: var(--gold-3); margin: 0 auto clamp(1rem, 2vw, 1.8rem);
}
.hero__bism span { flex: none; }
.hero__bism::before, .hero__bism::after {
  content: ""; flex: 1 1 0; max-width: 10rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 171, 78, 0.6), transparent);
}

/* Title block: English wordmark and Arabic calligraphy share a grid, so nothing overlaps or clips */
.hero__title { display: grid; grid-template-columns: 1fr; align-items: center; column-gap: clamp(1rem, 4vw, 3.5rem); row-gap: 0.2rem; }
.hero__ar {
  font-family: var(--arabic); direction: rtl; text-align: right; font-size: clamp(3.3rem, 1.5rem + 6.5vw, 8.2rem);
  background: linear-gradient(165deg, #edcb74 0%, #d3a447 48%, #b0842c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  justify-self: end; text-shadow: none; pointer-events: none; order: -1;
  padding: 0.1em 0.08em;
}
/* WebKit clips background-clip:text to each LINE box, not the element box, so tall glyphs
   (the hamza on أ) get cut off no matter how much padding the element has. Give every line
   its own block with a line box tall enough to hold Amiri's full ascent, then close the
   visual gap between lines with negative margins (margins don't shrink the line box). */
.hero__ar > span { display: block; line-height: 1.7; }
.hero__ar > span + span { margin-top: -0.5em; }
/* Browsers without text-clipped backgrounds simply get solid gold. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__ar { background: none; color: var(--gold-2); }
}
@media (min-width: 760px) {
  .hero__title { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__ar { order: 0; margin-right: clamp(0rem, 2vw, 2rem); }
}
.hero__en { position: relative; z-index: 2; }
.hero__en h1 {
  color: var(--on-dark); font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.02em; line-height: 0.92;
}
.hero__en h1 em { font-style: italic; font-weight: 400; color: var(--gold-3); }
.hero__sub {
  max-width: 34ch; margin-top: clamp(1.1rem, 2vw, 1.7rem); font-family: var(--sans);
  font-size: var(--t-lead); font-weight: 300; line-height: 1.4; color: var(--on-dark);
}
.hero__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.2rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.3rem);
}
.hero__actions { display: grid; gap: 0.75rem; justify-items: start; }
.hero__doc {
  font-family: var(--sans); font-size: var(--t-small); color: var(--gold-3); text-decoration: none;
  padding-left: 0.2rem; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.4s var(--ease);
}
.hero__doc:hover, .hero__doc:focus-visible { background-size: 100% 1px; }
/* Manuscript colophon-style metadata, not chips */
.hero__meta { display: grid; gap: 0.35rem; padding-left: 1.3rem; border-left: 1px solid rgba(216, 171, 78, 0.4); }
.hero__meta dt { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); }
.hero__meta dd { margin: 0; font-family: var(--display); font-size: 0.98rem; color: var(--on-dark); }

/* Scroll cue */
.hero__cue { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3.5rem); }
.hero__cue span { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-soft); display: inline-flex; align-items: center; gap: 0.7rem; }
.hero__cue span::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--gold-2), transparent); animation: cue 2.4s var(--ease-2) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 40% { transform: scaleY(1); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ==========================================================================
   WELCOME - illuminated opening text with a decorated initial
   ========================================================================== */
.opening { padding-block: clamp(4rem, 3rem + 6vw, 9rem); position: relative; }
.opening__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 900px) { .opening__grid { grid-template-columns: 1.55fr 1fr; align-items: start; } }

.opening__lead p { font-size: var(--t-lead); line-height: 1.45; color: var(--ink); font-weight: 300; max-width: 24ch; }
.opening__body { margin-top: 1.8rem; max-width: var(--measure); color: var(--text-soft); }
.opening__body p + p { margin-top: 1.1rem; }
/* Illuminated initial */
.dropcap::first-letter {
  font-family: var(--display); font-weight: 500; float: left; line-height: 0.72;
  font-size: 4.4em; padding: 0.06em 0.14em 0 0; margin-right: 0.02em;
  color: var(--gold);
}

/* Mission & Vision as two editorial statements, not identical cards */
.tenets { display: grid; gap: 2.2rem; }
.tenet { position: relative; padding-left: 1.6rem; border-left: 2px solid var(--gold-2); }
.tenet__label { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.7rem; }
/* English label leads; the Arabic trails it like the curriculum headings. Amiri sits high on
   its baseline, so nudge it down a touch to sit level with the caps. */
.tenet__label .calligraphy { font-size: 1.6rem; line-height: 1; color: var(--gold); position: relative; top: 0.12em; }
.tenet__label h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); }
.tenet p { font-family: var(--display); font-size: var(--t-h3); line-height: 1.18; color: var(--ink); font-weight: 300; }

/* ==========================================================================
   PRINCIPLES - three staggered convictions with big numerals
   ========================================================================== */
.principles { padding-block: clamp(4rem, 3rem + 6vw, 9rem); background:
    linear-gradient(180deg, transparent, rgba(228, 216, 190, 0.5) 12%, rgba(228, 216, 190, 0.5) 88%, transparent);
  position: relative; }
.principles__head { max-width: 40ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.principles__head h2 { font-size: var(--t-h2); font-weight: 300; letter-spacing: -0.01em; }
.principles__head h2 em { font-style: italic; color: var(--gold); }

.creed { display: grid; gap: 0; }
.creed__item {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: start; padding-block: clamp(1.8rem, 3vw, 2.8rem);
  border-top: 1px solid var(--hair);
}
.creed__item:last-child { border-bottom: 1px solid var(--hair); }
.creed__num { font-family: var(--display); font-size: clamp(2.4rem, 1.5rem + 3vw, 4.4rem); line-height: 0.9; font-weight: 300; }
.creed__num small { display: block; font-family: var(--arabic); font-size: 0.3em; color: var(--gold); margin-top: 0.4em; }
.creed__body { max-width: 56ch; }
.creed__body h3 { font-size: var(--t-h3); font-weight: 400; margin-bottom: 0.5rem; }
.creed__body p { color: var(--text-soft); }
/* stagger: indent the middle conviction for editorial rhythm */
@media (min-width: 760px) { .creed__item:nth-child(2) { padding-left: clamp(2rem, 8vw, 8rem); } }

.creed__coda {
  margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.6rem; justify-items: start;
}
.creed__coda p { font-family: var(--display); font-size: var(--t-h3); font-weight: 300; max-width: 22ch; line-height: 1.2; color: var(--ink); }
.creed__coda .calligraphy { color: var(--gold); font-size: 2rem; }

/* ==========================================================================
   CURRICULUM - the illuminated index, movements joined by a gold spine
   ========================================================================== */
.curric { padding-block: clamp(4rem, 3rem + 6vw, 9rem); position: relative; }
.curric__head { display: grid; gap: 1.4rem; margin-bottom: clamp(3rem, 6vw, 5.5rem); max-width: 52ch; }
.curric__head h2 { font-size: var(--t-h2); font-weight: 300; letter-spacing: -0.01em; }
.curric__head h2 em { font-style: italic; color: var(--gold); }
.curric__head p { color: var(--text-soft); max-width: var(--measure); }


.movement { position: relative; padding-left: clamp(0px, 4vw, 5.5rem); }
.movement + .movement { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
/* the spine */
.movement::before {
  content: ""; position: absolute; left: clamp(0px, 4vw, 5.5rem); top: 0.4rem; bottom: -clamp(2.5rem, 5vw, 4.5rem);
  width: 2px; background: linear-gradient(var(--gold-2), rgba(184, 134, 47, 0.15)); display: none;
}
@media (min-width: 760px) { .movement { padding-left: 6.5rem; } .movement::before { left: 2.6rem; display: block; } .movement:last-child::before { bottom: 0.4rem; } }

.movement__head { display: flex; align-items: baseline; gap: 1.1rem; margin-bottom: 1.8rem; position: relative; }
.movement__num {
  position: absolute; left: -6.5rem; top: -0.35rem; width: 5.2rem; text-align: center;
  font-family: var(--display); font-size: 3rem; font-weight: 300; color: var(--gold);
  display: none; font-variant-numeric: lining-nums;
}
@media (min-width: 760px) { .movement__num { display: block; } }
.movement__head h3 { font-size: var(--t-h3); font-weight: 400; }
.movement__head .calligraphy { font-size: 2rem; color: var(--gold); }
.movement__intro { color: var(--text-soft); max-width: var(--measure); margin-bottom: 1.8rem; }

/* Class entries - editorial ledger rows, varied not identical cards */
.entry {
  display: grid; grid-template-columns: 1fr; gap: 0.4rem 2rem;
  padding-block: 1.5rem; border-top: 1px solid var(--hair-soft);
  transition: background 0.4s var(--ease);
}
.entry:first-of-type { border-top: 1px solid var(--hair); }
@media (min-width: 680px) {
  .entry { grid-template-columns: 1.6fr 1fr; align-items: start; padding-inline: 0.4rem; margin-inline: -0.4rem; }
  .entry:hover { background: var(--paper-3); }
}
.entry__main { display: grid; gap: 0.55rem; }
.entry__title { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.entry__title h4 { font-family: var(--display); font-size: var(--t-h3); font-weight: 400; line-height: 1; }
.entry__code { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(184, 134, 47, 0.45); padding: 0.24rem 0.55rem; border-radius: 2px; }
.entry__desc { color: var(--text-soft); max-width: 52ch; }
.entry__req { font-size: var(--t-small); color: var(--text-soft); }
.entry__req b { color: var(--ink); font-weight: 500; }
/* facts column: ages + time, tabular, right-aligned on desktop */
.entry__facts { display: grid; gap: 0.7rem; align-content: start; }
@media (min-width: 680px) { .entry__facts { justify-items: end; text-align: right; } }
.fact { display: grid; gap: 0.1rem; }
.fact dt { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-soft); }
.fact dd { margin: 0; font-family: var(--display); font-size: 1.15rem; color: var(--ink); font-variant-numeric: lining-nums; }

/* ==========================================================================
   LEDGER - schedule & fees as a refined manuscript ledger
   ========================================================================== */
.ledger { padding-block: clamp(4rem, 3rem + 6vw, 9rem); background:
    linear-gradient(180deg, transparent, rgba(228, 216, 190, 0.5) 10%, rgba(228, 216, 190, 0.5) 90%, transparent); }
.ledger__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ledger__head h2 { font-size: var(--t-h2); font-weight: 300; }
.ledger__head h2 em { font-style: italic; color: var(--gold); }
.ledger__head p { color: var(--text-soft); max-width: 34ch; }
.ledger__scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; font-variant-numeric: lining-nums; }
.tbl thead th {
  text-align: left; font-family: var(--sans); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-soft);
  padding: 0 1.2rem 1rem; border-bottom: 2px solid var(--ink);
}
.tbl thead th:last-child, .tbl td:last-child { text-align: right; }
.tbl tbody td { padding: 1.15rem 1.2rem; border-bottom: 1px solid var(--hair-soft); vertical-align: baseline; }
.tbl tbody tr:hover { background: var(--paper-3); }
.tbl .c-name { font-family: var(--display); font-size: 1.28rem; color: var(--ink); }
.tbl .c-name span { display: block; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: 0.25rem; }
.tbl .c-time { color: var(--text); white-space: nowrap; }
.tbl .c-fee b { font-family: var(--display); font-size: 1.3rem; color: var(--ink); font-weight: 500; }
.tbl .c-fee span { display: block; font-size: 0.8rem; color: var(--text-soft); margin-top: 0.2rem; }
.ledger__note { margin-top: 1.6rem; display: flex; gap: 0.9rem; align-items: baseline; font-size: var(--t-small); color: var(--text-soft); max-width: 70ch; }
.ledger__note b { color: var(--ink); font-weight: 500; }
.ledger__note .calligraphy { color: var(--gold); font-size: 1.4rem; flex: none; }

/* ==========================================================================
   COLOPHON - closing dua + registration (bookends the hero frame)
   ========================================================================== */
.colophon { position: relative; color: var(--on-dark); overflow: clip;
  background: radial-gradient(120% 120% at 20% 0%, rgba(216, 171, 78, 0.16), transparent 55%), linear-gradient(155deg, var(--night), #05122a); }
.colophon__grain { position: absolute; inset: 0; opacity: 0.3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.colophon .frame { position: relative; z-index: 2; }
.colophon__inner { padding-block: clamp(3.5rem, 3rem + 5vw, 7rem); position: relative; z-index: 2; text-align: center; }
.colophon__dua { font-family: var(--arabic); direction: rtl; font-size: clamp(2.2rem, 1.4rem + 4vw, 5rem); line-height: 1.8;
  color: var(--gold-2); margin-bottom: 0.4rem; }
.colophon__dua-t { font-family: var(--sans); font-size: var(--t-small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: clamp(2rem, 4vw, 3rem); }
.colophon h2 { font-size: var(--t-h2); font-weight: 300; color: var(--on-dark); max-width: 18ch; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); }
.colophon h2 em { font-style: italic; color: var(--gold-3); }
.colophon__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.colophon__contact { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); justify-content: center; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(216, 171, 78, 0.28); }
.contact-item { display: grid; gap: 0.3rem; text-align: center; }
.contact-item dt { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); }
.contact-item dd { margin: 0; font-family: var(--display); font-size: 1.1rem; }
.contact-item a { color: var(--gold-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #050f22; color: var(--on-dark-soft); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(243, 236, 219, 0.1); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand img { height: 48px; width: auto; margin-bottom: 1.2rem; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-brand p { max-width: 40ch; font-size: var(--t-small); }
.footer-col h4 { font-family: var(--sans); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-3); margin-bottom: 1.2rem; }
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a, .footer-col span { font-size: var(--t-small); color: var(--on-dark-soft); }
.footer-col a:hover { color: var(--gold-3); }
.footer-bottom { padding-top: 1.8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; align-items: center; font-size: 0.78rem; }
.footer-bottom .calligraphy { color: var(--gold-3); font-size: 1.15rem; }

/* ==========================================================================
   Motion - one choreographed entrance; content never depends on JS to show
   ========================================================================== */
[data-animate] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-animate] { opacity: 0; transform: translateY(26px); }
  .js [data-animate].is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js [data-animate].is-in[data-animate="2"] { transition-delay: 0.08s; }
  .js [data-animate].is-in[data-animate="3"] { transition-delay: 0.16s; }

  /* Hero draw-in: the frame strokes itself, then content settles */
  .js .frame__svg rect { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); animation: draw 2.2s var(--ease-2) 0.2s forwards; }
  .js .frame__corner { opacity: 0; animation: fade 0.8s var(--ease) 1.4s forwards; }
  .js .hero__content > * { opacity: 0; transform: translateY(20px); animation: rise 1s var(--ease) forwards; }
  .js .hero__bism { animation-delay: 0.5s; }
  .js .hero__title { animation-delay: 0.7s; }
  .js .hero__sub { animation-delay: 0.9s; }
  .js .hero__foot { animation-delay: 1.05s; }
  .js .hero__cue { animation-delay: 1.3s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }