/* ===========================================================
   Al Haadi Institute — Shared Design System
   =========================================================== */

:root{
  --green: #063D2E;
  --green-deep: #02281F;
  --ivory: #F5F0E6;
  --parchment: #E8DFCF;
  --charcoal: #161815;
  --brass: #C6A15B;
  --brass-soft: #d8bd8a;
  --border: rgba(22,24,21,0.12);
  --shadow: 0 10px 40px rgba(2,40,31,0.14);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --arabic: "Noto Naskh Arabic", serif;
  --maxw: 1200px;
  --maxw-wide: 1440px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--green);
  line-height:1.15;
  margin:0 0 .5em;
}
.arabic{ font-family:var(--arabic); }
p{ margin:0 0 1em; }
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}
.section{ padding:clamp(56px,8vw,110px) 0; position:relative; }
.section.alt{ background:var(--parchment); }
.section.deep{ background:var(--green); color:var(--ivory); }
.section.deep h1,.section.deep h2,.section.deep h3{ color:var(--ivory); }
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
  font-weight:600;
  color:var(--brass);
  margin-bottom:.9em;
  display:block;
}
.lede{
  font-size:clamp(18px,1.3vw,20px);
  line-height:1.6;
  color:#544f47;
  max-width:64ch;
}
.section.deep .lede{ color:#e3ddd0; }

/* Buttons */
.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:2px;
  font-family:var(--sans);
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid transparent;
  transition:all .3s ease;
  cursor:pointer;
}
.btn-primary{ background:var(--brass); color:var(--ivory); }
.btn-primary:hover{ background:var(--green); color:var(--ivory); transform:translateY(-2px); }
.btn-outline{ border-color:var(--ivory); color:var(--ivory); }
.btn-outline:hover{ background:var(--ivory); color:var(--green); }
.btn-outline-dark{ border-color:var(--green); color:var(--green); }
.btn-outline-dark:hover{ background:var(--green); color:var(--ivory); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:1.8em; }

/* ============ NAV ============ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--ivory);
  border-bottom:1px solid rgba(6,61,46,.10);
}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:16px; }
.brand-logo{ height:64px; width:auto; display:block; }
.brand-word{
  font-family:var(--serif); font-weight:700; letter-spacing:.03em;
  font-size:1.65rem; color:var(--green);
}
.brand-ar{ color:var(--brass); font-size:1.1rem; }

.footer-logo{ height:90px; width:auto; margin-bottom:14px; opacity:1; }
.nav-links{
  display:flex; align-items:center; gap:26px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:14px; letter-spacing:.02em; font-weight:500;
  color:var(--green); position:relative; padding:4px 0;
  transition:color .25s ease;
}
.nav-links a:hover{ color:var(--brass); }
.nav-links a.active{ color:var(--brass); font-weight:700; }
.nav-cta{
  background:var(--brass); color:var(--green) !important;
  padding:9px 18px; border-radius:2px; font-weight:700 !important;
  text-transform:uppercase; font-size:.72rem !important; letter-spacing:.06em;
  transition:background .25s ease;
}
.nav-cta:hover{ background:var(--brass-soft); color:var(--green) !important; }
.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.hamburger span{ width:24px; height:2px; background:var(--green); display:block; transition:.3s; }

@media (max-width:1024px){
  .nav-links{ gap:18px; }
}
@media (max-width:768px){
  html{ overflow-x:hidden; }
  .nav{ padding:10px 20px; }
  .brand-logo{ height:52px; }
  .brand-word{ font-size:1.1rem; }
  .hamburger{ display:flex; z-index:201; position:relative; }
  .nav-links{
    position:fixed; top:0; left:0; right:0; bottom:0; height:100vh; height:100dvh;
    z-index:200; background:var(--ivory) !important; flex-direction:column; align-items:flex-start;
    padding:100px 24px 32px; gap:22px; transform:translateX(100%);
    transition:transform .35s ease; overflow-y:auto; box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:17px; width:100%; }
  .nav-cta{ margin-top:8px; }
  body.nav-open{ overflow:hidden; }
}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  color:var(--ivory); overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,40,31,.55) 0%, rgba(22,40,31,.78) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:120px 24px 80px; }
.hero .arabic{ font-size:1.4rem; color:var(--brass-soft); display:block; margin-bottom:14px; }
.hero h1{
  color:var(--ivory); font-size:clamp(2.4rem,6vw,4.6rem); margin-bottom:.3em; letter-spacing:.01em;
}
.hero .hero-sub{
  font-size:clamp(1.05rem,1.6vw,1.3rem); max-width:52ch; color:#EDE7D8; margin-bottom:1.4em;
}
.hero .estd{ font-size:.85rem; letter-spacing:.05em; color:var(--brass-soft); margin-top:1.6em; }

.page-hero{
  position:relative; padding:150px 0 70px; color:var(--ivory);
  background:
    linear-gradient(90deg, rgba(2,40,31,.82) 0%, rgba(2,40,31,.6) 42%, rgba(2,40,31,.42) 75%, rgba(2,40,31,.32) 100%),
    linear-gradient(180deg, rgba(22,40,31,.55), rgba(22,40,31,.8)),
    center/cover no-repeat;
}
.page-hero h1{ color:var(--ivory); font-size:clamp(2.2rem,5vw,3.4rem); text-shadow:0 2px 18px rgba(2,40,31,.55); }
.page-hero .eyebrow{ text-shadow:0 1px 10px rgba(2,40,31,.6); }
.page-hero .lede{ color:#efece3; text-shadow:0 1px 10px rgba(2,40,31,.5); }

/* Solid text panel — used where the hero photograph is too busy/bright for
   gradient overlays alone to guarantee legible text (e.g. programmes.html). */
