/* =========================================================================
   AARUNYA — INNER PAGE POLISH
   Loaded last on aarunya-living.html and get-involved.html.

   Three things it does:
     1. Restores the script accent on the Living hero, matching the earlier
        design where the closing word was set in Caveat.
     2. Turns two lists that were reading as loose text into proper cards.
     3. Sizes the pinned "pathways" cards to their content instead of a fixed
        520px, which left large empty wells under three lines of copy.
   ========================================================================= */

/* =========================================================================
   1 — THE SCRIPT ACCENT
   ========================================================================= */

/* .script-accent now lives in reference-system.css so every page shares it. */

.tone-ink .script-accent,
.ref-hero .script-accent{
  color:#f0b877;
}


/* =========================================================================
   2 — "SIX THINGS, DESIGNED IN FROM THE START" AS CARDS
   The list previously hung off thin top rules, which read as a table of
   contents rather than six equal ideas.
   ========================================================================= */

.feature-list.as-cards{
  gap:clamp(16px,1.8vw,22px);
}

.feature-list.as-cards .feature{
  display:flex;
  flex-direction:column;
  gap:10px;

  padding:clamp(24px,2.6vw,32px);

  border:1px solid var(--s-line);
  border-top:1px solid var(--s-line);
  border-radius:20px;

  background:var(--s-paper);

  transition:transform var(--s-fast) var(--s-ease),
             border-color var(--s-fast) var(--s-ease),
             box-shadow var(--s-fast) var(--s-ease);
}

.feature-list.as-cards .feature:hover{
  transform:translateY(-4px);
  border-color:var(--s-gold);
  box-shadow:0 22px 44px -24px rgba(36,26,18,.3);
}

.feature-list.as-cards .feature h4{
  margin:0;

  font-size:clamp(18px,1.7vw,21px);
  letter-spacing:-.01em;
}

.feature-list.as-cards .feature p{
  margin:0;

  font-size:15px;
  line-height:1.62;
}

/* On the ink section the cards are a lift out of the dark, not a white slab. */
.tone-ink .feature-list.as-cards .feature{
  border-color:rgba(253,246,238,.16);
  background:rgba(253,246,238,.045);
}

.tone-ink .feature-list.as-cards .feature:hover{
  border-color:rgba(253,246,238,.4);
  background:rgba(253,246,238,.075);
  box-shadow:none;
}

.tone-ink .feature-list.as-cards .feature h4{color:#fffaf2;}
.tone-ink .feature-list.as-cards .feature p{color:rgba(253,246,238,.76);}


/* =========================================================================
   3 — "A CAMPUS WITHOUT BARRIERS"
   The ten guarantees were a loose pill cloud facing a wall of text. They are
   now a two-column checklist that reads as a specification.
   ========================================================================= */

.assurance-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
}

.assurance{
  display:flex;
  align-items:flex-start;
  gap:12px;

  padding:15px 18px;

  border:1px solid var(--s-line);
  border-radius:14px;

  background:var(--s-paper);

  font-size:14.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--s-ink);

  transition:transform var(--s-fast) var(--s-ease),
             border-color var(--s-fast) var(--s-ease);
}

.assurance:hover{
  transform:translateY(-3px);
  border-color:var(--s-gold);
}

.assurance svg{
  flex:0 0 auto;

  width:17px;
  height:17px;
  margin-top:1px;

  fill:none;
  stroke:var(--s-gold-deep);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* The closing line of the section, given the weight of a pull quote. */
.assurance-note{
  margin-top:26px;
  padding:20px 24px;

  border-left:3px solid var(--s-gold);
  border-radius:0 14px 14px 0;

  background:var(--s-paper);

  font-family:var(--s-display);
  font-weight:700;
  font-size:clamp(18px,2vw,24px);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--s-ink);
}

@media (max-width:760px){
  .assurance-grid{grid-template-columns:1fr;}
}


/* =========================================================================
   4 — THE TWO-COLUMN NOTE ON GET INVOLVED, AS CARDS
   ========================================================================= */

/* The rail that follows is pinned, so this section's own bottom padding was
   stacking on top of the pane's leading space. */
.note-cards{
  padding-bottom:clamp(8px,2vw,24px);

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,24px);

  align-items:start;
}

