@charset "UTF-8";
/* ==========================================================================
   ಕರ್ನಾಟಕ ಸಂಘ (ರಿ.), ಮಂಡ್ಯ — Homepage design system
   Scoped to the redesigned homepage only. Does not touch existing pages.
   Author: redesign pass, 2026. No framework dependency.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Palette — 70% neutral / 20% ink / 10% accent */
  --ks-cream:        #FBF7F0;
  --ks-cream-deep:   #F4EDE1;
  --ks-surface:      #FFFFFF;

  --ks-ink:          #1F1A16;
  --ks-ink-soft:     #4A4139;
  --ks-ink-muted:    #6B6055;

  --ks-maroon:       #7A1B24;
  --ks-maroon-deep:  #58121A;
  --ks-maroon-tint:  #F5E9E9;

  --ks-gold:         #A97B2C;
  --ks-gold-soft:    #C9A059;
  --ks-gold-tint:    #F7EFE0;

  --ks-rule:         #E5D9C6;
  --ks-rule-soft:    #F0E8DA;

  /* Type */
  --ks-serif: "Noto Serif Kannada", "Tiro Kannada", Georgia, serif;
  --ks-sans:  "Noto Sans Kannada", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing scale (8px base) */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4rem;   --sp-7: 6rem;    --sp-8: 8rem;

  --ks-radius:   4px;
  --ks-radius-lg: 6px;
  --ks-shadow:   0 1px 2px rgba(31,26,22,.04), 0 8px 24px rgba(31,26,22,.06);
  --ks-shadow-lift: 0 2px 4px rgba(31,26,22,.05), 0 16px 40px rgba(31,26,22,.10);

  --ks-maxw: 1240px;
  --ks-ease: cubic-bezier(.22,.61,.36,1);

  /* Driven by the A- / A / A+ control */
  --ks-scale: 1;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.ks {
  margin: 0;
  font-family: var(--ks-sans);
  font-size: calc(1.0625rem * var(--ks-scale));   /* 17px — Kannada needs size */
  line-height: 1.85;                               /* Kannada matras need room */
  color: var(--ks-ink-soft);
  background: var(--ks-cream);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ks img { max-width: 100%; height: auto; display: block; }

.ks h1, .ks h2, .ks h3, .ks h4 {
  font-family: var(--ks-serif);
  color: var(--ks-ink);
  font-weight: 600;
  line-height: 1.42;      /* tighter than body, still safe for Kannada */
  margin: 0 0 var(--sp-2);
  letter-spacing: 0;
}
.ks h1 { font-size: calc(clamp(2rem, 1.15rem + 3.6vw, 3.75rem) * var(--ks-scale)); font-weight: 700; line-height: 1.28; }
.ks h2 { font-size: calc(clamp(1.55rem, 1.1rem + 1.9vw, 2.5rem)  * var(--ks-scale)); }
.ks h3 { font-size: calc(clamp(1.15rem, 1rem + .6vw, 1.4rem)     * var(--ks-scale)); }
.ks p  { margin: 0 0 var(--sp-2); }

.ks a { color: var(--ks-maroon); text-decoration: none; transition: color .2s var(--ks-ease); }
.ks a:hover { color: var(--ks-maroon-deep); }

.ks ul, .ks ol { margin: 0; padding: 0; list-style: none; }

/* Visible, unmissable focus — required for keyboard users */
.ks :focus-visible {
  outline: 3px solid var(--ks-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.ks :focus:not(:focus-visible) { outline: none; }

.ks a.ks-skip {
  position: fixed; left: 0; top: 0; z-index: 999;
  transform: translateY(-200%);
  background: var(--ks-maroon); color: #fff;
  padding: .85rem 1.5rem; font-weight: 600; border-radius: 0 0 var(--ks-radius) 0;
  transition: transform .2s var(--ks-ease);
}
.ks a.ks-skip:focus { transform: translateY(0); color: #fff; }

.ks-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.ks-wrap { width: 100%; max-width: var(--ks-maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

.ks-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.ks-section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.ks-section--cream { background: var(--ks-cream-deep); }
.ks-section--ink   { background: var(--ks-ink); color: #D9D0C6; }
.ks-section--ink h2, .ks-section--ink h3 { color: #FBF7F0; }

/* Section eyebrow: short gold rule + label */
.ks-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--ks-sans); font-size: calc(.8125rem * var(--ks-scale));
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ks-gold); margin-bottom: var(--sp-1);
}
.ks-eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: var(--ks-gold-soft); flex: none; }
.ks-section--ink .ks-eyebrow { color: var(--ks-gold-soft); }

.ks-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ks-head--center { margin-inline: auto; text-align: center; }
.ks-head--center .ks-eyebrow { justify-content: center; }
.ks-head p { color: var(--ks-ink-muted); margin-bottom: 0; }

.ks-lede { font-size: calc(1.125rem * var(--ks-scale)); color: var(--ks-ink-soft); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.ks-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ks-sans); font-size: calc(1rem * var(--ks-scale)); font-weight: 600;
  line-height: 1.4; padding: .85rem 1.6rem; border-radius: var(--ks-radius);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .22s var(--ks-ease), color .22s var(--ks-ease),
              border-color .22s var(--ks-ease), transform .22s var(--ks-ease);
}
.ks-btn svg { flex: none; }
.ks .ks-btn--primary { background: var(--ks-maroon); color: #fff; border-color: var(--ks-maroon); }
.ks .ks-btn--primary:hover { background: var(--ks-maroon-deep); border-color: var(--ks-maroon-deep); color: #fff; transform: translateY(-2px); }
.ks .ks-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.ks .ks-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; transform: translateY(-2px); }
.ks .ks-btn--outline { background: transparent; color: var(--ks-maroon); border-color: var(--ks-rule); }
.ks .ks-btn--outline:hover { border-color: var(--ks-maroon); background: var(--ks-maroon-tint); transform: translateY(-2px); }

.ks-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--ks-maroon);
}
.ks-link .ks-arrow { transition: transform .22s var(--ks-ease); }
.ks-link:hover .ks-arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. UTILITY BAR
   -------------------------------------------------------------------------- */
.ks-utility {
  background: var(--ks-ink); color: #C9BFB2;
  font-size: calc(.8125rem * var(--ks-scale)); line-height: 1.6;
}
.ks-utility .ks-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; flex-wrap: wrap; }
.ks-utility a { color: #C9BFB2; }
.ks-utility a:hover { color: #fff; }
.ks-utility__left, .ks-utility__right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.ks-utility__lang { color: var(--ks-gold-soft); font-weight: 600; }
.ks-utility__sep { width: 1px; height: 1rem; background: rgba(255,255,255,.18); }

.ks-textsize { display: inline-flex; align-items: center; gap: .3rem; }
.ks-textsize span { color: #8E8479; }
.ks-textsize button {
  font-family: var(--ks-sans); background: transparent; color: #C9BFB2;
  border: 1px solid rgba(255,255,255,.22); border-radius: 3px;
  width: 1.7rem; height: 1.7rem; line-height: 1; cursor: pointer; padding: 0;
  font-size: .78rem; transition: all .2s var(--ks-ease);
}
.ks-textsize button:hover { background: rgba(255,255,255,.12); color: #fff; }
.ks-textsize button[aria-pressed="true"] { background: var(--ks-gold); border-color: var(--ks-gold); color: #1F1A16; font-weight: 700; }

.ks-contrast {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 1px solid rgba(255,255,255,.22); border-radius: 3px;
  color: #C9BFB2; font-family: var(--ks-sans); font-size: calc(.8125rem * var(--ks-scale));
  padding: .2rem .6rem; cursor: pointer; transition: all .2s var(--ks-ease);
}
.ks-contrast:hover { background: rgba(255,255,255,.12); color: #fff; }

/* --------------------------------------------------------------------------
   6. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.ks-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--ks-surface);
  border-bottom: 1px solid var(--ks-rule);
  transition: box-shadow .25s var(--ks-ease);
}
.ks-header.is-stuck { box-shadow: 0 2px 16px rgba(31,26,22,.10); }

.ks-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .85rem; }

.ks-brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ks-brand__mark {
  width: 58px; height: 58px; flex: none; border-radius: 50%;
  border: 2px solid var(--ks-gold-soft); padding: 3px; background: #fff;
  object-fit: contain;
}
.ks-brand__text { min-width: 0; }
.ks-brand__name {
  display: block; font-family: var(--ks-serif); font-weight: 700;
  font-size: calc(clamp(1.05rem, .9rem + .5vw, 1.4rem) * var(--ks-scale));
  color: var(--ks-maroon); line-height: 1.3;
}
.ks-brand__meta {
  display: block; font-size: calc(.75rem * var(--ks-scale)); letter-spacing: .08em;
  color: var(--ks-ink-muted); text-transform: uppercase; font-weight: 600;
}

/* --- desktop nav --- */
.ks-nav { display: none; }
.ks-nav__list { display: flex; align-items: center; gap: .15rem; position: relative; }
.ks-nav__item { position: relative; }
/* Mega panels anchor to the whole nav row, never to their own <li>, so a
   wide panel on a right-hand item can never push the page sideways. */
.ks-nav__item--mega { position: static; }
.ks-nav__link, .ks-nav__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--ks-sans); font-size: calc(.95rem * var(--ks-scale)); font-weight: 600;
  color: var(--ks-ink); background: none; border: 0; cursor: pointer;
  padding: .7rem .7rem; border-radius: var(--ks-radius); line-height: 1.4;
  transition: color .2s var(--ks-ease), background .2s var(--ks-ease);
}
.ks-nav__link::after, .ks-nav__toggle::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .32rem;
  height: 2px; background: var(--ks-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ks-ease);
}
.ks-nav__link:hover, .ks-nav__toggle:hover,
.ks-nav__item.is-open > .ks-nav__toggle { color: var(--ks-maroon); }
.ks-nav__link:hover::after, .ks-nav__toggle:hover::after,
.ks-nav__item.is-open > .ks-nav__toggle::after,
.ks-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.ks-nav__link[aria-current="page"] { color: var(--ks-maroon); }

.ks-nav__caret { width: 10px; height: 10px; transition: transform .24s var(--ks-ease); }
.ks-nav__item.is-open .ks-nav__caret { transform: rotate(180deg); }

/* --- dropdown / mega panel --- */
.ks-panel {
  position: absolute; top: calc(100% + .55rem); left: 0; z-index: 210;
  background: var(--ks-surface); border: 1px solid var(--ks-rule);
  border-top: 3px solid var(--ks-maroon);
  border-radius: 0 0 var(--ks-radius-lg) var(--ks-radius-lg);
  box-shadow: var(--ks-shadow-lift);
  padding: 1.25rem; min-width: 21rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ks-ease), transform .22s var(--ks-ease), visibility .22s;
}
.ks-nav__item.is-open > .ks-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.ks-panel--right { left: auto; right: 0; }
.ks-panel--mega,
.ks-panel--mega-wide { left: 0; right: 0; width: auto; }

.ks-panel__grid { display: grid; gap: .15rem 1.5rem; }
.ks-panel--mega .ks-panel__grid      { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ks-panel--mega-wide .ks-panel__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

.ks-panel__title {
  font-family: var(--ks-sans); font-size: calc(.75rem * var(--ks-scale));
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--ks-gold); margin: 0 0 .5rem; padding: 0 .65rem;
}
.ks-panel a {
  display: block; padding: .5rem .65rem; border-radius: var(--ks-radius);
  color: var(--ks-ink-soft); font-size: calc(.9375rem * var(--ks-scale));
  line-height: 1.55; border-left: 2px solid transparent;
  transition: background .18s var(--ks-ease), color .18s var(--ks-ease), border-color .18s var(--ks-ease);
}
.ks-panel a:hover { background: var(--ks-cream); color: var(--ks-maroon); border-left-color: var(--ks-gold); }

/* --- hamburger --- */
.ks-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; flex: none;
  background: var(--ks-cream); border: 1px solid var(--ks-rule);
  border-radius: var(--ks-radius); cursor: pointer;
}
.ks-burger span { display: block; height: 2px; width: 100%; background: var(--ks-ink); border-radius: 2px; transition: transform .28s var(--ks-ease), opacity .2s var(--ks-ease); }
.ks-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ks-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ks-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- mobile drawer --- */
/* Closed state uses clip-path, not translateX(100%): a fixed element pushed
   off-screen by a transform still enlarges the document's scrollable width in
   Chrome, which shows up as a phantom horizontal scrollbar on tablet/mobile.
   Clipping reveals the panel from the right with no layout side-effects. */
.ks-drawer {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ks-surface);
  display: flex; flex-direction: column;
  clip-path: inset(0 0 0 100%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: clip-path .34s var(--ks-ease), opacity .26s var(--ks-ease), visibility .34s;
  overscroll-behavior: contain;
}
.ks-drawer.is-open { clip-path: inset(0); opacity: 1; visibility: visible; pointer-events: auto; }
.ks-drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2rem); border-bottom: 1px solid var(--ks-rule); flex: none;
}
.ks-drawer__close {
  width: 44px; height: 44px; border-radius: var(--ks-radius);
  background: var(--ks-cream); border: 1px solid var(--ks-rule);
  color: var(--ks-ink); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.ks-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: .5rem clamp(1rem, 4vw, 2rem) 3rem; -webkit-overflow-scrolling: touch; }

