/* ============================================================
   Parastoo — Earthen Sanctuary
   Design tokens, base, motion system, components, RTL
   ============================================================ */

:root {
  /* palette */
  --clay: #bf5f3a;          /* terracotta accent */
  --clay-dark: #9c4a28;
  --clay-deep: #7e3a1f;
  --clay-light: #d98c63;
  --gold: #cfa05a;          /* muted gold */
  --gold-bright: #e2bc7d;
  --cream: #f7f1e8;         /* page background */
  --cream-2: #efe5d6;
  --cream-3: #e7d9c4;
  --cocoa: #241811;         /* deep feature sections */
  --cocoa-2: #33231a;
  --cocoa-3: #46332a;
  --sage: #7e8c6c;          /* conscious-living green */
  --sage-light: #aab797;
  --sage-tint: #edefe4;
  --text: #2c1e15;
  --text-inv: #f7f1e8;
  --muted: #6f5d50;
  --muted-inv: #c9b8a6;
  --border: #e0d2bd;
  --border-dark: rgba(226, 188, 125, .18);

  /* type */
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Barlow', system-ui, sans-serif;
  --fa: 'Vazirmatn', 'Barlow', sans-serif;

  /* rhythm */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.45, 0, .15, 1);
  --shadow-soft: 0 2px 8px rgba(44, 30, 21, .06), 0 12px 32px rgba(44, 30, 21, .08);
  --shadow-lift: 0 4px 12px rgba(44, 30, 21, .08), 0 24px 48px rgba(44, 30, 21, .14);
  --radius: 4px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  font-size: 16.5px;
}
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 480;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 110, 'SOFT' 40;
}
img { display: block; max-width: 100%; }
::selection { background: var(--clay); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

/* Farsi: font swap; layout flip handled by [dir="rtl"] */
html[lang="fa"] body, html[lang="fa"] button, html[lang="fa"] input, html[lang="fa"] textarea { font-family: var(--fa); }
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4 {
  font-family: var(--fa); font-weight: 600; letter-spacing: 0; line-height: 1.35;
}
html[lang="fa"] .font-display { font-family: var(--fa); letter-spacing: 0; }
html[lang="fa"] .italic, html[lang="fa"] em { font-style: normal; }

/* film grain — tactile warmth over everything */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 80;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- typographic helpers ---------- */
.font-display { font-family: var(--serif); font-variation-settings: 'opsz' 130, 'SOFT' 50; }
.kicker {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--clay); font-weight: 600;
}
.kicker::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }
.kicker--center::after { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }
.kicker--gold { color: var(--gold); }
.lead { font-size: 1.16rem; font-weight: 300; line-height: 1.8; color: var(--muted); }
.on-dark .lead, .lead--inv { color: var(--muted-inv); }

