/* ============================================================
   Components — header, footer, ticker, hero, cards, search,
   accessibility toolbar, language toggle, consent banner, etc.
   ============================================================ */

/* Emergency alert strip — sits above everything, server-rendered, no-cache.
   Cache-Control: no-store at the origin; bypass-cache at the edge worker. */
.emergency-alert {
  background: #8B1E1E;
  color: #F4ECD8;
  border-bottom: 3px solid #C8881C;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  position: relative;
  z-index: 80;
  animation: emergency-pulse 2s ease-out 1;
}

/* Two separate rules. A selector list cannot contain an @media rule;
   grouping `[data-motion="reduced"] .x, @media (...) { ... }` is a parse
   error that the browser discards wholesale, which silently broke the
   manual a11y "reduce motion" toggle for this element. */
[data-motion="reduced"] .emergency-alert { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .emergency-alert { animation: none; }
}

@keyframes emergency-pulse {
  0% { background: #C8881C; }
  50% { background: #8B1E1E; }
  100% { background: #8B1E1E; }
}

.emergency-alert__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.emergency-alert__badge {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #C8881C;
  box-shadow: 0 0 0 4px rgba(200, 136, 28, 0.3);
  /* A single attention pulse on load, then a settled emphasized state.
     An infinite blink is a literal flashing element and a WCAG 2.2
     flashing risk; one iteration draws the eye without sustained flash. */
  animation: emergency-blink 1.2s ease-in-out 1 both;
}

@keyframes emergency-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

[data-motion="reduced"] .emergency-alert__badge { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .emergency-alert__badge { animation: none; }
}

.emergency-alert__msg {
  flex: 1;
  margin: 0;
  font-weight: 600;
  min-width: 12rem;
}

.emergency-alert__link {
  color: #F4ECD8;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 700;
  flex-shrink: 0;
}

.emergency-alert__link:hover, .emergency-alert__link:focus-visible {
  color: #FFFFFF;
}

.emergency-alert__close {
  background: transparent;
  border: 1px solid rgba(244, 236, 216, 0.4);
  color: #F4ECD8;
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--fs-300);
  line-height: 1;
  min-height: 32px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.emergency-alert__close:hover, .emergency-alert__close:focus-visible {
  background: rgba(244, 236, 216, 0.15);
}

/* Audience-gateway bar — distinct landing portals */
.audience-bar {
  background: var(--kp-aal-deep);
  color: var(--kp-tussar);
  border-top: 1px solid rgba(244, 236, 216, 0.2);
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
}

.audience-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

@media (max-width: 880px) {
  .audience-bar__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .audience-bar__inner { grid-template-columns: 1fr; }
}

/* Element-qualified selector to win against base `a:visited` (which has the
   same specificity but is loaded earlier in base.css). All descendant text
   is forced to inherit so a stray `a:visited` cannot leak through to nested
   spans. */
a.audience-bar__link,
a.audience-bar__link:link,
a.audience-bar__link:visited {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--kp-tussar);
  text-decoration: none;
  border-right: 1px solid rgba(244, 236, 216, 0.15);
  min-height: 48px;
  transition: background var(--dur-150) var(--ease-out);
}

a.audience-bar__link:last-child {
  border-right: 0;
}

a.audience-bar__link:hover,
a.audience-bar__link:focus-visible,
a.audience-bar__link:visited:hover,
a.audience-bar__link:visited:focus-visible {
  background: var(--kp-aal);
  color: var(--kp-paper);
  text-decoration: none;
}

a.audience-bar__link span,
a.audience-bar__link strong { color: inherit; }

a.audience-bar__link strong,
a.audience-bar__link:visited strong { color: var(--kp-turmeric); }

a.audience-bar__link:hover strong,
a.audience-bar__link:focus-visible strong { color: var(--kp-tussar); }

.audience-bar__icon {
  color: var(--kp-turmeric);
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 540px) {
  .audience-bar__link {
    border-right: 0;
    border-bottom: 1px solid rgba(244, 236, 216, 0.15);
  }
  .audience-bar__link:last-child { border-bottom: 0; }
}

/* GIGW gov-bar (utility strip at very top) */
.gov-bar {
  background: var(--kp-ebony);
  color: var(--kp-tussar);
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  border-bottom: 2px solid var(--kp-aal);
}

.gov-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
  flex-wrap: wrap;
}

/* The accessibility-panel sits inside .gov-bar but breaks out of the
   inner flex row so it spans full width below it.  We achieve this by
   anchoring it at the .gov-bar level (it's a direct child). */
.gov-bar { position: relative; }

.gov-bar__left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.gov-bar__emblem {
  filter: invert(1) brightness(1.5);
  flex-shrink: 0;
}

.gov-bar__id {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.u-or {
  font-family: var(--ff-or), var(--ff-sans);
  font-size: 0.95em;
}

.gov-bar__id-en {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gov-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.gov-bar__links {
  list-style: none;
  display: flex;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.gov-bar__links a,
.gov-bar__links a:link,
.gov-bar__links a:visited {
  color: var(--kp-tussar);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

.gov-bar__links a:hover, .gov-bar__links a:focus-visible {
  color: var(--kp-turmeric);
  text-decoration: underline;
}

/* The "More" toggle is desktop-hidden; only appears below 720px to
   open the gov-bar utility chrome (links / language pills / a11y).
   Below the breakpoint the chrome is collapsed by default to save
   vertical space; tapping "More" expands it inline. */
.gov-bar__more {
  display: none;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--kp-tussar);
  border: 1px solid rgba(244,236,216,0.2);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.gov-bar__more:hover,
.gov-bar__more:focus-visible {
  background: rgba(244,236,216,0.08);
  border-color: rgba(244,236,216,0.45);
}
.gov-bar__more[aria-expanded="true"] .gov-bar__more-caret {
  transform: rotate(180deg);
}
.gov-bar__more-caret {
  display: inline-block;
  transition: transform 200ms ease;
}

@media (max-width: 720px) {
  .gov-bar__more { display: inline-flex; }
  .gov-bar__inner {
    flex-wrap: nowrap;
    padding-top: 6px;
    padding-bottom: 6px;
    gap: var(--sp-2);
  }
  .gov-bar__id { font-size: 11px; }
  .gov-bar__id .u-or { display: none; }
  .gov-bar__emblem { width: 18px; height: 24px; }
  /* Default-collapsed chrome */
  .gov-bar__right {
    display: none;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-top: 1px solid rgba(244,236,216,0.15);
    margin-top: 6px;
  }
  .gov-bar__more[aria-expanded="true"] ~ #gov-bar-right,
  body.is-govbar-open .gov-bar__right {
    display: flex;
  }
  .gov-bar__links {
    flex-direction: column;
    gap: 6px;
  }
}

/* Compact language pills in the gov-bar */
.gov-bar__lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: rgba(244, 236, 216, 0.10);
  border: 1px solid rgba(244, 236, 216, 0.30);
  border-radius: var(--radius-pill);
}

.lang-pill {
  background: transparent;
  border: 0;
  color: var(--kp-tussar);
  font: inherit;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-50);
  padding: 4px 10px;
  min-height: 24px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background var(--dur-150) var(--ease-out),
              color var(--dur-150) var(--ease-out);
}

.lang-pill:hover {
  background: rgba(244, 236, 216, 0.18);
  color: var(--kp-turmeric);
}

.lang-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--kp-turmeric);
}

.lang-pill[aria-pressed="true"] {
  background: var(--kp-turmeric);
  color: var(--kp-ebony);
}

/* Accessibility-panel disclosure trigger */
.a11y-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(244, 236, 216, 0.10);
  color: var(--kp-tussar);
  border: 1px solid rgba(244, 236, 216, 0.30);
  border-radius: var(--radius-pill);
  font: inherit;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-50);
  padding: 4px 10px 4px 8px;
  min-height: 28px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background var(--dur-150) var(--ease-out),
              color var(--dur-150) var(--ease-out);
}

.a11y-trigger:hover {
  background: rgba(244, 236, 216, 0.18);
  color: var(--kp-turmeric);
}

.a11y-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--kp-turmeric);
}

.a11y-trigger[aria-expanded="true"] {
  background: var(--kp-turmeric);
  color: var(--kp-ebony);
}

.a11y-trigger__icon { flex-shrink: 0; }

.a11y-trigger__caret {
  font-size: 0.7em;
  margin-left: var(--sp-1);
  transition: transform var(--dur-150) var(--ease-out);
}

.a11y-trigger[aria-expanded="true"] .a11y-trigger__caret {
  transform: rotate(180deg);
}

/* Accessibility panel — slides down from the gov-bar */
.a11y-panel {
  background: var(--kp-tussar);
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  animation: a11y-panel-in var(--dur-150) var(--ease-out);
}

.a11y-panel[hidden] { display: none; }

@keyframes a11y-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-motion="reduced"] .a11y-panel { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .a11y-panel { animation: none; }
}

.a11y-panel__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
  align-items: flex-start;
}

.a11y-panel__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 12rem;
}

.a11y-panel__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--c-text-muted);
  font-size: var(--fs-50);
}

.a11y-panel__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.a11y-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--dur-150) var(--ease-out),
              border-color var(--dur-150) var(--ease-out),
              color var(--dur-150) var(--ease-out);
}

.a11y-btn:hover {
  background: var(--kp-tussar-soft);
  border-color: var(--kp-rule-strong);
}

.a11y-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.a11y-btn[aria-pressed="true"] {
  background: var(--kp-ebony);
  color: var(--kp-tussar);
  border-color: var(--kp-ebony);
}