.ks-acc { border-bottom: 1px solid var(--ks-rule-soft); }
.ks-acc__btn, .ks-acc__solo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  font-family: var(--ks-serif); font-size: calc(1.05rem * var(--ks-scale)); font-weight: 600;
  color: var(--ks-ink); background: none; border: 0; cursor: pointer;
  padding: 1rem .25rem; text-align: start; line-height: 1.5;
}
.ks-acc__solo { display: block; }
.ks-acc__btn[aria-expanded="true"] { color: var(--ks-maroon); }
.ks-acc__icon { flex: none; width: 12px; transition: transform .26s var(--ks-ease); }
.ks-acc__btn[aria-expanded="true"] .ks-acc__icon { transform: rotate(180deg); }
.ks-acc__panel { display: none; padding: 0 .25rem 1rem; }
.ks-acc__panel.is-open { display: block; animation: ksFade .28s var(--ks-ease); }
.ks-acc__panel a {
  display: block; padding: .6rem .85rem; border-left: 2px solid var(--ks-rule);
  color: var(--ks-ink-soft); font-size: calc(.95rem * var(--ks-scale)); line-height: 1.6;
}
.ks-acc__panel a:hover { border-left-color: var(--ks-gold); color: var(--ks-maroon); background: var(--ks-cream); }