/* animated underline links */
.link-line { position: relative; padding-bottom: 2px; }
.link-line::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: var(--tl-origin, left);
  transition: transform .45s var(--ease-out);
}
[dir="rtl"] .link-line::after { --tl-origin: right; }
.link-line:hover::after, .link-line:focus-visible::after { transform: scaleX(1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: 1.05rem 2.4rem; border-radius: 999px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              background-color .25s, color .25s, border-color .25s;
  min-height: 48px;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--clay); color: #fff; box-shadow: 0 8px 24px rgba(191, 95, 58, .35); }
.btn-primary:hover { background: var(--clay-dark); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(191, 95, 58, .4); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--clay); color: var(--clay); transform: translateY(-2px); }
.on-dark .btn-ghost, .btn-ghost--inv { border-color: var(--border-dark); color: var(--text-inv); }
.on-dark .btn-ghost:hover, .btn-ghost--inv:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ---------- scroll-reveal system ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal { transform: translateY(34px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
[dir="rtl"] .reveal-left { transform: translateX(40px); }
[dir="rtl"] .reveal-right { transform: translateX(-40px); }
.reveal-scale { transform: scale(.94); }
.is-visible { opacity: 1; transform: none; }

/* ---------- parallax bands ---------- */
.parallax { position: relative; overflow: hidden; }
.parallax__img {
  position: absolute; inset: -14% 0; width: 100%; height: 128%;
  object-fit: cover; will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .parallax__img {
    animation: parallax-rise linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes parallax-rise {
    from { transform: translateY(-7%); }
    to   { transform: translateY(7%); }
  }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
@supports (animation-timeline: scroll()) {
  .hero__bg, .hero__drift {
    animation: hero-drift linear both;
    animation-timeline: scroll();
    animation-range: 0 100svh;
  }
  @keyframes hero-drift {
    from { transform: translateY(0) scale(1.06); }
    to   { transform: translateY(9%) scale(1.12); }
  }
}

/* --- pillar scene stack (home hero) --- */
.hero__drift { position: absolute; inset: -10% 0; height: 120%; }
.hero__depth { position: absolute; inset: 0; will-change: transform;
  transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -10px), 0);
  transition: transform .6s var(--ease-soft); }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.hero__slide.is-active { opacity: 1; animation: slide-breathe 9s var(--ease-soft) both; }
@keyframes slide-breathe { from { transform: scale(1.0); } to { transform: scale(1.07); } }

/* --- aurora wash --- */
.hero__aurora { position: absolute; inset: -15%; pointer-events: none; opacity: .8;
  background:
    radial-gradient(42% 36% at 72% 24%, rgba(207,160,90,.20), transparent 65%),
    radial-gradient(38% 42% at 22% 72%, rgba(191,95,58,.22), transparent 65%),
    radial-gradient(30% 30% at 58% 84%, rgba(126,140,108,.20), transparent 65%);
  filter: blur(46px);
  animation: aurora-drift 16s ease-in-out infinite alternate; }
@keyframes aurora-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) rotate(-1.2deg) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) rotate(1.2deg) scale(1.06); }
}

/* --- drifting motes --- */
.mote { position: absolute; bottom: -3%; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,188,125,.9) 0%, rgba(226,188,125,0) 70%);
  opacity: 0; pointer-events: none;
  animation: mote-rise var(--mt, 16s) linear infinite; animation-delay: var(--md, 0s); }
@keyframes mote-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--mo, .5); }
  85% { opacity: var(--mo, .5); }
  100% { transform: translate3d(var(--mxs, 30px), -108svh, 0); opacity: 0; }
}

/* --- pillar word rotator --- */
.rotator { position: relative; display: block; height: 1.18em; overflow: hidden; }
.rotator .hr-word { position: absolute; inset-inline-start: 0; top: 0; width: 100%;
  white-space: nowrap; opacity: 0; transform: translateY(70%);
  filter: blur(8px); pointer-events: none;
  transition: opacity .65s var(--ease-out), transform .75s var(--ease-out), filter .65s var(--ease-out); }
.rotator .hr-word.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.rotator .hr-word.is-out { opacity: 0; transform: translateY(-65%); filter: blur(10px); }

/* --- pillar chips --- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { display: inline-flex; align-items: center; gap: .55rem;
  padding: .58rem 1.05rem; border-radius: 999px; min-height: 40px;
  border: 1px solid rgba(247,241,232,.28); color: rgba(247,241,232,.82);
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(36,24,17,.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease-out); }
.chip i { font-style: normal; font-family: var(--serif); font-size: .78rem; opacity: .6; }
.chip:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.chip.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }
.chip.is-active i { opacity: .85; }
[dir="rtl"] .chip { letter-spacing: .02em; }

/* --- hero pillar counter --- */
.hero__counter { position: absolute; bottom: 2.6rem; inset-inline-end: 3rem; z-index: 5;
  font-family: var(--serif); font-variation-settings: 'opsz' 144;
  font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: 1; font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px rgba(226,188,125,.55); }
html[lang="fa"] .hero__counter { -webkit-text-stroke: 0; color: rgba(226,188,125,.4); }