/* ============================================================
   Auto-minimising sticky header on mobile.

   The full header (gov-bar + brand band + audience-bar + primary-nav)
   is ~500px tall on a 375px viewport, which buries content below the
   fold on every scroll. Below 720px we collapse the chrome away when
   the user starts scrolling, restoring it as soon as they scroll up.
   The collapse is class-driven (.is-condensed on .site-header), so
   keyboard users tabbing into the header force a restore via
   focus-within, and prefers-reduced-motion gets an instant transition.

   Collapsed state on mobile:
     - gov-bar hidden (off-screen via translate, then display:none in
       reduced-motion / when transitions complete)
     - audience-bar hidden
     - brand band height reduced; tagline and Hindi line hidden;
       crest 56 -> 36px; trilingual stack to one line
   On scroll-up we toggle the class off and the header re-expands.
   ============================================================ */

/* Site header.
   Cream paper surface. The masthead surface itself is plain; the
   cultural register is carried by a single chapter-break rule
   (.site-header__rule) between the masthead and the audience-bar —
   two short horizontal lines flanking a Kotpad-derived temple-arch
   glyph. This is the disciplined editorial pattern: ornament lives in
   one defined slot, not as a backdrop. */
.site-header {
  /* Warm off-white masthead surface — the canonical paper tone in the
     token system, not the cold pure-white --kp-paper default. Sits
     warmer alongside the maroon audience-bar and primary-nav strips. */
  background: var(--kp-tussar);
  border-bottom: 1px solid var(--c-rule);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* ---------- Chapter-break rule ----------
   Pared to the thinnest height where the glyph still reads as a
   deliberate ornament. Total band height settles around 18 px on
   desktop and ~14 px on mobile — a hair-thin division between
   masthead and audience-bar. */
.site-header__rule {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-3);
  background: transparent;
  overflow: hidden;
  line-height: 0;
  transition: max-height 220ms ease, opacity 200ms ease,
              padding 200ms ease, border-color 200ms ease;
}

.site-header__rule-line {
  flex: 1 1 auto;
  height: 1px;
  max-width: 12rem;
  background: linear-gradient(90deg, transparent 0%, var(--kp-aal) 50%, transparent 100%);
  opacity: 0.45;
}

.site-header__rule-glyph {
  width: 20px;
  height: 10px;
  color: var(--kp-aal);
  flex-shrink: 0;
  display: block;
  opacity: 0.75;
}

@media (max-width: 600px) {
  .site-header__rule { padding: 3px var(--sp-2); gap: var(--sp-1); }
  .site-header__rule-line { max-width: 5rem; }
  .site-header__rule-glyph { width: 18px; height: 9px; }
}

/* When the sticky header is condensed on scroll, the chapter-break
   rule collapses with the rest of the decorative chrome. The
   transition above gives this a smooth fold. */
body.is-header-condensed .site-header__rule {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Dark mode: ornament softens to gold. The rule's hairline takes the
   turmeric tone; the glyph itself echoes it. */
[data-theme="dark"] .site-header__rule-line {
  background: linear-gradient(90deg, transparent 0%, var(--kp-turmeric) 50%, transparent 100%);
  opacity: 0.32;
}
[data-theme="dark"] .site-header__rule-glyph {
  color: var(--kp-turmeric);
  opacity: 0.55;
}

/* High contrast: explicit black, full strength. The rule still reads
   as ornament because of the small glyph between the lines. */
[data-contrast="high"] .site-header__rule-line {
  background: #000000 !important;
  opacity: 1 !important;
  max-width: 6rem;
}
[data-contrast="high"] .site-header__rule-glyph {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Forced colours: defer to the OS palette. */
@media (forced-colors: active) {
  .site-header__rule-line {
    background: CanvasText !important;
    opacity: 1 !important;
  }
  .site-header__rule-glyph {
    color: CanvasText !important;
    opacity: 1 !important;
  }
}

/* Print: a discreet pen-line ornament reads correctly on paper. */
@media print {
  .site-header__rule-line {
    background: #000000 !important;
    opacity: 0.5 !important;
  }
  .site-header__rule-glyph {
    color: #000000 !important;
    opacity: 0.7 !important;
  }
}

/* Honour reduced motion: no transition during condense fold. */
@media (prefers-reduced-motion: reduce) {
  .site-header__rule { transition: none !important; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  color: var(--c-text);
  flex: 0 0 auto;
}

.site-header__brand:hover, .site-header__brand:focus-visible {
  color: var(--c-text);
}

.site-header__crest, .site-header__logo {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* Trilingual brand lockup. The three names are read as one composed
   wordmark, not a stacked list. English (red) is the dominant line;
   Odia (indigo) and Hindi (neutral grey) flank it as equal partners
   in the Eastern-Ghats palette. A thin aal rule on the left anchors
   the lockup to the crest and signals "single object". */
.site-header__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--kp-aal);
}

.site-header__name {
  font-weight: 700;
  letter-spacing: -0.005em;
}

.site-header__name--or {
  font-family: var(--ff-or), var(--ff-display);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--kp-indigo);
  letter-spacing: 0;
  margin-bottom: 2px;
  /* Odia diacritics (ି ୀ େ ୈ ୋ ୌ etc.) sit above the base glyph and
     need vertical room. The wordmark's parent line-height (1.1) is
     too tight; restore here. */
  line-height: 1.4;
}

.site-header__name--en {
  font-family: var(--ff-display);
  font-size: var(--fs-500);
  font-weight: 700;
  color: var(--kp-aal);
  line-height: 1.05;
}

.site-header__name--hi {
  font-family: var(--ff-hi), var(--ff-display);
  font-size: var(--fs-200);
  font-weight: 500;
  color: #3F4147;
  letter-spacing: 0;
  margin-top: 2px;
  /* Devanagari headstroke and matras need vertical room. */
  line-height: 1.4;
}

.site-header__tagline {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--c-rule);
}

[data-theme="dark"] .site-header__name--or { color: #8FB3DC; }
[data-theme="dark"] .site-header__name--hi { color: #B8B8C0; }

@media (max-width: 600px) {
  .site-header__crest, .site-header__logo { width: 56px; height: 56px; }
  .site-header__wordmark { padding-left: var(--sp-2); min-width: 0; }
  .site-header__name--or { font-size: var(--fs-200); word-break: keep-all; overflow-wrap: anywhere; }
  .site-header__name--en { font-size: var(--fs-400); }
  .site-header__name--hi { font-size: var(--fs-100); }
  .site-header__tagline {
    letter-spacing: 0.08em;
    font-size: 10px;
    white-space: normal;
    line-height: 1.4;
  }
}

/* ----- Auto-condensed header on mobile -----
   The condense class lives on <body> (not on .site-header) because the
   .gov-bar is a sibling of .site-header, not a descendant. From <body>
   we can reach either.

   The audience-bar is hidden by default below 720 px. Its four entry
   points are surfaced inside the hamburger drawer via the "For You"
   primary-nav megamenu — duplicating them as a 220 px-tall band on
   mobile pushed all real content below the fold. Desktop continues to
   show the strip prominently. */
/* ============================================================
   Sticky-header condense system
   ------------------------------------------------------------
   The site-header is `position: sticky` with the gov-bar floating
   above it (non-sticky). On scroll the entire chrome stack feels
   tall, so a `body.is-header-condensed` class (toggled by core.js
   when the user scrolls past ~80px) shrinks decorative chrome
   while keeping the wordmark, search, and primary nav fully
   functional and the trilingual identity legible.
     - gov-bar (sibling above .site-header) collapses to 0
     - audience-bar (inside .site-header) collapses to 0
     - masthead crest, name lines, and tagline shrink continuously
   These rules apply at every viewport. The condensed sizes are
   chosen per breakpoint so the aesthetic survives the shrink at
   desktop and the trilingual masthead survives at mobile.
   ============================================================ */
.gov-bar {
  overflow: hidden;
  max-height: 320px;
  transition: max-height 240ms ease, opacity 200ms ease, padding 200ms ease, border-color 200ms ease;
  will-change: max-height;
}
.audience-bar {
  overflow: hidden;
  max-height: 240px;
  transition: max-height 220ms ease, opacity 200ms ease, padding 200ms ease, border-color 200ms ease;
}
.site-header__inner { transition: padding 220ms ease; }
.site-header__crest,
.site-header__logo { transition: width 220ms ease, height 220ms ease; }
.site-header__name,
.site-header__tagline {
  transition: font-size 200ms ease, opacity 180ms ease, max-height 220ms ease, margin 200ms ease, padding 180ms ease;
  /* No `overflow: hidden` at rest. Odia matras (ି ୀ େ ୈ etc.) and
     Devanagari headstroke + matras extend above the Latin cap-height
     of the base glyph; clipping the box clips the diacritics. The
     `body.is-header-condensed` rules below add overflow:hidden only
     when the masthead is folding to its condensed state. */
}
body.is-header-condensed .site-header__name,
body.is-header-condensed .site-header__tagline { overflow: hidden; }

/* Collapsed-state shared rules (all viewports). Decorative chrome
   collapses; trilingual masthead remains visible but tightens. */
body.is-header-condensed .gov-bar,
body.is-header-condensed .audience-bar {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
}
body.is-header-condensed .site-header__inner {
  padding-top: 4px;
  padding-bottom: 4px;
  gap: var(--sp-3);
}
body.is-header-condensed .site-header__crest,
body.is-header-condensed .site-header__logo {
  width: 36px;
  height: 36px;
}
body.is-header-condensed .site-header__name--or {
  font-size: var(--fs-50);
  line-height: 1.25;
}
body.is-header-condensed .site-header__name--en {
  font-size: var(--fs-300);
  line-height: 1.05;
}
body.is-header-condensed .site-header__name--hi {
  font-size: var(--fs-50);
  line-height: 1.25;
}
body.is-header-condensed .site-header__tagline {
  font-size: 0;
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Pull the wordmark visually tighter against the crest so the lockup
   reads as one compact unit, not as a stretched horizontal lockup. */
body.is-header-condensed .site-header__wordmark {
  padding-left: var(--sp-2);
}
/* Search box also tightens to a smaller height to match the band. */
body.is-header-condensed .site-search input { min-height: 32px; padding: 4px var(--sp-3); }
body.is-header-condensed .site-search button { min-height: 32px; min-width: 32px; }
body.is-header-condensed .nav-toggle { width: 32px; height: 32px; }

/* Primary nav also condenses: smaller link target, smaller type. The
   primary nav is the only chrome that stays useful while scrolled,
   so it doesn't disappear — it just slims. */
body.is-header-condensed .primary-nav__item > a {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: var(--fs-50);
  letter-spacing: 0.02em;
}
.primary-nav__item > a {
  transition: min-height 200ms ease, padding 200ms ease, font-size 200ms ease,
              background var(--dur-150) var(--ease-out),
              border-color var(--dur-150) var(--ease-out);
}

/* Mobile (≤720px): chrome at this width is already minimal — the
   audience-bar is already hidden by the @media block elsewhere.
   In condensed state, shrink the crest further and drop the Odia +
   Hindi lines (they reappear the moment the user scrolls back up
   or focuses anywhere in the header). */
@media (max-width: 720px) {
  .site-header .audience-bar {
    display: none;
  }
  body.is-header-condensed .site-header__crest,
  body.is-header-condensed .site-header__logo {
    width: 32px;
    height: 32px;
  }
  body.is-header-condensed .site-header__name--or,
  body.is-header-condensed .site-header__name--hi {
    font-size: 0;
    opacity: 0;
    max-height: 0;
    margin: 0;
  }
  body.is-header-condensed .site-header__name--en {
    font-size: var(--fs-200);
  }
}

/* Honour reduced-motion at every viewport. */
@media (prefers-reduced-motion: reduce) {
  .gov-bar,
  .audience-bar,
  .site-header__inner,
  .site-header__crest,
  .site-header__logo,
  .site-header__name,
  .site-header__tagline { transition: none !important; }
}

.site-header__actions {
  margin-left: auto;
  flex: 1 1 auto;
  max-width: 22rem;
}

.site-search {
  display: flex;
  align-items: center;
  background: var(--kp-tussar-soft);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-150) var(--ease-out),
              box-shadow var(--dur-150) var(--ease-out);
}

.site-search:focus-within {
  border-color: var(--kp-indigo);
  box-shadow: var(--focus-ring);
}

.site-search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-100);
  min-height: 40px;
}

