/* =========================================================================
   AARUNYA — UNIFIED EDITORIAL DESIGN SYSTEM (v8)
   One brand. One typographic voice. One motion language.

   This file is loaded LAST on every page. It intentionally
   re-declares the CSS custom properties used across the legacy
   stylesheets (style.css, inner.css, aarunya-home-v2.css,
   journey.css, aarunya-compact-preview.css) so that every existing
   page inherits one consistent palette and type system without
   requiring a full markup rewrite. It also neutralises the old
   "sunrise" decorative layer and replaces it with a restrained,
   premium motion system modelled on the reference site's rhythm:
   generous whitespace, oversized editorial type, quiet reveals.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* ---- Core palette (single source of truth) ---- */
  --a-ink:#182018;
  --a-forest:#1c2a1e;
  --a-green:#33452f;
  --a-green-soft:#5b6a52;
  --a-sage:#8a9880;
  --a-gold:#b6863a;
  --a-gold-light:#dab873;
  --a-gold-dark:#8a6127;
  --a-cream:#f7f2e5;
  --a-paper:#fffdf8;
  --a-line:rgba(24,32,24,.13);
  --a-muted:#666f60;

  --a-display:'Manrope',sans-serif;
  --a-body:'DM Sans',sans-serif;

  --a-ease:cubic-bezier(.22,1,.36,1);
  --a-fast:420ms;
  --a-slow:820ms;

  /* ---- Re-map every legacy token name used across the codebase ---- */
  --forest:var(--a-forest);
  --green:var(--a-green);
  --green-soft:var(--a-green-soft);
  --gold:var(--a-gold);
  --gold-light:var(--a-gold-light);
  --gold-dark:var(--a-gold-dark);
  --cream:var(--a-cream);
  --paper:var(--a-paper);
  --ink:var(--a-ink);
  --muted:var(--a-muted);
  --line:var(--a-line);
  --display:var(--a-display);
  --body:var(--a-body);
  --script:var(--a-display);

  /* inner.css token names */
  --deep:var(--a-forest);
  --orange:var(--a-gold);
  --soft:var(--a-cream);

  /* sunrise/v7 leftover token names — flattened to brand palette */
  --sunrise-orange:var(--a-gold);
  --sunrise-coral:var(--a-gold-dark);
  --sunrise-yellow:var(--a-gold-light);
  --sunrise-peach:var(--a-cream);
  --sunrise-cream:var(--a-cream);
  --sunrise-mint:var(--a-cream);
  --sunrise-sky:var(--a-cream);
  --aurunya-green:var(--a-forest);
  --aurunya-ink:var(--a-ink);
  --aurunya-soft:var(--a-cream);
  --aurunya-line:var(--a-line);
  --v7-ink:var(--a-ink);
  --v7-ink-2:var(--a-forest);
  --v7-orange:var(--a-gold);
  --v7-coral:var(--a-gold-dark);
  --v7-gold:var(--a-gold-light);
  --v7-cream:var(--a-cream);
  --v7-paper:var(--a-paper);
  --v7-mint:var(--a-cream);
  --v7-sky:var(--a-cream);
  --v7-lilac:var(--a-cream);
  --v7-line:var(--a-line);
}

/* =========================================================================
   0. RESET THE OLD DECORATIVE LAYER
   Kill the busy radial-gradient washes, rotating orbits, marquees and
   noise textures so the page can breathe the way the reference site does.
   ========================================================================= */
