/* ============================================================
   SECTIONS - the choreography of the page
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--sp-6) var(--gutter) var(--sp-6);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 90% 60% at 50% 12%, #172247 0%, rgba(23, 34, 71, 0) 62%),
    var(--c-midnight);
}
.hero__pattern {
  position: absolute; inset: -18% 0;
  background-image: var(--pattern-lattice); background-size: 170px 170px;
  opacity: var(--orn-soft);
  -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 55% at 50% 40%, #000, transparent 78%);
  will-change: transform;
}
.hero__rosette {
  position: absolute; top: -6%; left: 50%;
  width: min(140vw, 1200px); aspect-ratio: 1;
  transform: translateX(-50%);
  color: var(--c-gold); opacity: 0.045;
  animation: turn 320s linear infinite;
}
.hero__rosette svg { width: 100%; height: 100%; }
.hero__glow {
  position: absolute; left: 50%; top: 30%;
  width: min(80vw, 780px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 167, 93, 0.2), rgba(200, 167, 93, 0.06) 35%, transparent 65%);
  filter: blur(28px);
  animation: breathe 10s var(--e-in-out) infinite alternate;
}
.hero__vignette {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 85% 85% at 50% 45%, transparent 45%, rgba(6, 9, 18, 0.8) 100%);
}
.hero__arch {
  position: absolute; left: 50%; top: 50%; z-index: -2;
  height: min(120vh, 1200px); width: auto;
  transform: translate(-50%, -43%);
  color: var(--c-gold);
}
.hero__arch path { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hero__arch .arch-outer { opacity: 0.8; }
.hero__arch .arch-inner { opacity: 0.35; }
.hero__arch .arch-fill { fill: url(#archLight); stroke: none; }
.hero__arch .arch-finial { fill: currentColor; stroke: none; opacity: 0.9; }

.hero__content { position: relative; text-align: center; max-width: 62rem; padding-top: 4vh; }
.hero__title { font-weight: 400; }
.hero__kicker {
  display: block;
  font-family: var(--f-serif); font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.65rem); line-height: 1.8;
  color: var(--c-gold);
}
.hero__name {
  display: block;
  font-family: var(--f-display); font-size: var(--fs-3xl); line-height: 2.05;
  padding-block: 0.12em;
  background: linear-gradient(180deg, #fff8e4 0%, #ecdcae 55%, #cbab62 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(200, 167, 93, 0.18));
}
.hero__sub {
  display: block; margin-top: 0.35em;
  font-family: var(--f-serif); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.65rem); line-height: 1.8;
  color: var(--t-2);
}
.hero__orn { margin-top: var(--sp-4); }
.hero__cue {
  position: absolute; bottom: 1.75rem; left: 50%;
  width: 1px; height: 5rem; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(200, 167, 93, 0.7));
  overflow: hidden;
}
.hero__cue::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--c-gold-light));
  animation: cue 3s var(--e-in-out) infinite;
}

/* ---------- Identity ---------- */
.identity { padding: var(--sp-7) 0 var(--sp-6); }
.identity__grid { display: grid; gap: var(--sp-5) var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .identity__grid { grid-template-columns: 1fr 1fr; }
  .identity__birth { grid-column: 1 / -1; }
}
.identity__birth { text-align: center; padding-top: var(--sp-3); }
.identity__birth .fact dd { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.35rem); line-height: 1.8; text-wrap: balance; }
.identity__mark { text-align: center; margin-top: 0.4rem; font-family: var(--f-serif); font-size: 1.7rem; line-height: 1; color: var(--c-gold); opacity: 0.8; }