.site-search input:focus {
  outline: none;
  box-shadow: none;
}

.site-search button {
  background: transparent;
  border: 0;
  padding: 0 var(--sp-3);
  color: var(--c-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.site-search button:hover, .site-search button:focus-visible {
  color: var(--kp-aal);
}

/* Autocomplete suggest panel */
.site-header__actions { position: relative; }

.search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 70;
  max-height: 24rem;
  overflow-y: auto;
}

.search-suggest[hidden] { display: none; }

.search-suggest__item {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-rule);
  line-height: 1.4;
}

.search-suggest__item:last-child { border-bottom: 0; }

.search-suggest__item:hover, .search-suggest__item:focus-visible {
  background: var(--kp-tussar);
  color: var(--kp-aal);
}

.search-suggest__title {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.search-suggest__url {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
}

.search-suggest__empty {
  padding: var(--sp-4);
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-100);
}

mark {
  background: rgba(200, 136, 28, 0.35);
  padding: 0 2px;
  border-radius: 2px;
  color: inherit;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-400);
  cursor: pointer;
  color: var(--c-text);
}

/* Primary nav */
.primary-nav {
  background: var(--kp-aal);
  color: var(--kp-tussar);
}

.primary-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 0;
}

.primary-nav__item {
  position: relative;
  margin: 0;
}

.primary-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--kp-tussar);
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background var(--dur-150) var(--ease-out),
              border-color var(--dur-150) var(--ease-out);
}

.primary-nav__item > a:hover,
.primary-nav__item > a:focus-visible,
.primary-nav__item.is-active > a {
  background: var(--kp-aal-deep);
  border-bottom-color: var(--kp-turmeric);
  color: var(--kp-paper);
  text-decoration: none;
}

.primary-nav__item > a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--kp-turmeric);
}

.primary-nav__item.has-menu > a::after {
  content: "▾";
  font-size: 0.7em;
  margin-left: var(--sp-1);
}

.primary-nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 18rem;
  background: var(--kp-paper);
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--kp-turmeric);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-150) var(--ease-out),
              transform var(--dur-150) var(--ease-out),
              visibility var(--dur-150) var(--ease-out);
  z-index: 60;
}

.primary-nav__item.has-menu:hover > .primary-nav__menu,
.primary-nav__item.has-menu:focus-within > .primary-nav__menu,
.primary-nav__item.has-menu.is-open > .primary-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav__menu li {
  margin: 0;
}

.primary-nav__menu a {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-100);
  font-weight: 500;
  font-family: var(--ff-sans);
}

.primary-nav__menu a:hover,
.primary-nav__menu a:focus-visible {
  background: var(--kp-tussar);
  color: var(--kp-aal);
  text-decoration: none;
}

/* Mobile nav */
@media (max-width: 880px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-header__actions { order: 3; max-width: none; width: 100%; margin-left: 0; }
  .nav-toggle { display: inline-flex; }

  /* Below 720px: collapse the search input to a tappable icon. The
     submit button alone navigates to /search.html where the user
     completes the query. Saves a full row of vertical space and
     matches mobile-native conventions (icon, not always-on input). */
  @media (max-width: 720px) {
    .site-header__inner {
      flex-wrap: nowrap;
      gap: var(--sp-2);
      align-items: center;
    }
    .site-header__brand {
      flex: 1 1 auto;
      min-width: 0;
    }
    .site-header__wordmark {
      min-width: 0;
      overflow: hidden;
    }
    .site-header__actions {
      order: 2;
      flex: 0 0 auto;
      width: auto;
      max-width: none;
      margin-left: auto;
    }
    .site-search {
      background: transparent;
      border: 0;
    }
    .site-search:focus-within {
      box-shadow: none;
      border: 0;
    }
    .site-search input {
      display: none;
    }
    .site-search button {
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid var(--c-rule);
      border-radius: var(--radius-md);
      background: var(--c-bg);
      color: var(--c-text);
      justify-content: center;
    }
    .site-search button:hover,
    .site-search button:focus-visible {
      background: var(--kp-aal);
      color: var(--kp-paper);
      border-color: var(--kp-aal);
    }
    .nav-toggle {
      width: 44px;
      height: 44px;
      padding: 0;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      order: 3;
    }
    /* When condensed, tighten icon buttons further. */
    body.is-header-condensed .site-search button,
    body.is-header-condensed .nav-toggle {
      width: 40px;
      height: 40px;
    }
  }

  /* Below 480px: all three names of the constitutional masthead remain
     visible. Sizes are tightened so the wordmark fits next to the icon
     buttons; the order Odia → English → Hindi mirrors the desktop
     hierarchy. */
  @media (max-width: 480px) {
    .site-header__crest, .site-header__logo { width: 40px; height: 40px; }
    .site-header__name--or { font-size: 11px; line-height: 1.15; letter-spacing: 0; }
    .site-header__name--en { font-size: var(--fs-200); line-height: 1.1; }
    .site-header__name--hi { font-size: 11px; line-height: 1.15; display: block; }
    .site-header__tagline {
      font-size: 9px;
      letter-spacing: 0.04em;
      padding-top: 4px;
      margin-top: 4px;
    }
    .site-header__inner {
      padding-top: var(--sp-3);
      padding-bottom: var(--sp-3);
      gap: 6px;
    }
    .site-search button,
    .nav-toggle { width: 40px; height: 40px; }
    body.is-header-condensed .site-header__crest,
    body.is-header-condensed .site-header__logo { width: 32px; height: 32px; }
    body.is-header-condensed .site-search button,
    body.is-header-condensed .nav-toggle { width: 36px; height: 36px; }
  }
  .primary-nav {
    display: none;
  }
  .primary-nav.is-open {
    display: block;
  }
  .primary-nav__list {
    flex-direction: column;
  }
  .primary-nav__item > a {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    border-left: 3px solid transparent;
  }
  .primary-nav__item > a:hover, .primary-nav__item.is-active > a {
    border-left-color: var(--kp-turmeric);
    border-bottom-color: rgba(255,255,255,0.15);
  }
  .primary-nav__menu {
    position: static;
    box-shadow: none;
    border: 0;
    background: var(--kp-aal-deep);
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding: 0;
  }
  .primary-nav__menu a { color: var(--kp-tussar); padding-left: var(--sp-8); }
  .primary-nav__menu a:hover, .primary-nav__menu a:focus-visible { background: rgba(0,0,0,0.2); color: var(--kp-paper); }
  .primary-nav__item.is-open > .primary-nav__menu { display: block; }
}

