/* =========================================================================
   AARUNYA — LEGACY BRIDGE
   ---------------------------------------------------------------------
   The site grew three visual systems:

     1. reference-system.css  — the homepage (sunrise palette, Manrope/DM Sans)
     2. inner.css + style.css — the older pages (forest green, Oswald/Caveat)
     3. record-community-drive.css — the campaign page (its own green)

   Rebuilding every legacy page would risk their content. Instead this file
   rebinds the tokens those stylesheets already use, so the whole site lands
   on ONE palette and ONE type pair. Load it AFTER the legacy stylesheets.

   Nothing here changes layout — only colour, type and the two chrome
   elements (nav, footer) that made the older pages look like a different site.
   ========================================================================= */

/* -----------------------------------------------------------------------------
   1 — REBIND THE LEGACY PALETTE TO THE SUNRISE PALETTE
   Every legacy rule already reads these variables, so redefining them here
   recolours the old pages wholesale.
   -------------------------------------------------------------------------- */
:root{
  --green:#241a12;                 /* was #064714 forest green  -> ink        */
  --deep:#1c130c;                  /* was #0E3614 deeper green  -> deeper ink */
  --orange:#c98a3e;                /* was #A7581E rust          -> brand gold */
  --cream:#fdf6ee;                 /* warm paper, matches the homepage        */
  --soft:#fae9d9;                  /* blush, matches the homepage             */
  --gold:#c98a3e;
  --white:#fffbf5;
  --ink:#241a12;
  --line:rgba(36,26,18,.12);
  --shadow:0 18px 50px rgba(36,26,18,.10);

  /* record-community-drive.css declares its own forest-green set. Rebinding
     it here brings the campaign page onto the same palette as everything else. */
  --forest:#241a12;
  --forest-dark:#1c130c;
  --green-soft:#4a3a2c;
  --gold-light:#f2a65a;
  --gold-dark:#9c6428;
  --paper:#fffbf5;
  --muted:#7a6a5a;
  --script:'Manrope',system-ui,sans-serif;

  /* aarunya-system.css builds the legacy full-screen mobile menu from its own
     --a-* token set. Rebinding them keeps that menu on the same palette. */
  --a-forest:#241a12;
  --a-green:#241a12;
  --a-green-soft:#4a3a2c;
  --a-gold:#c98a3e;
  --a-gold-dark:#9c6428;
  --a-gold-light:#f2a65a;
  --a-cream:#fdf6ee;
  --a-paper:#fffbf5;
  --a-ink:#241a12;
  --a-muted:#7a6a5a;
  --a-sage:#c9b9a5;
  --a-line:rgba(36,26,18,.13);

  /* Type, shared with reference-system.css */
  --lg-display:'Manrope',system-ui,sans-serif;
  --lg-body:'DM Sans',system-ui,sans-serif;
}

/* -----------------------------------------------------------------------------
   2 — ONE TYPE PAIR
   The legacy sheets set fonts with the `font:` shorthand (Oswald, Caveat,
   Lato), which cannot be overridden a property at a time — so the family is
   reset explicitly. Weight, size and leading from the original rules survive.
   -------------------------------------------------------------------------- */
.inner-page,
.inner-page input,
.inner-page textarea,
.inner-page select,
body:not(.ref){
  font-family:var(--lg-body);
  -webkit-font-smoothing:antialiased;
}

.inner-page h1,.inner-page h2,.inner-page h3,.inner-page h4,.inner-page h5,
.inner-page .section-title,.inner-page .num,.inner-page .eyebrow,
.inner-page .music-word,.inner-page .vision-words span,
.inner-page .path-num,.inner-page .stat strong,.inner-page .experience strong,
.inner-page .btn-i,.inner-page .nav-pill,.inner-page .back,
.inner-page .journey span,.inner-page .timeline-no,
body:not(.ref) h1, body:not(.ref) h2, body:not(.ref) h3, body:not(.ref) h4,
body:not(.ref) .section-title, body:not(.ref) .logo-text,
body:not(.ref) nav a, body:not(.ref) footer h4{
  font-family:var(--lg-display) !important;
  letter-spacing:-.015em;
}

/* Caveat was used for handwritten pull-quotes. Without the webfont it fell
   back to a generic cursive; it now reads as an italic display line instead. */