/* ---------- Lineage (vertical scroll drives a horizontal chain) ---------- */
.lineage { position: relative; }
.lineage__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}
/* a quiet rosette holds the centre of the composition while names travel past */
.lineage__pin::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(120vh, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(79, 159, 151, 0.1), transparent 58%),
    var(--pattern-lattice) center / 210px 210px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(circle, #000 5%, transparent 62%);
  mask-image: radial-gradient(circle, #000 5%, transparent 62%);
  pointer-events: none;
}
.lineage__head { position: relative; z-index: 1; padding: calc(var(--sp-5) + 1.5rem) var(--gutter) 0; text-align: center; }
.lineage__viewport { position: relative; z-index: 1; display: flex; align-items: center; overflow: hidden; }
.lineage__track {
  --thread: 7.5rem;                /* the thread's distance from the track top */
  position: relative; display: flex; align-items: stretch;
  height: calc(var(--thread) * 2);
  padding-inline: max(var(--gutter), 10vw) max(var(--gutter), 14vw);
  will-change: transform;
}
.lineage__track::before {
  content: ""; position: absolute; top: var(--thread); inset-inline: 0; height: 1px;
  background: linear-gradient(to left, transparent, var(--c-gold) 6%, var(--c-gold) 94%, transparent);
  opacity: 0.5;
}
.node {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: flex-start;
  width: clamp(14rem, 16vw, 18rem);
  padding: calc(var(--thread) + 1.2rem) 0.5rem 0;
  text-align: center;
  font-family: var(--f-display); font-size: 1.5rem; line-height: 2.1;
  color: var(--t-1);
}
/* every second name sits above the thread, like a genealogical scroll */
.node:nth-child(4n + 3) { justify-content: flex-end; padding: 0 0.5rem calc(var(--thread) + 1.2rem); }
.node::before {
  content: ""; position: absolute; top: var(--thread); left: 50%;
  width: 0.9rem; height: 0.9rem; transform: translate(-50%, -50%);
  background: var(--c-gold); clip-path: var(--star8);
}
.node::after {
  content: ""; position: absolute; top: var(--thread); left: 50%;
  width: 4rem; height: 4rem; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 167, 93, 0.42), transparent 65%);
  opacity: 0;
}
.node--first, .node--last { width: clamp(18rem, 24vw, 26rem); font-size: 1.95rem; color: var(--c-gold-light); }
.node--first::before, .node--last::before { width: 1.3rem; height: 1.3rem; box-shadow: 0 0 24px rgba(200, 167, 93, 0.8); }
.node--first::after, .node--last::after { opacity: 1; }
.link {
  flex: 0 0 auto; align-self: flex-start;
  margin-top: var(--thread); transform: translateY(-50%);
  padding: 0 0.8rem;
  font-family: var(--f-serif); font-size: 1.1rem; line-height: 1.4;
  color: var(--c-gold); background: var(--bg);
  transition: background-color 1.6s var(--e-in-out);
}

/* Vertical mode: phones and tablets, reduced motion, no JS */
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .lineage__pin { position: static; height: auto; overflow: visible; }
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .lineage__pin::before { display: none; }
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .lineage__viewport { display: block; overflow: visible; }
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .lineage__track {
  flex-direction: column; align-items: center; height: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-5);
  transform: none !important;
}
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .lineage__track::before {
  top: var(--sp-4); bottom: var(--sp-5); height: auto; inset-inline: auto; left: 50%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--c-gold) 5%, var(--c-gold) 95%, transparent);
}
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .node,
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .node:nth-child(4n + 3) {
  width: min(100%, 24rem); justify-content: flex-start;
  padding: 2.2rem 0.5rem 0.5rem; font-size: 1.35rem;
}
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .node--first,
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .node--last { font-size: 1.7rem; }
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .node::before,
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .node::after { top: 0.9rem; }
:is(.lineage--vertical, html.no-js .lineage, html.reduce-motion .lineage) .link {
  align-self: center; margin-top: 0; transform: none; padding: 0.15rem 0.7rem;
}

/* ---------- Hadith ---------- */
.hadith { position: relative; padding: var(--sp-6) 0 var(--sp-7); text-align: center; }
.hadith::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(70vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(79, 159, 151, 0.12), transparent 62%);
  filter: blur(24px);
}
.hadith__lead { max-width: var(--measure); margin-inline: auto; color: var(--t-2); }

/* An illuminated cartouche: two gold rules closed by eight-point finials,
   the way a manuscript sets off a line of scripture from its commentary. */
.cartouche {
  position: relative; isolation: isolate;
  width: min(100%, 54rem); margin: var(--sp-4) auto;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.75rem, 5vw, 4rem);
}
.cartouche::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(200, 167, 93, 0.1), transparent 72%);
}
.cartouche::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; bottom: 0; z-index: -1;
  border-block: 1px solid var(--hairline-strong);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
}
.cartouche .finial {
  position: absolute; top: 50%; width: 0.65rem; height: 0.65rem;
  margin-top: -0.325rem;
  background: var(--c-gold); clip-path: var(--star8);
  box-shadow: 0 0 16px rgba(200, 167, 93, 0.6);
}
.cartouche .finial--start { inset-inline-start: -0.325rem; }
.cartouche .finial--end { inset-inline-end: -0.325rem; }