/* Notice ticker */
.notice-ticker {
  background: var(--kp-turmeric);
  color: var(--kp-ebony);
  border-bottom: 1px solid var(--kp-turmeric-deep);
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
  position: relative;
  z-index: 10;
}

.notice-ticker__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
  min-height: 40px;
}

.notice-ticker__label {
  flex-shrink: 0;
  background: var(--kp-ebony);
  color: var(--kp-turmeric);
  padding: var(--sp-1) var(--sp-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-50);
  border-radius: var(--radius-sm);
}

.notice-ticker__viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.notice-ticker__list {
  display: flex;
  gap: var(--sp-8);
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  /* Start off-right, end off-left so a single dataset scrolls fully
     across the viewport. Width is the list's own intrinsic width plus
     the viewport's width — both expressed via translateX so we don't
     need to know either value: translateX(100%) of the LIST means the
     list's left edge sits at its own right edge in the originating
     box, but the viewport is the parent. We approximate with
     `from: 100%` (list's left at its-own-width = roughly viewport's
     right edge for short lists) and `to: -100%` (list's right edge
     fully past the viewport's left). The visible span between is the
     full reading window. */
  animation: ticker-scroll 50s linear infinite;
  will-change: transform;
}

.notice-ticker__list:hover,
.notice-ticker:focus-within .notice-ticker__list {
  animation-play-state: paused;
}

[data-motion="reduced"] .notice-ticker__list { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .notice-ticker__list { animation: none; }
}

@keyframes ticker-scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.notice-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.notice-ticker__item time {
  font-weight: 700;
  color: var(--kp-aal);
  font-size: var(--fs-50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

.notice-ticker__item a {
  color: var(--kp-ebony);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.notice-ticker__item a:hover {
  color: var(--kp-aal);
}

.notice-ticker__pause {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--kp-ebony);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-2);
  font: inherit;
  cursor: pointer;
  min-height: 28px;
}

/* Mobile: the horizontal-scroll marquee severely truncates each item
   on 375 px viewports because the list is wider than the viewport.
   Switch to a stacked vertical list (most-recent two items) with
   wrapped multi-line text. The animation is suppressed so users can
   read both items at once. The pause button is hidden because there
   is no longer anything to pause. */
@media (max-width: 600px) {
  .notice-ticker__inner {
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
    align-items: flex-start;
  }
  .notice-ticker__viewport {
    flex: 1 1 100%;
    overflow: visible;
  }
  .notice-ticker__list {
    flex-direction: column;
    gap: var(--sp-2);
    white-space: normal;
    animation: none;
  }
  .notice-ticker__item {
    align-items: flex-start;
    gap: var(--sp-2);
    flex-wrap: wrap;
    line-height: var(--lh-snug);
  }
  /* Show only the two most recent notices on small screens; the rest
     remain in the DOM (so the ticker animation could be re-enabled at
     larger widths) but are visually hidden to keep the band compact. */
  .notice-ticker__item:nth-child(n + 3) { display: none; }
  .notice-ticker__pause { display: none; }
  /* core.js clones the <ul> for seamless desktop marquee; on mobile the
     animation is suppressed and the clone would visibly duplicate the
     stacked items. Hide the cloned (aria-hidden) list. */
  .notice-ticker__viewport > ul[aria-hidden="true"] { display: none; }
}

/* Hero (home)
   The backdrop is a commissioned painting that combines Koraput tribal
   pattern, an open book, architecture, graduation caps, and a tech
   network. Layering, from bottom to top:
     1. Solid ebony fallback (so the hero never goes blank if the image
        fails or the user is on a saver-mode connection)
     2. The painting (responsive: smaller asset under 700px)
     3. A directional dark overlay biased to the LEFT of the hero where
        the typography lives — the painting's bright passages (the cyan
        sky and raised hands) sit on the RIGHT, which we let through more
     4. A left-anchored radial vignette via .hero__bg for extra depth on
        the text column
   Accessibility belt-and-braces:
     - Hero typography carries a subtle text-shadow as a final-line
       legibility guarantee against any unforeseen patch of the image
     - High-contrast, forced-colors, prefers-contrast:more, and print
       all suppress the image entirely and revert to a flat surface (see
       overrides further down) so reading never depends on the image. */
.hero {
  position: relative;
  background-color: var(--kp-ebony);
  /* Two-layer background. Bottom: the painting. Top: a heavy darkening
     gradient that floors the painting's brightness so even the
     cyan-sky and raised-hands passages do not contest the cream
     headline. The painting reads as a muted undertone, not as a
     foreground visual. The gradient is biased darker on the LEFT (text
     column) than on the RIGHT (where the painting can show through
     more), but the right is still pulled below the original luminance. */
  background-image:
    linear-gradient(105deg, rgba(20,12,7,0.96) 0%, rgba(20,12,7,0.90) 30%, rgba(34,22,15,0.78) 60%, rgba(20,12,7,0.85) 100%),
    url('../../assets/img/hero-backdrop.jpg');
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
  color: var(--kp-tussar);
  padding: var(--sp-12) 0 var(--sp-10);
  overflow: hidden;
  border-bottom: 4px solid var(--kp-turmeric);
}

/* Mute the painting itself. Implemented as a pseudo-element rather than
   a CSS filter on .hero (which would also filter the foreground
   typography). The layer sits between the painting and the typography
   as a flat warm brown-black veil that drops the painting's apparent
   colour saturation.

   This was previously `mix-blend-mode: saturation`. A blend mode forces
   the compositor to re-read the backdrop pixels and recompute the blend
   on every scroll frame, which made the whole hero flash/blink during
   scroll. A flat veil reaches an equivalent muted result with no
   per-frame backdrop read. `isolation: isolate` keeps this layer on its
   own compositing context so hero scroll repaints never re-flash the
   section. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 22, 15, 0.55);
  isolation: isolate;
  pointer-events: none;
  z-index: 0;
}

/* Smaller hero asset under 700px — and a vertical (top-to-bottom)
   overlay because at narrow widths the text column spans the full hero
   width and bright passages can sit directly behind it. */
@media (max-width: 700px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(20,12,7,0.94) 0%, rgba(20,12,7,0.84) 50%, rgba(20,12,7,0.92) 100%),
      url('../../assets/img/hero-backdrop-1024.jpg');
  }
}

/* Tablet sweet-spot (701–1100px): the text column is wider than on
   mobile but narrower than on desktop. Hold a stronger left-bias
   overlay so the lede stays legible across the painting's busiest
   middle band. */
@media (min-width: 701px) and (max-width: 1100px) {
  .hero {
    background-image:
      linear-gradient(100deg, rgba(20,12,7,0.96) 0%, rgba(20,12,7,0.86) 45%, rgba(34,22,15,0.78) 75%, rgba(20,12,7,0.82) 100%),
      url('../../assets/img/hero-backdrop.jpg');
  }
}

/* Vignette: left-anchored ellipse riding above the painting + overlay,
   pulling extra darkness under the typography column. Pointer-events
   off so it never intercepts focus or hover. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 70% 80% at 22% 50%, rgba(20,12,7,0.65) 0%, rgba(20,12,7,0.30) 45%, transparent 75%);
}

/* Hero typography: a final-line text-shadow keeps the cream copy crisp
   against any unforeseen patch of the painting. The shadow is subtle
   (1px offset, low alpha) so it does not read as ornament — only as
   structural separation between glyph and ground. */
