/* ==========================================================================
   Yujverse — ELEVATE
   Editorial weight, atmosphere, and depth. Loaded last; overrides for polish.
   ========================================================================== */

/* ---------------- Film grain (tactile premium depth) ----------------
   NOTE: no mix-blend-mode — blending a fixed full-viewport layer forces the
   browser to re-composite the whole screen every scroll frame (jank). A plain
   low-opacity fixed layer stays on its own GPU layer and is cheap to scroll. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .04;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: .03; } }

/* ---------------- Typography — bigger, more confident ---------------- */
:root {
  --fs-display: clamp(2.8rem, 1.6rem + 4.4vw, 6rem);
  --fs-h1:      clamp(2.4rem, 1.6rem + 3vw, 4.2rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --fs-h3:      clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  --fs-lead:    clamp(1.12rem, 1rem + .5vw, 1.4rem);
}
h1, h2 { letter-spacing: -.02em; line-height: 1.02; }
.section-head h2 { letter-spacing: -.025em; }
.kicker { font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); }
.eyebrow { letter-spacing: .28em; font-size: .78rem; }
.lead { font-size: var(--fs-lead); line-height: 1.6; }

/* Editorial section header: oversized index number + hairline */
.section-head { position: relative; }
.section-head.center { max-width: 940px; }
.section-head .lead { color: var(--ink-soft); }
.section--dark .section-head .lead { color: var(--on-dark-mute); }

/* A hairline rule motif under eyebrows in headers */
.section-head .eyebrow::after {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .5; margin-left: .2rem;
}

/* ---------------- Section rhythm + atmosphere ---------------- */
.section { position: relative; }
/* Soft radial light bloom top of light sections for depth */
.section:not(.section--dark):not(.section--cta)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%);
  opacity: .5;
}
.section > .container { position: relative; z-index: 1; }

/* Richer dark sections — deeper, with a subtle gold vignette */
.section--dark, .breathe {
  background:
    radial-gradient(80% 60% at 50% 18%, color-mix(in srgb, var(--brick) 30%, transparent), transparent 60%),
    radial-gradient(50% 50% at 80% 90%, color-mix(in srgb, var(--teal-deep) 22%, transparent), transparent 70%),
    linear-gradient(165deg, #1b0f09, #2a160d) !important;
}

/* ---------------- Cards — editorial, less generic box ---------------- */
.card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-xs);
}
.card:hover { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-lg); border-color: color-mix(in srgb, var(--clay) 60%, transparent); }
.card__icon {
  background: linear-gradient(150deg, color-mix(in srgb, var(--mint) 22%, transparent), color-mix(in srgb, var(--gold) 26%, transparent));
  color: var(--teal-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.card__title { font-family: var(--font-serif); letter-spacing: -.01em; }

/* Value cards get a quiet index number + top accent on hover */
.values__grid { counter-reset: val; }
.value-card { padding-top: 2.4rem; }
.value-card::before {
  counter-increment: val; content: "0" counter(val);
  position: absolute; top: 1rem; left: 1.3rem; font-family: var(--font-display);
  font-size: 1.1rem; color: var(--clay); letter-spacing: .05em; opacity: .8; z-index: 2;
}
.value-card { border-top: 2px solid transparent; transition: border-color .4s var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.value-card:hover { border-top-color: var(--brick); }

/* Program cards — editorial list feel */
.program-card { border-left: 2px solid color-mix(in srgb, var(--clay) 45%, transparent); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.program-card:hover { border-left-color: var(--brick); }

/* ---------------- Buttons — more presence ---------------- */
.btn { letter-spacing: .04em; padding-block: 1rem; }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.02rem; }
.btn--primary { box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--brick) 70%, transparent); }

/* ---------------- Number-anchor + num-anchor drama ---------------- */
.num-anchor { font-size: clamp(2.4rem, 1.6rem + 2.5vw, 3.6rem); opacity: .25; }

/* ---------------- Numbers section — luxe ---------------- */
.stat-num__value { letter-spacing: -.02em; text-shadow: 0 0 50px color-mix(in srgb, var(--gold) 50%, transparent); }
.stat-num { position: relative; }
.numbers__grid .stat-num + .stat-num::before {
  content: ""; position: absolute; left: -1px; top: 10%; height: 80%; width: 1px;
  background: linear-gradient(transparent, rgba(255,255,255,.16), transparent);
}

/* ---------------- Founder / About images — refined frame ---------------- */
.founder__media img, .about-split__media img, .founder-block__photo {
  box-shadow: var(--shadow-lg); outline: 1px solid var(--line); outline-offset: -1px;
}

/* ---------------- Footer — richer ---------------- */
.footer { background: radial-gradient(70% 80% at 20% 0%, color-mix(in srgb, var(--brick) 26%, transparent), transparent 60%), linear-gradient(165deg, #1b0f09, #160c06); }

/* ==========================================================================
   HERO v2 — editorial "magazine cover": big type + framed brand film
   ========================================================================== */
.hero {
  min-height: 100svh; display: block; text-align: left;
  background:
    radial-gradient(70% 55% at 78% 35%, var(--gold-soft) 0%, transparent 55%),
    radial-gradient(50% 50% at 12% 80%, color-mix(in srgb, var(--mint) 14%, transparent), transparent 60%),
    linear-gradient(180deg, #fdf8ee 0%, var(--cream-bg) 100%);
  padding-top: var(--nav-h);
}
/* Editorial top line */
.hero__topline {
  position: absolute; top: calc(var(--nav-h) + .4rem); left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-accent); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-mute);
}
.hero__topline .l { color: var(--brick); }

.hero__grid {
  min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center;
  grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 3rem;
}
.hero__lead { max-width: 640px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; position: static; background: none; backdrop-filter: none; padding: 0;
  font-family: var(--font-accent); letter-spacing: .26em; text-transform: uppercase; font-size: .8rem; color: var(--brick);
}
.hero__eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--brick); opacity: .6; }
.hero__title {
  font-family: var(--font-display); color: var(--ink);
  font-size: var(--fs-display); line-height: .98; letter-spacing: -.03em;
  margin: 1.2rem 0 0;
}
.hero__title em { font-family: var(--font-serif); font-style: italic; color: var(--brick);
  background: linear-gradient(120deg, var(--brick), var(--terracotta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* italic glyphs overhang their box; without this the gradient-clip cuts the
     final letter's right edge. Pad the box, compensate spacing with margin. */
  display: inline-block; padding-right: .14em; margin-right: -.1em; }
.hero__sub { margin: 1.6rem 0 2.2rem; max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-soft); }
.hero__actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.hero__watch { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--ink); }
.hero__watch .play { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--brick); display: grid; place-items: center; color: var(--brick); transition: all var(--dur) var(--ease-out); }
.hero__watch:hover .play { background: var(--brick); color: var(--cream); }