@keyframes ksFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

body.ks-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. ANNOUNCEMENT STRIP  (replaces <marquee>)
   -------------------------------------------------------------------------- */
.ks-notice { background: var(--ks-maroon); color: #F6E7E7; }
.ks-notice .ks-wrap { display: flex; align-items: flex-start; gap: 1rem; padding-block: .8rem; flex-wrap: wrap; }
.ks-notice__tag {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ks-gold); color: #2A1D08;
  font-size: calc(.75rem * var(--ks-scale)); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 2px;
}
.ks-notice__text { margin: 0; font-size: calc(.95rem * var(--ks-scale)); line-height: 1.7; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.ks-hero { position: relative; isolation: isolate; background: var(--ks-ink); overflow: hidden; }
.ks-hero__media { position: absolute; inset: 0; z-index: -2; }
.ks-hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s var(--ks-ease), transform 9s linear;
  transform: scale(1.06);
}
.ks-hero__slide.is-active { opacity: 1; transform: scale(1); }
.ks-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.ks-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(20,14,11,.94) 0%, rgba(20,14,11,.80) 38%, rgba(20,14,11,.38) 70%, rgba(20,14,11,.28) 100%),
    linear-gradient(to top, rgba(20,14,11,.72) 0%, transparent 45%);
}
.ks-hero__inner { position: relative; padding-block: clamp(4rem, 11vw, 8.5rem); max-width: 44rem; }
.ks-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ks-gold-soft); font-size: calc(.8125rem * var(--ks-scale));
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem;
}
.ks-hero__eyebrow::before { content: ""; width: 2.5rem; height: 2px; background: var(--ks-gold-soft); }
.ks-hero h1 { color: #fff; margin-bottom: 1.1rem; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.ks-hero__sub {
  color: #E8DFD3; font-size: calc(clamp(1rem, .95rem + .35vw, 1.2rem) * var(--ks-scale));
  line-height: 1.85; margin-bottom: 2rem; max-width: 38rem;
}
.ks-hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; }