.hero__eyebrow,
.hero h1,
.hero__motto,
.hero__lede,
.hero__stats {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* ---------- Accessibility-mode overrides ----------
   Each override replaces the painting + overlay stack with a flat,
   single-colour surface and removes ornamentation. Reading must never
   depend on the image. */

/* High-contrast: explicit toggle from the a11y panel. Flat white-on-black
   reverse so the hero is the same surface logic as the rest of the site
   in this mode. */
[data-contrast="high"] .hero {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-bottom-color: #FFFFFF;
}
[data-contrast="high"] .hero__bg,
[data-contrast="high"] .hero__motif,
[data-contrast="high"] .hero::after {
  display: none !important;
}
[data-contrast="high"] .hero__eyebrow,
[data-contrast="high"] .hero h1,
[data-contrast="high"] .hero__motto,
[data-contrast="high"] .hero__motto-translation,
[data-contrast="high"] .hero__lede,
[data-contrast="high"] .hero__stats {
  text-shadow: none;
  color: #FFFFFF !important;
}
[data-contrast="high"] .hero__eyebrow { color: #FFD400 !important; }
[data-contrast="high"] .hero__motto { color: #FFD400 !important; font-style: italic; }

/* Forced colours (Windows High Contrast / OS-level): let the OS palette
   take over. Suppress decorative layers entirely. */
@media (forced-colors: active) {
  .hero {
    background: Canvas !important;
    color: CanvasText !important;
    border-bottom-color: CanvasText;
  }
  .hero__bg,
  .hero__motif,
  .hero::after { display: none !important; }
  .hero__eyebrow,
  .hero h1,
  .hero__motto,
  .hero__lede,
  .hero__stats { text-shadow: none !important; color: CanvasText !important; }
}

/* System-level contrast preference (no JS toggle): readers who declare
   prefers-contrast: more get the same flat treatment. */
@media (prefers-contrast: more) {
  .hero {
    background-image: none !important;
    background-color: #1A100A !important;
  }
  .hero__bg,
  .hero::after { display: none !important; }
  .hero__eyebrow,
  .hero h1,
  .hero__motto,
  .hero__lede,
  .hero__stats { text-shadow: none !important; }
}

/* Saver-data preference: don't ship the painting if the user has asked
   the browser to spare bandwidth. */
@media (prefers-reduced-data: reduce) {
  .hero {
    background-image: none !important;
    background-color: var(--kp-ebony) !important;
  }
}

/* Print: solid white, ink-saving. The painting is decorative and would
   look terrible on A4 anyway. */
@media print {
  .hero {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-bottom: 1px solid #000000 !important;
    padding-block: 8mm !important;
  }
  .hero__bg,
  .hero__motif,
  .hero::after { display: none !important; }
  .hero__eyebrow,
  .hero h1,
  .hero__motto,
  .hero__motto-translation,
  .hero__lede,
  .hero__stats { color: #000000 !important; text-shadow: none !important; }
}

.hero__motif {
  position: absolute;
  right: -4rem;
  top: -4rem;
  width: 26rem;
  height: 26rem;
  color: var(--kp-turmeric);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 600px) {
  .hero__motif {
    right: -2rem;
    top: -2rem;
    width: 14rem;
    height: 14rem;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

.hero__eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--kp-turmeric);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--kp-turmeric);
}

.hero h1 {
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.08;
  margin-bottom: var(--sp-5);
  max-width: 22ch;
  color: var(--kp-tussar);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.hero__motto {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-300);
  color: var(--kp-turmeric);
  margin-bottom: var(--sp-5);
  max-width: 36rem;
}

.hero__motto-translation {
  font-style: normal;
  color: var(--kp-tussar);
  display: block;
  font-size: var(--fs-100);
  margin-top: var(--sp-1);
  opacity: 0.85;
}

.hero__lede {
  font-size: var(--fs-200);
  line-height: var(--lh-loose);
  color: var(--kp-tussar);
  max-width: 44rem;
  margin-bottom: var(--sp-6);
  opacity: 0.92;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.hero__actions .btn {
  background: var(--kp-turmeric);
  border-color: var(--kp-turmeric);
  color: var(--kp-ebony);
}

.hero__actions .btn:hover, .hero__actions .btn:focus-visible {
  background: var(--kp-tussar);
  border-color: var(--kp-tussar);
  color: var(--kp-ebony);
}

.hero__actions .btn--secondary {
  background: transparent;
  border-color: var(--kp-tussar);
  color: var(--kp-tussar);
}

.hero__actions .btn--secondary:hover, .hero__actions .btn--secondary:focus-visible {
  background: var(--kp-tussar);
  color: var(--kp-ebony);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(244,236,216,0.18);
}

.hero__stat dt {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kp-turmeric);
  margin-bottom: var(--sp-2);
}

.hero__stat dd {
  font-family: var(--ff-display);
  font-size: var(--fs-700);
  font-weight: 600;
  margin: 0;
  color: var(--kp-tussar);
  line-height: 1;
}

/* Quick-link strip (under hero) */
.quick-strip {
  background: var(--kp-tussar);
  border-bottom: 1px solid var(--c-rule);
  padding: var(--sp-4) 0;
}

.quick-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.quick-strip__list a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  color: var(--c-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  background: var(--kp-tussar-soft);
  border: 1px solid var(--c-rule);
  transition: all var(--dur-150) var(--ease-out);
}

.quick-strip__list a:hover, .quick-strip__list a:focus-visible {
  background: var(--kp-aal);
  color: var(--kp-paper);
  border-color: var(--kp-aal);
  text-decoration: none;
}

.quick-strip__list svg {
  width: 18px;
  height: 18px;
  color: var(--kp-aal);
  flex-shrink: 0;
}

.quick-strip__list a:hover svg, .quick-strip__list a:focus-visible svg {
  color: var(--kp-paper);
}

/* Two-column feature blocks */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}

@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--sp-8); }
  /* Cap the portrait/figure height so it doesn't dominate the
     fold on small screens; the rest of the article stays readable
     above the next scroll. */
  .feature-row__media > img,
  .feature-row__media img {
    max-height: 22rem;
    object-fit: cover;
    object-position: center top;
  }
}

.feature-row__media img,
.feature-row__media figure {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Frontispiece variant: a typographic seal-card used on the homepage
   "From the Vice-Chancellor" feature row in lieu of a duplicated
   portrait. Reads as the title page of a printed document, not as a
   photograph. */
/* Vice-Chancellor pull-quote.
   Replaces the earlier "vc-seal" plate. The face of the VC appears once
   on this page — in the Statutory Leadership trio below — so this slot
   carries his words instead, treating the message as the visual anchor.
   Reads as a printed inaugural-address pull-quote: large opening
   quotation mark in gold, italic display serif body, italic display
   serif "signature" line, and a sans-serif role attribution. */
.feature-row__media--quote {
  background: linear-gradient(165deg, #FAF6EA 0%, #F0E5C9 100%);
  border: 1px solid var(--kp-rule-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 12px 32px -16px rgba(42,26,18,0.25);
  padding: clamp(var(--sp-6), 4vw, var(--sp-10)) clamp(var(--sp-6), 4vw, var(--sp-10));
  position: relative;
  overflow: hidden;
  margin: 0;
  display: flex;
}
.feature-row__media--quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/motifs/medallion.svg");
  background-repeat: no-repeat;
  background-position: right -3rem bottom -3rem;
  background-size: 60% auto;
  opacity: 0.05;
  pointer-events: none;
}
.vc-quote {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  width: 100%;
  font-family: var(--ff-display);
  color: var(--kp-ebony);
}
.vc-quote__mark {
  font-family: var(--ff-display);
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  font-weight: 700;
  color: var(--kp-aal);
  line-height: 0.6;
  display: block;
  margin: 0;
  user-select: none;
}
.vc-quote__text {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--kp-ebony);
  margin: 0;
  text-wrap: pretty;
  hyphens: auto;
}
.vc-quote__byline {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  display: grid;
  gap: var(--sp-1);
}
.vc-quote__signature {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--kp-aal);
  letter-spacing: 0.005em;
  line-height: 1;
  margin: 0;
  /* Slight slope so it reads as a written hand, not as another italic
     line of body text. Skew is small enough to remain legible. */
  transform: skewX(-6deg);
  transform-origin: 0 50%;
}
.vc-quote__role {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-muted);
  margin: 0;
}

@media (max-width: 760px) {
  .feature-row__media--quote {
    padding: var(--sp-6) var(--sp-5);
  }
}

/* Dark theme: paper tone flips to deep ebony so the quote sits at home
   in night reading; the gold quote-mark and signature stay legible. */
[data-theme="dark"] .feature-row__media--quote {
  background: linear-gradient(165deg, #221813 0%, #1A100A 100%);
  border-color: var(--c-rule);
}
[data-theme="dark"] .vc-quote { color: var(--kp-tussar); }
[data-theme="dark"] .vc-quote__text { color: var(--kp-tussar); }
[data-theme="dark"] .vc-quote__mark { color: var(--kp-aal); }
[data-theme="dark"] .vc-quote__signature { color: var(--kp-aal); }
[data-theme="dark"] .vc-quote__role { color: var(--c-text-muted); }
[data-theme="dark"] .vc-quote__byline { border-top-color: var(--c-rule); }

/* Accessibility-mode overrides — the same belt-and-braces as the hero:
   reading must never depend on decoration. */

[data-contrast="high"] .feature-row__media--quote {
  background: #FFFFFF !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}
[data-contrast="high"] .feature-row__media--quote::before { display: none !important; }
[data-contrast="high"] .vc-quote,
[data-contrast="high"] .vc-quote__text { color: #000000 !important; }
[data-contrast="high"] .vc-quote__mark,
[data-contrast="high"] .vc-quote__signature { color: #800000 !important; }
[data-contrast="high"] .vc-quote__signature { transform: none !important; font-style: italic; }
[data-contrast="high"] .vc-quote__role { color: #1A1A1A !important; }
[data-contrast="high"] .vc-quote__byline { border-top-color: #000000 !important; }

@media (forced-colors: active) {
  .feature-row__media--quote {
    background: Canvas !important;
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }
  .feature-row__media--quote::before { display: none !important; }
  .vc-quote,
  .vc-quote__text,
  .vc-quote__mark,
  .vc-quote__signature,
  .vc-quote__role { color: CanvasText !important; }
  .vc-quote__signature { transform: none !important; }
  .vc-quote__byline { border-top-color: CanvasText !important; }
}

@media (prefers-contrast: more) {
  .feature-row__media--quote {
    background: #FFFFFF !important;
    border: 2px solid #000000 !important;
  }
  .feature-row__media--quote::before { display: none !important; }
}

@media print {
  .feature-row__media--quote {
    background: #FFFFFF !important;
    border: 1px solid #000000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .feature-row__media--quote::before { display: none !important; }
  .vc-quote,
  .vc-quote__text,
  .vc-quote__mark,
  .vc-quote__signature,
  .vc-quote__role { color: #000000 !important; }
  .vc-quote__signature { transform: none !important; }
}

/* Leadership card grid */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-6);
}

.leader-card {
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-top: 3px solid var(--kp-aal);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.leader-card__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--kp-tussar);
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-bottom: var(--sp-3);
}

.leader-card__role {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--kp-aal);
  margin: 0;
  font-weight: 700;
}

.leader-card__name {
  font-family: var(--ff-display);
  font-size: var(--fs-400);
  margin: 0;
  font-weight: 600;
  color: var(--c-text);
}

.leader-card__bio {
  font-size: var(--fs-100);
  color: var(--c-text-muted);
  margin: 0;
}

/* Notice / tender lists */
.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-rule);
}

.notice-list li {
  border-bottom: 1px solid var(--c-rule);
  padding: var(--sp-4) 0;
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
}

@media (max-width: 600px) {
  .notice-list li { grid-template-columns: 1fr; }
}

.notice-list time {
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
  font-weight: 700;
  color: var(--kp-aal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notice-list a {
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-rule);
}

.notice-list a:hover, .notice-list a:focus-visible {
  color: var(--kp-aal);
  border-bottom-color: var(--kp-aal);
  border-bottom-style: solid;
  text-decoration: none;
}

.notice-list .tag {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}

/* Process steps */
.process-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-8);
  position: relative;
}

.process-steps li {
  counter-increment: step;
  position: relative;
  padding-top: var(--sp-12);
  margin: 0;
}

.process-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-700);
  font-weight: 700;
  color: var(--kp-aal);
  line-height: 1;
}

