/* Homepage colour direction
   The home page wears the Founder page's scheme rather than the site's
   deep purple: parchment grounds, warm charcoal for the photographic dark
   scenes, and the bright school gold. The purple roles are re-pointed here,
   on body.home only, so every shared component on the page (the ticker,
   the footer, the closing scene, the buttons) follows without being
   restyled one by one. Lettering keeps the ratios measured in cirs.css:
   --ink 15.68:1 and --ink-soft 7.32:1 on ivory; white on the charcoal
   is 16.5:1 or better. The local names below are aliases of those roles. */

body.home{
  /* The Founder page's charcoal (founder-journey.css), in place of purple. */
  --dark:       #2A2925;
  --dark-mid:   #1F1F1B;
  --dark-deep:  #1F1F1B;
  --dark-ink:   #11110F;
  --brand:      #2A2925;
  --brand-mid:  #1F1F1B;
  --brand-deep: #1F1F1B;
  --on-gold:    var(--ink);        /* 10.28:1 on --gold */
  --label:      var(--ink-soft);   /* the Founder page's meta lettering */

  --home-gold:var(--gold-lit);
  --home-gold-lit:var(--gold-pale);
  --home-gold-deep:var(--gold);
  --home-ivory:var(--paper);
  --home-parchment:var(--paper-2);
  --home-ink:var(--dark-deep);
  --home-night:var(--brand-deep);
  /* The Founder page's dark scene: charcoal lit warm from above. */
  --home-night-glow:radial-gradient(circle at 72% 22%, #2A2925, #1F1F1B 52%, #11110F 100%);
}

/* The opening's stage, behind the inset plate. The headline is white over it. */
body.home .hseq{ background:var(--home-night-glow); }

/* The lower hero wash remains dark enough for the white headline. Gold is a
   low-opacity light within the wash, not an opaque colour sheet over campus. */
body.home .hero{ background:var(--home-night); }
body.home .hero__scrim{
  background:
    linear-gradient(to top,
      rgba(17,17,15,.94) 0%, rgba(17,17,15,.84) 18%,
      rgba(17,17,15,.58) 38%, rgba(17,17,15,.15) 70%,
      rgba(17,17,15,.25) 100%),
    radial-gradient(95% 54% at 48% 100%,
      rgba(var(--gold-rgb),.17) 0%, rgba(var(--gold-rgb),.07) 42%,
      rgba(var(--gold-rgb),0) 76%);
}

/* Horizontal passage: gold ground with dark text at the opening. At the
   midpoint, JS brings in the ivory plate and moves every text role to a
   contrast-safe gold stop. Images and their depth transforms are unchanged. */
body.home .hrun{
  background:var(--home-gold-deep);
  color:var(--run-ink, var(--home-ink));
}
body.home .hrun__pin{
  position:relative;
  isolation:isolate;
  --run-ivory:0;
  --run-ink:var(--dark-deep);
  --run-soft:#3A3934;
  --run-accent:#3A3934;
  --run-ghost:var(--dark-deep);
  background:
    radial-gradient(105% 82% at 10% 0%, rgba(244,240,230,.34), transparent 58%),
    radial-gradient(82% 76% at 92% 100%, rgba(232,217,181,.20), transparent 64%),
    var(--home-gold-deep);
}
body.home .hrun__pin::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(86% 72% at 82% 18%, rgba(216,188,122,.10), transparent 64%),
    var(--home-ivory);
  opacity:var(--run-ivory);
  will-change:opacity;
}
body.home .hrun__viewport{ position:relative; z-index:1; }
body.home .hsay__big{ color:var(--run-ink); }
body.home .hsay__sub,
body.home .hframe figcaption{ color:var(--run-soft); }
body.home .hsay__eyebrow,
body.home .hframe__n{
  color:var(--run-accent);
  opacity:1;
  font-size:1rem;
  font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}
body.home .hframe figcaption{ font-size:1rem; }
body.home .hghost{ color:var(--run-ghost); opacity:.09; }
body.home .hframe img{
  box-shadow:0 30px 80px rgba(42,42,38,.24), 0 0 0 1px rgba(255,255,255,.18);
}