.note-card{
  padding:clamp(26px,3vw,38px);

  border:1px solid var(--s-line);
  border-radius:22px;

  background:var(--s-paper);

  transition:transform var(--s-fast) var(--s-ease),
             border-color var(--s-fast) var(--s-ease),
             box-shadow var(--s-fast) var(--s-ease);
}

.note-card:hover{
  transform:translateY(-4px);
  border-color:var(--s-gold);
  box-shadow:0 24px 48px -26px rgba(36,26,18,.3);
}

.note-card .num{margin-bottom:14px;}

.note-card h2{
  margin:0 0 22px;

  font-size:clamp(22px,2.4vw,30px);
  line-height:1.14;
}

.note-card p{
  margin:0;

  font-size:15.5px;
  line-height:1.68;
}

@media (max-width:820px){
  .note-cards{grid-template-columns:1fr;}
}


/* =========================================================================
   5 — THE PINNED PATHWAY CARDS
   They were locked to a 520px minimum for three lines of copy, so each card
   carried a large empty well. They now hug their content and centre it.
   ========================================================================= */

.hscroll-card{
  min-height:0;

  padding:clamp(28px,3.2vw,44px);

  align-items:center;
  align-content:center;
}

.hscroll-card .hc-body h3{
  font-size:clamp(26px,2.8vw,42px);
  margin:0 0 14px;
}

.hscroll-card .hc-num{
  font-size:clamp(42px,4.6vw,70px);
}

.hscroll-card .hc-body p{
  font-size:clamp(15px,1.1vw,17px);
  max-width:46ch;
}

/* The pinned pane was a full 100svh, so once the cards shrank to their copy
   they floated in a tall empty well. The pane is now only as tall as it needs
   to be and is centred in the viewport instead, which keeps the pin maths in
   reference-motion.js (section height = viewport + track overflow) untouched. */
.hscroll-sticky{
  height:min(100svh,460px);
  top:max(0px,calc((100svh - min(100svh,460px)) / 2));
}

.hscroll-hint{top:0;}
.hscroll-progress{bottom:0;}

@media (max-width:768px){
  .hscroll-sticky{height:auto;top:0;}
}


/* =========================================================================
   6 — AARUNYA FRIENDS
   The page now carries the fuller campaign copy, which needs three things
   the base system doesn't have: a pull-quote panel, the handwritten closing
   line, and a centred pledge block.
   ========================================================================= */

.friend-quote{
  position:relative;

  padding:clamp(32px,4vw,48px);
  padding-top:clamp(44px,5vw,62px);

  border-radius:24px;

  background:var(--s-ink);
  color:#fffaf2;
}

.friend-quote .fq-mark{
  position:absolute;
  top:clamp(10px,1.6vw,18px);
  left:clamp(26px,3vw,38px);

  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(64px,7vw,96px);
  line-height:1;
  color:var(--s-saffron);
}

.friend-quote p{
  margin:0;

  font-family:'Caveat',cursive;
  font-size:clamp(24px,2.8vw,34px);
  font-weight:500;
  line-height:1.55;
  color:rgba(253,246,238,.9);
}

.friend-quote p strong{
  display:inline-block;
  margin-top:4px;

  color:#fff;
  font-weight:700;
}

/* The handwritten sign-off under the poster wall. */
.script-line{
  margin:32px 0 0;

  font-family:'Caveat',cursive;
  font-size:clamp(22px,2.4vw,30px);
  font-weight:600;
  color:var(--s-saffron-deep);
}

.friend-pledge{
  max-width:820px;
  margin:0 auto;

  text-align:center;
}

.friend-pledge .pledge-words{
  margin:26px auto 0;
  max-width:70ch;
  padding:22px 26px;

  border-left:3px solid var(--s-gold);
  border-radius:0 16px 16px 0;

  background:var(--s-paper);

  font-style:italic;
  font-size:16px;
  line-height:1.72;
  color:var(--s-ink-soft);

  text-align:left;
}

/* The three "ways in" cards carry a number and a link, so they need to stack. */
.info-card .num{
  display:block;

  font-family:var(--s-display);
  font-weight:800;
  font-size:clamp(28px,3vw,40px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--s-gold);
}

.info-card .btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
}