/* ============================================================
   NCSSP 2026 — Conference Website
   Design tokens — pastel blue palette
   ============================================================ */
:root{
  --navy:        #0F2C4D;   /* deepest ink-blue, headings */
  --blue-900:    #12365F;   /* primary dark blue — nav, buttons, boxes */
  --blue-800:    #1B4A7C;   /* hover / secondary dark blue */
  --blue-700:    #2A5E92;
  --blue-600:    #3B76AC;   /* mid blue accent, links */
  --blue-400:    #6FA0CC;
  --blue-300:    #9AC2E3;
  --blue-200:    #C3DEF2;   /* borders on pastel panels */
  --blue-100:    #DCEBF8;   /* pastel blue panels */
  --blue-50:     #EFF6FC;   /* page background */
  --paper:       #FFFFFF;
  --ink:         #17293D;
  --ink-soft:    #4C647C;
  --ink-faint:   #7C93A8;
  --line:        #D3E4F1;
  --amber:       #C98A3E;   /* single warm accent, used sparingly */
  --yellow:      #F7C43C;   /* bright yellow — Register CTA only, for pop against navy */
  --cream:       #F8F5EE;   /* warm neutral, used to unify the about panel with its figure */
  --cream-line:  #ECE5D6;
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;
  --maxw:        1180px;
  --shadow-sm:   0 1px 2px rgba(15,44,77,0.06), 0 2px 8px rgba(15,44,77,0.05);
  --shadow:      0 8px 28px rgba(15,44,77,0.12);
  --shadow-lg:   0 22px 60px rgba(15,44,77,0.20);
}

/* theme accent colours — echo the sub-theme diagram, used only as small icon accents */
:root{
  --t1: #C46A6A;
  --t2: #7C6FB0;
  --t3: #A15FA0;
  --t4: #2F8F82;
  --t5: #2A5E92;
  --t6: #5B72B8;
  --t7: #4C8A5E;
  --t8: #C98A3E;
}


/* ============================================================
   Typography system
   Three roles: display (hero + page titles), head (section and card
   headings), body (running text and interface).  Swap the whole
   personality of the site by changing the three variables below —
   alternate pairings are listed underneath and previewed in
   type-preview.html.
   ============================================================ */
:root{
  /* Preset A — "Editorial": Cormorant Garamond / Spectral / Libre Franklin */
  --font-display: 'Cormorant Garamond', 'Spectral', Georgia, serif;
  --font-head:    'Spectral', Georgia, serif;
  --font-body:    'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  /* Optical corrections per preset — Cormorant runs small and light,
     so display sizes are scaled up and tracked in slightly. */
  --display-scale: 1.12;
  --display-weight: 600;
  --display-track: -0.015em;
}

/* Alternate presets — see type-preview.html
   B "Classical":     Marcellus / Marcellus / Karla
   C "Scholarly":     Spectral / Spectral / Archivo
   D "Institutional": Libre Baskerville / Libre Baskerville / Source Sans 3
*/
html[data-type="b"]{
  --font-display:'Marcellus', Georgia, serif;
  --font-head:'Marcellus', Georgia, serif;
  --font-body:'Karla', Arial, sans-serif;
  --display-scale:1.0; --display-weight:400; --display-track:0.005em;
}
html[data-type="c"]{
  --font-display:'Spectral', Georgia, serif;
  --font-head:'Spectral', Georgia, serif;
  --font-body:'Archivo', Arial, sans-serif;
  --display-scale:1.0; --display-weight:600; --display-track:-0.02em;
}
html[data-type="d"]{
  --font-display:'Libre Baskerville', Georgia, serif;
  --font-head:'Libre Baskerville', Georgia, serif;
  --font-body:'Source Sans 3', Arial, sans-serif;
  --display-scale:0.92; --display-weight:700; --display-track:-0.02em;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: radial-gradient(ellipse 1400px 900px at 50% 0%, #F6FAFE 0%, var(--blue-50) 60%);
  line-height: 1.62;
  font-size: 1.0rem;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.22;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.012em;
}
h1{ font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); }
p{ margin: 0 0 1em; max-width: 72ch; color: var(--ink-soft); }
a{ color: var(--blue-700); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap{ padding: 76px 0; }
.wrap.alt{ background: var(--blue-100); }
.wrap.deep{ background: var(--blue-900); }
.section-head{ margin-bottom: 36px; max-width:64ch; }
.section-head .eyebrow{ color: var(--blue-600); font-weight:600; font-size: 0.92rem; margin: 0 0 8px; }
.section-head h2{ font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin:0; }
.section-head p{ margin-top:12px; }
.rule{ height:3px; width:52px; background: var(--amber); margin: 16px 0 0; border:none; border-radius:2px; }
:focus-visible{ outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--navy); color:#fff; padding: 10px 16px; z-index: 200;
}
.skip-link:focus{ left: 16px; top: 16px; }