.process-steps li::after {
  content: "";
  position: absolute;
  top: var(--sp-3);
  left: 4rem;
  right: -4rem;
  height: 1px;
  background: var(--c-rule);
}

.process-steps li:last-child::after { display: none; }

@media (max-width: 760px) {
  .process-steps li::after { display: none; }
}

.process-steps h3 {
  font-size: var(--fs-300);
  margin-top: 0;
}

/* Footer */
.footer-flourish {
  display: block;
  width: 100%;
  height: 80px;
  color: var(--kp-aal);
  margin-top: var(--sp-12);
}

.site-footer {
  background: var(--kp-ebony);
  color: var(--kp-tussar);
  padding: var(--sp-12) 0 var(--sp-6);
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
}

.site-footer a {
  color: var(--kp-tussar);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(244,236,216,0.4);
}

.site-footer a:hover, .site-footer a:focus-visible {
  color: var(--kp-turmeric);
  text-decoration-color: var(--kp-turmeric);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}

.site-footer__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--kp-turmeric);
  margin: 0 0 var(--sp-4);
  letter-spacing: 0;
}

.site-footer__heading--mini {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--kp-turmeric);
  margin: 0 0 var(--sp-2);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-footer__list li { margin: 0; }

.site-footer__address {
  font-style: normal;
  line-height: var(--lh-loose);
}

.site-footer__small {
  font-size: var(--fs-50);
  color: rgba(244,236,216,0.78);
  line-height: var(--lh-loose);
}

.site-footer__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  border-top: 1px solid rgba(244,236,216,0.18);
  border-bottom: 1px solid rgba(244,236,216,0.18);
}

.site-footer__badges {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cert-badge {
  display: inline-block;
  padding: 0.15rem var(--sp-2);
  background: rgba(244,236,216,0.10);
  border: 1px solid rgba(244,236,216,0.30);
  border-radius: var(--radius-sm);
  font-size: var(--fs-50);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--kp-tussar);
}

.site-footer__bottom {
  padding-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-footer__bottom > p {
  margin: 0;
  line-height: 1.55;
}
.site-footer__bottom .site-footer__copyright {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(244,236,216,0.12);
}

.site-footer__sep {
  margin: 0 var(--sp-2);
  opacity: 0.5;
}

/* DPDP consent banner */
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--kp-ebony);
  color: var(--kp-tussar);
  border-top: 3px solid var(--kp-turmeric);
  z-index: var(--z-toolbar);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}

.consent-banner[hidden] { display: none; }

.consent-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}

@media (max-width: 720px) {
  .consent-banner__inner { grid-template-columns: 1fr; }
}

.consent-banner__title {
  font-family: var(--ff-display);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--kp-turmeric);
  margin: 0 0 var(--sp-2);
}

.consent-banner__copy p { margin: 0; max-width: 50rem; font-size: var(--fs-100); line-height: var(--lh-base); }

.consent-banner a { color: var(--kp-turmeric); }

.consent-banner__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Reading ruler with 1.75x magnification lens.
   The band is the visible yellow strip — fixed position, full-bleed, with
   overflow:hidden so the scaled clone of body inside it gets clipped to a
   horizontal slice. The lens is positioned by JS on mousemove. */
.reading-ruler {
  position: fixed;
  left: 0;
  right: 0;
  height: 3.5rem;
  background: rgba(200, 136, 28, 0.10);
  border-top: 2px solid rgba(200, 136, 28, 0.55);
  border-bottom: 2px solid rgba(200, 136, 28, 0.55);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 90;
  display: none;
  top: 50%;
  overflow: hidden;
}

[data-reading-ruler="on"] .reading-ruler {
  display: block;
}

/* The lens — a scaled clone of body content. JS injects DOM into it on
   activation and clears it on deactivation. The lens fills viewport width
   so when scaled, body's layout is preserved horizontally; vertically the
   band's overflow:hidden clips to the band height. The cream surface is a
   safety net so any background-color gaps in the clone do not let the
   yellow ruler tint bleed through and recolour the magnified text. */
.reading-ruler__lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transform: scale(1.75);
  transform-origin: 0 0;
  pointer-events: none;
  background: var(--c-bg, #FAF6EA);
}

/* Defensive: hide chrome that wouldn't make sense magnified. JS strips
   these on clone, but if anything slips through, CSS suppresses it. */
.reading-ruler__lens .reading-ruler,
.reading-ruler__lens .a11y-panel,
.reading-ruler__lens .gallery-lightbox,
.reading-ruler__lens .emergency-alert,
.reading-ruler__lens [role="dialog"] {
  display: none !important;
}

/* Honour reduced-motion: ruler still works but without the soft shadow
   transition (the band still tracks the cursor). */
@media (prefers-reduced-motion: reduce) {
  .reading-ruler { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22); }
}

/* Suppress the ruler in print and high-contrast (it's a screen-reading aid;
   on paper it's noise, and in high-contrast the yellow tint clashes). */
@media print {
  .reading-ruler { display: none !important; }
}
[data-contrast="high"] .reading-ruler {
  background: rgba(255, 255, 0, 0.20);
  border-color: #000000;
}

/* Dyslexia-friendly font (toolbar override) */
[data-dyslexia="on"] body {
  font-family: "OpenDyslexic", "Atkinson Hyperlegible", var(--ff-sans);
  letter-spacing: 0.02em;
  word-spacing: 0.06em;
  line-height: 1.7;
}

/* Card / call-out */
.callout {
  background: var(--kp-tussar);
  border-left: 4px solid var(--kp-aal);
  padding: var(--sp-5) var(--sp-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--sp-6) 0;
}

.callout__title {
  font-family: var(--ff-display);
  font-size: var(--fs-300);
  margin: 0 0 var(--sp-2);
  color: var(--kp-aal-deep);
}

.callout--info {
  border-color: var(--kp-indigo);
  background: #EFF3F8;
}

.callout--info .callout__title { color: var(--kp-indigo-deep); }

.callout--warning {
  border-color: var(--kp-turmeric-deep);
  background: #FAF1DC;
}

.callout--success {
  border-color: var(--kp-forest);
  background: #EAF0E5;
}

/* Stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-6);
}

.stat-tile {
  text-align: left;
  padding: var(--sp-6);
  border-left: 3px solid var(--kp-aal);
  background: var(--kp-tussar-soft);
}

.stat-tile dt {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-2);
}

.stat-tile dd {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-700);
  font-weight: 600;
  color: var(--kp-aal);
  line-height: 1;
}

.stat-tile dd small {
  display: block;
  font-size: var(--fs-100);
  font-weight: 400;
  color: var(--c-text-muted);
  margin-top: var(--sp-2);
  font-family: var(--ff-sans);
}

/* Map — Leaflet base canvas
   --------------------------------------------------------------
   Leaflet positions its internal panes with z-index up to 700
   (popups higher).  Without an isolated stacking context, those
   z-indices are computed against the document root and bleed
   above the sticky site header (z-index 50) when the user scrolls.
   `isolation: isolate` opens a new stacking context bound to the
   map; everything Leaflet renders stays scoped inside it.
   `overflow: hidden` clips edge tiles to the rounded border.        */
.map-canvas {
  width: 100%;
  height: 28rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-rule);
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  /* Defensive contain — prevents the canvas from triggering layout
     reflow on the rest of the page, which can otherwise happen
     during Leaflet's tile-load phase. */
  contain: layout paint;
}

/* Belt-and-braces — also pin Leaflet's own pane z-indices below
   the header's, in case a third-party Leaflet plugin sets a
   higher z-index that escapes the isolated context. */
.map-canvas .leaflet-pane,
.map-canvas .leaflet-top,
.map-canvas .leaflet-bottom {
  z-index: 1;
}
.map-canvas .leaflet-popup-pane,
.map-canvas .leaflet-tooltip-pane {
  z-index: 2;
}

/* Responsive image figure with credit */
figure.media {
  margin: 0;
}

figure.media img {
  width: 100%;
  border-radius: var(--radius-md);
}

figure.media figcaption {
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  margin-top: var(--sp-2);
}

figure.media figcaption .credit::before {
  content: "Photo: ";
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kp-aal);
  font-weight: 700;
  font-size: 0.85em;
}

/* Pull-quote */
.pullquote {
  font-family: var(--ff-display);
  font-size: var(--fs-500);
  line-height: 1.4;
  font-style: italic;
  border-left: 4px solid var(--kp-turmeric);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-8) 0;
  max-width: 42rem;
}

.pullquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-style: normal;
  font-size: var(--fs-100);
  color: var(--c-text-muted);
  font-family: var(--ff-sans);
}