.hadith__arabic {
  font-family: var(--f-serif); font-size: clamp(1.75rem, 1.1rem + 2.5vw, 3.2rem); line-height: 1.9;
  color: var(--c-gold-light);
  text-shadow: 0 0 40px rgba(200, 167, 93, 0.3);
}
.hadith__meaning { margin-inline: auto; font-family: var(--f-serif); font-size: var(--fs-lg); line-height: 1.95; color: var(--t-1); }
.hadith__source { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--t-3); }

/* ---------- Testimonies ---------- */
.testimonies { position: relative; padding: 0 0 var(--sp-7); }
.testimonies__thread {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--hairline) 8%, var(--hairline) 92%, transparent);
}
.testimonies__list { position: relative; display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
.testimonies__list > .leaf-slot { width: min(100%, 42rem); margin-inline: auto; }
@media (min-width: 960px) {
  .testimonies__list > .leaf-slot { width: 56%; margin-inline: 0; }
  .testimonies__list > .leaf-slot:nth-child(odd)  { margin-inline-end: auto; }
  .testimonies__list > .leaf-slot:nth-child(even) { margin-inline-start: auto; }
  .testimonies__list > .leaf-slot:first-child, .testimonies__list > .leaf-slot:last-child { width: 72%; margin-inline: auto; }
}

/* ---------- Appearance ---------- */
.appearance { padding: var(--sp-6) 0; }
.appearance__grid { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) { .appearance__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); } }

/* ---------- Journey ---------- */
.journey { padding: var(--sp-6) 0 var(--sp-7); }
.journey__grid { display: grid; gap: var(--sp-5); }
.journey__orn { display: none; }
@media (min-width: 1000px) {
  .journey__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-6); align-items: start; }
  .journey__orn { display: block; position: sticky; top: calc(6rem + 8vh); color: var(--c-gold); opacity: 0.3; }
  .journey__orn svg { width: min(100%, 24rem); height: auto; margin-inline: auto; }
  .journey__orn [data-turn] { transform-box: view-box; transform-origin: 100px 100px; will-change: transform; }
}
.journey .fact dd { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem); line-height: 1.95; }
.journey__declare { font-family: var(--f-serif); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); line-height: 1.9; color: var(--c-gold-light); }

/* ---------- Mission ---------- */
.mission { position: relative; min-height: 88vh; display: grid; place-items: center; text-align: center; padding: var(--sp-6) 0; }
.mission::before {
  content: ""; position: absolute; left: 50%; bottom: 0; z-index: -1;
  width: min(90vw, 900px); height: 50vh; transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(200, 167, 93, 0.12), transparent 70%);
}
.mission__label { color: var(--c-gold); font-weight: 500; margin-bottom: var(--sp-3); }
.mission__text {
  max-width: 52rem; margin-inline: auto;
  font-family: var(--f-serif); font-size: clamp(1.45rem, 1rem + 2vw, 2.6rem); line-height: 1.9;
  color: var(--t-1);
}
/* each supplied clause takes its own line; a clause too long for one line
   breaks evenly rather than stranding a single word */
.mission__text span { display: block; text-wrap: balance; }