.ks-hero__dots { display: flex; gap: .5rem; margin-top: 2.5rem; }
.ks-hero__dots button {
  width: 2.25rem; height: 3px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.32); border-radius: 2px;
  transition: background .25s var(--ks-ease);
}
.ks-hero__dots button[aria-selected="true"] { background: var(--ks-gold); }

/* Facts rail sitting on the hero's lower edge */
.ks-facts { background: var(--ks-surface); border-bottom: 1px solid var(--ks-rule); }
.ks-facts__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.ks-facts__item {
  padding: 1.5rem 1rem; text-align: center;
  border-inline-end: 1px solid var(--ks-rule-soft); border-block-end: 1px solid var(--ks-rule-soft);
}
.ks-facts__item:nth-child(2n) { border-inline-end: 0; }
.ks-facts__num {
  display: block; font-family: var(--ks-serif); font-weight: 700;
  font-size: calc(clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) * var(--ks-scale));
  color: var(--ks-maroon); line-height: 1.2;
}
.ks-facts__label { display: block; font-size: calc(.875rem * var(--ks-scale)); color: var(--ks-ink-muted); margin-top: .2rem; }

/* --------------------------------------------------------------------------
   9. INTRODUCTION (two column)
   -------------------------------------------------------------------------- */
.ks-intro__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ks-intro__grid--top { align-items: start; }
@media (min-width: 992px) { .ks-intro__grid--top > :first-child { position: sticky; top: 7.5rem; } }
.ks-intro__figure { position: relative; margin: 0; }
.ks-intro__figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--ks-radius-lg);
}
.ks-intro__figure::before {
  content: ""; position: absolute; inset: -.9rem -.9rem auto auto;
  width: 55%; height: 55%; border: 2px solid var(--ks-gold-soft);
  border-left: 0; border-bottom: 0; border-radius: 0 var(--ks-radius-lg) 0 0; z-index: -1;
}
.ks-intro__figure figcaption {
  font-size: calc(.8125rem * var(--ks-scale)); color: var(--ks-ink-muted);
  margin-top: .75rem; font-style: italic;
}