/* Tabbed sections */
.tabs {
  border-bottom: 1px solid var(--c-rule);
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: var(--sp-3) var(--sp-5);
  font: inherit;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  color: var(--c-text-muted);
  cursor: pointer;
  margin-bottom: -1px;
}

.tab[aria-selected="true"] {
  border-bottom-color: var(--kp-aal);
  color: var(--kp-aal);
}

.tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Filter / search input on directory pages */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: end;
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  background: var(--kp-tussar-soft);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
}

.filter-bar > * { flex: 1 1 12rem; }

/* Inline checkbox / radio labels (e.g. the "Show" fieldset on the
   campus map). Each label is its own tap target — give it generous
   vertical padding so it clears the WCAG 2.5.5 24px floor and the
   recommended 48px on mobile, and align checkbox + text on the
   same baseline with a fixed gap. */
.filter-bar fieldset label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) 0;
  margin-bottom: 0;
  cursor: pointer;
}

/* On mobile the filter-bar stacks vertically; bump the inter-group
   gap so each label-input pair reads as its own row, not as one
   continuous column where labels and inputs run together. */
@media (max-width: 720px) {
  .filter-bar { gap: var(--sp-5); padding: var(--sp-4); }
  .filter-bar > * { flex: 1 1 100%; }
  .filter-bar label { margin-bottom: var(--sp-2); }
  /* Bump fieldset checkbox tap targets to the 48px mobile floor. */
  .filter-bar fieldset label { min-height: 48px; }
}

/* Document link — render-in-browser by default, with an explicit download.
   Convention: every official document is published as an HTML page (the
   primary, accessible surface). A "Download PDF" button is the ONLY way
   to download a copy. The pattern below renders both side by side. */
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.doc-link__view {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-4);
  background: var(--c-bg);
  color: var(--c-text);
  text-decoration: none;
  border: 1px solid var(--kp-rule-strong);
  border-radius: var(--radius-sm);
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-100);
  min-height: 36px;
}

.doc-link__view:hover, .doc-link__view:focus-visible {
  background: var(--kp-tussar);
  color: var(--kp-aal);
  border-color: var(--kp-aal);
  text-decoration: none;
}

.doc-link__view::before {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B1E1E' stroke-width='2'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

.doc-link__download {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  background: transparent;
  color: var(--c-text-muted);
  text-decoration: none;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-50);
  min-height: 32px;
  border: 1px dashed var(--c-rule);
  border-radius: var(--radius-sm);
}

.doc-link__download:hover, .doc-link__download:focus-visible {
  color: var(--kp-aal);
  border-color: var(--kp-aal);
  border-style: solid;
  text-decoration: none;
}

/* Forthcoming/disabled variant: still visible, not interactive. Used when
   a download is advertised but the artefact is not yet published. */
.doc-link__download.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.doc-link__download.is-disabled:hover,
.doc-link__download.is-disabled:focus-visible {
  color: var(--c-text-muted);
  border-color: var(--c-rule);
  border-style: dashed;
}

.doc-link__download::before {
  content: "↓";
  font-weight: 700;
  color: var(--kp-aal);
}

.doc-link__meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
}

/* Print-friendly toggle on long-form pages */
.print-link {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
}

/* ============================================================
   Mobile-only collapsible sections.
   Any <section data-collapsible> on a page becomes a tap-to-expand
   accordion below 720 px, using its first <h2>/<h3> as the trigger.
   Above 720 px the markup renders normally with no chrome.
   The JS in core.js wraps everything after the heading in a
   .section-collapse__body div and toggles aria-expanded on click.
   ============================================================ */
.section-collapse__heading {
  cursor: default;
  user-select: text;
}

@media (max-width: 720px) {
  .section-collapse .section-collapse__heading {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 2em;
    border-bottom: 1px solid var(--c-rule);
    padding-bottom: var(--sp-2);
    margin-top: var(--sp-5);
    margin-bottom: 0;
  }
  .section-collapse .section-collapse__heading:first-of-type {
    margin-top: 0;
  }
  .section-collapse .section-collapse__heading::after {
    content: "▾";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 0.7em;
    color: var(--c-text-muted);
    transition: transform 200ms ease;
  }
  .section-collapse .section-collapse__heading[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .section-collapse .section-collapse__heading:focus-visible {
    outline: 3px solid var(--kp-turmeric);
    outline-offset: 4px;
    border-radius: 2px;
  }
  .section-collapse .section-collapse__body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 280ms ease, opacity 200ms ease, padding 220ms ease, margin 220ms ease;
  }
  .section-collapse .section-collapse__heading[aria-expanded="true"] + .section-collapse__body {
    max-height: 12000px;
    opacity: 1;
    padding-top: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  @media (prefers-reduced-motion: reduce) {
    .section-collapse .section-collapse__body { transition: none; }
  }
}

/* ============================================================
   Recent events: homepage slideshow + /gallery/ page.
   The slideshow uses native CSS scroll-snap as the substrate.
   JS only adds prev/next controls, dot navigation, optional
   auto-advance (paused if prefers-reduced-motion), and the
   lightbox on the /gallery/ page. Functions without JS.
   ============================================================ */

.events__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.events__header h2 { margin: 0; }
.events__header .lead { max-width: 38rem; margin-top: var(--sp-2); }
.events__actions { flex-shrink: 0; }

.events-carousel {
  position: relative;
  isolation: isolate;
}

.events-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-5);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0 var(--sp-4);
  scrollbar-width: none;
}
.events-track::-webkit-scrollbar { display: none; }
.events-track:focus-visible { outline: 3px solid var(--kp-turmeric); outline-offset: 4px; border-radius: 6px; }

.events-slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin: 0;
  flex: 0 0 88%;
  min-width: 0;
}
@media (min-width: 700px) { .events-slide { flex-basis: calc(50% - var(--sp-3)); } }
@media (min-width: 1100px) { .events-slide { flex-basis: calc(33.333% - var(--sp-4)); } }
@media (min-width: 1400px) { .events-slide { flex-basis: 380px; } }

.events-slide__figure {
  margin: 0;
  background: var(--kp-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.events-slide__figure:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(0,0,0,0.25); }

.events-slide__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--kp-tussar-soft);
}

.events-slide__caption {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.events-slide__cat {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kp-aal);
  font-weight: 600;
  margin-bottom: 2px;
}
.events-slide__date {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.events-slide__title {
  font-family: var(--ff-display);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--c-text);
  margin: 4px 0 0;
  line-height: 1.35;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
}
.events-slide__sub {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  margin: 4px 0 0;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
}

.events-carousel__prev,
.events-carousel__next {
  position: absolute;
  top: calc(50% - 24px);
  width: 44px;
  height: 44px;
  background: var(--kp-paper);
  border: 1px solid var(--c-rule-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--c-text);
  z-index: 2;
  box-shadow: 0 2px 8px -3px rgba(0,0,0,0.18);
  transition: background 150ms, color 150ms;
}
.events-carousel__prev:hover,
.events-carousel__next:hover { background: var(--kp-aal); color: #fff; border-color: var(--kp-aal); }
.events-carousel__prev:focus-visible,
.events-carousel__next:focus-visible { outline: 3px solid var(--kp-turmeric); outline-offset: 2px; }
.events-carousel__prev { left: -22px; }
.events-carousel__next { right: -22px; }
.events-carousel__prev[disabled],
.events-carousel__next[disabled] { opacity: 0.35; cursor: default; }

@media (max-width: 760px) {
  .events-carousel__prev { left: 4px; }
  .events-carousel__next { right: 4px; }
}

.events-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: var(--sp-3);
}
.events-dots__btn {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--c-rule-strong);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 150ms, border-color 150ms, transform 150ms;
}
.events-dots__btn:hover { background: var(--kp-aal-tint); }
.events-dots__btn.is-active { background: var(--kp-aal); border-color: var(--kp-aal); transform: scale(1.15); }
.events-dots__btn:focus-visible { outline: 2px solid var(--kp-turmeric); outline-offset: 3px; }

.events-carousel__hint {
  text-align: center;
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  margin: var(--sp-2) 0 0;
  letter-spacing: 0.04em;
}

[data-theme="dark"] .events-slide__figure { background: var(--c-bg-warm); border-color: var(--c-rule); }
[data-theme="dark"] .events-carousel__prev,
[data-theme="dark"] .events-carousel__next { background: var(--c-bg-warm); color: var(--c-text); }

/* ----- /gallery/ page ----- */

.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: flex-start;
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-warm);
  border-radius: var(--radius-md);
}
@media (max-width: 600px) {
  .gallery-filter {
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }
  .gallery-filter__group { width: 100%; row-gap: 4px; }
  .gallery-filter__label { font-size: 11px; margin-right: 4px; }
}
.gallery-filter__group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gallery-filter__label {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  margin-right: 6px;
}
.gallery-filter__pill {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  padding: 4px 12px;
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius-pill);
  background: var(--kp-paper);
  color: var(--c-text);
  cursor: pointer;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.gallery-filter__pill:hover { background: var(--kp-aal-tint); }
.gallery-filter__pill.is-active { background: var(--kp-aal); color: #fff; border-color: var(--kp-aal); }
.gallery-filter__pill:focus-visible { outline: 2px solid var(--kp-turmeric); outline-offset: 2px; }

.gallery-count {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-4);
}

.gallery-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-5);
}
.gallery-grid__item.is-hidden { display: none; }

.gallery-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--c-text);
  background: var(--kp-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.gallery-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.25); border-color: var(--kp-aal); }