/* ---------- Moment (pinned prophecy) ---------- */
.moment { position: relative; height: 240vh; --light: 0; --scale: 1; }
.moment__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center; padding: 0 var(--gutter);
}
.moment__light {
  position: absolute; left: 50%; top: 40%;
  width: min(85vw, 820px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(233, 214, 160, 0.26), rgba(200, 167, 93, 0.08) 40%, transparent 65%);
  filter: blur(26px);
  opacity: var(--light);
}
.moment__arch {
  position: absolute; left: 50%; top: 50%;
  height: 112vh; width: auto;
  transform: translate(-50%, -47%) scale(var(--scale));
  color: var(--c-gold); opacity: calc(var(--light) * 0.85);
}
.moment__arch path { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.moment__arch .arch-inner { opacity: 0.4; }
.moment__body {
  position: relative; max-width: 52rem; text-align: center;
  opacity: calc(0.12 + var(--light) * 0.88);
  transform: translateY(calc((1 - var(--light)) * 28px)) scale(var(--scale));
}
.moment__text {
  margin-block: 1.2rem;
  font-family: var(--f-serif); font-size: clamp(1.5rem, 1rem + 2.2vw, 2.9rem); line-height: 1.9;
  color: #fff8e6; text-shadow: 0 0 30px rgba(200, 167, 93, 0.22);
  text-wrap: balance;
}
:is(html.reduce-motion, html.no-js) .moment { height: auto; padding: var(--sp-6) 0; --light: 1; }
:is(html.reduce-motion, html.no-js) .moment__pin { position: static; height: auto; padding-block: var(--sp-5); }

/* ---------- Obligations (illuminated page, pinned wheel) ---------- */
.obligations { padding: var(--sp-4) 0 var(--sp-5); }
.page {
  position: relative;
  width: min(100% - 2 * var(--gutter), 78rem); margin-inline: auto;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.35rem, 5vw, 5rem);
  color: var(--c-ink);
  background-color: var(--c-ivory);
  background-image:
    var(--grain),
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(180deg, var(--c-ivory), var(--c-ivory-2));
  border-radius: var(--r-lg);
  box-shadow: var(--sh-leaf);
}
.page::before { content: ""; position: absolute; inset: 12px; pointer-events: none; border: 1px solid var(--hairline-ink); border-radius: calc(var(--r-lg) - 10px); }
.page__corner { position: absolute; width: 14px; height: 14px; background: var(--c-gold-deep); clip-path: var(--star8); opacity: 0.8; }
.page__corner:nth-child(1) { top: 6px; inset-inline-start: 6px; }
.page__corner:nth-child(2) { top: 6px; inset-inline-end: 6px; }
.page__corner:nth-child(3) { bottom: 6px; inset-inline-start: 6px; }
.page__corner:nth-child(4) { bottom: 6px; inset-inline-end: 6px; }
.obligations__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 1000px) {
  .obligations__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); align-items: start; }
  .obligations__pin { position: sticky; top: calc(6rem + 4vh); }
}
.obligations__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); line-height: 2.15;
  color: var(--c-ink);
}
.wheel { width: min(100%, 21rem); margin: var(--sp-4) auto 0; color: var(--c-gold-deep); }
.wheel svg { width: 100%; height: auto; }
/* The turn lives on an inner group: rotating the <svg> box itself would grow
   its bounding box by root-two and push the layout past a narrow viewport. */
.wheel .w-turn {
  transform: rotate(var(--turn, 0deg));
  transform-box: view-box; transform-origin: 100px 100px;
  transition: transform 1.6s var(--e-soft);
}
.wheel .w-line { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.55; vector-effect: non-scaling-stroke; }
.wheel .w-ray { fill: none; stroke: currentColor; stroke-width: 0.6; opacity: 0.35; }
.wheel .w-tip { fill: var(--c-ivory); stroke: currentColor; stroke-width: 1; transition: fill 0.9s var(--e-out), filter 0.9s; }
.wheel .w-tip.is-lit { fill: var(--c-gold); filter: drop-shadow(0 0 6px rgba(200, 167, 93, 0.9)); }
.wheel .w-core { fill: currentColor; opacity: 0.55; }
.obligations__list { display: grid; }
.obligations__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
  padding: clamp(1.2rem, 2.5vw, 1.8rem) 0.9rem;
  margin-inline: -0.9rem;
  border-bottom: 1px solid var(--hairline-ink);
  border-radius: var(--r-sm);
  transition: opacity 0.7s var(--e-out), background-color 0.7s var(--e-out);
}
.obligations__list li:hover { background-color: rgba(156, 124, 60, 0.07); }
.obligations__list li:last-child { border-bottom: 0; }
.obligations__list .num { --num-stroke: var(--c-gold-deep); --num-fill: var(--c-ivory); color: var(--c-gold-ink); margin-top: 0.3rem; }
.obligations__text { font-family: var(--f-serif); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); line-height: 1.8; color: var(--c-ink); }
.obligations__cite { white-space: nowrap; }
.obligations__dash { color: var(--c-gold-deep); margin-inline: 0.5rem; }
.obligations__ref { font-family: var(--f-sans); font-weight: 500; font-size: var(--fs-sm); color: var(--c-gold-ink); }
@media (min-width: 1000px) {
  html.js:not(.reduce-motion) .obligations__list li { opacity: 0.55; }
  html.js:not(.reduce-motion) .obligations__list li.is-active { opacity: 1; }
}