/* --------------------------------------------------------------------------
   9.1 ARTICLE FIGURE GROUPS  (.ks-figrow / .ks-figure)

   These classes were in the markup of aboutus.php but had no rule anywhere
   in this stylesheet, so .ks-figrow was an ordinary <div>: its <figure>
   children fell back to block flow, each <img> drew at its intrinsic width
   (300px for the historic scans), and the rest of the row stayed empty.
   That — not a narrow column value — was the cause of the left-stacked
   photos. The rules below make it a real grid.

   auto-fit rather than a fixed three-track list is deliberate: it yields
   1 / 2 / 3 columns as the container grows, AND when a group holds only two
   figures the empty third track collapses so the pair stretches to fill the
   row instead of leaving a third of it blank. Every group on the page today
   holds two figures, so a hard `repeat(3, 1fr)` would have re-created the
   same empty-space complaint at desktop width.
   -------------------------------------------------------------------------- */
.ks-figrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

.ks-figrow > figure,
.ks-figure { margin: 0; }

/* Equal-height frames: one aspect ratio across equal-width tracks, so the
   photos line up regardless of their intrinsic sizes. */
.ks-figrow > figure img,
.ks-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--ks-cream-deep);
  border: 1px solid var(--ks-rule);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-shadow);
  transition: box-shadow .3s var(--ks-ease);
}
.ks-figrow > figure:hover img,
.ks-figure:hover img { box-shadow: var(--ks-shadow-lift); }

/* Caption below its own frame, styled like .ks-intro__figure figcaption. */
.ks-figrow figcaption,
.ks-figure figcaption {
  margin-top: .75rem;
  font-size: calc(.8125rem * var(--ks-scale));
  line-height: 1.6;
  color: var(--ks-ink-muted);
  font-style: italic;
}

/* Single full-width plate; less letterboxing on narrow screens. */
.ks-figure--wide img { aspect-ratio: 16 / 9; }
@media (max-width: 575px) {
  .ks-figure--wide img { aspect-ratio: 4 / 3; }
}

/* Separation between stacked blocks inside one section. Also undefined
   until now, which is why these figure rows sat flush against the
   paragraphs above them. */
.ks-stack { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* --------------------------------------------------------------------------
   10. HERITAGE TIMELINE
   -------------------------------------------------------------------------- */
.ks-timeline { position: relative; margin-top: var(--sp-4); padding-left: 2.25rem; }
.ks-timeline::before {
  content: ""; position: absolute; left: .5rem; top: .6rem; bottom: .6rem;
  width: 2px; background: linear-gradient(to bottom, var(--ks-gold-soft), var(--ks-rule));
}
.ks-tl { position: relative; padding-bottom: 2.25rem; }
.ks-tl:last-child { padding-bottom: 0; }
.ks-tl::before {
  content: ""; position: absolute; left: -2.25rem; top: .55rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--ks-cream-deep); border: 3px solid var(--ks-gold);
  transform: translateX(.0rem);
}
.ks-tl__year {
  display: inline-block; font-family: var(--ks-serif); font-weight: 700;
  font-size: calc(1.35rem * var(--ks-scale)); color: var(--ks-maroon); line-height: 1.3;
}
.ks-tl__title { font-family: var(--ks-sans); font-weight: 600; color: var(--ks-ink); margin: 0 0 .2rem; font-size: calc(1.05rem * var(--ks-scale)); }
.ks-tl p { margin: 0; color: var(--ks-ink-muted); font-size: calc(.95rem * var(--ks-scale)); }

/* --------------------------------------------------------------------------
   11. CARDS (activities)
   -------------------------------------------------------------------------- */
.ks-grid { display: grid; gap: 1.5rem; }
.ks-grid--3 { grid-template-columns: 1fr; }

.ks-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ks-surface); border: 1px solid var(--ks-rule);
  border-radius: var(--ks-radius-lg); padding: 2rem 1.75rem;
  transition: border-color .26s var(--ks-ease), transform .26s var(--ks-ease), box-shadow .26s var(--ks-ease);
  overflow: hidden;
}
.ks-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--ks-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ks-ease);
}
.ks-card:hover { border-color: var(--ks-gold-soft); transform: translateY(-4px); box-shadow: var(--ks-shadow); }
.ks-card:hover::before { transform: scaleX(1); }
.ks-card:focus-within { border-color: var(--ks-gold-soft); }

.ks-card__icon {
  width: 3rem; height: 3rem; margin-bottom: 1.15rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ks-gold-tint); color: var(--ks-maroon);
}
.ks-card__icon svg { width: 1.5rem; height: 1.5rem; }
.ks-card h3 { margin-bottom: .5rem; }
.ks-card p { color: var(--ks-ink-muted); font-size: calc(.95rem * var(--ks-scale)); margin-bottom: 1.25rem; }
.ks-card__foot { margin-top: auto; }
/* whole-card click target without nesting interactive elements */
.ks-card__stretch::after { content: ""; position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   12. AWARDS
   -------------------------------------------------------------------------- */
.ks-award {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--ks-surface); border: 1px solid var(--ks-rule);
  border-radius: var(--ks-radius-lg); padding: 1.4rem 1.5rem;
  position: relative;
  transition: border-color .24s var(--ks-ease), transform .24s var(--ks-ease), box-shadow .24s var(--ks-ease);
}
.ks-award:hover { border-color: var(--ks-gold-soft); transform: translateY(-3px); box-shadow: var(--ks-shadow); }
.ks-award__seal {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ks-maroon-tint); color: var(--ks-maroon);
  font-family: var(--ks-serif); font-weight: 700; font-size: .95rem;
}
.ks-award h3 { font-size: calc(1.05rem * var(--ks-scale)); margin: 0 0 .15rem; line-height: 1.5; }
.ks-award span { font-size: calc(.8125rem * var(--ks-scale)); color: var(--ks-ink-muted); }