/* --- five paths (pillars) section --- */
.pillar-row { display: grid; grid-template-columns: 1fr; gap: .3rem;
  align-items: baseline; padding: 1.1rem 0;
  border-top: 1px solid var(--border); position: relative;
  transition: background-color .4s, padding-inline-start .4s var(--ease-out); }
.pillar-row:last-child { border-bottom: 1px solid var(--border); }
.pillar-row:hover { background: var(--sage-tint); padding-inline-start: 1rem; }
.pillar-row h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.15;
  transition: color .3s; }
.pillar-row:hover h3 { color: var(--clay); }
.pillar-row p { color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: 56ch; }
@media (min-width: 768px) {
  .pillar-row { grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 0 3rem; padding: 1.15rem .25rem; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 12, 7, .55), rgba(20, 12, 7, .25) 38%, rgba(36, 24, 17, .72) 100%),
    radial-gradient(120% 90% at 28% 60%, rgba(20, 12, 7, .5), transparent 60%);
}
/* masked line-by-line headline reveal */
.mask-line { display: block; overflow: hidden; }
.mask-line > span {
  display: block; transform: translateY(110%);
  animation: line-up 1.1s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes line-up { to { transform: translateY(0); } }
/* gold shimmer keyword */
.shimmer {
  background: linear-gradient(100deg, var(--gold-bright) 20%, #fff4dd 38%, var(--gold) 55%, var(--gold-bright) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer-slide 7s var(--ease-soft) infinite;
}
@keyframes shimmer-slide { 0%, 100% { background-position: 10% 0; } 50% { background-position: 90% 0; } }
.fade-up { opacity: 0; transform: translateY(26px); animation: fade-up 1.1s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes fade-up { to { opacity: 1; transform: none; } }
/* breathing sun mark + scroll cue */
.breathe { animation: breathe 6s ease-in-out infinite; transform-origin: center; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.scroll-cue { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 5; }
.scroll-cue span {
  display: block; width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(247, 241, 232, .8));
  animation: cue-drop 2.4s var(--ease-soft) infinite;
}
@keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* ---------- about page: moments wall ----------
   Full-viewport photo wall. Rows drift horizontally and wrap; tiles part around
   the pointer while the nearest one is pulled to it and lifted. Positions are
   written straight to transform by js/moments-wall.js on rAF, so there are no
   transitions on .mw-tile — a transition would fight the loop every frame. */
.moments-wall {
  position: relative;
  height: 100svh;
  min-height: 30rem;
  background: var(--cocoa);
  overflow: hidden;
  isolation: isolate;
}
.moments-wall__stage {
  position: absolute; inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  overflow: hidden;
}
.moments-wall__plane {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}
.mw-tile {
  position: absolute;
  top: 0; left: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cocoa-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  will-change: transform;
  /* The plane is a single compositing context; tiles must not create their own
     stacking surprises when lifted, so z-index is left to translate3d's z. */
}
.mw-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none; -webkit-user-drag: none;
  pointer-events: none;
}
/* Vignette so the wall sinks into the section edges rather than being cut off,
   and so the CTA below reads as the next thing rather than a hard stop. */
.moments-wall__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 120% 85% at 50% 45%, transparent 42%, rgba(36, 24, 17, .78) 100%),
    linear-gradient(to bottom, var(--cocoa) 0%, transparent 12%, transparent 88%, var(--cocoa) 100%);
}

/* Custom cursor, scoped to the section: the native cursor is only hidden while
   the pointer is actually over the wall (.is-live), never page-wide. */
.moments-wall.is-live { cursor: none; }
.moments-wall__cursor {
  position: absolute; top: 0; left: 0; z-index: 5;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
  mix-blend-mode: difference;
}
.moments-wall.is-live .moments-wall__cursor { opacity: 1; }
.moments-wall__cursor svg { width: 100%; height: 100%; }
.mw-ring { fill: none; stroke: rgba(247, 241, 232, .5); stroke-width: 1; }
.mw-dot { fill: var(--cream); }