/* The pinned gallery has a direct exit for readers who have seen enough. */
body.home .hrun__skip{
  position:absolute;
  z-index:4;
  left:clamp(18px,3vw,48px);
  bottom:clamp(18px,3vw,42px);
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid rgba(24,24,21,.3);
  border-radius:999px;
  background:rgba(250,249,243,.94);
  color:var(--dark-deep);
  font-size:.9rem;
  font-weight:600;
  box-shadow:0 8px 28px rgba(24,24,21,.16);
}
body.home .hrun__skip:hover,
body.home .hrun__skip:focus-visible{ background:#fff; border-color:var(--dark-deep); }
body.home .hrun__skip:focus-visible{ outline:2px solid var(--dark-deep); outline-offset:3px; }
@media(max-width:899px){
  body.home .hrun__skip{top:12px;bottom:auto;left:var(--gut)}
  body.home .hrun.is-static .hrun__pin{padding-top:76px}
}

/* Keep the factual grade range intact when the marker wraps on a phone. */
body.home .hseq__grades{ white-space:nowrap; }
body.home .hseq__type .sc{ font-size:1rem; }
body.home .hseq__type h1 em{ font-family:"Newsreader",serif; font-weight:500; }
@media(max-width:600px){
  body.home .hseq__type{
    bottom:calc(var(--float-edge) + 2 * var(--float-size) + 28px);
    width:calc(100% - 2 * var(--gut));
  }
}

/* The remaining homepage fades use warm neutral density plus quiet gold
   illumination. None of these layers exceeds 18% gold opacity. */
body.home .filmsec,
body.home .finalcta,
body.home .footer{
  background-color:var(--home-night);
}

/* The credentials ticker is a band of the bright gold, lettered in ink. */
body.home .ticker{
  background:var(--gold); color:var(--ink);
  border-block-color:rgba(31,31,27,.14);
}
body.home .ticker__set i{ background:var(--ink); }

body.home .filmsec__media::after{
  background:
    linear-gradient(180deg, rgba(17,17,15,.72) 0%, rgba(17,17,15,.94) 100%),
    radial-gradient(80% 70% at 50% 100%, rgba(var(--gold-rgb),.12), transparent 68%);
}
body.home .filmwin__scrim{
  background:
    linear-gradient(180deg, rgba(17,17,15,.14) 0%, rgba(17,17,15,.72) 100%),
    radial-gradient(70% 65% at 50% 100%, rgba(var(--gold-rgb),.10), transparent 72%);
}
body.home .filmwin{ max-width:1120px; background:var(--home-night); }

body.home .motto{
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(var(--gold-rgb),.16), transparent 62%),
    var(--home-parchment);
  color:var(--ink);
}
/* The motto on parchment: the Devanagari is display-sized, so the dark gold
   reads (4.3:1 on parchment, large text); the transliteration beneath it is
   body-sized and takes --ink-soft (6.9:1). */
body.home .motto__deva{ color:var(--gold-ink); }
body.home .motto__iast{ color:var(--ink-soft); }
body.home .motto__en{
  color:var(--ink-soft);
}
body.home .motto__rule{
  background:rgba(128,96,0,.45);
}

/* Photo crossfades keep their own stagger. Tone uses one class on the section,
   so hundreds of tiles do not each run a separate blend-mode animation. */
body.home .glimpse{
  background:var(--home-parchment);
}
body.home .glimpse__head h2{ color:var(--ink); }
body.home .glimpse__head h2 em{ color:var(--gold-ink); }
body.home .glimpse__head .lead{ color:var(--ink-soft); }
body.home .glimpse .marker .sc{
  color:var(--ink-soft);
}
body.home .glimpse .marker::before{ border-color:var(--gold-ink); }
/* The tone alternates between neighbours every few seconds. It is a filter on
   the tile, so without a transition half the wall changed between colour and
   grey in a single frame; with one the change is the same dissolve the frames
   themselves make, at the pace the shared sheet gives a hovered tile. */
body.home .glimpse .gt{
  background:var(--paper-3);
  transition:filter .55s var(--e);
}
body.home .glimpse .gt img{
  filter:none;
}
body.home .glimpse .gt::before,
body.home .glimpse .gt::after{
  opacity:0;
}
body.home .glimpse:not(.is-tone-flipped) .gt:nth-child(even),
body.home .glimpse.is-tone-flipped .gt:nth-child(odd){
  filter:grayscale(1);
}
body.home .glimpse:not(.is-tone-flipped) .gt:nth-child(even):hover,
body.home .glimpse.is-tone-flipped .gt:nth-child(odd):hover{
  filter:none;
}

body.home .finalcta__media::after{
  background:
    linear-gradient(180deg, rgba(17,17,15,.46) 0%, rgba(17,17,15,.92) 100%),
    radial-gradient(85% 68% at 50% 100%, rgba(var(--gold-rgb),.14), transparent 72%);
}
body.home .totop{ background:var(--gold); color:var(--on-gold); box-shadow:0 6px 24px rgba(17,17,15,.24); }

@media (prefers-reduced-motion:reduce){
  body.home .hrun__pin::before{ transition:none; }
}

/* ---- Phones: "A day at CIRS" as a deck of cards ----------------------
   cirs.js (homeRun) adds .is-deck under 900px when motion is allowed. The
   section is given a height; the pin sticks for its length and the script
   sets each card's transform from the scroll. Desktop is untouched. */