.ks-more { margin-top: 1.75rem; border: 1px solid var(--ks-rule); border-radius: var(--ks-radius-lg); background: var(--ks-surface); }
.ks-more > summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.5rem;
  font-family: var(--ks-sans); font-weight: 600; color: var(--ks-maroon);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ks-more > summary::-webkit-details-marker { display: none; }
.ks-more > summary .ks-acc__icon { transition: transform .26s var(--ks-ease); }
.ks-more[open] > summary .ks-acc__icon { transform: rotate(180deg); }
.ks-more__body { padding: 0 1.5rem 1.5rem; display: grid; gap: .1rem 1.5rem; }
.ks-more__body a {
  display: block; padding: .55rem .75rem; border-left: 2px solid var(--ks-rule);
  color: var(--ks-ink-soft); font-size: calc(.9375rem * var(--ks-scale));
}
.ks-more__body a:hover { border-left-color: var(--ks-gold); background: var(--ks-cream); color: var(--ks-maroon); }

/* --------------------------------------------------------------------------
   13. FEATURE BAND (Rangamandira)
   -------------------------------------------------------------------------- */
.ks-feature { position: relative; background: var(--ks-ink); color: #D9D0C6; overflow: hidden; }
.ks-feature__bg { position: absolute; inset: 0; z-index: 0; }
.ks-feature__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.ks-feature__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(24,17,14,.95) 0%, rgba(24,17,14,.80) 55%, rgba(24,17,14,.55) 100%);
}
.ks-feature .ks-wrap { position: relative; z-index: 1; }
.ks-feature__inner { max-width: 44rem; }
.ks-feature h2 { color: #fff; }
.ks-feature p { color: #CFC5B8; }
.ks-feature__date {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid rgba(201,160,89,.5); color: var(--ks-gold-soft);
  border-radius: 2px; padding: .35rem .8rem; font-size: calc(.85rem * var(--ks-scale));
  font-weight: 600; margin-bottom: 1.1rem;
}

/* --------------------------------------------------------------------------
   14. HONORIFIC BANNER STRIP  (original slider/01–03 shown intact)
   -------------------------------------------------------------------------- */
/* Shown at their true 1920x700 proportion, one per row and capped in width,
   because these are text-bearing tribute cards — shrunk into a 3-up row the
   Kannada lettering inside them becomes unreadable. */
.ks-banners__track {
  display: grid; gap: 1.25rem;
  max-width: 60rem; margin-inline: auto;
}
.ks-banner {
  border: 1px solid var(--ks-rule); border-radius: var(--ks-radius-lg);
  overflow: hidden; background: var(--ks-surface);
}
.ks-banner img { width: 100%; aspect-ratio: 1920 / 700; object-fit: contain; background: #fff; }

/* --------------------------------------------------------------------------
   15. REPORTS
   -------------------------------------------------------------------------- */
.ks-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
.ks-year {
  position: relative; display: flex; flex-direction: column; gap: .15rem;
  background: var(--ks-surface); border: 1px solid var(--ks-rule);
  border-radius: var(--ks-radius-lg); padding: 1.15rem 1.25rem;
  transition: border-color .22s var(--ks-ease), transform .22s var(--ks-ease), background .22s var(--ks-ease);
}
.ks-year:hover { border-color: var(--ks-maroon); background: var(--ks-maroon); transform: translateY(-3px); }
.ks-year__num { font-family: var(--ks-serif); font-weight: 700; font-size: calc(1.2rem * var(--ks-scale)); color: var(--ks-maroon); line-height: 1.35; transition: color .22s var(--ks-ease); }
.ks-year__cap { font-size: calc(.8125rem * var(--ks-scale)); color: var(--ks-ink-muted); transition: color .22s var(--ks-ease); }
.ks-year:hover .ks-year__num, .ks-year:hover .ks-year__cap { color: #fff; }

/* --------------------------------------------------------------------------
   16. GALLERY
   -------------------------------------------------------------------------- */
.ks-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.ks-shot {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--ks-radius);
  background: var(--ks-cream-deep); cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%;
}
.ks-shot img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;
  transition: transform .6s var(--ks-ease), filter .4s var(--ks-ease);
}
.ks-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,26,22,.45), transparent 55%);
  opacity: 0; transition: opacity .35s var(--ks-ease);
}
.ks-shot:hover img, .ks-shot:focus-visible img { transform: scale(1.06); }
.ks-shot:hover::after { opacity: 1; }