.moments-wall__fallback { display: flex; gap: 1rem; padding: 2rem; }
.moments-wall__fallback img { width: 33%; height: auto; border-radius: var(--radius); }

/* Touch and reduced motion both get the drift only — no pointer parting, no
   custom cursor. Coarse pointers never set .is-live, so this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  .moments-wall__cursor { display: none; }
}
/* ---------- home hero portrait (full height, fades into the page) ----------
   Every dimension is a custom property so the hero can be retuned in one place. */
:root {
  --hero-h: 100svh;        /* section height                     */
  --hero-fig-w: 58%;       /* image box width, desktop           */
  --hero-fig-w-sm: 68%;    /* image box width, tablet            */
  --hero-fade-a: 0%;       /* image is fully transparent until   */
  --hero-fade-b: 40%;      /* image is fully opaque from         */
  --hero-obj-x: 52%;       /* focal point within the photo       */
  --hero-obj-y: 28%;
}
.hero-section { min-height: var(--hero-h); }
.hero-figure { width: 100%; }
@media (min-width: 640px) { .hero-figure { width: var(--hero-fig-w-sm); } }
@media (min-width: 768px) { .hero-figure { width: var(--hero-fig-w); } }
.hero-portrait {
  object-position: var(--hero-obj-x) var(--hero-obj-y);
  --hero-fade-mid: calc(var(--hero-fade-a) + (var(--hero-fade-b) - var(--hero-fade-a)) * .35);
  --hero-fade: linear-gradient(to right, transparent var(--hero-fade-a),
                               rgba(0,0,0,.35) var(--hero-fade-mid), #000 var(--hero-fade-b));
  -webkit-mask-image: var(--hero-fade), linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: var(--hero-fade), linear-gradient(to bottom, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
[dir="rtl"] .hero-portrait {
  --hero-fade: linear-gradient(to left, transparent var(--hero-fade-a),
                               rgba(0,0,0,.35) var(--hero-fade-mid), #000 var(--hero-fade-b));
}

/* ---------- about story: portrait behind the copy, drifting on scroll --------
   The photo backs the whole section and the copy runs over it in two columns.
   It is scaled to fit entirely inside the section — max-width/max-height with
   auto width and height, so whichever dimension binds, the whole frame shows
   and it can never overflow and clip. max-height stops short of the full
   section so the parallax drift has somewhere to travel without being cut off
   at the top and bottom. Its side edges fade into the section colour, and a
   scrim over the whole section keeps the copy readable. */
/* No overflow:hidden — the photo is sized to fit inside the section so nothing
   escapes, and clipping here would make the section a scroll container, which
   would leave the drift's view() timeline measuring against the section instead
   of the page and never advancing. */
.story-section { position: relative; isolation: isolate; }
/* Scrim over the photo but under the copy. On the section rather than on
   .story-bg, so it still covers the parts of the section the photo's own fade
   has left bare. */
.story-section::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(36, 24, 17, .93) 0%, rgba(36, 24, 17, .78) 28%,
                              rgba(36, 24, 17, .78) 72%, rgba(36, 24, 17, .93) 100%);
}
.story-bg {
  position: absolute; inset: 0; margin: auto; z-index: 0;
  width: auto; height: auto; max-width: 100%; max-height: 92%;
  object-fit: contain; will-change: transform;
  --story-edge: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: var(--story-edge);
  mask-image: var(--story-edge);
}
/* Parallax, same idiom as .parallax__img: the drift is driven by the element's
   own progress through the viewport, with js/site.js covering browsers that
   have no scroll timelines. The travel (±4%) stays inside the 8% of headroom
   max-height leaves above and below, so no edge is ever exposed or clipped. */
@supports (animation-timeline: scroll()) {
  .story-bg {
    animation: story-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes story-drift {
    from { transform: translateY(-4%); }
    to   { transform: translateY(4%); }
  }
}
.story-flow > p { margin: 0 0 1.25rem; break-inside: avoid; }
.story-flow > p:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .story-flow { columns: 2; column-gap: 4rem; }
}
@media (min-width: 1280px) {
  .story-flow { column-gap: 5rem; }
}

/* ---------- word ribbon (marquee) ---------- */
.ribbon { overflow: hidden; white-space: nowrap; user-select: none; }
.ribbon__track { display: inline-flex; gap: 0; animation: ribbon-scroll 36s linear infinite; }
[dir="rtl"] .ribbon__track { animation-name: ribbon-scroll-rtl; }
.ribbon__track > span {
  display: inline-flex; align-items: center; gap: 2rem; padding-inline-end: 2rem;
  font-family: var(--serif); font-variation-settings: 'opsz' 130;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem); font-weight: 400; font-style: italic;
  color: var(--cream-3);
}
.ribbon__track .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: .7; flex: none; }
@keyframes ribbon-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ribbon-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- chakana divider ---------- */
.chakana { display: flex; align-items: center; justify-content: center; gap: 1.2rem; color: var(--gold); }
.chakana::before, .chakana::after { content: ''; height: 1px; width: min(120px, 18vw); background: currentColor; opacity: .45; }