body::before,body::after,
.page-hero::before,.inner-intro::before,.page-intro::before,
.subpage-hero::before,.chapter-intro::before,
.aurunya-section-marker,.aurunya-marquee,.aurunya-orbit,
.aurunya-scroll-progress,.aurunya-page-wash{
  content:none !important;
  display:none !important;
}
html{scroll-behavior:smooth !important;}
body{
  background:var(--a-cream) !important;
  background-image:none !important;
  color:var(--a-ink);
  font-family:var(--a-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
*{outline-offset:3px}
::selection{background:var(--a-gold);color:#fff}

/* =========================================================================
   1. TYPOGRAPHY NORMALISATION
   Editorial, oversized, restrained — Manrope for display, DM Sans for body.
   ========================================================================= */
h1,h2,h3,h4,
.page-hero h1,.inner-intro h1,.page-intro h1,.subpage-hero h1,.chapter-intro h1,
.section-title,.section-title h2,.section-header h2,.section-heading h2,
.eyebrow,.script,.journey-kicker,.journey-link strong,.journey-center strong{
  font-family:var(--a-display) !important;
  letter-spacing:-.01em;
}
.script,.journey-center strong{font-weight:600 !important;letter-spacing:-.01em;font-style:normal !important}
h1,.page-hero h1{font-weight:700 !important;letter-spacing:-.03em !important;}
h2,.section-title,.section-title h2{font-weight:700 !important;letter-spacing:-.025em !important;}
h3{font-weight:700 !important;}
p,li,a,span,div{font-family:var(--a-body);}
.eyebrow,.journey-kicker,.section-label{
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  font-size:.76rem !important;
}
em{font-style:italic;color:var(--a-gold-dark);}
.page-hero h1 em:not(.script-accent),.hero h1 em:not(.script-accent),.about-page .about-hero h1 em:not(.script-accent),.friend-hero h1 span{
  color:var(--a-gold-dark) !important;text-shadow:none !important;
}
a{color:inherit}

/* =========================================================================
   2. LAYOUT / SECTION RHYTHM
   ========================================================================= */
main,section,.section,.section-i{position:relative;}
.section,.section-i{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(72px,9vw,140px);}

/* =========================================================================
   3. HEADER / NAVIGATION — minimal, sticky, generous spacing
   ========================================================================= */
.site-header,.inner-nav{
  background:rgba(247,242,229,.86) !important;
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--a-line) !important;
  box-shadow:none !important;
  transition:background var(--a-fast) var(--a-ease),box-shadow var(--a-fast) var(--a-ease);
}
.site-header.scrolled,.site-header.is-scrolled,.inner-nav.scrolled{
  background:rgba(247,242,229,.97) !important;
  box-shadow:0 8px 30px rgba(24,32,24,.06) !important;
}
.inner-nav{padding:18px clamp(22px,5vw,64px) !important;}
.inner-logo{width:132px !important;height:auto !important;transition:opacity var(--a-fast) var(--a-ease);}
.desktop-nav a,.inner-navlinks a{
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.02em;
  position:relative;
}
.desktop-nav a::after,.inner-navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--a-gold-dark);transform:scaleX(0);transform-origin:right;
  transition:transform var(--a-fast) var(--a-ease);
}
.desktop-nav a:hover::after,.inner-navlinks a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav-pill,.nav-button{
  background:var(--a-forest) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:11px 20px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  box-shadow:none !important;
  transition:transform var(--a-fast) var(--a-ease),background var(--a-fast) var(--a-ease) !important;
}
.nav-pill:hover,.nav-button:hover{background:var(--a-gold-dark) !important;transform:translateY(-2px) !important;}

/* Hide legacy inner-nav mobile display:none so our JS-built menu can take over */
@media(max-width:850px){
  .inner-navlinks{display:none !important;}
}

/* =========================================================================
   4. MOBILE MENU — full-screen, animated, works for every page
   Built by aarunya-system.js from whichever nav links exist on the page.
   ========================================================================= */