/* The framed brand film (right) */
.hero__film { position: relative; }
.hero__film-inner {
  position: relative; aspect-ratio: 4/5; border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); outline: 1px solid var(--line);
  background: #f4f1ec; max-width: 460px; margin-left: auto;
}
.hero__film-inner video, .hero__film-inner img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__film::before {
  content: ""; position: absolute; inset: -8% -8% auto auto; width: 70%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 55%, transparent), transparent 60%); filter: blur(10px);
}
.hero__film-cap {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--font-accent); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brick); background: color-mix(in srgb, var(--cream) 85%, transparent); padding: .3rem .9rem; border-radius: var(--radius-full); backdrop-filter: blur(4px);
}

.hero__cue {
  position: absolute; bottom: 20px; left: 0; right: auto;
}
.hero__cue { left: var(--gutter); transform: none; }

@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero__grid {
    grid-template-columns: 1fr; text-align: center; gap: 2rem;
    min-height: 0; align-items: start;
    padding-block: clamp(3.5rem, 3rem + 4vw, 5rem) 3rem;
  }
  .hero__lead { max-width: 100%; margin-inline: auto; }
  .hero__eyebrow { justify-content: center; }
  .hero__actions { justify-content: center; }
  .hero__film-inner { aspect-ratio: 4/5; max-width: 320px; margin-inline: auto; }
  .hero__topline { display: none; }
  .hero__cue { display: none; }
}

/* ---------------- Breathe stage: mandala concentric with the circle ----------------
   Stage = the mandala's square, centered on the page; the circle is centred inside it.
   No translate math → mandala and circle share the exact same center. */
.breathe__stage {
  position: relative; width: min(560px, 82vw); aspect-ratio: 1;
  margin: 1.8rem auto; display: grid; place-items: center;
}
.breathe__stage .mandala {
  position: absolute; inset: 0; top: 0; left: 0; transform: none;
  width: 100%; height: 100%; aspect-ratio: auto; pointer-events: none; z-index: 0;
}
.breathe__stage .breathe__circle { margin: 0; position: relative; z-index: 1; }

/* ---------------- Perf: drop per-frame backdrop blur on the scrolled nav ---------------- */
.nav.is-solid {
  background: color-mix(in srgb, var(--cream-bg) 97%, white);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------------- Anchor jumps clear the fixed navbar ---------------- */
section[id], [data-section], [id="intro"], [id="founder"] { scroll-margin-top: calc(var(--nav-h) + 14px); }