.gallery-card:focus-visible { outline: 3px solid var(--kp-turmeric); outline-offset: 2px; }

.gallery-card__media { display: block; }
.gallery-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--kp-tussar-soft);
}
.gallery-card__body {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gallery-card__cat {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kp-aal);
  font-weight: 600;
}
.gallery-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-200);
  font-weight: 600;
  line-height: 1.3;
}
.gallery-card__date {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
}

[data-theme="dark"] .gallery-card,
[data-theme="dark"] .gallery-filter { background: var(--c-bg-warm); border-color: var(--c-rule); }
[data-theme="dark"] .gallery-filter__pill { background: var(--c-bg-warm); color: var(--c-text); }

/* Lightbox */
.gallery-lightbox {
  position: fixed; inset: 0;
  background: rgba(20, 16, 10, 0.92);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: var(--sp-4);
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox__figure {
  margin: 0;
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-3);
}
.gallery-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
  border-radius: var(--radius-md);
  margin: 0 auto;
}
.gallery-lightbox__caption {
  color: var(--kp-tussar);
  text-align: center;
  font-family: var(--ff-sans);
  padding: 0 var(--sp-4);
}
.gallery-lightbox__cat {
  display: inline-block;
  font-size: var(--fs-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kp-turmeric);
  margin-right: var(--sp-3);
}
.gallery-lightbox__date {
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.gallery-lightbox__title {
  font-family: var(--ff-display);
  font-size: var(--fs-300);
  margin: var(--sp-2) auto 0;
  max-width: 60ch;
  color: var(--kp-tussar);
}
.gallery-lightbox__sub {
  font-size: var(--fs-100);
  color: var(--c-text-muted);
  margin: 4px 0 0;
}
.gallery-lightbox__close,
.gallery-lightbox__prev,
.gallery-lightbox__next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  color: var(--kp-tussar);
  border: 1px solid rgba(255,255,255,0.2);
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 28px;
  font-family: var(--ff-display);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 150ms;
}
.gallery-lightbox__close:hover,
.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover { background: rgba(255,255,255,0.18); }
.gallery-lightbox__close { top: 16px; right: 16px; font-size: 32px; line-height: 1; }
.gallery-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.gallery-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .events-track { scroll-behavior: auto; }
  .events-slide__figure,
  .gallery-card { transition: none; }
}

/* ============================================================
   Footer social media row.
   ============================================================ */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.site-footer__social-link {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  color: var(--kp-tussar);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  text-decoration: none;
  transition: background 150ms, color 150ms, border-color 150ms, transform 150ms;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background: var(--kp-aal);
  color: #fff;
  border-color: var(--kp-aal);
  transform: translateY(-1px);
}
.site-footer__social-link:focus-visible { outline: 2px solid var(--kp-turmeric); outline-offset: 2px; }
.site-footer__social-link svg { width: 18px; height: 18px; }
.site-footer__social-link[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* ============================================================
   Useful portals: government and academic partner gateways.
   Text-card design (no third-party logo files), VDU trade dress,
   real working URLs verified on 2026-04-25.
   ============================================================ */
.partners__header {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.partners__header h2 { margin: 0; }
.partners__lede {
  max-width: 42rem;
  margin: var(--sp-2) auto 0;
  color: var(--c-text-muted);
}

.partners__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

.partner-card {
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-decoration: none;
  color: var(--c-text);
  background: var(--kp-paper);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-md);
  position: relative;
  height: 100%;
  min-height: 9.5rem;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.partner-card::after {
  content: "↗";
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-size: var(--fs-200);
  font-family: var(--ff-display);
  color: var(--c-text-muted);
  transition: color 200ms;
}
.partner-card:hover,
.partner-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -14px rgba(0,0,0,0.25);
  border-color: var(--kp-aal);
}
.partner-card:hover::after,
.partner-card:focus-visible::after { color: var(--kp-aal); }
.partner-card:focus-visible { outline: 3px solid var(--kp-turmeric); outline-offset: 2px; }

.partner-card__mark {
  font-family: var(--ff-display);
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--kp-indigo);
  align-self: end;
}
.partner-card__mark-accent { color: var(--kp-aal); }

/* Per-portal marks: each draws on the org's actual identity in a
   restrained, typographic way -- no copyrighted logo files. */
.partner-card__mark--mo {
  color: var(--kp-forest);
  font-style: italic;
}
.partner-card__mark--nptel {
  color: var(--kp-aal);
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
  font-weight: 800;
}
.partner-card__mark--ndli {
  color: var(--kp-indigo-deep);
  font-size: var(--fs-300);
}
.partner-card__mark--dhe {
  color: var(--kp-ebony);
  font-size: var(--fs-300);
  border-left: 3px solid var(--kp-aal);
  padding-left: 8px;
}

.partner-card__sub {
  font-family: var(--ff-sans);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  line-height: 1.4;
}
.partner-card__host {
  font-family: var(--ff-mono);
  font-size: var(--fs-50);
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--c-rule);
  padding-top: 8px;
  margin-top: 2px;
}

[data-theme="dark"] .partner-card { background: var(--c-bg-warm); border-color: var(--c-rule); }
[data-theme="dark"] .partner-card__mark { color: #8FB3DC; }
[data-theme="dark"] .partner-card__mark--ndli { color: #8FB3DC; }
[data-theme="dark"] .partner-card__mark--dhe { color: var(--c-text); }
[data-theme="dark"] .partner-card__mark--mo { color: #7FB479; }

/* ============================================================
   Region & Heritage section — faint photographic backdrop.
   ------------------------------------------------------------
   A composed photograph of the Eastern Ghats with overlays of the
   regional cultural anchors (Sabara Srikhetra Jagannath, Kotpad
   weave on a working loom, Kotpad textile, Dhokra brass figures,
   Saora idital wall painting). Sits VERY FAINT behind the text so
   it reads as place rather than illustration.
   Layering, bottom up:
     1. Solid ebony from .section--ebony (already present)
     2. The photograph at low opacity, faded toward bottom-right
        where the brass figures and Saora art live
     3. A heavy dark gradient overlay biased to the LEFT where the
        typography lives, pulling that side fully dark so the
        cream copy reads at full contrast
     4. Foreground content (eyebrow, h2, paragraphs) at z-index 1
   Accessibility:
     - Image suppressed in high-contrast, forced-colors,
       prefers-contrast:more, prefers-reduced-data, and print
     - Foreground typography is unaffected; reads identically with
       or without the image. */
.section--heritage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section--heritage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../../assets/img/koraput-heritage-1280.webp');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  opacity: 0.18;
  /* A horizontal mask fading the photograph from full visibility on
     the right toward fully transparent on the left, so the text
     column on the left sits on a clean dark surface and the photo
     reads as a quiet companion on the right. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 25%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.95) 85%, rgba(0,0,0,0.7) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 25%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.95) 85%, rgba(0,0,0,0.7) 100%);
}

.section--heritage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(95deg, rgba(20,12,7,0.70) 0%, rgba(20,12,7,0.45) 40%, rgba(20,12,7,0.20) 70%, rgba(20,12,7,0.40) 100%);
  pointer-events: none;
}

/* Foreground content sits above the backdrop layers. */
.section--heritage > .container { position: relative; z-index: 1; }

@media (min-width: 1100px) {
  .section--heritage::before {
    background-image: url('../../assets/img/koraput-heritage.webp');
  }
}

@media (max-width: 700px) {
  .section--heritage::before {
    background-image: url('../../assets/img/koraput-heritage-768.webp');
    opacity: 0.14;
    /* On mobile the text column spans full width, so we cannot rely
       on a left-clean / right-photo split. The image is dimmer and
       the dark overlay below covers the whole band. */
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.85) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.85) 100%);
  }
  .section--heritage::after {
    background: linear-gradient(180deg, rgba(20,12,7,0.78) 0%, rgba(20,12,7,0.62) 50%, rgba(20,12,7,0.78) 100%);
  }
}

/* Accessibility-mode suppression — reading must not depend on the photograph. */
[data-contrast="high"] .section--heritage::before,
[data-contrast="high"] .section--heritage::after {
  display: none !important;
}
[data-contrast="high"] .section--heritage {
  background: #000000 !important;
  color: #FFFFFF !important;
}

@media (forced-colors: active) {
  .section--heritage::before,
  .section--heritage::after { display: none !important; }
  .section--heritage {
    background: Canvas !important;
    color: CanvasText !important;
  }
}

@media (prefers-contrast: more) {
  .section--heritage::before,
  .section--heritage::after { display: none !important; }
}

@media (prefers-reduced-data: reduce) {
  .section--heritage::before { display: none !important; }
}

@media print {
  .section--heritage::before,
  .section--heritage::after { display: none !important; }
}

/* ============================================================
   Mobile table responsiveness (≤720px).
   Data-heavy tables with 3+ columns (programmes, academic-calendar,
   time-table, fee schedule) compress unreadably at 375px. Switch
   each table to `display: block` so it becomes its own horizontal
   scroller; cell content keeps its intrinsic width instead of being
   crushed into 2- to 3-line wraps. The base.css mobile pass keeps
   cell font and padding tightened.
   ============================================================ */
@media (max-width: 720px) {
  .container table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .container table > caption {
    display: block;
  }
  /* Keep short header labels (e.g. "Seats", "Hostel", "Date") on a
     single line; the table is its own horizontal scroller, so wider
     headers do not break the layout. Stops the "Se / at / s" wrap
     observed on hostels.html at 375px. */
  .container table th {
    white-space: nowrap;
  }
}