.a-menu-toggle{
  display:none;
  width:44px;height:44px;
  border:none;background:none;cursor:pointer;
  position:relative;z-index:210;
  align-items:center;justify-content:center;
}
.a-menu-toggle span{
  position:absolute;left:10px;right:10px;height:2px;background:var(--a-ink);
  transition:transform var(--a-fast) var(--a-ease),opacity var(--a-fast) var(--a-ease);
}
.a-menu-toggle span:nth-child(1){top:16px}
.a-menu-toggle span:nth-child(2){top:24px}
.a-menu-toggle span:nth-child(3){top:32px}
.a-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.a-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.a-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.a-mobile-menu{
  position:fixed;inset:0;z-index:200;
  background:var(--a-forest);
  display:flex;flex-direction:column;
  justify-content:center;
  padding:100px clamp(28px,8vw,60px) 60px;
  transform:translateY(-100%);
  transition:transform var(--a-slow) var(--a-ease);
  visibility:hidden;
}
.a-mobile-menu.is-open{transform:translateY(0);visibility:visible;}
.a-mobile-menu nav{display:flex;flex-direction:column;gap:6px;}
.a-mobile-menu nav a{
  color:#fbf7ec;
  font-family:var(--a-display);
  font-weight:700;
  font-size:clamp(2rem,9vw,3.1rem);
  letter-spacing:-.02em;
  padding:12px 0;
  border-bottom:1px solid rgba(251,247,236,.12);
  opacity:0;transform:translateY(16px);
  transition:opacity var(--a-fast) var(--a-ease),transform var(--a-fast) var(--a-ease),color var(--a-fast) var(--a-ease);
}
.a-mobile-menu.is-open nav a{opacity:1;transform:translateY(0);}
.a-mobile-menu nav a:hover{color:var(--a-gold-light);}
.a-mobile-menu .a-mobile-cta{
  margin-top:28px;display:inline-flex;align-self:flex-start;
  background:var(--a-gold);color:#1c1204;font-weight:700;
  padding:15px 26px;border-radius:999px;font-family:var(--a-body);
  opacity:0;transform:translateY(16px);
  transition:opacity var(--a-fast) var(--a-ease) .05s,transform var(--a-fast) var(--a-ease) .05s;
}
.a-mobile-menu.is-open .a-mobile-cta{opacity:1;transform:translateY(0);}
.a-mobile-menu-close{
  position:absolute;top:26px;right:clamp(22px,6vw,56px);
  color:#fbf7ec;font-family:var(--a-display);font-weight:700;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;background:none;border:none;cursor:pointer;
}
@media(max-width:850px){
  .a-menu-toggle{display:inline-flex;}
}

/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.button,.btn-i,.button-gold,.button-green{
  border-radius:999px !important;
  font-weight:700 !important;
  transition:transform var(--a-fast) var(--a-ease),box-shadow var(--a-fast) var(--a-ease) !important;
  box-shadow:none !important;
}
.button:hover,.btn-i:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(24,32,24,.16) !important;}
.button-gold,.button.button-gold{background:var(--a-gold) !important;color:#1c1204 !important;}
.button-green,.btn-i{background:var(--a-forest) !important;color:#fff !important;}
.btn-i.orange{background:var(--a-gold-dark) !important;}

/* =========================================================================
   6. CARD / GRID SURFACES — quiet hover, no neon glow
   ========================================================================= */
.card,.belief,.feature-card,.timeline-card,.join-card,.initiative-card,
.friend-card,.impact-card,.value-card,.pathway,.record-funding-item,
.story,.principle,.pillar,.path-card,.six,.choice,.experience,.action-card{
  box-shadow:none !important;
  border-color:var(--a-line) !important;
  transition:transform var(--a-fast) var(--a-ease),box-shadow var(--a-fast) var(--a-ease),background var(--a-fast) var(--a-ease) !important;
}
.card:hover,.belief:hover,.pillar:hover,.path-card:hover,.principle:hover{
  box-shadow:0 20px 46px rgba(24,32,24,.10) !important;
  border-color:var(--a-line) !important;
}

/* =========================================================================
   7. SCROLL-REVEAL UTILITY (paired with aarunya-system.js)
   ========================================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--a-slow) var(--a-ease),transform var(--a-slow) var(--a-ease);
}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal="fade"]{transform:none;}
[data-reveal="scale"]{transform:scale(.96);}
[data-reveal="scale"].is-visible{transform:scale(1);}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* image reveal / hover scale utility used throughout new markup */
.a-media{overflow:hidden;display:block;position:relative;}
.a-media img,.a-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--a-ease);
}
.a-media:hover img,.a-media:hover video{transform:scale(1.05);}

/* =========================================================================
   8. FOOTER
   ========================================================================= */
.site-footer,.footer-i{background:var(--a-forest) !important;color:#f2ede0 !important;}
.footer-i a,.footer-links a{color:#f2ede0 !important;opacity:.85}
.footer-i a:hover,.footer-links a:hover{opacity:1;color:var(--a-gold-light) !important;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important;}
}