.inner-page .script,
body:not(.ref) .script{
  font-family:var(--lg-display) !important;
  font-style:italic;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--gold);
}
.inner-page .final .script,
.inner-page .dark .script,
.inner-page .section-i.dark .script{color:#f2a65a;}

/* Uppercase micro-labels keep their tracking, but lose the condensed look. */
.inner-page .eyebrow,
body:not(.ref) .eyebrow{
  font-family:var(--lg-body) !important;
  font-weight:700;
  letter-spacing:.16em;
  color:#9c6428;
}
.inner-page .dark .eyebrow,
.inner-page .section-i.dark .eyebrow{color:#f2a65a;}

/* -----------------------------------------------------------------------------
   3 — NAV — make the legacy header read like the homepage header
   -------------------------------------------------------------------------- */
.inner-nav{
  background:rgba(253,246,238,.86) !important;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(36,26,18,.07) !important;
}
.inner-navlinks{font-family:var(--lg-body);font-weight:500 !important;font-size:14.5px !important;}
.inner-navlinks a{color:#4a3a2c;transition:color .28s cubic-bezier(.22,1,.36,1);}
.inner-navlinks a:hover{color:#241a12;}
.inner-navlinks .nav-pill{
  background:linear-gradient(135deg,#f6ddc9 0%,#f2a65a 52%,#c98a3e 100%) !important;
  color:#241a12 !important;
  font-family:var(--lg-display) !important;
  font-weight:700;font-size:14px;
  border-radius:999px !important;
  padding:12px 22px !important;
  box-shadow:0 6px 18px -6px rgba(201,138,62,.55);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.inner-navlinks .nav-pill:hover{transform:translateY(-2px);color:#241a12 !important;}

/* -----------------------------------------------------------------------------
   4 — BUTTONS
   -------------------------------------------------------------------------- */
.inner-page .btn-i,
body:not(.ref) .btn{
  background:linear-gradient(135deg,#f6ddc9 0%,#f2a65a 52%,#c98a3e 100%) !important;
  color:#241a12 !important;
  border-radius:999px !important;
  padding:13px 24px !important;
  font-weight:700;
  box-shadow:0 6px 18px -6px rgba(201,138,62,.55);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.inner-page .btn-i:hover,
body:not(.ref) .btn:hover{transform:translateY(-2px);}
.inner-page .btn-i.orange{background:#241a12 !important;color:#fffaf2 !important;}

/* -----------------------------------------------------------------------------
   5 — PANELS
   The green blocks (.stat, .principle, .experience, .action-card, .pledge,
   .final, .dark-panel) now use the homepage's ink, and their accents use gold.
   -------------------------------------------------------------------------- */
.inner-page .stat,
.inner-page .principle,
.inner-page .experience,
.inner-page .action-card,
.inner-page .pledge,
.inner-page .dark-panel,
.inner-page .timeline-no{background:#241a12 !important;color:#fffaf2 !important;}

.inner-page .stat strong,
.inner-page .principle .num{color:#f2a65a !important;}

.inner-page .final{
  background:#241a12 !important;color:#fffaf2 !important;
  position:relative;overflow:hidden;
}
.inner-page .final::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(100% 80% at 10% 0%,rgba(242,166,90,.30) 0%,rgba(242,166,90,0) 60%),
    radial-gradient(90% 90% at 92% 100%,rgba(201,138,62,.28) 0%,rgba(201,138,62,0) 62%);
}
.inner-page .final > *{position:relative;z-index:1;}

.inner-page .section-i.dark{background:#241a12 !important;color:#fffaf2 !important;}
.inner-page .page-hero.dark{background:#241a12 !important;color:#fffaf2 !important;}

/* Cards on cream keep a hairline instead of a green border. */
.inner-page .belief,
.inner-page .card-i,
.inner-page .six,
.inner-page .path-card,
.inner-page .choice,
.inner-page .join-card,
.inner-page .timeline-content,
.inner-page .initiative{
  background:var(--white) !important;
  border-color:rgba(36,26,18,.12) !important;
  border-radius:18px;
}
.inner-page .path-card:hover{background:#241a12 !important;color:#fffaf2 !important;}
.inner-page .path-card:hover .path-num{color:#f2a65a !important;}
.inner-page .initiative{border-top:4px solid #c98a3e !important;}
.inner-page .activity{background:var(--soft) !important;border-left-color:#c98a3e !important;}
.inner-page .org{background:var(--soft) !important;border-radius:14px;}
.inner-page .tags span{border-color:rgba(36,26,18,.22);border-radius:999px;}
.inner-page .path-card:hover .tags span{border-color:rgba(253,246,238,.4);}

/* Quote panels */
.inner-page .quote-panel{background:#241a12 !important;color:#fffaf2 !important;border-radius:18px;}
.inner-page .quote-panel:before{color:#c98a3e !important;}
.inner-page .quote-box{background:var(--soft) !important;border-left:3px solid #c98a3e;border-radius:14px;}

/* -----------------------------------------------------------------------------
   6 — FOOTER — the green footer was the most visible mismatch
   -------------------------------------------------------------------------- */
.footer-i,
body:not(.ref) footer{
  background:#241a12 !important;
  color:rgba(253,246,238,.7) !important;
}
.footer-i a,
body:not(.ref) footer a{color:rgba(253,246,238,.68) !important;transition:color .28s;}
.footer-i a:hover,
body:not(.ref) footer a:hover{color:#f2a65a !important;}
.footer-i .back,
body:not(.ref) .back{color:#f2a65a !important;}
body:not(.ref) footer h4{color:#fffaf2 !important;}

/* The mark carries a dark-green wordmark, invisible on ink — render it light,
   the same treatment the homepage footer uses. */
.footer-i .footer-logo,
body:not(.ref) footer .footer-logo{
  filter:brightness(0) invert(1);
  opacity:.92;
}

/* -----------------------------------------------------------------------------
   7 — JOURNEY BAR (shared between legacy pages)
   -------------------------------------------------------------------------- */
.journey-nav{background:var(--cream) !important;border-color:rgba(36,26,18,.1) !important;}
.journey-kicker{color:#9c6428 !important;}
.journey-link strong,.journey-center strong{
  font-family:var(--lg-display) !important;color:#241a12 !important;
}
.journey-home{color:#9c6428 !important;}
.journey-link:hover{background:var(--soft) !important;}

/* -----------------------------------------------------------------------------
   8 — TRANSITION / VISION BANDS
   -------------------------------------------------------------------------- */
.inner-page .transition{background:var(--soft) !important;}
.inner-page .transition .script{color:#9c6428 !important;}
.inner-page .vision-words span,
body:not(.ref) .vision-words span{color:#f2a65a !important;}
.inner-page .music-word{color:#c98a3e !important;}
.inner-page .final-cta,
body:not(.ref) .final-cta{background:#241a12 !important;color:#fffaf2 !important;}

/* =========================================================================
   9 — CAMPAIGN PAGE (aarunya-record-community-drive.html)
   Two pre-existing problems, fixed here rather than in the original sheet so
   the original stays intact:

   a) The hero pulled a 2200px photograph from images.unsplash.com. That is an
      external dependency on every page load — slow on mobile data and broken
      if the URL ever changes. It now uses the same warm brand panel as the
      other inner heroes, with no third-party request.

   b) The hero's fundraising block is marked up as .hero-community-box /
      .community-box-label / .community-goal / .contribution-note, but the
      stylesheet only ever defined .hero-community-cta / .hero-community-copy.
      Those elements were therefore completely unstyled, which is why the
      "₹20 LAKH" panel rendered as dark text on the dark hero. They are
      styled below.
   ========================================================================= */
.hero{
  background:
    radial-gradient(100% 86% at 6% 0%,rgba(242,166,90,.55) 0%,rgba(242,166,90,0) 62%),
    radial-gradient(90% 90% at 96% 100%,rgba(226,136,59,.50) 0%,rgba(226,136,59,0) 66%),
    linear-gradient(158deg,#5c3a1c 0%,#432a15 46%,#33200f 100%) !important;
}
.hero-overlay{
  background:linear-gradient(180deg,rgba(22,15,8,.06),rgba(22,15,8,.34)) !important;
}

.hero-community-box{
  margin:32px 0 8px;
  max-width:520px;
  padding:26px 28px;
  border-radius:22px;
  background:rgba(253,246,238,.10);
  border:1px solid rgba(253,246,238,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.community-box-label{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#f2a65a;
}
.community-goal{
  margin:10px 0 6px;
  font-family:'Manrope',system-ui,sans-serif;
  font-weight:800;font-size:clamp(38px,5.4vw,62px);line-height:1;
  letter-spacing:-.03em;
  background:linear-gradient(100deg,#f6ddc9 0%,#f2a65a 55%,#e2883b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-community-box p{
  margin:0 0 18px;color:rgba(253,246,238,.84);font-size:15px;line-height:1.6;
}
.hero-contribute{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#f6ddc9 0%,#f2a65a 52%,#c98a3e 100%) !important;
  color:#241a12 !important;
  font-weight:800;font-size:13.5px;letter-spacing:.08em;
  padding:14px 24px;border-radius:999px;
  box-shadow:0 10px 28px -8px rgba(36,26,18,.6);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.hero-contribute:hover{transform:translateY(-2px);}
.contribution-note{
  margin-top:14px;font-size:13px;color:rgba(253,246,238,.72);
}
.hero-secondary-actions{margin-top:22px;}
.hero-secondary-actions .button-outline{
  color:#fffaf2 !important;
  border:1.5px solid rgba(253,246,238,.5) !important;
  background:rgba(253,246,238,.1) !important;
  border-radius:999px;padding:12px 22px;font-weight:700;
}
.hero-secondary-actions .button-outline:hover{
  background:rgba(253,246,238,.22) !important;border-color:#fffaf2 !important;
}

/* The section headings sat on a tinted band that dropped their contrast. */
.section h2{color:#241a12 !important;}
.section-green{background:#241a12 !important;color:#fffaf2 !important;}
.section-green h2,.section-green .section-label{color:#fffaf2 !important;}
.final-section{background:#241a12 !important;color:#fffaf2 !important;}
.progress-bar{background:linear-gradient(135deg,#f6ddc9 0%,#f2a65a 52%,#c98a3e 100%) !important;}

/* The eyebrow used --gold-light, which now sits on the bright end of the
   sunrise panel and loses contrast. Cream reads cleanly across the whole band. */
.hero .eyebrow{color:#fffaf2 !important;opacity:.92;}
.site-header{background:rgba(253,246,238,.9) !important;border-bottom:1px solid rgba(36,26,18,.08);}
.site-header .header-nav a{color:#4a3a2c !important;font-weight:500;}
.site-header .header-nav a:hover{color:#241a12 !important;}
.site-header .header-button{
  background:linear-gradient(135deg,#f6ddc9 0%,#f2a65a 52%,#c98a3e 100%) !important;
  color:#241a12 !important;border-radius:999px !important;font-weight:800;
}

/* The funding grid was built for two costed requirements; there are now three
   (music rights, hospitality, hardware & sound). */
.funding-grid{grid-template-columns:repeat(3,1fr) !important;}
@media (max-width:1000px){.funding-grid{grid-template-columns:repeat(2,1fr) !important;}}
@media (max-width:680px){.funding-grid{grid-template-columns:1fr !important;}}


/* -----------------------------------------------------------------------------
   HEADING EMPHASIS — matches the reference-system pages exactly
   The legacy sheets style bare <em> inside headings, so these selectors are
   scoped tighter than `.page-hero h1 em` to win without !important.
   -------------------------------------------------------------------------- */
body:not(.ref) em.script-accent,
.inner-page em.script-accent{
  font-family:'Caveat',cursive;
  font-style:normal;
  font-weight:600;
  font-size:1.24em;
  line-height:.9;
  letter-spacing:0;
  color:#e2883b;                   /* == --s-saffron-deep on the ref pages */
}

body:not(.ref) .dark em.script-accent,
body:not(.ref) .section-i.dark em.script-accent,
body:not(.ref) .page-hero.dark em.script-accent,
body:not(.ref) .final em.script-accent,
body:not(.ref) .dark-panel em.script-accent{
  color:#f2a65a;                   /* == --s-saffron */
}


/* -----------------------------------------------------------------------------
   DARK HEROES — inner.css pins `.page-hero h1` to the ink colour with
   !important, which left the non-accented half of the heading invisible on the
   two dark heroes (our-vision, what-we-believe). Paper colour restored here.
   -------------------------------------------------------------------------- */
body:not(.ref) .page-hero.dark h1,
.inner-page .page-hero.dark h1{
  color:#fdf6ee !important;
}
body:not(.ref) .page-hero.dark .lead,
.inner-page .page-hero.dark .lead{
  color:rgba(253,246,238,.78) !important;
}