/* ==========================================================================
   THE GREAT INDIAN GURUKUL — design system
   Display: Fraunces (soft/wonk, optical size)  |  Body: IBM Plex Sans
   Data/labels: IBM Plex Mono   |   Palette: marigold & amber gold on khadi paper
   ========================================================================== */

:root{
  /* ---- surfaces ---- */
  --paper:        #FBF2E1;   /* unbleached khadi paper */
  --paper-deep:   #F2E1BB;   /* deeper card surface */
  --paper-line:   #E1C48B;   /* hairline / rule colour */
  --white:        #FFFDF8;

  /* ---- ink ---- */
  --ink:          #2B1B10;   /* near-black, warm bark brown */
  --ink-soft:     #6B4F30;
  --ink-faint:    #9C8258;

  /* ---- marigold / amber gold ---- */
  --marigold:       #E29B0E;
  --marigold-deep:  #AD6C05;
  --marigold-light: #F6C863;
  --marigold-wash:  #FBEBC4;

  /* ---- grounding dark (temple-dusk indigo) ---- */
  --dusk:       #24334A;
  --dusk-deep:  #17212F;
  --dusk-line:  #3B4C68;

  /* ---- structural accent (fired clay) ---- */
  --terracotta: #A6512E;

  /* ---- type ---- */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --container: 1180px;

  --shadow-soft: 0 18px 40px -22px rgba(43,27,16,0.35);
  --shadow-card: 0 10px 28px -16px rgba(43,27,16,0.28);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
/* The off-canvas mobile menu sits just outside the viewport via transform when
   closed; without a clip here, that off-screen panel silently widens the page's
   scrollable area and lets phones rubber-band/swipe sideways into blank space.
   overflow:hidden would stop that too, but it also turns html/body into a
   "scroll container", which breaks the sticky nav below. overflow:clip clips the
   same way without creating that scroll container. `hidden` is kept first as a
   harmless fallback for the rare browser that doesn't understand `clip`. */
html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}
body{
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ---------------------------------- eyebrow / mono labels ---------------------------------- */
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--marigold-deep);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--marigold-deep);
  display: inline-block;
}
.eyebrow.on-dark{ color: var(--marigold-light); }
.eyebrow.on-dark::before{ background: var(--marigold-light); }

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary{ background: var(--marigold); color: var(--dusk-deep); border-color: var(--marigold); font-weight: 600; }
.btn-primary:hover{ background: var(--marigold-deep); border-color: var(--marigold-deep); color: var(--white); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink-faint); }
.btn-ghost:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-ghost.on-dark{ color: var(--paper); border-color: var(--dusk-line); }
.btn-ghost.on-dark:hover{ background: var(--marigold); border-color: var(--marigold); color: var(--dusk-deep); }
.btn svg{ width: 14px; height: 14px; }

/* ---------------------------------- nav ---------------------------------- */
.site-nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,242,225,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.site-nav .wrap{ display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand .word{
  font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .01em;
  color: var(--ink);
}
.brand .word em{ font-style: italic; color: var(--marigold-deep); }
.brand .sub{ font-family: var(--font-mono); font-size: 10px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); margin-top: 3px; }

.nav-links{ display: flex; align-items: center; gap: 6px; }
.nav-links a{
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px; border-radius: 2px; color: var(--ink-soft);
  transition: color .2s, background .2s;
  position: relative;
}
.nav-links a:hover{ color: var(--ink); background: var(--paper-deep); }
.nav-links a.active{ color: var(--marigold-deep); font-weight: 600; }
.nav-links a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px; background: var(--marigold-deep);
}
.nav-cta{ margin-left: 8px; }

.nav-toggle{ display:none; }