@media (max-width:899px){
  body.home .hrun.is-deck .hrun__pin{
    position:sticky; top:0; height:100svh; height:100vh; overflow:hidden;
  }
  body.home .hrun.is-deck .hrun__viewport{
    height:100%; overflow:visible; perspective:1100px; perspective-origin:50% 45%;
    touch-action:pan-y;
  }
  body.home .hrun.is-deck .hrun__viewport:focus-visible{ outline:2px solid var(--dark-deep); outline-offset:-6px; }
  body.home .hrun.is-deck .hrun__stage{
    display:block; width:100%; height:100%; min-width:0; padding:0; transform:none !important;
  }
  body.home .hrun.is-deck .hghost{ display:none; }
  body.home .hrun.is-deck .hframe,
  body.home .hrun.is-deck .hsay{
    position:absolute; inset:auto !important;
    left:50% !important; top:54% !important;
    margin:0; flex:none;
    width:min(84vw,340px);
    border-radius:22px;
    transform-origin:50% 110%;
    will-change:transform, opacity;
    backface-visibility:hidden;
  }
  body.home .hrun.is-deck .hframe{
    padding:12px 12px 14px;
    background:#FAF9F3;
    box-shadow:0 22px 50px rgba(24,24,21,.28), 0 0 0 1px rgba(24,24,21,.06);
  }
  body.home .hrun.is-deck .hframe--portrait{ width:min(74vw,300px); }
  body.home .hrun.is-deck .hframe--tall{ width:min(66vw,270px); }
  body.home .hrun.is-deck .hframe img{
    width:100%; border-radius:14px; border:0; box-shadow:none;
  }
  body.home .hrun.is-deck .hframe__n{ margin-bottom:8px; color:var(--ink-soft); font-size:.85rem; }
  body.home .hrun.is-deck .hframe figcaption{
    margin-top:10px; color:var(--dark-deep); font-size:.95rem; font-weight:500;
  }
  body.home .hrun.is-deck .hsay{
    padding:28px 24px 30px;
    background:linear-gradient(160deg, #FAF9F3 0%, #F1EAD8 100%);
    box-shadow:0 22px 50px rgba(24,24,21,.26), inset 0 0 0 1px rgba(143,110,47,.22);
  }
  body.home .hrun.is-deck .hsay > *{ transform:none; }
  body.home .hrun.is-deck .hsay__eyebrow{ color:var(--gold-ink); font-size:.9rem; margin-bottom:14px; }
  body.home .hrun.is-deck .hsay__big{
    color:var(--dark-deep); font-size:clamp(1.65rem,7.4vw,2.2rem); text-shadow:none;
  }
  body.home .hrun.is-deck .hsay__sub{ color:var(--ink-soft); font-size:1rem; line-height:1.5; margin-top:14px; }
  body.home .hrun.is-deck .hrun__skip{ top:auto; bottom:18px; left:var(--gut); }

  body.home .hrun__count{
    position:absolute; z-index:4; right:var(--gut); bottom:28px; margin:0;
    font-family:var(--font-ui); font-size:.85rem; font-weight:600; letter-spacing:.06em;
    font-variant-numeric:tabular-nums; color:var(--run-ink);
  }
  body.home .hrun__cue{
    position:absolute; z-index:4; left:50%; bottom:84px; margin:0;
    transform:translate(-50%,12px); opacity:0; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-family:var(--font-ui); font-size:.85rem; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--run-ink);
    transition:opacity .35s ease, transform .35s ease;
  }
  body.home .hrun__cue span{ font-size:1.2rem; animation:hrun-cue 1.4s ease-in-out infinite; }
  body.home .hrun__cue.is-on{ opacity:1; transform:translate(-50%,0); }
  @keyframes hrun-cue{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

  /* Motion off or no GSAP: the phone layout is a vertical column, not a
     sideways track that has to be swiped. */
  body.home .hrun.is-static .hrun__viewport{ overflow:visible; }
  body.home .hrun.is-static .hrun__stage{
    flex-direction:column; align-items:center; gap:44px;
  }
  body.home .hrun.is-static .hframe--wide,
  body.home .hrun.is-static .hsay{ width:min(88vw,560px); }
  body.home .hrun.is-static .hframe--portrait{ width:min(76vw,420px); }
  body.home .hrun.is-static .hframe--tall{ width:min(70vw,380px); }
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  body.home .hrun__cue span{ animation:none; }
}

/* The opening photograph on a portrait screen: the cover crop keeps the
   portico and the ridge behind it at the centre of the frame instead of
   the left-hand wing. */
@media (max-aspect-ratio:4/5){
  body.home .hseq__video{ object-position:69% 40%; }
}