/* ---------- cards ---------- */
.card {
  background: #fffdf9; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card__media { overflow: hidden; }
.card__media img { transition: transform 1.2s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.num-ghost {
  font-family: var(--serif); font-variation-settings: 'opsz' 144;
  font-size: clamp(4.5rem, 9vw, 7rem); line-height: 1; font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px var(--clay-light);
  opacity: .55;
}
html[lang="fa"] .num-ghost { -webkit-text-stroke: 0; color: var(--clay-light); opacity: .4; }

/* ---------- dark sections ---------- */
.on-dark { background: var(--cocoa); color: var(--text-inv); }
.on-dark ::selection { background: var(--gold); color: var(--cocoa); }

/* ---------- nav ---------- */
#navbar { transition: background-color .35s, box-shadow .35s, backdrop-filter .35s; }
#navbar.nav-scrolled {
  background: rgba(247, 241, 232, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(44, 30, 21, .06);
}
#navbar.nav-scrolled .nav-ink { color: var(--text); }
#navbar.nav-scrolled .lang-pill { border-color: var(--border); }
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; inset-inline: 12px; bottom: 4px; height: 1px;
  background: var(--clay); transform: scaleX(0); transition: transform .35s var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--clay); }
.lang-btn { min-width: 34px; min-height: 34px; border-radius: 999px; transition: background-color .25s, color .25s; }
.lang-btn[aria-pressed="true"] { background: var(--clay); color: #fff; }
#mobileMenu a { padding: .85rem 0; border-bottom: 1px solid var(--border); }

/* ---------- forms ---------- */
.field input, .field textarea {
  width: 100%; background: #fffdf9; border: 1px solid var(--border); border-radius: var(--radius);
  padding: .95rem 1.1rem; font-size: 1rem; color: var(--text);
  transition: border-color .25s, box-shadow .25s; min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(191, 95, 58, .14); }
.field label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }

/* ---------- about page: values constellation ----------
   Ten values fanned around the section's statement. Two columns of five rather
   than a true ring: label widths change with the language, and a ring puts the
   longest labels ("Trauma-Informed Care", "Conscious Living") through the
   narrowest part of the layout. The connector lines, drawn in
   js/values-constellation.js, carry the radial reading instead.

   The markup is ten native <details>. Everything below the min-width query is
   the spine layout, which is also exactly what a JS-less browser gets at any
   width. .is-enhanced is added by the script and the fan only exists inside it,
   so the diagram can never be the thing that breaks the section.

   Direction is handled entirely by logical properties and by grid following the
   writing mode, so Farsi mirrors without a single [dir="rtl"] override here. */