/* ---------------------------------- footer ---------------------------------- */
.site-footer{ background: var(--dusk-deep); color: var(--paper); padding: 72px 0 30px; }
.site-footer .grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h5{ font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--marigold-light); margin: 0 0 18px; }
.site-footer p{ color: #C9D2DF; font-size: 14.5px; max-width: 320px; }
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer a{ color: #C9D2DF; font-size: 14.5px; transition: color .2s; }
.site-footer a:hover{ color: var(--marigold-light); }
.footer-bottom{
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--dusk-line);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: #8394AA;
}
.footer-bottom .domain{ color: var(--marigold-light); }

/* ---------------------------------- section rhythm ---------------------------------- */
.section{ padding: 108px 0; }
.section.tight{ padding: 76px 0; }
.section-alt{ background: var(--paper-deep); }
.section-dusk{ background: var(--dusk-deep); color: var(--paper); }
.section-dusk h2, .section-dusk h3{ color: var(--paper); }
.section-dusk .ink-soft{ color: #C9D2DF; }
/* .card keeps a white background regardless of its section, so headings inside a
   card must stay dark even on a dusk section — otherwise light-on-light text
   becomes unreadable (e.g. the Legacy Sponsorships cards). Explicit inline colors
   on individually-styled dark cards still win over this. */
.section-dusk .card h3{ color: var(--ink); }

.section-head{ max-width: 680px; margin-bottom: 56px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ font-size: clamp(30px, 3.4vw, 44px); }
.section-head .lede{ font-size: 18px; color: var(--ink-soft); margin-top: 14px; }
.section-dusk .section-head .lede{ color: #C9D2DF; }

/* mandala divider — recurring signature motif: a hairline flanked by concentric dots */
.mandala-rule{ display:flex; align-items:center; justify-content:center; gap: 10px; margin: 0 auto 34px; width: fit-content; }
.mandala-rule .line{ width: 64px; height: 1px; background: var(--paper-line); }
.mandala-rule .ring{ width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--marigold-deep); }
.mandala-rule .dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--marigold); }
.section-dusk .mandala-rule .line{ background: var(--dusk-line); }

/* ---------------------------------- cards ---------------------------------- */
.card{
  background: var(--white);
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform: translateY(-4px); border-color: var(--marigold); box-shadow: var(--shadow-soft); }
.card .tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--marigold-deep); }
.card .sqft{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.card h3{ font-size: 21px; margin: 10px 0 8px; }
.card p{ color: var(--ink-soft); font-size: 15px; margin: 0; }

.card-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }

/* ---------------------------------- stats ---------------------------------- */
.stat-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); }
.stat{ background: var(--paper); padding: 30px 26px; }
.stat .num{ font-family: var(--font-display); font-size: clamp(26px,3vw,38px); color: var(--marigold-deep); font-weight: 600; }
.stat .label{ font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-top: 6px; }

/* ---------------------------------- tables ---------------------------------- */
.table-wrap{ overflow-x: auto; border: 1px solid var(--paper-line); border-radius: 3px; background: var(--white); }
table{ width: 100%; border-collapse: collapse; min-width: 640px; }
th, td{ text-align: left; padding: 16px 20px; font-size: 14.5px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
th{ font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; color: var(--marigold-deep); background: var(--marigold-wash); }
tr:last-child td{ border-bottom: none; }
td.muted{ color: var(--ink-soft); }

/* ---------------------------------- pillars / pill list ---------------------------------- */
.pill{ display:inline-block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing:.08em; padding: 5px 11px; border: 1px solid var(--marigold-deep); color: var(--marigold-deep); border-radius: 999px; }

/* ---------------------------------- bar chart (campus BUA) ---------------------------------- */
.bars{ display: flex; flex-direction: column; gap: 16px; }
.bar-row{ display: grid; grid-template-columns: 230px 1fr 90px; align-items: center; gap: 16px; }
.bar-row .name{ font-size: 14.5px; }
.bar-row .name small{ display:block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top:2px; }
.bar-track{ background: var(--paper-deep); border-radius: 2px; height: 12px; overflow: hidden; }
.bar-fill{ height: 100%; background: linear-gradient(90deg, var(--marigold-deep), var(--marigold-light)); border-radius: 2px; width: 0; transition: width 1.1s var(--ease); }
.bar-row .val{ font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); text-align: right; }