/* Lightbox */
.ks-lightbox {
  position: fixed; inset: 0; z-index: 400; display: none;
  background: rgba(16,12,10,.94); padding: clamp(1rem, 4vw, 3rem);
  align-items: center; justify-content: center;
}
.ks-lightbox.is-open { display: flex; animation: ksFade .25s var(--ks-ease); }
.ks-lightbox img { max-width: 100%; max-height: 84vh; border-radius: var(--ks-radius); }
.ks-lightbox__close, .ks-lightbox__nav {
  position: absolute; background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.30); border-radius: var(--ks-radius);
  width: 3rem; height: 3rem; cursor: pointer; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; transition: background .2s var(--ks-ease);
}
.ks-lightbox__close:hover, .ks-lightbox__nav:hover { background: rgba(255,255,255,.24); }
.ks-lightbox__close { top: 1.25rem; right: 1.25rem; }
.ks-lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.ks-lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.ks-lightbox__count { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: #C9BFB2; font-size: .875rem; }

/* --------------------------------------------------------------------------
   17. QUOTE
   -------------------------------------------------------------------------- */
.ks-quote__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.ks-quote__portrait { margin: 0; text-align: center; }
.ks-quote__portrait img {
  width: 11rem; height: 11rem; object-fit: cover; border-radius: 50%;
  margin-inline: auto; border: 3px solid var(--ks-gold-soft); padding: 4px; background: var(--ks-surface);
}
.ks-quote__portrait figcaption { margin-top: .9rem; }
.ks-quote__name { display: block; font-family: var(--ks-serif); font-weight: 700; color: var(--ks-ink); font-size: calc(1.1rem * var(--ks-scale)); }
.ks-quote__role { display: block; font-size: calc(.85rem * var(--ks-scale)); color: var(--ks-ink-muted); }
.ks-quote blockquote { margin: 0; position: relative; }
.ks-quote blockquote::before {
  content: "\201C"; font-family: var(--ks-serif); font-size: 6rem; line-height: .8;
  color: var(--ks-gold-soft); opacity: .5; display: block; margin-bottom: -1.2rem;
}
.ks-quote blockquote p { font-size: calc(1.05rem * var(--ks-scale)); line-height: 1.95; color: var(--ks-ink-soft); }
.ks-quote blockquote p:first-of-type { font-family: var(--ks-serif); font-size: calc(1.2rem * var(--ks-scale)); color: var(--ks-ink); }

/* --------------------------------------------------------------------------
   18. VIDEO (click-to-load facade)
   -------------------------------------------------------------------------- */
.ks-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0;
  background: var(--ks-ink); border-radius: var(--ks-radius-lg); overflow: hidden; cursor: pointer;
  display: block;
}
.ks-video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s var(--ks-ease), transform .6s var(--ks-ease); }
.ks-video:hover img { opacity: .7; transform: scale(1.03); }
.ks-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ks-video__play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.ks-video__play span {
  width: 4.75rem; height: 4.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--ks-maroon); color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transition: transform .3s var(--ks-ease);
}
.ks-video:hover .ks-video__play span { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   19. CONTACT
   -------------------------------------------------------------------------- */
.ks-contact__grid { display: grid; gap: 1.25rem; }
.ks-contact__card {
  background: var(--ks-surface); border: 1px solid var(--ks-rule);
  border-radius: var(--ks-radius-lg); padding: 1.9rem 1.75rem;
}
.ks-contact__card .ks-card__icon { margin-bottom: 1rem; }
.ks-contact__card h3 { font-size: calc(1rem * var(--ks-scale)); font-family: var(--ks-sans); font-weight: 700; margin-bottom: .35rem; }
.ks-contact__card p, .ks-contact__card address {
  margin: 0; font-style: normal; color: var(--ks-ink-soft);
  font-size: calc(1.05rem * var(--ks-scale)); line-height: 1.7;
}
/* The email address is a single unbreakable token wider than a narrow column;
   without this it forces a horizontal scrollbar on tablet and phone. */
.ks-contact__card p, .ks-contact__card address,
.ks-footer address, .ks-footer__bottom p { overflow-wrap: anywhere; }
/* The email is the longest token on the page; a notch smaller keeps it on one
   line inside a three-up contact card instead of splitting mid-domain. */
.ks-contact__card a[href^="mailto"] { font-size: calc(.95rem * var(--ks-scale)); }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.ks-footer { background: var(--ks-ink); color: #A79C90; padding-top: clamp(3rem, 6vw, 4.5rem); }
.ks-footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
.ks-footer h3 {
  font-family: var(--ks-sans); font-size: calc(.8125rem * var(--ks-scale));
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--ks-gold-soft); margin-bottom: 1.1rem;
}
.ks-footer a { color: #BCB1A4; }
.ks-footer a:hover { color: #fff; }
.ks-footer li { margin-bottom: .55rem; font-size: calc(.9375rem * var(--ks-scale)); line-height: 1.65; }
.ks-footer__brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.ks-footer__brand img { width: 52px; height: 52px; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; flex: none; }
.ks-footer__brand strong { font-family: var(--ks-serif); color: #F4EDE1; font-size: calc(1.1rem * var(--ks-scale)); font-weight: 700; line-height: 1.4; }
.ks-footer__about { font-size: calc(.9375rem * var(--ks-scale)); line-height: 1.8; color: #9E9387; }
.ks-footer address { font-style: normal; font-size: calc(.9375rem * var(--ks-scale)); line-height: 1.9; }

.ks-footer__bottom { border-top: 1px solid rgba(255,255,255,.10); padding-block: 1.4rem; }
.ks-footer__bottom .ks-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ks-footer__bottom p { margin: 0; font-size: calc(.8125rem * var(--ks-scale)); color: #857A6E; }
.ks-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: calc(.8125rem * var(--ks-scale)); }

.ks a.ks-wa {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 150;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); transition: transform .24s var(--ks-ease);
}
.ks a.ks-wa:hover { transform: scale(1.08); color: #fff; }
.ks a.ks-wa svg { width: 1.6rem; height: 1.6rem; }

.ks-top {
  position: fixed; right: 1.25rem; bottom: 5.25rem; z-index: 150;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--ks-maroon); color: #fff; display: grid; place-items: center;
  border: 0; cursor: pointer; opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ks-ease), visibility .3s, transform .24s var(--ks-ease);
}
.ks-top.is-visible { opacity: 1; visibility: visible; }
.ks-top:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   21. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.ks-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ks-ease), transform .7s var(--ks-ease); }
.ks-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  .ks-gallery { grid-template-columns: repeat(3, 1fr); }
  .ks-more__body { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 768px) {
  .ks-facts__grid { grid-template-columns: repeat(4, 1fr); }
  .ks-facts__item { border-block-end: 0; }
  .ks-facts__item:nth-child(2n) { border-inline-end: 1px solid var(--ks-rule-soft); }
  .ks-facts__item:last-child { border-inline-end: 0; }
  .ks-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ks-contact__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ks-quote__grid { grid-template-columns: 14rem 1fr; }
  .ks-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .ks-burger { display: none; }
  .ks-nav { display: block; }
  .ks-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ks-intro__grid { grid-template-columns: 1fr 1fr; }
  .ks-intro__grid--reverse .ks-intro__figure { order: 2; }
  .ks-gallery { grid-template-columns: repeat(4, 1fr); }
  .ks-gallery .ks-shot:first-child { grid-column: span 2; grid-row: span 2; }
  .ks-gallery .ks-shot:first-child img { aspect-ratio: auto; height: 100%; }
  .ks-more__body { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ks-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .ks-timeline { padding-left: 2.5rem; }
}

/* --------------------------------------------------------------------------
   23. HIGH CONTRAST MODE (toggled from the utility bar)
   -------------------------------------------------------------------------- */
body.ks-contrast-on {
  --ks-cream: #FFFFFF;
  --ks-cream-deep: #FFFFFF;
  --ks-ink: #000000;
  --ks-ink-soft: #17120E;
  --ks-ink-muted: #2B231C;
  --ks-maroon: #5C1119;
  --ks-gold: #6B4A0F;
  --ks-rule: #6B6055;
  --ks-rule-soft: #9A9088;
}
body.ks-contrast-on .ks-hero::after {
  background: linear-gradient(100deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 55%, rgba(0,0,0,.62) 100%);
}
body.ks-contrast-on .ks-card,
body.ks-contrast-on .ks-award,
body.ks-contrast-on .ks-year,
body.ks-contrast-on .ks-contact__card { border-width: 2px; }
body.ks-contrast-on .ks-figrow > figure img,
body.ks-contrast-on .ks-figure img { border-width: 2px; }

/* --------------------------------------------------------------------------
   24. MOTION PREFERENCE + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ks *, .ks *::before, .ks *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .ks-reveal { opacity: 1; transform: none; }
  .ks-hero__slide { transform: none; }
  .ks-hero__slide.is-active { transform: none; }
}

@media print {
  .ks-utility, .ks-header, .ks-drawer, .ks-wa, .ks-top, .ks-lightbox, .ks-hero__dots { display: none !important; }
  .ks { background: #fff; color: #000; }
  .ks-reveal { opacity: 1; transform: none; }
}