/* ---------- Sayings (stacked cards) ---------- */
.sayings { position: relative; padding: var(--sp-5) 0 0; }
.sayings__head { text-align: center; margin-bottom: var(--sp-5); }
/* Nastaliq descends well past its line box, so the rule needs real clearance */
.sayings__head .orn { margin-top: clamp(2rem, 4vw, 3rem); }
.stack { position: relative; display: grid; --stack-top: calc(5rem + 4vh); padding-bottom: 28vh; }
.stack__card {
  position: sticky; top: calc(var(--stack-top) + var(--i, 0) * 1.4rem);
  display: grid; grid-template-rows: auto 1fr; gap: 1.25rem;
  width: min(100%, 52rem); min-height: 58vh; margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.35rem, 5vw, 4rem);
  background: linear-gradient(160deg, #15212a, #081416);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.stack__card::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px solid var(--hairline); border-radius: calc(var(--r-lg) - 8px); }
.stack__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(200, 167, 93, 0.14), transparent 70%);
}
.stack__card:nth-child(2) { --i: 1; }
.stack__card:nth-child(3) { --i: 2; }
.stack__card:nth-child(4) { --i: 3; }
.stack__card:nth-child(5) { --i: 4; }
.stack__card + .stack__card { margin-top: 24vh; }
.stack__card .num { --num-stroke: var(--c-gold); --num-fill: var(--c-emerald-2); }
.stack__quote {
  align-self: center; text-align: center;
  font-family: var(--f-serif); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); line-height: 1.95;
  color: #fff6e3; text-wrap: balance;
}
@media (max-width: 767px) {
  .stack { --stack-top: calc(4.5rem + 3vh); padding-bottom: 18vh; }
  .stack__card { min-height: 44vh; }
  .stack__card + .stack__card { margin-top: 16vh; }
}

/* ---------- Karamat (pinned quotations, scrolling signs) ---------- */
.karamat { padding: var(--sp-6) 0 var(--sp-7); }
.karamat__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 1000px) {
  .karamat__grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-7); align-items: start; }
  .karamat__pin { position: sticky; top: calc(6rem + 6vh); }
}
.karamat__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-2xl); line-height: 2; color: var(--c-gold-light); }
.karamat__lead { margin-top: var(--sp-2); color: var(--c-gold); font-weight: 500; }
.karamat__quotes { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.karamat__quotes blockquote {
  padding-inline-start: 1.4rem; border-inline-start: 1px solid var(--hairline-strong);
  font-family: var(--f-serif); font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem); line-height: 1.9;
  color: var(--t-1);
}
.karamat__body p { max-width: var(--measure-wide); color: var(--t-2); }
.karamat__body p + p { margin-top: var(--sp-3); }
.signs { display: grid; margin-top: var(--sp-4); }
.signs li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding: 1.3rem 0.9rem;
  margin-inline: -0.9rem;
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  transition: background-color 0.7s var(--e-out);
}
.signs li:hover { background-color: rgba(200, 167, 93, 0.055); }
.signs .num { margin-top: 0.3rem; }
.signs__text { font-family: var(--f-serif); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.9; color: var(--t-1); }

/* ---------- Closing (dawn) ---------- */
.closing {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: var(--sp-7) var(--gutter) var(--sp-6);
}
.closing__dawn {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 95% 55% at 50% 100%, rgba(200, 167, 93, 0.2), rgba(200, 167, 93, 0.05) 45%, transparent 72%),
    radial-gradient(ellipse 55% 35% at 50% 100%, rgba(233, 214, 160, 0.14), transparent 65%);
}
.closing__arch {
  position: absolute; left: 50%; bottom: -14vh; z-index: -1;
  height: 84vh; width: auto; transform: translateX(-50%);
  color: var(--c-gold);
  animation: breathe-soft 8s ease-in-out infinite alternate;
}
.closing__arch path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.closing__arch .arch-inner { opacity: 0.45; }
.closing__facts { display: grid; gap: var(--sp-4); max-width: 48rem; }
/* left to wrap naturally: the date reads better breaking at its comma
   than balanced, which strands the calendar separator on a new line */
.closing .fact dd { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); line-height: 1.85; }
.closing .fact--final dd {
  font-family: var(--f-display); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); line-height: 2;
  color: var(--c-gold-light);
}
.closing__orn { margin-top: var(--sp-5); }