.constellation { position: relative; max-width: 1060px; margin-inline: auto; }
.constellation__lines { display: none; }

/* --- the statement at the head of the spine --- */
.constellation__core { margin-bottom: 2.6rem; }
.constellation__statement { font-size: clamp(1.9rem, 6.4vw, 2.5rem); }
.constellation__detail { display: none; }

/* --- the spine and its branches --- */
.constellation__item { position: relative; padding-inline-start: 1.8rem; }
.constellation__item::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 1px; background: var(--border);
}
.constellation__item:last-of-type::before { inset-block-end: auto; height: 1.9rem; }

.constellation__node {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 0;
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 480; font-size: 1.2rem; line-height: 1.3;
  color: var(--text);
  transition: color .35s var(--ease-out);
}
.constellation__node::-webkit-details-marker { display: none; }

/* the horizontal stub reaching back to the spine */
.constellation__node::before {
  content: ""; flex: none; width: 1.15rem; height: 1px;
  margin-inline: -1.8rem .35rem;
  background: var(--clay); opacity: .55;
  transition: opacity .35s var(--ease-out);
}
/* the open/closed caret */
.constellation__node::after {
  content: ""; flex: none; margin-inline-start: auto;
  width: 8px; height: 8px;
  border-inline-end: 1.5px solid var(--clay); border-block-end: 1.5px solid var(--clay);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .35s var(--ease-out);
}
.constellation__item[open] .constellation__node::after { transform: translateY(1px) rotate(-135deg); }
.constellation__item[open] .constellation__node { color: var(--clay-dark); }
.constellation__node:hover { color: var(--clay-dark); }
.constellation__node:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

.constellation__panel { padding: 0 0 1.4rem; }
.constellation__panel p {
  font-size: .95rem; line-height: 1.75; color: var(--muted); max-width: 48ch;
}