.hero-text-panel{
  display:inline-block; background:rgba(2,40,31,.66); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  border-left:2px solid var(--brass); padding:30px 38px; max-width:660px; border-radius:0 3px 3px 0;
}
.hero-text-panel .eyebrow, .hero-text-panel h1, .hero-text-panel .lede{ text-shadow:none; }
.hero-text-panel .lede{ margin-bottom:0; }
@media (max-width:600px){
  .hero-text-panel{ padding:22px 24px; }
}

/* ============ GEOMETRIC PATTERN ============ */
.pattern-strip{
  height:14px;
  background-image:repeating-linear-gradient(45deg, var(--brass) 0, var(--brass) 1px, transparent 1px, transparent 14px);
  opacity:.35;
}
.divider-orn{
  display:flex; align-items:center; gap:14px; margin:2em 0;
}
.divider-orn::before,.divider-orn::after{
  content:""; flex:1; height:1px; background:var(--border);
}
.divider-orn span{ color:var(--brass); font-size:1.2rem; }

/* ============ CARDS / GRID ============ */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--border); border-radius:3px;
  overflow:hidden; transition:transform .35s ease, box-shadow .35s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.card img{ height:190px; width:100%; object-fit:cover; }
.card-body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ font-size:1.4rem; margin-bottom:.35em; }
.card-tag{ color:var(--brass); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:.6em; }
.card-body p{ color:#544f47; font-size:.95rem; flex:1; }
.card-link{ margin-top:1em; font-size:.82rem; font-weight:700; color:var(--green); letter-spacing:.03em; }

.panel{
  border:1px solid var(--border); padding:32px 26px; background:#fff;
  transition:border-color .3s ease, transform .3s ease;
}
.panel:hover{ border-color:var(--brass); transform:translateY(-4px); }
.panel h3{ font-size:1.3rem; }
.panel p{ color:#544f47; font-size:.93rem; margin:0; }

/* ============ PATHWAY / TIMELINE ============ */
.pathway{
  display:flex; align-items:stretch; gap:0; margin:2.5em 0; flex-wrap:wrap;
}
.pathway-step{
  flex:1; min-width:180px; position:relative; text-align:center; padding:26px 18px;
  background:#fff; border:1px solid var(--border);
}
.pathway-step + .pathway-step{ border-left:none; }
.pathway-step .yrs{ color:var(--brass); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.pathway-step h4{ margin:.4em 0; font-size:1.25rem; }
.pathway-step p{ font-size:.85rem; color:#544f47; margin:0; }
.pathway-arrow{
  display:flex; align-items:center; justify-content:center; width:36px; color:var(--brass); font-size:1.3rem;
}
@media (max-width:768px){
  .pathway{ flex-direction:column; }
  .pathway-step + .pathway-step{ border-left:1px solid var(--border); border-top:none; }
  .pathway-arrow{ width:auto; transform:rotate(90deg); padding:4px 0; }
}

.timeline{ position:relative; padding-left:34px; border-left:2px solid var(--parchment); }
.timeline-item{ position:relative; padding-bottom:44px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-42px; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--brass); border:3px solid var(--ivory); box-shadow:0 0 0 2px var(--brass);
}
.timeline-year{ font-family:var(--serif); font-size:1.8rem; color:var(--green); font-weight:700; margin-bottom:.15em; }
.timeline-item p{ color:#544f47; max-width:60ch; }

/* editorial list */
.editorial-list{ list-style:none; margin:0; padding:0; }
.editorial-list li{
  display:flex; gap:20px; padding:16px 0; border-bottom:1px solid var(--border);
}
.editorial-list li:first-child{ border-top:1px solid var(--border); }
.editorial-list .num{ font-family:var(--serif); font-size:1.6rem; color:var(--brass); flex-shrink:0; width:50px; }
.editorial-list h4{ margin:0 0 .2em; font-size:1.15rem; }
.editorial-list p{ margin:0; color:#544f47; font-size:.92rem; }

/* Placeholder / coming soon badges */
.badge{
  display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; padding:5px 12px; border:1px solid var(--brass); color:var(--brass); border-radius:20px;
}
.badge-soon{ background:var(--brass); color:#fff; border-color:var(--brass); }

.placeholder-note{
  font-size:.78rem; color:#8a8478; font-style:italic; margin-top:.6em;
}

/* Footer */
.site-footer{ background:var(--ivory); color:#4D514B; padding:72px 0 30px; border-top:1px solid rgba(6,61,46,.10); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.site-footer h4{ color:var(--green); font-size:1.3rem; }
.site-footer a{ color:#4D514B; }
.site-footer a:hover{ color:var(--brass); }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-contact{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:.95rem; }
.footer-contact a{ display:inline-block; padding:2px 0; }
.footer-address{ line-height:1.6; color:#4D514B; }
.footer-bottom{
  border-top:1px solid rgba(6,61,46,.10); padding-top:24px; font-size:.8rem; color:#4D514B;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-bottom span:first-child{ color:var(--brass); font-weight:600; }
@media (max-width:768px){ .footer-grid{ grid-template-columns:1fr; } .footer-logo{ height:76px; } }

/* Forms */
.form-field{ margin-bottom:20px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:.82rem; font-weight:600; color:var(--green); }
.form-field input, .form-field select, .form-field textarea{
  padding:12px 14px; border:1px solid var(--border); background:#fff; font-family:var(--sans); font-size:.95rem;
  border-radius:2px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:2px solid var(--brass); }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
/* Above-the-fold hero content must never depend on JS/scroll-timing to
   become visible — guarantee it renders immediately regardless of when
   (or whether) the reveal observer fires. */
.hero .reveal, .hero-v2 .reveal, .page-hero .reveal, .trust-hero .reveal,
.hero .container, .hero-v2-inner, .page-hero .container, .trust-hero .container{
  opacity:1 !important; transform:none !important;
}

.four-row{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--serif); font-size:1.15rem; color:var(--brass); margin-top:1em; }
.four-row span:not(:last-child)::after{ content:"·"; margin-left:14px; color:var(--brass); }

table.schedule{ width:100%; border-collapse:collapse; margin-top:1em; }
table.schedule th, table.schedule td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); font-size:.92rem; }
table.schedule th{ color:var(--green); text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; }

/* ===========================================================
   HOMEPAGE REVISION 2 — editorial / cinematic components
   =========================================================== */

/* ---- Hero v2 ---- */
.hero-v2{
  position:relative; min-height:clamp(680px,86vh,860px); display:flex; align-items:center;
  color:var(--ivory); overflow:hidden; background:var(--green-deep);
}
.hero-v2-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.5;
}
.hero-v2-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(2,40,31,.4) 0%, rgba(2,40,31,.62) 55%, rgba(2,40,31,.94) 100%),
    linear-gradient(90deg, rgba(2,40,31,.55) 0%, transparent 45%);
}
.hero-v2-inner{
  position:relative; z-index:2; max-width:var(--maxw-wide); margin:0 auto; width:100%;
  padding:64px 32px 0;
}
.hero-v2-eyebrow{
  display:flex; align-items:center; gap:12px; margin-bottom:1.3em;
  text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; font-weight:600; color:var(--brass-soft);
}
.hero-v2-eyebrow::before{ content:""; width:36px; height:1px; background:var(--brass); display:inline-block; }
.hero-v2 h1{
  color:var(--ivory); font-weight:600; letter-spacing:-0.01em;
  font-size:clamp(52px,5vw,76px); line-height:1; margin-bottom:.3em; max-width:740px;
}
.hero-v2-sub{
  font-size:19px; max-width:44ch; color:#E7E0D2; margin-bottom:.35em; font-weight:400; line-height:1.55;
}
.hero-v2-sub2{
  font-family:var(--serif); font-style:italic; font-size:19px; color:var(--brass-soft);
  max-width:42ch; margin-bottom:1.7em; line-height:1.5;
}
.hero-v2 .btn-row{ margin-top:0; }
.hero-v2-marker{
  margin-top:2.2em; padding-top:1.3em; border-top:1px solid rgba(245,240,230,.18);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft);
  display:flex; align-items:center; gap:10px;
}
.hero-scroll-cue{
  position:absolute; right:32px; bottom:28px; z-index:2; display:flex; flex-direction:column; align-items:center;
  gap:10px; color:var(--brass-soft); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
}
.hero-scroll-cue span{ writing-mode:vertical-rl; }
.hero-scroll-cue .line{ width:1px; height:44px; background:linear-gradient(180deg, var(--brass), transparent); animation:cueMove 2.4s ease-in-out infinite; }
@keyframes cueMove{ 0%,100%{ transform:scaleY(1); opacity:.5; } 50%{ transform:scaleY(1.2); opacity:1; } }

@media (max-width:768px){
  .hero-v2{ min-height:clamp(560px,88vh,700px); }
  .hero-v2-inner{ padding:52px 22px 0; }
  .hero-v2 h1{ font-size:clamp(42px,10vw,50px); }
  .hero-scroll-cue{ display:none; }
}

/* ---- Section frame ---- */
.section-v2{ padding:clamp(64px,8vw,120px) 0; position:relative; }
.section-v2.on-dark{ background:var(--green-deep); color:var(--ivory); }
.section-v2.on-dark h2, .section-v2.on-dark h3, .section-v2.on-dark h4{ color:var(--ivory); }
.section-v2.on-parchment{ background:var(--parchment); }
@media (max-width:768px){ .section-v2{ padding:clamp(56px,10vw,88px) 0; } }
.kicker{
  display:flex; align-items:center; gap:12px; margin-bottom:1.1em;
  text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:600; color:var(--brass);
}
.kicker::before{ content:""; width:28px; height:1px; background:var(--brass); }
.on-dark .kicker{ color:var(--brass-soft); }
.head-xl{
  font-size:clamp(38px,4vw,56px); max-width:16ch; letter-spacing:-0.01em; line-height:1.05; margin-bottom:.4em;
}
.head-md{
  font-size:clamp(26px,2.5vw,38px); max-width:20ch; letter-spacing:-0.005em; line-height:1.12; margin-bottom:.4em;
}
.head-split{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:2em; }
.head-split .lede{ margin-bottom:0; padding-bottom:.4em; }
.roots-note{
  margin-top:.4em; font-size:15px; color:#544f47; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.roots-note a{ color:var(--brass); font-weight:600; border-bottom:1px solid var(--brass); padding-bottom:1px; }
.on-dark .roots-note{ color:#CFC7B4; }
.on-dark .roots-note a{ color:var(--brass-soft); border-color:var(--brass-soft); }

/* ---- Journey v2 ---- */
.journey-track{ margin-top:.6em; }
.journey-group{ margin-bottom:3em; }
.journey-group:last-child{ margin-bottom:0; }
.journey-group-label{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-bottom:1.2em;
  display:flex; align-items:center; gap:14px;
}
.journey-group-label::after{ content:""; flex:1; height:1px; background:var(--border); }
.journey-steps{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.journey-step{ display:flex; flex-direction:column; gap:.25em; padding:0 30px 0 0; position:relative; }
.journey-step .jn{ font-family:var(--serif); font-size:clamp(28px,2.4vw,36px); color:var(--green); line-height:1; }
.journey-step .jt{ font-weight:700; letter-spacing:.02em; font-size:17px; }
.journey-arrow{
  width:44px; height:1px; background:var(--brass); position:relative; margin:0 8px; align-self:center; top:-.6em;
}
.journey-arrow::after{
  content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-right:1px solid var(--brass); border-bottom:1px solid var(--brass); transform:rotate(-45deg);
}
.journey-total{
  display:inline-flex; align-items:baseline; gap:10px; margin-top:1.1em;
  font-family:var(--serif); color:var(--brass);
}
.journey-total .tn{ font-size:1.7rem; font-weight:700; }
.journey-total .tl{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal); font-family:var(--sans); }
.journey-caption{ color:#544f47; font-size:16px; max-width:56ch; margin-top:.5em; line-height:1.6; }

.journey-more{ margin-top:2.2em; padding-top:1.8em; border-top:1px solid var(--border); }
.journey-more-label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-bottom:1em; }
.journey-more-list{
  display:flex; flex-wrap:wrap; gap:12px 36px; list-style:none; padding:0; margin:0;
  font-family:var(--serif); font-size:20px; color:var(--green);
}
.journey-more-list li{ position:relative; padding-right:36px; }
.journey-more-list li:not(:last-child)::after{ content:"·"; position:absolute; right:12px; color:var(--brass); }

@media (max-width:768px){
  .journey-steps{ flex-direction:column; align-items:flex-start; }
  .journey-step{ padding:0 0 22px; }
  .journey-arrow{ width:1px; height:28px; margin:0 0 0 1.1em; top:0; transform:none; }
  .journey-arrow::after{ right:-3px; top:auto; bottom:0; transform:rotate(45deg); }
}

/* ---- Programmes v2 ---- */
.prog-primary{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); margin-top:.6em; border:1px solid var(--border); }
.prog-primary-item{
  background:var(--ivory); padding:28px 22px; min-height:160px; display:flex; flex-direction:column; justify-content:space-between;
  transition:background .3s ease;
}
.prog-primary-item:hover{ background:#fff; }
.prog-primary-item .pn{ font-family:var(--serif); color:var(--brass); font-size:.9rem; }
.prog-primary-item h3{ font-size:clamp(20px,1.8vw,24px); margin:.5em 0 0; }
.prog-primary-item .pt{ font-size:.74rem; letter-spacing:.05em; color:#7a7568; text-transform:uppercase; margin-top:auto; padding-top:1.1em; }
@media (max-width:900px){ .prog-primary{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .prog-primary{ grid-template-columns:1fr; } }

.prog-secondary{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:1.8em; padding-top:1.6em; border-top:1px solid var(--border);
}
.prog-secondary a{ font-size:16px; color:var(--green); font-weight:600; position:relative; padding-bottom:2px; border-bottom:1px solid transparent; }
.prog-secondary a:hover{ border-color:var(--brass); color:var(--brass); }
.prog-secondary .soon{ color:#8a8478; font-weight:500; font-size:16px; }
.prog-secondary .soon .badge{ margin-left:8px; transform:translateY(-1px); }

/* ---- Story v2 ---- */
.story-v2{ margin-top:.6em; }
.story-row{
  display:grid; grid-template-columns:150px 1fr; gap:22px; padding:22px 0; border-top:1px solid rgba(245,240,230,.16);
  align-items:baseline;
}
.story-row:last-of-type{ border-bottom:1px solid rgba(245,240,230,.16); }
.story-row .sy{ font-family:var(--serif); font-size:clamp(48px,4vw,72px); line-height:1; color:var(--brass); }
.story-row .st-label{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft); font-weight:700; margin-bottom:.4em; }
.story-row .st{ color:#D9D2C2; max-width:56ch; font-size:16px; line-height:1.6; }
.story-row.featured{
  background:rgba(198,161,91,.07); margin:6px -20px 0; padding:26px 20px; border-top:1px solid var(--brass);
}
.story-row.featured .sy{ color:var(--brass-soft); }
.story-row.featured .st{ color:var(--ivory); font-size:17px; }
@media (max-width:600px){
  .story-row{ grid-template-columns:1fr; gap:6px; }
  .story-row.featured{ margin:6px 0 0; }
}

/* ---- Trust v2 ---- */
.trust-v2-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
@media (max-width:900px){ .trust-v2-grid{ grid-template-columns:1fr; gap:30px; } }
.trust-v2-mark{ font-family:var(--serif); font-size:2.2rem; line-height:1; color:var(--brass); opacity:.55; margin-bottom:.1em; }
.trust-v2-logo{ max-width:420px; width:100%; height:auto; display:block; margin:0 auto; }
@media (max-width:900px){ .trust-v2-logo{ max-width:280px; } }

/* ---- Final CTA v2 ---- */
.final-v2{
  background:var(--green-deep); color:var(--ivory); text-align:center; padding:clamp(56px,7vw,84px) 0;
  position:relative; overflow:hidden;
}
.final-v2::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:repeating-linear-gradient(45deg, var(--brass) 0, var(--brass) 1px, transparent 1px, transparent 22px);
}
.final-v2-inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; padding:0 24px; }
.final-v2 h2{ color:var(--ivory); font-size:clamp(40px,4vw,58px); line-height:1.05; margin-bottom:.35em; }
.final-v2 .lede{ color:#D9D2C2; margin:0 auto 1.6em; font-size:18px; }

/* ---- Numeral / large stat utility ---- */
.big-num{ font-family:var(--serif); color:var(--brass); font-weight:700; }

/* ===========================================================
   OUR ROOTS — editorial components (Islam · Iman · Ihsan)
   =========================================================== */

/* Our Roots page — scoped compact spacing (does not affect other pages) */
body.roots .section-v2{ padding:clamp(48px,6vw,86px) 0; }
@media (max-width:768px){
  body.roots .section-v2{ padding:clamp(40px,8vw,60px) 0; }
}

/* Hero — editorial split composition (text + image panel) */
.roots-hero{
  position:relative; background:var(--ivory); padding:clamp(52px,6.5vw,88px) 0 clamp(40px,5vw,60px);
}
.roots-hero-inner{
  max-width:var(--maxw); margin:0 auto; width:100%; padding:0 24px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;
}
.roots-hero-text h1{ color:var(--green); font-size:clamp(44px,6vw,72px); line-height:1.02; margin-bottom:.3em; }
.roots-hero-sub{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,1.8vw,22px); color:var(--brass); margin-bottom:.7em; }
.roots-hero-text p.lede{ color:#544f47; max-width:60ch; }
.roots-hero-ref{ margin-top:1.6em; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8a8478; }
.roots-hero-media{ width:100%; }
@media (max-width:900px){
  .roots-hero-inner{ grid-template-columns:1fr; gap:32px; }
  .roots-hero-media{ order:2; max-width:340px; margin:0 auto; }
  .roots-hero-text{ order:1; }
}

/* ---- Image slot system ---- */
.roots-img{
  position:relative; overflow:hidden; width:100%; background-color:var(--parchment);
  background-size:cover; background-position:center;
}
.roots-img.placeholder{
  background-image:
    repeating-linear-gradient(45deg, rgba(198,161,91,.16) 0, rgba(198,161,91,.16) 1px, transparent 1px, transparent 26px),
    linear-gradient(135deg, var(--parchment) 0%, var(--ivory) 100%);
}
.roots-img.placeholder::after{
  content:""; position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px;
  border:1px solid var(--brass); opacity:.5; transform:rotate(45deg);
}
.roots-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.roots-hero-image{ aspect-ratio: 4 / 5; max-height:440px; }
@media (max-width:900px){ .roots-hero-image{ max-height:none; } }
.roots-sanad-image{ aspect-ratio: 3 / 2; max-width:560px; margin-left:auto; }
.roots-ihsan-image{ aspect-ratio: 3 / 2; }
@media (max-width:900px){
  .roots-sanad-image{ max-width:none; margin:0; }
}

/* Triad intro — Islam / Iman / Ihsan */
.triad{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:1em; }
.triad-item{
  padding:30px 24px; text-align:center; border-top:1px solid var(--border); position:relative;
}
.triad-item:not(:last-child){ border-right:1px solid var(--border); }
.triad-num{ font-family:var(--serif); color:var(--brass); font-size:.9rem; display:block; margin-bottom:.6em; }
.triad-word{ font-family:var(--serif); font-size:clamp(30px,3.2vw,40px); color:var(--green); margin:0 0 .2em; }
.triad-label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#8a8478; font-weight:600; }
@media (max-width:700px){
  .triad{ grid-template-columns:1fr; }
  .triad-item:not(:last-child){ border-right:none; }
}

/* Term rows — madhhabs / spiritual paths, equal-weight typographic list */
.term-row{
  display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:1.2em; padding-top:1.4em; border-top:1px solid var(--border);
  font-family:var(--serif); font-size:clamp(22px,2.2vw,28px);
}
.on-dark .term-row{ border-top-color:rgba(245,240,230,.16); }
.term-row span{ position:relative; display:inline-block; padding-right:40px; margin-right:0; margin-bottom:6px; color:var(--green); }
.on-dark .term-row span{ color:var(--ivory); }
.term-row span:not(:last-child)::after{ content:"·"; position:absolute; right:14px; color:var(--brass); }

.spec-block{
  margin-top:1.4em; padding:22px 26px; border-left:2px solid var(--brass); background:rgba(198,161,91,.06);
}
.spec-block h4{ margin:0 0 .3em; font-size:1.15rem; }
.spec-block p{ margin:0; color:#544f47; font-size:15px; line-height:1.6; }
.on-dark .spec-block p{ color:#CFC7B4; }

/* Vertical flow — general step list (kept for compatibility) */
.flow-vertical{ margin-top:1.6em; max-width:520px; }
.flow-step{
  display:flex; align-items:baseline; gap:16px; padding:14px 0;
}
.flow-step .fn{ font-family:var(--serif); color:var(--brass); font-size:.85rem; width:20px; flex-shrink:0; }
.flow-step .ft{ font-weight:700; letter-spacing:.02em; font-size:17px; }
.flow-step .fd{ font-size:14px; color:#8a8478; margin-left:6px; }
.flow-arrow{ width:1px; height:22px; background:var(--brass); margin-left:36px; opacity:.6; }

/* Compact chain row — Sanad / Ilm-Amal-Tazkiyah-Adab-Khidmah, horizontal on desktop, vertical on mobile */
.chain-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 0; margin-top:1em; }
.chain-step{ font-weight:700; letter-spacing:.02em; font-size:15px; color:var(--charcoal); }
.on-dark .chain-step{ color:var(--ivory); }
.chain-step small{ font-weight:500; color:#8a8478; margin-left:5px; }
.on-dark .chain-step small{ color:#9fab9f; }
.chain-row .journey-arrow{ width:26px; margin:0 10px; }
@media (max-width:700px){
  .chain-row{ flex-direction:column; align-items:flex-start; gap:0; }
  .chain-row .journey-arrow{ width:1px; height:20px; margin:0 0 0 1.1em; top:0; transform:none; }
  .chain-row .journey-arrow::after{ right:-3px; top:auto; bottom:0; transform:rotate(45deg); }
  .chain-step{ padding:6px 0; }
}

.statement-block{
  margin-top:1.6em; padding-top:1.4em; border-top:1px solid var(--brass);
  font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.4vw,28px);
  color:var(--brass); max-width:22ch; line-height:1.25;
}
.on-dark .statement-block{ color:var(--brass-soft); }
.statement-block.centered{ margin-left:auto; margin-right:auto; text-align:center; max-width:32ch; }

/* Synthesis — Islam / Iman / Ihsan brought together, connected to Ilm–Khidmah */
.synthesis-head{ text-align:center; margin-bottom:1.6em; }
.synthesis-head span{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); font-weight:700;
}
.synthesis-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.synthesis-col{ text-align:center; padding:22px 20px; border-top:1px solid rgba(245,240,230,.16); }
.synthesis-col:not(:last-child){ border-right:1px solid rgba(245,240,230,.16); }
.synthesis-col h3{ font-family:var(--serif); color:var(--ivory); font-size:clamp(26px,2.6vw,32px); margin:0 0 .15em; }
.synthesis-col .sc-label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft); font-weight:600; margin-bottom:.9em; display:block; }
.synthesis-col .sc-terms{ font-size:14px; color:#CFC7B4; }
@media (max-width:700px){
  .synthesis-cols{ grid-template-columns:1fr; }
  .synthesis-col:not(:last-child){ border-right:none; }
}
.synthesis-bridge{ text-align:center; margin-top:2em; padding-top:1.8em; border-top:1px solid rgba(245,240,230,.16); }
.synthesis-bridge .statement-block{ border-top:none; margin-top:0; padding-top:0; }
.synthesis-bridge .chain-row{ justify-content:center; margin-top:1.4em; }

/* Outcomes list — reuses editorial-list pattern already in stylesheet */

/* Two-column editorial composition — Islam / Iman */
.roots-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:.4em; }
@media (max-width:900px){
  .roots-two-col{ grid-template-columns:1fr; gap:8px; }
}

/* Sanad — two-column: text + chain / image */
.sanad-grid{ display:grid; grid-template-columns:1fr 440px; gap:44px; align-items:start; margin-top:1em; }
.sanad-media{ position:sticky; top:110px; }
.sanad-media .roots-img-caption{
  margin-top:.8em; font-family:var(--serif); font-style:italic; font-size:14px; color:#8a8478; text-align:right;
}
@media (max-width:900px){
  .sanad-grid{ grid-template-columns:1fr; gap:24px; }
  .sanad-media{ position:static; max-width:420px; margin:0 auto; }
}

/* Ihsan — term-row card and contemplative image, presented as two
   separate, independent elements rather than a single fused panel */
.ihsan-media-row{
  display:grid; grid-template-columns:1fr 1.1fr; gap:28px; align-items:stretch; margin-top:1.4em;
}
.ihsan-media-text{
  padding:30px 34px; display:flex; flex-direction:column; justify-content:center;
  border:1px solid var(--border); background:#fff;
}
.ihsan-media-text .ihsan-terms-label{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-bottom:.9em; display:block;
  text-align:center;
}
.ihsan-media-image{ position:relative; }
.ihsan-media-image .roots-img{ height:100%; aspect-ratio:auto; min-height:220px; border-radius:3px; }
.ihsan-caption{
  margin-top:.9em; text-align:right; font-family:var(--serif); font-style:italic; font-size:14px; color:#8a8478;
}
@media (max-width:900px){
  .ihsan-media-row{ grid-template-columns:1fr; gap:20px; }
  .ihsan-media-image .roots-img{ aspect-ratio:3/2; min-height:0; }
  .ihsan-caption{ text-align:left; }
}

/* Sanad chain of transmission — connected nodes on a thin rule (desktop),
   vertical timeline (mobile/tablet). Replaces arrow-separated chain-row for
   Sanad only. Line draws in and nodes/labels fade up in sequence the first
   time the section scrolls into view (triggered by the existing .reveal.in
   scroll-reveal system — no extra JS required). */
.sanad-chain, .sanad-chain li{ list-style:none !important; list-style-type:none !important; }
.sanad-chain{
  margin:1.6em 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); column-gap:10px;
}
.sanad-chain li::marker{ content:none; }
.sanad-chain::before{
  content:""; position:absolute; left:5px; right:5px; top:5px; height:1px; background:var(--border);
  transform-origin:left center; transform:scaleX(0); transition:transform 1.2s cubic-bezier(.4,0,.2,1);
}
.reveal.in .sanad-chain::before{ transform:scaleX(1); }
.sanad-chain li{
  position:relative; padding:24px 0 0; text-align:left;
  opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease;
}
.reveal.in .sanad-chain li{ opacity:1; transform:translateY(0); }
.sanad-chain li:nth-child(1){ transition-delay:.15s; }
.sanad-chain li:nth-child(2){ transition-delay:.30s; }
.sanad-chain li:nth-child(3){ transition-delay:.45s; }
.sanad-chain li:nth-child(4){ transition-delay:.60s; }
.sanad-chain li:nth-child(5){ transition-delay:.75s; }
.sanad-chain li:nth-child(6){ transition-delay:.90s; }
.sanad-chain li:nth-child(7){ transition-delay:1.05s; }
.sanad-node{
  position:absolute; top:0; left:0; width:10px; height:10px; background:var(--ivory);
  border:1px solid var(--brass); transform:rotate(45deg) scale(0); transition:transform .4s ease; z-index:1;
}
.reveal.in .sanad-node{ transform:rotate(45deg) scale(1); }
.sanad-chain li:nth-child(1) .sanad-node{ transition-delay:.15s; }
.sanad-chain li:nth-child(2) .sanad-node{ transition-delay:.30s; }
.sanad-chain li:nth-child(3) .sanad-node{ transition-delay:.45s; }
.sanad-chain li:nth-child(4) .sanad-node{ transition-delay:.60s; }
.sanad-chain li:nth-child(5) .sanad-node{ transition-delay:.75s; }
.sanad-chain li:nth-child(6) .sanad-node{ transition-delay:.90s; }
.sanad-chain li:nth-child(7) .sanad-node{ transition-delay:1.05s; }
.on-dark .sanad-node{ background:var(--green-deep); }
.sanad-label{
  display:block; font-weight:700; letter-spacing:.02em; font-size:13.5px; color:var(--charcoal); line-height:1.4;
  padding-right:10px;
}
.on-dark .sanad-label{ color:var(--ivory); }
@media (max-width:900px){
  .sanad-chain{ display:flex; flex-direction:column; gap:0; }
  .sanad-chain::before{ left:5px; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .sanad-chain li{ padding:0 0 26px 26px; }
  .sanad-chain li:last-child{ padding-bottom:0; }
  .sanad-node{ top:2px; left:0; }
  .sanad-label{ font-size:15px; padding-right:0; }
}
@media (prefers-reduced-motion:reduce){
  .sanad-chain::before, .sanad-chain li, .sanad-node{ transition:none; opacity:1; transform:none; }
}

/* Spiritual Paths — Qadiriyya / Chishtiyya / Nakshabandiyya / Soharawardiyya
   presented as four branches from a single trunk, rather than a plain
   dot-separated list. */
.paths-branches{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin:1.6em 0 0; padding-top:22px;
}
.paths-branches::before{
  content:""; position:absolute; top:0; left:12.5%; right:12.5%; height:1px; background:var(--brass);
}
.path-branch{
  position:relative; text-align:center; padding-top:16px; font-family:var(--serif); font-size:clamp(18px,1.6vw,21px);
  color:var(--green);
}
.path-branch::before{
  content:""; position:absolute; top:0; left:50%; width:1px; height:16px; background:var(--brass); transform:translateX(-50%);
}
@media (max-width:700px){
  .paths-branches{ grid-template-columns:repeat(2,1fr); gap:26px 0; padding-top:0; }
  .paths-branches::before{ display:none; }
  .path-branch{ padding-top:0; }
  .path-branch::before{ display:none; }
}

/* Islam section — balanced two-column with 2x2 school grid */
.islam-two-col{ align-items:start; }
.schools-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin:1em 0 1.4em;
}
.schools-grid span{
  display:block; font-family:var(--serif); font-size:1.05rem; color:var(--green); padding:11px 0; border-bottom:1px solid var(--border);
}
@media (max-width:480px){
  .schools-grid{ grid-template-columns:1fr; }
}

/* Jibril closing */
.jibril-close{ text-align:center; }
.jibril-close .jc-label{
  display:block; text-align:center; margin:0 auto 1.2em; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); font-weight:700;
}
.jibril-close .jc-arabic{ font-family:var(--arabic); font-size:clamp(22px,2.6vw,30px); color:var(--green); margin-bottom:.6em; }
.jibril-close h2{ margin:0 auto .3em; max-width:20ch; }
.jibril-close .jc-triad{ font-family:var(--serif); font-size:clamp(20px,2vw,26px); color:var(--brass); margin-bottom:1em; }
.jibril-close p.lede{ margin:0 auto 1em; }
.jibril-close .jc-ref{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#8a8478; }

/* ===========================================================
   PROGRAMME APPLICATION SYSTEM — apply modal
   =========================================================== */

/* "Apply Now →" trigger inside programme cards */
.card-apply-row{ margin-top:1em; }
.card-apply{
  display:inline-block; font-family:var(--sans); font-size:.82rem; font-weight:700;
  letter-spacing:.03em; color:var(--green); border-bottom:1px solid var(--brass);
  padding-bottom:2px; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none;
  text-decoration:none;
}
.card-apply:hover{ color:var(--brass); }

/* Overlay */
.app-modal-overlay{
  position:fixed; inset:0; z-index:600; background:rgba(2,40,31,.6);
  backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.app-modal-overlay.open{ opacity:1; pointer-events:auto; }

/* Panel */
.app-modal{
  background:var(--ivory); width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  border-radius:3px; box-shadow:var(--shadow); position:relative;
  transform:translateY(18px); transition:transform .3s ease;
}
.app-modal-overlay.open .app-modal{ transform:translateY(0); }

.app-modal-close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border:none; background:none;
  font-size:1.5rem; line-height:1; color:var(--charcoal); cursor:pointer; z-index:2;
}
.app-modal-close:hover{ color:var(--brass); }

.app-modal-head{ padding:34px 34px 0; }
.app-modal-head h2{ font-size:1.6rem; margin-bottom:.15em; }
.app-modal-head .lede{ margin:0 0 0; font-size:.92rem; }

.app-modal-status-badge{
  display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  padding:5px 12px; border-radius:20px; background:var(--brass); color:#fff; margin-bottom:1em;
}

.app-modal-programme{
  background:var(--parchment); border-left:2px solid var(--brass); padding:10px 16px;
  font-weight:600; color:var(--green); margin:1.1em 0 1.4em; font-size:.92rem; border-radius:0 2px 2px 0;
}

.app-modal-body{ padding:0 34px 34px; }

/* Phone row: country code + number */
.phone-row{ display:flex; gap:10px; }
.phone-row select{ flex:0 0 118px; }
.phone-row input{ flex:1; min-width:0; }

/* Inline validation */
.field-error{ font-size:.78rem; color:#a83232; display:none; margin-top:2px; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{ border-color:#a83232; }
.form-field.has-error .field-error{ display:block; }

/* Consent */
.consent-row{
  display:flex; gap:10px; align-items:flex-start; margin:1.3em 0 1.6em; font-size:.85rem; color:#544f47;
}
.consent-row input{ margin-top:3px; flex:0 0 auto; width:auto; }
.consent-row label{ cursor:pointer; }

.app-modal-body .btn{ width:100%; text-align:center; }
.app-modal-body .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.app-modal-note{ font-size:.75rem; color:#8a8478; margin-top:.9em; text-align:center; }

/* Success / error result panels */
.app-modal-result{ padding:56px 34px; text-align:center; }
.app-modal-result .result-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 1.2em; display:flex;
  align-items:center; justify-content:center; font-size:1.6rem; color:#fff;
}
.app-modal-result.is-success .result-icon{ background:var(--green); }
.app-modal-result.is-error .result-icon{ background:#a83232; }
.app-modal-result h2{ margin-bottom:.4em; }
.app-modal-result p{ color:#544f47; max-width:42ch; margin:0 auto 1.8em; }

.app-modal-form-state,
.app-modal-result{ display:none; }
.app-modal-form-state.active,
.app-modal-result.active{ display:block; }

@media (max-width:640px){
  .app-modal-overlay{ padding:0; align-items:flex-end; }
  .app-modal{ max-width:none; width:100%; max-height:100vh; height:100%; border-radius:0; }
  .app-modal-head, .app-modal-body{ padding-left:22px; padding-right:22px; }
  .app-modal-result{ padding:56px 22px; }
  .phone-row{ flex-wrap:wrap; }
  .phone-row select{ flex:1 1 100%; }
}

/* ===========================================================
   OUR STORY — institutional history timeline (scoped to
   our-story.html only; does not affect the old .timeline
   classes still present elsewhere)
   =========================================================== */

/* Compact hero — restrained opening, not a homepage-style banner */
.story-hero{ padding:clamp(90px,11vw,130px) 0 clamp(56px,7vw,80px); }
.story-hero h1{ font-size:clamp(1.9rem,4.2vw,2.9rem); }

/* Tighter section rhythm than the site default — keeps the historical
   narrative feeling continuous rather than broken up by large gaps */
body.story .section-v2{ padding:clamp(46px,6vw,84px) 0; }
@media (max-width:768px){ body.story .section-v2{ padding:clamp(34px,7vw,52px) 0; } }

/* Timeline */
.story-timeline{ max-width:760px; }
.story-entry{
  position:relative; padding:28px 0 28px 38px; border-bottom:1px solid var(--border);
}
.story-entry:first-child{ padding-top:4px; }
.story-entry:last-child{ border-bottom:none; padding-bottom:6px; }
.story-entry::before{
  content:""; position:absolute; left:4px; top:0; bottom:-1px; width:1px; background:var(--border);
}
.story-entry:first-child::before{ top:8px; }
.story-entry:last-child::before{ bottom:auto; height:40px; }
.story-node{
  position:absolute; left:0; top:36px; width:9px; height:9px; background:var(--ivory);
  border:1px solid var(--brass); transform:rotate(45deg); z-index:1;
}
.story-entry:first-child .story-node{ top:12px; }

.story-year-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:.3em; }
.story-year{ font-family:var(--serif); font-size:clamp(24px,2.4vw,32px); color:var(--green); line-height:1; font-weight:600; }
.story-prelude-tag{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:700;
}
.story-title{ font-family:var(--serif); font-size:clamp(18px,1.7vw,22px); color:var(--green); margin:0 0 .5em; }
.story-entry p{ color:#544f47; max-width:64ch; margin:0 0 .75em; font-size:.95rem; line-height:1.7; }
.story-entry p:last-child{ margin-bottom:0; }

.story-entry.is-prelude{ opacity:.8; }
.story-entry.is-prelude .story-year{ font-size:clamp(19px,1.9vw,24px); color:var(--brass-soft); font-weight:600; }
.story-entry.is-prelude .story-title{ font-size:.92rem; letter-spacing:.03em; text-transform:uppercase; color:#8a8478; font-weight:700; }

@media (max-width:700px){
  .story-entry{ padding:20px 0 20px 26px; }
  .story-node{ top:30px; }
  .story-entry:first-child .story-node{ top:10px; }
}

/* 2026 — culmination section: the visual climax of the page. Deliberately
   more prominent than an ordinary timeline entry, framed with a fine gold
   edge so it reads as the moment the whole history has been building to. */
.story-culmination{
  position:relative;
  border-top:1px solid var(--brass); border-bottom:1px solid var(--brass);
  padding-top:.4em; padding-bottom:.4em;
}
.story-culmination-head{ margin-bottom:.2em; }
.story-2026-num{
  display:block; font-family:var(--serif); font-weight:600; line-height:.9;
  font-size:clamp(60px,9vw,128px); color:var(--brass); letter-spacing:-0.01em; margin-bottom:.08em;
}
.story-culmination .head-xl{ margin-bottom:.5em; }
.story-culmination-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; margin-top:1.2em;
}
.story-culmination-media{ position:relative; }
.story-2026-image{ aspect-ratio:4/3; border-left:2px solid var(--brass); }
@media (max-width:900px){
  .story-culmination-grid{ grid-template-columns:1fr; gap:28px; }
  .story-culmination-media{ order:-1; }
}
@media (max-width:480px){
  .story-2026-num{ font-size:clamp(52px,17vw,72px); }
}

/* Transition — a deliberate pause between the historical climax and the
   present-day conclusion */
.story-transition{
  display:flex; align-items:center; justify-content:center; gap:16px;
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
}
.story-transition-mark{
  position:relative; width:9px; height:9px; background:var(--ivory);
  border:1px solid var(--brass); transform:rotate(45deg);
}
.story-transition-mark::before, .story-transition-mark::after{
  content:""; position:absolute; top:50%; width:120px; height:1px; background:var(--border);
}
.story-transition-mark::before{ right:100%; margin-right:18px; transform:translateY(-50%) rotate(-45deg); transform-origin:right center; }
.story-transition-mark::after{ left:100%; margin-left:18px; transform:translateY(-50%) rotate(-45deg); transform-origin:left center; }
@media (max-width:600px){
  .story-transition-mark::before, .story-transition-mark::after{ width:56px; }
}

/* Today — the concluding chapter: present-day, not another timeline entry */
.story-today{ padding-top:clamp(72px,9vw,110px) !important; padding-bottom:clamp(72px,9vw,110px) !important; }
.story-today-heading{ font-size:clamp(40px,4.6vw,64px); }
.story-today-final{
  color:var(--brass-soft); font-size:clamp(20px,2vw,26px); border-top:1px solid rgba(245,240,230,.2);
  padding-top:1.3em; margin-top:1.6em;
}
@media (max-width:600px){
  .story-today{ padding-top:clamp(52px,10vw,72px) !important; padding-bottom:clamp(52px,10vw,72px) !important; }
}