/* ---------- Top identity strip ---------- */
.id-strip{
  background: var(--navy);
  color: #CFE1F2;
  font-size: 0.78rem;
  padding: 7px 0;
  text-align: center;
  letter-spacing: 0.14em;
  display:flex; align-items:center; justify-content:center;
}
.id-strip strong{ color:#fff; }
.id-strip-inner{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:0.16em;
}
.id-strip-inner::before, .id-strip-inner::after{
  content:""; display:inline-block; width:34px; height:1px; background: var(--amber);
}

/* ---------- Header / Nav ----------
   Two tiers: a brand band (identity + register action) and a dedicated
   navigation band underneath.  Giving the menu its own full-width row is
   what keeps all nine sections on screen without a hamburger down to
   tablet widths. */
header.site-header{
  position: sticky; top:0; z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 6px 22px rgba(9,25,46,0.22);
}
.header-brand{ background: var(--blue-900); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 24px;
  max-width: 1340px; margin:0 auto;
  gap: 16px;
  transition: padding 0.2s ease;
}
.brand{ display:flex; align-items:center; gap:13px; flex: none; text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand-mark{
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); color: var(--blue-900); font-weight:600; font-size:0.95rem;
  letter-spacing:0.02em;
  flex: none; background: #fff;
  transition: width 0.2s ease, height 0.2s ease, font-size 0.2s ease;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text .t1{
  font-family: var(--font-display); font-weight: var(--display-weight); color:#fff;
  font-size: calc(1.28rem * var(--display-scale)); letter-spacing: 0.005em;
}
.brand-text .t2{
  font-size:0.72rem; color:#A9C8E6; letter-spacing:0.05em; font-weight:400;
}
.brand-actions{ display:flex; align-items:center; gap:12px; flex:none; }
.header-cta{
  display:inline-block; border:1.5px solid var(--yellow);
  background: var(--yellow); color: var(--navy);
  padding:8px 20px; border-radius:2px; font-size:0.8rem; font-weight:700;
  letter-spacing:0.02em; text-decoration:none;
  box-shadow: 0 2px 10px rgba(247,196,60,0.35);
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.header-cta:hover{ background:#FFDD73; border-color:#FFDD73; color: var(--navy); text-decoration:none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(247,196,60,0.45); }

/* Navigation band */
.nav-bar{
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.10);
}
nav.main-nav{ max-width: 1340px; margin: 0 auto; padding: 0 16px; }
nav.main-nav > ul{
  display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:nowrap;
}
nav.main-nav > ul > li{ position:relative; display:flex; }
nav.main-nav > ul > li > a,
nav.main-nav > ul > li > button.dropdown-toggle{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-body); font-size:0.82rem; font-weight:500; letter-spacing:0.012em;
  color:#D7E6F5; background:none; border:none; cursor:pointer;
  padding: 13px 14px;
  white-space: nowrap; position:relative;
  transition: color 0.15s ease, background 0.15s ease;
}
nav.main-nav .caret{
  width:0; height:0; flex:none;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:0.75;
  transition: transform 0.15s ease;
}
nav.main-nav > ul > li > a::after,
nav.main-nav > ul > li > button.dropdown-toggle::after{
  content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px;
  background: var(--amber); transform:scaleX(0); transform-origin:center;
  transition: transform 0.18s ease;
}
nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li > button.dropdown-toggle:hover,
nav.main-nav > ul > li.open > button.dropdown-toggle{
  color:#fff; text-decoration:none; background: rgba(255,255,255,0.07);
}
nav.main-nav > ul > li.has-dropdown:hover > button.dropdown-toggle .caret,
nav.main-nav > ul > li.open > button.dropdown-toggle .caret{ transform: rotate(180deg); }
nav.main-nav > ul > li.current > a,
nav.main-nav > ul > li.current > button.dropdown-toggle{ color:#fff; font-weight:600; }
nav.main-nav > ul > li.current > a::after,
nav.main-nav > ul > li.current > button.dropdown-toggle::after{ transform:scaleX(1); }

.dropdown{
  display:none;
  position:absolute; left:0; top:100%;
  min-width: 268px;
  background: var(--paper);
  border:1px solid var(--line); border-top:2px solid var(--amber);
  box-shadow: var(--shadow-lg);
  padding: 6px; margin-top:0;
  border-radius: 0 0 4px 4px;
}
nav.main-nav > ul > li:nth-last-child(-n+2) .dropdown{ left:auto; right:0; }
.dropdown li a{
  display:block; padding:9px 13px; font-size:0.86rem; color: var(--ink);
  border-radius: 3px; line-height:1.4;
}
.dropdown li a:hover{ background: var(--blue-100); color: var(--blue-900); text-decoration:none; }

@media (min-width: 1081px){
  li.has-dropdown:hover > .dropdown,
  li.has-dropdown:focus-within > .dropdown{ display:block; }
}
@media (min-width: 768px) and (max-width: 1080px){
  li.has-dropdown:hover > .dropdown,
  li.has-dropdown:focus-within > .dropdown{ display:block; }
  nav.main-nav > ul > li > a,
  nav.main-nav > ul > li > button.dropdown-toggle{ font-size:0.75rem; padding:12px 9px; gap:5px; }
  .header-inner{ padding:10px 18px; }
  .brand-text .t1{ font-size: calc(1.12rem * var(--display-scale)); }
  .brand-text .t2{ font-size:0.66rem; }
}
li.has-dropdown.open > .dropdown{ display:block; }

/* Compact state once the page scrolls — keeps the nav band close to the top */
header.site-header.compact .header-inner{ padding-top:6px; padding-bottom:6px; }
header.site-header.compact .brand-mark{ width:36px; height:36px; font-size:0.8rem; }
header.site-header.compact .brand-text .t2{ display:none; }

.hamburger{
  display:none; background:none; border:1px solid rgba(255,255,255,0.45); border-radius:3px;
  width:42px; height:38px; cursor:pointer; position:relative; flex:none;
}
.hamburger span, .hamburger span::before, .hamburger span::after{
  content:""; position:absolute; left:10px; right:10px; height:2px; background:#fff;
}
.hamburger span{ top:18px; }
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

@media (max-width: 767px){
  .hamburger{ display:block; }
  .header-cta{ padding:7px 14px; font-size:0.74rem; }
  .nav-bar{ background:none; border-top:none; }
  nav.main-nav{
    display:none; position:fixed; inset:0 0 0 auto; width:min(340px,88%); height:100vh;
    background:var(--paper); box-shadow: var(--shadow); padding: 18px; overflow-y:auto; z-index:120;
    max-width:none; margin:0;
  }
  nav.main-nav.open{ display:block; }
  nav.main-nav > ul{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; }
  nav.main-nav > ul > li{ display:block; }
  nav.main-nav > ul > li > a, nav.main-nav > ul > li > button.dropdown-toggle{
    width:100%; justify-content:space-between; padding:13px 10px; border-bottom:1px solid var(--line);
    color: var(--ink); font-size:0.95rem;
  }
  nav.main-nav > ul > li > a::after, nav.main-nav > ul > li > button.dropdown-toggle::after{ display:none; }
  nav.main-nav > ul > li > a:hover, nav.main-nav > ul > li > button.dropdown-toggle:hover,
  nav.main-nav > ul > li.open > button.dropdown-toggle{ color: var(--blue-900); background: var(--blue-100); }
  nav.main-nav > ul > li.current > a, nav.main-nav > ul > li.current > button.dropdown-toggle{ color:#fff; background:var(--blue-900); border-radius:3px; }
  .dropdown{ position:static; box-shadow:none; border:none; border-top:none; margin:0 0 0 12px; display:none; border-radius:0; min-width:0; padding:2px 0; }
  li.has-dropdown.open > .dropdown{ display:block; }
  .nav-scrim{ position:fixed; inset:0; background:rgba(15,44,77,0.45); z-index:110; display:none; }
  .nav-scrim.show{ display:block; }
}

/* ---------- Hero photo ---------- */
.hero-photo{
  position:relative;
  min-height: 84vh;
  display:flex; align-items:center; justify-content:center;
  padding: 120px 24px 170px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(9,25,46,0.82) 0%, rgba(11,32,56,0.62) 45%, rgba(14,40,68,0.42) 72%, rgba(18,54,95,0.30) 100%),
    url("assets/hansraj-hero.jpg") center 30% / cover no-repeat;
}
.hero-photo-content{ max-width: 820px; }
.hero-photo .hero-org{
  color:#DCEBF8; font-size:0.98rem; line-height:1.5; margin:0 0 22px;
  max-width: 620px; margin-left:auto; margin-right:auto;
}
.hero-photo .hero-label{
  color:#ffffff; font-family: var(--font-display); font-weight:700;
  font-size: calc(clamp(1.85rem, 4.6vw, 3.15rem) * var(--display-scale));
  line-height:1.18; margin:0 0 10px; letter-spacing: var(--display-track);
  text-align:center;
  text-shadow: 0 2px 22px rgba(5,14,26,0.55), 0 1px 4px rgba(5,14,26,0.6);
}
.hero-photo .hero-title{
  color:#fff; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: calc(clamp(2.7rem, 7vw, 4.8rem) * var(--display-scale));
  margin:0 0 10px; letter-spacing: var(--display-track); line-height:1.02;
}
.hero-photo .hero-subtitle{
  color:#EAF3FB; font-family: var(--font-display); font-size: calc(clamp(1.25rem, 2.6vw, 1.7rem) * var(--display-scale));
  margin:0 0 24px; font-weight:500; letter-spacing:0.01em;
}
.hero-photo .hero-title--full{
  color:#ffffff; font-weight:700;
  font-size: calc(clamp(1.85rem, 4.6vw, 3.15rem) * var(--display-scale));
  line-height:1.18; margin:0 0 24px;
  text-shadow: 0 2px 22px rgba(5,14,26,0.55), 0 1px 4px rgba(5,14,26,0.6);
}
.hero-photo .hero-title--full .hero-title-dash{ color:#F3D9AE; }
.hero-photo .hero-tagline{
  color:#fff; font-style:italic; font-weight:600; font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  max-width:620px; margin:0 auto; font-family: var(--font-head);
  text-shadow: 0 2px 16px rgba(5,14,26,0.55), 0 1px 3px rgba(5,14,26,0.6);
}
@media (max-width:600px){ .hero-photo{ min-height:72vh; padding:90px 20px 130px; } }

/* ---------- Intro band (organised by / collaborators / dates+venue) ---------- */
.intro-band{
  background: var(--blue-50);
  margin-top: -84px;
  position: relative;
  padding: 54px 0 10px;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 40px rgba(9,25,46,0.18);
}

/* Collaboration — bigger, highlighted block */
.collab-block{
  background: var(--blue-900);
  border-radius: var(--radius-lg);
  padding: 40px 36px 34px;
  margin: 0 auto 40px;
  box-shadow: var(--shadow);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.collab-label{
  color:#fff; font-family: var(--font-head); font-weight:600;
  font-size: clamp(1.15rem,2vw,1.4rem); margin:0 0 26px;
  text-align:center; width:100%;
}
.logo-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap: 20px;
  width:100%;
}
.logo-chip{
  display:flex; flex-direction:column; align-items:center; gap:12px; width:190px; text-align:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  padding: 20px 14px;
}
.logo-mark{
  width:72px; height:72px; border-radius:50%; border:1.5px solid var(--amber);
  background: #fff; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:700; color: var(--blue-900); font-size:1rem;
  overflow:hidden; padding:12px;
}
.logo-mark img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.logo-chip .name{ font-size:0.82rem; color:#EAF3FB; line-height:1.4; }

/* Dates + venue */
.info-bar{
  background: var(--paper);
  border: 1.5px solid var(--blue-200);
  border-radius: var(--radius);
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  max-width: 820px; margin: 0 auto 56px; overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.info-bar .cell{ padding: 24px 30px; display:flex; align-items:center; gap:14px; }
.info-bar .cell + .cell{ border-left:1.5px solid var(--blue-200); }
.info-bar .icon{
  width:44px; height:44px; border-radius:50%; flex:none;
  background: var(--blue-100); color: var(--blue-900);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.info-bar .label{ font-size:0.74rem; letter-spacing:0.06em; color: var(--ink-faint); margin-bottom:3px; text-transform:uppercase; }
.info-bar .value{ font-family: var(--font-head); font-size:1.08rem; color: var(--navy); font-weight:600; }
@media (max-width:560px){ .info-bar{ grid-template-columns:1fr; } .info-bar .cell + .cell{ border-left:none; border-top:1.5px solid var(--blue-200); } }

/* ---------- About + flowchart split ---------- */
/* One unified cream panel — copy and figure share the same background so the
   diagram (which already sits on a matching cream backdrop) blends straight
   into the text instead of floating in its own white box. */
.about-split{
  display:grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
  align-items:stretch; gap:0;
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.about-split .about-copy{ padding: 50px 16px 50px 50px; display:flex; flex-direction:column; justify-content:center; }
.about-split .about-copy p{ max-width:54ch; }
.about-split .about-figure{
  display:flex; align-items:stretch; justify-content:center;
  padding: 28px 34px 28px 4px;
}
.about-split .about-figure img{ width:100%; height:100%; object-fit:contain; object-position:center; }
@media (max-width: 960px){
  .about-split .about-copy{ padding: 44px 28px 44px 40px; }
  .about-split .about-figure{ padding: 24px 30px 24px 4px; }
}
@media (max-width: 760px){
  .about-split{ grid-template-columns: 1fr; }
  .about-split .about-copy{ padding: 40px 30px 6px; }
  .about-split .about-figure{ order:-1; padding: 28px 20px 0; max-width:520px; margin:0 auto; }
  .about-split .about-figure img{ height:auto; }
}

/* ---------- Subtle theme watermarks (Sanskrit / Science / Philosophy) ----------
   Faint, single-colour motifs on light panels only — echoes the three
   watermark symbols on the printed poster. Never placed over text. */
.motif-panel{ position:relative; overflow:hidden; }
.motif-panel > .container{ position:relative; z-index:1; }

.motif-atom::before{
  content:""; position:absolute; left:-64px; top:-58px; z-index:0;
  width:280px; height:280px; opacity:0.06; pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2312365F' stroke-width='2.2'%3E%3Cellipse cx='50' cy='50' rx='42' ry='16'/%3E%3Cellipse cx='50' cy='50' rx='42' ry='16' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='42' ry='16' transform='rotate(120 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='5.5' fill='%2312365F'/%3E%3C/svg%3E") center/contain no-repeat;
}
.motif-lotus::after{
  content:""; position:absolute; right:-58px; top:-58px; z-index:0;
  width:300px; height:300px; opacity:0.06; pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2312365F' stroke-width='1.4'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3C/g%3E%3Cg fill='%2312365F'%3E%3Cellipse cx='50' cy='23' rx='7' ry='16'/%3E%3Cellipse cx='50' cy='23' rx='7' ry='16' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='23' rx='7' ry='16' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='23' rx='7' ry='16' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='23' rx='7' ry='16' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='23' rx='7' ry='16' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='23' rx='7' ry='16' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='23' rx='7' ry='16' transform='rotate(315 50 50)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:700px){
  .motif-atom::before{ width:190px; height:190px; }
  .motif-lotus::after{ width:200px; height:200px; }
}

/* ---------- Explore tab grid ---------- */
.tab-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  padding-top: 6px;
}
.tab-grid a{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: var(--paper); color: var(--blue-900); text-decoration:none;
  font-family: var(--font-head); font-weight:600; font-size:1rem; letter-spacing:0.005em;
  border-radius: var(--radius); padding: 26px 14px; min-height:88px;
  border: 1.5px solid var(--blue-200);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.tab-grid a:hover{ background: var(--blue-900); color:#fff; border-color: var(--blue-900); text-decoration:none; transform: translateY(-2px); }
@media (max-width:900px){ .tab-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:600px){ .tab-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:420px){ .tab-grid{ grid-template-columns: 1fr;} }

/* ---------- Important dates strip ---------- */
.dates-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.date-card{
  background: var(--paper); border:1.5px solid var(--blue-200); border-top:4px solid var(--blue-900);
  border-radius: var(--radius); padding: 22px 20px;
}
.date-card .d-label{ font-size:0.82rem; color: var(--ink-soft); margin-bottom:8px; }
.date-card .d-value{ font-family: var(--font-head); font-size:1.32rem; color: var(--navy); font-weight:600; }
@media (max-width:760px){ .dates-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:460px){ .dates-grid{ grid-template-columns: 1fr;} }

/* ---------- Card grids (themes / speakers) ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .card-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){ .card-grid{ grid-template-columns: 1fr;} }

.theme-card{
  background:#fff; border:1.5px solid var(--blue-200); border-radius: var(--radius);
  padding:24px 22px; height:100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.theme-card:has(a.card-link:hover){ box-shadow: var(--shadow-sm); transform: translateY(-3px); border-color: var(--blue-400); }
.theme-card .icon{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:14px; background: var(--tc, var(--blue-100)); border: 1.5px solid var(--tc, var(--blue-300));
}
.theme-card h3{ font-size:1.05rem; margin-bottom:6px; }
.theme-card p{ font-size:0.92rem; color: var(--ink-soft); margin:0; }
.theme-card a.card-link{ display:block; color:inherit; }
.theme-card a.card-link:hover{ text-decoration:none; }
.theme-card a.card-link:hover h3{ color: var(--blue-800); }

.speaker-card{ text-align:center; background:#fff; border:1.5px solid var(--blue-200); border-radius: var(--radius); padding:28px 20px; }
.speaker-photo{
  width:118px; height:118px; border-radius:50%; margin:0 auto 16px;
  background: var(--blue-100); border:2px solid var(--blue-400);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); font-size:0.78rem; text-align:center; padding:8px;
  overflow:hidden;
}
.speaker-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.speaker-card h3{ font-size:1.02rem; margin-bottom:2px; }
.speaker-card .role{ font-size:0.86rem; color: var(--ink-soft); }

/* ---------- Committee tables/cards ---------- */
.committee-block{ margin-bottom:52px; }
.committee-block h2{ font-size:1.4rem; }
.people-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:16px; }
@media (max-width:700px){ .people-grid{ grid-template-columns:1fr; } }
.person-card{
  border:1.5px solid var(--blue-200); border-left:4px solid var(--blue-900); border-radius: var(--radius-sm);
  padding: 13px 16px; background:#fff;
}
.person-card .p-name{ font-weight:600; color: var(--navy); }
.person-card .p-role{ font-size:0.88rem; color: var(--ink-soft); }
.solo-people{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:700px){ .solo-people{ grid-template-columns:1fr; } }

/* ---------- Placeholder / coming soon ---------- */
.placeholder-box{
  border: 1.5px dashed var(--blue-300); background: var(--blue-100);
  border-radius: var(--radius); padding: 30px 24px; text-align:center;
}
.placeholder-box .ps-title{ font-family: var(--font-head); color: var(--navy); font-size:1.1rem; margin-bottom:6px; }
.placeholder-box p{ margin:0 auto; color: var(--ink-soft); }

/* Epigraph block — used to open the CVYS description with the Sanskrit verse + tagline */
.epigraph{
  border-left: 3px solid var(--amber);
  padding: 4px 0 4px 20px;
  margin: 0 0 26px;
}
.epigraph .verse{
  font-family: var(--font-display); font-style:italic; color: var(--navy);
  font-size: clamp(1.15rem, 2vw, 1.4rem); margin:0 0 6px; font-weight:600;
}
.epigraph .tagline{
  font-family: var(--font-head); color: var(--blue-600);
  font-size:0.98rem; letter-spacing:0.02em; margin:0; font-style:italic;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; background: var(--blue-900); color:#fff !important; text-decoration:none;
  padding: 13px 26px; border-radius: var(--radius-sm); font-weight:600; border:none; cursor:pointer; font-size:0.95rem;
  transition: background 0.15s ease;
}
.btn:hover{ background: var(--navy); text-decoration:none; }
.btn.outline{ background:transparent; color: var(--blue-900) !important; border:1.5px solid var(--blue-900); }
.btn.outline:hover{ background: var(--blue-100); }

/* ---------- Breadcrumb / page header ---------- */
.page-hero{ background: linear-gradient(180deg, var(--blue-900), var(--blue-800)); padding: 52px 0; text-align:center; }
.page-hero .crumb{ font-size:0.85rem; color:#BFDBF2; margin-bottom:10px; }
.page-hero .crumb a{ color:#fff; }
.page-hero h1{
  margin:0; color:#fff; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: calc(clamp(1.8rem,3.4vw,2.5rem) * var(--display-scale)); letter-spacing: var(--display-track);
}

/* ---------- Fee table ---------- */
.fee-table{ width:100%; border-collapse:collapse; margin-top:12px; border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow-sm); }
.fee-table th, .fee-table td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--line); }
.fee-table th{ background: var(--blue-900); color:#fff; font-family: var(--font-head); font-weight:600; }
.fee-table td{ background:#fff; }
.fee-table tr:nth-child(even) td{ background: var(--blue-50); }

/* ---------- Timeline (dates) ---------- */
.timeline{ display:flex; flex-direction:column; gap:0; border-left:2px solid var(--blue-300); margin-left:8px; }
.timeline .t-item{ position:relative; padding: 4px 0 28px 28px; }
.timeline .t-item::before{
  content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%;
  background: var(--blue-900); border:2px solid #fff; box-shadow:0 0 0 2px var(--blue-300);
}
.timeline .t-date{ font-family: var(--font-head); color: var(--navy); font-size:1.12rem; font-weight:600; }
.timeline .t-label{ color: var(--ink-soft); font-size:0.92rem; }

/* ---------- Form ---------- */
.form-grid{ display:grid; gap:18px; max-width:560px; }
.form-grid label{ display:block; font-size:0.88rem; margin-bottom:6px; color: var(--ink-soft); }
.form-grid input, .form-grid textarea{
  width:100%; padding:12px 13px; border:1.5px solid var(--blue-200); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background:#fff;
}
.form-grid input:focus, .form-grid textarea:focus{ border-color: var(--blue-700); outline:none; }
.form-note{ font-size:0.85rem; color: var(--ink-faint); margin-top:12px; }

/* ---------- Map ---------- */
.map-frame{
  border:1.5px dashed var(--blue-300); background: var(--blue-100); border-radius: var(--radius);
  min-height:300px; display:flex; align-items:center; justify-content:center; color: var(--ink-soft); text-align:center; padding:20px;
}

/* ---------- Poster / image showcase ---------- */
.poster-frame{
  max-width:480px; margin:0 auto; border:1.5px solid var(--blue-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding:14px; background:#fff;
}
.poster-frame img{ border-radius: 10px; }

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--navy); color:#CFE1F2; margin-top:0; }
.footer-inner{ max-width: var(--maxw); margin:0 auto; padding: 52px 28px 28px; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:36px; }
@media (max-width:760px){ .footer-inner{ grid-template-columns:1fr; gap:28px; } }
.footer-inner h4{ color:#fff; font-size:0.95rem; margin-bottom:14px; font-family: var(--font-head); }
.footer-inner p{ color:#AFC9E1; font-size:0.9rem; margin:0 0 4px; max-width:none; }
.footer-inner ul li{ margin-bottom:9px; }
.footer-inner ul li a{ color:#DCEBF8; font-size:0.9rem; }
.footer-inner ul li a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.14); text-align:center; padding:18px; font-size:0.8rem; color:#8FB0CE; }

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