/* --- wide: the fan --- */
@media (min-width: 900px) {
  .constellation.is-enhanced {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 372px) 1fr;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    column-gap: clamp(1.4rem, 4vw, 3.6rem);
    align-items: center;
    min-height: 34rem;
  }

  .constellation.is-enhanced .constellation__lines {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; pointer-events: none; overflow: visible;
  }
  .constellation.is-enhanced .constellation__lines path {
    fill: none; stroke: var(--clay); stroke-width: 1; opacity: .22;
    transition: opacity .4s var(--ease-out), stroke-width .4s var(--ease-out);
  }
  .constellation.is-enhanced .constellation__lines path.is-active {
    opacity: .8; stroke-width: 1.5;
  }

  /* Out of flow inside its grid area, so a long description never resizes the
     rows the branches sit on. Both lines have to be explicit: an absolutely
     positioned grid child resolves an `auto` end line to the container's
     padding edge, not to a single track. */
  .constellation.is-enhanced .constellation__core {
    position: absolute; grid-column: 2 / 3; grid-row: 1 / -1; inset: 0;
    margin: 0; padding: 2.2rem 1.7rem;
    display: grid; align-content: center;
    text-align: center;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: color-mix(in srgb, var(--cream) 62%, transparent);
    overflow-y: auto;
  }
  .constellation.is-enhanced .constellation__core > * { grid-area: 1 / 1; align-self: center; }

  .constellation.is-enhanced .constellation__statement {
    font-size: clamp(1.65rem, 2.5vw, 2.2rem);
    transition: opacity .4s var(--ease-out);
  }
  .constellation.is-enhanced .constellation__detail {
    display: block; opacity: 0; transition: opacity .4s var(--ease-out);
  }
  .constellation.is-enhanced.is-open .constellation__statement { opacity: 0; }
  .constellation.is-enhanced.is-open .constellation__detail { opacity: 1; }

  .constellation.is-enhanced .constellation__detail-name {
    font-family: var(--serif); font-size: 1.3rem; line-height: 1.2;
    color: var(--clay-dark); margin-bottom: .85rem;
  }
  .constellation.is-enhanced .constellation__detail-desc {
    font-size: .92rem; line-height: 1.75; color: var(--muted);
  }

  /* branches: five each side, arcing so the middle rows sit furthest out */
  .constellation.is-enhanced .constellation__item { padding-inline-start: 0; }
  .constellation.is-enhanced .constellation__item::before { display: none; }
  .constellation.is-enhanced .constellation__panel { display: none; }

  .constellation.is-enhanced .constellation__item:nth-of-type(-n+5) {
    grid-column: 1; justify-self: end; text-align: end; margin-inline-end: var(--arc, 0px);
  }
  .constellation.is-enhanced .constellation__item:nth-of-type(n+6) {
    grid-column: 3; justify-self: start; text-align: start; margin-inline-start: var(--arc, 0px);
  }
  .constellation.is-enhanced .constellation__item:nth-of-type(1),
  .constellation.is-enhanced .constellation__item:nth-of-type(6)  { grid-row: 1; --arc: 0px; }
  .constellation.is-enhanced .constellation__item:nth-of-type(2),
  .constellation.is-enhanced .constellation__item:nth-of-type(7)  { grid-row: 2; --arc: clamp(.5rem, 1.6vw, 1.5rem); }
  .constellation.is-enhanced .constellation__item:nth-of-type(3),
  .constellation.is-enhanced .constellation__item:nth-of-type(8)  { grid-row: 3; --arc: clamp(1rem, 3vw, 2.8rem); }
  .constellation.is-enhanced .constellation__item:nth-of-type(4),
  .constellation.is-enhanced .constellation__item:nth-of-type(9)  { grid-row: 4; --arc: clamp(.5rem, 1.6vw, 1.5rem); }
  .constellation.is-enhanced .constellation__item:nth-of-type(5),
  .constellation.is-enhanced .constellation__item:nth-of-type(10) { grid-row: 5; --arc: 0px; }

  .constellation.is-enhanced .constellation__node {
    display: inline-flex; padding: .4rem 0; gap: .65rem;
    font-size: clamp(1rem, 1.45vw, 1.28rem);
    color: var(--muted);
  }
  .constellation.is-enhanced .constellation__node::after { display: none; }

  /* the stub becomes the dot the connector line attaches to */
  .constellation.is-enhanced .constellation__node::before {
    width: 7px; height: 7px; margin-inline: 0; border-radius: 50%;
    border: 1px solid var(--clay); background: transparent; opacity: 1;
    transition: background .35s var(--ease-out), transform .35s var(--ease-out);
  }
  .constellation.is-enhanced .constellation__item:nth-of-type(-n+5) .constellation__node::before { order: 2; }

  .constellation.is-enhanced .constellation__item.is-active .constellation__node { color: var(--clay-dark); }
  .constellation.is-enhanced .constellation__item.is-active .constellation__node::before {
    background: var(--clay); transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .constellation__node, .constellation__node::before, .constellation__node::after,
  .constellation__statement, .constellation__detail, .constellation__lines path {
    transition: none !important;
  }
}

/* ---------- RTL fine-tuning ---------- */
[dir="rtl"] .flip-x { transform: scaleX(-1); }
[dir="rtl"] .kicker { letter-spacing: .06em; }
[dir="rtl"] .btn, [dir="rtl"] .nav-link, [dir="rtl"] .field label { letter-spacing: .02em; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mask-line > span { transform: none; animation: none; }
  .fade-up { opacity: 1; transform: none; animation: none; }
  .parallax__img, .hero__bg, .hero__drift, .story-bg, .hero__slide.is-active { animation: none !important; transform: none !important; }
  .ribbon__track, .breathe, .shimmer, .scroll-cue span, .hero__aurora, .mote { animation: none !important; }
  .mote { display: none; }
  .hero__depth { transform: none !important; transition: none; }
  .rotator .hr-word { transition: none; filter: none; }
  .card, .card__media img, .btn, .pillar-row, .chip { transition: none; }
}