/* ---------------------------------- timeline ---------------------------------- */
.timeline{ position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.timeline::before{ content:""; position:absolute; top: 26px; left: 4%; right:4%; height: 1px; background: var(--paper-line); }
.tl-item{ position: relative; padding-top: 54px; }
.tl-dot{ position:absolute; top: 18px; left: 0; width: 16px; height:16px; border-radius:50%; background: var(--paper); border: 2px solid var(--marigold-deep); }
.tl-item .age{ font-family: var(--font-mono); font-size: 12.5px; color: var(--marigold-deep); letter-spacing:.04em; }
.tl-item h4{ font-size: 19px; margin: 8px 0 6px; }
.tl-item p{ color: var(--ink-soft); font-size: 14.5px; margin: 0; }
.tl-ceremony{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing:.06em; color: var(--terracotta); margin-top: 12px; display:block; }

/* ---------------------------------- radial diagram wrapper ---------------------------------- */
.radial-wrap{ display:flex; justify-content:center; align-items:center; }
.radial-wrap svg{ width: 100%; height: auto; max-width: 640px; }
.radial-wrap.small svg{ max-width: 460px; }

/* ---------------------------------- steps (numbered — real sequence) ---------------------------------- */
.steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.step{ position: relative; padding-top: 8px; }
.step .n{ font-family: var(--font-display); font-size: 44px; color: var(--paper-line); font-weight: 600; line-height: 1; margin-bottom: 8px; }
.step h4{ font-size: 19px; margin: 6px 0 8px; }
.step p{ color: var(--ink-soft); font-size: 14.5px; margin: 0; }

/* ---------------------------------- accordion (curricular equivalence) ---------------------------------- */
.accordion{ border-top: 1px solid var(--paper-line); }
.acc-item{ border-bottom: 1px solid var(--paper-line); }
.acc-head{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 22px 4px; cursor: pointer; background: none; border: none; width: 100%; text-align: left;
  font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--ink);
}
.acc-head .plus{ font-family: var(--font-mono); font-size: 20px; color: var(--marigold-deep); transition: transform .3s var(--ease); flex: none; }
.acc-item.open .plus{ transform: rotate(45deg); }
.acc-body{ max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc-body-inner{ padding: 0 4px 24px; color: var(--ink-soft); font-size: 15px; }
.acc-body-inner .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px;}
.acc-body-inner .row .k{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing:.08em; color: var(--marigold-deep); margin-bottom: 4px; display:block;}

/* ---------------------------------- callout ---------------------------------- */
.callout{ border: 1px solid var(--terracotta); background: #FBEADF; border-radius: 3px; padding: 22px 24px; display:flex; gap: 16px; align-items:flex-start; }
.callout .ic{ font-family: var(--font-mono); color: var(--terracotta); font-size: 18px; flex: none; margin-top:1px; }
.callout p{ margin:0; font-size: 14.5px; color: #5C3722; }
.callout strong{ color: var(--terracotta); }

/* ---------------------------------- hero ---------------------------------- */
.hero{ position: relative; padding: 84px 0 110px; overflow: hidden; }
.hero-grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1{ font-size: clamp(42px, 5.6vw, 74px); }
.hero .lede{ font-size: 19px; color: var(--ink-soft); max-width: 520px; margin: 20px 0 34px; }
.hero-cta{ display: flex; gap: 14px; flex-wrap: wrap; }
.hero-tag{ position:absolute; }

/* reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* ---------------------------------- page header (interior pages) ---------------------------------- */
.page-header{ padding: 64px 0 56px; border-bottom: 1px solid var(--paper-line); }
.page-header h1{ font-size: clamp(36px, 4.6vw, 56px); }
.page-header .lede{ font-size: 17.5px; color: var(--ink-soft); max-width: 640px; margin-top: 16px; }

/* sub-nav for long pages */
.subnav{ position: sticky; top: 76px; z-index: 90; background: var(--paper); border-bottom: 1px solid var(--paper-line); }
.subnav .wrap{ display:flex; gap: 4px; overflow-x:auto; padding: 14px 0; }
.subnav a{ font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing:.06em; color: var(--ink-soft); padding: 8px 14px; white-space:nowrap; border-radius: 999px; }
.subnav a:hover{ background: var(--paper-deep); color: var(--ink); }
.subnav a.active{ background: var(--dusk); color: var(--marigold-light); }

/* ---------------------------------- misc ---------------------------------- */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.tick-list{ list-style:none; margin: 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.tick-list li{ display:flex; gap: 12px; font-size: 15px; color: var(--ink-soft); }
.tick-list li::before{ content:"◆"; color: var(--marigold-deep); font-size: 9px; margin-top: 6px; flex:none; }

.kicker-num{ font-family: var(--font-mono); color: var(--marigold-deep); }

hr.rule{ border:none; border-top: 1px solid var(--paper-line); margin: 0; }

.text-center{ text-align:center; }
.max-w-prose{ max-width: 66ch; }

/* ================================= RESPONSIVE ================================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-row{ grid-template-columns: repeat(2,1fr); }
  .site-footer .grid{ grid-template-columns: 1fr 1fr; }
  .two-col{ grid-template-columns: 1fr; gap: 36px; }
  .timeline{ grid-template-columns: 1fr; gap: 34px;}
  .timeline::before{ display:none; }
  .steps{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .nav-links{
    position: fixed; inset: 76px 0 0 0; background: var(--paper); flex-direction: column; align-items: stretch;
    padding: 18px; gap: 2px; transform: translateX(100%); transition: transform .35s var(--ease);
    border-top: 1px solid var(--paper-line);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ padding: 16px 10px; font-size: 14px; border-bottom: 1px solid var(--paper-line); }
  .nav-cta{ margin: 10px; justify-content:center; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width: 44px; height: 44px; background:none; border:none; cursor:pointer; flex: none;
  }
  .nav-toggle span{ height: 2px; width: 22px; background: var(--ink); display:block; transition: transform .25s var(--ease), opacity .25s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .card-grid{ grid-template-columns: 1fr; }
  .card-grid.cols-2{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr 1fr; }
  .site-footer .grid{ grid-template-columns: 1fr; gap: 30px; }
  .bar-row{ grid-template-columns: 1fr; gap: 6px; }
  .bar-row .val{ text-align:left; }
  .section{ padding: 72px 0; }
  .hero{ padding: 56px 0 72px; }
}

/* Background can't scroll behind the fullscreen mobile menu (toggled on <body> by main.js) */
body.nav-open{ overflow: hidden; }

/* Momentum scrolling for horizontally-scrollable strips on iOS */
.table-wrap, .subnav .wrap{ -webkit-overflow-scrolling: touch; }

/* The two decorative radial diagrams (home "Pillars" wheel, Governance "Council" wheel)
   scale their embedded SVG text down along with the whole graphic, so on phones the
   labels shrink past legibility. Every node they show is already repeated as a fully
   readable card in the section immediately below, so we drop the diagram itself below
   tablet width rather than ship unreadable decoration. */
@media (max-width: 640px){
  .hero-visual, .diagram-section{ display: none; }
}

/* Curriculum accordion: "Ancient / Modern" two-up comparison needs to stack on
   narrow phones, or both columns become too cramped to read. */
@media (max-width: 560px){
  .acc-body-inner .row{ grid-template-columns: 1fr; gap: 14px; }
}

/* Small-phone refinements (iPhone SE / mini and similar ~360–480px widths) */
@media (max-width: 480px){
  .container{ padding: 0 18px; }
  .section{ padding: 56px 0; }
  .section.tight{ padding: 40px 0; }
  .hero{ padding: 40px 0 48px; }
  .hero h1{ font-size: clamp(32px, 9vw, 42px); }
  .hero .lede{ font-size: 16.5px; }
  .hero-cta{ flex-direction: column; align-items: stretch; }
  .hero-cta .btn{ justify-content: center; }
  .page-header{ padding: 40px 0 32px; }
  .page-header h1{ font-size: clamp(28px, 8.5vw, 38px); }
  .page-header .lede{ font-size: 16px; }
  .section-head{ margin-bottom: 32px; }
  .section-head h2{ font-size: clamp(23px, 7vw, 29px); }
  .section-head .lede{ font-size: 16px; }
  .card{ padding: 22px 18px; }
  .card h3{ font-size: 19px; }
  .stat{ padding: 20px 16px; }
  .stat-row{ grid-template-columns: 1fr 1fr; }
  .btn{ padding: 13px 20px; font-size: 12px; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .steps{ gap: 22px; }
  .timeline{ gap: 26px; }
}

/* Respect notches / rounded display corners on modern phones (mainly landscape) */
@supports (padding: max(0px)){
  .site-nav .wrap{ padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .site-footer{ padding-bottom: max(30px, env(safe-area-inset-bottom)); }
}